diff --git a/README.md b/README.md index c0cf9e1..91bbe1b 100644 --- a/README.md +++ b/README.md @@ -121,7 +121,7 @@ These are the various controls that you can turn on/off as needed. All of these | disableFullscreen | Hide the fullscreen button | | disablePlayPause | Hide the play/pause toggle and the rewind/forward buttons | | disableSeekButtons | Hide the rewind/forward buttons (but not play/pause) | -| disableSeekbar | Hide the seekbar | +| disableSeekBar | Hide the seekbar | | disableVolume | Hide the Volume control | | disableTimer | Hide the timer | | disableBack | Hide the back button | diff --git a/src/VideoPlayer.tsx b/src/VideoPlayer.tsx index faf4bb8..7175dc5 100644 --- a/src/VideoPlayer.tsx +++ b/src/VideoPlayer.tsx @@ -62,7 +62,7 @@ export const VideoPlayer = (props: VideoPlayerProps) => { disableVolume = false, disableFullscreen = false, disableTimer = false, - disableSeekbar = false, + disableSeekBar = false, disablePlayPause = false, disableSeekButtons = false, navigator, @@ -100,6 +100,11 @@ export const VideoPlayer = (props: VideoPlayerProps) => { const [error, setError] = useState(false); const [duration, setDuration] = useState(0); + // Seeking variables + const [pressCount, setPressCount] = useState(0); + const [timeoutId, setTimeoutId] = useState(null); + const [rewindPressCount, setRewindPressCount] = useState(0); + const videoRef = props.videoRef || _videoRef; const toggleFullscreen = () => setIsFullscreen((prevState) => !prevState); @@ -287,6 +292,71 @@ export const VideoPlayer = (props: VideoPlayerProps) => { inverted: invertedPan, }); + const handleRewindPress = () => { + const x: NodeJS.Timeout = setTimeout(() => { + if (rewindPressCount === 3) { + setRewindPressCount(0); + } else { + let newCount = rewindPressCount + 1; + setRewindPressCount(newCount); + } + }, 500); + + setTimeoutId(x); + + return function () { + setRewindPressCount(0); + clearTimeout(timeoutId as unknown as number); + }; + }; + + // I only have this working for fast forward right now + const handleFastForwardPress = () => { + const x: NodeJS.Timeout = setTimeout(() => { + if (pressCount === 3) { + setPressCount(0); + } else { + let newCount = pressCount + 1; + setPressCount(newCount); + } + }, 500); + + setTimeoutId(x); + + return function () { + setPressCount(0); + clearTimeout(timeoutId as unknown as number); + }; + }; + + useEffect(() => { + console.log('props.disableSeekbar? ', props.disableSeekBar); + }, [disableSeekBar]); + + useEffect(() => { + let skipTime = duration * 0.0013 * rewindPressCount; + + if (currentTime < duration && rewindPressCount === 1) { + videoRef?.current?.seek(currentTime - rewindTime); + } else if (currentTime < duration && rewindPressCount > 1) { + videoRef?.current?.seek(currentTime - skipTime); + } else { + setPaused(false); + } + }, [rewindPressCount, currentTime, duration, videoRef]); + + useEffect(() => { + let skipTime = duration * 0.0013 * pressCount; + + if (currentTime < duration && pressCount === 1) { + videoRef?.current?.seek(currentTime + rewindTime); + } else if (currentTime < duration && pressCount > 1) { + videoRef?.current?.seek(currentTime + skipTime); + } else { + setPaused(false); + } + }, [pressCount, currentTime, duration, videoRef]); + useEffect(() => { if (currentTime >= duration) { videoRef?.current?.seek(0); @@ -322,8 +392,12 @@ export const VideoPlayer = (props: VideoPlayerProps) => { useEffect(() => { if (_paused) { + setPressCount(0); + setRewindPressCount(0); typeof events.onPause === 'function' && events.onPause(); } else { + setPressCount(0); + setRewindPressCount(0); typeof events.onPlay === 'function' && events.onPlay(); } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -433,10 +507,12 @@ export const VideoPlayer = (props: VideoPlayerProps) => { togglePlayPause={togglePlayPause} resetControlTimeout={resetControlTimeout} showControls={showControls} - onPressRewind={() => + onPressSkipBackward={() => videoRef?.current?.seek(currentTime - rewindTime) } - onPressForward={() => + onPressRewind={() => handleRewindPress()} + onPressForward={() => handleFastForwardPress()} + onPressSkipForward={() => videoRef?.current?.seek(currentTime + rewindTime) } /> @@ -444,7 +520,7 @@ export const VideoPlayer = (props: VideoPlayerProps) => { animations={animations} panHandlers={seekPanResponder.panHandlers} disableTimer={disableTimer} - disableSeekbar={disableSeekbar} + disableSeekBar={disableSeekBar} showHours={showHours} showDuration={showDuration} paused={_paused} diff --git a/src/assets/img/left-seek-rewind-2x.png b/src/assets/img/left-seek-rewind-2x.png new file mode 100644 index 0000000..59b5d0b Binary files /dev/null and b/src/assets/img/left-seek-rewind-2x.png differ diff --git a/src/assets/img/left-seek-rewind-3x.png b/src/assets/img/left-seek-rewind-3x.png new file mode 100644 index 0000000..0f5ee3f Binary files /dev/null and b/src/assets/img/left-seek-rewind-3x.png differ diff --git a/src/assets/img/left-seek-rewind.png b/src/assets/img/left-seek-rewind.png new file mode 100644 index 0000000..7f4d6b5 Binary files /dev/null and b/src/assets/img/left-seek-rewind.png differ diff --git a/src/assets/img/right-seek-forward-2x.png b/src/assets/img/right-seek-forward-2x.png new file mode 100644 index 0000000..f67c755 Binary files /dev/null and b/src/assets/img/right-seek-forward-2x.png differ diff --git a/src/assets/img/right-seek-forward-3x.png b/src/assets/img/right-seek-forward-3x.png new file mode 100644 index 0000000..69f0c73 Binary files /dev/null and b/src/assets/img/right-seek-forward-3x.png differ diff --git a/src/assets/img/right-seek-forward.png b/src/assets/img/right-seek-forward.png new file mode 100644 index 0000000..530917f Binary files /dev/null and b/src/assets/img/right-seek-forward.png differ diff --git a/src/components/BottomControls.tsx b/src/components/BottomControls.tsx index 6d4dce3..a1a8db6 100644 --- a/src/components/BottomControls.tsx +++ b/src/components/BottomControls.tsx @@ -20,7 +20,7 @@ interface BottomControlsProps { animations: VideoAnimations; panHandlers: GestureResponderHandlers; disableTimer: boolean; - disableSeekbar: boolean; + disableSeekBar: boolean; showDuration: boolean; showHours: boolean; paused: boolean; @@ -43,7 +43,7 @@ export const BottomControls = ({ showControls, animations, panHandlers, - disableSeekbar, + disableSeekBar, disableTimer, duration, seekColor, @@ -78,7 +78,7 @@ export const BottomControls = ({ ); - const seekbarControl = disableSeekbar ? ( + const seekbarControl = disableSeekBar ? ( ) : ( void; onPressRewind: () => void; + onPressSkipForward: () => void; + onPressSkipBackward: () => void; } const play = require('../../assets/img/play.png'); const pause = require('../../assets/img/pause.png'); const rewind = require('../../assets/img/rewind.png'); const forward = require('../../assets/img/forward.png'); +const skipForward = require('../../assets/img/right-seek-forward-3x.png'); +const skipBackward = require('../../assets/img/left-seek-rewind-3x.png'); export const PlayPause = ({ animations, @@ -34,6 +38,8 @@ export const PlayPause = ({ showControls, onPressForward, onPressRewind, + onPressSkipForward, + onPressSkipBackward, }: PlayPauseProps) => { let source = paused ? play : pause; @@ -58,6 +64,14 @@ export const PlayPause = ({ ) : null} + {!disableSeekButtons ? ( + + + + ) : null} + {!disableSeekButtons ? ( + + + + ) : null} {!disableSeekButtons ? (