@mottosports/motto-video-player 1.0.1-rc.17 → 1.0.1-rc.18

package/dist/index.d.mts

@@ -521,4 +521,6 @@ interface BigPlayIconProps {
 }
 declare const BigPlayIcon: React.FC<BigPlayIconProps>;
 
-export { BigPlayIcon, CreativeWork, type CreativeWorkData, type CreativeWorkProps, CreativeWorksSortDirection, Event, type EventData, type EventProps, EventsSortDirection, type IconSizes, Player, type PlayerEvents, type PlayerProps, QueryProvider, SkipBackIcon, SkipForwardIcon, Video, type VideoData, type VideoListItem, type VideoProps, queryClient };
+declare function polyfillCryptoRandomUUID(): void;
+
+export { BigPlayIcon, CreativeWork, type CreativeWorkData, type CreativeWorkProps, CreativeWorksSortDirection, Event, type EventData, type EventProps, EventsSortDirection, type IconSizes, Player, type PlayerEvents, type PlayerProps, QueryProvider, SkipBackIcon, SkipForwardIcon, Video, type VideoData, type VideoListItem, type VideoProps, polyfillCryptoRandomUUID, queryClient };

package/dist/index.d.ts

@@ -521,4 +521,6 @@ interface BigPlayIconProps {
 }
 declare const BigPlayIcon: React.FC<BigPlayIconProps>;
 
-export { BigPlayIcon, CreativeWork, type CreativeWorkData, type CreativeWorkProps, CreativeWorksSortDirection, Event, type EventData, type EventProps, EventsSortDirection, type IconSizes, Player, type PlayerEvents, type PlayerProps, QueryProvider, SkipBackIcon, SkipForwardIcon, Video, type VideoData, type VideoListItem, type VideoProps, queryClient };
+declare function polyfillCryptoRandomUUID(): void;
+
+export { BigPlayIcon, CreativeWork, type CreativeWorkData, type CreativeWorkProps, CreativeWorksSortDirection, Event, type EventData, type EventProps, EventsSortDirection, type IconSizes, Player, type PlayerEvents, type PlayerProps, QueryProvider, SkipBackIcon, SkipForwardIcon, Video, type VideoData, type VideoListItem, type VideoProps, polyfillCryptoRandomUUID, queryClient };

package/dist/index.js

@@ -39,6 +39,7 @@ __export(index_exports, {
   SkipBackIcon: () => SkipBackIcon,
   SkipForwardIcon: () => SkipForwardIcon,
   Video: () => Video,
+  polyfillCryptoRandomUUID: () => polyfillCryptoRandomUUID,
   queryClient: () => queryClient
 });
 module.exports = __toCommonJS(index_exports);
@@ -1214,7 +1215,7 @@ var useQualityControl = (playerRef, qualityConfig, onQualityChange) => {
     if (!playerRef.current) return [];
     const tracks = playerRef.current.getVariantTracks();
     const qualities = tracks.filter(
-      (track, index, self) => index === self.findIndex((t) => t.height === track.height)
+      (track, index, self2) => index === self2.findIndex((t) => t.height === track.height)
     ).map((track) => ({
       height: track.height || 0,
       bandwidth: track.bandwidth || 0,
@@ -1743,8 +1744,9 @@ var import_react8 = require("react");
 var useLiveBadge = (playerRef, options = {}) => {
   const [isLive, setIsLive] = (0, import_react8.useState)(false);
   const [isVisible, setIsVisible] = (0, import_react8.useState)(false);
+  const [isNearLiveEdge, setIsNearLiveEdge] = (0, import_react8.useState)(false);
   const intervalRef = (0, import_react8.useRef)(null);
-  const { enabled = true, onLiveStateChange } = options;
+  const { enabled = true, onLiveStateChange, liveThresholdSeconds = 15 } = options;
   const checkLiveStatus = () => {
     if (!playerRef.current || !enabled) {
       return;
@@ -1763,11 +1765,30 @@ var useLiveBadge = (playerRef, options = {}) => {
         return;
       }
       const liveStatus = timeline.isLive();
+      let nearLiveEdge = false;
+      if (liveStatus) {
+        try {
+          const seekRange = player.getSeekRange();
+          const videoElement = player.getMediaElement();
+          if (seekRange && videoElement) {
+            const liveEdge = seekRange.end;
+            const currentTime = videoElement.currentTime;
+            const timeBehindLive = liveEdge - currentTime;
+            nearLiveEdge = timeBehindLive <= liveThresholdSeconds;
+          }
+        } catch (error) {
+          console.error("Error checking live edge position:", error);
+          nearLiveEdge = liveStatus;
+        }
+      }
       if (liveStatus !== isLive) {
         setIsLive(liveStatus);
-        setIsVisible(liveStatus);
         onLiveStateChange?.(liveStatus);
       }
+      if (nearLiveEdge !== isNearLiveEdge) {
+        setIsNearLiveEdge(nearLiveEdge);
+        setIsVisible(nearLiveEdge);
+      }
     } catch (error) {
       if (error instanceof Error && !error.message.includes("not a function")) {
         console.error("Error checking live status:", error);
@@ -1778,17 +1799,18 @@ var useLiveBadge = (playerRef, options = {}) => {
     if (!enabled) {
       setIsLive(false);
       setIsVisible(false);
+      setIsNearLiveEdge(false);
       return;
     }
     checkLiveStatus();
-    intervalRef.current = setInterval(checkLiveStatus, 2e3);
+    intervalRef.current = setInterval(checkLiveStatus, 1e3);
     return () => {
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
         intervalRef.current = null;
       }
     };
-  }, [enabled, playerRef.current]);
+  }, [enabled, playerRef.current, liveThresholdSeconds]);
   (0, import_react8.useEffect)(() => {
     return () => {
       if (intervalRef.current) {
@@ -1801,6 +1823,7 @@ var useLiveBadge = (playerRef, options = {}) => {
   return {
     isLive,
     isVisible,
+    isNearLiveEdge,
     hideBadge,
     showBadge,
     checkLiveStatus
@@ -1812,16 +1835,48 @@ var import_react9 = require("react");
 
 // src/hooks/useLiveIndicator.ts
 var import_react10 = require("react");
-var useLiveIndicator = (containerRef, options = {}) => {
+var useLiveIndicator = (containerRef, playerRef, options = {}) => {
   const observerRef = (0, import_react10.useRef)(null);
+  const intervalRef = (0, import_react10.useRef)(null);
   const {
     enabled = true,
     indicatorColor = "#ff0000",
     indicatorSize = 8,
-    showPulseAnimation = true
+    showPulseAnimation = true,
+    liveThresholdSeconds = 15
   } = options;
+  const isNearLiveEdge = (player) => {
+    if (!player) return false;
+    try {
+      if (!player.getManifest || !player.getPresentationTimeline || typeof player.getPresentationTimeline !== "function") {
+        return false;
+      }
+      const manifest = player.getManifest();
+      if (!manifest) {
+        return false;
+      }
+      const timeline = player.getPresentationTimeline();
+      if (!timeline || typeof timeline.isLive !== "function") {
+        return false;
+      }
+      const liveStatus = timeline.isLive();
+      if (!liveStatus) return false;
+      const seekRange = player.getSeekRange();
+      const videoElement = player.getMediaElement();
+      if (seekRange && videoElement) {
+        const liveEdge = seekRange.end;
+        const currentTime = videoElement.currentTime;
+        const timeBehindLive = liveEdge - currentTime;
+        return timeBehindLive <= liveThresholdSeconds;
+      }
+      return false;
+    } catch (error) {
+      console.error("Error checking live edge position in indicator:", error);
+      return false;
+    }
+  };
   (0, import_react10.useEffect)(() => {
-    if (!containerRef.current || !enabled) {
+    if (!containerRef.current || !playerRef.current || !enabled) {
       return;
     }
     const addLiveIndicator = (currentTimeElement) => {
@@ -1852,7 +1907,7 @@ var useLiveIndicator = (containerRef, options = {}) => {
       const currentTimeElements = containerRef.current?.querySelectorAll(".shaka-current-time");
       currentTimeElements?.forEach((element) => {
         const textContent = element.textContent?.trim() || "";
-        if (textContent.toLowerCase().includes("live")) {
+        if (textContent.toLowerCase().includes("live") && isNearLiveEdge(playerRef.current)) {
           addLiveIndicator(element);
         } else {
           removeLiveIndicator(element);
@@ -1860,6 +1915,7 @@ var useLiveIndicator = (containerRef, options = {}) => {
       });
     };
     checkForLiveContent();
+    intervalRef.current = setInterval(checkForLiveContent, 1e3);
     observerRef.current = new MutationObserver((mutations) => {
       let shouldCheck = false;
       mutations.forEach((mutation) => {
@@ -1889,15 +1945,18 @@ var useLiveIndicator = (containerRef, options = {}) => {
       if (observerRef.current) {
         observerRef.current.disconnect();
       }
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
     };
-  }, [containerRef, enabled, indicatorColor, indicatorSize, showPulseAnimation]);
+  }, [containerRef, playerRef, enabled, indicatorColor, indicatorSize, showPulseAnimation, liveThresholdSeconds]);
   return {
     // Expose method to manually trigger check if needed
     checkForLiveContent: () => {
       const currentTimeElements = containerRef.current?.querySelectorAll(".shaka-current-time");
       currentTimeElements?.forEach((element) => {
         const textContent = element.textContent?.trim() || "";
-        if (textContent.toLowerCase().includes("live")) {
+        if (textContent.toLowerCase().includes("live") && isNearLiveEdge(playerRef.current)) {
         }
       });
     }
@@ -3207,15 +3266,17 @@ var Player = (0, import_react12.forwardRef)(
     );
     const { isLive, isVisible: isLiveBadgeVisible } = useLiveBadge(playerRef, {
       enabled: true,
+      liveThresholdSeconds: 15,
       onLiveStateChange: (isLive2) => {
         events?.onLiveStateChange?.(isLive2);
       }
     });
-    useLiveIndicator(containerRef, {
+    useLiveIndicator(containerRef, playerRef, {
       enabled: true,
       indicatorColor: "#ff0000",
       indicatorSize: 8,
-      showPulseAnimation: true
+      showPulseAnimation: true,
+      liveThresholdSeconds: 15
     });
     const initializeAds = () => {
       if (!imaConfig || !playerRef.current || !videoRef.current) return;
@@ -3847,8 +3908,37 @@ var useMessages = (locale) => {
 };
 var useMessages_default = useMessages;
 
+// src/utils/crypto-polyfill.ts
+function polyfillCryptoRandomUUID() {
+  if (typeof globalThis !== "undefined" && globalThis.crypto && !globalThis.crypto.randomUUID) {
+    globalThis.crypto.randomUUID = generateRandomUUID;
+  }
+  if (typeof window !== "undefined" && window.crypto && !window.crypto.randomUUID) {
+    window.crypto.randomUUID = generateRandomUUID;
+  }
+  if (typeof self !== "undefined" && self.crypto && !self.crypto.randomUUID) {
+    self.crypto.randomUUID = generateRandomUUID;
+  }
+}
+function generateRandomUUID() {
+  if (typeof crypto !== "undefined" && crypto.getRandomValues) {
+    const array = new Uint8Array(16);
+    crypto.getRandomValues(array);
+    array[6] = array[6] & 15 | 64;
+    array[8] = array[8] & 63 | 128;
+    const hex = Array.from(array).map((b) => b.toString(16).padStart(2, "0")).join("");
+    return `${hex.substring(0, 8)}-${hex.substring(8, 12)}-${hex.substring(12, 16)}-${hex.substring(16, 20)}-${hex.substring(20, 32)}`;
+  }
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+
 // src/Video.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
+polyfillCryptoRandomUUID();
 var Video = ({
   videoId,
   publicKey,
@@ -3939,6 +4029,7 @@ var import_react15 = require("react");
 var import_tailwind_merge4 = require("tailwind-merge");
 var import_react_query2 = require("@tanstack/react-query");
 var import_jsx_runtime10 = require("react/jsx-runtime");
+polyfillCryptoRandomUUID();
 var Event = ({
   publicKey,
   eventId,
@@ -4265,6 +4356,7 @@ var import_react16 = require("react");
 var import_tailwind_merge5 = require("tailwind-merge");
 var import_react_query3 = require("@tanstack/react-query");
 var import_jsx_runtime11 = require("react/jsx-runtime");
+polyfillCryptoRandomUUID();
 var CreativeWork = ({
   publicKey,
   creativeWorkId,
@@ -4617,6 +4709,7 @@ var QueryProvider = ({ children }) => {
   SkipBackIcon,
   SkipForwardIcon,
   Video,
+  polyfillCryptoRandomUUID,
   queryClient
 });
 //# sourceMappingURL=index.js.map