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

package/dist/dialtribe-streamer.mjs

@@ -0,0 +1,4799 @@
+import React2, { createContext, useState, useCallback, useEffect, useContext, useRef, useMemo, Component } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import ReactPlayer from 'react-player';
+import { createPortal } from 'react-dom';
+
+// src/context/DialtribeProvider.tsx
+var DialtribeContext = createContext(null);
+function DialtribeProvider({
+  sessionToken: initialToken,
+  onTokenRefresh,
+  onTokenExpired,
+  apiBaseUrl,
+  children
+}) {
+  const [sessionToken, setSessionTokenState] = useState(initialToken);
+  const [isExpired, setIsExpired] = useState(false);
+  const setSessionToken = useCallback(
+    (newToken, expiresAt) => {
+      setSessionTokenState(newToken);
+      setIsExpired(false);
+      if (expiresAt) {
+        onTokenRefresh?.(newToken, expiresAt);
+      }
+    },
+    [onTokenRefresh]
+  );
+  const markExpired = useCallback(() => {
+    setIsExpired(true);
+    onTokenExpired?.();
+  }, [onTokenExpired]);
+  useEffect(() => {
+    if (initialToken !== sessionToken) {
+      setSessionTokenState(initialToken);
+      setIsExpired(false);
+    }
+  }, [initialToken, sessionToken]);
+  const value = {
+    sessionToken,
+    setSessionToken,
+    isExpired,
+    markExpired,
+    apiBaseUrl
+  };
+  return /* @__PURE__ */ jsx(DialtribeContext.Provider, { value, children });
+}
+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>'
+    );
+  }
+  return context;
+}
+function useDialtribeOptional() {
+  return useContext(DialtribeContext);
+}
+
+// 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;
+  }
+  return "https://dialtribe.com/api/public/v1";
+}
+var DIALTRIBE_API_BASE = getDefaultApiBaseUrl();
+function getEndpoints(baseUrl = DIALTRIBE_API_BASE) {
+  return {
+    broadcasts: `${baseUrl}/broadcasts`,
+    broadcast: (id) => `${baseUrl}/broadcasts/${id}`,
+    contentPlay: `${baseUrl}/content/play`,
+    presignedUrl: `${baseUrl}/media/presigned-url`,
+    audienceStart: `${baseUrl}/audiences/start`,
+    audiencePing: `${baseUrl}/audiences/ping`,
+    sessionPing: `${baseUrl}/sessions/ping`
+  };
+}
+var ENDPOINTS = getEndpoints();
+var DialtribeClient = class {
+  constructor(config) {
+    this.config = config;
+    this.endpoints = config.apiBaseUrl ? getEndpoints(config.apiBaseUrl) : ENDPOINTS;
+  }
+  /**
+   * Make an authenticated request to Dialtribe API
+   *
+   * Automatically:
+   * - Adds Authorization header with session token
+   * - Checks for X-Session-Token header in response (token refresh)
+   * - Calls onTokenRefresh if new token is provided
+   * - Calls onTokenExpired on 401 errors
+   */
+  async fetch(url, options = {}) {
+    const headers = new Headers(options.headers);
+    headers.set("Authorization", `Bearer ${this.config.sessionToken}`);
+    headers.set("Content-Type", "application/json");
+    const response = await fetch(url, {
+      ...options,
+      headers
+    });
+    const newToken = response.headers.get("X-Session-Token");
+    const expiresAt = response.headers.get("X-Session-Expires");
+    if (newToken && expiresAt) {
+      this.config.onTokenRefresh?.(newToken, expiresAt);
+    }
+    if (response.status === 401) {
+      this.config.onTokenExpired?.();
+      throw new Error("Session token expired or invalid");
+    }
+    return response;
+  }
+  /**
+   * Update the session token
+   * Called automatically when token is refreshed, or manually by user
+   */
+  setSessionToken(token) {
+    this.config.sessionToken = token;
+  }
+  /**
+   * Get list of broadcasts for the authenticated app
+   */
+  async getBroadcasts(params) {
+    const searchParams = new URLSearchParams();
+    if (params?.page) searchParams.set("page", params.page.toString());
+    if (params?.limit) searchParams.set("limit", params.limit.toString());
+    if (params?.broadcastStatus) searchParams.set("broadcastStatus", params.broadcastStatus.toString());
+    if (params?.search) searchParams.set("search", params.search);
+    if (params?.includeDeleted) searchParams.set("includeDeleted", "true");
+    const url = `${this.endpoints.broadcasts}${searchParams.toString() ? `?${searchParams}` : ""}`;
+    const response = await this.fetch(url);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch broadcasts: ${response.status} ${response.statusText}`);
+    }
+    return response.json();
+  }
+  /**
+   * Get a single broadcast by ID
+   */
+  async getBroadcast(id) {
+    const response = await this.fetch(this.endpoints.broadcast(id));
+    if (!response.ok) {
+      if (response.status === 404) {
+        throw new Error("Broadcast not found");
+      }
+      throw new Error(`Failed to fetch broadcast: ${response.status} ${response.statusText}`);
+    }
+    return response.json();
+  }
+  /**
+   * Get presigned URL for media playback
+   *
+   * @param broadcastId - Broadcast ID
+   * @param hash - Broadcast hash (optional if using session token)
+   * @param action - 'download' to force download, otherwise streams
+   */
+  async getPlaybackUrl(params) {
+    const searchParams = new URLSearchParams({
+      broadcastId: params.broadcastId.toString()
+    });
+    if (params.hash) searchParams.set("hash", params.hash);
+    if (params.action) searchParams.set("action", params.action);
+    const url = `${this.endpoints.contentPlay}?${searchParams}`;
+    const response = await this.fetch(url, {
+      redirect: "manual"
+      // Don't follow redirect, we want the URL
+    });
+    const location = response.headers.get("Location");
+    if (!location) {
+      throw new Error("No playback URL returned from API");
+    }
+    return location;
+  }
+  /**
+   * Refresh a presigned URL before it expires
+   *
+   * @param broadcastId - Broadcast ID
+   * @param hash - Broadcast hash
+   * @param fileType - Type of media file
+   */
+  async refreshPresignedUrl(params) {
+    const searchParams = new URLSearchParams({
+      broadcastId: params.broadcastId.toString(),
+      hash: params.hash,
+      fileType: params.fileType
+    });
+    const url = `${this.endpoints.presignedUrl}?${searchParams}`;
+    const response = await this.fetch(url);
+    if (!response.ok) {
+      throw new Error(`Failed to refresh URL: ${response.status} ${response.statusText}`);
+    }
+    return response.json();
+  }
+  /**
+   * Start a new audience tracking session
+   *
+   * @returns audienceId and optional resumePosition
+   */
+  async startSession(params) {
+    const response = await this.fetch(this.endpoints.audienceStart, {
+      method: "POST",
+      body: JSON.stringify(params)
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to start session: ${response.status} ${response.statusText}`);
+    }
+    return response.json();
+  }
+  /**
+   * Send a session ping event
+   *
+   * Event types:
+   * - 0: PAUSE/STOP
+   * - 1: PLAY/START
+   * - 2: HEARTBEAT
+   * - 3: UNMOUNT
+   */
+  async sendSessionPing(params) {
+    const response = await this.fetch(this.endpoints.audiencePing, {
+      method: "POST",
+      body: JSON.stringify(params)
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to send session ping: ${response.status} ${response.statusText}`);
+    }
+    if (response.status === 204) {
+      return;
+    }
+    return response.json();
+  }
+};
+
+// 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 AudioWaveform({
+  audioElement,
+  mediaStream,
+  isPlaying = false,
+  isLive = false
+}) {
+  const canvasRef = useRef(null);
+  const animationFrameRef = useRef(void 0);
+  const [setupError, setSetupError] = useState(false);
+  const isPlayingRef = useRef(isPlaying);
+  const isLiveRef = useRef(isLive);
+  useEffect(() => {
+    isPlayingRef.current = isPlaying;
+  }, [isPlaying]);
+  useEffect(() => {
+    isLiveRef.current = isLive;
+  }, [isLive]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    if (audioElement) {
+      const hasMediaAPI = "play" in audioElement && "pause" in audioElement && "currentTime" in audioElement;
+      const isMediaElement = audioElement instanceof HTMLMediaElement;
+      if (!hasMediaAPI && !isMediaElement) {
+        console.warn(
+          "[AudioWaveform] Invalid audio element - missing media API"
+        );
+        return;
+      }
+      console.log("[AudioWaveform] Audio element validation:", {
+        tagName: audioElement.tagName,
+        isHTMLMediaElement: isMediaElement,
+        hasMediaAPI,
+        willAttemptVisualization: true
+      });
+    }
+    const canUseAudioElement = audioElement && audioElement instanceof HTMLMediaElement;
+    const isHLSLiveStream = audioElement && !canUseAudioElement;
+    if (!audioElement && !mediaStream || audioElement && !canUseAudioElement) {
+      if (isHLSLiveStream) {
+        let time = 0;
+        let frozenTime = 0;
+        let wasFrozen = false;
+        const barPhases = Array.from(
+          { length: 128 },
+          () => Math.random() * Math.PI * 2
+        );
+        const barSpeeds = Array.from(
+          { length: 128 },
+          () => 0.8 + Math.random() * 0.4
+        );
+        const glowPhases = Array.from(
+          { length: 128 },
+          () => Math.random() * Math.PI * 2
+        );
+        const glowSpeeds = Array.from(
+          { length: 128 },
+          () => 0.7 + Math.random() * 0.6
+        );
+        const drawEnhancedWaveform = () => {
+          ctx.fillStyle = "#000";
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
+          const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
+          gradient.addColorStop(0, "#06b6d4");
+          gradient.addColorStop(0.3, "#3b82f6");
+          gradient.addColorStop(0.6, "#8b5cf6");
+          gradient.addColorStop(1, "#ec4899");
+          const currentlyLive = isLiveRef.current;
+          if (currentlyLive) {
+            time += 0.02;
+            wasFrozen = false;
+          } else if (!wasFrozen) {
+            frozenTime = time;
+            wasFrozen = true;
+          }
+          const currentTime = wasFrozen ? frozenTime : time;
+          const barCount = 128;
+          const barWidth = canvas.width / barCount;
+          const gap = 2;
+          const maxHeight = canvas.height * 0.9;
+          for (let i = 0; i < barCount; i++) {
+            const primaryWave = Math.sin(
+              i / barCount * Math.PI * 2 * 2.5 - currentTime * barSpeeds[i] + barPhases[i]
+            ) * (maxHeight * 0.35);
+            const secondaryWave = Math.sin(
+              i / barCount * Math.PI * 2 * 4 - currentTime * barSpeeds[i] * 1.3 + barPhases[i] * 0.7
+            ) * (maxHeight * 0.15);
+            const tertiaryWave = Math.sin(
+              i / barCount * Math.PI * 2 * 7 - currentTime * barSpeeds[i] * 0.8 + barPhases[i] * 1.5
+            ) * (maxHeight * 0.1);
+            const baseHeight = maxHeight * 0.15;
+            const combinedWave = primaryWave + secondaryWave + tertiaryWave;
+            const barHeight = Math.max(
+              10,
+              Math.min(maxHeight, baseHeight + combinedWave)
+            );
+            const opacityWave1 = Math.sin(
+              i / barCount * Math.PI * 2 * 1.5 - currentTime * 1.2
+            );
+            const opacityWave2 = Math.sin(
+              i / barCount * Math.PI * 2 * 3.5 - currentTime * 0.7
+            );
+            const opacity = 0.3 + opacityWave1 * 0.25 + opacityWave2 * 0.15;
+            const glowWave = Math.sin(
+              currentTime * glowSpeeds[i] + glowPhases[i]
+            );
+            const glowIntensity = 8 + glowWave * 12;
+            const x = i * barWidth;
+            const y = canvas.height / 2 - barHeight / 2;
+            ctx.shadowBlur = glowIntensity;
+            ctx.shadowColor = "#3b82f6";
+            ctx.fillStyle = gradient;
+            ctx.globalAlpha = Math.max(0.15, Math.min(0.9, opacity));
+            ctx.fillRect(x + gap / 2, y, barWidth - gap, barHeight);
+          }
+          ctx.globalAlpha = 1;
+          ctx.shadowBlur = 0;
+        };
+        const animationId2 = setInterval(drawEnhancedWaveform, 1e3 / 60);
+        return () => clearInterval(animationId2);
+      }
+      let waveOffset = 0;
+      const drawPlaceholder = () => {
+        ctx.fillStyle = "#000";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
+        gradient.addColorStop(0, "#06b6d4");
+        gradient.addColorStop(0.3, "#3b82f6");
+        gradient.addColorStop(0.6, "#8b5cf6");
+        gradient.addColorStop(1, "#ec4899");
+        waveOffset += 83e-4;
+        const barCount = 128;
+        const barWidth = canvas.width / barCount;
+        const gap = 2;
+        const baseHeight = 15;
+        const waveAmplitude = 10;
+        for (let i = 0; i < barCount; i++) {
+          const wave = Math.sin(i / barCount * Math.PI * 2 * 3 - waveOffset) * waveAmplitude;
+          const barHeight = baseHeight + wave;
+          const opacityWave = Math.sin(
+            i / barCount * Math.PI * 2 * 2 - waveOffset * 1.5
+          );
+          const opacity = 0.5 + opacityWave * 0.3;
+          const x = i * barWidth;
+          const y = canvas.height / 2 - barHeight / 2;
+          ctx.shadowBlur = 15;
+          ctx.shadowColor = "#3b82f6";
+          ctx.fillStyle = gradient;
+          ctx.globalAlpha = opacity;
+          ctx.fillRect(x + gap / 2, y, barWidth - gap, barHeight);
+        }
+        ctx.globalAlpha = 1;
+        ctx.shadowBlur = 0;
+      };
+      const animationId = setInterval(drawPlaceholder, 1e3 / 60);
+      return () => clearInterval(animationId);
+    }
+    let audioContext = null;
+    let analyser = null;
+    let source = null;
+    try {
+      audioContext = new AudioContext();
+      analyser = audioContext.createAnalyser();
+      analyser.fftSize = 2048;
+      if (audioElement) {
+        console.log("[AudioWaveform] Creating audio source from element:", {
+          tagName: audioElement.tagName,
+          src: audioElement.src?.substring(0, 80),
+          readyState: audioElement.readyState,
+          paused: audioElement.paused,
+          currentTime: audioElement.currentTime,
+          hasSourceNode: !!audioElement.audioSourceNode,
+          isNativeElement: audioElement instanceof HTMLMediaElement
+        });
+        if (!(audioElement instanceof HTMLMediaElement)) {
+          console.warn(
+            "[AudioWaveform] Cannot visualize custom element (HLS-VIDEO), falling back to static waveform"
+          );
+          setSetupError(true);
+          return;
+        }
+        if (audioElement.audioSourceNode) {
+          console.log(
+            "[AudioWaveform] Audio source already exists, reusing it"
+          );
+          source = audioElement.audioSourceNode;
+          source?.connect(analyser);
+          analyser.connect(audioContext.destination);
+        } else {
+          try {
+            source = audioContext.createMediaElementSource(audioElement);
+            source.connect(analyser);
+            analyser.connect(audioContext.destination);
+            audioElement.audioSourceNode = source;
+            console.log(
+              "[AudioWaveform] Audio source created and connected successfully"
+            );
+          } catch (error) {
+            console.error(
+              "[AudioWaveform] Failed to create media element source:",
+              error
+            );
+            setSetupError(true);
+            return;
+          }
+        }
+        audioElement.addEventListener("play", () => {
+          console.log("[AudioWaveform] Play event - setting isPlaying to true");
+          isPlayingRef.current = true;
+        });
+        audioElement.addEventListener("pause", () => {
+          console.log(
+            "[AudioWaveform] Pause event - setting isPlaying to false"
+          );
+          isPlayingRef.current = false;
+        });
+        audioElement.addEventListener("ended", () => {
+          console.log(
+            "[AudioWaveform] Ended event - setting isPlaying to false"
+          );
+          isPlayingRef.current = false;
+        });
+        console.log("[AudioWaveform] Initial audio state:", {
+          paused: audioElement.paused,
+          currentTime: audioElement.currentTime,
+          readyState: audioElement.readyState
+        });
+        if (!audioElement.paused) {
+          isPlayingRef.current = true;
+        }
+      } else if (mediaStream) {
+        source = audioContext.createMediaStreamSource(mediaStream);
+        source.connect(analyser);
+        isPlayingRef.current = true;
+      } else {
+        return;
+      }
+      const bufferLength = analyser.frequencyBinCount;
+      const dataArray = new Uint8Array(bufferLength);
+      let waveOffset = 0;
+      const drawStaticWaveform = () => {
+        ctx.fillStyle = "#000";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
+        gradient.addColorStop(0, "#06b6d4");
+        gradient.addColorStop(0.3, "#3b82f6");
+        gradient.addColorStop(0.6, "#8b5cf6");
+        gradient.addColorStop(1, "#ec4899");
+        waveOffset += 83e-4;
+        const barCount = 128;
+        const barWidth = canvas.width / barCount;
+        const gap = 2;
+        const baseHeight = 15;
+        const waveAmplitude = 10;
+        for (let i = 0; i < barCount; i++) {
+          const wave = Math.sin(i / barCount * Math.PI * 2 * 3 - waveOffset) * waveAmplitude;
+          const barHeight = baseHeight + wave;
+          const opacityWave = Math.sin(
+            i / barCount * Math.PI * 2 * 2 - waveOffset * 1.5
+          );
+          const opacity = 0.5 + opacityWave * 0.3;
+          const x = i * barWidth;
+          const y = canvas.height / 2 - barHeight / 2;
+          ctx.shadowBlur = 15;
+          ctx.shadowColor = "#3b82f6";
+          ctx.fillStyle = gradient;
+          ctx.globalAlpha = opacity;
+          ctx.fillRect(x + gap / 2, y, barWidth - gap, barHeight);
+        }
+        ctx.globalAlpha = 1;
+        ctx.shadowBlur = 0;
+      };
+      let frameCount = 0;
+      const draw = () => {
+        if (!analyser) return;
+        animationFrameRef.current = requestAnimationFrame(draw);
+        analyser.getByteFrequencyData(dataArray);
+        const hasActivity = dataArray.some((value) => value > 0);
+        const maxValue = Math.max(...dataArray);
+        frameCount++;
+        if (frameCount < 5 || frameCount % 60 === 0) {
+          console.log("[AudioWaveform] Frame", frameCount, "Audio activity:", {
+            hasActivity,
+            maxValue,
+            isPlaying: isPlayingRef.current,
+            sampleValues: [
+              dataArray[0],
+              dataArray[10],
+              dataArray[50],
+              dataArray[100]
+            ],
+            avgValue: dataArray.reduce((a, b) => a + b, 0) / dataArray.length
+          });
+        }
+        if (!hasActivity || !isPlayingRef.current) {
+          if (frameCount < 5) {
+            console.log(
+              "[AudioWaveform] No activity or not playing, showing static waveform"
+            );
+          }
+          drawStaticWaveform();
+          return;
+        }
+        ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
+        gradient.addColorStop(0, "#06b6d4");
+        gradient.addColorStop(0.3, "#3b82f6");
+        gradient.addColorStop(0.6, "#8b5cf6");
+        gradient.addColorStop(1, "#ec4899");
+        const barCount = 128;
+        const barWidth = canvas.width / barCount;
+        const gap = 2;
+        for (let i = 0; i < barCount; i++) {
+          const barHeight = dataArray[i] / 255 * canvas.height * 0.8;
+          const x = i * barWidth;
+          const y = canvas.height / 2 - barHeight / 2;
+          ctx.shadowBlur = 20;
+          ctx.shadowColor = "#3b82f6";
+          ctx.fillStyle = gradient;
+          ctx.fillRect(x + gap / 2, y, barWidth - gap, barHeight);
+        }
+        ctx.shadowBlur = 0;
+      };
+      draw();
+    } catch (error) {
+      console.error("Error setting up audio visualization:", error);
+      setSetupError(true);
+      if (ctx) {
+        ctx.fillStyle = "#000";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.strokeStyle = "#3b82f6";
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.moveTo(0, canvas.height / 2);
+        ctx.lineTo(canvas.width, canvas.height / 2);
+        ctx.stroke();
+      }
+    }
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+      if (audioContext) {
+        audioContext.close();
+      }
+    };
+  }, [audioElement, mediaStream, isLive]);
+  return /* @__PURE__ */ jsxs("div", { className: "w-full h-full", children: [
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        width: 1600,
+        height: 400,
+        className: "w-full h-full",
+        style: { display: "block" }
+      }
+    ),
+    setupError && /* @__PURE__ */ jsx("p", { className: "text-gray-400 text-xs text-center mt-2 absolute bottom-4", children: "Audio visualization unavailable" })
+  ] });
+}
+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
+      }
+    )
+  ] });
+}
+var sizeClasses = {
+  sm: "h-4 w-4 border-2",
+  md: "h-8 w-8 border-4",
+  lg: "h-12 w-12 border-4"
+};
+var variantClasses = {
+  default: "border-gray-200 dark:border-gray-800 border-t-black dark:border-t-white",
+  primary: "border-gray-300 dark:border-gray-700 border-t-blue-600 dark:border-t-blue-400",
+  white: "border-gray-600 border-t-white"
+};
+function LoadingSpinner({
+  text,
+  size = "md",
+  variant = "default"
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-3", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${sizeClasses[size]} ${variantClasses[variant]} rounded-full animate-spin`,
+        role: "status",
+        "aria-label": "Loading"
+      }
+    ),
+    text && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: text })
+  ] });
+}
+
+// src/utils/cdn.ts
+var CDN_DOMAIN = typeof process !== "undefined" && process.env?.CONTENT_CDN_DOMAIN ? process.env.CONTENT_CDN_DOMAIN : "cdn.dialtribe.com";
+function shardHash(hash) {
+  return hash.toLowerCase().split("").join("/");
+}
+function buildBroadcastS3KeyPrefix(appHash, broadcastHash) {
+  return `a/${shardHash(appHash)}/b/${shardHash(broadcastHash)}/`;
+}
+function buildBroadcastCdnUrl(appHash, broadcastHash, filename) {
+  const keyPrefix = buildBroadcastS3KeyPrefix(appHash, broadcastHash);
+  return `https://${CDN_DOMAIN}/${keyPrefix}${filename}`;
+}
+
+// src/utils/format.ts
+function formatTime(seconds, includeHours) {
+  if (isNaN(seconds) || !isFinite(seconds) || seconds < 0) {
+    return "0:00";
+  }
+  const hrs = Math.floor(seconds / 3600);
+  const mins = Math.floor(seconds % 3600 / 60);
+  const secs = Math.floor(seconds % 60);
+  const secStr = secs.toString().padStart(2, "0");
+  const minStr = mins.toString().padStart(2, "0");
+  if (hrs > 0 || includeHours) {
+    return `${hrs}:${minStr}:${secStr}`;
+  }
+  return `${mins}:${secStr}`;
+}
+
+// src/utils/http-status.ts
+var HTTP_STATUS = {
+  // 2xx Success
+  OK: 200,
+  CREATED: 201,
+  ACCEPTED: 202,
+  NO_CONTENT: 204,
+  // 3xx Redirection
+  MOVED_PERMANENTLY: 301,
+  FOUND: 302,
+  SEE_OTHER: 303,
+  NOT_MODIFIED: 304,
+  TEMPORARY_REDIRECT: 307,
+  PERMANENT_REDIRECT: 308,
+  // 4xx Client Errors
+  BAD_REQUEST: 400,
+  UNAUTHORIZED: 401,
+  PAYMENT_REQUIRED: 402,
+  FORBIDDEN: 403,
+  NOT_FOUND: 404,
+  METHOD_NOT_ALLOWED: 405,
+  NOT_ACCEPTABLE: 406,
+  CONFLICT: 409,
+  GONE: 410,
+  PAYLOAD_TOO_LARGE: 413,
+  UNSUPPORTED_MEDIA_TYPE: 415,
+  UNPROCESSABLE_ENTITY: 422,
+  TOO_MANY_REQUESTS: 429,
+  // 5xx Server Errors
+  INTERNAL_SERVER_ERROR: 500,
+  NOT_IMPLEMENTED: 501,
+  BAD_GATEWAY: 502,
+  SERVICE_UNAVAILABLE: 503,
+  GATEWAY_TIMEOUT: 504
+};
+
+// src/utils/debug.ts
+var DEBUG = process.env.NODE_ENV === "development";
+var debug = {
+  log: (...args) => {
+    if (DEBUG) console.log(...args);
+  },
+  warn: (...args) => {
+    if (DEBUG) console.warn(...args);
+  },
+  error: (...args) => {
+    if (DEBUG) console.error(...args);
+  }
+};
+var URL_EXPIRATION_MS = 6 * 60 * 60 * 1e3;
+var REFRESH_THRESHOLD_MS = 5 * 60 * 1e3;
+var REFRESH_CHECK_INTERVAL_MS = 6e4;
+var PLAYBACK_RESUME_DELAY_MS = 500;
+var TRAILING_WORDS = 3;
+function buildPlaybackUrl(broadcastId, hash, action) {
+  const searchParams = new URLSearchParams({
+    broadcastId: broadcastId.toString(),
+    hash
+  });
+  if (action) {
+    searchParams.set("action", action);
+  }
+  return `${ENDPOINTS.contentPlay}?${searchParams}`;
+}
+function getErrorMessage(error) {
+  if (!error) return "Unable to play media. Please try again.";
+  const errorMsg = error instanceof Error ? error.message : String(error);
+  const errorCode = error?.code;
+  const errorStatus = error?.status || error?.statusCode;
+  if (errorMsg.toLowerCase().includes("network") || errorMsg.includes("NetworkError")) {
+    return "No internet connection detected. Please check your network and try again.";
+  }
+  if (errorStatus === 401 || errorMsg.includes("401") || errorMsg.includes("Unauthorized")) {
+    return "Session expired. Please refresh the page and log in again.";
+  }
+  if (errorStatus === 403 || errorMsg.includes("403") || errorMsg.includes("Forbidden")) {
+    return "Access denied. You may not have permission to view this content.";
+  }
+  if (errorStatus === 404 || errorMsg.includes("404") || errorMsg.includes("not found")) {
+    return "Media file not found. It may have been deleted or is still processing.";
+  }
+  if (errorMsg.includes("no supported sources") || errorMsg.includes("NotSupportedError")) {
+    return "This media format is not supported by your browser. Try using Chrome, Firefox, or Safari.";
+  }
+  if (errorMsg.includes("MEDIA_ERR_SRC_NOT_SUPPORTED") || errorCode === 4) {
+    return "Media file is not available or the format is unsupported.";
+  }
+  if (errorMsg.includes("MEDIA_ERR_NETWORK") || errorCode === 2) {
+    return "Network error while loading media. Please check your connection.";
+  }
+  if (errorMsg.includes("MEDIA_ERR_DECODE") || errorCode === 3) {
+    return "Media file is corrupted or cannot be decoded. Please contact support.";
+  }
+  if (errorMsg.includes("AbortError")) {
+    return "Media loading was interrupted. Please try again.";
+  }
+  return "Unable to play media. Please try refreshing the page or contact support if the problem persists.";
+}
+function DialtribePlayer({
+  broadcast,
+  appId,
+  contentId,
+  foreignId,
+  foreignTier = "guest",
+  renderClipCreator,
+  onError,
+  className = "",
+  enableKeyboardShortcuts = false
+}) {
+  const { sessionToken, setSessionToken, markExpired, apiBaseUrl } = useDialtribe();
+  const clientRef = useRef(null);
+  if (!clientRef.current && sessionToken) {
+    clientRef.current = new DialtribeClient({
+      sessionToken,
+      apiBaseUrl,
+      onTokenRefresh: (newToken, expiresAt) => {
+        debug.log(`[DialtribeClient] Token refreshed, expires at ${expiresAt}`);
+        setSessionToken(newToken, expiresAt);
+      },
+      onTokenExpired: () => {
+        debug.error("[DialtribeClient] Token expired");
+        markExpired();
+      }
+    });
+  } else if (clientRef.current && sessionToken) {
+    clientRef.current.setSessionToken(sessionToken);
+  }
+  const client = clientRef.current;
+  const playerRef = useRef(null);
+  const transcriptContainerRef = useRef(null);
+  const activeWordRef = useRef(null);
+  const [audioElement, setAudioElement] = useState(
+    null
+  );
+  const [playing, setPlaying] = useState(false);
+  const [played, setPlayed] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [volume, setVolume] = useState(1);
+  const [muted, setMuted] = useState(false);
+  const [seeking, setSeeking] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+  const [hasEnded, setHasEnded] = useState(false);
+  const [hasStreamEnded, setHasStreamEnded] = useState(false);
+  const [showTranscript, setShowTranscript] = useState(false);
+  const [transcriptData, setTranscriptData] = useState(
+    null
+  );
+  const [currentTime, setCurrentTime] = useState(0);
+  const [isLoadingTranscript, setIsLoadingTranscript] = useState(false);
+  const [isLoadingVideo, setIsLoadingVideo] = useState(true);
+  const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
+  const isScrollingProgrammatically = useRef(false);
+  const lastActiveWordIndex = useRef(-1);
+  const [showClipCreator, setShowClipCreator] = useState(false);
+  const initialPlaybackTypeRef = useRef(null);
+  const [currentPlaybackInfo, setCurrentPlaybackInfo] = useState(null);
+  const [urlExpiresAt, setUrlExpiresAt] = useState(null);
+  const isRefreshingUrl = useRef(false);
+  const [audienceId, setAudienceId] = useState(null);
+  const [sessionId] = useState(() => {
+    if (typeof crypto !== "undefined" && crypto.randomUUID) {
+      return crypto.randomUUID();
+    }
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+      const r = Math.random() * 16 | 0;
+      const v = c === "x" ? r : r & 3 | 8;
+      return v.toString(16);
+    });
+  });
+  const heartbeatIntervalRef = useRef(null);
+  const hasInitializedSession = useRef(false);
+  const refreshPresignedUrl = useCallback(
+    async (fileType) => {
+      if (!broadcast.hash || isRefreshingUrl.current || !client) {
+        debug.log(
+          "[URL Refresh] Skipping refresh - no hash, already refreshing, or no client"
+        );
+        return false;
+      }
+      if (fileType === "hls") {
+        debug.log("[URL Refresh] HLS does not need URL refresh");
+        return false;
+      }
+      isRefreshingUrl.current = true;
+      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}`
+        );
+        setCurrentPlaybackInfo({ url: data.url, type: fileType });
+        setUrlExpiresAt(new Date(data.expiresAt));
+        if (errorMessage.includes("URL") || errorMessage.includes("session") || errorMessage.includes("refresh")) {
+          setHasError(false);
+          setErrorMessage("");
+        }
+        return true;
+      } catch (error) {
+        if (error instanceof Error && error.name === "AbortError") {
+          debug.log("[URL Refresh] Request aborted");
+          return false;
+        }
+        debug.error("[URL Refresh] Failed to refresh presigned URL:", error);
+        setHasError(true);
+        setErrorMessage(
+          "Unable to refresh media URL. The session may have expired."
+        );
+        if (onError && error instanceof Error) {
+          onError(error);
+        }
+        return false;
+      } finally {
+        isRefreshingUrl.current = false;
+      }
+    },
+    [broadcast.hash, broadcast.id, errorMessage, client, onError]
+  );
+  const getScreenSize = () => {
+    if (typeof window === "undefined") return "unknown";
+    const width = window.innerWidth;
+    if (width < 768) return "mobile";
+    if (width < 1024) return "tablet";
+    return "desktop";
+  };
+  const initializeTrackingSession = useCallback(async () => {
+    if (!contentId || !appId || !client) return;
+    if (currentPlaybackInfo?.type === "hls" && broadcast.broadcastStatus === 1)
+      return;
+    if (hasInitializedSession.current) return;
+    hasInitializedSession.current = true;
+    try {
+      const screenSize = getScreenSize();
+      const platformInfo = `${navigator.platform || "Unknown"} (${screenSize})`;
+      const data = await client.startSession({
+        contentId,
+        broadcastId: broadcast.id,
+        appId,
+        foreignId: foreignId || null,
+        foreignTier: foreignTier || "guest",
+        sessionId,
+        fileType: currentPlaybackInfo?.type || "mp3",
+        platform: platformInfo,
+        userAgent: navigator.userAgent || null,
+        origin: window.location.origin || null,
+        country: null,
+        region: null
+      });
+      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] Session initialized:", data.audienceId);
+    } catch (error) {
+      debug.error("[Audience Tracking] Error initializing session:", error);
+      if (onError && error instanceof Error) {
+        onError(error);
+      }
+    }
+  }, [
+    contentId,
+    appId,
+    broadcast.id,
+    broadcast.broadcastStatus,
+    foreignId,
+    foreignTier,
+    sessionId,
+    currentPlaybackInfo?.type,
+    audioElement,
+    client,
+    onError
+  ]);
+  const sendTrackingPing = useCallback(
+    async (eventType) => {
+      if (!audienceId || !sessionId || !client) return;
+      try {
+        await client.sendSessionPing({
+          audienceId,
+          sessionId,
+          eventType,
+          currentTime: Math.floor(audioElement?.currentTime || 0),
+          duration: Math.floor(duration || 0)
+        });
+      } catch (error) {
+        debug.error("[Audience Tracking] Error sending ping:", error);
+      }
+    },
+    [audienceId, sessionId, audioElement, duration, client]
+  );
+  const getPlaybackInfo = () => {
+    if (broadcast.broadcastStatus === 1) {
+      if (broadcast.hlsPlaylistUrl) {
+        return { url: broadcast.hlsPlaylistUrl, type: "hls" };
+      }
+      if (broadcast.hash && broadcast.app?.s3Hash) {
+        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"
+      };
+    }
+    if (broadcast.recordingMp3Url && broadcast.hash) {
+      return {
+        url: buildPlaybackUrl(broadcast.id, broadcast.hash),
+        type: "mp3"
+      };
+    }
+    if (broadcast.hlsPlaylistUrl) {
+      return { url: broadcast.hlsPlaylistUrl, type: "hls" };
+    }
+    return null;
+  };
+  useEffect(() => {
+    if (!currentPlaybackInfo) {
+      const info = getPlaybackInfo();
+      setCurrentPlaybackInfo(info);
+      initialPlaybackTypeRef.current = info?.type || null;
+      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()}`
+        );
+      }
+      if (info) {
+        setPlaying(true);
+        setIsLoadingVideo(true);
+      }
+    }
+  }, [currentPlaybackInfo]);
+  useEffect(() => {
+    if (currentPlaybackInfo?.url) {
+      setIsLoadingVideo(true);
+    }
+  }, [currentPlaybackInfo?.url]);
+  useEffect(() => {
+    if (!urlExpiresAt || !currentPlaybackInfo?.type) return;
+    const checkExpiration = () => {
+      const now = /* @__PURE__ */ new Date();
+      const timeUntilExpiration = urlExpiresAt.getTime() - now.getTime();
+      if (timeUntilExpiration <= REFRESH_THRESHOLD_MS && timeUntilExpiration > 0) {
+        debug.log("[URL Refresh] Proactively refreshing URL before expiration");
+        const fileType = currentPlaybackInfo.type;
+        if (fileType === "mp4" || fileType === "mp3" || fileType === "hls") {
+          refreshPresignedUrl(fileType);
+        }
+      }
+    };
+    const interval = setInterval(checkExpiration, REFRESH_CHECK_INTERVAL_MS);
+    checkExpiration();
+    return () => {
+      clearInterval(interval);
+    };
+  }, [urlExpiresAt, currentPlaybackInfo?.type, refreshPresignedUrl]);
+  useEffect(() => {
+    if (initialPlaybackTypeRef.current === "hls" && currentPlaybackInfo?.type === "hls" && broadcast.broadcastStatus !== 1 && broadcast.recordingMp3Url && broadcast.hash && parseInt(broadcast.mp3Size || "0") > 0) {
+      const secureUrl = buildPlaybackUrl(broadcast.id, broadcast.hash);
+      setCurrentPlaybackInfo({ url: secureUrl, type: "mp3" });
+      setAudioElement(null);
+      setPlaying(true);
+    }
+  }, [
+    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);
+    const mins = Math.floor(seconds % 3600 / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${hrs.toString().padStart(2, "0")}:${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+  };
+  const handlePlay = () => {
+    setPlaying(true);
+    setIsLoadingVideo(false);
+  };
+  const handlePause = () => {
+    setPlaying(false);
+  };
+  const handleEnded = () => {
+    setPlaying(false);
+    if (playbackType === "hls") {
+      setHasStreamEnded(true);
+    }
+    if (!wasLiveStream) {
+      setHasEnded(true);
+    }
+  };
+  useEffect(() => {
+    if (broadcast.durationSeconds && broadcast.durationSeconds > 0) {
+      setDuration(broadcast.durationSeconds);
+    }
+  }, [broadcast.durationSeconds]);
+  useEffect(() => {
+    if (isLiveStream && !playing) {
+      setPlaying(true);
+    }
+  }, [isLiveStream, playing]);
+  useEffect(() => {
+    if (currentPlaybackInfo && audioElement && !hasInitializedSession.current) {
+      initializeTrackingSession();
+    }
+  }, [currentPlaybackInfo, audioElement, initializeTrackingSession]);
+  useEffect(() => {
+    if (playing && audienceId) {
+      sendTrackingPing(1);
+      heartbeatIntervalRef.current = setInterval(() => {
+        sendTrackingPing(2);
+      }, 15e3);
+      return () => {
+        if (heartbeatIntervalRef.current) {
+          clearInterval(heartbeatIntervalRef.current);
+          heartbeatIntervalRef.current = null;
+        }
+      };
+    } else if (!playing && audienceId) {
+      sendTrackingPing(0);
+      if (heartbeatIntervalRef.current) {
+        clearInterval(heartbeatIntervalRef.current);
+        heartbeatIntervalRef.current = null;
+      }
+    }
+  }, [playing, audienceId, sendTrackingPing]);
+  useEffect(() => {
+    return () => {
+      if (audienceId && sessionId && sessionToken) {
+        const payload = {
+          audienceId,
+          sessionId,
+          eventType: 3,
+          // UNMOUNT
+          currentTime: Math.floor(audioElement?.currentTime || 0),
+          duration: Math.floor(duration || 0)
+        };
+        const headers = {
+          Authorization: `Bearer ${sessionToken}`,
+          "Content-Type": "application/json"
+        };
+        fetch(ENDPOINTS.sessionPing, {
+          method: "POST",
+          headers,
+          body: JSON.stringify(payload),
+          keepalive: true
+        }).catch(() => {
+        });
+      }
+    };
+  }, [audienceId, sessionId, sessionToken, audioElement, duration]);
+  useEffect(() => {
+    if (broadcast.transcriptUrl && broadcast.transcriptStatus === 2 && !transcriptData) {
+      setIsLoadingTranscript(true);
+      fetch(broadcast.transcriptUrl).then((res) => {
+        if (!res.ok) {
+          throw new Error(
+            `Failed to fetch transcript: ${res.status} ${res.statusText}`
+          );
+        }
+        return res.json();
+      }).then((data) => {
+        if (data.segments && data.words && !data.segments[0]?.words) {
+          data.segments = data.segments.map((segment, index) => {
+            const segmentWords = data.words.filter((word) => {
+              if (index === data.segments.length - 1) {
+                return word.start >= segment.start;
+              }
+              return word.start >= segment.start && word.start < segment.end;
+            });
+            return {
+              ...segment,
+              words: segmentWords
+            };
+          });
+        }
+        setTranscriptData(data);
+        setIsLoadingTranscript(false);
+      }).catch((error) => {
+        debug.error("[Transcript] Failed to load transcript:", error);
+        setIsLoadingTranscript(false);
+      });
+    }
+  }, [broadcast.transcriptUrl, broadcast.transcriptStatus, transcriptData]);
+  useEffect(() => {
+    if (!audioElement) return;
+    const handleTimeUpdate2 = () => {
+      setCurrentTime(audioElement.currentTime);
+    };
+    audioElement.addEventListener("timeupdate", handleTimeUpdate2);
+    return () => audioElement.removeEventListener("timeupdate", handleTimeUpdate2);
+  }, [audioElement]);
+  useEffect(() => {
+    if (showTranscript && autoScrollEnabled && activeWordRef.current && transcriptContainerRef.current) {
+      const container = transcriptContainerRef.current;
+      const activeWord = activeWordRef.current;
+      const containerRect = container.getBoundingClientRect();
+      const wordRect = activeWord.getBoundingClientRect();
+      if (wordRect.top < containerRect.top || wordRect.bottom > containerRect.bottom) {
+        isScrollingProgrammatically.current = true;
+        activeWord.scrollIntoView({ behavior: "smooth", block: "center" });
+        setTimeout(() => {
+          isScrollingProgrammatically.current = false;
+        }, 500);
+      }
+    }
+  }, [currentTime, showTranscript, autoScrollEnabled]);
+  useEffect(() => {
+    if (!showTranscript || !transcriptContainerRef.current) return;
+    const container = transcriptContainerRef.current;
+    const handleScroll = () => {
+      if (!isScrollingProgrammatically.current && autoScrollEnabled) {
+        setAutoScrollEnabled(false);
+      }
+    };
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [showTranscript, autoScrollEnabled]);
+  const handlePlayPause = () => {
+    if (hasEnded) {
+      if (audioElement) {
+        audioElement.currentTime = 0;
+      }
+      setHasEnded(false);
+    }
+    setPlaying(!playing);
+  };
+  const handleRestart = () => {
+    if (audioElement) {
+      audioElement.currentTime = 0;
+    }
+    setHasEnded(false);
+    setPlaying(true);
+  };
+  const handleVideoClick = () => {
+    if (!isLiveStream) {
+      handlePlayPause();
+    }
+  };
+  const handleSeekChange = (e) => {
+    const newValue = parseFloat(e.target.value);
+    setPlayed(newValue);
+  };
+  const handleSeekMouseDown = () => {
+    setSeeking(true);
+  };
+  const handleSeekMouseUp = (e) => {
+    const seekValue = parseFloat(e.target.value);
+    setSeeking(false);
+    if (audioElement && duration > 0) {
+      const seekTime = seekValue * duration;
+      audioElement.currentTime = seekTime;
+      setHasEnded(false);
+    }
+  };
+  const handleSeekTouchStart = () => {
+    setSeeking(true);
+  };
+  const handleSeekTouchEnd = (e) => {
+    const seekValue = parseFloat(e.target.value);
+    setSeeking(false);
+    if (audioElement && duration > 0) {
+      const seekTime = seekValue * duration;
+      audioElement.currentTime = seekTime;
+      setHasEnded(false);
+    }
+  };
+  const handleTimeUpdate = (e) => {
+    if (!seeking) {
+      const video = e.currentTarget;
+      const playedFraction = video.duration > 0 ? video.currentTime / video.duration : 0;
+      setPlayed(playedFraction);
+    }
+  };
+  const handleLoadedMetadata = (e) => {
+    const video = e.currentTarget;
+    setAudioElement(video);
+    if (video.duration && !isNaN(video.duration) && video.duration > 0) {
+      setDuration(video.duration);
+    } else if (broadcast.durationSeconds && broadcast.durationSeconds > 0) {
+      setDuration(broadcast.durationSeconds);
+    }
+  };
+  const handlePlayerReady = (player) => {
+    try {
+      const internalPlayer = player?.getInternalPlayer?.();
+      if (internalPlayer && internalPlayer instanceof HTMLMediaElement) {
+        setAudioElement(internalPlayer);
+      }
+    } catch (error) {
+      debug.error("[DialtribePlayer] Error getting internal player:", error);
+    }
+  };
+  useEffect(() => {
+    const findAudioElement = () => {
+      const videoElements = document.querySelectorAll("video, audio");
+      if (videoElements.length > 0) {
+        const element = videoElements[0];
+        setAudioElement(element);
+        return true;
+      }
+      return false;
+    };
+    if (!findAudioElement()) {
+      const retryIntervals = [
+        100,
+        300,
+        500,
+        1e3,
+        1500,
+        2e3,
+        3e3,
+        4e3,
+        5e3
+      ];
+      const timeouts = retryIntervals.map(
+        (delay) => setTimeout(() => {
+          findAudioElement();
+        }, delay)
+      );
+      return () => timeouts.forEach(clearTimeout);
+    }
+  }, [playbackUrl]);
+  useEffect(() => {
+    if (playing && !audioElement) {
+      const videoElements = document.querySelectorAll("video, audio");
+      if (videoElements.length > 0) {
+        const element = videoElements[0];
+        setAudioElement(element);
+      }
+    }
+  }, [playing, audioElement]);
+  const handleVolumeChange = (e) => {
+    setVolume(parseFloat(e.target.value));
+  };
+  const toggleMute = () => {
+    setMuted(!muted);
+  };
+  const toggleFullscreen = async () => {
+    try {
+      if (document.fullscreenElement) {
+        await document.exitFullscreen();
+        return;
+      }
+      let videoElement = null;
+      if (playerRef.current && typeof playerRef.current.getInternalPlayer === "function") {
+        videoElement = playerRef.current.getInternalPlayer();
+      }
+      if (!videoElement || typeof videoElement.requestFullscreen !== "function") {
+        const videoElements = document.querySelectorAll("video");
+        if (videoElements.length > 0) {
+          videoElement = videoElements[0];
+        }
+      }
+      if (!videoElement || typeof videoElement.requestFullscreen !== "function") {
+        const modalElement = document.querySelector(".aspect-video");
+        if (modalElement && typeof modalElement.requestFullscreen === "function") {
+          await modalElement.requestFullscreen();
+          return;
+        }
+      }
+      if (videoElement && typeof videoElement.requestFullscreen === "function") {
+        await videoElement.requestFullscreen();
+      }
+    } catch (error) {
+      debug.error("Error toggling fullscreen:", error);
+    }
+  };
+  const handleError = async (error) => {
+    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..."
+      );
+      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
+        );
+      } else {
+        const refreshed = await refreshPresignedUrl(fileType);
+        if (refreshed) {
+          debug.log(
+            "[Player Error] URL refreshed successfully, resuming playback"
+          );
+          setTimeout(() => {
+            if (audioElement && currentPosition > 0) {
+              audioElement.currentTime = currentPosition;
+            }
+            if (wasPlaying) {
+              setPlaying(true);
+            }
+          }, PLAYBACK_RESUME_DELAY_MS);
+          return;
+        }
+      }
+    }
+    setHasError(true);
+    setPlaying(false);
+    setIsLoadingVideo(false);
+    setErrorMessage(getErrorMessage(error));
+    if (onError && error instanceof Error) {
+      onError(error);
+    }
+  };
+  const handleRetry = useCallback(() => {
+    setHasError(false);
+    setErrorMessage("");
+    setIsLoadingVideo(true);
+    const info = getPlaybackInfo();
+    if (info) {
+      setCurrentPlaybackInfo(null);
+      setTimeout(() => {
+        setCurrentPlaybackInfo(info);
+        setPlaying(true);
+      }, 100);
+    }
+  }, [broadcast]);
+  const handleWordClick = (startTime) => {
+    if (audioElement) {
+      audioElement.currentTime = startTime;
+      setPlayed(startTime / duration);
+      setHasEnded(false);
+      if (!playing) {
+        setPlaying(true);
+      }
+    }
+  };
+  useEffect(() => {
+    if (!enableKeyboardShortcuts) return;
+    const seekBy = (seconds) => {
+      if (!audioElement || duration <= 0) return;
+      const newTime = Math.max(
+        0,
+        Math.min(duration, audioElement.currentTime + seconds)
+      );
+      audioElement.currentTime = newTime;
+      setPlayed(newTime / duration);
+    };
+    const handleKeyDown = (e) => {
+      const target = e.target;
+      if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target.contentEditable === "true" || target.getAttribute("role") === "textbox") {
+        return;
+      }
+      if (e.ctrlKey || e.metaKey || e.altKey) {
+        return;
+      }
+      switch (e.key) {
+        case " ":
+        case "k":
+        case "K":
+          e.preventDefault();
+          handlePlayPause();
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          seekBy(-5);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          seekBy(5);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setVolume((prev) => Math.min(1, prev + 0.1));
+          if (muted) setMuted(false);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          setVolume((prev) => Math.max(0, prev - 0.1));
+          break;
+        case "m":
+        case "M":
+          e.preventDefault();
+          toggleMute();
+          break;
+        case "f":
+        case "F":
+          if (!isAudioOnly) {
+            e.preventDefault();
+            toggleFullscreen();
+          }
+          break;
+        case "0":
+        case "Home":
+          e.preventDefault();
+          if (audioElement && duration > 0) {
+            audioElement.currentTime = 0;
+            setPlayed(0);
+            setHasEnded(false);
+          }
+          break;
+        case "End":
+          e.preventDefault();
+          if (audioElement && duration > 0) {
+            audioElement.currentTime = duration - 1;
+            setPlayed((duration - 1) / duration);
+          }
+          break;
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [
+    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" }),
+      /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400", children: "No playback URL available for this broadcast. The recording may still be processing." })
+    ] });
+  }
+  if (!playbackUrl) {
+    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);
+  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)
+            ] })
+          ] }),
+          /* @__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",
+                        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"
+                  ) })
+                ]
+              }
+            ),
+            !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",
+                  {
+                    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: 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",
+                            "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"
+                            }
+                          )
+                        }
+                      )
+                    }
+                  )
+                ] })
+              ] })
+            ] }))
+          ] }),
+          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",
+                  "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"
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            ] }) }),
+            !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"
+                ]
+              }
+            ) }),
+            /* @__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: `
+        .slider::-webkit-slider-thumb {
+          appearance: none;
+          width: 14px;
+          height: 14px;
+          border-radius: 50%;
+          background: white;
+          cursor: pointer;
+          box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+        }
+        .slider::-webkit-slider-thumb:hover {
+          background: #60a5fa;
+        }
+        .slider::-moz-range-thumb {
+          width: 14px;
+          height: 14px;
+          border-radius: 50%;
+          background: white;
+          cursor: pointer;
+          border: none;
+          box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+        }
+        .slider::-moz-range-thumb:hover {
+          background: #60a5fa;
+        }
+
+        .active-word {
+          transition: color 0s, text-shadow 0s;
+          text-shadow: 0 0 8px rgba(96, 165, 250, 0.6), 0 0 12px rgba(96, 165, 250, 0.4);
+        }
+        .segment-word,
+        .inactive-word {
+          transition: color 0.4s ease-out, text-shadow 0.4s ease-out;
+          text-shadow: none;
+        }
+        .segment-word:hover,
+        .inactive-word:hover {
+          transition: color 0.15s ease-in;
+        }
+      ` })
+      ]
+    }
+  );
+  return playerContent;
+}
+var DialtribePlayerErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.handleReset = () => {
+      this.setState({
+        hasError: false,
+        error: null,
+        errorInfo: null
+      });
+    };
+    this.handleClose = () => {
+      this.setState({
+        hasError: false,
+        error: null,
+        errorInfo: null
+      });
+      this.props.onClose?.();
+    };
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("[Player Error Boundary] Caught error:", {
+      error: error.message,
+      stack: error.stack,
+      componentStack: errorInfo.componentStack,
+      broadcastId: this.props.broadcastId,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    this.setState({
+      error,
+      errorInfo
+    });
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80", children: /* @__PURE__ */ jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full mx-4 p-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: "Player Error" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: this.handleClose,
+              className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "w-6 h-6",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M6 18L18 6M6 6l12 12"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ jsx("div", { className: "rounded-full bg-red-100 dark:bg-red-900/30 p-3", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-12 h-12 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 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__ */ jsxs("div", { className: "text-center mb-6", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-lg text-gray-900 dark:text-white mb-2", children: "Something went wrong with the media player" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: this.state.error?.message || "An unexpected error occurred" })
+        ] }),
+        process.env.NODE_ENV === "development" && this.state.errorInfo && /* @__PURE__ */ jsxs("details", { className: "mb-6 p-4 bg-gray-100 dark:bg-gray-900 rounded text-xs", children: [
+          /* @__PURE__ */ jsx("summary", { className: "cursor-pointer font-semibold text-gray-700 dark:text-gray-300 mb-2", children: "Error Details (Development Only)" }),
+          /* @__PURE__ */ jsxs("pre", { className: "overflow-auto text-gray-600 dark:text-gray-400 whitespace-pre-wrap", children: [
+            this.state.error?.stack,
+            "\n\nComponent Stack:",
+            this.state.errorInfo.componentStack
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-center", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: this.handleReset,
+              className: "px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors",
+              children: "Try Again"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: this.handleClose,
+              className: "px-6 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-white rounded-lg font-medium transition-colors",
+              children: "Close Player"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-500 dark:text-gray-400 mt-6", children: "If this problem persists, try refreshing the page or contact support." })
+      ] }) });
+    }
+    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/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, CDN_DOMAIN, DEFAULT_ENCODER_SERVER_URL, DIALTRIBE_API_BASE, DialtribeClient, DialtribeOverlay, DialtribePlayer, DialtribePlayerErrorBoundary, DialtribeProvider, DialtribeStreamer, ENDPOINTS, HTTP_STATUS, LoadingSpinner, StreamKeyDisplay, StreamKeyInput, StreamingControls, StreamingPreview, WebSocketStreamer, buildBroadcastCdnUrl, buildBroadcastS3KeyPrefix, calculatePopupDimensions, checkBrowserCompatibility, formatTime, getMediaConstraints, getMediaRecorderOptions, openBroadcastPopup, openDialtribeStreamerPopup, useDialtribe, useDialtribeOptional, useDialtribeStreamerLauncher, useDialtribeStreamerPopup };
+//# sourceMappingURL=dialtribe-streamer.mjs.map
+//# sourceMappingURL=dialtribe-streamer.mjs.map