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

package/dist/index.mjs

@@ -1,6 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { createContext, useState, useCallback, useEffect, useContext, useRef, Component } from 'react';
+import React2, { createContext, useState, useCallback, useEffect, useContext, useRef, useMemo, Component } from 'react';
 import ReactPlayer from 'react-player';
+import { createPortal } from 'react-dom';
 
 // src/components/HelloWorld.tsx
 function HelloWorld({ name = "World" }) {
@@ -21,8 +22,8 @@ function HelloWorld({ name = "World" }) {
     /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "14px" }, children: "@dialtribe/react-sdk is working correctly" })
   ] });
 }
-var DialTribeContext = createContext(null);
-function DialTribeProvider({
+var DialtribeContext = createContext(null);
+function DialtribeProvider({
   sessionToken: initialToken,
   onTokenRefresh,
   onTokenExpired,
@@ -58,19 +59,22 @@ function DialTribeProvider({
     markExpired,
     apiBaseUrl
   };
-  return /* @__PURE__ */ jsx(DialTribeContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx(DialtribeContext.Provider, { value, children });
 }
-function useDialTribe() {
-  const context = useContext(DialTribeContext);
+function useDialtribe() {
+  const context = 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;
 }
+function useDialtribeOptional() {
+  return useContext(DialtribeContext);
+}
 
-// 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;
@@ -84,18 +88,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
@@ -209,7 +214,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)
     });
@@ -228,7 +233,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)
     });
@@ -760,7 +765,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,
@@ -771,18 +776,18 @@ function BroadcastPlayer({
   className = "",
   enableKeyboardShortcuts = false
 }) {
-  const { sessionToken, setSessionToken, markExpired, apiBaseUrl } = useDialTribe();
+  const { sessionToken, setSessionToken, markExpired, apiBaseUrl } = useDialtribe();
   const clientRef = 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();
       }
     });
@@ -793,7 +798,9 @@ function BroadcastPlayer({
   const playerRef = useRef(null);
   const transcriptContainerRef = useRef(null);
   const activeWordRef = useRef(null);
-  const [audioElement, setAudioElement] = useState(null);
+  const [audioElement, setAudioElement] = useState(
+    null
+  );
   const [playing, setPlaying] = useState(false);
   const [played, setPlayed] = useState(0);
   const [duration, setDuration] = useState(0);
@@ -805,7 +812,9 @@ function BroadcastPlayer({
   const [hasEnded, setHasEnded] = useState(false);
   const [hasStreamEnded, setHasStreamEnded] = useState(false);
   const [showTranscript, setShowTranscript] = useState(false);
-  const [transcriptData, setTranscriptData] = useState(null);
+  const [transcriptData, setTranscriptData] = useState(
+    null
+  );
   const [currentTime, setCurrentTime] = useState(0);
   const [isLoadingTranscript, setIsLoadingTranscript] = useState(false);
   const [isLoadingVideo, setIsLoadingVideo] = useState(true);
@@ -833,7 +842,9 @@ function BroadcastPlayer({
   const refreshPresignedUrl = 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") {
@@ -841,14 +852,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")) {
@@ -863,7 +878,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);
         }
@@ -883,7 +900,8 @@ function BroadcastPlayer({
   };
   const initializeTrackingSession = 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 {
@@ -906,7 +924,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) {
@@ -915,7 +935,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 = useCallback(
     async (eventType) => {
       if (!audienceId || !sessionId || !client) return;
@@ -939,15 +971,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" };
@@ -962,7 +1004,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);
@@ -1001,12 +1045,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 = 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);
@@ -1077,7 +1143,7 @@ function BroadcastPlayer({
           duration: Math.floor(duration || 0)
         };
         const headers = {
-          "Authorization": `Bearer ${sessionToken}`,
+          Authorization: `Bearer ${sessionToken}`,
           "Content-Type": "application/json"
         };
         fetch(ENDPOINTS.sessionPing, {
@@ -1095,7 +1161,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) => {
@@ -1227,7 +1295,7 @@ function BroadcastPlayer({
         setAudioElement(internalPlayer);
       }
     } catch (error) {
-      debug.error("[BroadcastPlayer] Error getting internal player:", error);
+      debug.error("[DialtribePlayer] Error getting internal player:", error);
     }
   };
   useEffect(() => {
@@ -1241,7 +1309,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();
@@ -1299,16 +1377,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;
@@ -1356,7 +1441,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);
     };
@@ -1424,7 +1512,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__ */ 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__ */ jsx("h3", { className: "text-lg font-bold text-black dark:text-white mb-4", children: "Broadcast Unavailable" }),
@@ -1435,452 +1533,914 @@ function BroadcastPlayer({
     return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: `bg-black rounded-lg shadow-2xl w-full max-h-full flex flex-col overflow-hidden ${className}`, children: [
-    /* @__PURE__ */ 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__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-white", children: broadcast.streamKeyRecord?.foreignName || "Broadcast" }),
-        /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-400", children: [
-          broadcast.isVideo ? "Video" : "Audio",
-          " \u2022",
-          " ",
-          broadcast.broadcastStatus === 1 ? /* @__PURE__ */ jsx("span", { className: "text-red-500 font-semibold", children: "\u{1F534} LIVE" }) : playbackType === "hls" ? /* @__PURE__ */ jsx("span", { className: "text-gray-500 font-semibold", children: "OFFLINE" }) : formatTime(duration)
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: renderClipCreator && playbackType !== "hls" && appId && contentId && duration > 0 && /* @__PURE__ */ 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__ */ jsxs("svg", { className: "w-3 h-3 md:w-4 md:h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
-              /* @__PURE__ */ 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__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })
-            ] }),
-            /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Create Clip" }),
-            /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: "Clip" })
-          ]
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row flex-1 min-h-0 overflow-hidden", children: [
-      /* @__PURE__ */ jsxs("div", { className: "shrink-0 md:shrink md:flex-1 flex flex-col overflow-hidden", children: [
-        /* @__PURE__ */ 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__ */ jsx("div", { className: "relative cursor-pointer w-full flex flex-col", onClick: handleVideoClick, children: !hasError ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "w-full h-full relative", children: [
-            /* @__PURE__ */ jsx(AudioWaveform, { audioElement, isPlaying: isLiveStream ? true : playing, isLive: isLiveStream }),
-            isLoadingVideo && !hasError && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/90 flex items-center justify-center z-20", children: /* @__PURE__ */ jsx(LoadingSpinner, { variant: "white" }) }),
-            hasEnded && !wasLiveStream && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 flex items-center justify-center z-20 pointer-events-auto", children: /* @__PURE__ */ 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__ */ jsx("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md px-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "text-6xl mb-4", children: "\u26A0\uFE0F" }),
-            /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-white mb-3", children: "Playback Error" }),
-            /* @__PURE__ */ jsx("p", { className: "text-gray-300 text-sm mb-6", children: errorMessage }),
-            /* @__PURE__ */ 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__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "aspect-video relative", children: [
-            /* @__PURE__ */ jsx("div", { onClick: handleVideoClick, className: "cursor-pointer", children: /* @__PURE__ */ jsx(
-              ReactPlayer,
-              {
-                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__ */ jsx("div", { className: "absolute inset-0 bg-black/90 flex items-center justify-center", children: /* @__PURE__ */ jsx(LoadingSpinner, { variant: "white" }) }),
-            hasEnded && !hasError && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 flex items-center justify-center", children: /* @__PURE__ */ 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__ */ jsx("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "absolute inset-0 bg-black/90 flex items-center justify-center p-8", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md", children: [
-              /* @__PURE__ */ jsx("div", { className: "text-6xl mb-4", children: "\u26A0\uFE0F" }),
-              /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-white mb-3", children: "Playback Error" }),
-              /* @__PURE__ */ jsx("p", { className: "text-gray-300 text-sm mb-6", children: errorMessage }),
-              /* @__PURE__ */ 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__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ 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__ */ jsxs(
+    "div",
+    {
+      className: `bg-black rounded-lg shadow-2xl w-full max-h-full flex flex-col overflow-hidden ${className}`,
+      children: [
+        /* @__PURE__ */ 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__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-white", children: broadcast.streamKeyRecord?.foreignName || "Broadcast" }),
+            /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-400", children: [
+              broadcast.isVideo ? "Video" : "Audio",
+              " \u2022",
+              " ",
+              broadcast.broadcastStatus === 1 ? /* @__PURE__ */ jsx("span", { className: "text-red-500 font-semibold", children: "\u{1F534} LIVE" }) : playbackType === "hls" ? /* @__PURE__ */ jsx("span", { className: "text-gray-500 font-semibold", children: "OFFLINE" }) : formatTime(duration)
+            ] })
           ] }),
-          isAudioOnly && /* @__PURE__ */ jsx("div", { className: "hidden", children: /* @__PURE__ */ jsx(
-            ReactPlayer,
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: renderClipCreator && playbackType !== "hls" && appId && contentId && duration > 0 && /* @__PURE__ */ 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__ */ jsxs(
+                  "svg",
+                  {
+                    className: "w-3 h-3 md:w-4 md:h-4",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: [
+                      /* @__PURE__ */ 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__ */ jsx(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Create Clip" }),
+                /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: "Clip" })
+              ]
+            }
           ) })
         ] }),
-        !hasError && !isLiveStream && (wasLiveStream ? parseInt(broadcast.mp3Size || "0") > 0 || parseInt(broadcast.mp4Size || "0") > 0 ? /* @__PURE__ */ 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__ */ jsxs("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsx(
-              "input",
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row flex-1 min-h-0 overflow-hidden", children: [
+          /* @__PURE__ */ jsxs("div", { className: "shrink-0 md:shrink md:flex-1 flex flex-col overflow-hidden", children: [
+            /* @__PURE__ */ 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__ */ jsx(
+                    "div",
+                    {
+                      className: "relative cursor-pointer w-full flex flex-col",
+                      onClick: handleVideoClick,
+                      children: !hasError ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "w-full h-full relative", children: [
+                        /* @__PURE__ */ jsx(
+                          AudioWaveform,
+                          {
+                            audioElement,
+                            isPlaying: isLiveStream ? true : playing,
+                            isLive: isLiveStream
+                          }
+                        ),
+                        isLoadingVideo && !hasError && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/90 flex items-center justify-center z-20", children: /* @__PURE__ */ jsx(LoadingSpinner, { variant: "white" }) }),
+                        hasEnded && !wasLiveStream && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 flex items-center justify-center z-20 pointer-events-auto", children: /* @__PURE__ */ 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__ */ jsx(
+                                "svg",
+                                {
+                                  className: "w-6 h-6",
+                                  fill: "currentColor",
+                                  viewBox: "0 0 20 20",
+                                  children: /* @__PURE__ */ 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__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md px-4", children: [
+                        /* @__PURE__ */ jsx("div", { className: "text-6xl mb-4", children: "\u26A0\uFE0F" }),
+                        /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-white mb-3", children: "Playback Error" }),
+                        /* @__PURE__ */ jsx("p", { className: "text-gray-300 text-sm mb-6", children: errorMessage }),
+                        /* @__PURE__ */ 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__ */ jsx(
+                                "svg",
+                                {
+                                  className: "w-5 h-5",
+                                  fill: "none",
+                                  stroke: "currentColor",
+                                  viewBox: "0 0 24 24",
+                                  children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "aspect-video relative", children: [
+                    /* @__PURE__ */ jsx("div", { onClick: handleVideoClick, className: "cursor-pointer", children: /* @__PURE__ */ jsx(
+                      ReactPlayer,
+                      {
+                        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__ */ jsx("div", { className: "absolute inset-0 bg-black/90 flex items-center justify-center", children: /* @__PURE__ */ jsx(LoadingSpinner, { variant: "white" }) }),
+                    hasEnded && !hasError && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 flex items-center justify-center", children: /* @__PURE__ */ 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__ */ jsx(
+                            "svg",
+                            {
+                              className: "w-6 h-6",
+                              fill: "currentColor",
+                              viewBox: "0 0 20 20",
+                              "aria-hidden": "true",
+                              children: /* @__PURE__ */ 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__ */ jsx("div", { className: "absolute inset-0 bg-black/90 flex items-center justify-center p-8", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md", children: [
+                      /* @__PURE__ */ jsx("div", { className: "text-6xl mb-4", children: "\u26A0\uFE0F" }),
+                      /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-white mb-3", children: "Playback Error" }),
+                      /* @__PURE__ */ jsx("p", { className: "text-gray-300 text-sm mb-6", children: errorMessage }),
+                      /* @__PURE__ */ 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__ */ jsx(
+                              "svg",
+                              {
+                                className: "w-5 h-5",
+                                fill: "none",
+                                stroke: "currentColor",
+                                viewBox: "0 0 24 24",
+                                children: /* @__PURE__ */ 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__ */ jsx("div", { className: "hidden", children: /* @__PURE__ */ jsx(
+                    ReactPlayer,
+                    {
+                      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__ */ jsxs("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
-              /* @__PURE__ */ jsx("span", { children: formatTime((played || 0) * duration) }),
-              /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-              /* @__PURE__ */ 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__ */ jsx("svg", { className: "w-8 h-8", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ 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__ */ jsx("svg", { className: "w-8 h-8", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            !hasError && !isLiveStream && (wasLiveStream ? parseInt(broadcast.mp3Size || "0") > 0 || parseInt(broadcast.mp4Size || "0") > 0 ? /* @__PURE__ */ 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__ */ jsxs("div", { className: "mb-4", children: [
                 /* @__PURE__ */ 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__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ 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__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
+                  /* @__PURE__ */ jsx("span", { children: formatTime((played || 0) * duration) }),
+                  /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+                  /* @__PURE__ */ 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__ */ jsx(
+                        "svg",
+                        {
+                          className: "w-8 h-8",
+                          fill: "currentColor",
+                          viewBox: "0 0 20 20",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ 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__ */ jsx(
+                        "svg",
+                        {
+                          className: "w-8 h-8",
+                          fill: "currentColor",
+                          viewBox: "0 0 20 20",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ 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__ */ jsx(
+                          "svg",
+                          {
+                            className: "w-5 h-5",
+                            fill: "currentColor",
+                            viewBox: "0 0 20 20",
+                            children: /* @__PURE__ */ 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__ */ jsx(
+                          "svg",
+                          {
+                            className: "w-5 h-5",
+                            fill: "currentColor",
+                            viewBox: "0 0 20 20",
+                            children: /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                  !isLiveStream && broadcast.hash && (broadcast.recordingMp4Url || broadcast.recordingMp3Url) && /* @__PURE__ */ 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__ */ jsx(
+                        "svg",
+                        {
+                          className: "w-5 h-5",
+                          fill: "none",
+                          stroke: "currentColor",
+                          viewBox: "0 0 24 24",
+                          children: /* @__PURE__ */ 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__ */ jsx(
+                    "button",
+                    {
+                      onClick: toggleFullscreen,
+                      className: "text-white hover:text-blue-400 transition-colors",
+                      title: "Fullscreen",
+                      "aria-label": "Toggle fullscreen",
+                      children: /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          className: "w-5 h-5",
+                          fill: "currentColor",
+                          viewBox: "0 0 20 20",
+                          children: /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                        "svg",
+                        {
+                          className: "w-5 h-5",
+                          fill: "none",
+                          stroke: "currentColor",
+                          viewBox: "0 0 24 24",
+                          children: /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "mb-4", children: [
                 /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
+                  /* @__PURE__ */ jsx("span", { children: formatTime((played || 0) * duration) }),
+                  /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+                  /* @__PURE__ */ 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__ */ jsx(
+                        "svg",
+                        {
+                          className: "w-8 h-8",
+                          fill: "currentColor",
+                          viewBox: "0 0 20 20",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ 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__ */ jsx(
+                        "svg",
+                        {
+                          className: "w-8 h-8",
+                          fill: "currentColor",
+                          viewBox: "0 0 20 20",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ 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__ */ jsx(
+                          "svg",
+                          {
+                            className: "w-5 h-5",
+                            fill: "currentColor",
+                            viewBox: "0 0 20 20",
+                            "aria-hidden": "true",
+                            children: /* @__PURE__ */ 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__ */ jsx(
+                          "svg",
+                          {
+                            className: "w-5 h-5",
+                            fill: "currentColor",
+                            viewBox: "0 0 20 20",
+                            "aria-hidden": "true",
+                            children: /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                  !isAudioOnly && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: toggleFullscreen,
+                      className: "text-white hover:text-blue-400 transition-colors",
+                      title: "Toggle fullscreen",
+                      "aria-label": "Toggle fullscreen",
+                      children: /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          className: "w-5 h-5",
+                          fill: "currentColor",
+                          viewBox: "0 0 20 20",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                        "svg",
+                        {
+                          className: "w-5 h-5",
+                          fill: "none",
+                          stroke: "currentColor",
+                          viewBox: "0 0 24 24",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-              !isLiveStream && broadcast.hash && (broadcast.recordingMp4Url || broadcast.recordingMp3Url) && /* @__PURE__ */ 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__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ 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__ */ jsx(
-                "button",
-                {
-                  onClick: toggleFullscreen,
-                  className: "text-white hover:text-blue-400 transition-colors",
-                  title: "Fullscreen",
-                  "aria-label": "Toggle fullscreen",
-                  children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ 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__ */ 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__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "mb-4", children: [
-            /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
-              /* @__PURE__ */ jsx("span", { children: formatTime((played || 0) * duration) }),
-              /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
-            ] })
+            ] }))
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-              /* @__PURE__ */ jsx("button", { onClick: handlePlayPause, className: "text-white hover:text-blue-400 transition-colors", title: playing ? "Pause" : "Play", children: playing ? /* @__PURE__ */ jsx("svg", { className: "w-8 h-8", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ 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__ */ jsx("svg", { className: "w-8 h-8", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "px-4 py-3 border-b border-zinc-800 bg-zinc-900/50 shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx("button", { onClick: toggleMute, className: "text-white hover:text-blue-400 transition-colors", title: muted ? "Unmute" : "Mute", children: muted || volume === 0 ? /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ 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__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-              !isAudioOnly && /* @__PURE__ */ jsx("button", { onClick: toggleFullscreen, className: "text-white hover:text-blue-400 transition-colors", title: "Fullscreen", children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ 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__ */ jsx(
-                "button",
+                ),
+                /* @__PURE__ */ jsx("span", { className: "font-medium text-white", children: "Transcript" }),
+                broadcast.transcriptLanguage && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 px-2 py-0.5 bg-zinc-800 rounded", children: broadcast.transcriptLanguage.toUpperCase() })
+              ] }),
+              broadcast.transcriptUrl && /* @__PURE__ */ 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__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ 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__ */ jsx(
+                    "svg",
+                    {
+                      className: "w-5 h-5",
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "px-4 py-3 border-b border-zinc-800 bg-zinc-900/50 shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-green-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ 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__ */ jsx("span", { className: "font-medium text-white", children: "Transcript" }),
-            broadcast.transcriptLanguage && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 px-2 py-0.5 bg-zinc-800 rounded", children: broadcast.transcriptLanguage.toUpperCase() })
-          ] }),
-          broadcast.transcriptUrl && /* @__PURE__ */ 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__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "px-4 py-2 bg-zinc-800/50 border-b border-zinc-700 shrink-0", children: /* @__PURE__ */ 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__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }),
-              "Resume Auto-Scroll"
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ 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__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "px-4 py-2 bg-zinc-800/50 border-b border-zinc-700 shrink-0", children: /* @__PURE__ */ 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__ */ jsx(
+                    "svg",
+                    {
+                      className: "w-4 h-4",
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ 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__ */ jsxs("div", { ref: isSegmentActive ? transcriptContainerRef : null, className: "flex gap-3 items-start leading-relaxed", children: [
-              /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("div", { className: "space-y-1", children: transcriptData.words.map((word, index) => {
-          const isActive = currentTime >= word.start && currentTime < word.end;
-          return /* @__PURE__ */ 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__ */ jsxs("div", { className: "text-center text-gray-500 py-8", children: [
-          /* @__PURE__ */ jsx("p", { className: "mb-2", children: "Transcript data not available" }),
-          transcriptData && /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ 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__ */ 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__ */ jsxs(
+                      "div",
+                      {
+                        ref: isSegmentActive ? transcriptContainerRef : null,
+                        className: "flex gap-3 items-start leading-relaxed",
+                        children: [
+                          /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("div", { className: "space-y-1", children: transcriptData.words.map((word, index) => {
+                  const isActive = currentTime >= word.start && currentTime < word.end;
+                  return /* @__PURE__ */ 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__ */ jsxs("div", { className: "text-center text-gray-500 py-8", children: [
+                  /* @__PURE__ */ jsx("p", { className: "mb-2", children: "Transcript data not available" }),
+                  transcriptData && /* @__PURE__ */ 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__ */ 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__ */ jsx("style", { children: `
         .slider::-webkit-slider-thumb {
           appearance: none;
           width: 14px;
@@ -1920,91 +2480,12 @@ function BroadcastPlayer({
           transition: color 0.15s ease-in;
         }
       ` })
-  ] });
-}
-function BroadcastPlayerModal({
-  broadcast,
-  isOpen,
-  onClose,
-  appId,
-  contentId,
-  foreignId,
-  foreignTier,
-  renderClipCreator,
-  className,
-  enableKeyboardShortcuts = false
-}) {
-  const closeButtonRef = useRef(null);
-  const previousActiveElement = useRef(null);
-  useEffect(() => {
-    if (!isOpen) return;
-    previousActiveElement.current = document.activeElement;
-    setTimeout(() => {
-      closeButtonRef.current?.focus();
-    }, 100);
-    return () => {
-      if (previousActiveElement.current) {
-        previousActiveElement.current.focus();
-      }
-    };
-  }, [isOpen]);
-  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__ */ 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__ */ jsxs("div", { className: "relative w-full max-w-7xl max-h-[95vh] sm:max-h-[90vh] overflow-hidden", children: [
-        /* @__PURE__ */ 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__ */ jsx(
-          BroadcastPlayer,
-          {
-            broadcast,
-            appId,
-            contentId,
-            foreignId,
-            foreignTier,
-            renderClipCreator,
-            className,
-            enableKeyboardShortcuts,
-            onError: (error) => {
-              debug.error("[BroadcastPlayerModal] Player error:", error);
-            }
-          }
-        )
-      ] })
+      ]
     }
   );
+  return playerContent;
 }
-var BroadcastPlayerErrorBoundary = class extends Component {
+var DialtribePlayerErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
     this.handleReset = () => {
@@ -2130,7 +2611,2207 @@ var BroadcastPlayerErrorBoundary = class extends 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 = useRef(null);
+  const previousActiveElement = useRef(null);
+  useEffect(() => {
+    if (!isOpen) return;
+    previousActiveElement.current = document.activeElement;
+    setTimeout(() => {
+      closeButtonRef.current?.focus();
+    }, 100);
+    return () => {
+      if (previousActiveElement.current) {
+        previousActiveElement.current.focus();
+      }
+    };
+  }, [isOpen]);
+  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__ */ 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__ */ jsxs("div", { className: `relative w-full overflow-hidden ${styles.container}`, children: [
+        showCloseButton && /* @__PURE__ */ 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
+      ] })
+    }
+  );
+}
+
+// src/utils/media-constraints.ts
+function getMediaConstraints(options) {
+  const { isVideo, facingMode = "user" } = options;
+  const audioConstraints = {
+    autoGainControl: true,
+    channelCount: 2,
+    // Stereo
+    echoCancellation: false,
+    noiseSuppression: false,
+    sampleRate: 48e3
+    // 48kHz
+  };
+  const videoConstraints = isVideo ? {
+    aspectRatio: 16 / 9,
+    width: { ideal: 1280 },
+    height: { ideal: 720 },
+    frameRate: { ideal: 30 },
+    facingMode
+    // "user" (front) or "environment" (back)
+  } : false;
+  return {
+    audio: audioConstraints,
+    video: videoConstraints
+  };
+}
+function getMediaRecorderOptions(isVideo) {
+  let mimeType;
+  if (isVideo) {
+    if (MediaRecorder.isTypeSupported("video/mp4;codecs=avc1,mp4a")) {
+      mimeType = "video/mp4;codecs=avc1,mp4a";
+    } else if (MediaRecorder.isTypeSupported("video/webm;codecs=h264,opus")) {
+      mimeType = "video/webm;codecs=h264,opus";
+    } else if (MediaRecorder.isTypeSupported("video/webm;codecs=vp8,opus")) {
+      mimeType = "video/webm;codecs=vp8,opus";
+      console.warn("\u26A0\uFE0F Browser only supports VP8/Opus - recordings will be disabled");
+    }
+  } else {
+    if (MediaRecorder.isTypeSupported("audio/mp4;codecs=mp4a")) {
+      mimeType = "audio/mp4;codecs=mp4a";
+    } else if (MediaRecorder.isTypeSupported("audio/webm;codecs=opus")) {
+      mimeType = "audio/webm;codecs=opus";
+      console.warn("\u26A0\uFE0F Browser only supports Opus - recordings may be disabled");
+    }
+  }
+  return {
+    mimeType,
+    audioBitsPerSecond: 128e3,
+    // 128 kbps audio
+    videoBitsPerSecond: isVideo ? 25e5 : void 0
+    // 2.5 Mbps for 720p video
+  };
+}
+function checkBrowserCompatibility() {
+  if (typeof window === "undefined") {
+    return {
+      compatible: false,
+      error: "This component requires a browser environment"
+    };
+  }
+  if (!window.MediaRecorder) {
+    return {
+      compatible: false,
+      error: "MediaRecorder API not supported in this browser"
+    };
+  }
+  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+    return {
+      compatible: false,
+      error: "getUserMedia API not supported in this browser"
+    };
+  }
+  return { compatible: true };
+}
+
+// src/utils/websocket-streamer.ts
+var DEFAULT_ENCODER_SERVER_URL = "https://broadcastapi.dialtribe.com";
+var WebSocketStreamer = class {
+  constructor(options) {
+    this.websocket = null;
+    this.mediaRecorder = null;
+    this.bytesSent = 0;
+    this.chunksSent = 0;
+    this.userStopped = false;
+    // Track if user initiated the stop
+    this.isHotSwapping = false;
+    // Track if we're swapping media streams
+    this.startTime = 0;
+    // Canvas-based rendering for seamless camera flips
+    // MediaRecorder records from canvas stream, so track changes don't affect it
+    this.canvasState = null;
+    this.streamKey = options.streamKey;
+    this.mediaStream = options.mediaStream;
+    this.isVideo = options.isVideo;
+    this.encoderServerUrl = options.encoderServerUrl || DEFAULT_ENCODER_SERVER_URL;
+    this.disableCanvasRendering = options.disableCanvasRendering || false;
+    this.onBytesUpdate = options.onBytesUpdate;
+    this.onStateChange = options.onStateChange;
+    this.onError = options.onError;
+  }
+  /**
+   * Calculate scaled dimensions for fitting video into canvas.
+   * @param mode - "contain" fits video inside canvas, "cover" fills canvas (cropping)
+   */
+  calculateScaledDimensions(videoWidth, videoHeight, canvasWidth, canvasHeight, mode) {
+    const videoAspect = videoWidth / videoHeight;
+    const canvasAspect = canvasWidth / canvasHeight;
+    const useWidthBased = mode === "contain" ? videoAspect > canvasAspect : videoAspect <= canvasAspect;
+    if (useWidthBased) {
+      const width = canvasWidth;
+      const height = canvasWidth / videoAspect;
+      return { x: 0, y: (canvasHeight - height) / 2, width, height };
+    } else {
+      const height = canvasHeight;
+      const width = canvasHeight * videoAspect;
+      return { x: (canvasWidth - width) / 2, y: 0, width, height };
+    }
+  }
+  /**
+   * Invalidate cached scaling dimensions (call when video source changes)
+   */
+  invalidateScalingCache() {
+    if (this.canvasState) {
+      this.canvasState.cachedContain = null;
+      this.canvasState.cachedCover = null;
+      this.canvasState.cachedNeedsBackground = false;
+      this.canvasState.lastVideoWidth = 0;
+      this.canvasState.lastVideoHeight = 0;
+    }
+  }
+  /**
+   * Validate stream key format
+   * Stream keys must follow format: {tierCode}{foreignId}_{randomKey}
+   * Tier codes: a (audio shared), b (audio VIP), v (video shared), w (video VIP)
+   */
+  validateStreamKeyFormat() {
+    if (!this.streamKey || this.streamKey.length < 10) {
+      throw new Error("Invalid stream key: too short");
+    }
+    const tierCode = this.streamKey[0];
+    if (!["a", "b", "v", "w"].includes(tierCode)) {
+      throw new Error(
+        `Invalid stream key format: must start with 'a', 'b', 'v', or 'w' (got '${tierCode}')`
+      );
+    }
+    if (!this.streamKey.includes("_")) {
+      throw new Error(
+        "Invalid stream key format: must contain underscore separator (format: {tier}{id}_{key})"
+      );
+    }
+    console.log("\u2705 Stream key format validated:", {
+      tierCode,
+      isVideo: tierCode === "v" || tierCode === "w",
+      isVIP: tierCode === "b" || tierCode === "w"
+    });
+  }
+  /**
+   * Set up canvas-based rendering pipeline for video streams.
+   * This allows seamless camera flips by changing the video source
+   * without affecting MediaRecorder (which records from the canvas).
+   *
+   * This is async to ensure the video is producing frames before returning,
+   * which prevents black initial thumbnails.
+   */
+  async setupCanvasRendering() {
+    console.log("\u{1F3A8} Setting up canvas-based rendering for seamless camera flips");
+    const videoTrack = this.mediaStream.getVideoTracks()[0];
+    const settings = videoTrack?.getSettings() || {};
+    const width = settings.width || 1280;
+    const height = settings.height || 720;
+    console.log(`\u{1F4D0} Video dimensions: ${width}x${height}`);
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      throw new Error("Failed to get 2D canvas context - canvas rendering unavailable");
+    }
+    const videoElement = document.createElement("video");
+    videoElement.srcObject = this.mediaStream;
+    videoElement.muted = true;
+    videoElement.playsInline = true;
+    await new Promise((resolve) => {
+      const checkReady = () => {
+        if (videoElement.videoWidth > 0 && videoElement.videoHeight > 0) {
+          console.log(`\u{1F4F9} Video ready: ${videoElement.videoWidth}x${videoElement.videoHeight}`);
+          resolve();
+        } else {
+          requestAnimationFrame(checkReady);
+        }
+      };
+      videoElement.addEventListener("loadeddata", () => {
+        checkReady();
+      }, { once: true });
+      videoElement.play().catch((e) => {
+        console.warn("Video autoplay warning:", e);
+        resolve();
+      });
+      setTimeout(() => {
+        console.warn("\u26A0\uFE0F Video ready timeout - continuing anyway");
+        resolve();
+      }, 2e3);
+    });
+    const frameRate = settings.frameRate || 30;
+    const stream = canvas.captureStream(frameRate);
+    const audioTracks = this.mediaStream.getAudioTracks();
+    audioTracks.forEach((track) => {
+      stream.addTrack(track);
+    });
+    console.log(`\u{1F3AC} Canvas stream created with ${frameRate}fps video + ${audioTracks.length} audio track(s)`);
+    this.canvasState = {
+      canvas,
+      ctx,
+      videoElement,
+      stream,
+      renderLoopId: 0,
+      // Will be set below
+      useBlurBackground: true,
+      slowFrameCount: 0,
+      cachedContain: null,
+      cachedCover: null,
+      cachedNeedsBackground: false,
+      lastVideoWidth: 0,
+      lastVideoHeight: 0
+    };
+    if (videoElement.videoWidth > 0 && videoElement.videoHeight > 0) {
+      const vw = videoElement.videoWidth;
+      const vh = videoElement.videoHeight;
+      const cw = canvas.width;
+      const ch = canvas.height;
+      const scale = Math.min(cw / vw, ch / vh);
+      const sw = vw * scale;
+      const sh = vh * scale;
+      const sx = (cw - sw) / 2;
+      const sy = (ch - sh) / 2;
+      ctx.fillStyle = "#000";
+      ctx.fillRect(0, 0, cw, ch);
+      ctx.drawImage(videoElement, sx, sy, sw, sh);
+      console.log("\u{1F5BC}\uFE0F Drew first frame synchronously to prevent black thumbnail");
+    }
+    const state = this.canvasState;
+    const renderFrame = () => {
+      if (!this.canvasState || state !== this.canvasState) return;
+      const { ctx: ctx2, canvas: canvas2, videoElement: videoElement2 } = state;
+      if (videoElement2.paused) {
+        videoElement2.play().catch(() => {
+        });
+      }
+      const canvasWidth = canvas2.width;
+      const canvasHeight = canvas2.height;
+      const videoWidth = videoElement2.videoWidth;
+      const videoHeight = videoElement2.videoHeight;
+      if (videoWidth === 0 || videoHeight === 0) {
+        state.renderLoopId = requestAnimationFrame(renderFrame);
+        return;
+      }
+      if (videoWidth !== state.lastVideoWidth || videoHeight !== state.lastVideoHeight) {
+        state.lastVideoWidth = videoWidth;
+        state.lastVideoHeight = videoHeight;
+        state.cachedContain = this.calculateScaledDimensions(
+          videoWidth,
+          videoHeight,
+          canvasWidth,
+          canvasHeight,
+          "contain"
+        );
+        state.cachedCover = this.calculateScaledDimensions(
+          videoWidth,
+          videoHeight,
+          canvasWidth,
+          canvasHeight,
+          "cover"
+        );
+        state.cachedNeedsBackground = Math.abs(state.cachedContain.width - canvasWidth) > 1 || Math.abs(state.cachedContain.height - canvasHeight) > 1;
+        console.log(`\u{1F4D0} Video dimensions changed: ${videoWidth}x${videoHeight}, needsBackground: ${state.cachedNeedsBackground}`);
+      }
+      const contain = state.cachedContain;
+      const cover = state.cachedCover;
+      const frameStart = performance.now();
+      if (state.cachedNeedsBackground && state.useBlurBackground) {
+        ctx2.save();
+        ctx2.filter = "blur(20px)";
+        ctx2.drawImage(videoElement2, cover.x, cover.y, cover.width, cover.height);
+        ctx2.restore();
+        ctx2.fillStyle = "rgba(0, 0, 0, 0.5)";
+        ctx2.fillRect(0, 0, canvasWidth, canvasHeight);
+      } else if (state.cachedNeedsBackground) {
+        ctx2.fillStyle = "#000";
+        ctx2.fillRect(0, 0, canvasWidth, canvasHeight);
+      }
+      ctx2.drawImage(videoElement2, contain.x, contain.y, contain.width, contain.height);
+      const frameDuration = performance.now() - frameStart;
+      if (frameDuration > 16 && state.useBlurBackground) {
+        state.slowFrameCount++;
+        if (state.slowFrameCount > 5) {
+          console.log("\u26A1 Disabling blur background for performance");
+          state.useBlurBackground = false;
+        }
+      } else if (frameDuration <= 16) {
+        state.slowFrameCount = 0;
+      }
+      state.renderLoopId = requestAnimationFrame(renderFrame);
+    };
+    state.renderLoopId = requestAnimationFrame(renderFrame);
+    console.log("\u2705 Canvas rendering pipeline ready (with adaptive blur background)");
+    return stream;
+  }
+  /**
+   * Clean up canvas rendering resources
+   */
+  cleanupCanvasRendering() {
+    if (!this.canvasState) return;
+    cancelAnimationFrame(this.canvasState.renderLoopId);
+    this.canvasState.videoElement.pause();
+    this.canvasState.videoElement.srcObject = null;
+    this.canvasState.stream.getTracks().forEach((track) => track.stop());
+    this.canvasState = null;
+  }
+  /**
+   * Build WebSocket URL from stream key
+   */
+  buildWebSocketUrl() {
+    const url = new URL(this.encoderServerUrl);
+    if (url.protocol === "http:") {
+      url.protocol = "ws:";
+    } else if (url.protocol === "https:") {
+      url.protocol = "wss:";
+    }
+    url.pathname = "/targets/dialtribe";
+    url.searchParams.set("key", this.streamKey);
+    return url.toString();
+  }
+  /**
+   * Start streaming
+   */
+  async start() {
+    try {
+      this.userStopped = false;
+      this.chunksSent = 0;
+      this.bytesSent = 0;
+      this.startTime = 0;
+      this.validateStreamKeyFormat();
+      this.onStateChange?.("connecting");
+      const wsUrl = this.buildWebSocketUrl();
+      console.log("\u{1F4E1} Connecting to WebSocket:", wsUrl.replace(this.streamKey, "***"));
+      this.websocket = new WebSocket(wsUrl);
+      await new Promise((resolve, reject) => {
+        if (!this.websocket) {
+          reject(new Error("WebSocket not initialized"));
+          return;
+        }
+        const timeoutId = setTimeout(() => {
+          reject(new Error(`WebSocket connection timeout. URL: ${wsUrl}`));
+        }, 1e4);
+        this.websocket.addEventListener("open", () => {
+          clearTimeout(timeoutId);
+          resolve();
+        }, { once: true });
+        this.websocket.addEventListener("error", (event) => {
+          clearTimeout(timeoutId);
+          console.error("\u274C WebSocket error event:", event);
+          console.error("\u{1F50D} Connection diagnostics:", {
+            url: wsUrl.replace(this.streamKey, "***"),
+            streamKeyFormat: this.streamKey.substring(0, 5) + "***",
+            readyState: this.websocket?.readyState,
+            readyStateText: ["CONNECTING", "OPEN", "CLOSING", "CLOSED"][this.websocket?.readyState || 0]
+          });
+          reject(new Error(
+            `WebSocket connection failed (likely 403 Forbidden).
+
+Common causes:
+1. Encoder server cannot connect to the database
+2. Encoder server is using a different database
+3. Stream key validation failed on encoder server
+
+Please check encoder server logs and DATABASE_URL configuration.`
+          ));
+        }, { once: true });
+      });
+      console.log("\u2705 WebSocket connected");
+      this.setupWebSocketHandlers();
+      const useCanvas = this.isVideo && !this.disableCanvasRendering;
+      const streamToRecord = useCanvas ? await this.setupCanvasRendering() : this.mediaStream;
+      const recorderOptions = getMediaRecorderOptions(this.isVideo);
+      this.mimeType = recorderOptions.mimeType;
+      this.mediaRecorder = new MediaRecorder(streamToRecord, recorderOptions);
+      console.log("\u{1F399}\uFE0F MediaRecorder created with options:", recorderOptions);
+      if (useCanvas) {
+        console.log("\u{1F3A8} Recording from canvas stream (enables seamless camera flips)");
+      } else if (this.isVideo) {
+        console.log("\u{1F4F9} Recording directly from camera (canvas disabled)");
+      }
+      this.setupMediaRecorderHandlers();
+      this.mediaRecorder.start(300);
+      this.startTime = Date.now();
+      console.log("\u{1F534} Recording started");
+      this.onStateChange?.("live");
+    } catch (error) {
+      console.error("\u274C Error starting stream:", error);
+      this.onError?.(error instanceof Error ? error.message : "Failed to start stream");
+      this.onStateChange?.("error");
+      this.stop();
+      throw error;
+    }
+  }
+  /**
+   * Stop streaming
+   */
+  stop() {
+    console.log("\u23F9\uFE0F Stopping stream");
+    this.userStopped = true;
+    if (this.mediaRecorder && this.mediaRecorder.state !== "inactive") {
+      this.mediaRecorder.stop();
+      console.log("\u23F9\uFE0F MediaRecorder stopped");
+    }
+    if (this.websocket) {
+      const readyStateNames = ["CONNECTING", "OPEN", "CLOSING", "CLOSED"];
+      const stateName = readyStateNames[this.websocket.readyState] || "UNKNOWN";
+      console.log(`\u{1F50C} WebSocket state: ${stateName} (${this.websocket.readyState})`);
+      if (this.websocket.readyState !== WebSocket.CLOSED) {
+        this.websocket.close();
+        console.log("\u{1F50C} WebSocket close() called");
+      } else {
+        console.log("\u{1F50C} WebSocket already closed");
+      }
+    } else {
+      console.log("\u26A0\uFE0F No WebSocket to close");
+    }
+    this.cleanupCanvasRendering();
+    this.mediaRecorder = null;
+    this.websocket = null;
+    this.onStateChange?.("stopped");
+  }
+  /**
+   * Get total bytes sent
+   */
+  getBytesSent() {
+    return this.bytesSent;
+  }
+  /**
+   * Get the current source media stream.
+   * This may change after replaceVideoTrack() is called.
+   */
+  getMediaStream() {
+    return this.mediaStream;
+  }
+  /**
+   * Get current diagnostics
+   */
+  getDiagnostics(closeCode, closeReason) {
+    return {
+      mimeType: this.mimeType,
+      chunksSent: this.chunksSent,
+      bytesSent: this.bytesSent,
+      elapsedMs: this.startTime ? Date.now() - this.startTime : 0,
+      closeCode,
+      closeReason
+    };
+  }
+  /**
+   * Replace the video track for camera flips.
+   *
+   * When using canvas-based rendering (video streams), this preloads the new
+   * camera in a temporary video element, waits for it to be ready, then swaps
+   * it in. This ensures continuous frame output with no gaps.
+   *
+   * @param newVideoTrack - The new video track from the flipped camera
+   * @returns Promise that resolves when the swap is complete
+   */
+  async replaceVideoTrack(newVideoTrack) {
+    console.log("\u{1F504} Replacing video track");
+    if (this.canvasState) {
+      console.log("\u{1F3A8} Using canvas-based swap with preloading (no frame gaps)");
+      const audioTracks = this.mediaStream.getAudioTracks();
+      const newStream = new MediaStream([newVideoTrack, ...audioTracks]);
+      const preloadVideo = document.createElement("video");
+      preloadVideo.srcObject = newStream;
+      preloadVideo.muted = true;
+      preloadVideo.playsInline = true;
+      await new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          console.warn("\u26A0\uFE0F Video preload timeout - switching anyway");
+          if (preloadVideo.paused) {
+            preloadVideo.play().catch(() => {
+            });
+          }
+          resolve();
+        }, 3e3);
+        const checkFullyReady = () => {
+          if (preloadVideo.videoWidth > 0 && preloadVideo.videoHeight > 0 && !preloadVideo.paused) {
+            clearTimeout(timeout);
+            console.log(`\u{1F4F9} New camera ready and playing: ${preloadVideo.videoWidth}x${preloadVideo.videoHeight}`);
+            resolve();
+            return true;
+          }
+          return false;
+        };
+        preloadVideo.addEventListener("loadeddata", () => {
+          preloadVideo.play().then(() => {
+            requestAnimationFrame(() => {
+              if (!checkFullyReady()) {
+                const pollPlaying = setInterval(() => {
+                  if (checkFullyReady()) {
+                    clearInterval(pollPlaying);
+                  }
+                }, 50);
+                setTimeout(() => clearInterval(pollPlaying), 2e3);
+              }
+            });
+          }).catch((e) => {
+            console.warn("Video preload play warning:", e);
+            checkFullyReady();
+          });
+        }, { once: true });
+        preloadVideo.addEventListener("error", (e) => {
+          clearTimeout(timeout);
+          reject(new Error(`Video preload failed: ${e}`));
+        }, { once: true });
+        preloadVideo.play().catch(() => {
+        });
+      });
+      const oldVideoElement = this.canvasState.videoElement;
+      this.canvasState.videoElement = preloadVideo;
+      this.mediaStream.getVideoTracks().forEach((track) => track.stop());
+      oldVideoElement.pause();
+      oldVideoElement.srcObject = null;
+      this.mediaStream = newStream;
+      this.invalidateScalingCache();
+      const settings = newVideoTrack.getSettings();
+      if (settings.width && settings.height) {
+        console.log(`\u{1F4D0} New camera resolution: ${settings.width}x${settings.height}`);
+      }
+      console.log("\u2705 Video source swapped - canvas continues seamlessly");
+    } else {
+      console.warn("\u26A0\uFE0F Canvas not available - attempting direct track replacement");
+      const oldVideoTracks = this.mediaStream.getVideoTracks();
+      this.mediaStream.addTrack(newVideoTrack);
+      console.log("\u2795 New video track added");
+      oldVideoTracks.forEach((track) => {
+        this.mediaStream.removeTrack(track);
+        track.stop();
+      });
+      console.log("\u2796 Old video track(s) removed");
+      console.log("\u2705 Video track replaced");
+    }
+  }
+  /**
+   * Replace the audio track in the current MediaStream without stopping MediaRecorder.
+   *
+   * @param newAudioTrack - The new audio track
+   */
+  replaceAudioTrack(newAudioTrack) {
+    console.log("\u{1F504} Replacing audio track (no MediaRecorder restart)");
+    const oldAudioTracks = this.mediaStream.getAudioTracks();
+    this.mediaStream.addTrack(newAudioTrack);
+    console.log("\u2795 New audio track added to source stream");
+    oldAudioTracks.forEach((track) => {
+      this.mediaStream.removeTrack(track);
+      track.stop();
+    });
+    console.log("\u2796 Old audio track(s) removed from source stream");
+    if (this.canvasState) {
+      this.canvasState.stream.getAudioTracks().forEach((track) => {
+        this.canvasState.stream.removeTrack(track);
+      });
+      this.canvasState.stream.addTrack(newAudioTrack);
+      console.log("\u{1F3A8} Audio track synced to canvas stream");
+    }
+    console.log("\u2705 Audio track replaced - streaming continues seamlessly");
+  }
+  /**
+   * Update the media stream (e.g., when switching devices from settings)
+   * This keeps the WebSocket connection alive while swapping the media source.
+   * Restarts the MediaRecorder with the new stream.
+   *
+   * Note: For camera flips, prefer replaceVideoTrack() which doesn't restart MediaRecorder.
+   * Note: Errors are thrown to the caller, not sent to onError callback.
+   */
+  async updateMediaStream(newMediaStream) {
+    console.log("\u{1F504} Updating media stream (hot-swap)");
+    this.isHotSwapping = true;
+    if (this.mediaRecorder && this.mediaRecorder.state !== "inactive") {
+      this.mediaRecorder.stop();
+      console.log("\u23F9\uFE0F Old MediaRecorder stopped");
+    }
+    this.mediaStream = newMediaStream;
+    const useCanvas = this.isVideo && !this.disableCanvasRendering;
+    let streamToRecord = this.mediaStream;
+    if (useCanvas) {
+      this.cleanupCanvasRendering();
+      streamToRecord = await this.setupCanvasRendering();
+      console.log("\u{1F3A8} Canvas rendering recreated for new stream");
+    }
+    const recorderOptions = getMediaRecorderOptions(this.isVideo);
+    this.mediaRecorder = new MediaRecorder(streamToRecord, recorderOptions);
+    console.log("\u{1F399}\uFE0F New MediaRecorder created");
+    this.setupMediaRecorderHandlers();
+    this.mediaRecorder.start(300);
+    this.isHotSwapping = false;
+    console.log("\u2705 Media stream updated - streaming continues");
+  }
+  /**
+   * Set up WebSocket event handlers
+   */
+  setupWebSocketHandlers() {
+    if (!this.websocket) return;
+    this.websocket.addEventListener("close", (event) => {
+      console.log("\u{1F50C} WebSocket closed", { code: event.code, reason: event.reason });
+      if (!this.userStopped) {
+        const diagnostics = this.getDiagnostics(event.code, event.reason);
+        console.warn("\u26A0\uFE0F Stream ended unexpectedly", diagnostics);
+        let errorMessage;
+        if (event.code === 1e3) {
+          errorMessage = event.reason || "Stream ended by server";
+        } else if (event.code === 1001) {
+          errorMessage = "Connection closed - server going away";
+        } else if (event.code === 1006) {
+          errorMessage = "Connection lost unexpectedly";
+        } else if (event.code >= 4e3 && event.code < 5e3) {
+          errorMessage = event.reason || "Stream terminated by server";
+        } else {
+          errorMessage = `Connection closed (code: ${event.code})`;
+        }
+        this.onStateChange?.("terminated");
+        this.onError?.(errorMessage, diagnostics);
+      }
+      if (this.mediaRecorder && this.mediaRecorder.state !== "inactive") {
+        this.mediaRecorder.stop();
+      }
+    });
+    this.websocket.addEventListener("error", (event) => {
+      console.error("\u274C WebSocket error:", event);
+      this.onError?.("WebSocket connection error");
+      this.onStateChange?.("error");
+    });
+  }
+  /**
+   * Set up MediaRecorder event handlers
+   */
+  setupMediaRecorderHandlers() {
+    if (!this.mediaRecorder) return;
+    this.mediaRecorder.addEventListener("dataavailable", (event) => {
+      if (event.data.size > 0 && this.websocket?.readyState === WebSocket.OPEN) {
+        this.websocket.send(event.data);
+        this.bytesSent += event.data.size;
+        this.chunksSent += 1;
+        this.onBytesUpdate?.(this.bytesSent);
+        if (this.chunksSent % 10 === 0) {
+          console.log(`\u{1F4E4} Sent ${this.chunksSent} chunks (${(this.bytesSent / 1024 / 1024).toFixed(2)} MB total)`);
+        }
+      }
+    });
+    this.mediaRecorder.addEventListener("error", (event) => {
+      const errorEvent = event;
+      console.error("\u274C MediaRecorder error:", errorEvent.error);
+      this.onError?.(`Encoding error: ${errorEvent.error?.toString() || "Unknown error"}`);
+      this.onStateChange?.("error");
+      this.stop();
+    });
+    this.mediaRecorder.addEventListener("stop", () => {
+      console.log("\u23F9\uFE0F MediaRecorder stopped");
+      if (!this.isHotSwapping && this.websocket?.readyState === WebSocket.OPEN) {
+        this.websocket.close();
+      }
+    });
+  }
+};
+function StreamingPreview({
+  videoRef,
+  isVideoKey,
+  isVideoEnabled,
+  mediaStream,
+  facingMode
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "dialtribe-streaming-preview flex-1 relative bg-black overflow-hidden", children: [
+    isVideoKey && isVideoEnabled && /* @__PURE__ */ jsx(
+      "video",
+      {
+        ref: videoRef,
+        autoPlay: true,
+        muted: true,
+        playsInline: true,
+        className: `w-full h-full object-cover ${facingMode === "user" ? "scale-x-[-1]" : ""}`,
+        style: { maxHeight: "100vh" }
+      }
+    ),
+    !isVideoKey && /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center p-8", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-4xl", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-full h-auto border border-gray-800 rounded-lg overflow-hidden", children: /* @__PURE__ */ jsx(AudioWaveform, { mediaStream, isPlaying: true }) }),
+      /* @__PURE__ */ jsxs("div", { className: "text-center mt-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-3", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-8 h-8 text-white",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx("p", { className: "text-white text-xl font-medium", children: "Audio-Only Stream" }),
+        /* @__PURE__ */ jsx("p", { className: "text-gray-400 text-sm mt-1", children: "Your audio is being captured" })
+      ] })
+    ] }) }),
+    isVideoKey && !isVideoEnabled && /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center p-8 bg-gray-900", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-4xl", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-full h-auto border border-gray-800 rounded-lg overflow-hidden mb-6", children: /* @__PURE__ */ jsx(AudioWaveform, { mediaStream, isPlaying: true }) }),
+      /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-16 h-16 bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-3", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-8 h-8 text-gray-400",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z M3 3l18 18"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx("p", { className: "text-white text-xl font-medium", children: "Camera Off" }),
+        /* @__PURE__ */ jsx("p", { className: "text-gray-400 text-sm mt-1", children: "Your audio is still being broadcast" })
+      ] })
+    ] }) })
+  ] });
+}
+function StreamKeyDisplay({
+  streamKey,
+  className = "",
+  showLabel = true,
+  showCopy = true,
+  editable = false,
+  onChange,
+  size = "md",
+  layout = "vertical",
+  darkMode = false
+}) {
+  const [isRevealed, setIsRevealed] = useState(false);
+  const [copySuccess, setCopySuccess] = useState(false);
+  const obscureStreamKey = (key) => {
+    if (key.length <= 12) {
+      return "\u2022".repeat(key.length);
+    }
+    return `${key.substring(0, 6)}${"\u2022".repeat(key.length - 12)}${key.substring(key.length - 6)}`;
+  };
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(streamKey);
+      setCopySuccess(true);
+      setTimeout(() => setCopySuccess(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy stream key:", err);
+    }
+  };
+  const handleReveal = () => {
+    setIsRevealed(!isRevealed);
+  };
+  const sizeClasses2 = {
+    sm: {
+      label: "text-xs",
+      code: "text-xs px-2 py-1",
+      button: "text-xs px-2 py-1"
+    },
+    md: {
+      label: "text-sm",
+      code: "text-sm px-2 py-1",
+      button: "text-sm px-3 py-1.5"
+    },
+    lg: {
+      label: "text-base",
+      code: "text-base px-3 py-2",
+      button: "text-base px-4 py-2"
+    }
+  };
+  const styles = sizeClasses2[size];
+  const isHorizontal = layout === "horizontal";
+  const containerClass = isHorizontal ? "flex items-center gap-3" : "flex flex-col gap-2";
+  const codeClass = darkMode && !isRevealed ? `${styles.code} font-mono text-white bg-transparent rounded truncate` : `${styles.code} font-mono text-black dark:text-white bg-gray-100 dark:bg-zinc-800 rounded truncate flex-1 min-w-0`;
+  const labelClass = darkMode ? `${styles.label} text-white/80 font-medium whitespace-nowrap` : `${styles.label} text-gray-600 dark:text-gray-400 font-medium`;
+  const revealButtonClass = darkMode ? `${styles.button} text-blue-400 hover:text-blue-300 hover:bg-white/10 rounded transition-colors whitespace-nowrap` : `${styles.button} text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded transition-colors whitespace-nowrap`;
+  return /* @__PURE__ */ jsxs("div", { className: `dialtribe-stream-key-display ${containerClass} ${className}`, children: [
+    showLabel && /* @__PURE__ */ jsx("span", { className: labelClass, children: "Stream Key:" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0 overflow-hidden", children: [
+      isRevealed && editable ? /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: streamKey,
+          onChange: (e) => onChange?.(e.target.value),
+          className: `${styles.code} font-mono text-black dark:text-white bg-white dark:bg-zinc-900 border border-gray-300 dark:border-zinc-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 flex-1 min-w-0`,
+          placeholder: "Enter stream key"
+        }
+      ) : /* @__PURE__ */ jsx("code", { className: codeClass, children: isRevealed ? streamKey : obscureStreamKey(streamKey) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleReveal,
+          className: `${revealButtonClass} shrink-0`,
+          children: isRevealed ? "Hide" : "Reveal"
+        }
+      ),
+      showCopy && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleCopy,
+          className: `${styles.button} text-gray-600 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded transition-colors whitespace-nowrap shrink-0`,
+          title: "Copy to clipboard",
+          children: copySuccess ? "Copied!" : "Copy"
+        }
+      )
+    ] })
+  ] });
+}
+function StreamingControls({
+  state,
+  isVideoKey,
+  isMuted,
+  isVideoEnabled,
+  facingMode: _facingMode,
+  // Reserved for future use (e.g., showing camera direction)
+  hasMultipleCameras,
+  startTime,
+  bytesSent,
+  showStopConfirm,
+  streamKey,
+  onStreamKeyChange,
+  onStart,
+  onStop,
+  onConfirmStop,
+  onCancelStop,
+  onToggleMute,
+  onToggleVideo,
+  onFlipCamera,
+  onClose,
+  showCloseConfirm,
+  onConfirmClose,
+  onCancelClose,
+  // Device selection props
+  videoDevices = [],
+  audioDevices = [],
+  selectedVideoDeviceId,
+  selectedAudioDeviceId,
+  onVideoDeviceChange,
+  onAudioDeviceChange,
+  mediaStream
+}) {
+  const [duration, setDuration] = useState(0);
+  const [showSettings, setShowSettings] = useState(false);
+  useEffect(() => {
+    if (state !== "live" || !startTime) return;
+    const interval = setInterval(() => {
+      const elapsed = Math.floor((Date.now() - startTime.getTime()) / 1e3);
+      setDuration(elapsed);
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [state, startTime]);
+  const formatDuration = (seconds) => {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor(seconds % 3600 / 60);
+    const secs = seconds % 60;
+    if (hours > 0) {
+      return `${hours}:${minutes.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+    }
+    return `${minutes}:${secs.toString().padStart(2, "0")}`;
+  };
+  const formatBytes = (bytes) => {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    state === "previewing" && onClose && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-gradient-to-b from-black/60 to-transparent z-10 flex items-start justify-end", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onClose,
+        className: "w-10 h-10 shrink-0 bg-black/50 hover:bg-black/70 backdrop-blur rounded-full flex items-center justify-center transition-colors",
+        title: "Close broadcast preview",
+        "aria-label": "Close broadcast preview",
+        children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+      }
+    ) }),
+    state === "live" && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-gradient-to-b from-black/60 to-transparent z-10", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-3 h-3 bg-red-600 rounded-full animate-pulse" }),
+        /* @__PURE__ */ jsx("span", { className: "text-white font-semibold text-lg", children: "LIVE" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-white font-mono text-lg font-semibold", children: formatDuration(duration) }),
+          /* @__PURE__ */ jsxs("div", { className: "text-white/80 text-sm", children: [
+            formatBytes(bytesSent),
+            " sent"
+          ] })
+        ] }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClose,
+            className: "w-10 h-10 bg-black/50 hover:bg-black/70 backdrop-blur rounded-full flex items-center justify-center transition-colors",
+            title: "Close and end broadcast",
+            "aria-label": "Close and end broadcast",
+            children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 to-transparent z-10", children: [
+      state === "previewing" && /* @__PURE__ */ jsxs("div", { className: "relative flex justify-center items-center", children: [
+        isVideoKey && hasMultipleCameras && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onFlipCamera,
+            className: "absolute left-0 w-10 h-10 bg-black/50 hover:bg-black/70 backdrop-blur rounded-full flex items-center justify-center transition-colors",
+            title: "Switch camera",
+            "aria-label": "Switch between front and back camera",
+            children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ 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"
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onStart,
+            className: "px-12 py-4 bg-blue-600 hover:bg-blue-700 text-white text-xl font-bold rounded-full transition-all transform hover:scale-105 active:scale-95 shadow-lg",
+            "aria-label": "Start live streaming",
+            children: "Start Streaming"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setShowSettings(true),
+            className: "absolute right-0 w-10 h-10 bg-black/50 hover:bg-black/70 backdrop-blur rounded-full flex items-center justify-center transition-colors",
+            title: "Stream settings",
+            "aria-label": "Open stream settings",
+            children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-white", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z", clipRule: "evenodd" }) })
+          }
+        )
+      ] }),
+      state === "connecting" && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "px-12 py-4 bg-blue-600 text-white text-xl font-bold rounded-full flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" }),
+        "Connecting..."
+      ] }) }),
+      state === "live" && !showStopConfirm && !showCloseConfirm && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onToggleMute,
+            className: `w-14 h-14 rounded-full flex items-center justify-center transition-all shadow-lg ${isMuted ? "bg-red-600 hover:bg-red-700" : "bg-white/20 hover:bg-white/30 backdrop-blur"}`,
+            title: isMuted ? "Unmute microphone" : "Mute microphone",
+            "aria-label": isMuted ? "Unmute microphone" : "Mute microphone",
+            "aria-pressed": isMuted,
+            children: isMuted ? /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2"
+              }
+            ) }) : /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onStop,
+            className: "w-16 h-16 bg-red-600 hover:bg-red-700 rounded-full flex items-center justify-center transition-all shadow-lg",
+            title: "Stop streaming",
+            "aria-label": "Stop streaming",
+            children: /* @__PURE__ */ jsx("div", { className: "w-6 h-6 bg-white rounded-sm", "aria-hidden": "true" })
+          }
+        ),
+        isVideoKey && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onToggleVideo,
+            className: `w-14 h-14 rounded-full flex items-center justify-center transition-all shadow-lg ${!isVideoEnabled ? "bg-red-600 hover:bg-red-700" : "bg-white/20 hover:bg-white/30 backdrop-blur"}`,
+            title: isVideoEnabled ? "Turn camera off" : "Turn camera on",
+            "aria-label": isVideoEnabled ? "Turn camera off" : "Turn camera on",
+            "aria-pressed": !isVideoEnabled,
+            children: isVideoEnabled ? /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
+              }
+            ) }) : /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z M3 3l18 18"
+              }
+            ) })
+          }
+        ),
+        isVideoKey && hasMultipleCameras && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onFlipCamera,
+            className: "w-14 h-14 bg-white/20 hover:bg-white/30 backdrop-blur rounded-full flex items-center justify-center transition-all shadow-lg",
+            title: "Switch camera",
+            "aria-label": "Switch between front and back camera",
+            children: /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ 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"
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            disabled: true,
+            className: "w-14 h-14 bg-white/10 rounded-full flex items-center justify-center opacity-50 cursor-not-allowed shadow-lg",
+            title: "Create clip (Coming soon)",
+            "aria-label": "Create clip (Coming soon)",
+            "aria-disabled": "true",
+            children: /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ 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 M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              }
+            ) })
+          }
+        )
+      ] }) })
+    ] }),
+    showStopConfirm && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-20 flex items-center justify-center p-4 bg-black/70", children: /* @__PURE__ */ jsxs("div", { className: "bg-black/95 rounded-2xl p-6 backdrop-blur border border-white/20 max-w-sm w-full", role: "dialog", "aria-labelledby": "stop-dialog-title", children: [
+      /* @__PURE__ */ jsx("p", { id: "stop-dialog-title", className: "text-white text-center text-lg font-medium mb-4", children: "Stop streaming?" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onCancelStop,
+            className: "flex-1 px-6 py-3 bg-white/20 hover:bg-white/30 text-white font-medium rounded-lg transition-colors",
+            "aria-label": "Cancel and continue streaming",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onConfirmStop,
+            className: "flex-1 px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors",
+            "aria-label": "Confirm stop streaming",
+            children: "Stop"
+          }
+        )
+      ] })
+    ] }) }),
+    showCloseConfirm && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-20 flex items-center justify-center p-4 bg-black/70", children: /* @__PURE__ */ jsxs("div", { className: "bg-black/95 rounded-2xl p-6 backdrop-blur border border-white/20 max-w-sm w-full", role: "dialog", "aria-labelledby": "close-dialog-title", "aria-describedby": "close-dialog-description", children: [
+      /* @__PURE__ */ jsx("p", { id: "close-dialog-title", className: "text-white text-center text-lg font-medium mb-2", children: "Close and end stream?" }),
+      /* @__PURE__ */ jsx("p", { id: "close-dialog-description", className: "text-white/70 text-center text-sm mb-4", children: "Closing will stop your live broadcast." }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onCancelClose,
+            className: "flex-1 px-6 py-3 bg-white/20 hover:bg-white/30 text-white font-medium rounded-lg transition-colors",
+            "aria-label": "Cancel and continue streaming",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onConfirmClose,
+            className: "flex-1 px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors",
+            "aria-label": "Confirm end broadcast and close",
+            children: "End & Close"
+          }
+        )
+      ] })
+    ] }) }),
+    showSettings && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-20 flex items-center justify-center p-4 bg-black/80", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "bg-black/95 rounded-2xl backdrop-blur border border-white/20 max-w-md w-full max-h-[90%] overflow-hidden flex flex-col",
+        role: "dialog",
+        "aria-labelledby": "settings-dialog-title",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b border-white/10", children: [
+            /* @__PURE__ */ jsx("h2", { id: "settings-dialog-title", className: "text-white text-lg font-semibold", children: "Stream Settings" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setShowSettings(false),
+                className: "w-8 h-8 bg-white/10 hover:bg-white/20 rounded-full flex items-center justify-center transition-colors",
+                title: "Close settings",
+                "aria-label": "Close settings",
+                children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-6", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-white/80 mb-2", children: "Stream Key" }),
+              /* @__PURE__ */ jsx("div", { className: "bg-white/5 border border-white/10 rounded-lg p-3", children: /* @__PURE__ */ jsx(
+                StreamKeyDisplay,
+                {
+                  streamKey,
+                  editable: !!onStreamKeyChange,
+                  onChange: onStreamKeyChange,
+                  showCopy: true,
+                  size: "sm",
+                  layout: "vertical",
+                  darkMode: true
+                }
+              ) })
+            ] }),
+            isVideoKey && videoDevices.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-white/80 mb-2", children: "Camera" }),
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  value: selectedVideoDeviceId || "",
+                  onChange: (e) => onVideoDeviceChange?.(e.target.value),
+                  className: "w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500",
+                  "aria-label": "Select camera",
+                  children: videoDevices.map((device) => /* @__PURE__ */ jsx("option", { value: device.deviceId, className: "bg-zinc-900", children: device.label || `Camera ${device.deviceId.slice(0, 8)}` }, device.deviceId))
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "mt-3 aspect-video bg-black rounded-lg overflow-hidden border border-white/10", children: mediaStream && isVideoEnabled ? /* @__PURE__ */ jsx(
+                "video",
+                {
+                  autoPlay: true,
+                  muted: true,
+                  playsInline: true,
+                  className: "w-full h-full object-cover scale-x-[-1]",
+                  ref: (el) => {
+                    if (el && mediaStream) {
+                      el.srcObject = mediaStream;
+                    }
+                  }
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+                /* @__PURE__ */ jsx("svg", { className: "w-8 h-8 text-gray-500 mx-auto mb-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z M3 3l18 18" }) }),
+                /* @__PURE__ */ jsx("p", { className: "text-gray-500 text-xs", children: "Camera off" })
+              ] }) }) })
+            ] }),
+            audioDevices.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-white/80 mb-2", children: "Microphone" }),
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  value: selectedAudioDeviceId || "",
+                  onChange: (e) => onAudioDeviceChange?.(e.target.value),
+                  className: "w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500",
+                  "aria-label": "Select microphone",
+                  children: audioDevices.map((device) => /* @__PURE__ */ jsx("option", { value: device.deviceId, className: "bg-zinc-900", children: device.label || `Microphone ${device.deviceId.slice(0, 8)}` }, device.deviceId))
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "mt-3 h-16 bg-black rounded-lg overflow-hidden border border-white/10", children: mediaStream && !isMuted ? /* @__PURE__ */ jsx(AudioWaveform, { mediaStream, isPlaying: true }) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-gray-500 text-xs", children: isMuted ? "Microphone muted" : "No audio" }) }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "p-4 border-t border-white/10", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setShowSettings(false),
+              className: "w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors",
+              "aria-label": "Save and close settings",
+              children: "Done"
+            }
+          ) })
+        ]
+      }
+    ) })
+  ] });
+}
+function StreamKeyInput({ onSubmit, inline = false }) {
+  const [streamKey, setStreamKey] = useState("");
+  const [error, setError] = useState("");
+  const containerClass = inline ? "dialtribe-stream-key-input flex items-center justify-center h-full w-full p-4 overflow-auto" : "dialtribe-stream-key-input flex items-center justify-center min-h-screen p-4";
+  const validateStreamKey = (key) => {
+    const pattern = /^[abvw][a-zA-Z0-9]+_.+$/;
+    return pattern.test(key);
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setError("");
+    const trimmedKey = streamKey.trim();
+    if (!trimmedKey) {
+      setError("Please enter a stream key");
+      return;
+    }
+    if (!validateStreamKey(trimmedKey)) {
+      setError(
+        "Invalid stream key format. Expected format: {mediaType}{foreignId}_{key} (e.g., w1_abc123...)"
+      );
+      return;
+    }
+    onSubmit(trimmedKey);
+  };
+  return /* @__PURE__ */ jsx("div", { className: containerClass, children: /* @__PURE__ */ jsxs("div", { className: "bg-white dark:bg-zinc-900 rounded-lg border border-gray-200 dark:border-zinc-800 p-8 max-w-md w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center mb-8", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold text-black dark:text-white mb-2", children: "Start Broadcasting" }),
+      /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400", children: "Enter your stream key to get started" })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Stream Key" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: streamKey,
+            onChange: (e) => {
+              setStreamKey(e.target.value);
+              setError("");
+            },
+            className: "w-full px-4 py-3 bg-white dark:bg-zinc-800 border border-gray-300 dark:border-zinc-700 rounded-lg text-black dark:text-white font-mono text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent",
+            placeholder: "w1_abc123...",
+            autoFocus: true
+          }
+        ),
+        error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-red-600 dark:text-red-400", children: error }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-gray-500 dark:text-gray-400", children: "Paste the stream key provided by your administrator" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          className: "w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors",
+          children: "Continue"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-8 pt-6 border-t border-gray-200 dark:border-zinc-800", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-2", children: "Where do I find my stream key?" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+        "If you have access to the DialTribe dashboard, navigate to your app's ",
+        /* @__PURE__ */ jsx("strong", { children: "Stream Keys" }),
+        ' page and click the "Broadcast" button next to any active stream key.'
+      ] })
+    ] })
+  ] }) });
+}
+function DialtribeStreamer({
+  sessionToken: propSessionToken,
+  streamKey: initialStreamKey,
+  onDone,
+  onStreamKeyChange,
+  encoderServerUrl = DEFAULT_ENCODER_SERVER_URL,
+  apiBaseUrl = DIALTRIBE_API_BASE,
+  inline = false
+}) {
+  const containerClass = inline ? "dialtribe-dialtribe-streamer h-full w-full bg-black relative" : "dialtribe-dialtribe-streamer min-h-screen bg-black";
+  const centeredContainerClass = inline ? "dialtribe-dialtribe-streamer flex items-center justify-center h-full w-full p-4 bg-black relative" : "dialtribe-dialtribe-streamer flex items-center justify-center min-h-screen p-4 bg-black";
+  const dialTribeContext = useDialtribeOptional();
+  const sessionToken = propSessionToken ?? dialTribeContext?.sessionToken ?? null;
+  const [streamKey, setStreamKey] = useState(initialStreamKey || null);
+  const [state, setState] = useState("idle");
+  useEffect(() => {
+    if (initialStreamKey && initialStreamKey !== streamKey) {
+      setStreamKey(initialStreamKey);
+    }
+  }, [initialStreamKey]);
+  const [error, setError] = useState(null);
+  const [diagnostics, setDiagnostics] = useState(null);
+  const [mediaStream, setMediaStream] = useState(null);
+  const [streamer, setStreamer] = useState(null);
+  const [bytesSent, setBytesSent] = useState(0);
+  const [startTime, setStartTime] = useState(null);
+  const [isMuted, setIsMuted] = useState(false);
+  const [isVideoEnabled, setIsVideoEnabled] = useState(true);
+  const [facingMode, setFacingMode] = useState("user");
+  const [showStopConfirm, setShowStopConfirm] = useState(false);
+  const [showCloseConfirm, setShowCloseConfirm] = useState(false);
+  const [hasMultipleCameras, setHasMultipleCameras] = useState(false);
+  const [videoDevices, setVideoDevices] = useState([]);
+  const [audioDevices, setAudioDevices] = useState([]);
+  const [selectedVideoDeviceId, setSelectedVideoDeviceId] = useState();
+  const [selectedAudioDeviceId, setSelectedAudioDeviceId] = useState();
+  const videoRef = useRef(null);
+  const streamerRef = useRef(null);
+  const mediaStreamRef = useRef(null);
+  const isVideoKey = streamKey ? streamKey.startsWith("v") || streamKey.startsWith("w") : false;
+  const handleStreamKeySubmit = (key) => {
+    setStreamKey(key);
+    onStreamKeyChange?.(key);
+  };
+  const handleStreamKeyChange = (key) => {
+    setStreamKey(key);
+    onStreamKeyChange?.(key);
+  };
+  useEffect(() => {
+    if (!streamKey) return;
+    const compat = checkBrowserCompatibility();
+    if (!compat.compatible) {
+      setError(compat.error || "Browser not compatible");
+      setState("error");
+      return;
+    }
+    detectCameras();
+    requestMediaPermissions();
+  }, [streamKey]);
+  const detectCameras = async () => {
+    try {
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      const videoInputs = devices.filter((device) => device.kind === "videoinput");
+      const audioInputs = devices.filter((device) => device.kind === "audioinput");
+      console.log(`\u{1F4F7} Found ${videoInputs.length} video input device(s)`);
+      console.log(`\u{1F3A4} Found ${audioInputs.length} audio input device(s)`);
+      const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+      const hasMultiple = videoInputs.length > 1 || isIOS && isVideoKey;
+      setHasMultipleCameras(hasMultiple);
+      if (isIOS && videoInputs.length <= 1) {
+        console.log("\u{1F4F1} iOS device detected - assuming multiple cameras available");
+      }
+      setVideoDevices(videoInputs.map((d) => ({
+        deviceId: d.deviceId,
+        label: d.label || `Camera ${d.deviceId.slice(0, 8)}`
+      })));
+      setAudioDevices(audioInputs.map((d) => ({
+        deviceId: d.deviceId,
+        label: d.label || `Microphone ${d.deviceId.slice(0, 8)}`
+      })));
+      if (videoInputs.length > 0 && !selectedVideoDeviceId) {
+        setSelectedVideoDeviceId(videoInputs[0].deviceId);
+      }
+      if (audioInputs.length > 0 && !selectedAudioDeviceId) {
+        setSelectedAudioDeviceId(audioInputs[0].deviceId);
+      }
+    } catch (err) {
+      console.error("\u274C Failed to enumerate devices:", err);
+      const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+      setHasMultipleCameras(isIOS && isVideoKey);
+    }
+  };
+  useEffect(() => {
+    streamerRef.current = streamer;
+  }, [streamer]);
+  useEffect(() => {
+    mediaStreamRef.current = mediaStream;
+  }, [mediaStream]);
+  useEffect(() => {
+    return () => {
+      if (streamerRef.current) {
+        streamerRef.current.stop();
+      }
+      if (mediaStreamRef.current) {
+        mediaStreamRef.current.getTracks().forEach((track) => track.stop());
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (state === "live") {
+      const handleBeforeUnload = (e) => {
+        e.preventDefault();
+        e.returnValue = "You are currently streaming. Are you sure you want to leave?";
+        return e.returnValue;
+      };
+      window.addEventListener("beforeunload", handleBeforeUnload);
+      return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+    }
+  }, [state]);
+  useEffect(() => {
+    if (videoRef.current && mediaStream) {
+      videoRef.current.srcObject = mediaStream;
+    }
+  }, [mediaStream, isVideoEnabled]);
+  const requestMediaPermissions = async () => {
+    if (!streamKey) return;
+    try {
+      setState("requesting");
+      setError(null);
+      const constraints = getMediaConstraints({
+        isVideo: isVideoKey && isVideoEnabled,
+        facingMode
+      });
+      console.log("\u{1F4F8} Requesting media permissions:", constraints);
+      const stream = await navigator.mediaDevices.getUserMedia(constraints);
+      console.log("\u2705 Media permissions granted");
+      setMediaStream(stream);
+      setState("previewing");
+    } catch (err) {
+      console.error("\u274C Media permission error:", err);
+      if (err instanceof Error) {
+        if (err.name === "NotAllowedError" || err.name === "PermissionDeniedError") {
+          setError("Camera/microphone access denied. Please enable permissions in your browser settings.");
+        } else if (err.name === "NotFoundError") {
+          setError(isVideoKey ? "No camera or microphone found." : "No microphone found.");
+        } else {
+          setError(err.message || "Failed to access media devices");
+        }
+      } else {
+        setError("Failed to access media devices");
+      }
+      setState("error");
+    }
+  };
+  const handleStartStreaming = async () => {
+    if (!mediaStream || !streamKey) {
+      setError("No media stream available");
+      return;
+    }
+    try {
+      setState("connecting");
+      setError(null);
+      console.log("\u{1F50D} Checking broadcast availability...");
+      const checkResponse = await fetch(`${apiBaseUrl}/broadcasts/check`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${sessionToken}`
+        },
+        body: JSON.stringify({
+          streamKey
+        })
+      });
+      if (!checkResponse.ok) {
+        if (checkResponse.status === 401) {
+          console.error("\u274C Session token invalid or expired");
+          setError("Session expired. Please refresh the page and try again.");
+          setState("error");
+          dialTribeContext?.markExpired();
+          return;
+        }
+        if (checkResponse.status === 403) {
+          const data = await checkResponse.json().catch(() => ({}));
+          console.error("\u274C Permission denied:", data);
+          setError(
+            data.error || "Streaming is not enabled for this app. Please upgrade your plan or contact support."
+          );
+          setState("error");
+          return;
+        }
+        if (checkResponse.status === 409) {
+          const data = await checkResponse.json();
+          console.log("\u274C Broadcast conflict:", data);
+          setError(
+            data.error || "A broadcast is already active for this stream key. Please terminate it before starting a new one."
+          );
+          setState("error");
+          return;
+        }
+        const errorData = await checkResponse.json().catch(() => ({ error: checkResponse.statusText }));
+        console.error("\u274C Check failed:", checkResponse.status, errorData);
+        setError(errorData.error || `Failed to check broadcast availability: ${checkResponse.statusText}`);
+        setState("error");
+        return;
+      }
+      const checkData = await checkResponse.json();
+      console.log("\u2705 Broadcast check passed:", checkData);
+      const newStreamer = new WebSocketStreamer({
+        streamKey,
+        mediaStream,
+        isVideo: isVideoKey && isVideoEnabled,
+        encoderServerUrl,
+        disableCanvasRendering: true,
+        // <-- ADD THIS LINE
+        onBytesUpdate: setBytesSent,
+        onStateChange: (streamerState) => {
+          if (streamerState === "live") {
+            setState("live");
+            setStartTime(/* @__PURE__ */ new Date());
+          } else if (streamerState === "terminated") {
+            setState("terminated");
+            setStartTime(null);
+          } else if (streamerState === "error") {
+            setState("error");
+          }
+        },
+        onError: (errorMsg, diag) => {
+          setError(errorMsg);
+          if (diag) {
+            setDiagnostics(diag);
+          }
+        }
+      });
+      await newStreamer.start();
+      setStreamer(newStreamer);
+    } catch (err) {
+      console.error("\u274C Failed to start streaming:", err);
+      setError(err instanceof Error ? err.message : "Failed to start streaming");
+      setState("previewing");
+    }
+  };
+  const handleStopStreaming = () => {
+    setShowStopConfirm(true);
+  };
+  const confirmStopStreaming = () => {
+    setState("stopping");
+    setShowStopConfirm(false);
+    if (streamer) {
+      streamer.stop();
+    }
+    if (mediaStream) {
+      mediaStream.getTracks().forEach((track) => track.stop());
+    }
+    setState("stopped");
+    setStartTime(null);
+  };
+  const handleToggleMute = () => {
+    if (mediaStream) {
+      const audioTracks = mediaStream.getAudioTracks();
+      audioTracks.forEach((track) => {
+        track.enabled = !track.enabled;
+      });
+      setIsMuted(!isMuted);
+    }
+  };
+  const handleToggleVideo = () => {
+    if (!isVideoKey) return;
+    if (mediaStream) {
+      const videoTracks = mediaStream.getVideoTracks();
+      videoTracks.forEach((track) => {
+        track.enabled = !track.enabled;
+      });
+      setIsVideoEnabled(!isVideoEnabled);
+    }
+  };
+  const handleFlipCamera = async () => {
+    if (!isVideoKey || !hasMultipleCameras) return;
+    const newFacingMode = facingMode === "user" ? "environment" : "user";
+    if (state === "live" && streamer) {
+      console.log("\u{1F504} Flipping camera during live broadcast (canvas-based swap)");
+      try {
+        const constraints = getMediaConstraints({
+          isVideo: true,
+          facingMode: newFacingMode
+        });
+        const newStream = await navigator.mediaDevices.getUserMedia(constraints);
+        console.log("\u{1F4F7} Got new camera stream:", newFacingMode);
+        const newVideoTrack = newStream.getVideoTracks()[0];
+        if (newVideoTrack) {
+          await streamer.replaceVideoTrack(newVideoTrack);
+        }
+        const updatedStream = streamer.getMediaStream();
+        setMediaStream(updatedStream);
+        setFacingMode(newFacingMode);
+        if (videoRef.current) {
+          videoRef.current.srcObject = updatedStream;
+        }
+        console.log("\u2705 Camera flipped successfully - broadcast continues seamlessly");
+      } catch (err) {
+        console.error("\u274C Failed to flip camera:", err);
+        console.warn("\u26A0\uFE0F Camera flip failed - continuing with current camera");
+      }
+    } else {
+      setFacingMode(newFacingMode);
+      try {
+        const constraints = getMediaConstraints({
+          isVideo: true,
+          facingMode: newFacingMode
+        });
+        const newStream = await navigator.mediaDevices.getUserMedia(constraints);
+        console.log("\u{1F4F7} Camera flipped to:", newFacingMode);
+        if (mediaStream) {
+          mediaStream.getTracks().forEach((track) => track.stop());
+        }
+        setMediaStream(newStream);
+      } catch (err) {
+        console.error("\u274C Failed to get new camera stream:", err);
+        setFacingMode(facingMode);
+        console.warn("\u26A0\uFE0F Camera flip not available - this device may only have one camera");
+      }
+    }
+  };
+  const handleRetry = () => {
+    setError(null);
+    setState("idle");
+    requestMediaPermissions();
+  };
+  const handleDone = () => {
+    onDone?.();
+  };
+  const handleClose = () => {
+    if (state === "live") {
+      setShowCloseConfirm(true);
+    } else {
+      if (mediaStream) {
+        mediaStream.getTracks().forEach((track) => track.stop());
+      }
+      onDone?.();
+    }
+  };
+  const confirmClose = () => {
+    setShowCloseConfirm(false);
+    if (streamer) {
+      streamer.stop();
+    }
+    if (mediaStream) {
+      mediaStream.getTracks().forEach((track) => track.stop());
+    }
+    onDone?.();
+  };
+  const handleVideoDeviceChange = async (deviceId) => {
+    if (deviceId === selectedVideoDeviceId) return;
+    setSelectedVideoDeviceId(deviceId);
+    if (state !== "previewing" && state !== "live") return;
+    try {
+      const constraints = {
+        video: { deviceId: { exact: deviceId } },
+        audio: selectedAudioDeviceId ? { deviceId: { exact: selectedAudioDeviceId } } : true
+      };
+      const newStream = await navigator.mediaDevices.getUserMedia(constraints);
+      console.log(`\u{1F4F7} Switched to camera: ${deviceId}`);
+      if (state === "live" && streamer) {
+        try {
+          await streamer.updateMediaStream(newStream);
+          if (mediaStream) {
+            mediaStream.getTracks().forEach((track) => track.stop());
+          }
+          setMediaStream(newStream);
+        } catch (swapErr) {
+          console.error("\u274C Failed to hot-swap video device:", swapErr);
+          newStream.getTracks().forEach((track) => track.stop());
+        }
+      } else {
+        if (mediaStream) {
+          mediaStream.getTracks().forEach((track) => track.stop());
+        }
+        setMediaStream(newStream);
+      }
+    } catch (err) {
+      console.error("\u274C Failed to switch video device:", err);
+    }
+  };
+  const handleAudioDeviceChange = async (deviceId) => {
+    if (deviceId === selectedAudioDeviceId) return;
+    setSelectedAudioDeviceId(deviceId);
+    if (state !== "previewing" && state !== "live") return;
+    try {
+      const constraints = {
+        video: isVideoKey && isVideoEnabled && selectedVideoDeviceId ? { deviceId: { exact: selectedVideoDeviceId } } : isVideoKey && isVideoEnabled,
+        audio: { deviceId: { exact: deviceId } }
+      };
+      const newStream = await navigator.mediaDevices.getUserMedia(constraints);
+      console.log(`\u{1F3A4} Switched to microphone: ${deviceId}`);
+      if (state === "live" && streamer) {
+        try {
+          await streamer.updateMediaStream(newStream);
+          if (mediaStream) {
+            mediaStream.getTracks().forEach((track) => track.stop());
+          }
+          setMediaStream(newStream);
+        } catch (swapErr) {
+          console.error("\u274C Failed to hot-swap audio device:", swapErr);
+          newStream.getTracks().forEach((track) => track.stop());
+        }
+      } else {
+        if (mediaStream) {
+          mediaStream.getTracks().forEach((track) => track.stop());
+        }
+        setMediaStream(newStream);
+      }
+    } catch (err) {
+      console.error("\u274C Failed to switch audio device:", err);
+    }
+  };
+  if (!sessionToken) {
+    return /* @__PURE__ */ jsx("div", { className: centeredContainerClass, children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 border-4 border-gray-700 border-t-blue-600 rounded-full animate-spin mx-auto mb-4" }),
+      /* @__PURE__ */ jsx("p", { className: "text-white text-lg", children: "Connecting..." })
+    ] }) });
+  }
+  if (!streamKey) {
+    return /* @__PURE__ */ jsx(StreamKeyInput, { onSubmit: handleStreamKeySubmit, inline });
+  }
+  if (state === "error") {
+    const isBroadcastConflict = error?.includes("already active") || error?.includes("terminate it before");
+    return /* @__PURE__ */ jsx("div", { className: centeredContainerClass, children: /* @__PURE__ */ jsxs("div", { className: "bg-white dark:bg-zinc-900 rounded-lg border border-gray-200 dark:border-zinc-800 p-8 max-w-md w-full text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "w-8 h-8 text-red-600 dark:text-red-400",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-black dark:text-white mb-2", children: isBroadcastConflict ? "Broadcast Already Active" : "Error" }),
+      /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-6", children: error }),
+      isBroadcastConflict && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-6", children: "You need to terminate the existing broadcast before starting a new one." }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        !isBroadcastConflict && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleRetry,
+            className: "w-full px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors",
+            children: "Retry"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleDone,
+            className: "w-full px-6 py-2 bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 text-black dark:text-white font-medium rounded-lg transition-colors",
+            children: "Close"
+          }
+        )
+      ] })
+    ] }) });
+  }
+  if (state === "stopped") {
+    return /* @__PURE__ */ jsx("div", { className: centeredContainerClass, children: /* @__PURE__ */ jsxs("div", { className: "bg-white dark:bg-zinc-900 rounded-lg border border-gray-200 dark:border-zinc-800 p-8 max-w-md w-full text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "w-8 h-8 text-green-600 dark:text-green-400",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M5 13l4 4L19 7"
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-black dark:text-white mb-2", children: "Stream Ended" }),
+      /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-2", children: "Your broadcast has ended successfully." }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-6", children: [
+        "Total sent: ",
+        (bytesSent / 1024 / 1024).toFixed(2),
+        " MB"
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleDone,
+          className: "w-full px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors",
+          children: "Done"
+        }
+      )
+    ] }) });
+  }
+  if (state === "terminated") {
+    return /* @__PURE__ */ jsx("div", { className: centeredContainerClass, children: /* @__PURE__ */ jsxs("div", { className: "bg-white dark:bg-zinc-900 rounded-lg border border-gray-200 dark:border-zinc-800 p-8 max-w-md w-full text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 bg-orange-100 dark:bg-orange-900/20 rounded-full flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "w-8 h-8 text-orange-600 dark:text-orange-400",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-black dark:text-white mb-2", children: "Stream Ended" }),
+      /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-2", children: error || "Connection closed unexpectedly" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-2", children: [
+        "Total sent: ",
+        (bytesSent / 1024 / 1024).toFixed(2),
+        " MB"
+      ] }),
+      diagnostics && /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-400 dark:text-gray-500 mb-6 font-mono bg-gray-100 dark:bg-zinc-800 rounded p-2 text-left", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          "Codec: ",
+          diagnostics.mimeType || "unknown"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          "Chunks: ",
+          diagnostics.chunksSent,
+          " (",
+          (diagnostics.bytesSent / 1024).toFixed(1),
+          " KB)"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          "Duration: ",
+          (diagnostics.elapsedMs / 1e3).toFixed(1),
+          "s"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          "Close code: ",
+          diagnostics.closeCode ?? "N/A",
+          diagnostics.closeReason ? ` (${diagnostics.closeReason})` : ""
+        ] })
+      ] }),
+      !diagnostics && /* @__PURE__ */ jsx("div", { className: "mb-6" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleDone,
+          className: "w-full px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors",
+          children: "Done"
+        }
+      )
+    ] }) });
+  }
+  if (state === "idle" || state === "requesting") {
+    return /* @__PURE__ */ jsx("div", { className: centeredContainerClass, children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 border-4 border-gray-700 border-t-blue-600 rounded-full animate-spin mx-auto mb-4" }),
+      /* @__PURE__ */ jsx("p", { className: "text-white text-lg", children: state === "idle" ? "Initializing..." : "Requesting permissions..." })
+    ] }) });
+  }
+  const controlState = state;
+  return /* @__PURE__ */ jsxs("div", { className: `${containerClass} flex flex-col`, children: [
+    /* @__PURE__ */ jsx(
+      StreamingPreview,
+      {
+        videoRef,
+        isVideoKey,
+        isVideoEnabled,
+        mediaStream,
+        facingMode
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StreamingControls,
+      {
+        state: controlState,
+        isVideoKey,
+        isMuted,
+        isVideoEnabled,
+        facingMode,
+        hasMultipleCameras,
+        startTime,
+        bytesSent,
+        showStopConfirm,
+        streamKey,
+        onStreamKeyChange: handleStreamKeyChange,
+        onStart: handleStartStreaming,
+        onStop: handleStopStreaming,
+        onConfirmStop: confirmStopStreaming,
+        onCancelStop: () => setShowStopConfirm(false),
+        onToggleMute: handleToggleMute,
+        onToggleVideo: handleToggleVideo,
+        onFlipCamera: handleFlipCamera,
+        onClose: inline ? void 0 : handleClose,
+        showCloseConfirm,
+        onConfirmClose: confirmClose,
+        onCancelClose: () => setShowCloseConfirm(false),
+        videoDevices,
+        audioDevices,
+        selectedVideoDeviceId,
+        selectedAudioDeviceId,
+        onVideoDeviceChange: handleVideoDeviceChange,
+        onAudioDeviceChange: handleAudioDeviceChange,
+        mediaStream
+      }
+    )
+  ] });
+}
+
+// src/utils/dialtribe-popup.ts
+function calculatePopupDimensions() {
+  const screenWidth = window.screen.width;
+  const screenHeight = window.screen.height;
+  const screenAspectRatio = screenWidth / screenHeight;
+  let width;
+  let height;
+  if (screenAspectRatio > 1.2) {
+    height = Math.min(720, Math.floor(screenHeight * 0.85));
+    width = Math.floor(height * (16 / 9));
+  } else {
+    width = Math.min(720, Math.floor(screenWidth * 0.9));
+    height = Math.floor(width * (16 / 9));
+  }
+  const left = Math.floor((screenWidth - width) / 2);
+  const top = Math.floor((screenHeight - height) / 2);
+  return { width, height, left, top };
+}
+function openDialtribeStreamerPopup(options) {
+  const {
+    sessionToken,
+    streamKey,
+    streamerUrl,
+    appId,
+    additionalParams
+  } = options;
+  const { width, height, left, top } = calculatePopupDimensions();
+  const params = new URLSearchParams();
+  if (additionalParams) {
+    Object.entries(additionalParams).forEach(([key, value]) => {
+      params.append(key, value);
+    });
+  }
+  const url = `${streamerUrl}${params.toString() ? `?${params.toString()}` : ""}`;
+  const popup = window.open(
+    url,
+    "_blank",
+    `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`
+  );
+  if (!popup) {
+    console.error("Failed to open popup window - popup may be blocked");
+    return null;
+  }
+  const sendMessage = () => {
+    try {
+      popup.postMessage(
+        {
+          type: "STREAM_KEY",
+          sessionToken,
+          streamKey,
+          appId
+        },
+        window.location.origin
+      );
+    } catch (error) {
+      console.error("Failed to send credentials to popup:", error);
+    }
+  };
+  sendMessage();
+  setTimeout(sendMessage, 100);
+  setTimeout(sendMessage, 500);
+  return popup;
+}
+var openBroadcastPopup = openDialtribeStreamerPopup;
+function useDialtribeStreamerPopup() {
+  const [sessionToken, setSessionToken] = useState(null);
+  const [streamKey, setStreamKey] = useState(null);
+  const [apiBaseUrl, setApiBaseUrl] = useState("");
+  const receivedDataRef = useRef(false);
+  useEffect(() => {
+    const handleMessage = (event) => {
+      if (event.data?.type !== "STREAM_KEY") return;
+      const { sessionToken: token, streamKey: key, apiBaseUrl: url } = event.data;
+      if (token && key) {
+        receivedDataRef.current = true;
+        setSessionToken(token);
+        setStreamKey(key);
+        if (url) {
+          setApiBaseUrl(url);
+        }
+      } else if (key) {
+        receivedDataRef.current = true;
+        setStreamKey(key);
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    const requestCredentials = () => {
+      if (window.opener && !receivedDataRef.current) {
+        window.opener.postMessage({ type: "POPUP_READY" }, "*");
+      }
+    };
+    requestCredentials();
+    const pollInterval = setInterval(() => {
+      if (!receivedDataRef.current) {
+        requestCredentials();
+      } else {
+        clearInterval(pollInterval);
+      }
+    }, 200);
+    const timeout = setTimeout(() => {
+      clearInterval(pollInterval);
+    }, 1e4);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+      clearInterval(pollInterval);
+      clearTimeout(timeout);
+    };
+  }, []);
+  return {
+    sessionToken,
+    streamKey,
+    apiBaseUrl,
+    setStreamKey,
+    isReady: receivedDataRef.current
+  };
+}
+function useDialtribeStreamerLauncher(options) {
+  const {
+    sessionToken,
+    streamKey,
+    streamerUrl,
+    apiBaseUrl,
+    fallback = "fullscreen",
+    onPopupBlocked,
+    onDone,
+    onStreamKeyChange
+  } = options;
+  const [showFallback, setShowFallback] = useState(false);
+  const [wasBlocked, setWasBlocked] = useState(false);
+  const popupRef = useRef(null);
+  const sessionTokenRef = useRef(sessionToken);
+  const streamKeyRef = useRef(streamKey);
+  const apiBaseUrlRef = useRef(apiBaseUrl);
+  useEffect(() => {
+    sessionTokenRef.current = sessionToken;
+  }, [sessionToken]);
+  useEffect(() => {
+    streamKeyRef.current = streamKey;
+  }, [streamKey]);
+  useEffect(() => {
+    apiBaseUrlRef.current = apiBaseUrl;
+  }, [apiBaseUrl]);
+  useEffect(() => {
+    const handleMessage = (event) => {
+      if (event.data?.type === "POPUP_READY" && popupRef.current) {
+        popupRef.current.postMessage(
+          {
+            type: "STREAM_KEY",
+            sessionToken: sessionTokenRef.current,
+            streamKey: streamKeyRef.current,
+            apiBaseUrl: apiBaseUrlRef.current
+          },
+          "*"
+        );
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, []);
+  const launch = useCallback(() => {
+    if (!sessionToken) {
+      console.warn("Cannot launch streamer: no session token");
+      return;
+    }
+    setWasBlocked(false);
+    const popup = openDialtribeStreamerPopup({
+      sessionToken,
+      streamKey,
+      streamerUrl
+    });
+    if (popup) {
+      popupRef.current = popup;
+      return;
+    }
+    setWasBlocked(true);
+    onPopupBlocked?.();
+    switch (fallback) {
+      case "fullscreen":
+        setShowFallback(true);
+        break;
+      case "newTab":
+        window.open(streamerUrl, "_blank");
+        break;
+    }
+  }, [sessionToken, streamKey, streamerUrl, fallback, onPopupBlocked]);
+  const closeFallback = useCallback(() => {
+    setShowFallback(false);
+    onDone?.();
+  }, [onDone]);
+  const Fallback = useCallback(() => {
+    if (fallback !== "fullscreen" || !showFallback) {
+      return null;
+    }
+    if (typeof document === "undefined") {
+      return null;
+    }
+    const streamerElement = React2.createElement(DialtribeStreamer, {
+      sessionToken: sessionToken || void 0,
+      streamKey: streamKey || void 0,
+      apiBaseUrl,
+      onDone: closeFallback,
+      onStreamKeyChange
+    });
+    const overlayElement = React2.createElement(
+      DialtribeOverlay,
+      {
+        mode: "fullscreen",
+        isOpen: true,
+        onClose: closeFallback,
+        children: streamerElement
+      }
+    );
+    return createPortal(overlayElement, document.body);
+  }, [fallback, showFallback, closeFallback, sessionToken, streamKey, apiBaseUrl, onStreamKeyChange]);
+  return {
+    launch,
+    Fallback,
+    showFallback,
+    closeFallback,
+    popupRef: popupRef.current,
+    wasBlocked
+  };
+}
 
-export { AudioWaveform, BroadcastPlayer, BroadcastPlayerErrorBoundary, BroadcastPlayerModal, CDN_DOMAIN, DIALTRIBE_API_BASE, DialTribeClient, DialTribeProvider, ENDPOINTS, HTTP_STATUS, HelloWorld, LoadingSpinner, buildBroadcastCdnUrl, buildBroadcastS3KeyPrefix, formatTime, useDialTribe };
+export { AudioWaveform, CDN_DOMAIN, DEFAULT_ENCODER_SERVER_URL, DIALTRIBE_API_BASE, DialtribeClient, DialtribeOverlay, DialtribePlayer, DialtribePlayerErrorBoundary, DialtribeProvider, DialtribeStreamer, ENDPOINTS, HTTP_STATUS, HelloWorld, LoadingSpinner, StreamKeyDisplay, StreamKeyInput, StreamingControls, StreamingPreview, WebSocketStreamer, buildBroadcastCdnUrl, buildBroadcastS3KeyPrefix, calculatePopupDimensions, checkBrowserCompatibility, formatTime, getMediaConstraints, getMediaRecorderOptions, openBroadcastPopup, openDialtribeStreamerPopup, useDialtribe, useDialtribeStreamerLauncher, useDialtribeStreamerPopup };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map