package.json

@@ -32,11 +32,10 @@
         "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"
+        "hls.js": "^1.6.16"
     },
     "peerDependencies": {
         "react": "*",

patches/shaka-player+4.11.7.patch

@@ -1,39 +0,0 @@
-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,70 +4,26 @@ import React, {
   useEffect,
   useImperativeHandle,
   useRef,
-  useState,
   type RefObject,
 } from 'react';
-//@ts-ignore
+import Hls from 'hls.js';
-import shaka from 'shaka-player';
 import type {VideoRef, ReactVideoProps, VideoMetadata} from './types';
 
-// Action Queue Class
+const HLS_MIME = 'application/vnd.apple.mpegurl';
-class ActionQueue {
-  private queue: { action: () => Promise<void>; name: string }[] = [];
-  private isRunning = false;
 
-  enqueue(action: () => Promise<void>, name: string) {
+const isHlsSource = (uri: string) => /\.m3u8(\?|#|$)/i.test(uri);
-    this.queue.push({ action, name });
+
-    this.runNext();
+// `poster` is either a (deprecated) plain URI string or a poster object whose
-  }
+// `source` follows the RN image-source shape. The DOM only takes a URL string.
-
+const resolvePosterUri = (
-  private async runNext() {
+  poster: ReactVideoProps['poster'],
-    if (this.isRunning || this.queue.length === 0) {
+): string | undefined => {
-      console.log("Refusing to run in runNext", this.queue.length, this.isRunning);
+  if (typeof poster === 'string') {
-      return;
+    return poster;
-    }
-    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 source = poster?.source;
+  return typeof source === 'object' && source !== null ? source.uri : undefined;
+};
 
 const Video = forwardRef<VideoRef, ReactVideoProps>(
   (
@@ -99,15 +55,10 @@ 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(
-      (time: number, _tolerance?: number) => {
+      async (time: number, _tolerance?: number) => {
-        actionQueue.current.enqueue(async () => {
         if (isNaN(time)) {
           throw new Error('Specified time is not a number');
         }
@@ -117,44 +68,33 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         }
         time = Math.max(0, Math.min(time, nativeRef.current.duration));
         nativeRef.current.currentTime = time;
-          onSeek?.({
+        onSeek?.({seekTime: time, currentTime: nativeRef.current.currentTime});
-            seekTime: time,
-            currentTime: nativeRef.current.currentTime,
-          });
-        }, 'seek');
       },
       [onSeek],
     );
 
     const pause = useCallback(() => {
-      actionQueue.current.enqueue(async () => {
       if (!nativeRef.current) {
         return;
       }
-        await nativeRef.current.pause();
+      nativeRef.current.pause();
-      }, 'pause');
     }, []);
 
     const resume = useCallback(() => {
-      actionQueue.current.enqueue(async () => {
       if (!nativeRef.current) {
         return;
       }
-        try {
+      // play() rejects if it is called before the stream has data (common while
-          await nativeRef.current.play();
+      // hls.js is still parsing the manifest) or if autoplay is denied. Neither
-        } catch (e) {
+      // is fatal, so swallow it rather than surfacing an unhandled rejection.
-          console.error('Error playing video:', e);
+      nativeRef.current.play()?.catch(() => {});
-        }
-      }, 'resume');
     }, []);
 
     const setVolume = useCallback((vol: number) => {
-      actionQueue.current.enqueue(async () => {
       if (!nativeRef.current) {
         return;
       }
       nativeRef.current.volume = Math.max(0, Math.min(vol, 100)) / 100;
-      }, 'setVolume');
     }, []);
 
     const getCurrentPosition = useCallback(async () => {
@@ -209,7 +149,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
             console.error('Could not toggle fullscreen/screen lock status', e);
           }
         };
-        actionQueue.current.enqueue(run, 'setFullScreen');
+        run();
       },
       [],
     );
@@ -272,7 +212,6 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         resume();
       }
     }, [paused, pause, resume]);
-
     useEffect(() => {
       if (volume === undefined) {
         return;
@@ -307,107 +246,57 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       nativeRef.current.playbackRate = rate;
     }, [rate]);
 
-    const makeNewShaka = useCallback(() => {
+    // `onError` is typically a fresh closure on every render. Keep it in a ref so
-      console.log("makeNewShaka");
+    // the source effect below can depend on the URI alone -- callers pass
-      actionQueue.current.enqueue(async () => {
+    // `source={{uri}}` as a new object literal each render, so keying the effect
-        console.log("makeNewShaka actionQueue");
+    // on anything object-shaped would tear down and reload the stream constantly.
-        if (!nativeRef.current) {
+    const onErrorRef = useRef(onError);
-          console.warn('No video element to attach Shaka Player');
+    onErrorRef.current = onError;
-          return;
-        }
 
-        // Pause the video before changing the source
+    const uri = source?.uri as string | undefined;
-        nativeRef.current.pause();
-
-        // 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) {
+      const video = nativeRef.current;
-        console.log('Not starting shaka yet because video element is undefined');
+      if (!video || !uri) {
         return;
       }
-      if (!shallowEqual(source, currentSource)) {
+
-        console.log(
+      // Safari (and iOS WebKit) plays HLS natively; everywhere else the browser
-          'Making new shaka, Old source: ',
+      // has no HLS support at all, so an .m3u8 has to go through hls.js.
-          currentSource,
+      const needsMse =
-          'New source',
+        isHlsSource(uri) && !video.canPlayType(HLS_MIME) && Hls.isSupported();
-          source,
+
-        );
+      if (!needsMse) {
-        //@ts-ignore
+        video.src = uri;
-        setCurrentSource(source);
+        return () => {
-        makeNewShaka();
+          video.removeAttribute('src');
+          video.load();
+        };
       }
-    }, [source, nativeRefDefined, currentSource, makeNewShaka]);
+
+      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 () => {
+        hls.destroy();
+      };
+    }, [uri]);
 
     useMediaSession(source?.metadata, nativeRef, showNotificationControls);
 
-    const cropStartSeconds = (source?.cropStart || 0) / 1000;
-
     return (
       <video
         ref={nativeRef}
@@ -416,8 +305,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         controls={controls}
         loop={repeat}
         playsInline
-        //@ts-ignore
+        poster={resolvePosterUri(poster)}
-        poster={poster}
         onCanPlay={() => onBuffer?.({isBuffering: false})}
         onWaiting={() => onBuffer?.({isBuffering: true})}
         onRateChange={() => {
@@ -450,7 +338,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
             return;
           }
           onProgress?.({
-            currentTime: nativeRef.current.currentTime - cropStartSeconds,
+            currentTime: nativeRef.current.currentTime,
             playableDuration: nativeRef.current.buffered.length
               ? nativeRef.current.buffered.end(
                   nativeRef.current.buffered.length - 1,
@@ -490,14 +378,13 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         }
         onSeeking={() => (isSeeking.current = true)}
         onSeeked={() => {
-                (isSeeking.current = false)
+          isSeeking.current = false;
-
+          const currentTime = nativeRef.current?.currentTime ?? 0;
           onSeekComplete?.({
-                    currentTime: (nativeRef.current?.currentTime || 0.0) - cropStartSeconds,
+            currentTime,
-                    seekTime: 0.0,
+            seekTime: currentTime,
-                    target: 0.0,
+            target: 0,
-
+          });
-                })
         }}
         onVolumeChange={() => {
           if (!nativeRef.current) {