@dialtribe/react-sdk 0.1.0-alpha.5

package/dist/index.mjs

@@ -0,0 +1,2123 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, useState, useCallback, useEffect, useContext, useRef, Component } from 'react';
+import ReactPlayer from 'react-player';
+
+// src/components/HelloWorld.tsx
+function HelloWorld({ name = "World" }) {
+  return /* @__PURE__ */ jsxs("div", { style: {
+    padding: "20px",
+    border: "2px solid #4F46E5",
+    borderRadius: "8px",
+    backgroundColor: "#EEF2FF",
+    color: "#4F46E5",
+    fontFamily: "system-ui, sans-serif",
+    textAlign: "center"
+  }, children: [
+    /* @__PURE__ */ jsxs("h1", { style: { margin: "0 0 10px 0" }, children: [
+      "Hello, ",
+      name,
+      "!"
+    ] }),
+    /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "14px" }, children: "@dialtribe/react-sdk is working correctly" })
+  ] });
+}
+var DialTribeContext = createContext(null);
+function DialTribeProvider({
+  sessionToken: initialToken,
+  onTokenRefresh,
+  onTokenExpired,
+  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
+  };
+  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;
+}
+
+// src/client/DialTribeClient.ts
+var DIALTRIBE_API_BASE = "https://dialtribe.com/api/public/v1";
+var ENDPOINTS = {
+  broadcasts: `${DIALTRIBE_API_BASE}/broadcasts`,
+  broadcast: (id) => `${DIALTRIBE_API_BASE}/broadcasts/${id}`,
+  contentPlay: `${DIALTRIBE_API_BASE}/content/play`,
+  presignedUrl: `${DIALTRIBE_API_BASE}/media/presigned-url`,
+  sessionStart: `${DIALTRIBE_API_BASE}/session/start`,
+  sessionPing: `${DIALTRIBE_API_BASE}/session/ping`
+};
+var DialTribeClient = class {
+  constructor(config) {
+    this.config = config;
+  }
+  /**
+   * 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 = `${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(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 = `${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 = `${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(ENDPOINTS.sessionStart, {
+      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(ENDPOINTS.sessionPing, {
+      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();
+  }
+};
+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" })
+  ] });
+}
+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 BroadcastPlayer({
+  broadcast,
+  appId,
+  contentId,
+  foreignId,
+  foreignTier = "guest",
+  renderClipCreator,
+  onError,
+  className = "",
+  enableKeyboardShortcuts = false
+}) {
+  const { sessionToken, setSessionToken, markExpired } = useDialTribe();
+  const clientRef = useRef(null);
+  if (!clientRef.current && sessionToken) {
+    clientRef.current = new DialTribeClient({
+      sessionToken,
+      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 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("[BroadcastPlayer] 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);
+  return /* @__PURE__ */ jsxs("div", { className: `bg-black rounded-lg shadow-2xl w-full h-full flex flex-col ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "bg-zinc-900/50 backdrop-blur-sm border-b border-zinc-800 px-4 md:px-6 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-1 overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
+        /* @__PURE__ */ jsxs("div", { className: `relative ${isAudioOnly ? "bg-linear-to-br from-zinc-900 via-zinc-800 to-zinc-900 flex items-stretch" : "bg-black"}`, children: [
+          isAudioOnly ? /* @__PURE__ */ jsx("div", { className: "relative cursor-pointer w-full flex flex-col", onClick: handleVideoClick, children: !hasError ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "w-full h-full relative", children: [
+            /* @__PURE__ */ jsx(AudioWaveform, { audioElement, isPlaying: isLiveStream ? true : playing, isLive: isLiveStream }),
+            isLoadingVideo && !hasError && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/90 flex items-center justify-center z-20", children: /* @__PURE__ */ jsx(LoadingSpinner, { variant: "white" }) }),
+            hasEnded && !wasLiveStream && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 flex items-center justify-center z-20 pointer-events-auto", children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleRestart();
+                },
+                className: "bg-white hover:bg-blue-500 text-black hover:text-white font-semibold py-4 px-8 rounded-full transition-all transform hover:scale-105 flex items-center gap-3",
+                "aria-label": "Restart playback from beginning",
+                children: [
+                  /* @__PURE__ */ jsx("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z", clipRule: "evenodd" }) }),
+                  "Restart"
+                ]
+              }
+            ) })
+          ] }) }) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md px-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-6xl mb-4", children: "\u26A0\uFE0F" }),
+            /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-white mb-3", children: "Playback Error" }),
+            /* @__PURE__ */ jsx("p", { className: "text-gray-300 text-sm mb-6", children: errorMessage }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleRetry,
+                className: "px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors inline-flex items-center gap-2",
+                "aria-label": "Retry playback",
+                children: [
+                  /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }),
+                  "Retry"
+                ]
+              }
+            )
+          ] }) }) }) : /* @__PURE__ */ jsxs("div", { className: "aspect-video relative", children: [
+            /* @__PURE__ */ jsx("div", { onClick: handleVideoClick, className: "cursor-pointer", children: /* @__PURE__ */ jsx(
+              ReactPlayer,
+              {
+                ref: playerRef,
+                src: playbackUrl || void 0,
+                playing,
+                volume,
+                muted,
+                width: "100%",
+                height: "100%",
+                crossOrigin: "anonymous",
+                onReady: handlePlayerReady,
+                onTimeUpdate: handleTimeUpdate,
+                onLoadedMetadata: handleLoadedMetadata,
+                onPlay: handlePlay,
+                onPause: handlePause,
+                onEnded: handleEnded,
+                onError: handleError,
+                style: { backgroundColor: "#000" }
+              },
+              playbackUrl || "no-url"
+            ) }),
+            isLoadingVideo && !hasError && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/90 flex items-center justify-center", children: /* @__PURE__ */ jsx(LoadingSpinner, { variant: "white" }) }),
+            hasEnded && !hasError && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 flex items-center justify-center", children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleRestart();
+                },
+                className: "bg-white hover:bg-blue-500 text-black hover:text-white font-semibold py-4 px-8 rounded-full transition-all transform hover:scale-105 flex items-center gap-3",
+                children: [
+                  /* @__PURE__ */ jsx("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z", clipRule: "evenodd" }) }),
+                  "Restart"
+                ]
+              }
+            ) }),
+            hasError && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/90 flex items-center justify-center p-8", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-6xl mb-4", children: "\u26A0\uFE0F" }),
+              /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-white mb-3", children: "Playback Error" }),
+              /* @__PURE__ */ jsx("p", { className: "text-gray-300 text-sm mb-6", children: errorMessage }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: handleRetry,
+                  className: "px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors inline-flex items-center gap-2",
+                  "aria-label": "Retry playback",
+                  children: [
+                    /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }),
+                    "Retry"
+                  ]
+                }
+              )
+            ] }) })
+          ] }),
+          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",
+              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"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
+              /* @__PURE__ */ jsx("span", { children: formatTime((played || 0) * duration) }),
+              /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ jsx("button", { onClick: handlePlayPause, className: "text-white hover:text-blue-400 transition-colors", title: playing ? "Pause" : "Play", children: playing ? /* @__PURE__ */ jsx("svg", { className: "w-8 h-8", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z", clipRule: "evenodd" }) }) : /* @__PURE__ */ jsx("svg", { className: "w-8 h-8", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z", clipRule: "evenodd" }) }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("button", { onClick: toggleMute, className: "text-white hover:text-blue-400 transition-colors", title: muted ? "Unmute" : "Mute", children: muted || volume === 0 ? /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM12.293 7.293a1 1 0 011.414 0L15 8.586l1.293-1.293a1 1 0 111.414 1.414L16.414 10l1.293 1.293a1 1 0 01-1.414 1.414L15 11.414l-1.293 1.293a1 1 0 01-1.414-1.414L13.586 10l-1.293-1.293a1 1 0 010-1.414z", clipRule: "evenodd" }) }) : /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z", clipRule: "evenodd" }) }) }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    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"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              !isAudioOnly && /* @__PURE__ */ jsx("button", { onClick: toggleFullscreen, className: "text-white hover:text-blue-400 transition-colors", title: "Fullscreen", children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 11-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 012 0v1.586l2.293-2.293a1 1 0 111.414 1.414L6.414 15H8a1 1 0 010 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 010-2h1.586l-2.293-2.293a1 1 0 111.414-1.414L15 13.586V12a1 1 0 011-1z", clipRule: "evenodd" }) }) }),
+              hasTranscript && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setShowTranscript(!showTranscript),
+                  className: `transition-colors ${showTranscript ? "text-blue-400" : "text-white hover:text-blue-400"}`,
+                  title: showTranscript ? "Hide Transcript" : "Show Transcript",
+                  children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) })
+                }
+              )
+            ] })
+          ] })
+        ] }))
+      ] }),
+      showTranscript && hasTranscript && /* @__PURE__ */ jsxs("div", { className: "w-full md:w-96 bg-zinc-900 border-l border-zinc-800 flex flex-col overflow-hidden", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-b border-zinc-800 bg-zinc-900/50 shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-green-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-white", children: "Transcript" }),
+            broadcast.transcriptLanguage && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 px-2 py-0.5 bg-zinc-800 rounded", children: broadcast.transcriptLanguage.toUpperCase() })
+          ] }),
+          broadcast.transcriptUrl && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: broadcast.transcriptUrl,
+              download: `${broadcast.hash || broadcast.id}-transcript.json`,
+              className: "text-gray-400 hover:text-white transition-colors",
+              title: "Download Transcript",
+              children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" }) })
+            }
+          )
+        ] }) }),
+        !autoScrollEnabled && /* @__PURE__ */ jsx("div", { className: "px-4 py-2 bg-zinc-800/50 border-b border-zinc-700 shrink-0", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setAutoScrollEnabled(true),
+            className: "w-full px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors flex items-center justify-center gap-2 text-sm font-medium",
+            children: [
+              /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }),
+              "Resume Auto-Scroll"
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { ref: transcriptContainerRef, className: "flex-1 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;
+        }
+      ` })
+  ] });
+}
+function BroadcastPlayerModal({
+  broadcast,
+  isOpen,
+  onClose,
+  appId,
+  contentId,
+  foreignId,
+  foreignTier,
+  renderClipCreator,
+  className,
+  enableKeyboardShortcuts = false
+}) {
+  const closeButtonRef = useRef(null);
+  const previousActiveElement = useRef(null);
+  if (!isOpen) return null;
+  useEffect(() => {
+    if (isOpen) {
+      previousActiveElement.current = document.activeElement;
+      setTimeout(() => {
+        closeButtonRef.current?.focus();
+      }, 100);
+    }
+    return () => {
+      if (previousActiveElement.current) {
+        previousActiveElement.current.focus();
+      }
+    };
+  }, [isOpen]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-0 bg-black/70 backdrop-blur-xl flex items-center justify-center z-50 p-4",
+      onClick: handleBackdropClick,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Broadcast player",
+      children: /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full max-w-7xl max-h-[90vh]", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: closeButtonRef,
+            onClick: onClose,
+            className: "absolute top-4 right-4 z-10 text-gray-400 hover:text-white text-2xl leading-none transition-colors w-8 h-8 flex items-center justify-center bg-black/50 rounded-full",
+            title: "Close (ESC)",
+            "aria-label": "Close player",
+            children: "\xD7"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BroadcastPlayer,
+          {
+            broadcast,
+            appId,
+            contentId,
+            foreignId,
+            foreignTier,
+            renderClipCreator,
+            className,
+            enableKeyboardShortcuts,
+            onError: (error) => {
+              debug.error("[BroadcastPlayerModal] Player error:", error);
+            }
+          }
+        )
+      ] })
+    }
+  );
+}
+var BroadcastPlayerErrorBoundary = 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;
+  }
+};
+
+export { AudioWaveform, BroadcastPlayer, BroadcastPlayerErrorBoundary, BroadcastPlayerModal, CDN_DOMAIN, DIALTRIBE_API_BASE, DialTribeClient, DialTribeProvider, ENDPOINTS, HTTP_STATUS, HelloWorld, LoadingSpinner, buildBroadcastCdnUrl, buildBroadcastS3KeyPrefix, formatTime, useDialTribe };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map