Merge remote-tracking branch 'origin/master' into ivan/merging-shaka-hls

Reviewed-on: #7
Reviewed-by: Ivan Malison <ivanmalison@gmail.com>

android/src/main/java/com/brentvatne/common/react/VideoEventEmitter.kt

@@ -22,6 +22,7 @@ enum class EventTypes(val eventName: String) {
     EVENT_BANDWIDTH("onVideoBandwidthUpdate"),
     EVENT_CONTROLS_VISIBILITY_CHANGE("onControlsVisibilityChange"),
     EVENT_SEEK("onVideoSeek"),
+    EVENT_SEEK_COMPLETE("onVideoSeekComplete"),
     EVENT_END("onVideoEnd"),
     EVENT_FULLSCREEN_WILL_PRESENT("onVideoFullscreenPlayerWillPresent"),
     EVENT_FULLSCREEN_DID_PRESENT("onVideoFullscreenPlayerDidPresent"),
@@ -71,6 +72,7 @@ class VideoEventEmitter {
     lateinit var onVideoBandwidthUpdate: (bitRateEstimate: Long, height: Int, width: Int, trackId: String?) -> Unit
     lateinit var onVideoPlaybackStateChanged: (isPlaying: Boolean, isSeeking: Boolean) -> Unit
     lateinit var onVideoSeek: (currentPosition: Long, seekTime: Long) -> Unit
+    lateinit var onVideoSeekComplete: (currentPosition: Long) -> Unit
     lateinit var onVideoEnd: () -> Unit
     lateinit var onVideoFullscreenPlayerWillPresent: () -> Unit
     lateinit var onVideoFullscreenPlayerDidPresent: () -> Unit
@@ -174,6 +176,11 @@ class VideoEventEmitter {
                     putDouble("seekTime", seekTime / 1000.0)
                 }
             }
+            onVideoSeekComplete = { currentPosition ->
+                event.dispatch(EventTypes.EVENT_SEEK_COMPLETE) {
+                    putDouble("currentTime", currentPosition / 1000.0)
+                }
+            }
             onVideoEnd = {
                 event.dispatch(EventTypes.EVENT_END)
             }

android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java

@@ -23,6 +23,7 @@ import android.os.IBinder;
 import android.os.Looper;
 import android.os.Message;
 import android.text.TextUtils;
+import android.util.Log;
 import android.view.View;
 import android.view.accessibility.CaptioningManager;
 import android.widget.FrameLayout;
@@ -221,6 +222,7 @@ public class ReactExoplayerView extends FrameLayout implements
     */
     private boolean isSeeking = false;
     private long seekPosition = -1;
+    private boolean isSeekInProgress = false;
 
     // Props from React
     private Source source = new Source();
@@ -300,6 +302,16 @@ public class ReactExoplayerView extends FrameLayout implements
         }
     };
 
+    private void handleSeekCompletion() {
+        if (player != null && player.getPlaybackState() == Player.STATE_READY && isSeekInProgress) {
+            Log.d("ReactExoplayerView", "handleSeekCompletion: currentPosition=" + player.getCurrentPosition());
+            eventEmitter.onVideoSeekComplete.invoke(player.getCurrentPosition());
+            isSeeking = false;
+            seekPosition = -1;
+            isSeekInProgress = false;
+        }
+    }
+
     public double getPositionInFirstPeriodMsForCurrentWindow(long currentPosition) {
         Timeline.Window window = new Timeline.Window();
         if(!player.getCurrentTimeline().isEmpty()) {
@@ -518,12 +530,21 @@ public class ReactExoplayerView extends FrameLayout implements
 
         builder.setSingleChoiceItems(speedOptions, selectedSpeedIndex, (dialog, which) -> {
             selectedSpeedIndex = which;
-            float speed = switch (which) {
-                case 0 -> 0.5f;
-                case 2 -> 1.5f;
-                case 3 -> 2.0f;
-                default -> 1.0f;
-            };
+            float speed;
+            switch (which) {
+                case 0:
+                    speed = 0.5f;
+                    break;
+                case 1:
+                    speed = 1.0f;
+                    break;
+                case 2:
+                    speed = 1.5f;
+                    break;
+                default:
+                    speed = 1.0f;
+                    break;
+            }
             setRateModifier(speed);
         });
         builder.show();
@@ -842,7 +863,8 @@ public class ReactExoplayerView extends FrameLayout implements
                 .setBandwidthMeter(bandwidthMeter)
                 .setLoadControl(loadControl)
                 .setMediaSourceFactory(mediaSourceFactory)
-                .build();
+            .build();
+        player.addListener(self);
         ReactNativeVideoManager.Companion.getInstance().onInstanceCreated(instanceId, player);
         refreshDebugState();
         player.addListener(self);
@@ -1451,6 +1473,7 @@ public class ReactExoplayerView extends FrameLayout implements
         if (events.contains(Player.EVENT_PLAYBACK_STATE_CHANGED) || events.contains(Player.EVENT_PLAY_WHEN_READY_CHANGED)) {
             int playbackState = player.getPlaybackState();
             boolean playWhenReady = player.getPlayWhenReady();
+            Log.d("ReactExoplayerView", "onEvents: playbackState=" + playbackState + ", playWhenReady=" + playWhenReady);
             String text = "onStateChanged: playWhenReady=" + playWhenReady + ", playbackState=";
             eventEmitter.onPlaybackRateChange.invoke(playWhenReady && playbackState == ExoPlayer.STATE_READY ? 1.0f : 0.0f);
             switch (playbackState) {
@@ -1484,6 +1507,10 @@ public class ReactExoplayerView extends FrameLayout implements
                         playerControlView.show();
                     }
                     setKeepScreenOn(preventsDisplaySleepDuringVideoPlayback);
+                    Log.d("ReactExoplayerView", "Player STATE_READY: currentPosition=" + player.getCurrentPosition());
+                    if (isSeekInProgress) {
+                        handleSeekCompletion();
+                    }
                     break;
                 case Player.STATE_ENDED:
                     text += "ended";
@@ -1748,6 +1775,7 @@ public class ReactExoplayerView extends FrameLayout implements
 
     @Override
     public void onPositionDiscontinuity(@NonNull Player.PositionInfo oldPosition, @NonNull Player.PositionInfo newPosition, @Player.DiscontinuityReason int reason) {
+        Log.d("ReactExoplayerView", "onPositionDiscontinuity: reason=" + reason + ", oldPosition=" + oldPosition.positionMs + ", newPosition=" + newPosition.positionMs);
         if (reason == Player.DISCONTINUITY_REASON_SEEK) {
             isSeeking = true;
             seekPosition = newPosition.positionMs;
@@ -2259,6 +2287,10 @@ public class ReactExoplayerView extends FrameLayout implements
 
     public void seekTo(long positionMs) {
         if (player != null) {
+            Log.d("ReactExoplayerView", "seekTo: positionMs=" + positionMs);
+            isSeekInProgress = true;
+            isSeeking = true;
+            seekPosition = positionMs;
             player.seekTo(positionMs);
         }
     }

examples/basic/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "VideoPlayer",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "web": "expo start --web",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "windows": "react-native run-windows",
+    "start": "expo start",
+    "test": "jest",
+    "lint": "eslint .",
+    "pod-install": "cd ios && pod install && cd ..",
+    "pod-install:newarch": "cd ios && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install && cd .."
+  },
+  "dependencies": {
+    "@expo/metro-runtime": "~3.2.1",
+    "@react-native-picker/picker": "2.7.5",
+    "expo": "^51.0.32",
+    "expo-asset": "~10.0.10",
+    "expo-image": "^1.12.15",
+    "expo-navigation-bar": "~3.0.7",
+    "react": "18.2.0",
+    "react-native": "0.74.5",
+    "react-dom": "18.2.0",
+    "react-native-web": "~0.19.10",
+    "react-native-windows": "0.74.19"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.22.10",
+    "@babel/runtime": "^7.22.10",
+    "@react-native/babel-preset": "0.74.85",
+    "@react-native/eslint-config": "0.74.85",
+    "@react-native/metro-config": "0.74.85",
+    "@react-native/typescript-config": "0.74.85",
+    "@types/react": "~18.2.79",
+    "@types/react-test-renderer": "^18.0.0",
+    "babel-jest": "^29.6.3",
+    "babel-plugin-module-resolver": "5.0.0",
+    "eslint": "^8.19.0",
+    "jest": "^29.6.3",
+    "prettier": "^2.8.8",
+    "typescript": "~5.3.3"
+  },
+  "resolutions": {
+    "@types/react": "^18.0.24"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

examples/basic/src/index.js

@@ -0,0 +1,4 @@
+import {registerRootComponent} from 'expo';
+import VideoPlayer from './VideoPlayer';
+
+registerRootComponent(VideoPlayer);

ios/Video/RCTVideo.swift

@@ -113,6 +113,7 @@ class RCTVideo: UIView, RCTVideoPlayerViewControllerDelegate, RCTPlayerObserverH
     @objc var onVideoProgress: RCTDirectEventBlock?
     @objc var onVideoBandwidthUpdate: RCTDirectEventBlock?
     @objc var onVideoSeek: RCTDirectEventBlock?
+    @objc var onVideoSeekComplete: RCTDirectEventBlock?
     @objc var onVideoEnd: RCTDirectEventBlock?
     @objc var onTimedMetadata: RCTDirectEventBlock?
     @objc var onVideoAudioBecomingNoisy: RCTDirectEventBlock?
@@ -782,34 +783,50 @@ class RCTVideo: UIView, RCTVideoPlayerViewControllerDelegate, RCTPlayerObserverH
         _paused = paused
     }
 
+
     @objc
     func setSeek(_ time: NSNumber, _ tolerance: NSNumber) {
         let item: AVPlayerItem? = _player?.currentItem
-
-        _pendingSeek = true
-
         guard item != nil, let player = _player, let item, item.status == AVPlayerItem.Status.readyToPlay else {
+            _pendingSeek = true
             _pendingSeekTime = time.floatValue
             return
         }
 
-        RCTPlayerOperations.seek(
-            player: player,
-            playerItem: item,
-            paused: _paused,
-            seekTime: time.floatValue,
-            seekTolerance: tolerance.floatValue
-        ) { [weak self] (_: Bool) in
-            guard let self else { return }
+        let wasPaused = _paused
+        let seekTime = CMTimeMakeWithSeconds(Float64(time.floatValue), preferredTimescale: Int32(NSEC_PER_SEC))
+        let toleranceTime = CMTimeMakeWithSeconds(Float64(tolerance.floatValue), preferredTimescale: Int32(NSEC_PER_SEC))
+
+        let currentTimeBeforeSeek = CMTimeGetSeconds(item.currentTime())
+
+        // Call onVideoSeek before starting the seek operation
+        let currentTime = NSNumber(value: Float(currentTimeBeforeSeek))
+        self.onVideoSeek?(["currentTime": currentTime,
+                        "seekTime": time,
+                        "target": self.reactTag])
+
+        _pendingSeek = true
+
+        let seekCompletionHandler: (Bool) -> Void = { [weak self] finished in
+            guard let self = self else { return }
+
+            self._pendingSeek = false
+
+            guard finished else {
+                return
+            }
 
             self._playerObserver.addTimeObserverIfNotSet()
             self.setPaused(self._paused)
-            self.onVideoSeek?(["currentTime": NSNumber(value: Float(CMTimeGetSeconds(item.currentTime()))),
-                               "seekTime": time,
-                               "target": self.reactTag as Any])
+
+            let newCurrentTime = NSNumber(value: Float(CMTimeGetSeconds(item.currentTime())))
+            self.onVideoSeekComplete?(["currentTime": newCurrentTime,
+                                       "seekTime": time,
+                                       "target": self.reactTag as Any])
+
         }
 
-        _pendingSeek = false
+        player.seek(to: seekTime, toleranceBefore: toleranceTime, toleranceAfter: toleranceTime, completionHandler: seekCompletionHandler)
     }
 
     @objc
@@ -1688,3 +1705,4 @@ class RCTVideo: UIView, RCTVideoPlayerViewControllerDelegate, RCTPlayerObserverH
     @objc
     func setOnClick(_: Any) {}
 }
+

ios/Video/RCTVideoManager.m

@@ -45,6 +45,7 @@ RCT_EXPORT_VIEW_PROPERTY(onVideoError, RCTDirectEventBlock);
 RCT_EXPORT_VIEW_PROPERTY(onVideoProgress, RCTDirectEventBlock);
 RCT_EXPORT_VIEW_PROPERTY(onVideoBandwidthUpdate, RCTDirectEventBlock);
 RCT_EXPORT_VIEW_PROPERTY(onVideoSeek, RCTDirectEventBlock);
+RCT_EXPORT_VIEW_PROPERTY(onVideoSeekComplete, RCTDirectEventBlock);
 RCT_EXPORT_VIEW_PROPERTY(onVideoEnd, RCTDirectEventBlock);
 RCT_EXPORT_VIEW_PROPERTY(onTimedMetadata, RCTDirectEventBlock);
 RCT_EXPORT_VIEW_PROPERTY(onVideoAudioBecomingNoisy, RCTDirectEventBlock);

package.json

@@ -32,9 +32,12 @@
         "react-native": "0.73.2",
         "react-native-windows": "^0.61.0-0",
         "release-it": "^16.2.1",
-        "typescript": "5.1.6"
+        "typescript": "5.1.6",
+        "patch-package": "^8.0.0"
+    },
+    "dependencies": {
+        "shaka-player": "^4.11.7"
     },
-    "dependencies": {},
     "peerDependencies": {
         "react": "*",
         "react-native": "*"

patches/shaka-player+4.11.7.patch

@@ -0,0 +1,39 @@
+diff --git a/node_modules/shaka-player/dist/shaka-player.compiled.d.ts b/node_modules/shaka-player/dist/shaka-player.compiled.d.ts
+index 19c0930..cc0a3fd 100644
+--- a/node_modules/shaka-player/dist/shaka-player.compiled.d.ts
++++ b/node_modules/shaka-player/dist/shaka-player.compiled.d.ts
+@@ -5117,3 +5117,5 @@ declare namespace shaka.extern {
+ declare namespace shaka.extern {
+   type TransmuxerPlugin = ( ) => shaka.extern.Transmuxer ;
+ }
++
++export default shaka;
+diff --git a/node_modules/shaka-player/dist/shaka-player.ui.d.ts b/node_modules/shaka-player/dist/shaka-player.ui.d.ts
+index 1618ca0..a6076c6 100644
+--- a/node_modules/shaka-player/dist/shaka-player.ui.d.ts
++++ b/node_modules/shaka-player/dist/shaka-player.ui.d.ts
+@@ -5830,3 +5830,5 @@ declare namespace shaka.extern {
+ declare namespace shaka.extern {
+   type UIVolumeBarColors = { base : string , level : string } ;
+ }
++
++export default shaka;
+diff --git a/node_modules/shaka-player/index.d.ts b/node_modules/shaka-player/index.d.ts
+new file mode 100644
+index 0000000..3ebfd96
+--- /dev/null
++++ b/node_modules/shaka-player/index.d.ts
+@@ -0,0 +1,2 @@
++/// <reference path="./dist/shaka-player.compiled.d.ts" />
++/// <reference path="./dist/shaka-player.ui.d.ts" />
+\ No newline at end of file
+diff --git a/node_modules/shaka-player/ui.d.ts b/node_modules/shaka-player/ui.d.ts
+new file mode 100644
+index 0000000..84a3be0
+--- /dev/null
++++ b/node_modules/shaka-player/ui.d.ts
+@@ -0,0 +1,3 @@
++import shaka from 'shaka-player/dist/shaka-player.ui'
++export * from 'shaka-player/dist/shaka-player.ui'
++export default shaka;
+\ No newline at end of file

src/Video.tsx

@@ -32,6 +32,7 @@ import type {
   OnPlaybackStateChangedData,
   OnProgressData,
   OnSeekData,
+  OnSeekCompleteData,
   OnTextTrackDataChangedData,
   OnTimedMetadataData,
   OnVideoAspectRatioData,
@@ -45,7 +46,7 @@ import {
   resolveAssetSourceForVideo,
 } from './utils';
 import NativeVideoManager from './specs/NativeVideoManager';
-import {ViewType, CmcdMode, VideoRef} from './types';
+import {type VideoSaveData, ViewType, CmcdMode, VideoRef} from './types';
 import type {
   OnLoadData,
   OnTextTracksData,
@@ -81,6 +82,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       onError,
       onProgress,
       onSeek,
+      onSeekComplete,
       onEnd,
       onBuffer,
       onBandwidthUpdate,
@@ -469,6 +471,13 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       [onSeek],
     );
 
+    const onVideoSeekComplete = useCallback(
+      (e: NativeSyntheticEvent<OnSeekCompleteData>) => {
+        onSeekComplete?.(e.nativeEvent);
+      },
+      [onSeekComplete]
+    );
+
     const onVideoPlaybackStateChanged = useCallback(
       (e: NativeSyntheticEvent<OnPlaybackStateChangedData>) => {
         onPlaybackStateChanged?.(e.nativeEvent);
@@ -810,6 +819,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           onVideoError={onError ? onVideoError : undefined}
           onVideoProgress={onProgress ? onVideoProgress : undefined}
           onVideoSeek={onSeek ? onVideoSeek : undefined}
+          onVideoSeekComplete={onSeekComplete ? onVideoSeekComplete : undefined}
           onVideoEnd={onEnd}
           onVideoBuffer={onBuffer ? onVideoBuffer : undefined}
           onVideoPlaybackStateChanged={

src/specs/VideoNativeComponent.ts

@@ -205,6 +205,12 @@ export type OnSeekData = Readonly<{
   seekTime: Float;
 }>;
 
+export type OnSeekCompleteData = Readonly<{
+  currentTime: number;
+  seekTime: number;
+  target: number;
+}>;
+
 export type OnPlaybackStateChangedData = Readonly<{
   isPlaying: boolean;
   isSeeking: boolean;
@@ -378,6 +384,7 @@ export interface VideoNativeProps extends ViewProps {
   onVideoProgress?: DirectEventHandler<OnProgressData>;
   onVideoBandwidthUpdate?: DirectEventHandler<OnBandwidthUpdateData>;
   onVideoSeek?: DirectEventHandler<OnSeekData>;
+  onVideoSeekComplete?: DirectEventHandler<OnSeekCompleteData>;
   onVideoEnd?: DirectEventHandler<{}>; // all
   onVideoAudioBecomingNoisy?: DirectEventHandler<{}>;
   onVideoFullscreenPlayerWillPresent?: DirectEventHandler<{}>; // ios, android

src/types/events.ts

@@ -12,6 +12,7 @@ import type {
   OnPlaybackStateChangedData,
   OnProgressData,
   OnSeekData,
+  OnSeekCompleteData,
   OnTextTrackDataChangedData,
   OnTimedMetadataData,
   OnVideoAspectRatioData,
@@ -260,6 +261,7 @@ export interface ReactVideoEvents {
   onReceiveAdEvent?: (e: OnReceiveAdEventData) => void; //Android, iOS
   onRestoreUserInterfaceForPictureInPictureStop?: () => void; //iOS
   onSeek?: (e: OnSeekData) => void; //Android, iOS, Windows UWP
+  onSeekComplete?: (e: OnSeekCompleteData) => void; // iOS
   onPlaybackStateChanged?: (e: OnPlaybackStateChangedData) => void; // Android, iOS
   onTimedMetadata?: (e: OnTimedMetadataData) => void; //Android, iOS
   onAudioTracks?: (e: OnAudioTracksData) => void; // Android