Use an async queue

src/Video.web.tsx

@@ -11,6 +11,35 @@ import React, {
 import shaka from 'shaka-player';
 import type {VideoRef, ReactVideoProps, VideoMetadata} from './types';
 
+// Action Queue Class
+class ActionQueue {
+  private queue: (() => Promise<void>)[] = [];
+  private isRunning = false;
+
+  enqueue(action: () => Promise<void>) {
+    this.queue.push(action);
+    this.runNext();
+  }
+
+  private async runNext() {
+    if (this.isRunning || this.queue.length === 0) {
+      return;
+    }
+    this.isRunning = true;
+    const action = this.queue.shift();
+    if (action) {
+      try {
+        await action();
+      } 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;
@@ -64,11 +93,14 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
   ) => {
     const nativeRef = useRef<HTMLVideoElement>(null);
     const shakaPlayerRef = useRef<shaka.Player | null>(null);
-    const [ currentSource, setCurrentSource ] = useState<object | 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) => {
+        actionQueue.current.enqueue(async () => {
           if (isNaN(time)) {
             throw new Error('Specified time is not a number');
           }
@@ -78,30 +110,44 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           }
           time = Math.max(0, Math.min(time, nativeRef.current.duration));
           nativeRef.current.currentTime = time;
-        onSeek?.({seekTime: time, currentTime: nativeRef.current.currentTime});
+          onSeek?.({
+            seekTime: time,
+            currentTime: nativeRef.current.currentTime,
+          });
+        });
       },
       [onSeek],
     );
 
     const pause = useCallback(() => {
+      actionQueue.current.enqueue(async () => {
         if (!nativeRef.current) {
           return;
         }
-      nativeRef.current.pause();
+        await nativeRef.current.pause();
+      });
     }, []);
 
     const resume = useCallback(() => {
+      actionQueue.current.enqueue(async () => {
         if (!nativeRef.current) {
           return;
         }
-      nativeRef.current.play();
+        try {
+          await nativeRef.current.play();
+        } catch (e) {
+          console.error('Error playing video:', e);
+        }
+      });
     }, []);
 
     const setVolume = useCallback((vol: number) => {
+      actionQueue.current.enqueue(async () => {
         if (!nativeRef.current) {
           return;
         }
         nativeRef.current.volume = Math.max(0, Math.min(vol, 100)) / 100;
+      });
     }, []);
 
     const getCurrentPosition = useCallback(async () => {
@@ -219,6 +265,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         resume();
       }
     }, [paused, pause, resume]);
+
     useEffect(() => {
       if (volume === undefined) {
         return;
@@ -253,24 +300,37 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       nativeRef.current.playbackRate = rate;
     }, [rate]);
 
-
     const makeNewShaka = useCallback(() => {
-      if (shakaPlayerRef.current) {
-        shakaPlayerRef.current.unload()
+      actionQueue.current.enqueue(async () => {
+        if (!nativeRef.current) {
+          console.warn('No video element to attach Shaka Player');
+          return;
         }
-      shakaPlayerRef.current = new shaka.Player();
 
+        // Pause the video before changing the source
+        await 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(nativeRef.current);
 
         if (source?.cropStart) {
-        shakaPlayerRef.current.configure({playRangeStart: source?.cropStart / 1000})
+          shakaPlayerRef.current.configure({
+            playRangeStart: source?.cropStart / 1000,
+          });
         }
         if (source?.cropEnd) {
-        shakaPlayerRef.current.configure({playRangeEnd: source?.cropEnd / 1000})
+          shakaPlayerRef.current.configure({
+            playRangeEnd: source?.cropEnd / 1000,
+          });
         }
 
-      //@ts-ignore
-      shakaPlayerRef.current.addEventListener("error", (event) => {
-        //@ts-ignore
+        shakaPlayerRef.current.addEventListener('error', event => {
           const shakaError = event.detail;
           console.error('Shaka Player Error', shakaError);
           onError?.({
@@ -281,31 +341,51 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           });
         });
 
-      console.log("Initializing and attaching shaka")
-      //@ts-ignore
-      shakaPlayerRef.current.attach(nativeRef.current);
+        console.log('Initializing and attaching shaka');
 
-      //@ts-ignore
-      shakaPlayerRef.current.load(source?.uri).then(
-        () => console.log(`${source?.uri} finished loading`)
-      );
-      console.log("Started shaka loading");
-    }, [source, setCurrentSource]);
+        // Load the new source
+        try {
+          await shakaPlayerRef.current.load(source?.uri);
+          console.log(`${source?.uri} finished loading`);
 
-    const nativeRefDefined = nativeRef.current ? true : false;
+          // 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: {
+              errorString: e.message,
+              code: e.code,
+            },
+          });
+        }
+      });
+    }, [source, paused, onError]);
+
+    const nativeRefDefined = !!nativeRef.current;
 
     useEffect(() => {
       if (!nativeRef.current) {
-        console.log("Not starting shaka yet bc undefined")
+        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
+        console.log(
+          'Making new shaka, Old source: ',
+          currentSource,
+          'New source',
+          source,
+        );
         setCurrentSource(source);
-        makeNewShaka()
+        makeNewShaka();
       }
-    }, [source, nativeRefDefined, currentSource])
+    }, [source, nativeRefDefined, currentSource, makeNewShaka]);
 
     useMediaSession(source?.metadata, nativeRef, showNotificationControls);