Add Player
parent
c5ae8033a5
commit
004b2002f4
@ -1,26 +1,74 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react'
|
||||
import React, { useState, useEffect, useRef } from 'react'
|
||||
|
||||
export const PlayerControl = ({ interval, onTick, onStart, onStop }) => {
|
||||
const dispatch = useDispatch()
|
||||
const [isPlaying, setPlaying] = useState(false)
|
||||
import { FaPlay, FaPause, FaStop } from 'react-icons/fa'
|
||||
|
||||
const [handle, setHandle] = useState(null)
|
||||
function safeCall(fn) {
|
||||
typeof fn === 'function' && fn()
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
console.log('effect fired', isPlaying)
|
||||
clearInterval(handle)
|
||||
if (isPlaying) {
|
||||
setHandle(setInterval(() => dispatch(incrementSegment()), 500))
|
||||
}
|
||||
}, [handle, isPlaying])
|
||||
export const Player = ({ onTick, onStart, onStop, onPause, delay }) => {
|
||||
const [isRunning, start, stop] = usePlayer(stop => onTick(stop), delay)
|
||||
|
||||
const handleStart = () => {
|
||||
safeCall(onStart)
|
||||
start()
|
||||
}
|
||||
|
||||
const handleStop = () => {
|
||||
safeCall(onStop)
|
||||
stop()
|
||||
}
|
||||
|
||||
const handlePause = () => {
|
||||
safeCall(onPause)
|
||||
stop()
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button onClick={() => dispatch(stop())}>{'stop'}</button>
|
||||
<button onClick={() => dispatch(pause())}>{'pause'}</button>
|
||||
<button onClick={() => dispatch(start())}>{'play'}</button>
|
||||
<div>playing: {isPlaying.toString()}</div>
|
||||
<div>interval: {handle}</div>
|
||||
<button onClick={handleStop}>
|
||||
<FaStop />
|
||||
</button>
|
||||
{isRunning && (
|
||||
<button onClick={handlePause}>
|
||||
<FaPause />
|
||||
</button>
|
||||
)}{' '}
|
||||
{!isRunning && (
|
||||
<button onClick={handleStart}>
|
||||
<FaPlay />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function usePlayer(onTick, delay) {
|
||||
const [isRunning, setRunning] = useState(false)
|
||||
const start = () => setRunning(true)
|
||||
const stop = () => setRunning(false)
|
||||
|
||||
useInterval(() => onTick(stop), isRunning ? delay : null)
|
||||
return [isRunning, start, stop]
|
||||
}
|
||||
|
||||
// from: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
|
||||
function useInterval(callback, delay) {
|
||||
const savedCallback = useRef()
|
||||
|
||||
// Remember the latest callback.
|
||||
useEffect(() => {
|
||||
savedCallback.current = callback
|
||||
}, [callback])
|
||||
|
||||
// Set up the interval.
|
||||
useEffect(() => {
|
||||
function tick() {
|
||||
savedCallback.current()
|
||||
}
|
||||
if (delay !== null) {
|
||||
let id = setInterval(tick, delay)
|
||||
return () => clearInterval(id)
|
||||
}
|
||||
}, [delay])
|
||||
}
|
||||
|
@ -1,40 +0,0 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react'
|
||||
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import { selectPlaying, hasNextSegment } from '../store/selectors'
|
||||
import { start, stop, pause, incrementSegment } from '../store/actions'
|
||||
|
||||
export const PlayerControl = ({ onTick }) => {
|
||||
const dispatch = useDispatch()
|
||||
const isPlaying = useSelector(selectPlaying)
|
||||
const hasNext = useSelector(hasNextSegment)
|
||||
const wpm = useSelector(state => state.wpm)
|
||||
|
||||
const [handle, setHandle] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
clearInterval(handle)
|
||||
if (isPlaying) {
|
||||
setHandle(setInterval(() => dispatch(incrementSegment()), 60000 / wpm))
|
||||
}
|
||||
}, [isPlaying, wpm])
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasNext) dispatch(pause())
|
||||
}, [hasNext, dispatch])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button onClick={() => dispatch(stop())}>{'stop'}</button>
|
||||
{isPlaying && (
|
||||
<button onClick={() => dispatch(pause())}>{'pause'}</button>
|
||||
)}{' '}
|
||||
{!isPlaying && (
|
||||
<button onClick={() => dispatch(start())}>{'play'}</button>
|
||||
)}
|
||||
<div>playing: {isPlaying.toString()}</div>
|
||||
<div>interval: {handle}</div>
|
||||
<div>has next: {hasNext.toString()}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
@ -0,0 +1,27 @@
|
||||
import React from 'react'
|
||||
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import { hasNextSegment } from '../store/selectors'
|
||||
import { incrementSegment, resetSegment } from '../store/actions'
|
||||
import { Player } from './Player'
|
||||
|
||||
export const RsvpPlayer = () => {
|
||||
const dispatch = useDispatch()
|
||||
const hasNext = useSelector(hasNextSegment)
|
||||
const wpm = useSelector(state => state.wpm)
|
||||
|
||||
const onTick = stop => {
|
||||
if (!hasNext) return stop()
|
||||
dispatch(incrementSegment())
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Player
|
||||
delay={60000 / wpm}
|
||||
onTick={onTick}
|
||||
onStop={() => dispatch(resetSegment())}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue