@mottosports/motto-video-player 1.0.1-rc.51 → 1.0.1-rc.53

package/dist/index.js

@@ -1211,7 +1211,7 @@ var supportsWidevinePersistentLicenses = () => {
 var import_mux_data_shakaplayer = __toESM(require("@mux/mux-data-shakaplayer"));
 
 // package.json
-var version = "1.0.1-rc.51";
+var version = "1.0.1-rc.53";
 
 // src/utils/licenseCache.ts
 var PERSISTENT_LICENSE_PREFIX = "motto_lic_";
@@ -3598,6 +3598,81 @@ html[dir=rtl] .shaka-overflow-menu .shaka-overflow-button .material-svg-icon:fir
 
 // src/Player.tsx
 var import_tailwind_merge2 = require("tailwind-merge");
+
+// src/utils/scriptLoader.ts
+var SCRIPT_CONFIGS = {
+  ima: {
+    src: "https://imasdk.googleapis.com/js/sdkloader/ima3.js",
+    id: "ima-sdk",
+    type: "text/javascript"
+  },
+  system73: {
+    src: "//cdn.s73cloud.com/4/s73-sdk-shakaplayer.js",
+    id: "system73-sdk",
+    type: "application/javascript"
+  }
+};
+function loadScript(config) {
+  return new Promise((resolve, reject) => {
+    if (document.getElementById(config.id)) {
+      resolve();
+      return;
+    }
+    const script = document.createElement("script");
+    script.id = config.id;
+    script.src = config.src;
+    script.type = config.type || "text/javascript";
+    script.async = true;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error(`Failed to load script: ${config.src}`));
+    document.head.appendChild(script);
+  });
+}
+function getRequiredScriptLoaders(needsIma, needsSystem73) {
+  const loaders = [];
+  if (needsIma) {
+    loaders.push(loadScript(SCRIPT_CONFIGS.ima));
+  }
+  if (needsSystem73) {
+    loaders.push(loadScript(SCRIPT_CONFIGS.system73));
+  }
+  return loaders;
+}
+async function loadScripts(scriptLoaders) {
+  if (scriptLoaders.length === 0) {
+    return;
+  }
+  try {
+    await Promise.all(scriptLoaders);
+  } catch (error) {
+    console.error("Error loading scripts:", error);
+    throw error;
+  }
+}
+function waitForGlobal(globalName, timeout = 5e3) {
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now();
+    function checkGlobal() {
+      const global = window[globalName];
+      if (global) {
+        resolve(global);
+        return;
+      }
+      if (Date.now() - startTime > timeout) {
+        reject(new Error(`Timeout waiting for global: ${globalName}`));
+        return;
+      }
+      setTimeout(checkGlobal, 100);
+    }
+    checkGlobal();
+  });
+}
+async function waitForGlobals(globalNames, timeout = 5e3) {
+  const promises = globalNames.map((name) => waitForGlobal(name, timeout));
+  await Promise.all(promises);
+}
+
+// src/Player.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var Player = (0, import_react12.forwardRef)(
   ({
@@ -3625,6 +3700,7 @@ var Player = (0, import_react12.forwardRef)(
   }, ref) => {
     const videoRef = (0, import_react12.useRef)(null);
     const containerRef = (0, import_react12.useRef)(null);
+    const [isScriptsLoaded, setIsScriptsLoaded] = (0, import_react12.useState)(false);
     (0, import_react12.useImperativeHandle)(ref, () => videoRef.current, []);
     const { playerRef, initializePlayer, destroyPlayer, isRetrying } = useShakaPlayer({
       src,
@@ -3715,7 +3791,11 @@ var Player = (0, import_react12.forwardRef)(
       if (!imaConfig?.adTagUrl || !playerRef.current || !videoRef.current || !uiRef.current) {
         return;
       }
-      console.log("Initializing ads...");
+      if (!window.google?.ima) {
+        console.error("Google IMA SDK not available when trying to initialize ads");
+        return;
+      }
+      console.log("Initializing ads with autoplay:", autoPlay);
       try {
         const player = playerRef.current;
         const video = videoRef.current;
@@ -3727,23 +3807,53 @@ var Player = (0, import_react12.forwardRef)(
           console.error("Ad manager not available");
           return;
         }
-        adManager.initClientSide(container, video);
         const google = window.google;
+        let adsRenderingSettings = null;
+        if (imaConfig.adsRenderingSettings) {
+          adsRenderingSettings = imaConfig.adsRenderingSettings;
+        } else if (autoPlay) {
+          adsRenderingSettings = new google.ima.AdsRenderingSettings();
+          adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
+        }
+        adManager.initClientSide(container, video, adsRenderingSettings);
         const adsRequest = new google.ima.AdsRequest();
         adsRequest.adTagUrl = imaConfig.adTagUrl;
         adManager.requestClientSideAds(adsRequest);
-        console.log("Ads requested with tag:", imaConfig.adTagUrl);
+        console.log("Ads requested successfully with tag:", imaConfig.adTagUrl, "autoplay:", autoPlay);
       } catch (error) {
         console.error("Error initializing ads:", error);
       }
-    }, [imaConfig]);
+    }, [imaConfig, autoPlay]);
+    (0, import_react12.useEffect)(() => {
+      const loadRequiredScripts = async () => {
+        try {
+          const scriptLoaders = getRequiredScriptLoaders(!!imaConfig?.adTagUrl, !!system73Config?.apiKey);
+          await loadScripts(scriptLoaders);
+          const globalsToWait = [];
+          if (imaConfig?.adTagUrl) {
+            globalsToWait.push("google");
+          }
+          if (system73Config?.apiKey) {
+            globalsToWait.push("S73ShakaPlayerWrapper");
+          }
+          if (globalsToWait.length > 0) {
+            await waitForGlobals(globalsToWait);
+          }
+          setIsScriptsLoaded(true);
+        } catch (error) {
+          console.error("Error loading required scripts:", error);
+          setIsScriptsLoaded(true);
+        }
+      };
+      loadRequiredScripts();
+    }, [imaConfig?.adTagUrl, system73Config?.apiKey]);
     (0, import_react12.useEffect)(() => {
       const video = videoRef.current;
-      if (!video) return;
+      if (!video || !isScriptsLoaded) return;
       const initialize = async () => {
         try {
           let system73Wrapper = null;
-          if (system73Config?.apiKey) {
+          if (system73Config?.apiKey && window.S73ShakaPlayerWrapper) {
             const playerConfig = { ...shakaConfig };
             system73Wrapper = initializeSystem73(playerConfig);
             if (system73Wrapper) {
@@ -3759,7 +3869,8 @@ var Player = (0, import_react12.forwardRef)(
           const cleanupQuality = setupQualityTracking();
           configureQuality();
           await initializeUI();
-          if (imaConfig) {
+          if (imaConfig?.adTagUrl && window.google?.ima) {
+            console.log("Initializing ads immediately after UI setup");
             initializeAds();
           }
         } catch (error) {
@@ -3774,16 +3885,15 @@ var Player = (0, import_react12.forwardRef)(
         destroyMux();
         destroyPlayer();
       };
-    }, [src]);
+    }, [src, isScriptsLoaded]);
     (0, import_react12.useEffect)(() => {
       const video = videoRef.current;
       if (!video) return;
       video.autoplay = autoPlay;
       video.loop = loop;
-      video.muted = muted;
       video.controls = false;
       if (poster) video.poster = poster;
-    }, [autoPlay, loop, muted, poster]);
+    }, [autoPlay, loop, muted, poster, imaConfig?.adTagUrl]);
     (0, import_react12.useEffect)(() => {
       const video = videoRef.current;
       if (!video) return;