Try to fix double load

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

src/Video.web.tsx

@@ -4,12 +4,36 @@ import React, {
   useEffect,
   useImperativeHandle,
   useRef,
+  useState,
   type RefObject,
 } from 'react';
 //@ts-ignore
 import shaka from 'shaka-player';
 import type {VideoRef, ReactVideoProps, VideoMetadata} from './types';
 
+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>(
   (
     {
@@ -40,6 +64,7 @@ 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 isSeeking = useRef(false);
     const seek = useCallback(
@@ -228,15 +253,21 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       nativeRef.current.playbackRate = rate;
     }, [rate]);
 
-    useEffect(() => {
-      if (!nativeRef.current) {
-        console.log("Not starting shaka yet bc undefined")
-        return;
-      }
+
+    const makeNewShaka = useCallback(() => {
       if (shakaPlayerRef.current) {
         shakaPlayerRef.current.unload()
       }
       shakaPlayerRef.current = new shaka.Player();
+
+
+      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
@@ -249,15 +280,32 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           },
         });
       });
+
       console.log("Initializing and attaching shaka")
-      shakaPlayerRef.current.attach(nativeRef.current, true);
+      //@ts-ignore
+      shakaPlayerRef.current.attach(nativeRef.current);
 
       //@ts-ignore
       shakaPlayerRef.current.load(source?.uri).then(
         () => console.log(`${source?.uri} finished loading`)
       );
       console.log("Started shaka loading");
-    }, [source, nativeRef.current])
+    }, [source, setCurrentSource]);
+
+    const nativeRefDefined = nativeRef.current ? true : false;
+
+    useEffect(() => {
+      if (!nativeRef.current) {
+        console.log("Not starting shaka yet bc 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])
 
     useMediaSession(source?.metadata, nativeRef, showNotificationControls);