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

package/dist/index.d.mts

@@ -26,11 +26,13 @@ interface Playready {
 }
 interface DRM {
     token?: string;
+    licenseCacheKey?: string;
     widevine?: Widevine;
     fairplay?: Fairplay;
     playready?: Playready;
 }
 interface Playlist {
+    id: string;
     url: string;
     format: string;
     dvr_settings?: DVRSettings;

package/dist/index.d.ts

@@ -26,11 +26,13 @@ interface Playready {
 }
 interface DRM {
     token?: string;
+    licenseCacheKey?: string;
     widevine?: Widevine;
     fairplay?: Fairplay;
     playready?: Playready;
 }
 interface Playlist {
+    id: string;
     url: string;
     format: string;
     dvr_settings?: DVRSettings;

package/dist/index.js

@@ -1147,7 +1147,7 @@ styleInject(`/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
 var import_react12 = require("react");
 var import_shaka_player4 = __toESM(require("shaka-player/dist/shaka-player.ui"));
 
-// src/hooks/useShakePlayer.ts
+// src/hooks/useShakaPlayer.ts
 var import_react = require("react");
 var import_shaka_player = __toESM(require("shaka-player/dist/shaka-player.ui"));
 
@@ -1171,17 +1171,186 @@ var isPlayReadySupported = () => {
   const isXbox = /Xbox/.test(userAgent);
   const isEdge = /Edg/.test(userAgent);
   const isIE = /Trident|MSIE/.test(userAgent);
-  return isXbox || isEdge || isIE;
+  const isWindows = /Windows/.test(userAgent);
+  return isXbox || (isEdge || isIE) && isWindows;
+};
+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
 var import_mux_data_shakaplayer = __toESM(require("@mux/mux-data-shakaplayer"));
 
 // package.json
-var version = "1.0.1-rc.36";
+var version = "1.0.1-rc.38";
+
+// 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,
@@ -1192,8 +1361,26 @@ var useShakePlayer = ({
   onMuxDataUpdate
 }) => {
   const playerRef = (0, import_react.useRef)(null);
-  const initializePlayer = (0, import_react.useCallback)(async (video) => {
+  const [isRetrying, setIsRetrying] = (0, import_react.useState)(false);
+  const videoElementRef = (0, import_react.useRef)(null);
+  const getManifestUrl = (0, import_react.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 = (0, import_react.useCallback)(async (video) => {
     try {
+      videoElementRef.current = video;
       import_shaka_player.default.polyfill.installAll();
       if (!import_shaka_player.default.Player.isBrowserSupported()) {
         throw new Error("Browser not supported by Shaka Player");
@@ -1204,36 +1391,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) => {
@@ -1257,6 +1463,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"}`));
       });
@@ -1288,6 +1516,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) {
@@ -1298,7 +1550,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 = (0, import_react.useCallback)(async (video) => {
+    return initializePlayerInternal(video);
+  }, [initializePlayerInternal]);
   const destroyPlayer = (0, import_react.useCallback)(async () => {
     if (playerRef.current) {
       try {
@@ -1313,7 +1568,8 @@ var useShakePlayer = ({
   return {
     playerRef,
     initializePlayer,
-    destroyPlayer
+    destroyPlayer,
+    isRetrying
   };
 };
 
@@ -3335,7 +3591,7 @@ var Player = (0, import_react12.forwardRef)(
     const containerRef = (0, import_react12.useRef)(null);
     const adContainerRef = (0, import_react12.useRef)(null);
     (0, import_react12.useImperativeHandle)(ref, () => videoRef.current, []);
-    const { playerRef, initializePlayer, destroyPlayer } = useShakePlayer({
+    const { playerRef, initializePlayer, destroyPlayer, isRetrying } = useShakaPlayer({
       src,
       shakaConfig,
       drmConfig,