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

package/dist/index.mjs

@@ -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;
@@ -3294,7 +3354,7 @@ var Player = 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;