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

package/dist/index.js

@@ -1743,8 +1743,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 +1764,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 +1798,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 +1822,7 @@ var useLiveBadge = (playerRef, options = {}) => {
   return {
     isLive,
     isVisible,
+    isNearLiveEdge,
     hideBadge,
     showBadge,
     checkLiveStatus
@@ -1812,16 +1834,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 +1906,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 +1914,7 @@ var useLiveIndicator = (containerRef, options = {}) => {
       });
     };
     checkForLiveContent();
+    intervalRef.current = setInterval(checkForLiveContent, 1e3);
     observerRef.current = new MutationObserver((mutations) => {
       let shouldCheck = false;
       mutations.forEach((mutation) => {
@@ -1889,15 +1944,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 +3265,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;
@@ -3335,7 +3395,7 @@ var Player = (0, import_react12.forwardRef)(
     const containerStyle = isResponsive ? {
       aspectRatio: aspectRatio.toString()
     } : { width, height };
-    const videoClasses = isResponsive ? "motto-video-responsive" : "w-full h-full ";
+    const videoClasses = isResponsive ? "motto-video-responsive w-full" : "w-full h-full ";
     const videoStyle = isResponsive ? {} : { width, height };
     const filteredVideoProps = { ...videoProps };
     delete filteredVideoProps.controls;