@mottosports/motto-video-player 1.0.1-rc.36 → 1.0.1-rc.37

package/dist/index.mjs

@@ -1106,8 +1106,8 @@ styleInject(`/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
 import { forwardRef, useEffect as useEffect5, useRef as useRef8, useImperativeHandle } from "react";
 import shaka3 from "shaka-player/dist/shaka-player.ui";
 
-// src/hooks/useShakePlayer.ts
-import { useRef, useCallback } from "react";
+// src/hooks/useShakaPlayer.ts
+import { useRef, useCallback, useState } from "react";
 import shaka from "shaka-player/dist/shaka-player.ui";
 
 // src/utils/devices.ts
@@ -1132,15 +1132,183 @@ var isPlayReadySupported = () => {
   const isIE = /Trident|MSIE/.test(userAgent);
   return isXbox || isEdge || isIE;
 };
+var isChrome64PlusOnMacOrWindows = () => {
+  if (typeof navigator === "undefined") {
+    return false;
+  }
+  const userAgent = navigator.userAgent || "";
+  const isChromeMatch = userAgent.match(/Chrome\/(\d+)/);
+  if (!isChromeMatch) {
+    return false;
+  }
+  if (/Edg|OPR|Opera/.test(userAgent)) {
+    return false;
+  }
+  const chromeVersion = parseInt(isChromeMatch[1], 10);
+  if (chromeVersion < 64) {
+    return false;
+  }
+  const isMacOS = /Mac OS X|Macintosh/.test(userAgent);
+  const isWindows = /Windows/.test(userAgent);
+  return isMacOS || isWindows;
+};
 
-// src/hooks/useShakePlayer.ts
+// src/hooks/useShakaPlayer.ts
 import initShakaPlayerMux from "@mux/mux-data-shakaplayer";
 
 // package.json
-var version = "1.0.1-rc.36";
+var version = "1.0.1-rc.37";
+
+// src/utils/licenseCache.ts
+var PERSISTENT_LICENSE_PREFIX = "motto_lic_";
+var LICENSE_EXPIRY_MS = 7 * 24 * 60 * 60 * 1e3;
+var LICENSE_MAX_RETRY_ATTEMPTS = 10;
+var getAllLicenseCacheKeys = () => {
+  const keys = [];
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if (key?.startsWith(PERSISTENT_LICENSE_PREFIX)) {
+      keys.push(key);
+    }
+  }
+  return keys;
+};
+var getAllLicenseCacheEntries = () => {
+  const keys = getAllLicenseCacheKeys();
+  const entries = [];
+  for (const key of keys) {
+    try {
+      const stored = localStorage.getItem(key);
+      if (stored) {
+        const data = JSON.parse(stored);
+        entries.push({ key, data });
+      }
+    } catch (error) {
+      console.warn(`Failed to parse license cache entry for key ${key}:`, error);
+      localStorage.removeItem(key);
+    }
+  }
+  return entries;
+};
+var evictLRUEntry = () => {
+  const entries = getAllLicenseCacheEntries();
+  if (entries.length === 0) {
+    return false;
+  }
+  entries.sort((a, b) => {
+    const oldestA = Math.min(...a.data.map((session) => session.timestamp));
+    const oldestB = Math.min(...b.data.map((session) => session.timestamp));
+    return oldestA - oldestB;
+  });
+  const lruEntry = entries[0];
+  localStorage.removeItem(lruEntry.key);
+  console.log(`Evicted LRU license cache entry: ${lruEntry.key}`);
+  return true;
+};
+var storeWithQuotaHandling = (key, data) => {
+  let attempts = 0;
+  while (attempts < LICENSE_MAX_RETRY_ATTEMPTS) {
+    try {
+      localStorage.setItem(key, data);
+      return true;
+    } catch (error) {
+      if (error instanceof DOMException && (error.code === 22 || // QUOTA_EXCEEDED_ERR
+      error.name === "QuotaExceededError" || error.name === "NS_ERROR_DOM_QUOTA_REACHED")) {
+        console.warn(`QuotaExceededError on attempt ${attempts + 1}, attempting LRU eviction...`);
+        if (!evictLRUEntry()) {
+          console.error("No more entries to evict, storage operation failed");
+          return false;
+        }
+        attempts++;
+      } else {
+        console.error("Failed to store license cache data:", error);
+        return false;
+      }
+    }
+  }
+  console.error(`Failed to store license cache data after ${LICENSE_MAX_RETRY_ATTEMPTS} eviction attempts`);
+  return false;
+};
+var managePersistentLicenseStorage = (playlistId, licenseCacheKey, newSessionMetadata) => {
+  try {
+    const storageKey = `${PERSISTENT_LICENSE_PREFIX}${playlistId}_${licenseCacheKey}`;
+    const stored = localStorage.getItem(storageKey);
+    let existingSessions = [];
+    if (stored) {
+      try {
+        existingSessions = JSON.parse(stored);
+      } catch (parseError) {
+        console.warn("Failed to parse existing persistent license data:", parseError);
+        existingSessions = [];
+      }
+    }
+    const now = Date.now();
+    let validSessions = existingSessions.filter(
+      (session) => now - session.timestamp < LICENSE_EXPIRY_MS
+    );
+    if (newSessionMetadata && newSessionMetadata.length > 0) {
+      const newSessions = newSessionMetadata.map((session) => {
+        const uint8Array = new Uint8Array(session.initData);
+        const binaryString = Array.from(uint8Array).map((byte) => String.fromCharCode(byte)).join("");
+        return {
+          sessionId: session.sessionId,
+          initData: btoa(binaryString),
+          initDataType: session.initDataType,
+          keySystem: session.keySystem,
+          timestamp: now
+        };
+      });
+      const newSessionIds = new Set(newSessions.map((s) => s.sessionId));
+      validSessions = validSessions.filter((session) => !newSessionIds.has(session.sessionId));
+      validSessions = [...validSessions, ...newSessions];
+    }
+    if (validSessions.length === 0) {
+      localStorage.removeItem(storageKey);
+    } else {
+      const dataToStore = JSON.stringify(validSessions);
+      const success = storeWithQuotaHandling(storageKey, dataToStore);
+      if (!success) {
+        console.error(`Failed to store license cache for ${storageKey} after quota handling`);
+        return validSessions;
+      }
+    }
+    return validSessions;
+  } catch (error) {
+    console.warn("Failed to manage persistent license storage:", error);
+    return [];
+  }
+};
+var storePersistentLicense = (playlistId, licenseCacheKey, sessionMetadata) => {
+  managePersistentLicenseStorage(playlistId, licenseCacheKey, sessionMetadata);
+};
+var retrievePersistentLicense = (playlistId, licenseCacheKey) => {
+  try {
+    const validSessions = managePersistentLicenseStorage(playlistId, licenseCacheKey);
+    return validSessions.map((session) => ({
+      sessionId: session.sessionId,
+      initData: Uint8Array.from(atob(session.initData), (c) => c.charCodeAt(0)).buffer,
+      initDataType: session.initDataType,
+      keySystem: session.keySystem
+    }));
+  } catch (error) {
+    console.warn("Failed to retrieve persistent license:", error);
+    return [];
+  }
+};
+var clearAllPersistentLicenses = () => {
+  try {
+    const keys = getAllLicenseCacheKeys();
+    for (const key of keys) {
+      localStorage.removeItem(key);
+    }
+    console.log(`Cleared ${keys.length} persistent license cache entries`);
+  } catch (error) {
+    console.error("Failed to clear persistent licenses:", error);
+  }
+};
 
-// src/hooks/useShakePlayer.ts
-var useShakePlayer = ({
+// src/hooks/useShakaPlayer.ts
+var useShakaPlayer = ({
   src,
   shakaConfig,
   drmConfig,
@@ -1151,8 +1319,26 @@ var useShakePlayer = ({
   onMuxDataUpdate
 }) => {
   const playerRef = useRef(null);
-  const initializePlayer = useCallback(async (video) => {
+  const [isRetrying, setIsRetrying] = useState(false);
+  const videoElementRef = useRef(null);
+  const getManifestUrl = useCallback(() => {
+    let manifestUrl = src.url;
+    const isDRM = Boolean(src.drm);
+    if (isDRM) {
+      const isPlayReady = isPlayReadySupported();
+      if (isAppleDevice() && src.drm.fairplay?.certificateUrl) {
+        manifestUrl = src.drm.fairplay.playlistUrl;
+      } else if (isPlayReady && src.drm.playready?.licenseUrl) {
+        manifestUrl = src.drm.playready.playlistUrl;
+      } else {
+        manifestUrl = src.drm?.widevine?.playlistUrl || "";
+      }
+    }
+    return manifestUrl;
+  }, [src]);
+  const initializePlayerInternal = useCallback(async (video) => {
     try {
+      videoElementRef.current = video;
       shaka.polyfill.installAll();
       if (!shaka.Player.isBrowserSupported()) {
         throw new Error("Browser not supported by Shaka Player");
@@ -1163,36 +1349,55 @@ var useShakePlayer = ({
       if (shakaConfig) {
         player.configure(shakaConfig);
       }
-      let manifestUrl = src.url;
+      const manifestUrl = getManifestUrl();
+      let playlistId = src.id;
       const isDRM = Boolean(src.drm);
-      let cert = null;
+      let storedSessionsMetadata = [];
+      if (isDRM && playlistId) {
+        storedSessionsMetadata = retrievePersistentLicense(playlistId, src.drm.licenseCacheKey ?? "");
+      }
       if (isDRM) {
-        const isPlayReady = isPlayReadySupported();
-        if (isAppleDevice() && src.drm.fairplay?.certificateUrl) {
-          const req = await fetch(src.drm.fairplay.certificateUrl);
-          cert = await req.arrayBuffer();
-          manifestUrl = src.drm.fairplay.playlistUrl;
-        } else if (isPlayReady && src.drm.playready?.licenseUrl) {
-          manifestUrl = src.drm.playready.playlistUrl;
-        } else {
-          manifestUrl = src.drm?.widevine?.playlistUrl || "";
-        }
-        player.configure({
-          drm: {
-            servers: {
-              "com.widevine.alpha": src.drm.widevine?.licenseUrl,
-              "com.microsoft.playready": src.drm.playready?.licenseUrl,
-              "com.apple.fps": src.drm.fairplay?.licenseUrl
-            },
-            ...cert && {
-              advanced: {
-                "com.apple.fps": {
-                  serverCertificate: new Uint8Array(cert)
-                }
+        const drmConfig2 = {
+          servers: {
+            "com.widevine.alpha": src.drm.widevine?.licenseUrl,
+            "com.microsoft.playready": src.drm.playready?.licenseUrl,
+            "com.apple.fps": src.drm.fairplay?.licenseUrl
+          },
+          ...src.drm.fairplay && {
+            advanced: {
+              "com.apple.fps": {
+                serverCertificateUri: src.drm.fairplay.certificateUrl
               }
             }
           }
-        });
+        };
+        drmConfig2.advanced = {
+          ...drmConfig2.advanced,
+          "com.widevine.alpha": {
+            ...drmConfig2.advanced?.["com.widevine.alpha"],
+            // set to `persistent-license` only on Chrome 64+ on MacOS/Windows: https://shaka-player-demo.appspot.com/docs/api/tutorial-faq.html
+            sessionType: isChrome64PlusOnMacOrWindows() ? "persistent-license" : "temporary"
+          },
+          "com.microsoft.playready": {
+            ...drmConfig2.advanced?.["com.microsoft.playready"],
+            sessionType: "temporary"
+            // PlayReady always uses temporary sessions
+          },
+          "com.apple.fps": {
+            ...drmConfig2.advanced?.["com.apple.fps"],
+            sessionType: "temporary"
+            // FairPlay always uses temporary sessions - Safari won't play with persistent-license
+          }
+        };
+        if (storedSessionsMetadata.length > 0) {
+          drmConfig2.persistentSessionOnlinePlayback = true;
+          drmConfig2.persistentSessionsMetadata = storedSessionsMetadata.map((session) => ({
+            sessionId: session.sessionId,
+            initData: new Uint8Array(session.initData),
+            initDataType: session.initDataType
+          }));
+        }
+        player.configure({ drm: drmConfig2 });
         const netEngine = player.getNetworkingEngine();
         if (netEngine) {
           netEngine.registerRequestFilter((type, request) => {
@@ -1216,6 +1421,28 @@ var useShakePlayer = ({
         if (error?.code === 7e3) {
           return;
         }
+        if (error?.code >= 6e3 && error?.code < 7e3 && !isRetrying && videoElementRef.current) {
+          console.warn(`DRM error detected (code: ${error.code}), clearing licenses and retrying...`);
+          setIsRetrying(true);
+          clearAllPersistentLicenses();
+          setTimeout(async () => {
+            try {
+              const video2 = videoElementRef.current;
+              const currentPlayer = playerRef.current;
+              if (video2 && currentPlayer) {
+                console.log("Reloading manifest after license cache clear...");
+                await currentPlayer.load(getManifestUrl());
+                console.log("Manifest reloaded successfully");
+              }
+            } catch (retryError) {
+              console.error("Failed to retry after license clear:", retryError);
+              onError?.(retryError);
+            } finally {
+              setIsRetrying(false);
+            }
+          }, 500);
+          return;
+        }
         console.error("Shaka Player Error:", error);
         onError?.(new Error(`Shaka Player Error: ${error.message || "Unknown error"}`));
       });
@@ -1247,6 +1474,30 @@ var useShakePlayer = ({
         }
       }
       await player.load(manifestUrl);
+      if (isDRM && playlistId) {
+        try {
+          setTimeout(() => {
+            const activeDrmSessions = player.getActiveSessionsMetadata?.();
+            if (activeDrmSessions) {
+              const persistentSessions = activeDrmSessions.filter(
+                (session) => session.sessionType === "persistent-license"
+              );
+              if (persistentSessions.length > 0) {
+                const sessionsToStore = persistentSessions.map((session) => ({
+                  sessionId: session.sessionId,
+                  initData: session.initData,
+                  initDataType: session.initDataType,
+                  keySystem: session.keySystem || "com.widevine.alpha"
+                  // fallback
+                }));
+                storePersistentLicense(playlistId, src.drm.licenseCacheKey ?? "", sessionsToStore);
+              }
+            }
+          }, 2e3);
+        } catch (error) {
+          console.warn("Failed to store persistent license sessions:", error);
+        }
+      }
       onPlayerReady?.(player);
       return player;
     } catch (error) {
@@ -1257,7 +1508,10 @@ var useShakePlayer = ({
       onError?.(error);
       throw error;
     }
-  }, [shakaConfig, drmConfig, src, onError, onPlayerReady, muxConfig, onMuxReady]);
+  }, [shakaConfig, drmConfig, src, onError, onPlayerReady, muxConfig, onMuxReady, isRetrying, getManifestUrl]);
+  const initializePlayer = useCallback(async (video) => {
+    return initializePlayerInternal(video);
+  }, [initializePlayerInternal]);
   const destroyPlayer = useCallback(async () => {
     if (playerRef.current) {
       try {
@@ -1272,7 +1526,8 @@ var useShakePlayer = ({
   return {
     playerRef,
     initializePlayer,
-    destroyPlayer
+    destroyPlayer,
+    isRetrying
   };
 };
 
@@ -1809,11 +2064,11 @@ var useEventHandlers = (videoRef, handlers) => {
 };
 
 // src/hooks/useLiveBadge.ts
-import { useEffect, useState, useRef as useRef5 } from "react";
+import { useEffect, useState as useState2, useRef as useRef5 } from "react";
 var useLiveBadge = (playerRef, options = {}) => {
-  const [isLive, setIsLive] = useState(false);
-  const [isVisible, setIsVisible] = useState(false);
-  const [isNearLiveEdge, setIsNearLiveEdge] = useState(false);
+  const [isLive, setIsLive] = useState2(false);
+  const [isVisible, setIsVisible] = useState2(false);
+  const [isNearLiveEdge, setIsNearLiveEdge] = useState2(false);
   const intervalRef = useRef5(null);
   const { enabled = true, onLiveStateChange, liveThresholdSeconds = 15 } = options;
   const checkLiveStatus = () => {
@@ -1900,7 +2155,7 @@ var useLiveBadge = (playerRef, options = {}) => {
 };
 
 // src/hooks/usePosterFallback.ts
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
 
 // src/hooks/useLiveIndicator.ts
 import { useEffect as useEffect3, useRef as useRef7 } from "react";
@@ -3294,7 +3549,7 @@ var Player = forwardRef(
     const containerRef = useRef8(null);
     const adContainerRef = useRef8(null);
     useImperativeHandle(ref, () => videoRef.current, []);
-    const { playerRef, initializePlayer, destroyPlayer } = useShakePlayer({
+    const { playerRef, initializePlayer, destroyPlayer, isRetrying } = useShakaPlayer({
       src,
       shakaConfig,
       drmConfig,
@@ -3671,7 +3926,7 @@ var getErrorType = (error, video) => {
 };
 
 // src/messages/useMessages.tsx
-import { useState as useState3, useEffect as useEffect6 } from "react";
+import { useState as useState4, useEffect as useEffect6 } from "react";
 
 // src/messages/en.json
 var en_default = {
@@ -3973,8 +4228,8 @@ var getBrowserLanguage = () => {
   return availableLanguages[language] ? language : "en";
 };
 var useMessages = (locale) => {
-  const [language, setLanguage] = useState3("en");
-  const [translations, setTranslations] = useState3(availableLanguages.en);
+  const [language, setLanguage] = useState4("en");
+  const [translations, setTranslations] = useState4(availableLanguages.en);
   useEffect6(() => {
     const lang = !!availableLanguages?.[locale] ? locale : getBrowserLanguage();
     ;
@@ -4089,7 +4344,7 @@ var Video = ({
 };
 
 // src/Event.tsx
-import { useCallback as useCallback9, useEffect as useEffect8, useState as useState4 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect8, useState as useState5 } 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";
@@ -4122,8 +4377,8 @@ var Event = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [activePlaylist, setActivePlaylist] = useState4();
-  const [activeVideoId, setActiveVideoId] = useState4();
+  const [activePlaylist, setActivePlaylist] = useState5();
+  const [activeVideoId, setActiveVideoId] = useState5();
   const videoIds = eventData?.videoIds ?? [];
   const {
     data: videosData,
@@ -4139,7 +4394,7 @@ var Event = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [loadingApisState, setLoadingApisState] = useState4(true);
+  const [loadingApisState, setLoadingApisState] = useState5(true);
   useEffect8(() => {
     if (videosData !== void 0) {
       setLoadingApisState(false);
@@ -4187,8 +4442,8 @@ var Event = ({
       }
     }
   }, [activeVideoId, videosData, events]);
-  const [error, setError] = useState4(null);
-  const [loadingPlaylist, setLoadingPlaylist] = useState4(true);
+  const [error, setError] = useState5(null);
+  const [loadingPlaylist, setLoadingPlaylist] = useState5(true);
   const videosDataError = videosData?.some((video) => !!video.error);
   useEffect8(() => {
     if (isEventLoading || videosIsLoading || loadingApisState) {
@@ -4287,7 +4542,7 @@ function PreEvent({
 }) {
   const date = new Date(event.startTime);
   const now = /* @__PURE__ */ new Date();
-  const [remainingTime, setRemainingTime] = useState4(
+  const [remainingTime, setRemainingTime] = useState5(
     date.getTime() - now.getTime()
   );
   const shouldBeStarted = remainingTime < 0;
@@ -4432,7 +4687,7 @@ var TitleAndDescription = ({
 };
 
 // src/CreativeWork.tsx
-import { useEffect as useEffect9, useState as useState5 } from "react";
+import { useEffect as useEffect9, useState as useState6 } 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";
@@ -4465,9 +4720,9 @@ var CreativeWork = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [activePlaylist, setActivePlaylist] = useState5();
-  const [activeVideoId, setActiveVideoId] = useState5();
-  const [showCountDown, setShowCountDown] = useState5(false);
+  const [activePlaylist, setActivePlaylist] = useState6();
+  const [activeVideoId, setActiveVideoId] = useState6();
+  const [showCountDown, setShowCountDown] = useState6(false);
   const videoIds = creativeWorkData?.videoIds ?? [];
   const {
     data: videosData,
@@ -4483,7 +4738,7 @@ var CreativeWork = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [loadingApisState, setLoadingApisState] = useState5(true);
+  const [loadingApisState, setLoadingApisState] = useState6(true);
   useEffect9(() => {
     if (videosData !== void 0) {
       setLoadingApisState(false);
@@ -4534,7 +4789,7 @@ var CreativeWork = ({
       }
     }
   }, [activeVideoId, videosData, events]);
-  const [error, setError] = useState5(null);
+  const [error, setError] = useState6(null);
   const videosDataError = videosData?.some((video) => !!video.error);
   useEffect9(() => {
     if (creativeWorkError || videosError || videosDataError) {
@@ -4558,7 +4813,7 @@ var CreativeWork = ({
       }
     ) }) });
   }
-  const [loadingPlaylist, setLoadingPlaylist] = useState5(true);
+  const [loadingPlaylist, setLoadingPlaylist] = useState6(true);
   useEffect9(() => {
     const creativeWorkLoadedWithNoVideos = !isCreativeWorkLoading && creativeWorkData && creativeWorkData.videoIds && creativeWorkData.videoIds.length === 0;
     const creativeWorkLoadedWithNoData = !isCreativeWorkLoading && creativeWorkData && !creativeWorkData.videoIds;
@@ -4635,7 +4890,7 @@ function PreCreativeWork({
 }) {
   const date = new Date(creativeWork.releaseTime);
   const now = /* @__PURE__ */ new Date();
-  const [remainingTime, setRemainingTime] = useState5(
+  const [remainingTime, setRemainingTime] = useState6(
     date.getTime() - now.getTime()
   );
   const shouldBeStarted = remainingTime < 0;