feat: sync behavior with other video player

mybigday · Aug 31, 2023 · 48a0973 · 48a0973
1 parent 68e06aa
commit 48a0973
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 12 deletions.
diff --git a/android/src/main/java/com/fugood/reactnativevideoplayer/ReactNativeVideoPlayerView.kt b/android/src/main/java/com/fugood/reactnativevideoplayer/ReactNativeVideoPlayerView.kt
@@ -108,7 +108,7 @@ class ReactNativeVideoPlayerView : FrameLayout, SurfaceHolder.Callback,
       return
     }
     fireEvent("progress", Arguments.createMap().apply {
-      putDouble("position", (player?.currentPosition ?: 0).toDouble() / 1000)
+      putDouble("currentTime", (player?.currentPosition ?: 0).toDouble() / 1000)
       putDouble("duration", (player?.duration ?: 0).toDouble() / 1000)
     })
     if (player?.isPlaying == true) {

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -25,11 +25,11 @@ export default function App() {
             console.log(`[ready-${i}] ${performance.now()}`)
           }
           onLoad={() => console.log(`[load-${i}] ${performance.now()}`)}
-          onProgress={({ nativeEvent: { position, duration } }) =>
-            console.log(`[progress-${i}] ${position} / ${duration}`)
+          onProgress={({ currentTime, duration }) =>
+            console.log(`[progress-${i}] ${currentTime} / ${duration}`)
           }
           onEnd={next}
-          onError={({ nativeEvent }) => console.error(nativeEvent)}
+          onError={(err) => console.error(err)}
         />
       )}
     </View>

diff --git a/ios/ReactNativeVideoPlayerView.mm b/ios/ReactNativeVideoPlayerView.mm
@@ -317,12 +317,12 @@ - (void)emitOnEnd
   }
 }
 
-- (void)emitOnProgress:(float)position duration:(float)duration
+- (void)emitOnProgress:(float)currentTime duration:(float)duration
 {
   if (_eventEmitter) {
     std::dynamic_pointer_cast<const ReactNativeVideoPlayerViewEventEmitter>(_eventEmitter)
       ->onProgress(ReactNativeVideoPlayerViewEventEmitter::OnProgress{
-        .position = position,
+        .currentTime = currentTime,
         .duration = duration,
       });
   }
@@ -456,11 +456,11 @@ - (void)emitOnEnd
   }
 }
 
-- (void)emitOnProgress:(float)position duration:(float)duration
+- (void)emitOnProgress:(float)currentTime duration:(float)duration
 {
   if (self.onProgress) {
     self.onProgress(@{
-      @"position": @(position),
+      @"currentTime": @(currentTime),
       @"duration": @(duration),
     });
   }

diff --git a/src/ReactNativeVideoPlayerViewNativeComponent.ts b/src/ReactNativeVideoPlayerViewNativeComponent.ts
@@ -11,7 +11,7 @@ import type {
 } from 'react-native/Libraries/Types/CodegenTypes';
 
 export type ProgressEvent = Readonly<{
-  position: Float;
+  currentTime: Float;
   duration: Float;
 }>;
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,11 +1,38 @@
-import React, { useImperativeHandle, forwardRef, useRef } from 'react';
+import React, {
+  useImperativeHandle,
+  forwardRef,
+  useRef,
+  useCallback,
+} from 'react';
 import Player, { Commands } from './ReactNativeVideoPlayerViewNativeComponent';
 import type { VideoPlayerProps } from './ReactNativeVideoPlayerViewNativeComponent';
 export * from './ReactNativeVideoPlayerViewNativeComponent';
 
 type PlayerRef = InstanceType<typeof Player>;
+type Modify<T, R> = Omit<T, keyof R> & R;
 
-export default forwardRef(function VideoPlayer(props: VideoPlayerProps, ref) {
+export type Props = Modify<
+  VideoPlayerProps,
+  {
+    onReadyForDisplay?: () => void;
+    onLoad?: () => void;
+    onProgress?: (event: { currentTime: number; duration: number }) => void;
+    onEnd?: () => void;
+    onError?: (event: { message: string }) => void;
+    onBuffer?: (event: { isBuffering: boolean }) => void;
+  }
+>;
+
+export default forwardRef(function VideoPlayer(props: Props, ref) {
+  const {
+    onReadyForDisplay,
+    onLoad,
+    onProgress,
+    onEnd,
+    onError,
+    onBuffer,
+    ...rest
+  } = props;
   const nativeRef = useRef<PlayerRef>(null);
 
   useImperativeHandle(ref, () => ({
@@ -16,5 +43,37 @@ export default forwardRef(function VideoPlayer(props: VideoPlayerProps, ref) {
     stop: () => nativeRef.current && Commands.stop(nativeRef.current),
   }));
 
-  return <Player {...props} ref={nativeRef} />;
+  return (
+    <Player
+      {...rest}
+      ref={nativeRef}
+      onReadyForDisplay={useCallback(() => {
+        onReadyForDisplay && onReadyForDisplay();
+      }, [onReadyForDisplay])}
+      onLoad={useCallback(() => {
+        onLoad && onLoad();
+      }, [onLoad])}
+      onProgress={useCallback(
+        (event) => {
+          onProgress && onProgress(event.nativeEvent);
+        },
+        [onProgress]
+      )}
+      onEnd={useCallback(() => {
+        onEnd && onEnd();
+      }, [onEnd])}
+      onError={useCallback(
+        (event) => {
+          onError && onError(event.nativeEvent);
+        },
+        [onError]
+      )}
+      onBuffer={useCallback(
+        (event) => {
+          onBuffer && onBuffer(event.nativeEvent);
+        },
+        [onBuffer]
+      )}
+    />
+  );
 });