fix(ios): fix sideloading external subtitles (#3690)

* fix(ios): fix subtitles side loading * update example * Update examples/basic/src/VideoPlayer.tsx Co-authored-by: Olivier Bouillet <[email protected]> * Update examples/basic/src/VideoPlayer.tsx Co-authored-by: Olivier Bouillet <[email protected]> --------- Co-authored-by: Olivier Bouillet <[email protected]>
TheWidlarzGroup · Apr 19, 2024 · efa1c52 · efa1c52
1 parent b5ccc48
commit efa1c52
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 21 deletions.
diff --git a/examples/basic/src/VideoPlayer.tsx b/examples/basic/src/VideoPlayer.tsx
@@ -134,8 +134,10 @@ class VideoPlayer extends Component {
       uri: 'https://bitmovin-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
     },
     {
-      description: 'sintel with sideLoaded subtitles',
-      uri: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8', // this is sample video, my actual video file is MP4
+      description: 'BigBugBunny sideLoaded subtitles',
+      // sideloaded subtitles wont work for streaming like HLS on ios
+      // mp4
+      uri: 'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
       textTracks: [
         {
           title: 'test',
@@ -195,7 +197,7 @@ class VideoPlayer extends Component {
       description: 'rtsp big bug bunny',
       uri: 'rtsp://rtspstream:[email protected]/movie',
       type: 'rtsp',
-    }
+    },
   ];
 
   // poster which can be displayed
@@ -237,23 +239,23 @@ class VideoPlayer extends Component {
 
   updateSeeker = () => {
     // put this code in timeout as because it may be put just after a setState
-    setTimeout(()=> {
+    setTimeout(() => {
       const position = this.calculateSeekerPosition();
       this.setSeekerPosition(position);
-    }, 1)
-  }
+    }, 1);
+  };
 
   onProgress = (data: OnProgressData) => {
     this.setState({currentTime: data.currentTime});
     if (!this.state.seeking) {
-      this.updateSeeker()
+      this.updateSeeker();
     }
   };
 
   onSeek = (data: OnSeekData) => {
     this.setState({currentTime: data.currentTime});
-    this.updateSeeker()
-  }
+    this.updateSeeker();
+  };
 
   onVideoLoadStart = () => {
     console.log('onVideoLoadStart');
@@ -363,11 +365,11 @@ class VideoPlayer extends Component {
 
   onPlaybackRateChange = (data: OnPlaybackRateChangeData) => {
     console.log('onPlaybackRateChange', data);
-  }
+  };
 
   onPlaybackStateChanged = (data: OnPlaybackStateChangedData) => {
     console.log('onPlaybackStateChanged', data);
-  }
+  };
 
   toggleFullscreen() {
     this.setState({fullscreen: !this.state.fullscreen});

diff --git a/ios/Video/Features/RCTVideoUtils.swift b/ios/Video/Features/RCTVideoUtils.swift
@@ -246,7 +246,7 @@ enum RCTVideoUtils {
     static func getValidTextTracks(asset: AVAsset, assetOptions: NSDictionary?, mixComposition: AVMutableComposition,
                                    textTracks: [TextTrack]?) async -> [TextTrack] {
         var validTextTracks: [TextTrack] = []
-        var tracks: [[AVAssetTrack]] = []
+        var tracks: [([AVAssetTrack], AVURLAsset)] = []
 
         let videoTracks = await RCTVideoAssetsUtils.getTracks(asset: asset, withMediaType: .video)
         guard let videoAsset = videoTracks?.first else { return validTextTracks }
@@ -268,23 +268,20 @@ enum RCTVideoUtils {
                 }
 
                 if let track = await RCTVideoAssetsUtils.getTracks(asset: textURLAsset, withMediaType: .text) {
-                    tracks.append(track)
+                    tracks.append((track, textURLAsset))
                 }
             }
 
-            for i in 0 ..< tracks.count {
-                guard let track = tracks[i].first else { continue } // fix when there's no textTrackAsset
+            for (index, tracksPair) in tracks.enumerated() {
+                let (tracks, trackAsset) = tracksPair
+                guard let track = tracks.first else { continue } // fix when there's no textTrackAsset
 
                 let textCompTrack: AVMutableCompositionTrack! = mixComposition.addMutableTrack(withMediaType: AVMediaType.text,
                                                                                                preferredTrackID: kCMPersistentTrackID_Invalid)
 
                 do {
-                    try textCompTrack.insertTimeRange(
-                        CMTimeRangeMake(start: .zero, duration: videoAsset.timeRange.duration),
-                        of: track,
-                        at: .zero
-                    )
-                    validTextTracks.append(textTracks[i])
+                    try textCompTrack.insertTimeRange(CMTimeRangeMake(start: .zero, duration: trackAsset.duration), of: track, at: .zero)
+                    validTextTracks.append(textTracks[index])
                 } catch {
                     // TODO: upgrade error by call some props callback to better inform user
                     print("Error occurred on textTrack insert attempt: \(error.localizedDescription)")