@mottosports/motto-video-player 1.0.1-rc.31 → 1.0.1-rc.33

package/dist/index.mjs

@@ -374,6 +374,9 @@ styleInject(`/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
   .grid {
     display: grid;
   }
+  .hidden {
+    display: none;
+  }
   .aspect-video {
     aspect-ratio: var(--aspect-video);
   }
@@ -1103,7 +1106,7 @@ styleInject(`/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
 `);
 
 // src/Player.tsx
-import { forwardRef, useEffect as useEffect5, useRef as useRef8, useImperativeHandle } from "react";
+import { forwardRef, useEffect as useEffect5, useRef as useRef8, useImperativeHandle, useMemo } from "react";
 import shaka3 from "shaka-player/dist/shaka-player.ui";
 
 // src/hooks/useShakePlayer.ts
@@ -1137,7 +1140,7 @@ var isPlayReadySupported = () => {
 import initShakaPlayerMux from "@mux/mux-data-shakaplayer";
 
 // package.json
-var version = "1.0.1-rc.31";
+var version = "1.0.1-rc.33";
 
 // src/hooks/useShakePlayer.ts
 var useShakePlayer = ({
@@ -1151,33 +1154,57 @@ var useShakePlayer = ({
   onMuxDataUpdate
 }) => {
   const playerRef = useRef(null);
+  const isDestroyingRef = useRef(false);
   const initializePlayer = useCallback(async (video) => {
+    console.log("\u{1F3AC} PLAYER-INIT: Starting player initialization...");
+    const startTime = performance.now();
     try {
+      console.log("\u{1F3AC} PLAYER-INIT: Installing polyfills...");
       shaka.polyfill.installAll();
+      console.log("\u{1F3AC} PLAYER-INIT: Polyfills installed successfully");
+      console.log("\u{1F3AC} PLAYER-INIT: Checking browser support...");
       if (!shaka.Player.isBrowserSupported()) {
+        console.error("\u{1F3AC} PLAYER-INIT: Browser not supported by Shaka Player");
         throw new Error("Browser not supported by Shaka Player");
       }
+      console.log("\u{1F3AC} PLAYER-INIT: Browser support confirmed");
+      console.log("\u{1F3AC} PLAYER-INIT: Creating player instance...");
       const player = new shaka.Player();
       playerRef.current = player;
+      console.log("\u{1F3AC} PLAYER-INIT: Player instance created successfully");
+      console.log("\u{1F3AC} PLAYER-INIT: Attaching player to video element...");
       await player.attach(video);
+      console.log("\u{1F3AC} PLAYER-INIT: Player attached to video element successfully");
+      console.log("\u{1F3AC} PLAYER-INIT: Configuring player...");
       if (shakaConfig) {
+        console.log("\u{1F3AC} PLAYER-INIT: Applying custom shaka config:", shakaConfig);
         player.configure(shakaConfig);
+        console.log("\u{1F3AC} PLAYER-INIT: Custom shaka config applied");
+      } else {
+        console.log("\u{1F3AC} PLAYER-INIT: No custom shaka config provided");
       }
       let manifestUrl = src.url;
       const isDRM = Boolean(src.drm);
       let cert = null;
       if (isDRM) {
+        console.log("\u{1F3AC} PLAYER-INIT: DRM detected, setting up DRM configuration...");
         const isPlayReady = isPlayReadySupported();
+        console.log("\u{1F3AC} PLAYER-INIT: Device capabilities - Apple:", isAppleDevice(), "PlayReady:", isPlayReady);
         if (isAppleDevice() && src.drm.fairplay?.certificate_url) {
+          console.log("\u{1F3AC} PLAYER-INIT: Setting up FairPlay DRM...");
           const req = await fetch(src.drm.fairplay.certificate_url);
           cert = await req.arrayBuffer();
           manifestUrl = src.drm.fairplay.playlist_url;
+          console.log("\u{1F3AC} PLAYER-INIT: FairPlay certificate loaded");
         } else if (isPlayReady && src.drm.playready?.license_url) {
+          console.log("\u{1F3AC} PLAYER-INIT: Setting up PlayReady DRM...");
           manifestUrl = src.drm.playready.playlist_url;
         } else {
+          console.log("\u{1F3AC} PLAYER-INIT: Setting up Widevine DRM...");
           manifestUrl = src.drm?.widevine?.playlist_url || "";
         }
-        player.configure({
+        console.log("\u{1F3AC} PLAYER-INIT: Configuring DRM servers...");
+        const drmConfig2 = {
           drm: {
             servers: {
               "com.widevine.alpha": src.drm.widevine?.license_url,
@@ -1192,34 +1219,52 @@ var useShakePlayer = ({
               }
             }
           }
-        });
+        };
+        console.log("\u{1F3AC} PLAYER-INIT: DRM config:", drmConfig2);
+        player.configure(drmConfig2);
+        console.log("\u{1F3AC} PLAYER-INIT: DRM configuration applied");
+        console.log("\u{1F3AC} PLAYER-INIT: Setting up DRM network filters...");
         const netEngine = player.getNetworkingEngine();
         if (netEngine) {
+          console.log("\u{1F3AC} PLAYER-INIT: Registering DRM request filter...");
           netEngine.registerRequestFilter((type, request) => {
             if (type === shaka.net.NetworkingEngine.RequestType.LICENSE) {
+              console.log("\u{1F3AC} PLAYER-INIT: Adding DRM token to license request");
               request.headers["x-dt-custom-data"] = src.drm.token;
             }
           });
+          console.log("\u{1F3AC} PLAYER-INIT: Registering DRM response filter...");
           netEngine.registerResponseFilter((type, response) => {
             if (type === shaka.net.NetworkingEngine.RequestType.LICENSE) {
               const ks = player.keySystem && player.keySystem();
               if (ks === "com.apple.fps") {
+                console.log("\u{1F3AC} PLAYER-INIT: Processing FairPlay license response");
                 const responseText = shaka.util.StringUtils.fromUTF8(response.data);
                 response.data = shaka.util.Uint8ArrayUtils.fromBase64(responseText).buffer;
               }
             }
           });
+          console.log("\u{1F3AC} PLAYER-INIT: DRM network filters registered");
+        } else {
+          console.warn("\u{1F3AC} PLAYER-INIT: No networking engine available for DRM filters");
         }
+      } else {
+        console.log("\u{1F3AC} PLAYER-INIT: No DRM configuration needed");
       }
+      console.log("\u{1F3AC} PLAYER-INIT: Setting up error handling...");
       player?.addEventListener("error", (event) => {
         const error = event.detail;
         if (error?.code === 7e3) {
+          console.log("\u{1F3AC} PLAYER-INIT: Ignoring benign LOAD_INTERRUPTED error (7000)");
           return;
         }
-        console.error("Shaka Player Error:", error);
+        console.error("\u{1F3AC} PLAYER-INIT: Shaka Player Error:", error);
         onError?.(new Error(`Shaka Player Error: ${error.message || "Unknown error"}`));
       });
+      console.log("\u{1F3AC} PLAYER-INIT: Error handling configured");
+      console.log("\u{1F3AC} PLAYER-INIT: Checking Mux configuration...");
       if (muxConfig) {
+        console.log("\u{1F3AC} PLAYER-INIT: Initializing Mux Analytics...");
         try {
           const playerInitTime = initShakaPlayerMux.utils.now();
           const muxOptions = {
@@ -1240,33 +1285,54 @@ var useShakePlayer = ({
               ...muxConfig.metadata
             }
           };
+          console.log("\u{1F3AC} PLAYER-INIT: Mux options:", muxOptions);
           initShakaPlayerMux(player, muxOptions, shaka);
+          console.log("\u{1F3AC} PLAYER-INIT: Mux Analytics initialized successfully");
           onMuxReady?.();
         } catch (error) {
-          console.error("Failed to initialize Mux Analytics:", error);
+          console.error("\u{1F3AC} PLAYER-INIT: Failed to initialize Mux Analytics:", error);
         }
+      } else {
+        console.log("\u{1F3AC} PLAYER-INIT: No Mux configuration provided");
       }
+      console.log("\u{1F3AC} PLAYER-INIT: Loading manifest:", manifestUrl);
+      console.log("\u{1F3AC} PLAYER-INIT: CRITICAL - Using manifestUrl instead of hardcoded URL");
       await player.load(manifestUrl);
+      console.log("\u{1F3AC} PLAYER-INIT: Manifest loaded successfully");
+      const endTime = performance.now();
+      console.log(`\u{1F3AC} PLAYER-INIT: Player initialization completed in ${(endTime - startTime).toFixed(2)}ms`);
       onPlayerReady?.(player);
       return player;
     } catch (error) {
       if (error?.code === 7e3) {
+        console.log("\u{1F3AC} PLAYER-INIT: Caught benign LOAD_INTERRUPTED error during initialization");
         return;
       }
-      console.error("Error initializing Shaka Player:", error);
+      const endTime = performance.now();
+      console.error(`\u{1F3AC} PLAYER-INIT: Error during initialization after ${(endTime - startTime).toFixed(2)}ms:`, error);
       onError?.(error);
       throw error;
     }
   }, [shakaConfig, drmConfig, src, onError, onPlayerReady, muxConfig, onMuxReady]);
   const destroyPlayer = useCallback(async () => {
-    if (playerRef.current) {
+    if (playerRef.current && !isDestroyingRef.current) {
+      isDestroyingRef.current = true;
+      console.log("\u{1F3AC} PLAYER-DESTROY: Setting destroy flag to prevent race conditions");
       try {
+        console.log("\u{1F3AC} PLAYER-DESTROY: Destroying player instance...");
         await playerRef.current.destroy();
+        console.log("\u{1F3AC} PLAYER-DESTROY: Player instance destroyed successfully");
       } catch (error) {
-        console.warn("Error destroying Shaka Player:", error);
+        console.warn("\u{1F3AC} PLAYER-DESTROY: Error destroying Shaka Player:", error);
       } finally {
         playerRef.current = null;
+        isDestroyingRef.current = false;
+        console.log("\u{1F3AC} PLAYER-DESTROY: Player reference cleared and destroy flag reset");
       }
+    } else if (isDestroyingRef.current) {
+      console.log("\u{1F3AC} PLAYER-DESTROY: Destroy already in progress, skipping...");
+    } else {
+      console.log("\u{1F3AC} PLAYER-DESTROY: No player instance to destroy");
     }
   }, [playerRef]);
   return {
@@ -1684,20 +1750,198 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
   const uiRef = useRef4(null);
   const registeredElements = useRef4(/* @__PURE__ */ new Set());
   const initializeUI = useCallback5(async () => {
-    if (!controls || !containerRef.current || !playerRef.current || !videoRef.current) {
+    console.log("\u{1F3AE} UI-INIT: Starting Shaka UI initialization...");
+    const startTime = performance.now();
+    if (!controls) {
+      console.log("\u{1F3AE} UI-INIT: Controls disabled, skipping UI initialization");
+      return null;
+    }
+    if (!containerRef.current) {
+      console.warn("\u{1F3AE} UI-INIT: Container ref not available, skipping UI initialization");
+      return null;
+    }
+    if (!playerRef.current) {
+      console.warn("\u{1F3AE} UI-INIT: Player ref not available, skipping UI initialization");
+      console.warn("\u{1F3AE} UI-INIT: This might be due to a race condition - player destroyed before UI init");
+      console.log("\u{1F3AE} UI-INIT: Attempting to wait for player reference...");
+      let waitAttempts = 0;
+      const maxWaitAttempts = 10;
+      while (!playerRef.current && waitAttempts < maxWaitAttempts) {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        waitAttempts++;
+        console.log(`\u{1F3AE} UI-INIT: Waiting for player ref... attempt ${waitAttempts}`);
+      }
+      if (!playerRef.current) {
+        console.error("\u{1F3AE} UI-INIT: Player ref still not available after waiting, aborting UI initialization");
+        return null;
+      } else {
+        console.log(`\u{1F3AE} UI-INIT: Player ref became available after ${waitAttempts * 100}ms`);
+      }
+    }
+    const player = playerRef.current;
+    console.log("\u{1F3AE} UI-INIT: RACE CHECK - Player state analysis:");
+    console.log("\u{1F3AE} UI-INIT: - Player exists:", !!player);
+    if (!player) {
+      console.error("\u{1F3AE} UI-INIT: CRITICAL - Player reference is null during UI initialization!");
+      console.error("\u{1F3AE} UI-INIT: This indicates a race condition between player destruction and UI initialization");
+      return null;
+    }
+    console.log("\u{1F3AE} UI-INIT: - Player isDestroyed:", player.isDestroyed && player.isDestroyed());
+    console.log("\u{1F3AE} UI-INIT: - Player getNetworkingEngine:", !!player.getNetworkingEngine());
+    console.log("\u{1F3AE} UI-INIT: - Player getConfiguration:", !!player.getConfiguration);
+    try {
+      const config = player.getConfiguration();
+      console.log("\u{1F3AE} UI-INIT: - Player configuration available:", !!config);
+      if (player.isDestroyed && player.isDestroyed()) {
+        console.error("\u{1F3AE} UI-INIT: CRITICAL - Player is destroyed, aborting UI initialization");
+        return null;
+      }
+    } catch (error) {
+      console.warn("\u{1F3AE} UI-INIT: - WARNING: Could not get player configuration:", error);
+      console.warn("\u{1F3AE} UI-INIT: - This may indicate the player is in an invalid state");
+      return null;
+    }
+    if (!videoRef.current) {
+      console.warn("\u{1F3AE} UI-INIT: Video ref not available, skipping UI initialization");
       return null;
     }
+    console.log("\u{1F3AE} UI-INIT: All prerequisites met, proceeding with initialization");
+    const chromecastAPICheck = {
+      chromeExists: !!window.chrome,
+      castExists: !!window.chrome?.cast,
+      isAvailable: !!window.chrome?.cast?.isAvailable,
+      sessionExists: !!window.chrome?.cast?.Session,
+      receiverExists: !!window.chrome?.cast?.ReceiverAvailability
+    };
+    console.log("\u{1F3AE} UI-INIT: CRITICAL - Chromecast API state before UI init:", chromecastAPICheck);
+    if (chromecastConfig) {
+      try {
+        console.log("\u{1F3AE} CAST-DIAG: Secure context:", window.isSecureContext, "Protocol:", window.location.protocol);
+        console.log("\u{1F3AE} CAST-DIAG: UserAgent:", navigator.userAgent);
+        console.log("\u{1F3AE} CAST-DIAG: In iframe:", window.top !== window.self);
+        const existingCastScript = document.querySelector('script#gcast_sender, script[src*="cast_sender.js"]');
+        if (existingCastScript) {
+          console.log("\u{1F3AE} CAST-DIAG: Found existing cast sender script:", {
+            id: existingCastScript.id,
+            src: existingCastScript.src,
+            async: existingCastScript.async,
+            defer: existingCastScript.defer,
+            dataset: existingCastScript.dataset
+          });
+        } else {
+          console.log("\u{1F3AE} CAST-DIAG: No cast sender script present yet");
+        }
+      } catch (e) {
+        console.warn("\u{1F3AE} CAST-DIAG: Environment diagnostics failed", e);
+      }
+      const hasCastFramework = !!window.chrome?.cast?.framework?.CastContext;
+      if (!hasCastFramework) {
+        console.warn("\u{1F3AE} UI-INIT: Cast Framework not loaded. Attempting to load sender library...");
+        const loadCastFramework = () => new Promise((resolve) => {
+          if (window.chrome?.cast?.framework?.CastContext) {
+            return resolve();
+          }
+          if (!document.getElementById("gcast_sender")) {
+            const script = document.createElement("script");
+            script.id = "gcast_sender";
+            script.src = "https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1";
+            script.async = true;
+            script.defer = true;
+            script.addEventListener("load", () => {
+              console.log("\u{1F3AE} CAST-LOAD: cast_sender.js loaded");
+            });
+            script.addEventListener("error", (err) => {
+              console.error("\u{1F3AE} CAST-LOAD: cast_sender.js failed to load", err);
+            });
+            document.head.appendChild(script);
+            console.log("\u{1F3AE} CAST-LOAD: Injected cast sender script tag");
+          }
+          const previousCallback = window.__onGCastApiAvailable;
+          window.__onGCastApiAvailable = (isAvailable) => {
+            console.log("\u{1F3AE} UI-INIT: __onGCastApiAvailable called. Available:", isAvailable);
+            try {
+              console.log("\u{1F3AE} CAST-CB: chrome.cast exists:", !!window.chrome?.cast);
+              console.log("\u{1F3AE} CAST-CB: chrome.cast.isAvailable:", !!window.chrome?.cast?.isAvailable);
+              console.log("\u{1F3AE} CAST-CB: chrome.cast.framework exists:", !!window.chrome?.cast?.framework);
+              console.log("\u{1F3AE} CAST-CB: CastContext exists:", !!window.chrome?.cast?.framework?.CastContext);
+            } catch (e) {
+              console.warn("\u{1F3AE} CAST-CB: Diagnostics failed", e);
+            }
+            if (typeof previousCallback === "function") {
+              try {
+                previousCallback(isAvailable);
+              } catch {
+              }
+            }
+            resolve();
+          };
+          let attempts = 0;
+          const maxAttempts = 50;
+          const poll = setInterval(() => {
+            attempts++;
+            const hasCast = !!window.chrome?.cast;
+            const hasFramework = !!window.chrome?.cast?.framework;
+            const hasContext = !!window.chrome?.cast?.framework?.CastContext;
+            if (attempts % 10 === 0) {
+              console.log(`\u{1F3AE} CAST-POLL: attempt=${attempts} cast=${hasCast} framework=${hasFramework} context=${hasContext}`);
+            }
+            if (hasContext || attempts >= maxAttempts) {
+              clearInterval(poll);
+              resolve();
+            }
+          }, 100);
+        });
+        await loadCastFramework();
+        console.log("\u{1F3AE} UI-INIT: Cast Framework load attempt complete. Framework present:", !!window.chrome?.cast?.framework?.CastContext);
+        if (!window.chrome?.cast?.framework?.CastContext) {
+          console.warn("\u{1F3AE} UI-INIT: CastContext still missing after load. Potential causes:");
+          console.warn("\u{1F3AE} UI-INIT: - Script blocked by CSP/adblock");
+          console.warn("\u{1F3AE} UI-INIT: - Non-secure origin (requires https/localhost)");
+          console.warn("\u{1F3AE} UI-INIT: - Non-Chrome browser or incognito restrictions");
+        }
+      }
+    }
+    if (chromecastConfig && !chromecastAPICheck.castExists) {
+      console.warn("\u{1F3AE} UI-INIT: WARNING - Chromecast config provided but Cast API not available!");
+      console.warn("\u{1F3AE} UI-INIT: This could cause race condition issues");
+      console.log("\u{1F3AE} UI-INIT: Waiting for Cast API to be available...");
+      let waitAttempts = 0;
+      const maxWaitAttempts = 50;
+      while (!window.chrome?.cast?.isAvailable && waitAttempts < maxWaitAttempts) {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        waitAttempts++;
+        if (waitAttempts % 10 === 0) {
+          console.log(`\u{1F3AE} UI-INIT: Still waiting for Cast API... (${waitAttempts * 100}ms)`);
+        }
+      }
+      if (window.chrome?.cast?.isAvailable) {
+        console.log(`\u{1F3AE} UI-INIT: Cast API became available after ${waitAttempts * 100}ms`);
+      } else {
+        console.warn(`\u{1F3AE} UI-INIT: Cast API not available after ${waitAttempts * 100}ms, proceeding anyway`);
+      }
+    }
+    console.log("\u{1F3AE} UI-INIT: Registering custom UI elements...");
     if (!registeredElements.current.has("skip_back_button")) {
+      console.log("\u{1F3AE} UI-INIT: Registering skip_back_button element");
       ShakaUI.Controls.registerElement("skip_back_button", new SkipBackButtonFactory(onSkipBack, iconSizes?.skipButtons));
       registeredElements.current.add("skip_back_button");
+    } else {
+      console.log("\u{1F3AE} UI-INIT: skip_back_button already registered");
     }
     if (!registeredElements.current.has("skip_forward_button")) {
+      console.log("\u{1F3AE} UI-INIT: Registering skip_forward_button element");
       ShakaUI.Controls.registerElement("skip_forward_button", new SkipForwardButtonFactory(onSkipForward, iconSizes?.skipButtons));
       registeredElements.current.add("skip_forward_button");
+    } else {
+      console.log("\u{1F3AE} UI-INIT: skip_forward_button already registered");
     }
+    console.log("\u{1F3AE} UI-INIT: Creating Shaka UI Overlay...");
     const ui = new ShakaUI.Overlay(playerRef.current, containerRef.current, videoRef.current);
     uiRef.current = ui;
+    console.log("\u{1F3AE} UI-INIT: Shaka UI Overlay created successfully");
     const isMobile = window.innerWidth <= 767;
+    console.log("\u{1F3AE} UI-INIT: Device detection - Mobile:", isMobile, "Width:", window.innerWidth);
+    console.log("\u{1F3AE} UI-INIT: Building control panel elements...");
     const controlPanelElements = [
       ...isMobile ? [] : ["skip_back_button"],
       ...isMobile ? [] : ["play_pause"],
@@ -1709,8 +1953,14 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
       "spacer",
       "fullscreen",
       "cast",
+      // Always show cast button
       "overflow_menu"
     ];
+    console.log("\u{1F3AE} UI-INIT: Control panel elements:", controlPanelElements);
+    console.log("\u{1F3AE} UI-INIT: Configuring Chromecast settings...");
+    const castReceiverAppId = chromecastConfig?.receiverApplicationId || "CC1AD845";
+    console.log("\u{1F3AE} UI-INIT: Cast receiver app ID:", castReceiverAppId);
+    console.log("\u{1F3AE} UI-INIT: Chromecast config provided:", !!chromecastConfig, chromecastConfig);
     const uiConfig = {
       seekBarColors: {
         base: seekbarColors?.base || "rgba(255, 255, 255, 0.3)",
@@ -1722,25 +1972,76 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
       },
       controlPanelElements,
       addBigPlayButton: isMobile,
-      ...chromecastConfig?.receiverApplicationId && {
-        "castReceiverAppId": chromecastConfig.receiverApplicationId,
-        "castAndroidReceiverCompatible": false
-      },
+      // Always configure chromecast with defaults or provided config
+      castReceiverAppId,
+      castAndroidReceiverCompatible: true,
+      // Enable Android TV compatibility
       overflowMenuButtons: [
         "quality",
         "picture_in_picture",
         "playback_rate"
       ]
     };
-    if (chromecastConfig?.receiverApplicationId) {
-      uiConfig.castReceiverAppId = chromecastConfig.receiverApplicationId;
-      uiConfig.castAndroidReceiverCompatible = false;
+    console.log("\u{1F3AE} UI-INIT: Final UI config:", uiConfig);
+    console.log("\u{1F3AE} UI-INIT: Applying UI configuration...");
+    console.log("\u{1F3AE} UI-INIT: RACE CHECK - Pre-configure state:");
+    console.log("\u{1F3AE} UI-INIT: - UI exists:", !!ui);
+    console.log("\u{1F3AE} UI-INIT: - Cast receiver ID:", uiConfig.castReceiverAppId);
+    console.log("\u{1F3AE} UI-INIT: - Cast compatibility:", uiConfig.castAndroidReceiverCompatible);
+    const configureStartTime = performance.now();
+    try {
+      ui.configure(uiConfig);
+      const configureEndTime = performance.now();
+      console.log(`\u{1F3AE} UI-INIT: UI configuration applied successfully in ${(configureEndTime - configureStartTime).toFixed(2)}ms`);
+      setTimeout(() => {
+        const castButton = containerRef.current?.querySelector(".shaka-cast-button");
+        const castAvailable = !!window.chrome?.cast?.isAvailable;
+        console.log("\u{1F3AE} UI-INIT: POST-CONFIGURE CAST CHECK:");
+        console.log("\u{1F3AE} UI-INIT: - Cast button found:", !!castButton);
+        console.log("\u{1F3AE} UI-INIT: - Chrome cast API available:", castAvailable);
+        console.log("\u{1F3AE} UI-INIT: - Cast button visible:", castButton ? !castButton.hasAttribute("hidden") : false);
+        if (castButton) {
+          castButton.addEventListener("click", async () => {
+            console.log("\u{1F3AE} CAST-CLICK: Cast button clicked!");
+            console.log("\u{1F3AE} CAST-CLICK: Player state:", {
+              exists: !!playerRef.current,
+              isDestroyed: playerRef.current?.isDestroyed?.(),
+              videoLoaded: !!videoRef.current?.src,
+              videoCurrentTime: videoRef.current?.currentTime,
+              videoDuration: videoRef.current?.duration
+            });
+            const cast = window.chrome?.cast;
+            const framework = cast?.framework;
+            if (framework?.CastContext) {
+              const castContext = framework.CastContext.getInstance();
+              try {
+                castContext.setOptions?.({
+                  receiverApplicationId: chromecastConfig?.receiverApplicationId || "CC1AD845",
+                  autoJoinPolicy: cast?.AutoJoinPolicy?.TAB_AND_ORIGIN_SCOPED || "origin_scoped"
+                });
+                console.log("\u{1F3AE} CAST-CLICK: CastContext options set");
+              } catch (e) {
+                console.warn("\u{1F3AE} CAST-CLICK: Failed to set CastContext options", e);
+              }
+              console.log("\u{1F3AE} CAST-CLICK: Cast state:", castContext.getCastState?.());
+            } else {
+              console.warn("\u{1F3AE} CAST-CLICK: Cast framework not available on click");
+            }
+          });
+        }
+      }, 50);
+    } catch (error) {
+      const configureEndTime = performance.now();
+      console.error(`\u{1F3AE} UI-INIT: ERROR during UI configuration after ${(configureEndTime - configureStartTime).toFixed(2)}ms:`, error);
+      throw error;
     }
-    ui.configure(uiConfig);
+    console.log("\u{1F3AE} UI-INIT: Setting up mobile-specific customizations...");
     if (isMobile) {
+      console.log("\u{1F3AE} UI-INIT: Setting up big play button customization for mobile");
       const customizeBigPlayButton = () => {
         const bigPlayButton = containerRef.current?.querySelector(".shaka-big-play-button");
         if (bigPlayButton && !bigPlayButton.hasAttribute("data-customized")) {
+          console.log("\u{1F3AE} UI-INIT: Customizing big play button");
           const buttonSize = iconSizes?.bigPlayButton || 40;
           bigPlayButton.innerHTML = renderIcon(BigPlayIcon, { size: buttonSize });
           bigPlayButton.setAttribute("data-customized", "true");
@@ -1748,8 +2049,10 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
           buttonElement.style.display = "flex";
           buttonElement.style.alignItems = "center";
           buttonElement.style.justifyContent = "center";
+          console.log("\u{1F3AE} UI-INIT: Big play button customized successfully");
         }
       };
+      console.log("\u{1F3AE} UI-INIT: Scheduling big play button customization");
       setTimeout(customizeBigPlayButton, 100);
       const observer = new MutationObserver(() => {
         customizeBigPlayButton();
@@ -1760,18 +2063,29 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
           subtree: true,
           attributes: false
         });
+        console.log("\u{1F3AE} UI-INIT: Mutation observer set up for big play button");
       }
+    } else {
+      console.log("\u{1F3AE} UI-INIT: Desktop mode - skipping big play button customization");
     }
+    console.log("\u{1F3AE} UI-INIT: Seekbar styling handled by CSS");
+    const endTime = performance.now();
+    console.log(`\u{1F3AE} UI-INIT: UI initialization completed successfully in ${(endTime - startTime).toFixed(2)}ms`);
     return ui;
   }, [controls, containerRef, playerRef, videoRef, chromecastConfig, seekbarColors, onSkipBack, onSkipForward, iconSizes]);
   const destroyUI = useCallback5(() => {
     if (uiRef.current) {
       try {
+        console.log("\u{1F3AE} UI-DESTROY: Destroying Shaka UI...");
         uiRef.current.destroy();
+        console.log("\u{1F3AE} UI-DESTROY: Shaka UI destroyed successfully");
       } catch (error) {
-        console.error("Error destroying UI:", error);
+        console.error("\u{1F3AE} UI-DESTROY: Error destroying UI:", error);
       }
       uiRef.current = null;
+      console.log("\u{1F3AE} UI-DESTROY: UI reference cleared");
+    } else {
+      console.log("\u{1F3AE} UI-DESTROY: No UI instance to destroy");
     }
   }, []);
   return {
@@ -2538,6 +2852,9 @@ styleInject(`/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
   .grid {
     display: grid;
   }
+  .hidden {
+    display: none;
+  }
   .aspect-video {
     aspect-ratio: var(--aspect-video);
   }
@@ -3295,14 +3612,18 @@ var Player = forwardRef(
     const videoRef = useRef8(null);
     const containerRef = useRef8(null);
     const adContainerRef = useRef8(null);
+    const isInitializingRef = useRef8(false);
+    const stableShakaConfig = useMemo(() => shakaConfig, [shakaConfig]);
+    const stableDrmConfig = useMemo(() => drmConfig, [drmConfig]);
+    const stableMuxConfig = useMemo(() => muxConfig, [muxConfig]);
     useImperativeHandle(ref, () => videoRef.current, []);
     const { playerRef, initializePlayer, destroyPlayer } = useShakePlayer({
       src,
-      shakaConfig,
-      drmConfig,
+      shakaConfig: stableShakaConfig,
+      drmConfig: stableDrmConfig,
       onError: events?.onError,
       onPlayerReady: events?.onPlayerReady,
-      muxConfig,
+      muxConfig: stableMuxConfig,
       onMuxReady: events?.onMuxReady,
       onMuxDataUpdate: events?.onMuxDataUpdate
     });
@@ -3336,7 +3657,7 @@ var Player = forwardRef(
       onLoadStart: events?.onLoadStart,
       onCanPlay: events?.onCanPlay
     });
-    const { uiRef, initializeUI, destroyUI } = useShakaUI(
+    const { uiRef, initializeUI } = useShakaUI(
       playerRef,
       containerRef,
       videoRef,
@@ -3389,43 +3710,105 @@ var Player = forwardRef(
         }
       }
     };
-    const initializeChromecast = () => {
-      if (!chromecastConfig?.enabled) {
-        return;
-      }
-      try {
-        if (events?.onCastStateChange) {
-          setTimeout(() => events.onCastStateChange(false), 100);
-        }
-      } catch (error) {
-        console.warn("Chromecast initialization failed:", error);
-      }
-    };
     useEffect5(() => {
+      console.log("SOURCE IS", src);
+      console.log("\u{1F680} MAIN-INIT: Starting main player initialization sequence...");
+      const initStartTime = performance.now();
       const video = videoRef.current;
-      if (!video) return;
+      if (!video) {
+        console.warn("\u{1F680} MAIN-INIT: Video element not available, skipping initialization");
+        return;
+      }
+      console.log("\u{1F680} MAIN-INIT: Video element available, proceeding with initialization");
       const initialize = async () => {
+        if (isInitializingRef.current) {
+          console.log("\u{1F680} MAIN-INIT: Initialization already in progress, skipping...");
+          return;
+        }
+        if (playerRef.current && !playerRef.current.isDestroyed?.()) {
+          console.log("\u{1F680} MAIN-INIT: Player already exists and is not destroyed, loading new source instead of re-initialization");
+          try {
+            const manifestUrl = src.url;
+            console.log("\u{1F680} MAIN-INIT: Loading new manifest:", manifestUrl);
+            await playerRef.current.load(manifestUrl);
+            console.log("\u{1F680} MAIN-INIT: New manifest loaded successfully without re-initialization");
+            isInitializingRef.current = false;
+            return;
+          } catch (error) {
+            if (error && typeof error === "object" && "code" in error && error.code === 7e3) {
+              console.log("\u{1F680} MAIN-INIT: Benign LOAD_INTERRUPTED (7000) while loading new source. Skipping re-init.");
+              isInitializingRef.current = false;
+              return;
+            }
+            console.error("\u{1F680} MAIN-INIT: Failed to load new source, proceeding with full re-initialization:", error);
+          }
+        }
+        isInitializingRef.current = true;
+        console.log("\u{1F680} MAIN-INIT: Setting initialization flag to prevent race conditions");
         try {
+          console.log("\u{1F680} MAIN-INIT: === STEP 1: Initialize Player ===");
+          const playerInitStart = performance.now();
           await initializePlayer(video);
+          const playerInitEnd = performance.now();
+          console.log(`\u{1F680} MAIN-INIT: Player initialization completed in ${(playerInitEnd - playerInitStart).toFixed(2)}ms`);
+          console.log("\u{1F680} MAIN-INIT: === STEP 2: Setup Event Listeners ===");
+          const eventListenersStart = performance.now();
           setupEventListeners();
+          const eventListenersEnd = performance.now();
+          console.log(`\u{1F680} MAIN-INIT: Event listeners setup completed in ${(eventListenersEnd - eventListenersStart).toFixed(2)}ms`);
+          console.log("\u{1F680} MAIN-INIT: === STEP 3: Setup Quality Tracking ===");
+          const qualityStart = performance.now();
           const cleanupQuality = setupQualityTracking();
           configureQuality();
+          const qualityEnd = performance.now();
+          console.log(`\u{1F680} MAIN-INIT: Quality setup completed in ${(qualityEnd - qualityStart).toFixed(2)}ms`);
+          console.log("\u{1F680} MAIN-INIT: === STEP 4: Initialize UI (Including Chromecast) ===");
+          const timeSincePlayerInit = performance.now() - playerInitEnd;
+          console.log(`\u{1F680} MAIN-INIT: RACE CHECK - Time gap between player and UI init: ${timeSincePlayerInit.toFixed(2)}ms`);
+          const uiInitStart = performance.now();
           await initializeUI();
+          const uiInitEnd = performance.now();
+          console.log(`\u{1F680} MAIN-INIT: UI initialization completed in ${(uiInitEnd - uiInitStart).toFixed(2)}ms`);
+          console.log("\u{1F680} MAIN-INIT: === STEP 5: Initialize Ads ===");
+          const adsInitStart = performance.now();
           initializeAds();
-          initializeChromecast();
+          const adsInitEnd = performance.now();
+          console.log(`\u{1F680} MAIN-INIT: Ads initialization completed in ${(adsInitEnd - adsInitStart).toFixed(2)}ms`);
+          const totalInitTime = performance.now() - initStartTime;
+          console.log(`\u{1F680} MAIN-INIT: === INITIALIZATION COMPLETE ===`);
+          console.log(`\u{1F680} MAIN-INIT: Total initialization time: ${totalInitTime.toFixed(2)}ms`);
         } catch (error) {
-          console.error("Error during player initialization:", error);
+          const errorTime = performance.now() - initStartTime;
+          console.error(`\u{1F680} MAIN-INIT: Error during player initialization after ${errorTime.toFixed(2)}ms:`, error);
           handleMuxError(error);
+        } finally {
+          isInitializingRef.current = false;
+          console.log("\u{1F680} MAIN-INIT: Clearing initialization flag");
         }
       };
       initialize();
       return () => {
+        console.log("\u{1F680} MAIN-CLEANUP: Starting cleanup sequence...");
+        const cleanupStart = performance.now();
+        if (!playerRef.current && !isInitializingRef.current) {
+          console.log("\u{1F680} MAIN-CLEANUP: No player to cleanup and no initialization in progress, skipping cleanup");
+          return;
+        }
+        if (playerRef.current && !playerRef.current.isDestroyed?.()) {
+          console.log("\u{1F680} MAIN-CLEANUP: Player exists and is not destroyed - this might be a source change");
+          console.log("\u{1F680} MAIN-CLEANUP: Checking if this is a real unmount or just a re-render...");
+        }
+        isInitializingRef.current = false;
+        console.log("\u{1F680} MAIN-CLEANUP: Reset initialization flag");
+        console.log("\u{1F680} MAIN-CLEANUP: Cleaning up event listeners...");
         cleanupEventListeners();
-        destroyUI();
+        console.log("\u{1F680} MAIN-CLEANUP: Destroying UI...");
+        console.log("\u{1F680} MAIN-CLEANUP: Destroying Mux...");
         destroyMux();
-        destroyPlayer();
+        const cleanupEnd = performance.now();
+        console.log(`\u{1F680} MAIN-CLEANUP: Cleanup completed in ${(cleanupEnd - cleanupStart).toFixed(2)}ms`);
       };
-    }, [src]);
+    }, [src?.url]);
     useEffect5(() => {
       const video = videoRef.current;
       if (!video) return;
@@ -3488,8 +3871,6 @@ var Player = forwardRef(
         ref: containerRef,
         className: containerClasses,
         style: containerStyle,
-        "data-shaka-player-container": true,
-        "data-shaka-player-cast-receiver-id": chromecastConfig?.receiverApplicationId,
         children: [
           /* @__PURE__ */ jsx8(
             "video",