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

package/dist/index.mjs

@@ -1115,7 +1115,7 @@ html[dir=rtl] .shaka-overflow-menu .shaka-overflow-button .material-svg-icon:fir
 `);
 
 // src/Player.tsx
-import { forwardRef, useEffect as useEffect5, useRef as useRef8, useImperativeHandle, useCallback as useCallback8 } from "react";
+import { forwardRef, useEffect as useEffect5, useRef as useRef8, useImperativeHandle, useCallback as useCallback8, useState as useState4 } from "react";
 import shaka3 from "shaka-player/dist/shaka-player.ui";
 
 // src/hooks/useShakaPlayer.ts
@@ -1170,7 +1170,7 @@ var supportsWidevinePersistentLicenses = () => {
 import initShakaPlayerMux from "@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_";
@@ -1959,7 +1959,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 = useRef4(null);
   const registeredElements = useRef4(/* @__PURE__ */ new Set());
   const initializeUI = useCallback5(async () => {
@@ -1976,6 +1976,14 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
     }
     const ui = new ShakaUI.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"],
@@ -2040,7 +2048,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 = useCallback5(() => {
     if (uiRef.current) {
       try {
@@ -3557,6 +3565,81 @@ html[dir=rtl] .shaka-overflow-menu .shaka-overflow-button .material-svg-icon:fir
 
 // src/Player.tsx
 import { twMerge as twMerge2 } from "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
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var Player = forwardRef(
   ({
@@ -3579,12 +3662,13 @@ var Player = forwardRef(
     seekbarConfig,
     iconSizes,
     events,
+    locale = "en",
     containerClassName,
     ...videoProps
   }, ref) => {
-    console.log("system73Config", system73Config);
     const videoRef = useRef8(null);
     const containerRef = useRef8(null);
+    const [isScriptsLoaded, setIsScriptsLoaded] = useState4(false);
     useImperativeHandle(ref, () => videoRef.current, []);
     const { playerRef, initializePlayer, destroyPlayer, isRetrying } = useShakaPlayer({
       src,
@@ -3635,7 +3719,8 @@ var Player = forwardRef(
       seekbarConfig,
       events?.onSkipBack,
       events?.onSkipForward,
-      iconSizes
+      iconSizes,
+      locale
     );
     const { isLive, isVisible: isLiveBadgeVisible } = useLiveBadge(playerRef, {
       enabled: true,
@@ -3675,7 +3760,11 @@ var Player = 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;
@@ -3687,23 +3776,53 @@ var Player = 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]);
+    useEffect5(() => {
+      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]);
     useEffect5(() => {
       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) {
@@ -3719,7 +3838,8 @@ var Player = 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) {
@@ -3734,16 +3854,15 @@ var Player = forwardRef(
         destroyMux();
         destroyPlayer();
       };
-    }, [src]);
+    }, [src, isScriptsLoaded]);
     useEffect5(() => {
       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]);
     useEffect5(() => {
       const video = videoRef.current;
       if (!video) return;
@@ -3961,7 +4080,7 @@ var getErrorType = (error, video) => {
 };
 
 // src/messages/useMessages.tsx
-import { useState as useState4, useEffect as useEffect6 } from "react";
+import { useState as useState5, useEffect as useEffect6 } from "react";
 
 // src/messages/en.json
 var en_default = {
@@ -4263,8 +4382,8 @@ var getBrowserLanguage = () => {
   return availableLanguages[language] ? language : "en";
 };
 var useMessages = (locale) => {
-  const [language, setLanguage] = useState4("en");
-  const [translations, setTranslations] = useState4(availableLanguages.en);
+  const [language, setLanguage] = useState5("en");
+  const [translations, setTranslations] = useState5(availableLanguages.en);
   useEffect6(() => {
     const lang = !!availableLanguages?.[locale] ? locale : getBrowserLanguage();
     ;
@@ -4372,6 +4491,7 @@ var Video = ({
       src: activePlaylist,
       className: twMerge3("video-player-container", className),
       events,
+      locale,
       containerClassName: "w-full h-full",
       children
     }
@@ -4379,7 +4499,7 @@ var Video = ({
 };
 
 // src/Event.tsx
-import { useCallback as useCallback9, useEffect as useEffect8, useState as useState5 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect8, useState as useState6 } from "react";
 import { twMerge as twMerge4 } from "tailwind-merge";
 import { useQuery as useQuery2 } from "@tanstack/react-query";
 import { Fragment, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -4412,8 +4532,8 @@ var Event = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [activePlaylist, setActivePlaylist] = useState5();
-  const [activeVideoId, setActiveVideoId] = useState5();
+  const [activePlaylist, setActivePlaylist] = useState6();
+  const [activeVideoId, setActiveVideoId] = useState6();
   const videoIds = eventData?.videoIds ?? [];
   const {
     data: videosData,
@@ -4429,7 +4549,7 @@ var Event = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [loadingApisState, setLoadingApisState] = useState5(true);
+  const [loadingApisState, setLoadingApisState] = useState6(true);
   useEffect8(() => {
     if (videosData !== void 0) {
       setLoadingApisState(false);
@@ -4477,8 +4597,8 @@ var Event = ({
       }
     }
   }, [activeVideoId, videosData, events]);
-  const [error, setError] = useState5(null);
-  const [loadingPlaylist, setLoadingPlaylist] = useState5(true);
+  const [error, setError] = useState6(null);
+  const [loadingPlaylist, setLoadingPlaylist] = useState6(true);
   const videosDataError = videosData?.some((video) => !!video.error);
   useEffect8(() => {
     if (isEventLoading || videosIsLoading || loadingApisState) {
@@ -4540,6 +4660,7 @@ var Event = ({
           src: activePlaylist,
           className: twMerge4(className, "peer"),
           events,
+          locale,
           containerClassName: "w-full h-full"
         }
       ) }),
@@ -4577,7 +4698,7 @@ function PreEvent({
 }) {
   const date = new Date(event.startTime);
   const now = /* @__PURE__ */ new Date();
-  const [remainingTime, setRemainingTime] = useState5(
+  const [remainingTime, setRemainingTime] = useState6(
     date.getTime() - now.getTime()
   );
   const shouldBeStarted = remainingTime < 0;
@@ -4721,7 +4842,7 @@ var TitleAndDescription = ({
 };
 
 // src/CreativeWork.tsx
-import { useEffect as useEffect9, useState as useState6 } from "react";
+import { useEffect as useEffect9, useState as useState7 } from "react";
 import { twMerge as twMerge5 } from "tailwind-merge";
 import { useQuery as useQuery3 } from "@tanstack/react-query";
 import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -4754,9 +4875,9 @@ var CreativeWork = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [activePlaylist, setActivePlaylist] = useState6();
-  const [activeVideoId, setActiveVideoId] = useState6();
-  const [showCountDown, setShowCountDown] = useState6(false);
+  const [activePlaylist, setActivePlaylist] = useState7();
+  const [activeVideoId, setActiveVideoId] = useState7();
+  const [showCountDown, setShowCountDown] = useState7(false);
   const videoIds = creativeWorkData?.videoIds ?? [];
   const {
     data: videosData,
@@ -4772,7 +4893,7 @@ var CreativeWork = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [loadingApisState, setLoadingApisState] = useState6(true);
+  const [loadingApisState, setLoadingApisState] = useState7(true);
   useEffect9(() => {
     if (videosData !== void 0) {
       setLoadingApisState(false);
@@ -4823,7 +4944,7 @@ var CreativeWork = ({
       }
     }
   }, [activeVideoId, videosData, events]);
-  const [error, setError] = useState6(null);
+  const [error, setError] = useState7(null);
   const videosDataError = videosData?.some((video) => !!video.error);
   useEffect9(() => {
     if (creativeWorkError || videosError || videosDataError) {
@@ -4847,7 +4968,7 @@ var CreativeWork = ({
       }
     ) }) });
   }
-  const [loadingPlaylist, setLoadingPlaylist] = useState6(true);
+  const [loadingPlaylist, setLoadingPlaylist] = useState7(true);
   useEffect9(() => {
     const creativeWorkLoadedWithNoVideos = !isCreativeWorkLoading && creativeWorkData && creativeWorkData.videoIds && creativeWorkData.videoIds.length === 0;
     const creativeWorkLoadedWithNoData = !isCreativeWorkLoading && creativeWorkData && !creativeWorkData.videoIds;
@@ -4895,6 +5016,7 @@ var CreativeWork = ({
             ...events
           },
           src: activePlaylist,
+          locale,
           containerClassName: "w-full h-full"
         }
       ),
@@ -4924,7 +5046,7 @@ function PreCreativeWork({
 }) {
   const date = new Date(creativeWork.releaseTime);
   const now = /* @__PURE__ */ new Date();
-  const [remainingTime, setRemainingTime] = useState6(
+  const [remainingTime, setRemainingTime] = useState7(
     date.getTime() - now.getTime()
   );
   const shouldBeStarted = remainingTime < 0;