@dialtribe/react-sdk 0.1.0-alpha.8 → 0.1.2

package/dist/{broadcast-player.js → dialtribe-player.js}

@@ -8,9 +8,9 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var ReactPlayer__default = /*#__PURE__*/_interopDefault(ReactPlayer);
 
-// src/context/DialTribeProvider.tsx
-var DialTribeContext = react.createContext(null);
-function DialTribeProvider({
+// src/context/DialtribeProvider.tsx
+var DialtribeContext = react.createContext(null);
+function DialtribeProvider({
   sessionToken: initialToken,
   onTokenRefresh,
   onTokenExpired,
@@ -46,19 +46,19 @@ function DialTribeProvider({
     markExpired,
     apiBaseUrl
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(DialTribeContext.Provider, { value, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(DialtribeContext.Provider, { value, children });
 }
-function useDialTribe() {
-  const context = react.useContext(DialTribeContext);
+function useDialtribe() {
+  const context = react.useContext(DialtribeContext);
   if (!context) {
     throw new Error(
-      'useDialTribe must be used within a DialTribeProvider. Wrap your app with <DialTribeProvider sessionToken="sess_xxx">...</DialTribeProvider>'
+      'useDialtribe must be used within a DialtribeProvider. Wrap your app with <DialtribeProvider sessionToken="sess_xxx">...</DialtribeProvider>'
     );
   }
   return context;
 }
 
-// src/client/DialTribeClient.ts
+// src/client/DialtribeClient.ts
 function getDefaultApiBaseUrl() {
   if (typeof process !== "undefined" && process.env?.NEXT_PUBLIC_DIALTRIBE_API_URL) {
     return process.env.NEXT_PUBLIC_DIALTRIBE_API_URL;
@@ -72,18 +72,19 @@ function getEndpoints(baseUrl = DIALTRIBE_API_BASE) {
     broadcast: (id) => `${baseUrl}/broadcasts/${id}`,
     contentPlay: `${baseUrl}/content/play`,
     presignedUrl: `${baseUrl}/media/presigned-url`,
-    sessionStart: `${baseUrl}/session/start`,
-    sessionPing: `${baseUrl}/session/ping`
+    audienceStart: `${baseUrl}/audiences/start`,
+    audiencePing: `${baseUrl}/audiences/ping`,
+    sessionPing: `${baseUrl}/sessions/ping`
   };
 }
 var ENDPOINTS = getEndpoints();
-var DialTribeClient = class {
+var DialtribeClient = class {
   constructor(config) {
     this.config = config;
     this.endpoints = config.apiBaseUrl ? getEndpoints(config.apiBaseUrl) : ENDPOINTS;
   }
   /**
-   * Make an authenticated request to DialTribe API
+   * Make an authenticated request to Dialtribe API
    *
    * Automatically:
    * - Adds Authorization header with session token
@@ -197,7 +198,7 @@ var DialTribeClient = class {
    * @returns audienceId and optional resumePosition
    */
   async startSession(params) {
-    const response = await this.fetch(this.endpoints.sessionStart, {
+    const response = await this.fetch(this.endpoints.audienceStart, {
       method: "POST",
       body: JSON.stringify(params)
     });
@@ -216,7 +217,7 @@ var DialTribeClient = class {
    * - 3: UNMOUNT
    */
   async sendSessionPing(params) {
-    const response = await this.fetch(this.endpoints.sessionPing, {
+    const response = await this.fetch(this.endpoints.audiencePing, {
       method: "POST",
       body: JSON.stringify(params)
     });
@@ -748,7 +749,7 @@ function getErrorMessage(error) {
   }
   return "Unable to play media. Please try refreshing the page or contact support if the problem persists.";
 }
-function BroadcastPlayer({
+function DialtribePlayer({
   broadcast,
   appId,
   contentId,
@@ -759,18 +760,18 @@ function BroadcastPlayer({
   className = "",
   enableKeyboardShortcuts = false
 }) {
-  const { sessionToken, setSessionToken, markExpired, apiBaseUrl } = useDialTribe();
+  const { sessionToken, setSessionToken, markExpired, apiBaseUrl } = useDialtribe();
   const clientRef = react.useRef(null);
   if (!clientRef.current && sessionToken) {
-    clientRef.current = new DialTribeClient({
+    clientRef.current = new DialtribeClient({
       sessionToken,
       apiBaseUrl,
       onTokenRefresh: (newToken, expiresAt) => {
-        debug.log(`[DialTribeClient] Token refreshed, expires at ${expiresAt}`);
+        debug.log(`[DialtribeClient] Token refreshed, expires at ${expiresAt}`);
         setSessionToken(newToken, expiresAt);
       },
       onTokenExpired: () => {
-        debug.error("[DialTribeClient] Token expired");
+        debug.error("[DialtribeClient] Token expired");
         markExpired();
       }
     });
@@ -781,7 +782,9 @@ function BroadcastPlayer({
   const playerRef = react.useRef(null);
   const transcriptContainerRef = react.useRef(null);
   const activeWordRef = react.useRef(null);
-  const [audioElement, setAudioElement] = react.useState(null);
+  const [audioElement, setAudioElement] = react.useState(
+    null
+  );
   const [playing, setPlaying] = react.useState(false);
   const [played, setPlayed] = react.useState(0);
   const [duration, setDuration] = react.useState(0);
@@ -793,7 +796,9 @@ function BroadcastPlayer({
   const [hasEnded, setHasEnded] = react.useState(false);
   const [hasStreamEnded, setHasStreamEnded] = react.useState(false);
   const [showTranscript, setShowTranscript] = react.useState(false);
-  const [transcriptData, setTranscriptData] = react.useState(null);
+  const [transcriptData, setTranscriptData] = react.useState(
+    null
+  );
   const [currentTime, setCurrentTime] = react.useState(0);
   const [isLoadingTranscript, setIsLoadingTranscript] = react.useState(false);
   const [isLoadingVideo, setIsLoadingVideo] = react.useState(true);
@@ -821,7 +826,9 @@ function BroadcastPlayer({
   const refreshPresignedUrl = react.useCallback(
     async (fileType) => {
       if (!broadcast.hash || isRefreshingUrl.current || !client) {
-        debug.log("[URL Refresh] Skipping refresh - no hash, already refreshing, or no client");
+        debug.log(
+          "[URL Refresh] Skipping refresh - no hash, already refreshing, or no client"
+        );
         return false;
       }
       if (fileType === "hls") {
@@ -829,14 +836,18 @@ function BroadcastPlayer({
         return false;
       }
       isRefreshingUrl.current = true;
-      debug.log(`[URL Refresh] Refreshing ${fileType} URL for broadcast ${broadcast.id}`);
+      debug.log(
+        `[URL Refresh] Refreshing ${fileType} URL for broadcast ${broadcast.id}`
+      );
       try {
         const data = await client.refreshPresignedUrl({
           broadcastId: broadcast.id,
           hash: broadcast.hash,
           fileType
         });
-        debug.log(`[URL Refresh] Successfully refreshed URL, expires at ${data.expiresAt}`);
+        debug.log(
+          `[URL Refresh] Successfully refreshed URL, expires at ${data.expiresAt}`
+        );
         setCurrentPlaybackInfo({ url: data.url, type: fileType });
         setUrlExpiresAt(new Date(data.expiresAt));
         if (errorMessage.includes("URL") || errorMessage.includes("session") || errorMessage.includes("refresh")) {
@@ -851,7 +862,9 @@ function BroadcastPlayer({
         }
         debug.error("[URL Refresh] Failed to refresh presigned URL:", error);
         setHasError(true);
-        setErrorMessage("Unable to refresh media URL. The session may have expired.");
+        setErrorMessage(
+          "Unable to refresh media URL. The session may have expired."
+        );
         if (onError && error instanceof Error) {
           onError(error);
         }
@@ -871,7 +884,8 @@ function BroadcastPlayer({
   };
   const initializeTrackingSession = react.useCallback(async () => {
     if (!contentId || !appId || !client) return;
-    if (currentPlaybackInfo?.type === "hls" && broadcast.broadcastStatus === 1) return;
+    if (currentPlaybackInfo?.type === "hls" && broadcast.broadcastStatus === 1)
+      return;
     if (hasInitializedSession.current) return;
     hasInitializedSession.current = true;
     try {
@@ -894,7 +908,9 @@ function BroadcastPlayer({
       setAudienceId(data.audienceId);
       if (data.resumePosition && data.resumePosition > 0 && audioElement) {
         audioElement.currentTime = data.resumePosition;
-        debug.log(`[Audience Tracking] Resumed playback at ${data.resumePosition}s`);
+        debug.log(
+          `[Audience Tracking] Resumed playback at ${data.resumePosition}s`
+        );
       }
       debug.log("[Audience Tracking] Session initialized:", data.audienceId);
     } catch (error) {
@@ -903,7 +919,19 @@ function BroadcastPlayer({
         onError(error);
       }
     }
-  }, [contentId, appId, broadcast.id, broadcast.broadcastStatus, foreignId, foreignTier, sessionId, currentPlaybackInfo?.type, audioElement, client, onError]);
+  }, [
+    contentId,
+    appId,
+    broadcast.id,
+    broadcast.broadcastStatus,
+    foreignId,
+    foreignTier,
+    sessionId,
+    currentPlaybackInfo?.type,
+    audioElement,
+    client,
+    onError
+  ]);
   const sendTrackingPing = react.useCallback(
     async (eventType) => {
       if (!audienceId || !sessionId || !client) return;
@@ -927,15 +955,25 @@ function BroadcastPlayer({
         return { url: broadcast.hlsPlaylistUrl, type: "hls" };
       }
       if (broadcast.hash && broadcast.app?.s3Hash) {
-        const hlsUrl = buildBroadcastCdnUrl(broadcast.app.s3Hash, broadcast.hash, "index.m3u8");
+        const hlsUrl = buildBroadcastCdnUrl(
+          broadcast.app.s3Hash,
+          broadcast.hash,
+          "index.m3u8"
+        );
         return { url: hlsUrl, type: "hls" };
       }
     }
     if (broadcast.recordingMp4Url && broadcast.isVideo && broadcast.hash) {
-      return { url: buildPlaybackUrl(broadcast.id, broadcast.hash), type: "mp4" };
+      return {
+        url: buildPlaybackUrl(broadcast.id, broadcast.hash),
+        type: "mp4"
+      };
     }
     if (broadcast.recordingMp3Url && broadcast.hash) {
-      return { url: buildPlaybackUrl(broadcast.id, broadcast.hash), type: "mp3" };
+      return {
+        url: buildPlaybackUrl(broadcast.id, broadcast.hash),
+        type: "mp3"
+      };
     }
     if (broadcast.hlsPlaylistUrl) {
       return { url: broadcast.hlsPlaylistUrl, type: "hls" };
@@ -950,7 +988,9 @@ function BroadcastPlayer({
       if (info && (info.type === "mp4" || info.type === "mp3")) {
         const expiresAt = new Date(Date.now() + URL_EXPIRATION_MS);
         setUrlExpiresAt(expiresAt);
-        debug.log(`[URL Refresh] Initial ${info.type} URL expires at ${expiresAt.toISOString()}`);
+        debug.log(
+          `[URL Refresh] Initial ${info.type} URL expires at ${expiresAt.toISOString()}`
+        );
       }
       if (info) {
         setPlaying(true);
@@ -989,12 +1029,34 @@ function BroadcastPlayer({
       setAudioElement(null);
       setPlaying(true);
     }
-  }, [broadcast.broadcastStatus, broadcast.recordingMp3Url, broadcast.mp3Size, broadcast.hash, broadcast.id, currentPlaybackInfo]);
+  }, [
+    broadcast.broadcastStatus,
+    broadcast.recordingMp3Url,
+    broadcast.mp3Size,
+    broadcast.hash,
+    broadcast.id,
+    currentPlaybackInfo
+  ]);
   const playbackUrl = currentPlaybackInfo?.url || null;
   const playbackType = currentPlaybackInfo?.type || null;
   const isAudioOnly = playbackType === "mp3" || !broadcast.isVideo && playbackType !== "mp4";
   const isLiveStream = broadcast.broadcastStatus === 1 && playbackType === "hls" && !hasStreamEnded;
   const wasLiveStream = initialPlaybackTypeRef.current === "hls";
+  const playerConfig = react.useMemo(
+    () => ({
+      file: {
+        forceHLS: playbackType === "hls",
+        hlsOptions: isLiveStream ? {
+          maxLoadingDelay: 10,
+          minAutoBitrate: 0,
+          lowLatencyMode: true,
+          enableWorker: true
+        } : {}
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    }),
+    [playbackType, isLiveStream]
+  );
   const formatTimestamp = (seconds) => {
     if (!seconds || isNaN(seconds) || !isFinite(seconds)) return "00:00:00";
     const hrs = Math.floor(seconds / 3600);
@@ -1065,7 +1127,7 @@ function BroadcastPlayer({
           duration: Math.floor(duration || 0)
         };
         const headers = {
-          "Authorization": `Bearer ${sessionToken}`,
+          Authorization: `Bearer ${sessionToken}`,
           "Content-Type": "application/json"
         };
         fetch(ENDPOINTS.sessionPing, {
@@ -1083,7 +1145,9 @@ function BroadcastPlayer({
       setIsLoadingTranscript(true);
       fetch(broadcast.transcriptUrl).then((res) => {
         if (!res.ok) {
-          throw new Error(`Failed to fetch transcript: ${res.status} ${res.statusText}`);
+          throw new Error(
+            `Failed to fetch transcript: ${res.status} ${res.statusText}`
+          );
         }
         return res.json();
       }).then((data) => {
@@ -1215,7 +1279,7 @@ function BroadcastPlayer({
         setAudioElement(internalPlayer);
       }
     } catch (error) {
-      debug.error("[BroadcastPlayer] Error getting internal player:", error);
+      debug.error("[DialtribePlayer] Error getting internal player:", error);
     }
   };
   react.useEffect(() => {
@@ -1229,7 +1293,17 @@ function BroadcastPlayer({
       return false;
     };
     if (!findAudioElement()) {
-      const retryIntervals = [100, 300, 500, 1e3, 1500, 2e3, 3e3, 4e3, 5e3];
+      const retryIntervals = [
+        100,
+        300,
+        500,
+        1e3,
+        1500,
+        2e3,
+        3e3,
+        4e3,
+        5e3
+      ];
       const timeouts = retryIntervals.map(
         (delay) => setTimeout(() => {
           findAudioElement();
@@ -1287,16 +1361,23 @@ function BroadcastPlayer({
     debug.error("Media playback error:", error);
     const isPotentialExpiration = error?.code === HTTP_STATUS.FORBIDDEN || error?.status === HTTP_STATUS.FORBIDDEN || error?.statusCode === HTTP_STATUS.FORBIDDEN || error?.code === HTTP_STATUS.NOT_FOUND || error?.status === HTTP_STATUS.NOT_FOUND || error?.statusCode === HTTP_STATUS.NOT_FOUND || error?.message?.includes("403") || error?.message?.includes("404") || error?.message?.includes("Forbidden") || error?.message?.toLowerCase().includes("network") || error?.type === "network" || error?.message?.includes("MEDIA_ERR_SRC_NOT_SUPPORTED");
     if (isPotentialExpiration && currentPlaybackInfo?.type && !isRefreshingUrl.current) {
-      debug.log("[Player Error] Detected potential URL expiration, attempting refresh...");
+      debug.log(
+        "[Player Error] Detected potential URL expiration, attempting refresh..."
+      );
       const currentPosition = audioElement?.currentTime || 0;
       const wasPlaying = playing;
       const fileType = currentPlaybackInfo.type;
       if (fileType !== "mp4" && fileType !== "mp3" && fileType !== "hls") {
-        debug.error("[Player Error] Invalid file type, cannot refresh:", fileType);
+        debug.error(
+          "[Player Error] Invalid file type, cannot refresh:",
+          fileType
+        );
       } else {
         const refreshed = await refreshPresignedUrl(fileType);
         if (refreshed) {
-          debug.log("[Player Error] URL refreshed successfully, resuming playback");
+          debug.log(
+            "[Player Error] URL refreshed successfully, resuming playback"
+          );
           setTimeout(() => {
             if (audioElement && currentPosition > 0) {
               audioElement.currentTime = currentPosition;
@@ -1344,7 +1425,10 @@ function BroadcastPlayer({
     if (!enableKeyboardShortcuts) return;
     const seekBy = (seconds) => {
       if (!audioElement || duration <= 0) return;
-      const newTime = Math.max(0, Math.min(duration, audioElement.currentTime + seconds));
+      const newTime = Math.max(
+        0,
+        Math.min(duration, audioElement.currentTime + seconds)
+      );
       audioElement.currentTime = newTime;
       setPlayed(newTime / duration);
     };
@@ -1412,7 +1496,17 @@ function BroadcastPlayer({
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [enableKeyboardShortcuts, audioElement, duration, playing, muted, isAudioOnly, handlePlayPause, toggleMute, toggleFullscreen]);
+  }, [
+    enableKeyboardShortcuts,
+    audioElement,
+    duration,
+    playing,
+    muted,
+    isAudioOnly,
+    handlePlayPause,
+    toggleMute,
+    toggleFullscreen
+  ]);
   if (currentPlaybackInfo !== null && !playbackUrl) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white dark:bg-zinc-900 rounded-lg p-6 max-w-md w-full mx-4 border border-gray-200 dark:border-zinc-800", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold text-black dark:text-white mb-4", children: "Broadcast Unavailable" }),
@@ -1423,452 +1517,914 @@ function BroadcastPlayer({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { variant: "white", text: "Loading..." }) });
   }
   const hasTranscript = broadcast.transcriptStatus === 2 && transcriptData && (transcriptData.segments && transcriptData.segments.some((s) => s.words && s.words.length > 0) || transcriptData.words && transcriptData.words.length > 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `bg-black rounded-lg shadow-2xl w-full max-h-full flex flex-col overflow-hidden ${className}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-zinc-900/50 backdrop-blur-sm border-b border-zinc-800 px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 flex justify-between items-center rounded-t-lg shrink-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-white", children: broadcast.streamKeyRecord?.foreignName || "Broadcast" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-400", children: [
-          broadcast.isVideo ? "Video" : "Audio",
-          " \u2022",
-          " ",
-          broadcast.broadcastStatus === 1 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 font-semibold", children: "\u{1F534} LIVE" }) : playbackType === "hls" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 font-semibold", children: "OFFLINE" }) : formatTime(duration)
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: renderClipCreator && playbackType !== "hls" && appId && contentId && duration > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          onClick: () => setShowClipCreator(true),
-          className: "px-3 md:px-4 py-1.5 md:py-2 bg-blue-600 hover:bg-blue-700 text-white text-xs md:text-sm font-medium rounded-lg transition-colors flex items-center gap-1 md:gap-2",
-          title: "Create a clip from this broadcast",
-          "aria-label": "Create clip from broadcast",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "w-3 h-3 md:w-4 md:h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" }),
-              /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Create Clip" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sm:hidden", children: "Clip" })
-          ]
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row flex-1 min-h-0 overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 md:shrink md:flex-1 flex flex-col overflow-hidden", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative ${isAudioOnly ? "bg-linear-to-br from-zinc-900 via-zinc-800 to-zinc-900 flex items-stretch" : "bg-black"}`, children: [
-          isAudioOnly ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative cursor-pointer w-full flex flex-col", onClick: handleVideoClick, children: !hasError ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full relative", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(AudioWaveform, { audioElement, isPlaying: isLiveStream ? true : playing, isLive: isLiveStream }),
-            isLoadingVideo && !hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/90 flex items-center justify-center z-20", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { variant: "white" }) }),
-            hasEnded && !wasLiveStream && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/50 flex items-center justify-center z-20 pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  handleRestart();
-                },
-                className: "bg-white hover:bg-blue-500 text-black hover:text-white font-semibold py-4 px-8 rounded-full transition-all transform hover:scale-105 flex items-center gap-3",
-                "aria-label": "Restart playback from beginning",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z", clipRule: "evenodd" }) }),
-                  "Restart"
-                ]
-              }
-            ) })
-          ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center max-w-md px-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-6xl mb-4", children: "\u26A0\uFE0F" }),
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-white mb-3", children: "Playback Error" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-300 text-sm mb-6", children: errorMessage }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                onClick: handleRetry,
-                className: "px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors inline-flex items-center gap-2",
-                "aria-label": "Retry playback",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }),
-                  "Retry"
-                ]
-              }
-            )
-          ] }) }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aspect-video relative", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: handleVideoClick, className: "cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(
-              ReactPlayer__default.default,
-              {
-                ref: playerRef,
-                src: playbackUrl || void 0,
-                playing,
-                volume,
-                muted,
-                width: "100%",
-                height: "100%",
-                crossOrigin: "anonymous",
-                onReady: handlePlayerReady,
-                onTimeUpdate: handleTimeUpdate,
-                onLoadedMetadata: handleLoadedMetadata,
-                onPlay: handlePlay,
-                onPause: handlePause,
-                onEnded: handleEnded,
-                onError: handleError,
-                style: { backgroundColor: "#000" }
-              },
-              playbackUrl || "no-url"
-            ) }),
-            isLoadingVideo && !hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/90 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { variant: "white" }) }),
-            hasEnded && !hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/50 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  handleRestart();
-                },
-                className: "bg-white hover:bg-blue-500 text-black hover:text-white font-semibold py-4 px-8 rounded-full transition-all transform hover:scale-105 flex items-center gap-3",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z", clipRule: "evenodd" }) }),
-                  "Restart"
-                ]
-              }
-            ) }),
-            hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/90 flex items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center max-w-md", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-6xl mb-4", children: "\u26A0\uFE0F" }),
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-white mb-3", children: "Playback Error" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-300 text-sm mb-6", children: errorMessage }),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  onClick: handleRetry,
-                  className: "px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors inline-flex items-center gap-2",
-                  "aria-label": "Retry playback",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }),
-                    "Retry"
-                  ]
-                }
-              )
-            ] }) })
+  const playerContent = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `bg-black rounded-lg shadow-2xl w-full max-h-full flex flex-col overflow-hidden ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-zinc-900/50 backdrop-blur-sm border-b border-zinc-800 px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 flex justify-between items-center rounded-t-lg shrink-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-white", children: broadcast.streamKeyRecord?.foreignName || "Broadcast" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-400", children: [
+              broadcast.isVideo ? "Video" : "Audio",
+              " \u2022",
+              " ",
+              broadcast.broadcastStatus === 1 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 font-semibold", children: "\u{1F534} LIVE" }) : playbackType === "hls" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 font-semibold", children: "OFFLINE" }) : formatTime(duration)
+            ] })
           ] }),
-          isAudioOnly && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-            ReactPlayer__default.default,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: renderClipCreator && playbackType !== "hls" && appId && contentId && duration > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
             {
-              ref: playerRef,
-              src: playbackUrl || void 0,
-              playing,
-              volume,
-              muted,
-              width: "0",
-              height: "0",
-              crossOrigin: "anonymous",
-              onReady: handlePlayerReady,
-              onTimeUpdate: handleTimeUpdate,
-              onLoadedMetadata: handleLoadedMetadata,
-              onPlay: handlePlay,
-              onPause: handlePause,
-              onEnded: handleEnded,
-              onError: handleError
-            },
-            playbackUrl || "no-url"
+              onClick: () => setShowClipCreator(true),
+              className: "px-3 md:px-4 py-1.5 md:py-2 bg-blue-600 hover:bg-blue-700 text-white text-xs md:text-sm font-medium rounded-lg transition-colors flex items-center gap-1 md:gap-2",
+              title: "Create a clip from this broadcast",
+              "aria-label": "Create clip from broadcast",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "svg",
+                  {
+                    className: "w-3 h-3 md:w-4 md:h-4",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Create Clip" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sm:hidden", children: "Clip" })
+              ]
+            }
           ) })
         ] }),
-        !hasError && !isLiveStream && (wasLiveStream ? parseInt(broadcast.mp3Size || "0") > 0 || parseInt(broadcast.mp4Size || "0") > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-zinc-900/50 backdrop-blur-sm px-4 md:px-6 py-3 md:py-4 rounded-b-lg", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row flex-1 min-h-0 overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 md:shrink md:flex-1 flex flex-col overflow-hidden", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
               {
-                type: "range",
-                min: 0,
-                max: 0.999999,
-                step: "any",
-                value: played || 0,
-                onMouseDown: handleSeekMouseDown,
-                onMouseUp: handleSeekMouseUp,
-                onTouchStart: handleSeekTouchStart,
-                onTouchEnd: handleSeekTouchEnd,
-                onChange: handleSeekChange,
-                className: "w-full h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer slider",
-                "aria-label": "Seek position",
-                "aria-valuemin": 0,
-                "aria-valuemax": duration,
-                "aria-valuenow": played * duration,
-                "aria-valuetext": `${formatTime(played * duration)} of ${formatTime(duration)}`,
-                role: "slider"
+                className: `relative ${isAudioOnly ? "bg-linear-to-br from-zinc-900 via-zinc-800 to-zinc-900 flex items-stretch" : "bg-black"}`,
+                children: [
+                  isAudioOnly ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "relative cursor-pointer w-full flex flex-col",
+                      onClick: handleVideoClick,
+                      children: !hasError ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full relative", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          AudioWaveform,
+                          {
+                            audioElement,
+                            isPlaying: isLiveStream ? true : playing,
+                            isLive: isLiveStream
+                          }
+                        ),
+                        isLoadingVideo && !hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/90 flex items-center justify-center z-20", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { variant: "white" }) }),
+                        hasEnded && !wasLiveStream && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/50 flex items-center justify-center z-20 pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                          "button",
+                          {
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleRestart();
+                            },
+                            className: "bg-white hover:bg-blue-500 text-black hover:text-white font-semibold py-4 px-8 rounded-full transition-all transform hover:scale-105 flex items-center gap-3",
+                            "aria-label": "Restart playback from beginning",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "svg",
+                                {
+                                  className: "w-6 h-6",
+                                  fill: "currentColor",
+                                  viewBox: "0 0 20 20",
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    "path",
+                                    {
+                                      fillRule: "evenodd",
+                                      d: "M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z",
+                                      clipRule: "evenodd"
+                                    }
+                                  )
+                                }
+                              ),
+                              "Restart"
+                            ]
+                          }
+                        ) })
+                      ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center max-w-md px-4", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-6xl mb-4", children: "\u26A0\uFE0F" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-white mb-3", children: "Playback Error" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-300 text-sm mb-6", children: errorMessage }),
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          "button",
+                          {
+                            onClick: handleRetry,
+                            className: "px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors inline-flex items-center gap-2",
+                            "aria-label": "Retry playback",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "svg",
+                                {
+                                  className: "w-5 h-5",
+                                  fill: "none",
+                                  stroke: "currentColor",
+                                  viewBox: "0 0 24 24",
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    "path",
+                                    {
+                                      strokeLinecap: "round",
+                                      strokeLinejoin: "round",
+                                      strokeWidth: 2,
+                                      d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                                    }
+                                  )
+                                }
+                              ),
+                              "Retry"
+                            ]
+                          }
+                        )
+                      ] }) })
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aspect-video relative", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: handleVideoClick, className: "cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      ReactPlayer__default.default,
+                      {
+                        ref: playerRef,
+                        src: playbackUrl || void 0,
+                        playing,
+                        volume,
+                        muted,
+                        width: "100%",
+                        height: "100%",
+                        crossOrigin: "anonymous",
+                        config: playerConfig,
+                        onReady: handlePlayerReady,
+                        onTimeUpdate: handleTimeUpdate,
+                        onLoadedMetadata: handleLoadedMetadata,
+                        onPlay: handlePlay,
+                        onPause: handlePause,
+                        onEnded: handleEnded,
+                        onError: handleError,
+                        style: { backgroundColor: "#000" }
+                      },
+                      playbackUrl || "no-url"
+                    ) }),
+                    isLoadingVideo && !hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/90 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { variant: "white" }) }),
+                    hasEnded && !hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/50 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "button",
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleRestart();
+                        },
+                        className: "bg-white hover:bg-blue-500 text-black hover:text-white font-semibold py-4 px-8 rounded-full transition-all transform hover:scale-105 flex items-center gap-3",
+                        "aria-label": "Restart playback from beginning",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "svg",
+                            {
+                              className: "w-6 h-6",
+                              fill: "currentColor",
+                              viewBox: "0 0 20 20",
+                              "aria-hidden": "true",
+                              children: /* @__PURE__ */ jsxRuntime.jsx(
+                                "path",
+                                {
+                                  fillRule: "evenodd",
+                                  d: "M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z",
+                                  clipRule: "evenodd"
+                                }
+                              )
+                            }
+                          ),
+                          "Restart"
+                        ]
+                      }
+                    ) }),
+                    hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/90 flex items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center max-w-md", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-6xl mb-4", children: "\u26A0\uFE0F" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-white mb-3", children: "Playback Error" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-300 text-sm mb-6", children: errorMessage }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          onClick: handleRetry,
+                          className: "px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors inline-flex items-center gap-2",
+                          "aria-label": "Retry playback",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "svg",
+                              {
+                                className: "w-5 h-5",
+                                fill: "none",
+                                stroke: "currentColor",
+                                viewBox: "0 0 24 24",
+                                children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  "path",
+                                  {
+                                    strokeLinecap: "round",
+                                    strokeLinejoin: "round",
+                                    strokeWidth: 2,
+                                    d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                                  }
+                                )
+                              }
+                            ),
+                            "Retry"
+                          ]
+                        }
+                      )
+                    ] }) })
+                  ] }),
+                  isAudioOnly && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    ReactPlayer__default.default,
+                    {
+                      ref: playerRef,
+                      src: playbackUrl || void 0,
+                      playing,
+                      volume,
+                      muted,
+                      width: "0",
+                      height: "0",
+                      crossOrigin: "anonymous",
+                      config: playerConfig,
+                      onReady: handlePlayerReady,
+                      onTimeUpdate: handleTimeUpdate,
+                      onLoadedMetadata: handleLoadedMetadata,
+                      onPlay: handlePlay,
+                      onPause: handlePause,
+                      onEnded: handleEnded,
+                      onError: handleError
+                    },
+                    playbackUrl || "no-url"
+                  ) })
+                ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime((played || 0) * duration) }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(duration) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: handlePlayPause,
-                  className: "text-white hover:text-blue-400 transition-colors",
-                  title: playing ? "Pause" : "Play",
-                  "aria-label": playing ? "Pause" : "Play",
-                  "aria-pressed": playing,
-                  children: playing ? /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z", clipRule: "evenodd" }) }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z", clipRule: "evenodd" }) })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            !hasError && !isLiveStream && (wasLiveStream ? parseInt(broadcast.mp3Size || "0") > 0 || parseInt(broadcast.mp4Size || "0") > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-zinc-900/50 backdrop-blur-sm px-4 md:px-6 py-3 md:py-4 rounded-b-lg", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+                  "input",
                   {
-                    onClick: toggleMute,
-                    className: "text-white hover:text-blue-400 transition-colors",
-                    title: muted ? "Unmute" : "Mute",
-                    "aria-label": muted ? "Unmute" : "Mute",
-                    "aria-pressed": muted,
-                    children: muted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM12.293 7.293a1 1 0 011.414 0L15 8.586l1.293-1.293a1 1 0 111.414 1.414L16.414 10l1.293 1.293a1 1 0 01-1.414 1.414L15 11.414l-1.293 1.293a1 1 0 01-1.414-1.414L13.586 10l-1.293-1.293a1 1 0 010-1.414z", clipRule: "evenodd" }) }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z", clipRule: "evenodd" }) })
+                    type: "range",
+                    min: 0,
+                    max: 0.999999,
+                    step: "any",
+                    value: played || 0,
+                    onMouseDown: handleSeekMouseDown,
+                    onMouseUp: handleSeekMouseUp,
+                    onTouchStart: handleSeekTouchStart,
+                    onTouchEnd: handleSeekTouchEnd,
+                    onChange: handleSeekChange,
+                    className: "w-full h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer slider",
+                    "aria-label": "Seek position",
+                    "aria-valuemin": 0,
+                    "aria-valuemax": duration,
+                    "aria-valuenow": played * duration,
+                    "aria-valuetext": `${formatTime(
+                      played * duration
+                    )} of ${formatTime(duration)}`,
+                    role: "slider"
                   }
                 ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime((played || 0) * duration) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(duration) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: handlePlayPause,
+                      className: "text-white hover:text-blue-400 transition-colors",
+                      title: playing ? "Pause" : "Play",
+                      "aria-label": playing ? "Pause" : "Play",
+                      "aria-pressed": playing,
+                      children: playing ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "svg",
+                        {
+                          className: "w-8 h-8",
+                          fill: "currentColor",
+                          viewBox: "0 0 20 20",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z",
+                              clipRule: "evenodd"
+                            }
+                          )
+                        }
+                      ) : /* @__PURE__ */ jsxRuntime.jsx(
+                        "svg",
+                        {
+                          className: "w-8 h-8",
+                          fill: "currentColor",
+                          viewBox: "0 0 20 20",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z",
+                              clipRule: "evenodd"
+                            }
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: toggleMute,
+                        className: "text-white hover:text-blue-400 transition-colors",
+                        title: muted ? "Unmute" : "Mute",
+                        "aria-label": muted ? "Unmute" : "Mute",
+                        "aria-pressed": muted,
+                        children: muted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                          "svg",
+                          {
+                            className: "w-5 h-5",
+                            fill: "currentColor",
+                            viewBox: "0 0 20 20",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              "path",
+                              {
+                                fillRule: "evenodd",
+                                d: "M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM12.293 7.293a1 1 0 011.414 0L15 8.586l1.293-1.293a1 1 0 111.414 1.414L16.414 10l1.293 1.293a1 1 0 01-1.414 1.414L15 11.414l-1.293 1.293a1 1 0 01-1.414-1.414L13.586 10l-1.293-1.293a1 1 0 010-1.414z",
+                                clipRule: "evenodd"
+                              }
+                            )
+                          }
+                        ) : /* @__PURE__ */ jsxRuntime.jsx(
+                          "svg",
+                          {
+                            className: "w-5 h-5",
+                            fill: "currentColor",
+                            viewBox: "0 0 20 20",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              "path",
+                              {
+                                fillRule: "evenodd",
+                                d: "M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z",
+                                clipRule: "evenodd"
+                              }
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        type: "range",
+                        min: 0,
+                        max: 1,
+                        step: 0.01,
+                        value: muted ? 0 : volume || 1,
+                        onChange: handleVolumeChange,
+                        className: "w-20 h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer slider",
+                        "aria-label": "Volume",
+                        "aria-valuemin": 0,
+                        "aria-valuemax": 100,
+                        "aria-valuenow": muted ? 0 : Math.round(volume * 100),
+                        "aria-valuetext": muted ? "Muted" : `${Math.round(volume * 100)}%`,
+                        role: "slider"
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                  !isLiveStream && broadcast.hash && (broadcast.recordingMp4Url || broadcast.recordingMp3Url) && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: () => {
+                        const downloadUrl = buildPlaybackUrl(
+                          broadcast.id,
+                          broadcast.hash,
+                          "download"
+                        );
+                        window.open(downloadUrl, "_blank");
+                      },
+                      className: "text-white hover:text-blue-400 transition-colors",
+                      title: "Download Recording",
+                      "aria-label": "Download recording",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "svg",
+                        {
+                          className: "w-5 h-5",
+                          fill: "none",
+                          stroke: "currentColor",
+                          viewBox: "0 0 24 24",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "path",
+                            {
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              strokeWidth: 2,
+                              d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                            }
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  !isAudioOnly && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: toggleFullscreen,
+                      className: "text-white hover:text-blue-400 transition-colors",
+                      title: "Fullscreen",
+                      "aria-label": "Toggle fullscreen",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "svg",
+                        {
+                          className: "w-5 h-5",
+                          fill: "currentColor",
+                          viewBox: "0 0 20 20",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              d: "M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 11-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 012 0v1.586l2.293-2.293a1 1 0 111.414 1.414L6.414 15H8a1 1 0 010 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 010-2h1.586l-2.293-2.293a1 1 0 111.414-1.414L15 13.586V12a1 1 0 011-1z",
+                              clipRule: "evenodd"
+                            }
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  hasTranscript && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: () => setShowTranscript(!showTranscript),
+                      className: `transition-colors ${showTranscript ? "text-blue-400" : "text-white hover:text-blue-400"}`,
+                      title: showTranscript ? "Hide Transcript" : "Show Transcript",
+                      "aria-label": showTranscript ? "Hide transcript" : "Show transcript",
+                      "aria-pressed": showTranscript,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "svg",
+                        {
+                          className: "w-5 h-5",
+                          fill: "none",
+                          stroke: "currentColor",
+                          viewBox: "0 0 24 24",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "path",
+                            {
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              strokeWidth: 2,
+                              d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                            }
+                          )
+                        }
+                      )
+                    }
+                  )
+                ] })
+              ] })
+            ] }) : null : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-zinc-900/50 backdrop-blur-sm px-4 md:px-6 py-3 md:py-4 rounded-b-lg", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "input",
                   {
                     type: "range",
                     min: 0,
-                    max: 1,
-                    step: 0.01,
-                    value: muted ? 0 : volume || 1,
-                    onChange: handleVolumeChange,
-                    className: "w-20 h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer slider",
-                    "aria-label": "Volume",
+                    max: 0.999999,
+                    step: "any",
+                    value: played || 0,
+                    onMouseDown: handleSeekMouseDown,
+                    onMouseUp: handleSeekMouseUp,
+                    onTouchStart: handleSeekTouchStart,
+                    onTouchEnd: handleSeekTouchEnd,
+                    onChange: handleSeekChange,
+                    className: "w-full h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer slider",
+                    "aria-label": "Seek position",
                     "aria-valuemin": 0,
-                    "aria-valuemax": 100,
-                    "aria-valuenow": muted ? 0 : Math.round(volume * 100),
-                    "aria-valuetext": muted ? "Muted" : `${Math.round(volume * 100)}%`,
+                    "aria-valuemax": duration,
+                    "aria-valuenow": played * duration,
+                    "aria-valuetext": `${formatTime(
+                      played * duration
+                    )} of ${formatTime(duration)}`,
                     role: "slider"
                   }
-                )
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime((played || 0) * duration) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(duration) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: handlePlayPause,
+                      className: "text-white hover:text-blue-400 transition-colors",
+                      title: playing ? "Pause" : "Play",
+                      "aria-label": playing ? "Pause" : "Play",
+                      "aria-pressed": playing,
+                      children: playing ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "svg",
+                        {
+                          className: "w-8 h-8",
+                          fill: "currentColor",
+                          viewBox: "0 0 20 20",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z",
+                              clipRule: "evenodd"
+                            }
+                          )
+                        }
+                      ) : /* @__PURE__ */ jsxRuntime.jsx(
+                        "svg",
+                        {
+                          className: "w-8 h-8",
+                          fill: "currentColor",
+                          viewBox: "0 0 20 20",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z",
+                              clipRule: "evenodd"
+                            }
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: toggleMute,
+                        className: "text-white hover:text-blue-400 transition-colors",
+                        title: muted ? "Unmute" : "Mute",
+                        "aria-label": muted ? "Unmute" : "Mute",
+                        "aria-pressed": muted,
+                        children: muted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                          "svg",
+                          {
+                            className: "w-5 h-5",
+                            fill: "currentColor",
+                            viewBox: "0 0 20 20",
+                            "aria-hidden": "true",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              "path",
+                              {
+                                fillRule: "evenodd",
+                                d: "M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM12.293 7.293a1 1 0 011.414 0L15 8.586l1.293-1.293a1 1 0 111.414 1.414L16.414 10l1.293 1.293a1 1 0 01-1.414 1.414L15 11.414l-1.293 1.293a1 1 0 01-1.414-1.414L13.586 10l-1.293-1.293a1 1 0 010-1.414z",
+                                clipRule: "evenodd"
+                              }
+                            )
+                          }
+                        ) : /* @__PURE__ */ jsxRuntime.jsx(
+                          "svg",
+                          {
+                            className: "w-5 h-5",
+                            fill: "currentColor",
+                            viewBox: "0 0 20 20",
+                            "aria-hidden": "true",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              "path",
+                              {
+                                fillRule: "evenodd",
+                                d: "M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z",
+                                clipRule: "evenodd"
+                              }
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        type: "range",
+                        min: 0,
+                        max: 1,
+                        step: 0.01,
+                        value: muted ? 0 : volume || 1,
+                        onChange: handleVolumeChange,
+                        className: "w-20 h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer slider",
+                        "aria-label": "Volume",
+                        "aria-valuemin": 0,
+                        "aria-valuemax": 100,
+                        "aria-valuenow": muted ? 0 : Math.round(volume * 100),
+                        "aria-valuetext": muted ? "Muted" : `${Math.round(volume * 100)}%`,
+                        role: "slider"
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                  !isAudioOnly && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: toggleFullscreen,
+                      className: "text-white hover:text-blue-400 transition-colors",
+                      title: "Toggle fullscreen",
+                      "aria-label": "Toggle fullscreen",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "svg",
+                        {
+                          className: "w-5 h-5",
+                          fill: "currentColor",
+                          viewBox: "0 0 20 20",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              d: "M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 11-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 012 0v1.586l2.293-2.293a1 1 0 111.414 1.414L6.414 15H8a1 1 0 010 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 010-2h1.586l-2.293-2.293a1 1 0 111.414-1.414L15 13.586V12a1 1 0 011-1z",
+                              clipRule: "evenodd"
+                            }
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  hasTranscript && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: () => setShowTranscript(!showTranscript),
+                      className: `transition-colors ${showTranscript ? "text-blue-400" : "text-white hover:text-blue-400"}`,
+                      title: showTranscript ? "Hide transcript" : "Show transcript",
+                      "aria-label": showTranscript ? "Hide transcript" : "Show transcript",
+                      "aria-pressed": showTranscript,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "svg",
+                        {
+                          className: "w-5 h-5",
+                          fill: "none",
+                          stroke: "currentColor",
+                          viewBox: "0 0 24 24",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "path",
+                            {
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              strokeWidth: 2,
+                              d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                            }
+                          )
+                        }
+                      )
+                    }
+                  )
+                ] })
               ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-              !isLiveStream && broadcast.hash && (broadcast.recordingMp4Url || broadcast.recordingMp3Url) && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: () => {
-                    const downloadUrl = buildPlaybackUrl(broadcast.id, broadcast.hash, "download");
-                    window.open(downloadUrl, "_blank");
-                  },
-                  className: "text-white hover:text-blue-400 transition-colors",
-                  title: "Download Recording",
-                  "aria-label": "Download recording",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" }) })
-                }
-              ),
-              !isAudioOnly && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: toggleFullscreen,
-                  className: "text-white hover:text-blue-400 transition-colors",
-                  title: "Fullscreen",
-                  "aria-label": "Toggle fullscreen",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 11-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 012 0v1.586l2.293-2.293a1 1 0 111.414 1.414L6.414 15H8a1 1 0 010 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 010-2h1.586l-2.293-2.293a1 1 0 111.414-1.414L15 13.586V12a1 1 0 011-1z", clipRule: "evenodd" }) })
-                }
-              ),
-              hasTranscript && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: () => setShowTranscript(!showTranscript),
-                  className: `transition-colors ${showTranscript ? "text-blue-400" : "text-white hover:text-blue-400"}`,
-                  title: showTranscript ? "Hide Transcript" : "Show Transcript",
-                  "aria-label": showTranscript ? "Hide transcript" : "Show transcript",
-                  "aria-pressed": showTranscript,
-                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) })
-                }
-              )
-            ] })
-          ] })
-        ] }) : null : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-zinc-900/50 backdrop-blur-sm px-4 md:px-6 py-3 md:py-4 rounded-b-lg", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "range",
-                min: 0,
-                max: 0.999999,
-                step: "any",
-                value: played || 0,
-                onMouseDown: handleSeekMouseDown,
-                onMouseUp: handleSeekMouseUp,
-                onTouchStart: handleSeekTouchStart,
-                onTouchEnd: handleSeekTouchEnd,
-                onChange: handleSeekChange,
-                className: "w-full h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer slider"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime((played || 0) * duration) }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(duration) })
-            ] })
+            ] }))
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handlePlayPause, className: "text-white hover:text-blue-400 transition-colors", title: playing ? "Pause" : "Play", children: playing ? /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z", clipRule: "evenodd" }) }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z", clipRule: "evenodd" }) }) }),
+          showTranscript && hasTranscript && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 md:flex-none min-h-0 w-full md:w-96 bg-zinc-900 border-t md:border-t-0 border-l border-zinc-800 flex flex-col overflow-hidden", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 border-b border-zinc-800 bg-zinc-900/50 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: toggleMute, className: "text-white hover:text-blue-400 transition-colors", title: muted ? "Unmute" : "Mute", children: muted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM12.293 7.293a1 1 0 011.414 0L15 8.586l1.293-1.293a1 1 0 111.414 1.414L16.414 10l1.293 1.293a1 1 0 01-1.414 1.414L15 11.414l-1.293 1.293a1 1 0 01-1.414-1.414L13.586 10l-1.293-1.293a1 1 0 010-1.414z", clipRule: "evenodd" }) }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z", clipRule: "evenodd" }) }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
+                  "svg",
                   {
-                    type: "range",
-                    min: 0,
-                    max: 1,
-                    step: 0.01,
-                    value: muted ? 0 : volume || 1,
-                    onChange: handleVolumeChange,
-                    className: "w-20 h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer slider"
+                    className: "w-5 h-5 text-green-400",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                      }
+                    )
                   }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-              !isAudioOnly && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: toggleFullscreen, className: "text-white hover:text-blue-400 transition-colors", title: "Fullscreen", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 11-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 012 0v1.586l2.293-2.293a1 1 0 111.414 1.414L6.414 15H8a1 1 0 010 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 010-2h1.586l-2.293-2.293a1 1 0 111.414-1.414L15 13.586V12a1 1 0 011-1z", clipRule: "evenodd" }) }) }),
-              hasTranscript && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-white", children: "Transcript" }),
+                broadcast.transcriptLanguage && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400 px-2 py-0.5 bg-zinc-800 rounded", children: broadcast.transcriptLanguage.toUpperCase() })
+              ] }),
+              broadcast.transcriptUrl && /* @__PURE__ */ jsxRuntime.jsx(
+                "a",
                 {
-                  onClick: () => setShowTranscript(!showTranscript),
-                  className: `transition-colors ${showTranscript ? "text-blue-400" : "text-white hover:text-blue-400"}`,
-                  title: showTranscript ? "Hide Transcript" : "Show Transcript",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) })
+                  href: broadcast.transcriptUrl,
+                  download: `${broadcast.hash || broadcast.id}-transcript.json`,
+                  className: "text-gray-400 hover:text-white transition-colors",
+                  title: "Download transcript",
+                  "aria-label": "Download transcript as JSON file",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "svg",
+                    {
+                      className: "w-5 h-5",
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                        }
+                      )
+                    }
+                  )
                 }
               )
-            ] })
-          ] })
-        ] }))
-      ] }),
-      showTranscript && hasTranscript && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 md:flex-none min-h-0 w-full md:w-96 bg-zinc-900 border-t md:border-t-0 border-l border-zinc-800 flex flex-col overflow-hidden", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 border-b border-zinc-800 bg-zinc-900/50 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5 text-green-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-white", children: "Transcript" }),
-            broadcast.transcriptLanguage && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400 px-2 py-0.5 bg-zinc-800 rounded", children: broadcast.transcriptLanguage.toUpperCase() })
-          ] }),
-          broadcast.transcriptUrl && /* @__PURE__ */ jsxRuntime.jsx(
-            "a",
-            {
-              href: broadcast.transcriptUrl,
-              download: `${broadcast.hash || broadcast.id}-transcript.json`,
-              className: "text-gray-400 hover:text-white transition-colors",
-              title: "Download Transcript",
-              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" }) })
-            }
-          )
-        ] }) }),
-        !autoScrollEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-2 bg-zinc-800/50 border-b border-zinc-700 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            onClick: () => setAutoScrollEnabled(true),
-            className: "w-full px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors flex items-center justify-center gap-2 text-sm font-medium",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }),
-              "Resume Auto-Scroll"
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: transcriptContainerRef, className: "flex-1 min-h-0 overflow-y-auto px-4 py-4 text-gray-300 leading-relaxed", children: isLoadingTranscript ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-6 border-2 border-gray-600 border-t-blue-500 rounded-full animate-spin" }) }) : transcriptData?.segments && transcriptData.segments.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: (() => {
-          const filteredSegments = transcriptData.segments.filter((s) => s.words && s.words.length > 0);
-          let globalWordIndex = 0;
-          const wordMap = /* @__PURE__ */ new Map();
-          filteredSegments.forEach((segment) => {
-            segment.words.forEach((_word, wordIndex) => {
-              wordMap.set(`${segment.id}-${wordIndex}`, globalWordIndex++);
-            });
-          });
-          let currentWordIndex = -1;
-          filteredSegments.forEach((segment) => {
-            segment.words.forEach((word, wordIndex) => {
-              const globalIdx = wordMap.get(`${segment.id}-${wordIndex}`) || -1;
-              if (currentTime >= word.start && globalIdx > currentWordIndex) {
-                currentWordIndex = globalIdx;
+            ] }) }),
+            !autoScrollEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-2 bg-zinc-800/50 border-b border-zinc-700 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => setAutoScrollEnabled(true),
+                className: "w-full px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors flex items-center justify-center gap-2 text-sm font-medium",
+                "aria-label": "Resume automatic scrolling of transcript",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "svg",
+                    {
+                      className: "w-4 h-4",
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M19 14l-7 7m0 0l-7-7m7 7V3"
+                        }
+                      )
+                    }
+                  ),
+                  "Resume Auto-Scroll"
+                ]
               }
-            });
-          });
-          const previousWordIndex = lastActiveWordIndex.current;
-          let minHighlightIndex = -1;
-          let maxHighlightIndex = -1;
-          if (currentWordIndex >= 0) {
-            minHighlightIndex = Math.max(0, currentWordIndex - TRAILING_WORDS);
-            maxHighlightIndex = currentWordIndex;
-            if (currentWordIndex <= TRAILING_WORDS) {
-              minHighlightIndex = 0;
-            }
-            lastActiveWordIndex.current = currentWordIndex;
-          } else if (currentWordIndex === -1) {
-            minHighlightIndex = 0;
-            maxHighlightIndex = 0;
-          } else if (previousWordIndex >= 0) {
-            minHighlightIndex = Math.max(0, previousWordIndex - TRAILING_WORDS);
-            maxHighlightIndex = previousWordIndex;
-          }
-          return filteredSegments.map((segment, _segmentIndex) => {
-            const isSegmentActive = currentTime >= segment.start && currentTime < segment.end;
-            return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: isSegmentActive ? transcriptContainerRef : null, className: "flex gap-3 items-start leading-relaxed", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: () => handleWordClick(segment.start),
-                  className: "text-xs text-gray-500 hover:text-gray-300 transition-colors shrink-0 pt-0.5 font-mono",
-                  title: `Jump to ${formatTimestamp(segment.start)}`,
-                  children: formatTimestamp(segment.start)
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: segment.words.map((word, wordIndex) => {
-                const thisGlobalIndex = wordMap.get(`${segment.id}-${wordIndex}`) ?? -1;
-                const isTimestampActive = currentTime >= word.start && currentTime < word.end;
-                const isInGapFill = minHighlightIndex >= 0 && thisGlobalIndex >= minHighlightIndex && thisGlobalIndex <= maxHighlightIndex;
-                const isWordActive = isInGapFill;
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  "span",
-                  {
-                    ref: isTimestampActive ? activeWordRef : null,
-                    onClick: () => handleWordClick(word.start),
-                    className: `cursor-pointer ${isWordActive ? "text-blue-400 font-medium active-word" : isSegmentActive ? "text-gray-200 segment-word" : "text-gray-400 hover:text-gray-200 inactive-word"}`,
-                    title: `${formatTime(word.start)} - ${formatTime(word.end)}`,
-                    children: [
-                      word.word,
-                      " "
-                    ]
-                  },
-                  `${segment.id}-${wordIndex}`
-                );
-              }) })
-            ] }, segment.id);
-          });
-        })() }) : transcriptData?.words && transcriptData.words.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: transcriptData.words.map((word, index) => {
-          const isActive = currentTime >= word.start && currentTime < word.end;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "span",
-            {
-              ref: isActive ? activeWordRef : null,
-              onClick: () => handleWordClick(word.start),
-              className: `inline-block cursor-pointer transition-all ${isActive ? "text-blue-400 underline decoration-blue-400 decoration-2 font-medium" : "text-gray-400 hover:text-gray-200"}`,
-              title: `${formatTime(word.start)} - ${formatTime(word.end)}`,
-              children: [
-                word.word,
-                " "
-              ]
-            },
-            index
-          );
-        }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-gray-500 py-8", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2", children: "Transcript data not available" }),
-          transcriptData && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-600", children: [
-            "Debug: segments=",
-            transcriptData.segments ? transcriptData.segments.length : 0,
-            ", words=",
-            transcriptData.words ? transcriptData.words.length : 0
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: transcriptContainerRef,
+                className: "flex-1 min-h-0 overflow-y-auto px-4 py-4 text-gray-300 leading-relaxed",
+                children: isLoadingTranscript ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-6 border-2 border-gray-600 border-t-blue-500 rounded-full animate-spin" }) }) : transcriptData?.segments && transcriptData.segments.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: (() => {
+                  const filteredSegments = transcriptData.segments.filter(
+                    (s) => s.words && s.words.length > 0
+                  );
+                  let globalWordIndex = 0;
+                  const wordMap = /* @__PURE__ */ new Map();
+                  filteredSegments.forEach((segment) => {
+                    segment.words.forEach((_word, wordIndex) => {
+                      wordMap.set(
+                        `${segment.id}-${wordIndex}`,
+                        globalWordIndex++
+                      );
+                    });
+                  });
+                  let currentWordIndex = -1;
+                  filteredSegments.forEach((segment) => {
+                    segment.words.forEach((word, wordIndex) => {
+                      const globalIdx = wordMap.get(`${segment.id}-${wordIndex}`) || -1;
+                      if (currentTime >= word.start && globalIdx > currentWordIndex) {
+                        currentWordIndex = globalIdx;
+                      }
+                    });
+                  });
+                  const previousWordIndex = lastActiveWordIndex.current;
+                  let minHighlightIndex = -1;
+                  let maxHighlightIndex = -1;
+                  if (currentWordIndex >= 0) {
+                    minHighlightIndex = Math.max(
+                      0,
+                      currentWordIndex - TRAILING_WORDS
+                    );
+                    maxHighlightIndex = currentWordIndex;
+                    if (currentWordIndex <= TRAILING_WORDS) {
+                      minHighlightIndex = 0;
+                    }
+                    lastActiveWordIndex.current = currentWordIndex;
+                  } else if (currentWordIndex === -1) {
+                    minHighlightIndex = 0;
+                    maxHighlightIndex = 0;
+                  } else if (previousWordIndex >= 0) {
+                    minHighlightIndex = Math.max(
+                      0,
+                      previousWordIndex - TRAILING_WORDS
+                    );
+                    maxHighlightIndex = previousWordIndex;
+                  }
+                  return filteredSegments.map((segment, _segmentIndex) => {
+                    const isSegmentActive = currentTime >= segment.start && currentTime < segment.end;
+                    return /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        ref: isSegmentActive ? transcriptContainerRef : null,
+                        className: "flex gap-3 items-start leading-relaxed",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              onClick: () => handleWordClick(segment.start),
+                              className: "text-xs text-gray-500 hover:text-gray-300 transition-colors shrink-0 pt-0.5 font-mono",
+                              title: `Jump to ${formatTimestamp(segment.start)}`,
+                              children: formatTimestamp(segment.start)
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: segment.words.map((word, wordIndex) => {
+                            const thisGlobalIndex = wordMap.get(`${segment.id}-${wordIndex}`) ?? -1;
+                            const isTimestampActive = currentTime >= word.start && currentTime < word.end;
+                            const isInGapFill = minHighlightIndex >= 0 && thisGlobalIndex >= minHighlightIndex && thisGlobalIndex <= maxHighlightIndex;
+                            const isWordActive = isInGapFill;
+                            return /* @__PURE__ */ jsxRuntime.jsxs(
+                              "span",
+                              {
+                                ref: isTimestampActive ? activeWordRef : null,
+                                onClick: () => handleWordClick(word.start),
+                                className: `cursor-pointer ${isWordActive ? "text-blue-400 font-medium active-word" : isSegmentActive ? "text-gray-200 segment-word" : "text-gray-400 hover:text-gray-200 inactive-word"}`,
+                                title: `${formatTime(
+                                  word.start
+                                )} - ${formatTime(word.end)}`,
+                                children: [
+                                  word.word,
+                                  " "
+                                ]
+                              },
+                              `${segment.id}-${wordIndex}`
+                            );
+                          }) })
+                        ]
+                      },
+                      segment.id
+                    );
+                  });
+                })() }) : transcriptData?.words && transcriptData.words.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: transcriptData.words.map((word, index) => {
+                  const isActive = currentTime >= word.start && currentTime < word.end;
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "span",
+                    {
+                      ref: isActive ? activeWordRef : null,
+                      onClick: () => handleWordClick(word.start),
+                      className: `inline-block cursor-pointer transition-all ${isActive ? "text-blue-400 underline decoration-blue-400 decoration-2 font-medium" : "text-gray-400 hover:text-gray-200"}`,
+                      title: `${formatTime(word.start)} - ${formatTime(
+                        word.end
+                      )}`,
+                      children: [
+                        word.word,
+                        " "
+                      ]
+                    },
+                    index
+                  );
+                }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-gray-500 py-8", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2", children: "Transcript data not available" }),
+                  transcriptData && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-600", children: [
+                    "Debug: segments=",
+                    transcriptData.segments ? transcriptData.segments.length : 0,
+                    ", words=",
+                    transcriptData.words ? transcriptData.words.length : 0
+                  ] })
+                ] })
+              }
+            )
           ] })
-        ] }) })
-      ] })
-    ] }),
-    renderClipCreator && renderClipCreator({
-      isOpen: showClipCreator,
-      onClose: () => setShowClipCreator(false),
-      sourceVideoUrl: playbackType === "mp4" ? playbackUrl || void 0 : void 0,
-      sourceAudioUrl: playbackType === "mp3" ? playbackUrl || void 0 : void 0,
-      sourceDuration: duration,
-      onPauseParent: () => setPlaying(false)
-    }),
-    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        ] }),
+        renderClipCreator && renderClipCreator({
+          isOpen: showClipCreator,
+          onClose: () => setShowClipCreator(false),
+          sourceVideoUrl: playbackType === "mp4" ? playbackUrl || void 0 : void 0,
+          sourceAudioUrl: playbackType === "mp3" ? playbackUrl || void 0 : void 0,
+          sourceDuration: duration,
+          onPauseParent: () => setPlaying(false)
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
         .slider::-webkit-slider-thumb {
           appearance: none;
           width: 14px;
@@ -1908,91 +2464,12 @@ function BroadcastPlayer({
           transition: color 0.15s ease-in;
         }
       ` })
-  ] });
-}
-function BroadcastPlayerModal({
-  broadcast,
-  isOpen,
-  onClose,
-  appId,
-  contentId,
-  foreignId,
-  foreignTier,
-  renderClipCreator,
-  className,
-  enableKeyboardShortcuts = false
-}) {
-  const closeButtonRef = react.useRef(null);
-  const previousActiveElement = react.useRef(null);
-  react.useEffect(() => {
-    if (!isOpen) return;
-    previousActiveElement.current = document.activeElement;
-    setTimeout(() => {
-      closeButtonRef.current?.focus();
-    }, 100);
-    return () => {
-      if (previousActiveElement.current) {
-        previousActiveElement.current.focus();
-      }
-    };
-  }, [isOpen]);
-  react.useEffect(() => {
-    if (!isOpen) return;
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen, onClose]);
-  if (!isOpen) return null;
-  const handleBackdropClick = (e) => {
-    if (e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "fixed inset-0 bg-black/70 backdrop-blur-xl flex items-center justify-center z-50 p-2 sm:p-4",
-      onClick: handleBackdropClick,
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-label": "Broadcast player",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full max-w-7xl max-h-[95vh] sm:max-h-[90vh] overflow-hidden", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            ref: closeButtonRef,
-            onClick: onClose,
-            className: "absolute top-2 right-2 sm:top-4 sm:right-4 z-10 text-gray-400 hover:text-white text-2xl leading-none transition-colors w-8 h-8 flex items-center justify-center bg-black/50 rounded-full",
-            title: "Close (ESC)",
-            "aria-label": "Close player",
-            children: "\xD7"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          BroadcastPlayer,
-          {
-            broadcast,
-            appId,
-            contentId,
-            foreignId,
-            foreignTier,
-            renderClipCreator,
-            className,
-            enableKeyboardShortcuts,
-            onError: (error) => {
-              debug.error("[BroadcastPlayerModal] Player error:", error);
-            }
-          }
-        )
-      ] })
+      ]
     }
   );
+  return playerContent;
 }
-var BroadcastPlayerErrorBoundary = class extends react.Component {
+var DialtribePlayerErrorBoundary = class extends react.Component {
   constructor(props) {
     super(props);
     this.handleReset = () => {
@@ -2118,21 +2595,99 @@ var BroadcastPlayerErrorBoundary = class extends react.Component {
     return this.props.children;
   }
 };
+var overlayStyles = {
+  modal: {
+    backdrop: "bg-black/70 backdrop-blur-xl p-2 sm:p-4",
+    container: "max-w-7xl max-h-[95vh] sm:max-h-[90vh]"
+  },
+  fullscreen: {
+    backdrop: "bg-black",
+    container: "h-full"
+  }
+};
+function DialtribeOverlay({
+  isOpen,
+  onClose,
+  mode = "modal",
+  children,
+  ariaLabel = "Dialog",
+  showCloseButton = true,
+  closeOnBackdropClick = true,
+  closeOnEsc = true
+}) {
+  const closeButtonRef = react.useRef(null);
+  const previousActiveElement = react.useRef(null);
+  react.useEffect(() => {
+    if (!isOpen) return;
+    previousActiveElement.current = document.activeElement;
+    setTimeout(() => {
+      closeButtonRef.current?.focus();
+    }, 100);
+    return () => {
+      if (previousActiveElement.current) {
+        previousActiveElement.current.focus();
+      }
+    };
+  }, [isOpen]);
+  react.useEffect(() => {
+    if (!isOpen || !closeOnEsc) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose, closeOnEsc]);
+  if (!isOpen) {
+    return null;
+  }
+  const handleBackdropClick = (e) => {
+    if (closeOnBackdropClick && e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  const styles = overlayStyles[mode];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `fixed inset-0 flex items-center justify-center z-50 ${styles.backdrop}`,
+      onClick: handleBackdropClick,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative w-full overflow-hidden ${styles.container}`, children: [
+        showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            ref: closeButtonRef,
+            onClick: onClose,
+            className: "absolute top-2 right-2 sm:top-4 sm:right-4 z-10 text-gray-400 hover:text-white text-2xl leading-none transition-colors w-8 h-8 flex items-center justify-center bg-black/50 rounded-full",
+            title: "Close (ESC)",
+            "aria-label": "Close",
+            children: "\xD7"
+          }
+        ),
+        children
+      ] })
+    }
+  );
+}
 
 exports.AudioWaveform = AudioWaveform;
-exports.BroadcastPlayer = BroadcastPlayer;
-exports.BroadcastPlayerErrorBoundary = BroadcastPlayerErrorBoundary;
-exports.BroadcastPlayerModal = BroadcastPlayerModal;
 exports.CDN_DOMAIN = CDN_DOMAIN;
 exports.DIALTRIBE_API_BASE = DIALTRIBE_API_BASE;
-exports.DialTribeClient = DialTribeClient;
-exports.DialTribeProvider = DialTribeProvider;
+exports.DialtribeClient = DialtribeClient;
+exports.DialtribeOverlay = DialtribeOverlay;
+exports.DialtribePlayer = DialtribePlayer;
+exports.DialtribePlayerErrorBoundary = DialtribePlayerErrorBoundary;
+exports.DialtribeProvider = DialtribeProvider;
 exports.ENDPOINTS = ENDPOINTS;
 exports.HTTP_STATUS = HTTP_STATUS;
 exports.LoadingSpinner = LoadingSpinner;
 exports.buildBroadcastCdnUrl = buildBroadcastCdnUrl;
 exports.buildBroadcastS3KeyPrefix = buildBroadcastS3KeyPrefix;
 exports.formatTime = formatTime;
-exports.useDialTribe = useDialTribe;
-//# sourceMappingURL=broadcast-player.js.map
-//# sourceMappingURL=broadcast-player.js.map
+exports.useDialtribe = useDialtribe;
+//# sourceMappingURL=dialtribe-player.js.map
+//# sourceMappingURL=dialtribe-player.js.map