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

package/dist/index.mjs

@@ -326,6 +326,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;
   }
@@ -434,6 +437,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;
   }
@@ -443,6 +449,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);
   }
@@ -975,7 +984,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;
@@ -1175,11 +1184,11 @@ var supportsWidevinePersistentLicenses = () => {
 import initShakaPlayerMux from "@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 = [];
@@ -1341,6 +1350,10 @@ var useShakaPlayer = ({
   const playerRef = useRef(null);
   const [isRetrying, setIsRetrying] = useState(false);
   const videoElementRef = useRef(null);
+  const waitingForKeyTimerRef = useRef(null);
+  const waitingForKeyHandlerRef = useRef(null);
+  const playbackResumedHandlerRef = useRef(null);
+  const usingPersistentLicenseRef = useRef(false);
   const getManifestUrl = useCallback(() => {
     let manifestUrl = src.url;
     const isDRM = Boolean(src.drm);
@@ -1421,7 +1434,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) => {
@@ -1544,6 +1602,24 @@ var useShakaPlayer = ({
   const destroyPlayer = 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);
@@ -2395,7 +2471,11 @@ var Loading = ({ className }) => /* @__PURE__ */ jsxs3(
               cy: "32",
               r: "28",
               strokeWidth: "4",
-              strokeLinecap: "round"
+              strokeLinecap: "round",
+              stroke: "currentColor",
+              fill: "none",
+              strokeDasharray: "176",
+              strokeDashoffset: "120"
             }
           )
         }
@@ -2780,6 +2860,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;
   }
@@ -2888,6 +2971,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;
   }
@@ -2897,6 +2983,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);
   }
@@ -3429,7 +3518,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;
@@ -3679,6 +3768,7 @@ var Player = forwardRef(
     const videoRef = useRef8(null);
     const containerRef = useRef8(null);
     const [isScriptsLoaded, setIsScriptsLoaded] = useState4(false);
+    const [isInitialLoading, setIsInitialLoading] = useState4(true);
     useImperativeHandle(ref, () => videoRef.current, []);
     const { playerRef, initializePlayer, destroyPlayer, isRetrying } = useShakaPlayer({
       src,
@@ -3831,6 +3921,7 @@ var Player = forwardRef(
       if (!video || !isScriptsLoaded) return;
       const initialize = async () => {
         try {
+          setIsInitialLoading(true);
           let system73Wrapper = null;
           if (system73Config?.apiKey && window.S73ShakaPlayerWrapper) {
             const playerConfig = { ...shakaConfig };
@@ -3865,6 +3956,27 @@ var Player = forwardRef(
         destroyPlayer();
       };
     }, [src, isScriptsLoaded]);
+    useEffect5(() => {
+      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);
+      };
+    }, []);
     useEffect5(() => {
       const video = videoRef.current;
       if (!video) return;
@@ -3912,7 +4024,7 @@ var Player = forwardRef(
       getMuxMonitor: () => null
     }), [getAvailableQualities, setQuality, skipBack, skipForward, updateMuxData]);
     const isResponsive = !width && !height;
-    const containerClasses = twMerge2(containerClassName, "motto-video-container bg-black ");
+    const containerClasses = twMerge2(containerClassName, "motto-video-container relative bg-[#111111] ");
     const containerStyle = isResponsive ? {
       aspectRatio: aspectRatio.toString()
     } : { width, height };
@@ -3940,6 +4052,7 @@ var Player = forwardRef(
               ...filteredVideoProps
             }
           ),
+          isInitialLoading && /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 flex items-center justify-center z-20", children: /* @__PURE__ */ jsx8(Loading, { className: "bg-transparent" }) }),
           /* @__PURE__ */ jsx8(LiveBadge, { isVisible: isLiveBadgeVisible })
         ]
       }