@mottosports/motto-video-player 1.0.1-rc.80 → 1.0.1-rc.82

package/dist/index.mjs

@@ -393,7 +393,7 @@ html[dir=rtl] .shaka-overflow-menu .shaka-overflow-button .material-svg-icon:fir
 `);
 
 // src/Player.tsx
-import { forwardRef, useEffect as useEffect4, useRef as useRef8, useImperativeHandle, useCallback as useCallback9, useState as useState3 } from "react";
+import { forwardRef, useEffect as useEffect4, useRef as useRef9, useImperativeHandle, useCallback as useCallback9, useState as useState3 } from "react";
 import shaka3 from "shaka-player/dist/shaka-player.ui";
 
 // src/hooks/useShakaPlayer.ts
@@ -449,7 +449,7 @@ var supportsWidevinePersistentLicenses = () => {
 import initShakaPlayerMux from "@mux/mux-data-shakaplayer";
 
 // package.json
-var version = "1.0.1-rc.80";
+var version = "1.0.1-rc.82";
 
 // src/utils/licenseCache.ts
 var PERSISTENT_LICENSE_PREFIX = "motto_lic_";
@@ -1569,18 +1569,44 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
 };
 
 // src/hooks/useEventHandlers.ts
-import { useCallback as useCallback6 } from "react";
-var useEventHandlers = (videoRef, handlers) => {
+import { useCallback as useCallback6, useRef as useRef5 } from "react";
+var useEventHandlers = (videoRef, playerRef, handlers) => {
+  const timeUpdateHandlerRef = useRef5(null);
   const setupEventListeners = useCallback6(() => {
     const video = videoRef.current;
     if (!video) return;
-    const { onPlay, onPause, onEnded, onLoadStart, onCanPlay } = handlers;
+    const { onPlay, onPause, onEnded, onLoadStart, onCanPlay, onTimeUpdate } = handlers;
     if (onPlay) video.addEventListener("play", onPlay);
     if (onPause) video.addEventListener("pause", onPause);
     if (onEnded) video.addEventListener("ended", onEnded);
     if (onLoadStart) video.addEventListener("loadstart", onLoadStart);
     if (onCanPlay) video.addEventListener("canplay", onCanPlay);
-  }, [videoRef, handlers]);
+    if (onTimeUpdate) {
+      const handleTimeUpdate = () => {
+        const player = playerRef.current;
+        const currentTime = video.currentTime;
+        const duration = video.duration;
+        const isLive = player && typeof player.isLive === "function" ? player.isLive() : false;
+        const timeData = {
+          currentTime,
+          duration,
+          isLive
+        };
+        if (isLive && player && typeof player.seekRange === "function") {
+          const seekRange = player.seekRange();
+          if (seekRange && seekRange.end !== void 0) {
+            timeData.liveEdge = seekRange.end;
+            timeData.timeBehindLive = seekRange.end - currentTime;
+          }
+        } else if (duration && isFinite(duration) && duration > 0) {
+          timeData.progress = currentTime / duration * 100;
+        }
+        onTimeUpdate(timeData);
+      };
+      timeUpdateHandlerRef.current = handleTimeUpdate;
+      video.addEventListener("timeupdate", handleTimeUpdate);
+    }
+  }, [videoRef, playerRef, handlers]);
   const cleanupEventListeners = useCallback6(() => {
     const video = videoRef.current;
     if (!video) return;
@@ -1590,6 +1616,10 @@ var useEventHandlers = (videoRef, handlers) => {
     if (onEnded) video.removeEventListener("ended", onEnded);
     if (onLoadStart) video.removeEventListener("loadstart", onLoadStart);
     if (onCanPlay) video.removeEventListener("canplay", onCanPlay);
+    if (timeUpdateHandlerRef.current) {
+      video.removeEventListener("timeupdate", timeUpdateHandlerRef.current);
+      timeUpdateHandlerRef.current = null;
+    }
   }, [videoRef, handlers]);
   return {
     setupEventListeners,
@@ -1601,11 +1631,11 @@ var useEventHandlers = (videoRef, handlers) => {
 import { useEffect, useState as useState2 } from "react";
 
 // src/hooks/useLiveIndicator.ts
-import { useEffect as useEffect2, useRef as useRef6 } from "react";
+import { useEffect as useEffect2, useRef as useRef7 } from "react";
 var useLiveIndicator = (containerRef, playerRef, options = {}) => {
-  const observerRef = useRef6(null);
-  const intervalRef = useRef6(null);
-  const lastStatusRef = useRef6(null);
+  const observerRef = useRef7(null);
+  const intervalRef = useRef7(null);
+  const lastStatusRef = useRef7(null);
   const {
     enabled = true,
     indicatorColor = "#ff0000",
@@ -1619,23 +1649,21 @@ var useLiveIndicator = (containerRef, playerRef, options = {}) => {
       return { isLive: false, isNearEdge: false };
     }
     try {
-      if (!player.getManifest || typeof player.getManifest !== "function") {
+      if (typeof player.isLive !== "function") {
         return { isLive: false, isNearEdge: false };
       }
-      const manifest = player.getManifest();
-      if (!manifest) {
-        return { isLive: false, isNearEdge: false };
-      }
-      const timeline = manifest.presentationTimeline;
-      if (!timeline || typeof timeline.isLive !== "function") {
-        return { isLive: false, isNearEdge: false };
-      }
-      const isLiveStream = timeline.isLive();
+      const isLiveStream = player.isLive();
       if (!isLiveStream) return { isLive: false, isNearEdge: false };
       const videoElement = player.getMediaElement?.();
       if (!videoElement) return { isLive: true, isNearEdge: false };
-      const liveEdge = timeline.getSeekRangeEnd?.() ?? timeline.getSegmentAvailabilityEnd?.();
-      if (liveEdge === void 0) return { isLive: true, isNearEdge: false };
+      if (typeof player.seekRange !== "function") {
+        return { isLive: true, isNearEdge: false };
+      }
+      const seekRange = player.seekRange();
+      if (!seekRange || seekRange.end === void 0) {
+        return { isLive: true, isNearEdge: false };
+      }
+      const liveEdge = seekRange.end;
       const currentTime = videoElement.currentTime;
       const timeBehindLive = liveEdge - currentTime;
       return {
@@ -1652,15 +1680,13 @@ var useLiveIndicator = (containerRef, playerRef, options = {}) => {
     const player = playerRef.current;
     if (!player) return;
     try {
-      const manifest = player.getManifest();
-      if (!manifest) return;
-      const timeline = manifest.presentationTimeline;
-      const liveEdge = timeline?.getSeekRangeEnd?.() ?? timeline?.getSegmentAvailabilityEnd?.();
-      if (liveEdge !== void 0) {
-        const videoElement = player.getMediaElement?.();
-        if (videoElement) {
-          videoElement.currentTime = liveEdge;
-        }
+      if (typeof player.seekRange !== "function") return;
+      const seekRange = player.seekRange();
+      if (!seekRange || seekRange.end === void 0) return;
+      const liveEdge = seekRange.end;
+      const videoElement = player.getMediaElement?.();
+      if (videoElement) {
+        videoElement.currentTime = liveEdge;
       }
     } catch (error) {
       console.error("Error seeking to live edge:", error);
@@ -1830,9 +1856,9 @@ var useKeyboardControls = (videoRef, options = {}) => {
 };
 
 // src/hooks/useAdEvents.ts
-import { useCallback as useCallback8, useRef as useRef7 } from "react";
+import { useCallback as useCallback8, useRef as useRef8 } from "react";
 var useAdEvents = (playerRef, handlers) => {
-  const listenersRef = useRef7([]);
+  const listenersRef = useRef8([]);
   const setupAdEventListeners = useCallback8(() => {
     const player = playerRef.current;
     if (!player) return;
@@ -2149,8 +2175,8 @@ var Player = forwardRef(
     auth,
     ...videoProps
   }, ref) => {
-    const videoRef = useRef8(null);
-    const containerRef = useRef8(null);
+    const videoRef = useRef9(null);
+    const containerRef = useRef9(null);
     const [isScriptsLoaded, setIsScriptsLoaded] = useState3(false);
     const [isInitialLoading, setIsInitialLoading] = useState3(true);
     const [bfResetKey, setBfResetKey] = useState3(0);
@@ -2194,12 +2220,13 @@ var Player = forwardRef(
       skipForward,
       enabled: true
     });
-    const { setupEventListeners, cleanupEventListeners } = useEventHandlers(videoRef, {
+    const { setupEventListeners, cleanupEventListeners } = useEventHandlers(videoRef, playerRef, {
       onPlay: events?.onPlay,
       onPause: events?.onPause,
       onEnded: events?.onEnded,
       onLoadStart: events?.onLoadStart,
-      onCanPlay: events?.onCanPlay
+      onCanPlay: events?.onCanPlay,
+      onTimeUpdate: events?.onTimeUpdate
     });
     const { uiRef, initializeUI, destroyUI } = useShakaUI(
       playerRef,