Merge pull request #8 from alantoa/feature/control-props

Add a couple of video playing props for greater control and manipulation of video playing

Author: alantoa

README.md

@@ -302,4 +302,25 @@ The `<VideoPlayer/>` component has the following configuration properties:
     <td>❌</td>
     <td>undefined</td>
   </tr>
+  <tr>
+    <td>children</td>
+    <td>JSX</td>
+    <td>child components to be rendered under video player controls</td>
+    <td>❌</td>
+    <td>undefined</td>
+  </tr>
+  <tr>
+    <td>onPostProgress</td>
+    <td>function</td>
+    <td>callback function that is called every progressUpdateInterval milliseconds with info about which position the media is currently playing</td>
+    <td>❌</td>
+    <td>undefined
+  </tr>
+  <tr>
+    <td>onPostSeek</td>
+    <td>function</td>
+    <td>callback function that is called when a seek completes</td>
+    <td>❌</td>
+    <td>undefined
+  </tr>
 </table>

example/src/screens/video.tsx

@@ -569,6 +569,8 @@ export const VideoScreen = ({
               resizeMode="cover"
               isFullScreen={isFullScreen}
               disableControl={diasbled}
+              onPostProgress={() => console.log('onProgress')}
+              onPostSeek={() => console.log('onSeek')}
               renderBackIcon={() => (
                 <Icon
                   name="a-ic_chevrondown_16"

src/index.tsx

@@ -95,6 +95,9 @@ export type VideoProps = VideoProperties & {
   onVideoPlayEnd?: () => void;
   onAutoPlayText?: string;
   offAutoPlayText?: string;
+  children?: any;
+  onPostProgress?: (data: OnProgressData) => void;
+  onPostSeek?: (data: OnSeekData) => void;
 };
 export type VideoPlayerRef = {
   /**
@@ -160,6 +163,9 @@ const VideoPlayer = forwardRef<VideoPlayerRef, VideoProps>(
       onVideoPlayEnd,
       onAutoPlayText = 'Autoplay is on',
       offAutoPlayText = 'Autoplay is off',
+      children,
+      onPostProgress,
+      onPostSeek,
       ...rest
     },
     ref,
@@ -677,6 +683,9 @@ const VideoPlayer = forwardRef<VideoPlayerRef, VideoProps>(
       } else {
         isSeeking.current = false;
       }
+      if (onPostSeek) {
+        onPostSeek(data);
+      }
     };
 
     /**
@@ -685,13 +694,17 @@ const VideoPlayer = forwardRef<VideoPlayerRef, VideoProps>(
      *
      * @param {object} data The video meta data
      */
-    const onProgress = ({ currentTime: cTime }: OnProgressData) => {
+     const onProgress = (data: OnProgressData) => {
+      const { currentTime: cTime } = data;
       if (!isScrubbing.value) {
         if (!isSeeking.current) {
           progress.value = cTime;
         }
         setCurrentTime(cTime);
       }
+      if (onPostProgress) {
+        onPostProgress(data);
+      }
     };
     /**
      * on replay video
@@ -838,6 +851,7 @@ const VideoPlayer = forwardRef<VideoPlayerRef, VideoProps>(
               onProgress={onProgress}
               fullscreenAutorotate={true}
             />
+            {Boolean(children) && children}
             <VideoLoader loading={loading} />
             <Animated.View style={StyleSheet.absoluteFillObject}>
               <Animated.View style={[styles.controlView, controlViewStyles]}>