@mottosports/motto-video-player 1.0.1-rc.70 → 1.0.1-rc.72

package/dist/index.mjs

@@ -1148,7 +1148,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, useState as useState4 } from "react";
+import { forwardRef, useEffect as useEffect5, useRef as useRef9, useImperativeHandle, useCallback as useCallback9, useState as useState4 } from "react";
 import shaka3 from "shaka-player/dist/shaka-player.ui";
 
 // src/hooks/useShakaPlayer.ts
@@ -1204,7 +1204,7 @@ var supportsWidevinePersistentLicenses = () => {
 import initShakaPlayerMux from "@mux/mux-data-shakaplayer";
 
 // package.json
-var version = "1.0.1-rc.70";
+var version = "1.0.1-rc.72";
 
 // src/utils/licenseCache.ts
 var PERSISTENT_LICENSE_PREFIX = "motto_lic_";
@@ -1367,7 +1367,8 @@ var useShakaPlayer = ({
   onMuxReady,
   onMuxDataUpdate,
   publicKey,
-  mottoToken
+  mottoToken,
+  hasAds = false
 }) => {
   const playerRef = useRef(null);
   const [isRetrying, setIsRetrying] = useState(false);
@@ -1672,7 +1673,9 @@ var useShakaPlayer = ({
         if (playerRef.current === player) playerRef.current = null;
         return;
       }
-      await player.load(manifestUrl);
+      if (!hasAds) {
+        await player.load(manifestUrl);
+      }
       onPlayerReady?.(player);
       return player;
     } catch (error) {
@@ -1687,6 +1690,24 @@ var useShakaPlayer = ({
   const initializePlayer = useCallback(async (video) => {
     return initializePlayerInternal(video);
   }, [initializePlayerInternal]);
+  const loadManifest = useCallback(async () => {
+    const player = playerRef.current;
+    if (!player) {
+      console.warn("Cannot load manifest: player not initialized");
+      return;
+    }
+    try {
+      const manifestUrl = getManifestUrl();
+      await player.load(manifestUrl);
+    } catch (error) {
+      if (error?.code === 7e3) {
+        return;
+      }
+      console.error("Error loading manifest:", error);
+      onError?.(error);
+      throw error;
+    }
+  }, [getManifestUrl, onError]);
   const destroyPlayer = useCallback(async () => {
     const playerInstance = playerRef.current;
     if (playerInstance) {
@@ -1750,6 +1771,7 @@ var useShakaPlayer = ({
   return {
     playerRef,
     initializePlayer,
+    loadManifest,
     destroyPlayer,
     isRetrying
   };
@@ -2568,6 +2590,149 @@ var useKeyboardControls = (videoRef, options = {}) => {
   };
 };
 
+// src/hooks/useAdEvents.ts
+import { useCallback as useCallback8, useRef as useRef8 } from "react";
+var useAdEvents = (playerRef, handlers) => {
+  const listenersRef = useRef8([]);
+  const setupAdEventListeners = useCallback8(() => {
+    const player = playerRef.current;
+    if (!player) return;
+    const adManager = player.getAdManager();
+    if (!adManager) return;
+    const onAdsManagerLoaded = (event) => {
+      const adsManager = event.getAdsManager();
+      const onAdStarted = () => {
+        console.log("Ad started");
+        handlers.onAdStart?.();
+      };
+      const onAdComplete = () => {
+        console.log("Ad completed");
+        handlers.onAdComplete?.();
+      };
+      const onAdError = (adErrorEvent) => {
+        console.error("Ad error:", adErrorEvent.getError());
+        handlers.onAdError?.(adErrorEvent.getError());
+      };
+      const onAdSkipped = () => {
+        console.log("Ad skipped");
+        handlers.onAdSkipped?.();
+      };
+      const onAdPaused = () => {
+        console.log("Ad paused");
+        handlers.onAdPaused?.();
+      };
+      const onAdResumed = () => {
+        console.log("Ad resumed");
+        handlers.onAdResumed?.();
+      };
+      const onAdProgress = (adProgressData) => {
+        handlers.onAdProgress?.(adProgressData);
+      };
+      const onAllAdsCompleted = () => {
+        console.log("All ads completed");
+        handlers.onAllAdsCompleted?.();
+      };
+      const adEventListeners = [];
+      if (window.google?.ima) {
+        const AdEvent = window.google.ima.AdEvent.Type;
+        const AdErrorEvent = window.google.ima.AdErrorEvent.Type;
+        if (handlers.onAdStart) {
+          adsManager.addEventListener(AdEvent.STARTED, onAdStarted);
+          adEventListeners.push({ event: AdEvent.STARTED, listener: onAdStarted });
+        }
+        if (handlers.onAdComplete) {
+          adsManager.addEventListener(AdEvent.COMPLETE, onAdComplete);
+          adEventListeners.push({ event: AdEvent.COMPLETE, listener: onAdComplete });
+        }
+        if (handlers.onAdError) {
+          adsManager.addEventListener(AdErrorEvent.AD_ERROR, onAdError);
+          adEventListeners.push({ event: AdErrorEvent.AD_ERROR, listener: onAdError });
+        }
+        if (handlers.onAdSkipped) {
+          adsManager.addEventListener(AdEvent.SKIPPED, onAdSkipped);
+          adEventListeners.push({ event: AdEvent.SKIPPED, listener: onAdSkipped });
+        }
+        if (handlers.onAdPaused) {
+          adsManager.addEventListener(AdEvent.PAUSED, onAdPaused);
+          adEventListeners.push({ event: AdEvent.PAUSED, listener: onAdPaused });
+        }
+        if (handlers.onAdResumed) {
+          adsManager.addEventListener(AdEvent.RESUMED, onAdResumed);
+          adEventListeners.push({ event: AdEvent.RESUMED, listener: onAdResumed });
+        }
+        if (handlers.onAdProgress) {
+          adsManager.addEventListener(AdEvent.AD_PROGRESS, onAdProgress);
+          adEventListeners.push({ event: AdEvent.AD_PROGRESS, listener: onAdProgress });
+        }
+        if (handlers.onAllAdsCompleted) {
+          adsManager.addEventListener(AdEvent.ALL_ADS_COMPLETED, onAllAdsCompleted);
+          adEventListeners.push({ event: AdEvent.ALL_ADS_COMPLETED, listener: onAllAdsCompleted });
+        }
+        listenersRef.current.push({
+          adsManager,
+          listeners: adEventListeners
+        });
+      }
+    };
+    try {
+      player.addEventListener("ad-started", () => {
+        console.log("Shaka ad-started event");
+        handlers.onAdStart?.();
+      });
+      player.addEventListener("ad-complete", () => {
+        console.log("Shaka ad-complete event");
+        handlers.onAdComplete?.();
+      });
+      player.addEventListener("ad-skipped", () => {
+        console.log("Shaka ad-skipped event");
+        handlers.onAdSkipped?.();
+      });
+      player.addEventListener("ad-error", (event) => {
+        console.error("Shaka ad-error event:", event);
+        handlers.onAdError?.(event);
+      });
+      listenersRef.current.push({
+        type: "shaka",
+        player,
+        events: ["ad-started", "ad-complete", "ad-skipped", "ad-error"]
+      });
+    } catch (error) {
+      console.warn("Error setting up ad event listeners:", error);
+    }
+  }, [playerRef, handlers]);
+  const cleanupAdEventListeners = useCallback8(() => {
+    try {
+      listenersRef.current.forEach((listenerGroup) => {
+        if (listenerGroup.type === "shaka" && listenerGroup.player) {
+          listenerGroup.events.forEach((eventName) => {
+            try {
+              listenerGroup.player.removeEventListener(eventName, () => {
+              });
+            } catch (e) {
+              console.warn(`Error removing ${eventName} listener:`, e);
+            }
+          });
+        } else if (listenerGroup.adsManager && listenerGroup.listeners) {
+          listenerGroup.listeners.forEach(({ event, listener }) => {
+            try {
+              listenerGroup.adsManager.removeEventListener(event, listener);
+            } catch (e) {
+              console.warn("Error removing ad listener:", e);
+            }
+          });
+        }
+      });
+      listenersRef.current = [];
+    } catch (error) {
+      console.warn("Error cleaning up ad event listeners:", error);
+    }
+  }, []);
+  return {
+    setupAdEventListeners,
+    cleanupAdEventListeners
+  };
+};
+
 // src/components/Loading.tsx
 import { twMerge } from "tailwind-merge";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -3885,6 +4050,7 @@ import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var Player = forwardRef(
   ({
     src,
+    managedMode = false,
     autoPlay = false,
     loop = false,
     muted = false,
@@ -3909,13 +4075,14 @@ var Player = forwardRef(
     auth,
     ...videoProps
   }, ref) => {
-    const videoRef = useRef8(null);
-    const containerRef = useRef8(null);
+    const videoRef = useRef9(null);
+    const containerRef = useRef9(null);
     const [isScriptsLoaded, setIsScriptsLoaded] = useState4(false);
     const [isInitialLoading, setIsInitialLoading] = useState4(true);
     const [bfResetKey, setBfResetKey] = useState4(0);
+    const hasPlaylist = !!src && !!(src.url || src.drm?.widevine?.playlistUrl || src.drm?.playready?.playlistUrl || src.drm?.fairplay?.playlistUrl);
     useImperativeHandle(ref, () => videoRef.current, []);
-    const { playerRef, initializePlayer, destroyPlayer, isRetrying } = useShakaPlayer({
+    const { playerRef, initializePlayer, loadManifest, destroyPlayer, isRetrying } = useShakaPlayer({
       src,
       shakaConfig,
       drmConfig,
@@ -3925,7 +4092,8 @@ var Player = forwardRef(
       onMuxReady: events?.onMuxReady,
       onMuxDataUpdate: events?.onMuxDataUpdate,
       publicKey,
-      mottoToken: auth?.mottoToken
+      mottoToken: auth?.mottoToken,
+      hasAds: !!imaConfig?.adTagUrl
     });
     const {
       initializeMux,
@@ -3983,7 +4151,17 @@ var Player = forwardRef(
       showPulseAnimation: true,
       liveThresholdSeconds: 15
     });
-    const initializeSystem73 = useCallback8((playerConfig) => {
+    const { setupAdEventListeners, cleanupAdEventListeners } = useAdEvents(playerRef, {
+      onAdStart: events?.onAdStart,
+      onAdComplete: events?.onAdComplete,
+      onAdError: events?.onAdError,
+      onAdSkipped: events?.onAdSkipped,
+      onAdPaused: events?.onAdPaused,
+      onAdResumed: events?.onAdResumed,
+      onAdProgress: events?.onAdProgress,
+      onAllAdsCompleted: events?.onAllAdsCompleted
+    });
+    const initializeSystem73 = useCallback9((playerConfig) => {
       if (!system73Config?.apiKey || !window.S73ShakaPlayerWrapper) {
         return null;
       }
@@ -4003,7 +4181,7 @@ var Player = forwardRef(
         return null;
       }
     }, [system73Config]);
-    const initializeAds = useCallback8(() => {
+    const initializeAds = useCallback9(async () => {
       if (!imaConfig?.adTagUrl || !playerRef.current || !videoRef.current || !uiRef.current) {
         return;
       }
@@ -4011,7 +4189,6 @@ var Player = forwardRef(
         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;
@@ -4035,11 +4212,13 @@ var Player = forwardRef(
         const adsRequest = new google.ima.AdsRequest();
         adsRequest.adTagUrl = imaConfig.adTagUrl;
         adManager.requestClientSideAds(adsRequest);
-        console.log("Ads requested successfully with tag:", imaConfig.adTagUrl, "autoplay:", autoPlay);
+        setupAdEventListeners();
+        await new Promise((resolve) => setTimeout(resolve, 1e4));
+        await loadManifest();
       } catch (error) {
         console.error("Error initializing ads:", error);
       }
-    }, [imaConfig, autoPlay]);
+    }, [imaConfig, autoPlay, setupAdEventListeners, loadManifest]);
     useEffect5(() => {
       const loadRequiredScripts = async () => {
         try {
@@ -4096,8 +4275,7 @@ var Player = forwardRef(
           configureQuality();
           await initializeUI();
           if (imaConfig?.adTagUrl && window.google?.ima) {
-            console.log("Initializing ads immediately after UI setup");
-            initializeAds();
+            await initializeAds();
           }
         } catch (error) {
           console.error("Error during player initialization:", error);
@@ -4107,11 +4285,12 @@ var Player = forwardRef(
       initialize();
       return () => {
         cleanupEventListeners();
+        cleanupAdEventListeners();
         destroyUI();
         destroyMux();
         destroyPlayer();
       };
-    }, [src, isScriptsLoaded, bfResetKey]);
+    }, [managedMode ? hasPlaylist : src, isScriptsLoaded, bfResetKey, managedMode]);
     useEffect5(() => {
       const video = videoRef.current;
       if (!video) return;
@@ -4223,11 +4402,11 @@ import { twMerge as twMerge3 } from "tailwind-merge";
 import { useQuery } from "@tanstack/react-query";
 
 // src/api/video.ts
-var fetchVideoData = async (videoId, publicKey, mottoToken) => {
+var fetchVideoData = async (videoId, publicKey, mottoToken, adsEnabled = false, locale = "en") => {
   const endpoint = "https://cda.mottostreaming.com/motto.cda.streaming.video.v1.VideoService/GetVideo";
   const url = new URL(endpoint);
   url.searchParams.set("encoding", "json");
-  url.searchParams.set("message", JSON.stringify({ videoId }));
+  url.searchParams.set("message", JSON.stringify({ videoId, enable_ads: adsEnabled, locale }));
   const response = await fetch(url, {
     method: "GET",
     headers: {
@@ -4241,14 +4420,14 @@ var fetchVideoData = async (videoId, publicKey, mottoToken) => {
   const data = await response.json();
   return data.video;
 };
-async function fetchVideosList(publicKey, videoIds, mottoToken, skip = 0, limit = 0) {
+async function fetchVideosList(publicKey, videoIds, mottoToken, skip = 0, limit = 0, adsEnabled = true, locale = "en") {
   if (!videoIds || videoIds.length === 0) {
     return [];
   }
   const endpoint = "https://cda.mottostreaming.com/motto.cda.streaming.video.v1.VideoService/BatchGetVideos";
   const url = new URL(endpoint);
   url.searchParams.set("encoding", "json");
-  url.searchParams.set("message", JSON.stringify({ videoIds }));
+  url.searchParams.set("message", JSON.stringify({ videoIds, enable_ads: adsEnabled, locale }));
   const response = await fetch(url.toString(), {
     method: "GET",
     headers: {
@@ -4703,6 +4882,7 @@ var Video = ({
   auth,
   settings,
   queryOptions = {},
+  adsEnabled = false,
   ...props
 }) => {
   const {
@@ -4711,8 +4891,8 @@ var Video = ({
     error,
     refetch
   } = useQuery({
-    queryKey: ["video", videoId, publicKey, auth?.mottoToken],
-    queryFn: () => fetchVideoData(videoId, publicKey, auth?.mottoToken),
+    queryKey: ["video", videoId, publicKey, auth?.mottoToken, adsEnabled, locale],
+    queryFn: () => fetchVideoData(videoId, publicKey, auth?.mottoToken, adsEnabled, locale),
     enabled: !!videoId && !!publicKey && !providedVideoData,
     refetchInterval: refetchInterval > 0 ? refetchInterval : false,
     staleTime: queryOptions.staleTime ?? 5 * 60 * 1e3,
@@ -4768,19 +4948,21 @@ var Video = ({
     {
       ...props,
       src: activePlaylist,
+      managedMode: true,
       className: twMerge3("video-player-container", className),
       events,
       locale,
       containerClassName: "w-full h-full",
       publicKey,
       auth,
+      ...adsEnabled && video?.ad?.adTagUrl ? { imaConfig: { adTagUrl: video?.ad?.adTagUrl } } : {},
       children
     }
   ) }) });
 };
 
 // src/Event.tsx
-import { useCallback as useCallback9, useEffect as useEffect8, useState as useState6 } from "react";
+import { useCallback as useCallback10, 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";
@@ -4796,6 +4978,7 @@ var Event = ({
   settings,
   auth,
   queryOptions = {},
+  adsEnabled = false,
   ...props
 }) => {
   const {
@@ -4821,8 +5004,8 @@ var Event = ({
     isLoading: videosIsLoading,
     error: videosError
   } = useQuery2({
-    queryKey: ["videos-list", publicKey, videoIds, auth?.mottoToken],
-    queryFn: () => fetchVideosList(publicKey, videoIds, auth?.mottoToken, 0, 0),
+    queryKey: ["videos-list", publicKey, videoIds, auth?.mottoToken, adsEnabled, locale],
+    queryFn: () => fetchVideosList(publicKey, videoIds, auth?.mottoToken, 0, 0, adsEnabled, locale),
     enabled: !!publicKey && videoIds.length > 0,
     refetchInterval: activePlaylist === null ? 3e4 : false,
     staleTime: queryOptions.staleTime ?? 5 * 60 * 1e3,
@@ -4939,12 +5122,14 @@ var Event = ({
         {
           ...props,
           src: activePlaylist,
+          managedMode: true,
           className: twMerge4(className, "peer aspect-video"),
           events,
           locale,
           containerClassName: "w-full h-full",
           publicKey,
-          auth
+          auth,
+          ...adsEnabled && activeVideo?.ad?.adTagUrl ? { imaConfig: { adTagUrl: activeVideo?.ad?.adTagUrl } } : {}
         }
       ) }),
       !hideTitle && eventData && /* @__PURE__ */ jsx10(
@@ -4996,7 +5181,7 @@ function PreEvent({
     }, 1e3);
     return () => clearInterval(interval);
   }, [date, remainingTime]);
-  const renderCountdown = useCallback9(() => {
+  const renderCountdown = useCallback10(() => {
     if (shouldBeStarted) {
       return /* @__PURE__ */ jsx10("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
     }
@@ -5141,6 +5326,7 @@ var CreativeWork = ({
   settings,
   auth,
   queryOptions = {},
+  adsEnabled = false,
   ...props
 }) => {
   const {
@@ -5167,8 +5353,8 @@ var CreativeWork = ({
     isLoading: videosIsLoading,
     error: videosError
   } = useQuery3({
-    queryKey: ["videos-list", publicKey, videoIds, auth?.mottoToken],
-    queryFn: () => fetchVideosList(publicKey, videoIds, auth?.mottoToken, 0, 0),
+    queryKey: ["videos-list", publicKey, videoIds, auth?.mottoToken, adsEnabled, locale],
+    queryFn: () => fetchVideosList(publicKey, videoIds, auth?.mottoToken, 0, 0, adsEnabled, locale),
     enabled: !!publicKey && videoIds.length > 0,
     refetchInterval: activePlaylist === null ? 3e4 : false,
     staleTime: queryOptions.staleTime ?? 5 * 60 * 1e3,
@@ -5295,6 +5481,7 @@ var CreativeWork = ({
         {
           ...props,
           className: twMerge5(className, "peer aspect-video"),
+          managedMode: true,
           events: {
             ...events
           },
@@ -5302,7 +5489,8 @@ var CreativeWork = ({
           locale,
           containerClassName: "w-full h-full",
           publicKey,
-          auth
+          auth,
+          ...adsEnabled && activeVideo?.ad?.adTagUrl ? { imaConfig: { adTagUrl: activeVideo?.ad?.adTagUrl } } : {}
         }
       ),
       !hideTitle && /* @__PURE__ */ jsx11(