Handle seek completion

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

src/Video.web.tsx

@@ -4,12 +4,71 @@ import React, {
   useEffect,
   useImperativeHandle,
   useRef,
+  useState,
   type RefObject,
 } from 'react';
 //@ts-ignore
 import shaka from 'shaka-player';
 import type {VideoRef, ReactVideoProps, VideoMetadata} from './types';
 
+// Action Queue Class
+class ActionQueue {
+  private queue: { action: () => Promise<void>; name: string }[] = [];
+  private isRunning = false;
+
+  enqueue(action: () => Promise<void>, name: string) {
+    this.queue.push({ action, name });
+    this.runNext();
+  }
+
+  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>(
   (
     {
@@ -32,6 +91,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       onError,
       onReadyForDisplay,
       onSeek,
+      onSeekComplete,
       onVolumeChange,
       onEnd,
       onPlaybackStateChanged,
@@ -40,43 +100,61 @@ 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 actionQueue = useRef(new ActionQueue());
 
     const isSeeking = useRef(false);
+
     const seek = useCallback(
-      async (time: number, _tolerance?: number) => {
-        if (isNaN(time)) {
-          throw new Error('Specified time is not a number');
-        }
-        if (!nativeRef.current) {
-          console.warn('Video Component is not mounted');
-          return;
-        }
-        time = Math.max(0, Math.min(time, nativeRef.current.duration));
-        nativeRef.current.currentTime = time;
-        onSeek?.({seekTime: time, currentTime: nativeRef.current.currentTime});
+      (time: number, _tolerance?: number) => {
+        actionQueue.current.enqueue(async () => {
+          if (isNaN(time)) {
+            throw new Error('Specified time is not a number');
+          }
+          if (!nativeRef.current) {
+            console.warn('Video Component is not mounted');
+            return;
+          }
+          time = Math.max(0, Math.min(time, nativeRef.current.duration));
+          nativeRef.current.currentTime = time;
+          onSeek?.({
+            seekTime: time,
+            currentTime: nativeRef.current.currentTime,
+          });
+        }, 'seek');
       },
       [onSeek],
     );
 
     const pause = useCallback(() => {
-      if (!nativeRef.current) {
-        return;
-      }
-      nativeRef.current.pause();
+      actionQueue.current.enqueue(async () => {
+        if (!nativeRef.current) {
+          return;
+        }
+        await nativeRef.current.pause();
+      }, 'pause');
     }, []);
 
     const resume = useCallback(() => {
-      if (!nativeRef.current) {
-        return;
-      }
-      nativeRef.current.play();
+      actionQueue.current.enqueue(async () => {
+        if (!nativeRef.current) {
+          return;
+        }
+        try {
+          await nativeRef.current.play();
+        } catch (e) {
+          console.error('Error playing video:', e);
+        }
+      }, 'resume');
     }, []);
 
     const setVolume = useCallback((vol: number) => {
-      if (!nativeRef.current) {
-        return;
-      }
-      nativeRef.current.volume = Math.max(0, Math.min(vol, 100)) / 100;
+      actionQueue.current.enqueue(async () => {
+        if (!nativeRef.current) {
+          return;
+        }
+        nativeRef.current.volume = Math.max(0, Math.min(vol, 100)) / 100;
+      }, 'setVolume');
     }, []);
 
     const getCurrentPosition = useCallback(async () => {
@@ -131,7 +209,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
             console.error('Could not toggle fullscreen/screen lock status', e);
           }
         };
-        run();
+        actionQueue.current.enqueue(run, 'setFullScreen');
       },
       [],
     );
@@ -194,6 +272,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         resume();
       }
     }, [paused, pause, resume]);
+
     useEffect(() => {
       if (volume === undefined) {
         return;
@@ -228,39 +307,107 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       nativeRef.current.playbackRate = rate;
     }, [rate]);
 
+    const makeNewShaka = useCallback(() => {
+      console.log("makeNewShaka");
+      actionQueue.current.enqueue(async () => {
+        console.log("makeNewShaka actionQueue");
+        if (!nativeRef.current) {
+          console.warn('No video element to attach Shaka Player');
+          return;
+        }
+
+        // Pause the video before changing the source
+        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) {
-        console.log("Not starting shaka yet bc undefined")
+        console.log('Not starting shaka yet because video element is undefined');
         return;
       }
-      if (shakaPlayerRef.current) {
-        shakaPlayerRef.current.unload()
-      }
-      shakaPlayerRef.current = new shaka.Player();
-      //@ts-ignore
-      shakaPlayerRef.current.addEventListener("error", (event) => {
+      if (!shallowEqual(source, currentSource)) {
+        console.log(
+          'Making new shaka, Old source: ',
+          currentSource,
+          'New source',
+          source,
+        );
         //@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")
-      shakaPlayerRef.current.attach(nativeRef.current, true);
-
-      //@ts-ignore
-      shakaPlayerRef.current.load(source?.uri).then(
-        () => console.log(`${source?.uri} finished loading`)
-      );
-      console.log("Started shaka loading");
-    }, [source, nativeRef.current])
+        setCurrentSource(source);
+        makeNewShaka();
+      }
+    }, [source, nativeRefDefined, currentSource, makeNewShaka]);
 
     useMediaSession(source?.metadata, nativeRef, showNotificationControls);
 
+    const cropStartSeconds = (source?.cropStart || 0) / 1000;
+
     return (
       <video
         ref={nativeRef}
@@ -303,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,
@@ -342,7 +489,16 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           })
         }
         onSeeking={() => (isSeeking.current = true)}
-        onSeeked={() => (isSeeking.current = false)}
+        onSeeked={() => {
+                (isSeeking.current = false)
+
+                onSeekComplete?.({
+                    currentTime: (nativeRef.current?.currentTime || 0.0) - cropStartSeconds,
+                    seekTime: 0.0,
+                    target: 0.0,
+
+                })
+            }}
         onVolumeChange={() => {
           if (!nativeRef.current) {
             return;