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

package/dist/index.js

@@ -434,7 +434,7 @@ html[dir=rtl] .shaka-overflow-menu .shaka-overflow-button .material-svg-icon:fir
 `);
 
 // src/Player.tsx
-var import_react13 = require("react");
+var import_react12 = require("react");
 var import_shaka_player4 = __toESM(require("shaka-player/dist/shaka-player.ui"));
 
 // src/hooks/useShakaPlayer.ts
@@ -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.79";
+var version = "1.0.1-rc.80";
 
 // src/utils/licenseCache.ts
 var PERSISTENT_LICENSE_PREFIX = "motto_lic_";
@@ -1638,176 +1638,146 @@ var useEventHandlers = (videoRef, handlers) => {
   };
 };
 
-// src/hooks/useLiveBadge.ts
-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, 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);
-      }
-    }
-  };
-  (0, import_react8.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]);
-  (0, import_react8.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
-var import_react9 = require("react");
+var import_react8 = require("react");
 
 // src/hooks/useLiveIndicator.ts
-var import_react10 = require("react");
+var import_react9 = require("react");
 var useLiveIndicator = (containerRef, playerRef, options = {}) => {
-  const observerRef = (0, import_react10.useRef)(null);
-  const intervalRef = (0, import_react10.useRef)(null);
+  const observerRef = (0, import_react9.useRef)(null);
+  const intervalRef = (0, import_react9.useRef)(null);
+  const lastStatusRef = (0, import_react9.useRef)(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);
     }
   };
-  (0, import_react10.useEffect)(() => {
-    if (!containerRef.current || !playerRef.current || !enabled) {
+  (0, import_react9.useEffect)(() => {
+    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);
         }
@@ -1848,28 +1818,21 @@ 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
-var import_react11 = require("react");
+var import_react10 = require("react");
 var useKeyboardControls = (videoRef, options = {}) => {
   const { skipBack, skipForward, enabled = true } = options;
-  const isDesktop = (0, import_react11.useCallback)(() => {
+  const isDesktop = (0, import_react10.useCallback)(() => {
     return window.innerWidth > 767 && !/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
   }, []);
-  const handleKeydown = (0, import_react11.useCallback)((event) => {
+  const handleKeydown = (0, import_react10.useCallback)((event) => {
     if (!enabled || !isDesktop() || !videoRef.current) return;
     const activeElement = document.activeElement;
     if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.isContentEditable)) {
@@ -1895,7 +1858,7 @@ var useKeyboardControls = (videoRef, options = {}) => {
         break;
     }
   }, [enabled, videoRef, skipBack, skipForward, isDesktop]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!enabled || !isDesktop()) return;
     document.addEventListener("keydown", handleKeydown);
     return () => {
@@ -1908,10 +1871,10 @@ var useKeyboardControls = (videoRef, options = {}) => {
 };
 
 // src/hooks/useAdEvents.ts
-var import_react12 = require("react");
+var import_react11 = require("react");
 var useAdEvents = (playerRef, handlers) => {
-  const listenersRef = (0, import_react12.useRef)([]);
-  const setupAdEventListeners = (0, import_react12.useCallback)(() => {
+  const listenersRef = (0, import_react11.useRef)([]);
+  const setupAdEventListeners = (0, import_react11.useCallback)(() => {
     const player = playerRef.current;
     if (!player) return;
     const adManager = player.getAdManager();
@@ -2017,7 +1980,7 @@ var useAdEvents = (playerRef, handlers) => {
       console.warn("Error setting up ad event listeners:", error);
     }
   }, [playerRef, handlers]);
-  const cleanupAdEventListeners = (0, import_react12.useCallback)(() => {
+  const cleanupAdEventListeners = (0, import_react11.useCallback)(() => {
     try {
       listenersRef.current.forEach((listenerGroup) => {
         if (listenerGroup.type === "shaka" && listenerGroup.player) {
@@ -2050,117 +2013,6 @@ var useAdEvents = (playerRef, handlers) => {
   };
 };
 
-// src/components/Loading.tsx
-var import_tailwind_merge = require("tailwind-merge");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Loading = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-  "div",
-  {
-    className: (0, import_tailwind_merge.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__ */ (0, import_jsx_runtime4.jsx)("div", { className: " flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "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__ */ (0, import_jsx_runtime4.jsx)(
-          "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
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var ErrorScreen = ({ title, description }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-full h-full md:rounded-2xl! aspect-video bg-black flex", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "bg-[#151515] text-white w-full h-full flex justify-center items-center", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "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__ */ (0, import_jsx_runtime5.jsx)(
-        "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__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "text-2xl mb-2", children: title || "Playback Error" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-lg", children: description || "Unable to play the video. Please try again later." })
-  ] })
-] }) });
-
-// src/components/Title.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Title = ({ title }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "text-white text-xl font-semibold", children: title }) });
-
-// src/components/LiveBadge.tsx
-var import_jsx_runtime7 = require("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__ */ (0, import_jsx_runtime7.jsx)(
-    "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__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-2 h-2 bg-white rounded-full animate-pulse" }),
-        text
-      ] })
-    }
-  );
-};
-
 // src/Player.tsx
 var import_tailwind_merge2 = require("tailwind-merge");
 
@@ -2237,9 +2089,79 @@ async function waitForGlobals(globalNames, timeout = 5e3) {
   await Promise.all(promises);
 }
 
+// src/components/Loading.tsx
+var import_tailwind_merge = require("tailwind-merge");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Loading = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  "div",
+  {
+    className: (0, import_tailwind_merge.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__ */ (0, import_jsx_runtime4.jsx)("div", { className: " flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "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__ */ (0, import_jsx_runtime4.jsx)(
+          "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
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ErrorScreen = ({ title, description }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-full h-full md:rounded-2xl! aspect-video bg-black flex", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "bg-[#151515] text-white w-full h-full flex justify-center items-center", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "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__ */ (0, import_jsx_runtime5.jsx)(
+        "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__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "text-2xl mb-2", children: title || "Playback Error" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-lg", children: description || "Unable to play the video. Please try again later." })
+  ] })
+] }) });
+
+// src/components/Title.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Title = ({ title }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "text-white text-xl font-semibold", children: title }) });
+
 // src/Player.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Player = (0, import_react13.forwardRef)(
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Player = (0, import_react12.forwardRef)(
   ({
     src,
     managedMode = false,
@@ -2263,17 +2185,18 @@ var Player = (0, import_react13.forwardRef)(
     events,
     locale = "en",
     containerClassName,
+    liveThresholdSeconds = 15,
     publicKey,
     auth,
     ...videoProps
   }, ref) => {
-    const videoRef = (0, import_react13.useRef)(null);
-    const containerRef = (0, import_react13.useRef)(null);
-    const [isScriptsLoaded, setIsScriptsLoaded] = (0, import_react13.useState)(false);
-    const [isInitialLoading, setIsInitialLoading] = (0, import_react13.useState)(true);
-    const [bfResetKey, setBfResetKey] = (0, import_react13.useState)(0);
+    const videoRef = (0, import_react12.useRef)(null);
+    const containerRef = (0, import_react12.useRef)(null);
+    const [isScriptsLoaded, setIsScriptsLoaded] = (0, import_react12.useState)(false);
+    const [isInitialLoading, setIsInitialLoading] = (0, import_react12.useState)(true);
+    const [bfResetKey, setBfResetKey] = (0, import_react12.useState)(0);
     const hasPlaylist = !!src && (typeof src === "string" || !!(src.url || src.drm?.widevine?.playlistUrl || src.drm?.playready?.playlistUrl || src.drm?.fairplay?.playlistUrl));
-    (0, import_react13.useImperativeHandle)(ref, () => videoRef.current, []);
+    (0, import_react12.useImperativeHandle)(ref, () => videoRef.current, []);
     const { playerRef, initializePlayer, loadManifest, destroyPlayer, isRetrying } = useShakaPlayer({
       src,
       shakaConfig,
@@ -2331,19 +2254,13 @@ var Player = (0, import_react13.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,
@@ -2355,7 +2272,7 @@ var Player = (0, import_react13.forwardRef)(
       onAdProgress: events?.onAdProgress,
       onAllAdsCompleted: events?.onAllAdsCompleted
     });
-    const initializeSystem73 = (0, import_react13.useCallback)((playerConfig) => {
+    const initializeSystem73 = (0, import_react12.useCallback)((playerConfig) => {
       if (!system73Config?.apiKey || !window.S73ShakaPlayerWrapper) {
         return null;
       }
@@ -2375,7 +2292,7 @@ var Player = (0, import_react13.forwardRef)(
         return null;
       }
     }, [system73Config]);
-    const initializeAds = (0, import_react13.useCallback)(async () => {
+    const initializeAds = (0, import_react12.useCallback)(async () => {
       if (!imaConfig?.adTagUrl || !playerRef.current || !videoRef.current || !uiRef.current) {
         return;
       }
@@ -2413,7 +2330,7 @@ var Player = (0, import_react13.forwardRef)(
         console.error("Error initializing ads:", error);
       }
     }, [imaConfig, autoPlay, setupAdEventListeners, loadManifest]);
-    (0, import_react13.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       const loadRequiredScripts = async () => {
         try {
           const scriptLoaders = getRequiredScriptLoaders(!!imaConfig?.adTagUrl, !!system73Config?.apiKey);
@@ -2436,7 +2353,7 @@ var Player = (0, import_react13.forwardRef)(
       };
       loadRequiredScripts();
     }, [imaConfig?.adTagUrl, system73Config?.apiKey]);
-    (0, import_react13.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       const onPageShow = (e) => {
         if (e && e.persisted) {
           setBfResetKey((k) => k + 1);
@@ -2445,7 +2362,7 @@ var Player = (0, import_react13.forwardRef)(
       window.addEventListener("pageshow", onPageShow);
       return () => window.removeEventListener("pageshow", onPageShow);
     }, []);
-    (0, import_react13.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       const video = videoRef.current;
       if (!video || !isScriptsLoaded) return;
       const initialize = async () => {
@@ -2504,7 +2421,7 @@ var Player = (0, import_react13.forwardRef)(
         destroyPlayer();
       };
     }, [managedMode ? hasPlaylist : src, isScriptsLoaded, bfResetKey, managedMode]);
-    (0, import_react13.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       const video = videoRef.current;
       if (!video) return;
       const onLoadStart = () => {
@@ -2525,7 +2442,7 @@ var Player = (0, import_react13.forwardRef)(
         video.removeEventListener("playing", onPlaying);
       };
     }, []);
-    (0, import_react13.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       const video = videoRef.current;
       if (!video) return;
       video.autoplay = autoPlay;
@@ -2533,7 +2450,7 @@ var Player = (0, import_react13.forwardRef)(
       video.controls = false;
       if (poster) video.poster = poster;
     }, [autoPlay, loop, muted, poster, imaConfig?.adTagUrl]);
-    (0, import_react13.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       const video = videoRef.current;
       if (!video) return;
       video.controls = false;
@@ -2557,7 +2474,7 @@ var Player = (0, import_react13.forwardRef)(
         observer.disconnect();
       };
     }, []);
-    (0, import_react13.useImperativeHandle)(ref, () => ({
+    (0, import_react12.useImperativeHandle)(ref, () => ({
       ...videoRef.current,
       // Custom methods for quality control
       getAvailableQualities,
@@ -2567,10 +2484,13 @@ var Player = (0, import_react13.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 = (0, import_tailwind_merge2.twMerge)(containerClassName, "motto-video-container relative bg-[#111111] ");
     const containerStyle = isResponsive ? {
@@ -2580,14 +2500,14 @@ var Player = (0, import_react13.forwardRef)(
     const videoStyle = isResponsive ? {} : { width, height };
     const filteredVideoProps = { ...videoProps };
     delete filteredVideoProps.controls;
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
         ref: containerRef,
         className: containerClasses,
         style: containerStyle,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "video",
             {
               ref: videoRef,
@@ -2600,8 +2520,7 @@ var Player = (0, import_react13.forwardRef)(
               ...filteredVideoProps
             }
           ),
-          isInitialLoading && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute inset-0 flex items-center justify-center z-20 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Loading, { className: "bg-transparent" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LiveBadge, { isVisible: isLiveBadgeVisible })
+          isInitialLoading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute inset-0 flex items-center justify-center z-20 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Loading, { className: "bg-transparent" }) })
         ]
       }
     );
@@ -2610,7 +2529,7 @@ var Player = (0, import_react13.forwardRef)(
 Player.displayName = "Player";
 
 // src/Video.tsx
-var import_react15 = require("react");
+var import_react14 = require("react");
 var import_tailwind_merge3 = require("tailwind-merge");
 var import_react_query = require("@tanstack/react-query");
 
@@ -2751,7 +2670,7 @@ var getErrorType = (error, video) => {
 };
 
 // src/messages/useMessages.tsx
-var import_react14 = require("react");
+var import_react13 = require("react");
 
 // src/messages/en.json
 var en_default = {
@@ -3053,9 +2972,9 @@ var getBrowserLanguage = () => {
   return availableLanguages[language] ? language : "en";
 };
 var useMessages = (locale) => {
-  const [language, setLanguage] = (0, import_react14.useState)("en");
-  const [translations, setTranslations] = (0, import_react14.useState)(availableLanguages.en);
-  (0, import_react14.useEffect)(() => {
+  const [language, setLanguage] = (0, import_react13.useState)("en");
+  const [translations, setTranslations] = (0, import_react13.useState)(availableLanguages.en);
+  (0, import_react13.useEffect)(() => {
     const lang = !!availableLanguages?.[locale] ? locale : getBrowserLanguage();
     ;
     setLanguage(lang);
@@ -3081,7 +3000,7 @@ var useMessages = (locale) => {
 var useMessages_default = useMessages;
 
 // src/Video.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var Video = ({
   videoId,
   publicKey,
@@ -3120,13 +3039,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;
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (events?.onVideoData && video) {
       events.onVideoData(video);
     }
   }, [video, events]);
   if (isLoading || !providedVideoData && !video) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative w-full h-full bg-[#151515]", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Loading, {}) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "relative w-full h-full bg-[#151515]", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Loading, {}) }) });
   }
   if (!isLoading && video && !activePlaylistHasUrl && events?.onEmptyPlaylists) {
     events.onEmptyPlaylists();
@@ -3139,8 +3058,8 @@ var Video = ({
     }
     const title = t(errorKey) || t("DEFAULT_ERROR");
     const description = t(`${errorKey}_DESCRIPTION`) || t("DEFAULT_ERROR_DESCRIPTION");
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative w-full h-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative w-full h-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         ErrorScreen,
         {
           title,
@@ -3151,12 +3070,12 @@ var Video = ({
     ] }) });
   }
   if (!activePlaylist || !activePlaylistHasUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative w-full h-full bg-[#151515]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Title, { title: video?.name || "" }),
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative w-full h-full bg-[#151515]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Title, { title: video?.name || "" }),
       children
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Player,
     {
       ...props,
@@ -3175,10 +3094,10 @@ var Video = ({
 };
 
 // src/Event.tsx
-var import_react16 = require("react");
+var import_react15 = require("react");
 var import_tailwind_merge4 = require("tailwind-merge");
 var import_react_query2 = require("@tanstack/react-query");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Event = ({
   publicKey,
   eventId,
@@ -3209,8 +3128,8 @@ var Event = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [activePlaylist, setActivePlaylist] = (0, import_react16.useState)();
-  const [activeVideoId, setActiveVideoId] = (0, import_react16.useState)();
+  const [activePlaylist, setActivePlaylist] = (0, import_react15.useState)();
+  const [activeVideoId, setActiveVideoId] = (0, import_react15.useState)();
   const videoIds = eventData?.videoIds ?? [];
   const {
     data: videosData,
@@ -3226,8 +3145,8 @@ var Event = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [loadingApisState, setLoadingApisState] = (0, import_react16.useState)(true);
-  (0, import_react16.useEffect)(() => {
+  const [loadingApisState, setLoadingApisState] = (0, import_react15.useState)(true);
+  (0, import_react15.useEffect)(() => {
     if (videosData !== void 0) {
       setLoadingApisState(false);
       const videosWithPlaylists = videosData.filter(
@@ -3261,12 +3180,12 @@ var Event = ({
     }
   }, [videosData, eventData]);
   const { t } = useMessages_default(locale);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (events?.onEventData && eventData) {
       events.onEventData(eventData);
     }
   }, [eventData, events]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (events?.onVideoData && activeVideoId && videosData) {
       const activeVideo = videosData.find((video) => video.id === activeVideoId);
       if (activeVideo) {
@@ -3274,10 +3193,10 @@ var Event = ({
       }
     }
   }, [activeVideoId, videosData, events]);
-  const [error, setError] = (0, import_react16.useState)(null);
-  const [loadingPlaylist, setLoadingPlaylist] = (0, import_react16.useState)(true);
+  const [error, setError] = (0, import_react15.useState)(null);
+  const [loadingPlaylist, setLoadingPlaylist] = (0, import_react15.useState)(true);
   const videosDataError = videosData?.some((video) => !!video.error);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (isEventLoading || videosIsLoading || loadingApisState) {
       return;
     }
@@ -3303,7 +3222,7 @@ var Event = ({
     videosIsLoading,
     loadingApisState
   ]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const eventLoadedWithNoVideos = !isEventLoading && eventData && eventData.videoIds && (!eventData.videoIds || eventData?.videoIds?.length === 0) && !loadingApisState;
     const allApisLoadedWithPotentialVideos = !isEventLoading && !videosIsLoading && eventData && !loadingApisState;
     if (eventLoadedWithNoVideos || allApisLoadedWithPotentialVideos) {
@@ -3313,7 +3232,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__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       ErrorScreen,
       {
         title,
@@ -3325,13 +3244,13 @@ var Event = ({
     events.onEmptyPlaylists();
   }
   if (loadingPlaylist) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full aspect-video bg-[#151515]", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Loading, {}) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative w-full aspect-video bg-[#151515]", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Loading, {}) }) });
   }
   if (activePlaylist && activeVideoId && videosData) {
     const activeVideo = videosData.find((video) => video.id === activeVideoId);
     console.log("activeVideo?.ad?.adTagUrl", activeVideo?.ad?.adTagUrl);
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_tailwind_merge4.twMerge)("", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: (0, import_tailwind_merge4.twMerge)("", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         Player,
         {
           ...props,
@@ -3346,7 +3265,7 @@ var Event = ({
           ...adsEnabled && activeVideo ? { imaConfig: { adTagUrl: activeVideo?.ad?.adTagUrl } } : {}
         }
       ) }),
-      !hideTitle && eventData && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      !hideTitle && eventData && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         TitleAndDescription,
         {
           title: eventData.title,
@@ -3358,7 +3277,7 @@ var Event = ({
     ] });
   }
   if (eventData) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       PreEvent,
       {
         event: eventData,
@@ -3380,12 +3299,12 @@ function PreEvent({
 }) {
   const date = new Date(event.startTime);
   const now = /* @__PURE__ */ new Date();
-  const [remainingTime, setRemainingTime] = (0, import_react16.useState)(
+  const [remainingTime, setRemainingTime] = (0, import_react15.useState)(
     date.getTime() - now.getTime()
   );
   const shouldBeStarted = remainingTime < 0;
   const { t } = useMessages_default(locale);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const interval = setInterval(() => {
       if (remainingTime < 0) {
         clearInterval(interval);
@@ -3395,17 +3314,17 @@ function PreEvent({
     }, 1e3);
     return () => clearInterval(interval);
   }, [date, remainingTime]);
-  const renderCountdown = (0, import_react16.useCallback)(() => {
+  const renderCountdown = (0, import_react15.useCallback)(() => {
     if (shouldBeStarted) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-flow-col gap-1 md:gap-5 text-center auto-cols-max", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-mono text-lg md:text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-flow-col gap-1 md:gap-5 text-center auto-cols-max", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-mono text-lg md:text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "span",
           {
             "aria-live": "polite",
@@ -3413,10 +3332,10 @@ function PreEvent({
             children: days.toString()
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("DAYS") })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("DAYS") })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "span",
           {
             style: { "--value": hours },
@@ -3425,10 +3344,10 @@ function PreEvent({
             children: hours?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("HOURS") })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("HOURS") })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "span",
           {
             style: { "--value": minutes },
@@ -3437,10 +3356,10 @@ function PreEvent({
             children: minutes?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("MINUTES") })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("MINUTES") })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "span",
           {
             style: { "--value": seconds },
@@ -3449,12 +3368,12 @@ function PreEvent({
             children: seconds?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("SECONDS") })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("SECONDS") })
       ] })
     ] });
   }, [remainingTime, shouldBeStarted, t]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: event?.posterUrl ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: event?.posterUrl ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "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",
@@ -3463,10 +3382,10 @@ function PreEvent({
           backgroundRepeat: "no-repeat",
           backgroundSize: "cover"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative z-10", children: renderCountdown() })
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative z-10", children: renderCountdown() })
       }
     ),
-    !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       TitleAndDescription,
       {
         title: event.title,
@@ -3475,18 +3394,18 @@ function PreEvent({
         locale
       }
     )
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "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__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative z-10", children: renderCountdown() })
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative z-10", children: renderCountdown() })
       }
     ),
-    !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       TitleAndDescription,
       {
         title: event.title,
@@ -3504,9 +3423,9 @@ var TitleAndDescription = ({
   locale = "en",
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_tailwind_merge4.twMerge)("mt-3 mb-6 m-event-details-ctn px-4 text-left w-full", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
-    startTime ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-xs md:text-base text-base-content/70 m-event-start-time", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: (0, import_tailwind_merge4.twMerge)("mt-3 mb-6 m-event-details-ctn px-4 text-left w-full", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
+    startTime ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("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",
@@ -3519,15 +3438,15 @@ var TitleAndDescription = ({
         minute: "2-digit"
       })
     ] }) : null,
-    description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-xs md:text-xs text-base-content/60 uppercase", children: description })
+    description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-xs md:text-xs text-base-content/60 uppercase", children: description })
   ] });
 };
 
 // src/CreativeWork.tsx
-var import_react17 = require("react");
+var import_react16 = require("react");
 var import_tailwind_merge5 = require("tailwind-merge");
 var import_react_query3 = require("@tanstack/react-query");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var CreativeWork = ({
   publicKey,
   creativeWorkId,
@@ -3558,9 +3477,9 @@ var CreativeWork = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [activePlaylist, setActivePlaylist] = (0, import_react17.useState)();
-  const [activeVideoId, setActiveVideoId] = (0, import_react17.useState)();
-  const [showCountDown, setShowCountDown] = (0, import_react17.useState)(false);
+  const [activePlaylist, setActivePlaylist] = (0, import_react16.useState)();
+  const [activeVideoId, setActiveVideoId] = (0, import_react16.useState)();
+  const [showCountDown, setShowCountDown] = (0, import_react16.useState)(false);
   const videoIds = creativeWorkData?.videoIds ?? [];
   const {
     data: videosData,
@@ -3576,8 +3495,8 @@ var CreativeWork = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [loadingApisState, setLoadingApisState] = (0, import_react17.useState)(true);
-  (0, import_react17.useEffect)(() => {
+  const [loadingApisState, setLoadingApisState] = (0, import_react16.useState)(true);
+  (0, import_react16.useEffect)(() => {
     if (videosData !== void 0) {
       setLoadingApisState(false);
       const videosWithPlaylists = videosData.filter(
@@ -3611,7 +3530,7 @@ var CreativeWork = ({
     }
   }, [videosData, creativeWorkData]);
   const { t } = useMessages_default(locale);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (events?.onCreativeWorkData && creativeWorkData) {
       events.onCreativeWorkData(creativeWorkData);
     }
@@ -3619,7 +3538,7 @@ var CreativeWork = ({
       setShowCountDown(true);
     }
   }, [creativeWorkData, events]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (events?.onVideoData && activeVideoId && videosData) {
       const activeVideo = videosData.find((video) => video.id === activeVideoId);
       if (activeVideo) {
@@ -3627,9 +3546,9 @@ var CreativeWork = ({
       }
     }
   }, [activeVideoId, videosData, events]);
-  const [error, setError] = (0, import_react17.useState)(null);
+  const [error, setError] = (0, import_react16.useState)(null);
   const videosDataError = videosData?.some((video) => !!video.error);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     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);
@@ -3643,7 +3562,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__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       ErrorScreen,
       {
         title,
@@ -3651,8 +3570,8 @@ var CreativeWork = ({
       }
     ) }) });
   }
-  const [loadingPlaylist, setLoadingPlaylist] = (0, import_react17.useState)(true);
-  (0, import_react17.useEffect)(() => {
+  const [loadingPlaylist, setLoadingPlaylist] = (0, import_react16.useState)(true);
+  (0, import_react16.useEffect)(() => {
     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);
@@ -3673,10 +3592,10 @@ var CreativeWork = ({
     events
   ]);
   if (isCreativeWorkLoading || videosIsLoading || loadingApisState) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative w-full aspect-video bg-[#151515]", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Loading, {}) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full aspect-video bg-[#151515]", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Loading, {}) }) });
   }
   if (showCountDown && creativeWorkData) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative w-full h-full bg-base-200 text-base-content flex justify-center items-center flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full bg-base-200 text-base-content flex justify-center items-center flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       PreCreativeWork,
       {
         creativeWork: creativeWorkData,
@@ -3689,8 +3608,8 @@ var CreativeWork = ({
   }
   if (activeVideoId && activePlaylist && !loadingPlaylist) {
     const activeVideo = videosData?.find((video) => video.id === activeVideoId);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative w-full h-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative w-full h-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         Player,
         {
           ...props,
@@ -3707,7 +3626,7 @@ var CreativeWork = ({
           ...adsEnabled && activeVideo?.ad?.adTagUrl ? { imaConfig: { adTagUrl: activeVideo?.ad?.adTagUrl } } : {}
         }
       ),
-      !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         TitleAndDescription2,
         {
           title: creativeWorkData?.title || "",
@@ -3720,7 +3639,7 @@ var CreativeWork = ({
     ] }) });
   }
   if (loadingPlaylist) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative w-full aspect-video bg-[#151515]", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Loading, {}) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full aspect-video bg-[#151515]", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Loading, {}) }) });
   }
   return null;
 };
@@ -3733,12 +3652,12 @@ function PreCreativeWork({
 }) {
   const date = new Date(creativeWork.releaseTime);
   const now = /* @__PURE__ */ new Date();
-  const [remainingTime, setRemainingTime] = (0, import_react17.useState)(
+  const [remainingTime, setRemainingTime] = (0, import_react16.useState)(
     date.getTime() - now.getTime()
   );
   const shouldBeStarted = remainingTime < 0;
   const { t } = useMessages_default(locale);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const interval = setInterval(() => {
       if (remainingTime < 0) {
         clearInterval(interval);
@@ -3752,15 +3671,15 @@ function PreCreativeWork({
   }, [date, remainingTime]);
   const renderCountdown = () => {
     if (shouldBeStarted) {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "grid grid-flow-col md:gap-5 gap-1 text-center auto-cols-max", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-mono text-lg md:text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-flow-col md:gap-5 gap-1 text-center auto-cols-max", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-mono text-lg md:text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "span",
           {
             "aria-live": "polite",
@@ -3768,10 +3687,10 @@ function PreCreativeWork({
             children: days.toString()
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("DAYS") })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("DAYS") })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "span",
           {
             style: { "--value": hours },
@@ -3780,10 +3699,10 @@ function PreCreativeWork({
             children: hours?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("HOURS") })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("HOURS") })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "span",
           {
             style: { "--value": minutes },
@@ -3792,10 +3711,10 @@ function PreCreativeWork({
             children: minutes?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("MINUTES") })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("MINUTES") })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "span",
           {
             style: { "--value": seconds },
@@ -3804,12 +3723,12 @@ function PreCreativeWork({
             children: seconds?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("SECONDS") })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("SECONDS") })
       ] })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "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",
@@ -3817,12 +3736,12 @@ function PreCreativeWork({
           backgroundImage: backgroundImageUrl ? `url(${backgroundImageUrl})` : ""
         },
         children: [
-          backgroundImageUrl && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute inset-0 bg-black bg-opacity-40" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative z-10", children: renderCountdown() })
+          backgroundImageUrl && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute inset-0 bg-black bg-opacity-40" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative z-10", children: renderCountdown() })
         ]
       }
     ),
-    !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       TitleAndDescription2,
       {
         title: creativeWork.title,
@@ -3840,9 +3759,9 @@ var TitleAndDescription2 = ({
   locale = "en",
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: (0, import_tailwind_merge5.twMerge)("mt-3 mb-6 m-event-details-ctn px-4 text-left w-full", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
-    releaseTime ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "text-sm md:text-base text-base-content/70 m-event-start-time", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_tailwind_merge5.twMerge)("mt-3 mb-6 m-event-details-ctn px-4 text-left w-full", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
+    releaseTime ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("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",
@@ -3855,13 +3774,13 @@ var TitleAndDescription2 = ({
         minute: "2-digit"
       })
     ] }) : null,
-    description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
+    description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
   ] });
 };
 
 // src/QueryProvider.tsx
 var import_react_query4 = require("@tanstack/react-query");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var queryClient = new import_react_query4.QueryClient({
   defaultOptions: {
     queries: {
@@ -3875,7 +3794,7 @@ var queryClient = new import_react_query4.QueryClient({
   }
 });
 var QueryProvider = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_query4.QueryClientProvider, { client: queryClient, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_query4.QueryClientProvider, { client: queryClient, children });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {