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

package/dist/index.d.mts

@@ -163,10 +163,6 @@ interface PlayerEvents {
      * Callback when Mux analytics updates data
      */
     onMuxDataUpdate?: (data: MuxDataUpdatePayload) => void;
-    /**
-     * Callback when live state changes
-     */
-    onLiveStateChange?: (isLive: boolean) => void;
     /**
      * Callback when live status changes (includes edge proximity)
      */
@@ -175,6 +171,40 @@ interface PlayerEvents {
         isNearEdge: boolean;
         liveEdge?: number;
     }) => void;
+    /**
+     * Callback when video time updates
+     * Provides different data for regular videos vs live streams
+     */
+    onTimeUpdate?: (timeData: TimeUpdateData) => void;
+}
+/**
+ * Time update data for both regular videos and live streams
+ */
+interface TimeUpdateData {
+    /**
+     * Current playback position in seconds
+     */
+    currentTime: number;
+    /**
+     * Total duration in seconds (Infinity for live streams)
+     */
+    duration: number;
+    /**
+     * Whether this is a live stream
+     */
+    isLive: boolean;
+    /**
+     * For live streams: the live edge position in seconds
+     */
+    liveEdge?: number;
+    /**
+     * For live streams: how far behind the live edge (in seconds)
+     */
+    timeBehindLive?: number;
+    /**
+     * For regular videos: playback progress as percentage (0-100)
+     */
+    progress?: number;
 }
 /**
  * Seekbar color configuration
@@ -666,4 +696,4 @@ 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 VideoProps, queryClient };
+export { BigPlayIcon, CreativeWork, type CreativeWorkData, type CreativeWorkProps, CreativeWorksSortDirection, Event, type EventData, type EventProps, EventsSortDirection, type IconSizes, Player, type PlayerEvents, type PlayerProps, QueryProvider, SkipBackIcon, SkipForwardIcon, type TimeUpdateData, Video, type VideoData, type VideoProps, queryClient };

package/dist/index.d.ts

@@ -163,10 +163,6 @@ interface PlayerEvents {
      * Callback when Mux analytics updates data
      */
     onMuxDataUpdate?: (data: MuxDataUpdatePayload) => void;
-    /**
-     * Callback when live state changes
-     */
-    onLiveStateChange?: (isLive: boolean) => void;
     /**
      * Callback when live status changes (includes edge proximity)
      */
@@ -175,6 +171,40 @@ interface PlayerEvents {
         isNearEdge: boolean;
         liveEdge?: number;
     }) => void;
+    /**
+     * Callback when video time updates
+     * Provides different data for regular videos vs live streams
+     */
+    onTimeUpdate?: (timeData: TimeUpdateData) => void;
+}
+/**
+ * Time update data for both regular videos and live streams
+ */
+interface TimeUpdateData {
+    /**
+     * Current playback position in seconds
+     */
+    currentTime: number;
+    /**
+     * Total duration in seconds (Infinity for live streams)
+     */
+    duration: number;
+    /**
+     * Whether this is a live stream
+     */
+    isLive: boolean;
+    /**
+     * For live streams: the live edge position in seconds
+     */
+    liveEdge?: number;
+    /**
+     * For live streams: how far behind the live edge (in seconds)
+     */
+    timeBehindLive?: number;
+    /**
+     * For regular videos: playback progress as percentage (0-100)
+     */
+    progress?: number;
 }
 /**
  * Seekbar color configuration
@@ -666,4 +696,4 @@ 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 VideoProps, queryClient };
+export { BigPlayIcon, CreativeWork, type CreativeWorkData, type CreativeWorkProps, CreativeWorksSortDirection, Event, type EventData, type EventProps, EventsSortDirection, type IconSizes, Player, type PlayerEvents, type PlayerProps, QueryProvider, SkipBackIcon, SkipForwardIcon, type TimeUpdateData, Video, type VideoData, type VideoProps, queryClient };

package/dist/index.js

@@ -490,7 +490,7 @@ var supportsWidevinePersistentLicenses = () => {
 var import_mux_data_shakaplayer = __toESM(require("@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_";
@@ -1611,17 +1611,43 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
 
 // src/hooks/useEventHandlers.ts
 var import_react7 = require("react");
-var useEventHandlers = (videoRef, handlers) => {
+var useEventHandlers = (videoRef, playerRef, handlers) => {
+  const timeUpdateHandlerRef = (0, import_react7.useRef)(null);
   const setupEventListeners = (0, import_react7.useCallback)(() => {
     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 = (0, import_react7.useCallback)(() => {
     const video = videoRef.current;
     if (!video) return;
@@ -1631,6 +1657,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,
@@ -1660,23 +1690,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 {
@@ -1693,15 +1721,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);
@@ -2235,12 +2261,13 @@ var Player = (0, import_react12.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,