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

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 useEffect5, useRef as useRef9, useImperativeHandle, useCallback as useCallback9, useState as useState4 } from "react";
+import { forwardRef, useEffect as useEffect4, useRef as useRef8, 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.79";
+var version = "1.0.1-rc.80";
 
 // src/utils/licenseCache.ts
 var PERSISTENT_LICENSE_PREFIX = "motto_lic_";
@@ -1597,176 +1597,146 @@ var useEventHandlers = (videoRef, handlers) => {
   };
 };
 
-// src/hooks/useLiveBadge.ts
-import { useEffect, useState as useState2, useRef as useRef5 } from "react";
-var useLiveBadge = (playerRef, options = {}) => {
-  const [isLive, setIsLive] = useState2(false);
-  const [isVisible, setIsVisible] = useState2(false);
-  const [isNearLiveEdge, setIsNearLiveEdge] = useState2(false);
-  const intervalRef = useRef5(null);
-  const { enabled = true, onLiveStateChange, liveThresholdSeconds = 15 } = options;
-  const checkLiveStatus = () => {
-    if (!playerRef.current || !enabled) {
-      return;
-    }
-    try {
-      const player = playerRef.current;
-      if (!player.getManifest || !player.getPresentationTimeline || typeof player.getPresentationTimeline !== "function") {
-        return;
-      }
-      const manifest = player.getManifest();
-      if (!manifest) {
-        return;
-      }
-      const timeline = player.getPresentationTimeline();
-      if (!timeline || typeof timeline.isLive !== "function") {
-        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);
-        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);
-      }
-    }
-  };
-  useEffect(() => {
-    if (!enabled) {
-      setIsLive(false);
-      setIsVisible(false);
-      setIsNearLiveEdge(false);
-      return;
-    }
-    checkLiveStatus();
-    intervalRef.current = setInterval(checkLiveStatus, 1e3);
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
-    };
-  }, [enabled, playerRef.current, liveThresholdSeconds]);
-  useEffect(() => {
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
-    };
-  }, []);
-  const hideBadge = () => setIsVisible(false);
-  const showBadge = () => setIsVisible(true);
-  return {
-    isLive,
-    isVisible,
-    isNearLiveEdge,
-    hideBadge,
-    showBadge,
-    checkLiveStatus
-  };
-};
-
 // src/hooks/usePosterFallback.ts
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect, useState as useState2 } from "react";
 
 // src/hooks/useLiveIndicator.ts
-import { useEffect as useEffect3, useRef as useRef7 } from "react";
+import { useEffect as useEffect2, useRef as useRef6 } from "react";
 var useLiveIndicator = (containerRef, playerRef, options = {}) => {
-  const observerRef = useRef7(null);
-  const intervalRef = useRef7(null);
+  const observerRef = useRef6(null);
+  const intervalRef = useRef6(null);
+  const lastStatusRef = useRef6(null);
   const {
     enabled = true,
     indicatorColor = "#ff0000",
     indicatorSize = 8,
     showPulseAnimation = true,
-    liveThresholdSeconds = 15
+    liveThresholdSeconds = 15,
+    onLiveStatusChange
   } = options;
-  const isNearLiveEdge = (player) => {
-    if (!player) return false;
+  const getLiveStatus = (player) => {
+    if (!player) {
+      return { isLive: false, isNearEdge: false };
+    }
     try {
-      if (!player.getManifest || !player.getPresentationTimeline || typeof player.getPresentationTimeline !== "function") {
-        return false;
+      if (!player.getManifest || typeof player.getManifest !== "function") {
+        return { isLive: false, isNearEdge: false };
       }
       const manifest = player.getManifest();
       if (!manifest) {
-        return false;
+        return { isLive: false, isNearEdge: false };
       }
-      const timeline = player.getPresentationTimeline();
+      const timeline = manifest.presentationTimeline;
       if (!timeline || typeof timeline.isLive !== "function") {
-        return false;
+        return { isLive: false, isNearEdge: false };
+      }
+      const isLiveStream = timeline.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 };
+      const currentTime = videoElement.currentTime;
+      const timeBehindLive = liveEdge - currentTime;
+      return {
+        isLive: true,
+        isNearEdge: timeBehindLive <= liveThresholdSeconds,
+        liveEdge
+      };
+    } catch (error) {
+      console.error("Error checking live status:", error);
+      return { isLive: false, isNearEdge: false };
+    }
+  };
+  const seekToLiveEdge = () => {
+    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;
+        }
       }
-      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;
+      console.error("Error seeking to live edge:", error);
     }
   };
-  useEffect3(() => {
-    if (!containerRef.current || !playerRef.current || !enabled) {
+  useEffect2(() => {
+    if (!containerRef.current || !enabled) {
       return;
     }
-    const addLiveIndicator = (currentTimeElement) => {
-      if (currentTimeElement.querySelector(".live-indicator-dot")) {
+    const updateLiveIndicator = (currentTimeElement, status) => {
+      const parent = currentTimeElement.parentElement;
+      if (!parent) return;
+      const existingContainer = parent.querySelector(".live-indicator-container");
+      const isCurrentlyNearEdge = existingContainer?.getAttribute("data-near-edge") === "true";
+      if (existingContainer && status.isNearEdge === isCurrentlyNearEdge) {
         return;
       }
+      if (existingContainer) {
+        existingContainer.remove();
+      }
+      const container = document.createElement("span");
+      container.className = "live-indicator-container";
+      container.setAttribute("data-near-edge", status.isNearEdge.toString());
+      container.style.cssText = `
+        display: inline-flex;
+        align-items: center;
+        width: 80px;
+        ${!status.isNearEdge ? "cursor: pointer;" : ""}
+      `;
       const indicator = document.createElement("span");
       indicator.className = "live-indicator-dot";
       indicator.style.cssText = `
         display: inline-block;
         width: ${indicatorSize}px;
         height: ${indicatorSize}px;
-        background-color: ${indicatorColor};
+        background-color: ${status.isNearEdge ? indicatorColor : "#888888"};
         border-radius: 50%;
         margin-right: 6px;
-        vertical-align: middle;
-        ${showPulseAnimation ? "animation: pulse-live 2s infinite;" : ""}
+        ${status.isNearEdge && showPulseAnimation ? "animation: pulse-live 2s infinite;" : ""}
       `;
-      currentTimeElement.insertBefore(indicator, currentTimeElement.firstChild);
+      const liveText = document.createElement("span");
+      liveText.className = "live-indicator-text";
+      liveText.textContent = status.isNearEdge ? "LIVE" : "GO TO LIVE";
+      container.appendChild(indicator);
+      container.appendChild(liveText);
+      if (!status.isNearEdge) {
+        container.addEventListener("click", seekToLiveEdge);
+      }
+      if (status.isNearEdge) {
+        parent.insertBefore(container, currentTimeElement);
+        currentTimeElement.style.display = "none";
+      } else {
+        currentTimeElement.insertAdjacentElement("afterend", container);
+        currentTimeElement.style.display = "";
+      }
     };
     const removeLiveIndicator = (currentTimeElement) => {
-      const indicator = currentTimeElement.querySelector(".live-indicator-dot");
-      if (indicator) {
-        indicator.remove();
+      const parent = currentTimeElement.parentElement;
+      if (!parent) return;
+      const container = parent.querySelector(".live-indicator-container");
+      if (container) {
+        container.remove();
+        currentTimeElement.style.display = "";
       }
     };
     const checkForLiveContent = () => {
       const currentTimeElements = containerRef.current?.querySelectorAll(".shaka-current-time");
+      const status = getLiveStatus(playerRef.current);
+      const lastStatus = lastStatusRef.current;
+      if (onLiveStatusChange && (!lastStatus || lastStatus.isLive !== status.isLive || lastStatus.isNearEdge !== status.isNearEdge)) {
+        onLiveStatusChange(status);
+        lastStatusRef.current = { isLive: status.isLive, isNearEdge: status.isNearEdge };
+      }
       currentTimeElements?.forEach((element) => {
-        const textContent = element.textContent?.trim() || "";
-        if (textContent.toLowerCase().includes("live") && isNearLiveEdge(playerRef.current)) {
-          addLiveIndicator(element);
+        if (status.isLive) {
+          updateLiveIndicator(element, status);
         } else {
           removeLiveIndicator(element);
         }
@@ -1807,22 +1777,15 @@ var useLiveIndicator = (containerRef, playerRef, options = {}) => {
         clearInterval(intervalRef.current);
       }
     };
-  }, [containerRef, playerRef, enabled, indicatorColor, indicatorSize, showPulseAnimation, liveThresholdSeconds]);
+  }, [containerRef, 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") && isNearLiveEdge(playerRef.current)) {
-        }
-      });
-    }
+    seekToLiveEdge,
+    getLiveStatus: () => getLiveStatus(playerRef.current)
   };
 };
 
 // src/hooks/useKeyboardControls.ts
-import { useCallback as useCallback7, useEffect as useEffect4 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect3 } from "react";
 var useKeyboardControls = (videoRef, options = {}) => {
   const { skipBack, skipForward, enabled = true } = options;
   const isDesktop = useCallback7(() => {
@@ -1854,7 +1817,7 @@ var useKeyboardControls = (videoRef, options = {}) => {
         break;
     }
   }, [enabled, videoRef, skipBack, skipForward, isDesktop]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!enabled || !isDesktop()) return;
     document.addEventListener("keydown", handleKeydown);
     return () => {
@@ -1867,9 +1830,9 @@ var useKeyboardControls = (videoRef, options = {}) => {
 };
 
 // src/hooks/useAdEvents.ts
-import { useCallback as useCallback8, useRef as useRef8 } from "react";
+import { useCallback as useCallback8, useRef as useRef7 } from "react";
 var useAdEvents = (playerRef, handlers) => {
-  const listenersRef = useRef8([]);
+  const listenersRef = useRef7([]);
   const setupAdEventListeners = useCallback8(() => {
     const player = playerRef.current;
     if (!player) return;
@@ -2009,117 +1972,6 @@ var useAdEvents = (playerRef, handlers) => {
   };
 };
 
-// src/components/Loading.tsx
-import { twMerge } from "tailwind-merge";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Loading = ({ className }) => /* @__PURE__ */ jsx4(
-  "div",
-  {
-    className: twMerge(
-      "relative bg-[#151515] md:rounded-2xl! overflow-hidden aspect-video text-white w-full h-full flex justify-center items-center text-[10px]",
-      className
-    ),
-    role: "status",
-    children: /* @__PURE__ */ jsx4("div", { className: " flex justify-center items-center", children: /* @__PURE__ */ jsx4(
-      "svg",
-      {
-        className: "shaka-spinner-svg animate-spin h-12 w-12",
-        viewBox: "0 0 64 64",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ jsx4(
-          "circle",
-          {
-            className: "shaka-spinner-path",
-            cx: "32",
-            cy: "32",
-            r: "28",
-            strokeWidth: "4",
-            strokeLinecap: "round",
-            stroke: "currentColor",
-            fill: "none",
-            strokeDasharray: "176",
-            strokeDashoffset: "120"
-          }
-        )
-      }
-    ) })
-  }
-);
-
-// src/components/ErrorScreen.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var ErrorScreen = ({ title, description }) => /* @__PURE__ */ jsx5("div", { className: "w-full h-full md:rounded-2xl! aspect-video bg-black flex", children: /* @__PURE__ */ jsxs3("div", { className: "bg-[#151515] text-white w-full h-full flex justify-center items-center", children: [
-  /* @__PURE__ */ jsx5(
-    "svg",
-    {
-      className: "w-24 h-24 m-6",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      style: { width: 96 },
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx5(
-        "path",
-        {
-          d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    }
-  ),
-  /* @__PURE__ */ jsxs3("div", { children: [
-    /* @__PURE__ */ jsx5("h3", { className: "text-2xl mb-2", children: title || "Playback Error" }),
-    /* @__PURE__ */ jsx5("div", { className: "text-lg", children: description || "Unable to play the video. Please try again later." })
-  ] })
-] }) });
-
-// src/components/Title.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var Title = ({ title }) => /* @__PURE__ */ jsx6("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4", children: /* @__PURE__ */ jsx6("h2", { className: "text-white text-xl font-semibold", children: title }) });
-
-// src/components/LiveBadge.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var LiveBadge = ({
-  isVisible,
-  position = "top-right",
-  className = "",
-  style = {},
-  text = "LIVE"
-}) => {
-  if (!isVisible) return null;
-  const positionClasses = {
-    "top-left": "top-4 left-4",
-    "top-right": "top-4 right-4",
-    "bottom-left": "bottom-4 left-4",
-    "bottom-right": "bottom-4 right-4"
-  };
-  return /* @__PURE__ */ jsx7(
-    "div",
-    {
-      className: `
-        absolute z-50 
-        ${positionClasses[position]}
-        bg-red-600 text-white 
-        px-2 py-1 
-        rounded-md 
-        text-xs font-bold 
-        uppercase tracking-wide
-        shadow-lg
-        animate-pulse
-        pointer-events-none
-        ${className}
-      `,
-      style,
-      children: /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx7("span", { className: "w-2 h-2 bg-white rounded-full animate-pulse" }),
-        text
-      ] })
-    }
-  );
-};
-
 // src/Player.tsx
 import { twMerge as twMerge2 } from "tailwind-merge";
 
@@ -2196,8 +2048,78 @@ async function waitForGlobals(globalNames, timeout = 5e3) {
   await Promise.all(promises);
 }
 
+// src/components/Loading.tsx
+import { twMerge } from "tailwind-merge";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Loading = ({ className }) => /* @__PURE__ */ jsx4(
+  "div",
+  {
+    className: twMerge(
+      "relative bg-[#151515] md:rounded-2xl! overflow-hidden aspect-video text-white w-full h-full flex justify-center items-center text-[10px]",
+      className
+    ),
+    role: "status",
+    children: /* @__PURE__ */ jsx4("div", { className: " flex justify-center items-center", children: /* @__PURE__ */ jsx4(
+      "svg",
+      {
+        className: "shaka-spinner-svg animate-spin h-12 w-12",
+        viewBox: "0 0 64 64",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ jsx4(
+          "circle",
+          {
+            className: "shaka-spinner-path",
+            cx: "32",
+            cy: "32",
+            r: "28",
+            strokeWidth: "4",
+            strokeLinecap: "round",
+            stroke: "currentColor",
+            fill: "none",
+            strokeDasharray: "176",
+            strokeDashoffset: "120"
+          }
+        )
+      }
+    ) })
+  }
+);
+
+// src/components/ErrorScreen.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var ErrorScreen = ({ title, description }) => /* @__PURE__ */ jsx5("div", { className: "w-full h-full md:rounded-2xl! aspect-video bg-black flex", children: /* @__PURE__ */ jsxs3("div", { className: "bg-[#151515] text-white w-full h-full flex justify-center items-center", children: [
+  /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      className: "w-24 h-24 m-6",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      style: { width: 96 },
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx5(
+        "path",
+        {
+          d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  ),
+  /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsx5("h3", { className: "text-2xl mb-2", children: title || "Playback Error" }),
+    /* @__PURE__ */ jsx5("div", { className: "text-lg", children: description || "Unable to play the video. Please try again later." })
+  ] })
+] }) });
+
+// src/components/Title.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Title = ({ title }) => /* @__PURE__ */ jsx6("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4", children: /* @__PURE__ */ jsx6("h2", { className: "text-white text-xl font-semibold", children: title }) });
+
 // src/Player.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var Player = forwardRef(
   ({
     src,
@@ -2222,15 +2144,16 @@ var Player = forwardRef(
     events,
     locale = "en",
     containerClassName,
+    liveThresholdSeconds = 15,
     publicKey,
     auth,
     ...videoProps
   }, ref) => {
-    const videoRef = useRef9(null);
-    const containerRef = useRef9(null);
-    const [isScriptsLoaded, setIsScriptsLoaded] = useState4(false);
-    const [isInitialLoading, setIsInitialLoading] = useState4(true);
-    const [bfResetKey, setBfResetKey] = useState4(0);
+    const videoRef = useRef8(null);
+    const containerRef = useRef8(null);
+    const [isScriptsLoaded, setIsScriptsLoaded] = useState3(false);
+    const [isInitialLoading, setIsInitialLoading] = useState3(true);
+    const [bfResetKey, setBfResetKey] = useState3(0);
     const hasPlaylist = !!src && (typeof src === "string" || !!(src.url || src.drm?.widevine?.playlistUrl || src.drm?.playready?.playlistUrl || src.drm?.fairplay?.playlistUrl));
     useImperativeHandle(ref, () => videoRef.current, []);
     const { playerRef, initializePlayer, loadManifest, destroyPlayer, isRetrying } = useShakaPlayer({
@@ -2290,19 +2213,13 @@ var Player = forwardRef(
       iconSizes,
       locale
     );
-    const { isLive, isVisible: isLiveBadgeVisible } = useLiveBadge(playerRef, {
-      enabled: true,
-      liveThresholdSeconds: 15,
-      onLiveStateChange: (isLive2) => {
-        events?.onLiveStateChange?.(isLive2);
-      }
-    });
-    useLiveIndicator(containerRef, playerRef, {
+    const { getLiveStatus, seekToLiveEdge } = useLiveIndicator(containerRef, playerRef, {
       enabled: true,
       indicatorColor: "#ff0000",
       indicatorSize: 8,
       showPulseAnimation: true,
-      liveThresholdSeconds: 15
+      liveThresholdSeconds,
+      onLiveStatusChange: events?.onLiveStatusChange
     });
     const { setupAdEventListeners, cleanupAdEventListeners } = useAdEvents(playerRef, {
       onAdStart: events?.onAdStart,
@@ -2372,7 +2289,7 @@ var Player = forwardRef(
         console.error("Error initializing ads:", error);
       }
     }, [imaConfig, autoPlay, setupAdEventListeners, loadManifest]);
-    useEffect5(() => {
+    useEffect4(() => {
       const loadRequiredScripts = async () => {
         try {
           const scriptLoaders = getRequiredScriptLoaders(!!imaConfig?.adTagUrl, !!system73Config?.apiKey);
@@ -2395,7 +2312,7 @@ var Player = forwardRef(
       };
       loadRequiredScripts();
     }, [imaConfig?.adTagUrl, system73Config?.apiKey]);
-    useEffect5(() => {
+    useEffect4(() => {
       const onPageShow = (e) => {
         if (e && e.persisted) {
           setBfResetKey((k) => k + 1);
@@ -2404,7 +2321,7 @@ var Player = forwardRef(
       window.addEventListener("pageshow", onPageShow);
       return () => window.removeEventListener("pageshow", onPageShow);
     }, []);
-    useEffect5(() => {
+    useEffect4(() => {
       const video = videoRef.current;
       if (!video || !isScriptsLoaded) return;
       const initialize = async () => {
@@ -2463,7 +2380,7 @@ var Player = forwardRef(
         destroyPlayer();
       };
     }, [managedMode ? hasPlaylist : src, isScriptsLoaded, bfResetKey, managedMode]);
-    useEffect5(() => {
+    useEffect4(() => {
       const video = videoRef.current;
       if (!video) return;
       const onLoadStart = () => {
@@ -2484,7 +2401,7 @@ var Player = forwardRef(
         video.removeEventListener("playing", onPlaying);
       };
     }, []);
-    useEffect5(() => {
+    useEffect4(() => {
       const video = videoRef.current;
       if (!video) return;
       video.autoplay = autoPlay;
@@ -2492,7 +2409,7 @@ var Player = forwardRef(
       video.controls = false;
       if (poster) video.poster = poster;
     }, [autoPlay, loop, muted, poster, imaConfig?.adTagUrl]);
-    useEffect5(() => {
+    useEffect4(() => {
       const video = videoRef.current;
       if (!video) return;
       video.controls = false;
@@ -2526,10 +2443,13 @@ var Player = forwardRef(
       skipForward,
       // Mux methods
       updateMuxData,
+      // Live status methods
+      getLiveStatus,
+      seekToLiveEdge,
       // Access to underlying instances
       getPlayer: () => playerRef.current,
       getMuxMonitor: () => null
-    }), [getAvailableQualities, setQuality, skipBack, skipForward, updateMuxData]);
+    }), [getAvailableQualities, setQuality, skipBack, skipForward, updateMuxData, getLiveStatus, seekToLiveEdge]);
     const isResponsive = !width && !height;
     const containerClasses = twMerge2(containerClassName, "motto-video-container relative bg-[#111111] ");
     const containerStyle = isResponsive ? {
@@ -2539,14 +2459,14 @@ var Player = forwardRef(
     const videoStyle = isResponsive ? {} : { width, height };
     const filteredVideoProps = { ...videoProps };
     delete filteredVideoProps.controls;
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs4(
       "div",
       {
         ref: containerRef,
         className: containerClasses,
         style: containerStyle,
         children: [
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx7(
             "video",
             {
               ref: videoRef,
@@ -2559,8 +2479,7 @@ var Player = forwardRef(
               ...filteredVideoProps
             }
           ),
-          isInitialLoading && /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 flex items-center justify-center z-20 pointer-events-none", children: /* @__PURE__ */ jsx8(Loading, { className: "bg-transparent" }) }),
-          /* @__PURE__ */ jsx8(LiveBadge, { isVisible: isLiveBadgeVisible })
+          isInitialLoading && /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 flex items-center justify-center z-20 pointer-events-none", children: /* @__PURE__ */ jsx7(Loading, { className: "bg-transparent" }) })
         ]
       }
     );
@@ -2569,7 +2488,7 @@ var Player = forwardRef(
 Player.displayName = "Player";
 
 // src/Video.tsx
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect6 } from "react";
 import { twMerge as twMerge3 } from "tailwind-merge";
 import { useQuery } from "@tanstack/react-query";
 
@@ -2710,7 +2629,7 @@ var getErrorType = (error, video) => {
 };
 
 // src/messages/useMessages.tsx
-import { useState as useState5, useEffect as useEffect6 } from "react";
+import { useState as useState4, useEffect as useEffect5 } from "react";
 
 // src/messages/en.json
 var en_default = {
@@ -3012,9 +2931,9 @@ var getBrowserLanguage = () => {
   return availableLanguages[language] ? language : "en";
 };
 var useMessages = (locale) => {
-  const [language, setLanguage] = useState5("en");
-  const [translations, setTranslations] = useState5(availableLanguages.en);
-  useEffect6(() => {
+  const [language, setLanguage] = useState4("en");
+  const [translations, setTranslations] = useState4(availableLanguages.en);
+  useEffect5(() => {
     const lang = !!availableLanguages?.[locale] ? locale : getBrowserLanguage();
     ;
     setLanguage(lang);
@@ -3040,7 +2959,7 @@ var useMessages = (locale) => {
 var useMessages_default = useMessages;
 
 // src/Video.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var Video = ({
   videoId,
   publicKey,
@@ -3079,13 +2998,13 @@ var Video = ({
   const activePlaylist = findHLSPlaylist(video);
   const activePlaylistUrl = activePlaylist?.url ?? activePlaylist?.drm?.widevine?.playlistUrl ?? activePlaylist?.drm?.playready?.playlistUrl ?? activePlaylist?.drm?.fairplay?.playlistUrl;
   const activePlaylistHasUrl = !!activePlaylistUrl;
-  useEffect7(() => {
+  useEffect6(() => {
     if (events?.onVideoData && video) {
       events.onVideoData(video);
     }
   }, [video, events]);
   if (isLoading || !providedVideoData && !video) {
-    return /* @__PURE__ */ jsx9("div", { className: twMerge3("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx9("div", { className: "relative w-full h-full bg-[#151515]", children: /* @__PURE__ */ jsx9(Loading, {}) }) });
+    return /* @__PURE__ */ jsx8("div", { className: twMerge3("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx8("div", { className: "relative w-full h-full bg-[#151515]", children: /* @__PURE__ */ jsx8(Loading, {}) }) });
   }
   if (!isLoading && video && !activePlaylistHasUrl && events?.onEmptyPlaylists) {
     events.onEmptyPlaylists();
@@ -3098,8 +3017,8 @@ var Video = ({
     }
     const title = t(errorKey) || t("DEFAULT_ERROR");
     const description = t(`${errorKey}_DESCRIPTION`) || t("DEFAULT_ERROR_DESCRIPTION");
-    return /* @__PURE__ */ jsx9("div", { className: twMerge3("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsxs6("div", { className: "relative w-full h-full", children: [
-      /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx8("div", { className: twMerge3("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsxs5("div", { className: "relative w-full h-full", children: [
+      /* @__PURE__ */ jsx8(
         ErrorScreen,
         {
           title,
@@ -3110,12 +3029,12 @@ var Video = ({
     ] }) });
   }
   if (!activePlaylist || !activePlaylistHasUrl) {
-    return /* @__PURE__ */ jsx9("div", { className: twMerge3("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsxs6("div", { className: "relative w-full h-full bg-[#151515]", children: [
-      /* @__PURE__ */ jsx9(Title, { title: video?.name || "" }),
+    return /* @__PURE__ */ jsx8("div", { className: twMerge3("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsxs5("div", { className: "relative w-full h-full bg-[#151515]", children: [
+      /* @__PURE__ */ jsx8(Title, { title: video?.name || "" }),
       children
     ] }) });
   }
-  return /* @__PURE__ */ jsx9("div", { className: twMerge3("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx9("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx8("div", { className: twMerge3("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx8("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx8(
     Player,
     {
       ...props,
@@ -3134,10 +3053,10 @@ var Video = ({
 };
 
 // src/Event.tsx
-import { useCallback as useCallback10, useEffect as useEffect8, useState as useState6 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect7, useState as useState5 } from "react";
 import { twMerge as twMerge4 } from "tailwind-merge";
 import { useQuery as useQuery2 } from "@tanstack/react-query";
-import { Fragment, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var Event = ({
   publicKey,
   eventId,
@@ -3168,8 +3087,8 @@ var Event = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [activePlaylist, setActivePlaylist] = useState6();
-  const [activeVideoId, setActiveVideoId] = useState6();
+  const [activePlaylist, setActivePlaylist] = useState5();
+  const [activeVideoId, setActiveVideoId] = useState5();
   const videoIds = eventData?.videoIds ?? [];
   const {
     data: videosData,
@@ -3185,8 +3104,8 @@ var Event = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [loadingApisState, setLoadingApisState] = useState6(true);
-  useEffect8(() => {
+  const [loadingApisState, setLoadingApisState] = useState5(true);
+  useEffect7(() => {
     if (videosData !== void 0) {
       setLoadingApisState(false);
       const videosWithPlaylists = videosData.filter(
@@ -3220,12 +3139,12 @@ var Event = ({
     }
   }, [videosData, eventData]);
   const { t } = useMessages_default(locale);
-  useEffect8(() => {
+  useEffect7(() => {
     if (events?.onEventData && eventData) {
       events.onEventData(eventData);
     }
   }, [eventData, events]);
-  useEffect8(() => {
+  useEffect7(() => {
     if (events?.onVideoData && activeVideoId && videosData) {
       const activeVideo = videosData.find((video) => video.id === activeVideoId);
       if (activeVideo) {
@@ -3233,10 +3152,10 @@ var Event = ({
       }
     }
   }, [activeVideoId, videosData, events]);
-  const [error, setError] = useState6(null);
-  const [loadingPlaylist, setLoadingPlaylist] = useState6(true);
+  const [error, setError] = useState5(null);
+  const [loadingPlaylist, setLoadingPlaylist] = useState5(true);
   const videosDataError = videosData?.some((video) => !!video.error);
-  useEffect8(() => {
+  useEffect7(() => {
     if (isEventLoading || videosIsLoading || loadingApisState) {
       return;
     }
@@ -3262,7 +3181,7 @@ var Event = ({
     videosIsLoading,
     loadingApisState
   ]);
-  useEffect8(() => {
+  useEffect7(() => {
     const eventLoadedWithNoVideos = !isEventLoading && eventData && eventData.videoIds && (!eventData.videoIds || eventData?.videoIds?.length === 0) && !loadingApisState;
     const allApisLoadedWithPotentialVideos = !isEventLoading && !videosIsLoading && eventData && !loadingApisState;
     if (eventLoadedWithNoVideos || allApisLoadedWithPotentialVideos) {
@@ -3272,7 +3191,7 @@ var Event = ({
   if (error) {
     const title = t(error.message)?.length ? t(error.message) : t("DEFAULT_ERROR");
     const description = t(`${error.message}_DESCRIPTION`)?.length ? t(`${error.message}_DESCRIPTION`) : t("DEFAULT_ERROR_DESCRIPTION");
-    return /* @__PURE__ */ jsx10("div", { className: twMerge4("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx10("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx9("div", { className: twMerge4("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx9("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx9(
       ErrorScreen,
       {
         title,
@@ -3284,13 +3203,13 @@ var Event = ({
     events.onEmptyPlaylists();
   }
   if (loadingPlaylist) {
-    return /* @__PURE__ */ jsx10("div", { className: twMerge4("", className), children: /* @__PURE__ */ jsx10("div", { className: "relative w-full aspect-video bg-[#151515]", children: /* @__PURE__ */ jsx10(Loading, {}) }) });
+    return /* @__PURE__ */ jsx9("div", { className: twMerge4("", className), children: /* @__PURE__ */ jsx9("div", { className: "relative w-full aspect-video bg-[#151515]", children: /* @__PURE__ */ jsx9(Loading, {}) }) });
   }
   if (activePlaylist && activeVideoId && videosData) {
     const activeVideo = videosData.find((video) => video.id === activeVideoId);
     console.log("activeVideo?.ad?.adTagUrl", activeVideo?.ad?.adTagUrl);
-    return /* @__PURE__ */ jsxs7("div", { className: twMerge4("", className), children: [
-      /* @__PURE__ */ jsx10("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsxs6("div", { className: twMerge4("", className), children: [
+      /* @__PURE__ */ jsx9("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx9(
         Player,
         {
           ...props,
@@ -3305,7 +3224,7 @@ var Event = ({
           ...adsEnabled && activeVideo ? { imaConfig: { adTagUrl: activeVideo?.ad?.adTagUrl } } : {}
         }
       ) }),
-      !hideTitle && eventData && /* @__PURE__ */ jsx10(
+      !hideTitle && eventData && /* @__PURE__ */ jsx9(
         TitleAndDescription,
         {
           title: eventData.title,
@@ -3317,7 +3236,7 @@ var Event = ({
     ] });
   }
   if (eventData) {
-    return /* @__PURE__ */ jsx10("div", { className: twMerge4("", className), children: /* @__PURE__ */ jsx10("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx9("div", { className: twMerge4("", className), children: /* @__PURE__ */ jsx9("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx9(
       PreEvent,
       {
         event: eventData,
@@ -3339,12 +3258,12 @@ function PreEvent({
 }) {
   const date = new Date(event.startTime);
   const now = /* @__PURE__ */ new Date();
-  const [remainingTime, setRemainingTime] = useState6(
+  const [remainingTime, setRemainingTime] = useState5(
     date.getTime() - now.getTime()
   );
   const shouldBeStarted = remainingTime < 0;
   const { t } = useMessages_default(locale);
-  useEffect8(() => {
+  useEffect7(() => {
     const interval = setInterval(() => {
       if (remainingTime < 0) {
         clearInterval(interval);
@@ -3356,15 +3275,15 @@ function PreEvent({
   }, [date, remainingTime]);
   const renderCountdown = useCallback10(() => {
     if (shouldBeStarted) {
-      return /* @__PURE__ */ jsx10("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
+      return /* @__PURE__ */ jsx9("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
     }
     const seconds = Math.floor(remainingTime / 1e3) % 60;
     const minutes = Math.floor(remainingTime / 1e3 / 60) % 60;
     const hours = Math.floor(remainingTime / 1e3 / 60 / 60) % 24;
     const days = Math.floor(remainingTime / 1e3 / 60 / 60 / 24);
-    return /* @__PURE__ */ jsxs7("div", { className: "grid grid-flow-col gap-1 md:gap-5 text-center auto-cols-max", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ jsx10("span", { className: "font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsxs6("div", { className: "grid grid-flow-col gap-1 md:gap-5 text-center auto-cols-max", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ jsx9("span", { className: "font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx9(
           "span",
           {
             "aria-live": "polite",
@@ -3372,10 +3291,10 @@ function PreEvent({
             children: days.toString()
           }
         ) }),
-        /* @__PURE__ */ jsx10("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("DAYS") })
+        /* @__PURE__ */ jsx9("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("DAYS") })
       ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ jsx10("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ jsx9("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx9(
           "span",
           {
             style: { "--value": hours },
@@ -3384,10 +3303,10 @@ function PreEvent({
             children: hours?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ jsx10("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("HOURS") })
+        /* @__PURE__ */ jsx9("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("HOURS") })
       ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ jsx10("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ jsx9("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx9(
           "span",
           {
             style: { "--value": minutes },
@@ -3396,10 +3315,10 @@ function PreEvent({
             children: minutes?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ jsx10("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("MINUTES") })
+        /* @__PURE__ */ jsx9("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("MINUTES") })
       ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ jsx10("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ jsx9("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx9(
           "span",
           {
             style: { "--value": seconds },
@@ -3408,12 +3327,12 @@ function PreEvent({
             children: seconds?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ jsx10("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("SECONDS") })
+        /* @__PURE__ */ jsx9("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("SECONDS") })
       ] })
     ] });
   }, [remainingTime, shouldBeStarted, t]);
-  return /* @__PURE__ */ jsx10(Fragment, { children: event?.posterUrl ? /* @__PURE__ */ jsxs7(Fragment, { children: [
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx9(Fragment, { children: event?.posterUrl ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9(
       "div",
       {
         className: "relative overflow-hidden bg-base-200 aspect-video text-base-content w-full h-full flex justify-center items-center flex-col bg-no-repeat bg-cover md:rounded-2xl",
@@ -3422,10 +3341,10 @@ function PreEvent({
           backgroundRepeat: "no-repeat",
           backgroundSize: "cover"
         },
-        children: /* @__PURE__ */ jsx10("div", { className: "relative z-10", children: renderCountdown() })
+        children: /* @__PURE__ */ jsx9("div", { className: "relative z-10", children: renderCountdown() })
       }
     ),
-    !hideTitle && /* @__PURE__ */ jsx10(
+    !hideTitle && /* @__PURE__ */ jsx9(
       TitleAndDescription,
       {
         title: event.title,
@@ -3434,18 +3353,18 @@ function PreEvent({
         locale
       }
     )
-  ] }) : /* @__PURE__ */ jsxs7(Fragment, { children: [
-    /* @__PURE__ */ jsx10(
+  ] }) : /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9(
       "div",
       {
         className: "relative overflow-hidden md:rounded-2xl bg-base-200 aspect-video text-base-content flex flex-col justify-center items-center w-full h-full bg-cover bg-center bg-no-repeat",
         style: {
           backgroundImage: backgroundImageUrl ? `url(${backgroundImageUrl})` : ""
         },
-        children: /* @__PURE__ */ jsx10("div", { className: "relative z-10", children: renderCountdown() })
+        children: /* @__PURE__ */ jsx9("div", { className: "relative z-10", children: renderCountdown() })
       }
     ),
-    !hideTitle && /* @__PURE__ */ jsx10(
+    !hideTitle && /* @__PURE__ */ jsx9(
       TitleAndDescription,
       {
         title: event.title,
@@ -3463,9 +3382,9 @@ var TitleAndDescription = ({
   locale = "en",
   className
 }) => {
-  return /* @__PURE__ */ jsxs7("div", { className: twMerge4("mt-3 mb-6 m-event-details-ctn px-4 text-left w-full", className), children: [
-    /* @__PURE__ */ jsx10("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
-    startTime ? /* @__PURE__ */ jsxs7("div", { className: "text-xs md:text-base text-base-content/70 m-event-start-time", children: [
+  return /* @__PURE__ */ jsxs6("div", { className: twMerge4("mt-3 mb-6 m-event-details-ctn px-4 text-left w-full", className), children: [
+    /* @__PURE__ */ jsx9("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
+    startTime ? /* @__PURE__ */ jsxs6("div", { className: "text-xs md:text-base text-base-content/70 m-event-start-time", children: [
       new Date(startTime || "").toLocaleDateString(locale || "default", {
         month: "long",
         year: "numeric",
@@ -3478,15 +3397,15 @@ var TitleAndDescription = ({
         minute: "2-digit"
       })
     ] }) : null,
-    description && /* @__PURE__ */ jsx10("div", { className: "text-xs md:text-xs text-base-content/60 uppercase", children: description })
+    description && /* @__PURE__ */ jsx9("div", { className: "text-xs md:text-xs text-base-content/60 uppercase", children: description })
   ] });
 };
 
 // src/CreativeWork.tsx
-import { useEffect as useEffect9, useState as useState7 } from "react";
+import { useEffect as useEffect8, useState as useState6 } 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 jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var CreativeWork = ({
   publicKey,
   creativeWorkId,
@@ -3517,9 +3436,9 @@ var CreativeWork = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [activePlaylist, setActivePlaylist] = useState7();
-  const [activeVideoId, setActiveVideoId] = useState7();
-  const [showCountDown, setShowCountDown] = useState7(false);
+  const [activePlaylist, setActivePlaylist] = useState6();
+  const [activeVideoId, setActiveVideoId] = useState6();
+  const [showCountDown, setShowCountDown] = useState6(false);
   const videoIds = creativeWorkData?.videoIds ?? [];
   const {
     data: videosData,
@@ -3535,8 +3454,8 @@ var CreativeWork = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [loadingApisState, setLoadingApisState] = useState7(true);
-  useEffect9(() => {
+  const [loadingApisState, setLoadingApisState] = useState6(true);
+  useEffect8(() => {
     if (videosData !== void 0) {
       setLoadingApisState(false);
       const videosWithPlaylists = videosData.filter(
@@ -3570,7 +3489,7 @@ var CreativeWork = ({
     }
   }, [videosData, creativeWorkData]);
   const { t } = useMessages_default(locale);
-  useEffect9(() => {
+  useEffect8(() => {
     if (events?.onCreativeWorkData && creativeWorkData) {
       events.onCreativeWorkData(creativeWorkData);
     }
@@ -3578,7 +3497,7 @@ var CreativeWork = ({
       setShowCountDown(true);
     }
   }, [creativeWorkData, events]);
-  useEffect9(() => {
+  useEffect8(() => {
     if (events?.onVideoData && activeVideoId && videosData) {
       const activeVideo = videosData.find((video) => video.id === activeVideoId);
       if (activeVideo) {
@@ -3586,9 +3505,9 @@ var CreativeWork = ({
       }
     }
   }, [activeVideoId, videosData, events]);
-  const [error, setError] = useState7(null);
+  const [error, setError] = useState6(null);
   const videosDataError = videosData?.some((video) => !!video.error);
-  useEffect9(() => {
+  useEffect8(() => {
     if (creativeWorkError || videosError || videosDataError) {
       const errorObj = creativeWorkError || videosError || videosData?.find((video) => !!video.error)?.error && new Error(videosData?.find((video) => !!video.error)?.error) || new Error("default");
       setError(errorObj);
@@ -3602,7 +3521,7 @@ var CreativeWork = ({
   if (error) {
     const title = t(error.message)?.length ? t(error.message) : t("DEFAULT_ERROR");
     const description = t(`${error.message}_DESCRIPTION`)?.length ? t(`${error.message}_DESCRIPTION`) : t("DEFAULT_ERROR_DESCRIPTION");
-    return /* @__PURE__ */ jsx11("div", { className: twMerge5("", className), children: /* @__PURE__ */ jsx11("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx10("div", { className: twMerge5("", className), children: /* @__PURE__ */ jsx10("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx10(
       ErrorScreen,
       {
         title,
@@ -3610,8 +3529,8 @@ var CreativeWork = ({
       }
     ) }) });
   }
-  const [loadingPlaylist, setLoadingPlaylist] = useState7(true);
-  useEffect9(() => {
+  const [loadingPlaylist, setLoadingPlaylist] = useState6(true);
+  useEffect8(() => {
     const creativeWorkLoadedWithNoVideos = !isCreativeWorkLoading && creativeWorkData && creativeWorkData.videoIds && creativeWorkData.videoIds.length === 0;
     const creativeWorkLoadedWithNoData = !isCreativeWorkLoading && creativeWorkData && !creativeWorkData.videoIds;
     const isEventsFinished = !videosIsLoading && videosData && videosData.length > 0 && videosData.every((video) => video.playlists && video.playlists.length === 0);
@@ -3632,10 +3551,10 @@ var CreativeWork = ({
     events
   ]);
   if (isCreativeWorkLoading || videosIsLoading || loadingApisState) {
-    return /* @__PURE__ */ jsx11("div", { className: twMerge5("", className), children: /* @__PURE__ */ jsx11("div", { className: "relative w-full aspect-video bg-[#151515]", children: /* @__PURE__ */ jsx11(Loading, {}) }) });
+    return /* @__PURE__ */ jsx10("div", { className: twMerge5("", className), children: /* @__PURE__ */ jsx10("div", { className: "relative w-full aspect-video bg-[#151515]", children: /* @__PURE__ */ jsx10(Loading, {}) }) });
   }
   if (showCountDown && creativeWorkData) {
-    return /* @__PURE__ */ jsx11("div", { className: twMerge5("", className), children: /* @__PURE__ */ jsx11("div", { className: "relative w-full h-full bg-base-200 text-base-content flex justify-center items-center flex-col", children: /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx10("div", { className: twMerge5("", className), children: /* @__PURE__ */ jsx10("div", { className: "relative w-full h-full bg-base-200 text-base-content flex justify-center items-center flex-col", children: /* @__PURE__ */ jsx10(
       PreCreativeWork,
       {
         creativeWork: creativeWorkData,
@@ -3648,8 +3567,8 @@ var CreativeWork = ({
   }
   if (activeVideoId && activePlaylist && !loadingPlaylist) {
     const activeVideo = videosData?.find((video) => video.id === activeVideoId);
-    return /* @__PURE__ */ jsx11("div", { className: twMerge5("", className), children: /* @__PURE__ */ jsxs8("div", { className: "relative w-full h-full", children: [
-      /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx10("div", { className: twMerge5("", className), children: /* @__PURE__ */ jsxs7("div", { className: "relative w-full h-full", children: [
+      /* @__PURE__ */ jsx10(
         Player,
         {
           ...props,
@@ -3666,7 +3585,7 @@ var CreativeWork = ({
           ...adsEnabled && activeVideo?.ad?.adTagUrl ? { imaConfig: { adTagUrl: activeVideo?.ad?.adTagUrl } } : {}
         }
       ),
-      !hideTitle && /* @__PURE__ */ jsx11(
+      !hideTitle && /* @__PURE__ */ jsx10(
         TitleAndDescription2,
         {
           title: creativeWorkData?.title || "",
@@ -3679,7 +3598,7 @@ var CreativeWork = ({
     ] }) });
   }
   if (loadingPlaylist) {
-    return /* @__PURE__ */ jsx11("div", { className: twMerge5("", className), children: /* @__PURE__ */ jsx11("div", { className: "relative w-full aspect-video bg-[#151515]", children: /* @__PURE__ */ jsx11(Loading, {}) }) });
+    return /* @__PURE__ */ jsx10("div", { className: twMerge5("", className), children: /* @__PURE__ */ jsx10("div", { className: "relative w-full aspect-video bg-[#151515]", children: /* @__PURE__ */ jsx10(Loading, {}) }) });
   }
   return null;
 };
@@ -3692,12 +3611,12 @@ function PreCreativeWork({
 }) {
   const date = new Date(creativeWork.releaseTime);
   const now = /* @__PURE__ */ new Date();
-  const [remainingTime, setRemainingTime] = useState7(
+  const [remainingTime, setRemainingTime] = useState6(
     date.getTime() - now.getTime()
   );
   const shouldBeStarted = remainingTime < 0;
   const { t } = useMessages_default(locale);
-  useEffect9(() => {
+  useEffect8(() => {
     const interval = setInterval(() => {
       if (remainingTime < 0) {
         clearInterval(interval);
@@ -3711,15 +3630,15 @@ function PreCreativeWork({
   }, [date, remainingTime]);
   const renderCountdown = () => {
     if (shouldBeStarted) {
-      return /* @__PURE__ */ jsx11("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
+      return /* @__PURE__ */ jsx10("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
     }
     const seconds = Math.floor(remainingTime / 1e3) % 60;
     const minutes = Math.floor(remainingTime / 1e3 / 60) % 60;
     const hours = Math.floor(remainingTime / 1e3 / 60 / 60) % 24;
     const days = Math.floor(remainingTime / 1e3 / 60 / 60 / 24);
-    return /* @__PURE__ */ jsxs8("div", { className: "grid grid-flow-col md:gap-5 gap-1 text-center auto-cols-max", children: [
-      /* @__PURE__ */ jsxs8("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ jsx11("span", { className: "font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsxs7("div", { className: "grid grid-flow-col md:gap-5 gap-1 text-center auto-cols-max", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ jsx10("span", { className: "font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx10(
           "span",
           {
             "aria-live": "polite",
@@ -3727,10 +3646,10 @@ function PreCreativeWork({
             children: days.toString()
           }
         ) }),
-        /* @__PURE__ */ jsx11("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("DAYS") })
+        /* @__PURE__ */ jsx10("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("DAYS") })
       ] }),
-      /* @__PURE__ */ jsxs8("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ jsx11("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ jsx10("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx10(
           "span",
           {
             style: { "--value": hours },
@@ -3739,10 +3658,10 @@ function PreCreativeWork({
             children: hours?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ jsx11("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("HOURS") })
+        /* @__PURE__ */ jsx10("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("HOURS") })
       ] }),
-      /* @__PURE__ */ jsxs8("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ jsx11("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ jsx10("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx10(
           "span",
           {
             style: { "--value": minutes },
@@ -3751,10 +3670,10 @@ function PreCreativeWork({
             children: minutes?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ jsx11("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("MINUTES") })
+        /* @__PURE__ */ jsx10("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("MINUTES") })
       ] }),
-      /* @__PURE__ */ jsxs8("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ jsx11("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ jsx10("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx10(
           "span",
           {
             style: { "--value": seconds },
@@ -3763,12 +3682,12 @@ function PreCreativeWork({
             children: seconds?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ jsx11("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("SECONDS") })
+        /* @__PURE__ */ jsx10("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("SECONDS") })
       ] })
     ] });
   };
-  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
-    /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsxs7(
       "div",
       {
         className: "relative overflow-hidden md:rounded-2xl bg-base-200 aspect-video text-base-content flex flex-col justify-center items-center w-full h-full bg-cover bg-center bg-no-repeat",
@@ -3776,12 +3695,12 @@ function PreCreativeWork({
           backgroundImage: backgroundImageUrl ? `url(${backgroundImageUrl})` : ""
         },
         children: [
-          backgroundImageUrl && /* @__PURE__ */ jsx11("div", { className: "absolute inset-0 bg-black bg-opacity-40" }),
-          /* @__PURE__ */ jsx11("div", { className: "relative z-10", children: renderCountdown() })
+          backgroundImageUrl && /* @__PURE__ */ jsx10("div", { className: "absolute inset-0 bg-black bg-opacity-40" }),
+          /* @__PURE__ */ jsx10("div", { className: "relative z-10", children: renderCountdown() })
         ]
       }
     ),
-    !hideTitle && /* @__PURE__ */ jsx11(
+    !hideTitle && /* @__PURE__ */ jsx10(
       TitleAndDescription2,
       {
         title: creativeWork.title,
@@ -3799,9 +3718,9 @@ var TitleAndDescription2 = ({
   locale = "en",
   className
 }) => {
-  return /* @__PURE__ */ jsxs8("div", { className: twMerge5("mt-3 mb-6 m-event-details-ctn px-4 text-left w-full", className), children: [
-    /* @__PURE__ */ jsx11("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
-    releaseTime ? /* @__PURE__ */ jsxs8("div", { className: "text-sm md:text-base text-base-content/70 m-event-start-time", children: [
+  return /* @__PURE__ */ jsxs7("div", { className: twMerge5("mt-3 mb-6 m-event-details-ctn px-4 text-left w-full", className), children: [
+    /* @__PURE__ */ jsx10("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
+    releaseTime ? /* @__PURE__ */ jsxs7("div", { className: "text-sm md:text-base text-base-content/70 m-event-start-time", children: [
       new Date(releaseTime || "").toLocaleDateString(locale || "default", {
         month: "long",
         year: "numeric",
@@ -3814,13 +3733,13 @@ var TitleAndDescription2 = ({
         minute: "2-digit"
       })
     ] }) : null,
-    description && /* @__PURE__ */ jsx11("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
+    description && /* @__PURE__ */ jsx10("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
   ] });
 };
 
 // src/QueryProvider.tsx
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -3834,7 +3753,7 @@ var queryClient = new QueryClient({
   }
 });
 var QueryProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx12(QueryClientProvider, { client: queryClient, children });
+  return /* @__PURE__ */ jsx11(QueryClientProvider, { client: queryClient, children });
 };
 export {
   BigPlayIcon,