Fix git dependency build lifecycle

package.json

@@ -32,10 +32,11 @@
         "react-native": "0.73.2",
         "react-native-windows": "^0.61.0-0",
         "release-it": "^16.2.1",
-        "typescript": "5.1.6"
+        "patch-package": "^8.0.0"
     },
     "dependencies": {
-        "hls.js": "^1.6.16"
+        "shaka-player": "^4.11.7",
+        "typescript": "5.6.3"
     },
     "peerDependencies": {
         "react": "*",

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.web.tsx

@@ -4,26 +4,70 @@ import React, {
   useEffect,
   useImperativeHandle,
   useRef,
+  useState,
   type RefObject,
 } from 'react';
-import Hls from 'hls.js';
+//@ts-ignore
+import shaka from 'shaka-player';
 import type {VideoRef, ReactVideoProps, VideoMetadata} from './types';
 
-const HLS_MIME = 'application/vnd.apple.mpegurl';
+// Action Queue Class
+class ActionQueue {
+  private queue: { action: () => Promise<void>; name: string }[] = [];
+  private isRunning = false;
 
-const isHlsSource = (uri: string) => /\.m3u8(\?|#|$)/i.test(uri);
+  enqueue(action: () => Promise<void>, name: string) {
-
+    this.queue.push({ action, name });
-// `poster` is either a (deprecated) plain URI string or a poster object whose
+    this.runNext();
-// `source` follows the RN image-source shape. The DOM only takes a URL string.
-const resolvePosterUri = (
-  poster: ReactVideoProps['poster'],
-): string | undefined => {
-  if (typeof poster === 'string') {
-    return poster;
   }
-  const source = poster?.source;
+
-  return typeof source === 'object' && source !== null ? source.uri : undefined;
+  private async runNext() {
-};
+    if (this.isRunning || this.queue.length === 0) {
+      console.log("Refusing to run in runNext", this.queue.length, this.isRunning);
+      return;
+    }
+    this.isRunning = true;
+    const { action, name } = this.queue.shift()!;
+    console.log(`Running action: ${name}`);
+
+    const actionPromise = action();
+    const timeoutPromise = new Promise<void>((_, reject) =>
+      setTimeout(() => reject(new Error(`Action ${name} timed out`)), 2000)
+    );
+
+    try {
+      await Promise.race([actionPromise, timeoutPromise]);
+    } catch (e) {
+      console.error('Error in queued action:', e);
+    } finally {
+      this.isRunning = false;
+      this.runNext();
+    }
+  }
+}
+
+function shallowEqual(obj1: any, obj2: any) {
+  // If both are strictly equal (covers primitive types and identical object references)
+  if (obj1 === obj2) return true;
+
+  // If one is not an object (meaning it's a primitive), they must be strictly equal
+  if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 === null || obj2 === null) {
+    return false;
+  }
+
+  // Get the keys of both objects
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+
+  // If the number of keys is different, the objects are not equal
+  if (keys1.length !== keys2.length) return false;
+
+  // Check that all keys and their corresponding values are the same
+  return keys1.every(key => {
+    // If the value is an object, we fall back to reference equality (shallow comparison)
+    return obj1[key] === obj2[key];
+  });
+}
 
 const Video = forwardRef<VideoRef, ReactVideoProps>(
   (
@@ -55,46 +99,62 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
     ref,
   ) => {
     const nativeRef = useRef<HTMLVideoElement>(null);
+    const shakaPlayerRef = useRef<shaka.Player | null>(null);
+    const [currentSource, setCurrentSource] = useState<object | null>(null);
+    const actionQueue = useRef(new ActionQueue());
 
     const isSeeking = useRef(false);
+
     const seek = useCallback(
-      async (time: number, _tolerance?: number) => {
+      (time: number, _tolerance?: number) => {
-        if (isNaN(time)) {
+        actionQueue.current.enqueue(async () => {
-          throw new Error('Specified time is not a number');
+          if (isNaN(time)) {
-        }
+            throw new Error('Specified time is not a number');
-        if (!nativeRef.current) {
+          }
-          console.warn('Video Component is not mounted');
+          if (!nativeRef.current) {
-          return;
+            console.warn('Video Component is not mounted');
-        }
+            return;
-        time = Math.max(0, Math.min(time, nativeRef.current.duration));
+          }
-        nativeRef.current.currentTime = time;
+          time = Math.max(0, Math.min(time, nativeRef.current.duration));
-        onSeek?.({seekTime: time, currentTime: nativeRef.current.currentTime});
+          nativeRef.current.currentTime = time;
+          onSeek?.({
+            seekTime: time,
+            currentTime: nativeRef.current.currentTime,
+          });
+        }, 'seek');
       },
       [onSeek],
     );
 
     const pause = useCallback(() => {
-      if (!nativeRef.current) {
+      actionQueue.current.enqueue(async () => {
-        return;
+        if (!nativeRef.current) {
-      }
+          return;
-      nativeRef.current.pause();
+        }
+        await nativeRef.current.pause();
+      }, 'pause');
     }, []);
 
     const resume = useCallback(() => {
-      if (!nativeRef.current) {
+      actionQueue.current.enqueue(async () => {
-        return;
+        if (!nativeRef.current) {
-      }
+          return;
-      // play() rejects if it is called before the stream has data (common while
+        }
-      // hls.js is still parsing the manifest) or if autoplay is denied. Neither
+        try {
-      // is fatal, so swallow it rather than surfacing an unhandled rejection.
+          await nativeRef.current.play();
-      nativeRef.current.play()?.catch(() => {});
+        } catch (e) {
+          console.error('Error playing video:', e);
+        }
+      }, 'resume');
     }, []);
 
     const setVolume = useCallback((vol: number) => {
-      if (!nativeRef.current) {
+      actionQueue.current.enqueue(async () => {
-        return;
+        if (!nativeRef.current) {
-      }
+          return;
-      nativeRef.current.volume = Math.max(0, Math.min(vol, 100)) / 100;
+        }
+        nativeRef.current.volume = Math.max(0, Math.min(vol, 100)) / 100;
+      }, 'setVolume');
     }, []);
 
     const getCurrentPosition = useCallback(async () => {
@@ -149,7 +209,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
             console.error('Could not toggle fullscreen/screen lock status', e);
           }
         };
-        run();
+        actionQueue.current.enqueue(run, 'setFullScreen');
       },
       [],
     );
@@ -212,6 +272,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         resume();
       }
     }, [paused, pause, resume]);
+
     useEffect(() => {
       if (volume === undefined) {
         return;
@@ -246,57 +307,107 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       nativeRef.current.playbackRate = rate;
     }, [rate]);
 
-    // `onError` is typically a fresh closure on every render. Keep it in a ref so
+    const makeNewShaka = useCallback(() => {
-    // the source effect below can depend on the URI alone -- callers pass
+      console.log("makeNewShaka");
-    // `source={{uri}}` as a new object literal each render, so keying the effect
+      actionQueue.current.enqueue(async () => {
-    // on anything object-shaped would tear down and reload the stream constantly.
+        console.log("makeNewShaka actionQueue");
-    const onErrorRef = useRef(onError);
+        if (!nativeRef.current) {
-    onErrorRef.current = onError;
+          console.warn('No video element to attach Shaka Player');
-
-    const uri = source?.uri as string | undefined;
-
-    useEffect(() => {
-      const video = nativeRef.current;
-      if (!video || !uri) {
-        return;
-      }
-
-      // Safari (and iOS WebKit) plays HLS natively; everywhere else the browser
-      // has no HLS support at all, so an .m3u8 has to go through hls.js.
-      const needsMse =
-        isHlsSource(uri) && !video.canPlayType(HLS_MIME) && Hls.isSupported();
-
-      if (!needsMse) {
-        video.src = uri;
-        return () => {
-          video.removeAttribute('src');
-          video.load();
-        };
-      }
-
-      const hls = new Hls();
-      hls.on(Hls.Events.ERROR, (_event, data) => {
-        // hls.js surfaces plenty of recoverable warnings; only fatal errors are
-        // worth propagating as a video error.
-        if (!data.fatal) {
           return;
         }
-        onErrorRef.current?.({
-          error: {
-            errorString: `${data.type}: ${data.details}`,
-          },
-        });
-      });
-      hls.loadSource(uri);
-      hls.attachMedia(video);
 
-      return () => {
+        // Pause the video before changing the source
-        hls.destroy();
+        nativeRef.current.pause();
-      };
+
-    }, [uri]);
+        // Unload the previous Shaka player if it exists
+        if (shakaPlayerRef.current) {
+          await shakaPlayerRef.current.unload();
+          shakaPlayerRef.current = null;
+        }
+
+        // Create a new Shaka player and attach it to the video element
+        shakaPlayerRef.current = new shaka.Player();
+
+        shakaPlayerRef.current.attach(nativeRef.current);
+
+        if (source?.cropStart) {
+          shakaPlayerRef.current.configure({
+            playRangeStart: source?.cropStart / 1000,
+          });
+        }
+        if (source?.cropEnd) {
+          shakaPlayerRef.current.configure({
+            playRangeEnd: source?.cropEnd / 1000,
+          });
+        }
+
+        //@ts-ignore
+        shakaPlayerRef.current.addEventListener('error', event => {
+          //@ts-ignore
+          const shakaError = event.detail;
+          console.error('Shaka Player Error', shakaError);
+          onError?.({
+            error: {
+              errorString: shakaError.message,
+              code: shakaError.code,
+            },
+          });
+        });
+
+        console.log('Initializing and attaching shaka');
+
+        // Load the new source
+        try {
+          //@ts-ignore
+          await shakaPlayerRef.current.load(source?.uri);
+          console.log(`${source?.uri} finished loading`);
+
+          // Optionally resume playback if not paused
+          if (!paused) {
+            try {
+              await nativeRef.current.play();
+            } catch (e) {
+              console.error('Error playing video:', e);
+            }
+          }
+        } catch (e) {
+          console.error('Error loading video with Shaka Player', e);
+          onError?.({
+            error: {
+              //@ts-ignore
+              errorString: e.message,
+              //@ts-ignore
+              code: e.code,
+            },
+          });
+        }
+      }, 'makeNewShaka');
+    }, [source, paused, onError]);
+
+    const nativeRefDefined = !!nativeRef.current;
+
+    useEffect(() => {
+      if (!nativeRef.current) {
+        console.log('Not starting shaka yet because video element is undefined');
+        return;
+      }
+      if (!shallowEqual(source, currentSource)) {
+        console.log(
+          'Making new shaka, Old source: ',
+          currentSource,
+          'New source',
+          source,
+        );
+        //@ts-ignore
+        setCurrentSource(source);
+        makeNewShaka();
+      }
+    }, [source, nativeRefDefined, currentSource, makeNewShaka]);
 
     useMediaSession(source?.metadata, nativeRef, showNotificationControls);
 
+    const cropStartSeconds = (source?.cropStart || 0) / 1000;
+
     return (
       <video
         ref={nativeRef}
@@ -305,7 +416,8 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         controls={controls}
         loop={repeat}
         playsInline
-        poster={resolvePosterUri(poster)}
+        //@ts-ignore
+        poster={poster}
         onCanPlay={() => onBuffer?.({isBuffering: false})}
         onWaiting={() => onBuffer?.({isBuffering: true})}
         onRateChange={() => {
@@ -338,7 +450,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
             return;
           }
           onProgress?.({
-            currentTime: nativeRef.current.currentTime,
+            currentTime: nativeRef.current.currentTime - cropStartSeconds,
             playableDuration: nativeRef.current.buffered.length
               ? nativeRef.current.buffered.end(
                   nativeRef.current.buffered.length - 1,
@@ -378,14 +490,15 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         }
         onSeeking={() => (isSeeking.current = true)}
         onSeeked={() => {
-          isSeeking.current = false;
+                (isSeeking.current = false)
-          const currentTime = nativeRef.current?.currentTime ?? 0;
+
-          onSeekComplete?.({
+                onSeekComplete?.({
-            currentTime,
+                    currentTime: (nativeRef.current?.currentTime || 0.0) - cropStartSeconds,
-            seekTime: currentTime,
+                    seekTime: 0.0,
-            target: 0,
+                    target: 0.0,
-          });
+
-        }}
+                })
+            }}
         onVolumeChange={() => {
           if (!nativeRef.current) {
             return;