@mottosports/motto-video-player 1.0.1-rc.52 → 1.0.1-rc.54

package/dist/index.d.mts

@@ -308,6 +308,11 @@ interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'on
      * Event callbacks
      */
     events?: PlayerEvents;
+    /**
+     * Locale for Shaka Player UI localization (e.g., 'en', 'ar', 'es')
+     * Defaults to 'en' if not provided
+     */
+    locale?: string;
     containerClassName?: string;
 }
 /**

package/dist/index.d.ts

@@ -308,6 +308,11 @@ interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'on
      * Event callbacks
      */
     events?: PlayerEvents;
+    /**
+     * Locale for Shaka Player UI localization (e.g., 'en', 'ar', 'es')
+     * Defaults to 'en' if not provided
+     */
+    locale?: string;
     containerClassName?: string;
 }
 /**

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.52";
+var version = "1.0.1-rc.54";
 
 // src/utils/licenseCache.ts
 var PERSISTENT_LICENSE_PREFIX = "motto_lic_";
@@ -2000,7 +2000,7 @@ var SkipForwardButtonFactory = class {
     return new SkipForwardButton(rootElement, controls, this.onSkipForward, this.iconSize);
   }
 };
-var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig, seekbarColors, onSkipBack, onSkipForward, iconSizes) => {
+var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig, seekbarColors, onSkipBack, onSkipForward, iconSizes, locale = "en") => {
   const uiRef = (0, import_react6.useRef)(null);
   const registeredElements = (0, import_react6.useRef)(/* @__PURE__ */ new Set());
   const initializeUI = (0, import_react6.useCallback)(async () => {
@@ -2017,6 +2017,14 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
     }
     const ui = new import_shaka_player3.ui.Overlay(playerRef.current, containerRef.current, videoRef.current);
     uiRef.current = ui;
+    if (locale !== "en") {
+      try {
+        ui.getControls().getLocalization().changeLocale([locale]);
+        console.log(`Set locale to '${locale}'`);
+      } catch (error) {
+        console.warn(`Failed to set locale to '${locale}', falling back to 'en':`, error);
+      }
+    }
     const isMobile = window.innerWidth <= 767;
     const controlPanelElements = [
       ...isMobile ? [] : ["skip_back_button"],
@@ -2081,7 +2089,7 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
       }
     }
     return ui;
-  }, [controls, containerRef, playerRef, videoRef, chromecastConfig, seekbarColors, onSkipBack, onSkipForward, iconSizes]);
+  }, [controls, containerRef, playerRef, videoRef, chromecastConfig, seekbarColors, onSkipBack, onSkipForward, iconSizes, locale]);
   const destroyUI = (0, import_react6.useCallback)(() => {
     if (uiRef.current) {
       try {
@@ -3598,6 +3606,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)(
   ({
@@ -3620,12 +3703,13 @@ var Player = (0, import_react12.forwardRef)(
     seekbarConfig,
     iconSizes,
     events,
+    locale = "en",
     containerClassName,
     ...videoProps
   }, ref) => {
-    console.log("system73Config", system73Config);
     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,
@@ -3676,7 +3760,8 @@ var Player = (0, import_react12.forwardRef)(
       seekbarConfig,
       events?.onSkipBack,
       events?.onSkipForward,
-      iconSizes
+      iconSizes,
+      locale
     );
     const { isLive, isVisible: isLiveBadgeVisible } = useLiveBadge(playerRef, {
       enabled: true,
@@ -3716,7 +3801,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;
@@ -3728,23 +3817,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) {
@@ -3760,7 +3879,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) {
@@ -3775,16 +3895,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;
@@ -4413,6 +4532,7 @@ var Video = ({
       src: activePlaylist,
       className: (0, import_tailwind_merge3.twMerge)("video-player-container", className),
       events,
+      locale,
       containerClassName: "w-full h-full",
       children
     }
@@ -4581,6 +4701,7 @@ var Event = ({
           src: activePlaylist,
           className: (0, import_tailwind_merge4.twMerge)(className, "peer"),
           events,
+          locale,
           containerClassName: "w-full h-full"
         }
       ) }),
@@ -4936,6 +5057,7 @@ var CreativeWork = ({
             ...events
           },
           src: activePlaylist,
+          locale,
           containerClassName: "w-full h-full"
         }
       ),