Seekbar controls feature

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       |

src/VideoPlayer.tsx

@@ -62,7 +62,7 @@
     disableVolume = false,
     disableFullscreen = false,
     disableTimer = false,
-    disableSeekbar = false,
+    disableSeekBar = false,
     disablePlayPause = false,
     disableSeekButtons = false,
     navigator,
@@ -100,6 +100,11 @@
   const [error, setError] = useState(false);
   const [duration, setDuration] = useState(0);
 
+  // Seeking variables
+  const [pressCount, setPressCount] = useState(0);
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
+  const [rewindPressCount, setRewindPressCount] = useState(0);
+
   const videoRef = props.videoRef || _videoRef;
 
   const toggleFullscreen = () => setIsFullscreen((prevState) => !prevState);
@@ -287,6 +292,71 @@
     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 @@
 
   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,18 +507,20 @@
               togglePlayPause={togglePlayPause}
               resetControlTimeout={resetControlTimeout}
               showControls={showControls}
-              onPressRewind={() =>
+              onPressSkipBackward={() =>
                 videoRef?.current?.seek(currentTime - rewindTime)
               }
-              onPressForward={() =>
+              onPressRewind={() => handleRewindPress()}
+              onPressForward={() => handleFastForwardPress()}
+              onPressSkipForward={() =>
                 videoRef?.current?.seek(currentTime + rewindTime)
               }
             />
             <BottomControls
               animations={animations}
               panHandlers={seekPanResponder.panHandlers}
               disableTimer={disableTimer}
-              disableSeekbar={disableSeekbar}
+              disableSeekBar={disableSeekBar}
               showHours={showHours}
               showDuration={showDuration}
               paused={_paused}

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 = ({
     </Timer>
   );
 
-  const seekbarControl = disableSeekbar ? (
+  const seekbarControl = disableSeekBar ? (
     <NullControl />
   ) : (
     <Seekbar

src/components/PlayPause/PlayPause.tsx

@@ -17,12 +17,16 @@
   showControls: boolean;
   onPressForward: () => 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 @@
   showControls,
   onPressForward,
   onPressRewind,
+  onPressSkipForward,
+  onPressSkipBackward, 
 }: PlayPauseProps) => {
   let source = paused ? play : pause;
 
@@ -58,6 +64,14 @@
           <Image source={rewind} resizeMode={'contain'} style={styles.rewind} />
         </Control>
       ) : null}
+      {!disableSeekButtons ? (
+        <Control
+          disabled={!showControls}
+          callback={onPressSkipBackward}
+          resetControlTimeout={resetControlTimeout}>
+          <Image source={skipBackward} resizeMode={'contain'} style={styles.seek} />
+        </Control>
+      ) : null}
       <Control
         disabled={!showControls}
         callback={togglePlayPause}
@@ -67,6 +81,14 @@
         {...(Platform.isTV ? {hasTVPreferredFocus: showControls} : {})}>
         <Image source={source} resizeMode={'contain'} style={styles.play} />
       </Control>
+      {!disableSeekButtons ? (
+        <Control
+          disabled={!showControls}
+          callback={onPressSkipForward}
+          resetControlTimeout={resetControlTimeout}>
+          <Image source={skipForward} resizeMode={'contain'} style={styles.seek} />
+        </Control>
+      ) : null}
       {!disableSeekButtons ? (
         <Control
           disabled={!showControls}

src/components/PlayPause/styles.ts

@@ -17,5 +17,12 @@
     alignItems: 'center',
   },
   play: {},
-  rewind: {},
+  seek: {
+    height: 29, 
+    width: 29,
+  },
+  rewind: {
+    height: 44, 
+    width: 44,
+  },
 });

src/types.ts

@@ -189,7 +189,7 @@ export interface VideoPlayerProps extends VideoProperties {
    *
    * @default false
    */
-  disableSeekbar?: boolean;
+  disableSeekBar?: boolean;
 
   /**
    * Hide the play/pause toggle and the rewind/forward buttons