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

package/dist/index.mjs

@@ -1173,7 +1173,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,
@@ -1702,8 +1702,9 @@ import { useEffect, useState, 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 intervalRef = useRef5(null);
-  const { enabled = true, onLiveStateChange } = options;
+  const { enabled = true, onLiveStateChange, liveThresholdSeconds = 15 } = options;
   const checkLiveStatus = () => {
     if (!playerRef.current || !enabled) {
       return;
@@ -1722,11 +1723,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);
@@ -1737,17 +1757,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]);
   useEffect(() => {
     return () => {
       if (intervalRef.current) {
@@ -1760,6 +1781,7 @@ var useLiveBadge = (playerRef, options = {}) => {
   return {
     isLive,
     isVisible,
+    isNearLiveEdge,
     hideBadge,
     showBadge,
     checkLiveStatus
@@ -1771,16 +1793,48 @@ import { useEffect as useEffect2, useState as useState2 } from "react";
 
 // src/hooks/useLiveIndicator.ts
 import { useEffect as useEffect3, useRef as useRef7 } from "react";
-var useLiveIndicator = (containerRef, options = {}) => {
+var useLiveIndicator = (containerRef, playerRef, options = {}) => {
   const observerRef = useRef7(null);
+  const intervalRef = useRef7(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;
+    }
+  };
   useEffect3(() => {
-    if (!containerRef.current || !enabled) {
+    if (!containerRef.current || !playerRef.current || !enabled) {
       return;
     }
     const addLiveIndicator = (currentTimeElement) => {
@@ -1811,7 +1865,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);
@@ -1819,6 +1873,7 @@ var useLiveIndicator = (containerRef, options = {}) => {
       });
     };
     checkForLiveContent();
+    intervalRef.current = setInterval(checkForLiveContent, 1e3);
     observerRef.current = new MutationObserver((mutations) => {
       let shouldCheck = false;
       mutations.forEach((mutation) => {
@@ -1848,15 +1903,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)) {
         }
       });
     }
@@ -3166,15 +3224,17 @@ var Player = 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;
@@ -3806,8 +3866,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
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+polyfillCryptoRandomUUID();
 var Video = ({
   videoId,
   publicKey,
@@ -3898,6 +3987,7 @@ import { useCallback as useCallback8, useEffect as useEffect8, useState as useSt
 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";
+polyfillCryptoRandomUUID();
 var Event = ({
   publicKey,
   eventId,
@@ -4224,6 +4314,7 @@ import { useEffect as useEffect9, useState as useState5 } 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";
+polyfillCryptoRandomUUID();
 var CreativeWork = ({
   publicKey,
   creativeWorkId,
@@ -4575,6 +4666,7 @@ export {
   SkipBackIcon,
   SkipForwardIcon,
   Video,
+  polyfillCryptoRandomUUID,
   queryClient
 };
 //# sourceMappingURL=index.mjs.map