@mottosports/motto-video-player 1.0.1-rc.57 → 1.0.1-rc.58

package/dist/index.js

@@ -367,6 +367,9 @@ styleInject(`/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
   .z-10 {
     z-index: 10;
   }
+  .z-20 {
+    z-index: 20;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -475,6 +478,9 @@ styleInject(`/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .bg-\\[\\#111111\\] {
+    background-color: #111111;
+  }
   .bg-\\[\\#151515\\] {
     background-color: #151515;
   }
@@ -484,6 +490,9 @@ styleInject(`/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
   .bg-red-600 {
     background-color: var(--color-red-600);
   }
+  .bg-transparent {
+    background-color: transparent;
+  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -1016,7 +1025,7 @@ styleInject(`/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
   background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z" clip-rule="evenodd" /></svg>') !important;
 }
 .motto-video-container {
-  background: black;
+  background: #111111;
 }
 .motto-video-container video {
   width: 100% !important;
@@ -1216,11 +1225,11 @@ var supportsWidevinePersistentLicenses = () => {
 var import_mux_data_shakaplayer = __toESM(require("@mux/mux-data-shakaplayer"));
 
 // package.json
-var version = "1.0.1-rc.57";
+var version = "1.0.1-rc.58";
 
 // src/utils/licenseCache.ts
 var PERSISTENT_LICENSE_PREFIX = "motto_lic_";
-var LICENSE_EXPIRY_MS = 7 * 24 * 60 * 60 * 1e3;
+var LICENSE_EXPIRY_MS = 2 * 60 * 60 * 1e3;
 var LICENSE_MAX_RETRY_ATTEMPTS = 10;
 var getAllLicenseCacheKeys = () => {
   const keys = [];
@@ -1382,6 +1391,10 @@ var useShakaPlayer = ({
   const playerRef = (0, import_react.useRef)(null);
   const [isRetrying, setIsRetrying] = (0, import_react.useState)(false);
   const videoElementRef = (0, import_react.useRef)(null);
+  const waitingForKeyTimerRef = (0, import_react.useRef)(null);
+  const waitingForKeyHandlerRef = (0, import_react.useRef)(null);
+  const playbackResumedHandlerRef = (0, import_react.useRef)(null);
+  const usingPersistentLicenseRef = (0, import_react.useRef)(false);
   const getManifestUrl = (0, import_react.useCallback)(() => {
     let manifestUrl = src.url;
     const isDRM = Boolean(src.drm);
@@ -1462,7 +1475,52 @@ var useShakaPlayer = ({
             initDataType: session.initDataType
           }));
         }
+        usingPersistentLicenseRef.current = storedSessionsMetadata.length > 0;
         player.configure({ drm: drmConfig2 });
+        const clearWaitingForKeyTimer = () => {
+          if (waitingForKeyTimerRef.current !== null) {
+            window.clearTimeout(waitingForKeyTimerRef.current);
+            waitingForKeyTimerRef.current = null;
+          }
+        };
+        const onPlaybackResumed = () => {
+          clearWaitingForKeyTimer();
+        };
+        const onWaitingForKey = () => {
+          if (!usingPersistentLicenseRef.current) return;
+          if (isRetrying) return;
+          clearWaitingForKeyTimer();
+          waitingForKeyTimerRef.current = window.setTimeout(async () => {
+            try {
+              if (isRetrying) return;
+              console.warn("Stuck waiting for decryption key; attempting license cache reset and reload...");
+              const clearedCount = clearAllPersistentLicenses();
+              if (clearedCount > 0 && playerRef.current) {
+                setIsRetrying(true);
+                await playerRef.current.load(getManifestUrl());
+                console.log("Reloaded manifest after clearing cached licenses");
+              } else {
+                console.warn("No cached licenses found to clear, skipping reload");
+              }
+            } catch (e) {
+              console.error("Failed during recovery from waitingforkey state:", e);
+              onError?.(e);
+            } finally {
+              setIsRetrying(false);
+              clearWaitingForKeyTimer();
+            }
+          }, 3e3);
+        };
+        try {
+          video.addEventListener("waitingforkey", onWaitingForKey);
+          video.addEventListener("playing", onPlaybackResumed);
+          video.addEventListener("ended", onPlaybackResumed);
+          video.addEventListener("pause", onPlaybackResumed);
+          waitingForKeyHandlerRef.current = onWaitingForKey;
+          playbackResumedHandlerRef.current = onPlaybackResumed;
+        } catch (e) {
+          console.warn("Failed to attach waitingforkey/playback listeners:", e);
+        }
         const netEngine = player.getNetworkingEngine();
         if (netEngine) {
           netEngine.registerRequestFilter((type, request) => {
@@ -1585,6 +1643,24 @@ var useShakaPlayer = ({
   const destroyPlayer = (0, import_react.useCallback)(async () => {
     if (playerRef.current) {
       try {
+        if (videoElementRef.current) {
+          try {
+            if (waitingForKeyHandlerRef.current) {
+              videoElementRef.current.removeEventListener("waitingforkey", waitingForKeyHandlerRef.current);
+            }
+            if (playbackResumedHandlerRef.current) {
+              videoElementRef.current.removeEventListener("playing", playbackResumedHandlerRef.current);
+              videoElementRef.current.removeEventListener("ended", playbackResumedHandlerRef.current);
+              videoElementRef.current.removeEventListener("pause", playbackResumedHandlerRef.current);
+            }
+          } catch (e) {
+            console.warn("Error removing media event listeners:", e);
+          }
+        }
+        if (waitingForKeyTimerRef.current !== null) {
+          window.clearTimeout(waitingForKeyTimerRef.current);
+          waitingForKeyTimerRef.current = null;
+        }
         await playerRef.current.destroy();
       } catch (error) {
         console.warn("Error destroying Shaka Player:", error);
@@ -2436,7 +2512,11 @@ var Loading = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               cy: "32",
               r: "28",
               strokeWidth: "4",
-              strokeLinecap: "round"
+              strokeLinecap: "round",
+              stroke: "currentColor",
+              fill: "none",
+              strokeDasharray: "176",
+              strokeDashoffset: "120"
             }
           )
         }
@@ -2821,6 +2901,9 @@ styleInject(`/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
   .z-10 {
     z-index: 10;
   }
+  .z-20 {
+    z-index: 20;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -2929,6 +3012,9 @@ styleInject(`/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .bg-\\[\\#111111\\] {
+    background-color: #111111;
+  }
   .bg-\\[\\#151515\\] {
     background-color: #151515;
   }
@@ -2938,6 +3024,9 @@ styleInject(`/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
   .bg-red-600 {
     background-color: var(--color-red-600);
   }
+  .bg-transparent {
+    background-color: transparent;
+  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -3470,7 +3559,7 @@ styleInject(`/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
   background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z" clip-rule="evenodd" /></svg>') !important;
 }
 .motto-video-container {
-  background: black;
+  background: #111111;
 }
 .motto-video-container video {
   width: 100% !important;
@@ -3720,6 +3809,7 @@ var Player = (0, import_react12.forwardRef)(
     const videoRef = (0, import_react12.useRef)(null);
     const containerRef = (0, import_react12.useRef)(null);
     const [isScriptsLoaded, setIsScriptsLoaded] = (0, import_react12.useState)(false);
+    const [isInitialLoading, setIsInitialLoading] = (0, import_react12.useState)(true);
     (0, import_react12.useImperativeHandle)(ref, () => videoRef.current, []);
     const { playerRef, initializePlayer, destroyPlayer, isRetrying } = useShakaPlayer({
       src,
@@ -3872,6 +3962,7 @@ var Player = (0, import_react12.forwardRef)(
       if (!video || !isScriptsLoaded) return;
       const initialize = async () => {
         try {
+          setIsInitialLoading(true);
           let system73Wrapper = null;
           if (system73Config?.apiKey && window.S73ShakaPlayerWrapper) {
             const playerConfig = { ...shakaConfig };
@@ -3906,6 +3997,27 @@ var Player = (0, import_react12.forwardRef)(
         destroyPlayer();
       };
     }, [src, isScriptsLoaded]);
+    (0, import_react12.useEffect)(() => {
+      const video = videoRef.current;
+      if (!video) return;
+      const onLoadStart = () => {
+        setIsInitialLoading(true);
+      };
+      const onCanPlay = () => {
+        setIsInitialLoading(false);
+      };
+      const onPlaying = () => {
+        setIsInitialLoading(false);
+      };
+      video.addEventListener("loadstart", onLoadStart);
+      video.addEventListener("canplay", onCanPlay);
+      video.addEventListener("playing", onPlaying);
+      return () => {
+        video.removeEventListener("loadstart", onLoadStart);
+        video.removeEventListener("canplay", onCanPlay);
+        video.removeEventListener("playing", onPlaying);
+      };
+    }, []);
     (0, import_react12.useEffect)(() => {
       const video = videoRef.current;
       if (!video) return;
@@ -3953,7 +4065,7 @@ var Player = (0, import_react12.forwardRef)(
       getMuxMonitor: () => null
     }), [getAvailableQualities, setQuality, skipBack, skipForward, updateMuxData]);
     const isResponsive = !width && !height;
-    const containerClasses = (0, import_tailwind_merge2.twMerge)(containerClassName, "motto-video-container bg-black ");
+    const containerClasses = (0, import_tailwind_merge2.twMerge)(containerClassName, "motto-video-container relative bg-[#111111] ");
     const containerStyle = isResponsive ? {
       aspectRatio: aspectRatio.toString()
     } : { width, height };
@@ -3981,6 +4093,7 @@ var Player = (0, import_react12.forwardRef)(
               ...filteredVideoProps
             }
           ),
+          isInitialLoading && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute inset-0 flex items-center justify-center z-20", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Loading, { className: "bg-transparent" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LiveBadge, { isVisible: isLiveBadgeVisible })
         ]
       }