@dialtribe/react-sdk 0.1.0-alpha.11 → 0.1.0-alpha.12

package/dist/index.js

@@ -1,11 +1,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var React2 = require('react');
 var ReactPlayer = require('react-player');
+var reactDom = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 var ReactPlayer__default = /*#__PURE__*/_interopDefault(ReactPlayer);
 
 // src/components/HelloWorld.tsx
@@ -27,17 +29,17 @@ function HelloWorld({ name = "World" }) {
     /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: "14px" }, children: "@dialtribe/react-sdk is working correctly" })
   ] });
 }
-var DialTribeContext = react.createContext(null);
-function DialTribeProvider({
+var DialtribeContext = React2.createContext(null);
+function DialtribeProvider({
   sessionToken: initialToken,
   onTokenRefresh,
   onTokenExpired,
   apiBaseUrl,
   children
 }) {
-  const [sessionToken, setSessionTokenState] = react.useState(initialToken);
-  const [isExpired, setIsExpired] = react.useState(false);
-  const setSessionToken = react.useCallback(
+  const [sessionToken, setSessionTokenState] = React2.useState(initialToken);
+  const [isExpired, setIsExpired] = React2.useState(false);
+  const setSessionToken = React2.useCallback(
     (newToken, expiresAt) => {
       setSessionTokenState(newToken);
       setIsExpired(false);
@@ -47,11 +49,11 @@ function DialTribeProvider({
     },
     [onTokenRefresh]
   );
-  const markExpired = react.useCallback(() => {
+  const markExpired = React2.useCallback(() => {
     setIsExpired(true);
     onTokenExpired?.();
   }, [onTokenExpired]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (initialToken !== sessionToken) {
       setSessionTokenState(initialToken);
       setIsExpired(false);
@@ -64,22 +66,22 @@ function DialTribeProvider({
     markExpired,
     apiBaseUrl
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(DialTribeContext.Provider, { value, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(DialtribeContext.Provider, { value, children });
 }
-function useDialTribe() {
-  const context = react.useContext(DialTribeContext);
+function useDialtribe() {
+  const context = React2.useContext(DialtribeContext);
   if (!context) {
     throw new Error(
-      'useDialTribe must be used within a DialTribeProvider. Wrap your app with <DialTribeProvider sessionToken="sess_xxx">...</DialTribeProvider>'
+      'useDialtribe must be used within a DialtribeProvider. Wrap your app with <DialtribeProvider sessionToken="sess_xxx">...</DialtribeProvider>'
     );
   }
   return context;
 }
-function useDialTribeOptional() {
-  return react.useContext(DialTribeContext);
+function useDialtribeOptional() {
+  return React2.useContext(DialtribeContext);
 }
 
-// src/client/DialTribeClient.ts
+// src/client/DialtribeClient.ts
 function getDefaultApiBaseUrl() {
   if (typeof process !== "undefined" && process.env?.NEXT_PUBLIC_DIALTRIBE_API_URL) {
     return process.env.NEXT_PUBLIC_DIALTRIBE_API_URL;
@@ -99,13 +101,13 @@ function getEndpoints(baseUrl = DIALTRIBE_API_BASE) {
   };
 }
 var ENDPOINTS = getEndpoints();
-var DialTribeClient = class {
+var DialtribeClient = class {
   constructor(config) {
     this.config = config;
     this.endpoints = config.apiBaseUrl ? getEndpoints(config.apiBaseUrl) : ENDPOINTS;
   }
   /**
-   * Make an authenticated request to DialTribe API
+   * Make an authenticated request to Dialtribe API
    *
    * Automatically:
    * - Adds Authorization header with session token
@@ -257,18 +259,18 @@ function AudioWaveform({
   isPlaying = false,
   isLive = false
 }) {
-  const canvasRef = react.useRef(null);
-  const animationFrameRef = react.useRef(void 0);
-  const [setupError, setSetupError] = react.useState(false);
-  const isPlayingRef = react.useRef(isPlaying);
-  const isLiveRef = react.useRef(isLive);
-  react.useEffect(() => {
+  const canvasRef = React2.useRef(null);
+  const animationFrameRef = React2.useRef(void 0);
+  const [setupError, setSetupError] = React2.useState(false);
+  const isPlayingRef = React2.useRef(isPlaying);
+  const isLiveRef = React2.useRef(isLive);
+  React2.useEffect(() => {
     isPlayingRef.current = isPlaying;
   }, [isPlaying]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     isLiveRef.current = isLive;
   }, [isLive]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -770,7 +772,7 @@ function getErrorMessage(error) {
   }
   return "Unable to play media. Please try refreshing the page or contact support if the problem persists.";
 }
-function BroadcastPlayer({
+function DialtribePlayer({
   broadcast,
   appId,
   contentId,
@@ -781,18 +783,18 @@ function BroadcastPlayer({
   className = "",
   enableKeyboardShortcuts = false
 }) {
-  const { sessionToken, setSessionToken, markExpired, apiBaseUrl } = useDialTribe();
-  const clientRef = react.useRef(null);
+  const { sessionToken, setSessionToken, markExpired, apiBaseUrl } = useDialtribe();
+  const clientRef = React2.useRef(null);
   if (!clientRef.current && sessionToken) {
-    clientRef.current = new DialTribeClient({
+    clientRef.current = new DialtribeClient({
       sessionToken,
       apiBaseUrl,
       onTokenRefresh: (newToken, expiresAt) => {
-        debug.log(`[DialTribeClient] Token refreshed, expires at ${expiresAt}`);
+        debug.log(`[DialtribeClient] Token refreshed, expires at ${expiresAt}`);
         setSessionToken(newToken, expiresAt);
       },
       onTokenExpired: () => {
-        debug.error("[DialTribeClient] Token expired");
+        debug.error("[DialtribeClient] Token expired");
         markExpired();
       }
     });
@@ -800,35 +802,35 @@ function BroadcastPlayer({
     clientRef.current.setSessionToken(sessionToken);
   }
   const client = clientRef.current;
-  const playerRef = react.useRef(null);
-  const transcriptContainerRef = react.useRef(null);
-  const activeWordRef = react.useRef(null);
-  const [audioElement, setAudioElement] = react.useState(null);
-  const [playing, setPlaying] = react.useState(false);
-  const [played, setPlayed] = react.useState(0);
-  const [duration, setDuration] = react.useState(0);
-  const [volume, setVolume] = react.useState(1);
-  const [muted, setMuted] = react.useState(false);
-  const [seeking, setSeeking] = react.useState(false);
-  const [hasError, setHasError] = react.useState(false);
-  const [errorMessage, setErrorMessage] = react.useState("");
-  const [hasEnded, setHasEnded] = react.useState(false);
-  const [hasStreamEnded, setHasStreamEnded] = react.useState(false);
-  const [showTranscript, setShowTranscript] = react.useState(false);
-  const [transcriptData, setTranscriptData] = react.useState(null);
-  const [currentTime, setCurrentTime] = react.useState(0);
-  const [isLoadingTranscript, setIsLoadingTranscript] = react.useState(false);
-  const [isLoadingVideo, setIsLoadingVideo] = react.useState(true);
-  const [autoScrollEnabled, setAutoScrollEnabled] = react.useState(true);
-  const isScrollingProgrammatically = react.useRef(false);
-  const lastActiveWordIndex = react.useRef(-1);
-  const [showClipCreator, setShowClipCreator] = react.useState(false);
-  const initialPlaybackTypeRef = react.useRef(null);
-  const [currentPlaybackInfo, setCurrentPlaybackInfo] = react.useState(null);
-  const [urlExpiresAt, setUrlExpiresAt] = react.useState(null);
-  const isRefreshingUrl = react.useRef(false);
-  const [audienceId, setAudienceId] = react.useState(null);
-  const [sessionId] = react.useState(() => {
+  const playerRef = React2.useRef(null);
+  const transcriptContainerRef = React2.useRef(null);
+  const activeWordRef = React2.useRef(null);
+  const [audioElement, setAudioElement] = React2.useState(null);
+  const [playing, setPlaying] = React2.useState(false);
+  const [played, setPlayed] = React2.useState(0);
+  const [duration, setDuration] = React2.useState(0);
+  const [volume, setVolume] = React2.useState(1);
+  const [muted, setMuted] = React2.useState(false);
+  const [seeking, setSeeking] = React2.useState(false);
+  const [hasError, setHasError] = React2.useState(false);
+  const [errorMessage, setErrorMessage] = React2.useState("");
+  const [hasEnded, setHasEnded] = React2.useState(false);
+  const [hasStreamEnded, setHasStreamEnded] = React2.useState(false);
+  const [showTranscript, setShowTranscript] = React2.useState(false);
+  const [transcriptData, setTranscriptData] = React2.useState(null);
+  const [currentTime, setCurrentTime] = React2.useState(0);
+  const [isLoadingTranscript, setIsLoadingTranscript] = React2.useState(false);
+  const [isLoadingVideo, setIsLoadingVideo] = React2.useState(true);
+  const [autoScrollEnabled, setAutoScrollEnabled] = React2.useState(true);
+  const isScrollingProgrammatically = React2.useRef(false);
+  const lastActiveWordIndex = React2.useRef(-1);
+  const [showClipCreator, setShowClipCreator] = React2.useState(false);
+  const initialPlaybackTypeRef = React2.useRef(null);
+  const [currentPlaybackInfo, setCurrentPlaybackInfo] = React2.useState(null);
+  const [urlExpiresAt, setUrlExpiresAt] = React2.useState(null);
+  const isRefreshingUrl = React2.useRef(false);
+  const [audienceId, setAudienceId] = React2.useState(null);
+  const [sessionId] = React2.useState(() => {
     if (typeof crypto !== "undefined" && crypto.randomUUID) {
       return crypto.randomUUID();
     }
@@ -838,9 +840,9 @@ function BroadcastPlayer({
       return v.toString(16);
     });
   });
-  const heartbeatIntervalRef = react.useRef(null);
-  const hasInitializedSession = react.useRef(false);
-  const refreshPresignedUrl = react.useCallback(
+  const heartbeatIntervalRef = React2.useRef(null);
+  const hasInitializedSession = React2.useRef(false);
+  const refreshPresignedUrl = React2.useCallback(
     async (fileType) => {
       if (!broadcast.hash || isRefreshingUrl.current || !client) {
         debug.log("[URL Refresh] Skipping refresh - no hash, already refreshing, or no client");
@@ -891,7 +893,7 @@ function BroadcastPlayer({
     if (width < 1024) return "tablet";
     return "desktop";
   };
-  const initializeTrackingSession = react.useCallback(async () => {
+  const initializeTrackingSession = React2.useCallback(async () => {
     if (!contentId || !appId || !client) return;
     if (currentPlaybackInfo?.type === "hls" && broadcast.broadcastStatus === 1) return;
     if (hasInitializedSession.current) return;
@@ -926,7 +928,7 @@ function BroadcastPlayer({
       }
     }
   }, [contentId, appId, broadcast.id, broadcast.broadcastStatus, foreignId, foreignTier, sessionId, currentPlaybackInfo?.type, audioElement, client, onError]);
-  const sendTrackingPing = react.useCallback(
+  const sendTrackingPing = React2.useCallback(
     async (eventType) => {
       if (!audienceId || !sessionId || !client) return;
       try {
@@ -964,7 +966,7 @@ function BroadcastPlayer({
     }
     return null;
   };
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!currentPlaybackInfo) {
       const info = getPlaybackInfo();
       setCurrentPlaybackInfo(info);
@@ -980,12 +982,12 @@ function BroadcastPlayer({
       }
     }
   }, [currentPlaybackInfo]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (currentPlaybackInfo?.url) {
       setIsLoadingVideo(true);
     }
   }, [currentPlaybackInfo?.url]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!urlExpiresAt || !currentPlaybackInfo?.type) return;
     const checkExpiration = () => {
       const now = /* @__PURE__ */ new Date();
@@ -1004,7 +1006,7 @@ function BroadcastPlayer({
       clearInterval(interval);
     };
   }, [urlExpiresAt, currentPlaybackInfo?.type, refreshPresignedUrl]);
-  react.useEffect(() => {
+  React2.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" });
@@ -1040,22 +1042,22 @@ function BroadcastPlayer({
       setHasEnded(true);
     }
   };
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (broadcast.durationSeconds && broadcast.durationSeconds > 0) {
       setDuration(broadcast.durationSeconds);
     }
   }, [broadcast.durationSeconds]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (isLiveStream && !playing) {
       setPlaying(true);
     }
   }, [isLiveStream, playing]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (currentPlaybackInfo && audioElement && !hasInitializedSession.current) {
       initializeTrackingSession();
     }
   }, [currentPlaybackInfo, audioElement, initializeTrackingSession]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (playing && audienceId) {
       sendTrackingPing(1);
       heartbeatIntervalRef.current = setInterval(() => {
@@ -1075,7 +1077,7 @@ function BroadcastPlayer({
       }
     }
   }, [playing, audienceId, sendTrackingPing]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     return () => {
       if (audienceId && sessionId && sessionToken) {
         const payload = {
@@ -1100,7 +1102,7 @@ function BroadcastPlayer({
       }
     };
   }, [audienceId, sessionId, sessionToken, audioElement, duration]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (broadcast.transcriptUrl && broadcast.transcriptStatus === 2 && !transcriptData) {
       setIsLoadingTranscript(true);
       fetch(broadcast.transcriptUrl).then((res) => {
@@ -1131,7 +1133,7 @@ function BroadcastPlayer({
       });
     }
   }, [broadcast.transcriptUrl, broadcast.transcriptStatus, transcriptData]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!audioElement) return;
     const handleTimeUpdate2 = () => {
       setCurrentTime(audioElement.currentTime);
@@ -1139,7 +1141,7 @@ function BroadcastPlayer({
     audioElement.addEventListener("timeupdate", handleTimeUpdate2);
     return () => audioElement.removeEventListener("timeupdate", handleTimeUpdate2);
   }, [audioElement]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (showTranscript && autoScrollEnabled && activeWordRef.current && transcriptContainerRef.current) {
       const container = transcriptContainerRef.current;
       const activeWord = activeWordRef.current;
@@ -1154,7 +1156,7 @@ function BroadcastPlayer({
       }
     }
   }, [currentTime, showTranscript, autoScrollEnabled]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!showTranscript || !transcriptContainerRef.current) return;
     const container = transcriptContainerRef.current;
     const handleScroll = () => {
@@ -1237,10 +1239,10 @@ function BroadcastPlayer({
         setAudioElement(internalPlayer);
       }
     } catch (error) {
-      debug.error("[BroadcastPlayer] Error getting internal player:", error);
+      debug.error("[DialtribePlayer] Error getting internal player:", error);
     }
   };
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const findAudioElement = () => {
       const videoElements = document.querySelectorAll("video, audio");
       if (videoElements.length > 0) {
@@ -1260,7 +1262,7 @@ function BroadcastPlayer({
       return () => timeouts.forEach(clearTimeout);
     }
   }, [playbackUrl]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (playing && !audioElement) {
       const videoElements = document.querySelectorAll("video, audio");
       if (videoElements.length > 0) {
@@ -1339,7 +1341,7 @@ function BroadcastPlayer({
       onError(error);
     }
   };
-  const handleRetry = react.useCallback(() => {
+  const handleRetry = React2.useCallback(() => {
     setHasError(false);
     setErrorMessage("");
     setIsLoadingVideo(true);
@@ -1362,7 +1364,7 @@ function BroadcastPlayer({
       }
     }
   };
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!enableKeyboardShortcuts) return;
     const seekBy = (seconds) => {
       if (!audioElement || duration <= 0) return;
@@ -1445,7 +1447,7 @@ function BroadcastPlayer({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { variant: "white", text: "Loading..." }) });
   }
   const hasTranscript = broadcast.transcriptStatus === 2 && transcriptData && (transcriptData.segments && transcriptData.segments.some((s) => s.words && s.words.length > 0) || transcriptData.words && transcriptData.words.length > 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `bg-black rounded-lg shadow-2xl w-full max-h-full flex flex-col overflow-hidden ${className}`, children: [
+  const playerContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `bg-black rounded-lg shadow-2xl w-full max-h-full flex flex-col overflow-hidden ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-zinc-900/50 backdrop-blur-sm border-b border-zinc-800 px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 flex justify-between items-center rounded-t-lg shrink-0", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-white", children: broadcast.streamKeyRecord?.foreignName || "Broadcast" }),
@@ -1977,90 +1979,9 @@ function BroadcastPlayer({
         }
       ` })
   ] });
+  return playerContent;
 }
-function BroadcastPlayerModal({
-  broadcast,
-  isOpen,
-  onClose,
-  appId,
-  contentId,
-  foreignId,
-  foreignTier,
-  renderClipCreator,
-  className,
-  enableKeyboardShortcuts = false
-}) {
-  const closeButtonRef = react.useRef(null);
-  const previousActiveElement = react.useRef(null);
-  react.useEffect(() => {
-    if (!isOpen) return;
-    previousActiveElement.current = document.activeElement;
-    setTimeout(() => {
-      closeButtonRef.current?.focus();
-    }, 100);
-    return () => {
-      if (previousActiveElement.current) {
-        previousActiveElement.current.focus();
-      }
-    };
-  }, [isOpen]);
-  react.useEffect(() => {
-    if (!isOpen) return;
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen, onClose]);
-  if (!isOpen) return null;
-  const handleBackdropClick = (e) => {
-    if (e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "fixed inset-0 bg-black/70 backdrop-blur-xl flex items-center justify-center z-50 p-2 sm:p-4",
-      onClick: handleBackdropClick,
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-label": "Broadcast player",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full max-w-7xl max-h-[95vh] sm:max-h-[90vh] overflow-hidden", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            ref: closeButtonRef,
-            onClick: onClose,
-            className: "absolute top-2 right-2 sm:top-4 sm:right-4 z-10 text-gray-400 hover:text-white text-2xl leading-none transition-colors w-8 h-8 flex items-center justify-center bg-black/50 rounded-full",
-            title: "Close (ESC)",
-            "aria-label": "Close player",
-            children: "\xD7"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          BroadcastPlayer,
-          {
-            broadcast,
-            appId,
-            contentId,
-            foreignId,
-            foreignTier,
-            renderClipCreator,
-            className,
-            enableKeyboardShortcuts,
-            onError: (error) => {
-              debug.error("[BroadcastPlayerModal] Player error:", error);
-            }
-          }
-        )
-      ] })
-    }
-  );
-}
-var BroadcastPlayerErrorBoundary = class extends react.Component {
+var DialtribePlayerErrorBoundary = class extends React2.Component {
   constructor(props) {
     super(props);
     this.handleReset = () => {
@@ -2186,6 +2107,84 @@ var BroadcastPlayerErrorBoundary = class extends react.Component {
     return this.props.children;
   }
 };
+var overlayStyles = {
+  modal: {
+    backdrop: "bg-black/70 backdrop-blur-xl p-2 sm:p-4",
+    container: "max-w-7xl max-h-[95vh] sm:max-h-[90vh]"
+  },
+  fullscreen: {
+    backdrop: "bg-black",
+    container: "h-full"
+  }
+};
+function DialtribeOverlay({
+  isOpen,
+  onClose,
+  mode = "modal",
+  children,
+  ariaLabel = "Dialog",
+  showCloseButton = true,
+  closeOnBackdropClick = true,
+  closeOnEsc = true
+}) {
+  const closeButtonRef = React2.useRef(null);
+  const previousActiveElement = React2.useRef(null);
+  React2.useEffect(() => {
+    if (!isOpen) return;
+    previousActiveElement.current = document.activeElement;
+    setTimeout(() => {
+      closeButtonRef.current?.focus();
+    }, 100);
+    return () => {
+      if (previousActiveElement.current) {
+        previousActiveElement.current.focus();
+      }
+    };
+  }, [isOpen]);
+  React2.useEffect(() => {
+    if (!isOpen || !closeOnEsc) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose, closeOnEsc]);
+  if (!isOpen) {
+    return null;
+  }
+  const handleBackdropClick = (e) => {
+    if (closeOnBackdropClick && e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  const styles = overlayStyles[mode];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `fixed inset-0 flex items-center justify-center z-50 ${styles.backdrop}`,
+      onClick: handleBackdropClick,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative w-full overflow-hidden ${styles.container}`, children: [
+        showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            ref: closeButtonRef,
+            onClick: onClose,
+            className: "absolute top-2 right-2 sm:top-4 sm:right-4 z-10 text-gray-400 hover:text-white text-2xl leading-none transition-colors w-8 h-8 flex items-center justify-center bg-black/50 rounded-full",
+            title: "Close (ESC)",
+            "aria-label": "Close",
+            children: "\xD7"
+          }
+        ),
+        children
+      ] })
+    }
+  );
+}
 
 // src/utils/media-constraints.ts
 function getMediaConstraints(options) {
@@ -2561,8 +2560,8 @@ function StreamKeyDisplay({
   layout = "vertical",
   darkMode = false
 }) {
-  const [isRevealed, setIsRevealed] = react.useState(false);
-  const [copySuccess, setCopySuccess] = react.useState(false);
+  const [isRevealed, setIsRevealed] = React2.useState(false);
+  const [copySuccess, setCopySuccess] = React2.useState(false);
   const obscureStreamKey = (key) => {
     if (key.length <= 12) {
       return "\u2022".repeat(key.length);
@@ -2670,9 +2669,9 @@ function StreamingControls({
   onAudioDeviceChange,
   mediaStream
 }) {
-  const [duration, setDuration] = react.useState(0);
-  const [showSettings, setShowSettings] = react.useState(false);
-  react.useEffect(() => {
+  const [duration, setDuration] = React2.useState(0);
+  const [showSettings, setShowSettings] = React2.useState(false);
+  React2.useEffect(() => {
     if (state !== "live" || !startTime) return;
     const interval = setInterval(() => {
       const elapsed = Math.floor((Date.now() - startTime.getTime()) / 1e3);
@@ -3005,8 +3004,8 @@ function StreamingControls({
   ] });
 }
 function StreamKeyInput({ onSubmit, inline = false }) {
-  const [streamKey, setStreamKey] = react.useState("");
-  const [error, setError] = react.useState("");
+  const [streamKey, setStreamKey] = React2.useState("");
+  const [error, setError] = React2.useState("");
   const containerClass = inline ? "dialtribe-stream-key-input flex items-center justify-center h-full w-full p-4 overflow-auto" : "dialtribe-stream-key-input flex items-center justify-center min-h-screen p-4";
   const validateStreamKey = (key) => {
     const pattern = /^[abvw][a-zA-Z0-9]+_.+$/;
@@ -3072,7 +3071,7 @@ function StreamKeyInput({ onSubmit, inline = false }) {
     ] })
   ] }) });
 }
-function BroadcastStreamer({
+function DialtribeStreamer({
   sessionToken: propSessionToken,
   streamKey: initialStreamKey,
   onDone,
@@ -3081,35 +3080,35 @@ function BroadcastStreamer({
   apiBaseUrl = DIALTRIBE_API_BASE,
   inline = false
 }) {
-  const containerClass = inline ? "dialtribe-broadcast-streamer h-full w-full bg-black relative" : "dialtribe-broadcast-streamer min-h-screen bg-black";
-  const centeredContainerClass = inline ? "dialtribe-broadcast-streamer flex items-center justify-center h-full w-full p-4 bg-black relative" : "dialtribe-broadcast-streamer flex items-center justify-center min-h-screen p-4 bg-black";
-  const dialTribeContext = useDialTribeOptional();
+  const containerClass = inline ? "dialtribe-dialtribe-streamer h-full w-full bg-black relative" : "dialtribe-dialtribe-streamer min-h-screen bg-black";
+  const centeredContainerClass = inline ? "dialtribe-dialtribe-streamer flex items-center justify-center h-full w-full p-4 bg-black relative" : "dialtribe-dialtribe-streamer flex items-center justify-center min-h-screen p-4 bg-black";
+  const dialTribeContext = useDialtribeOptional();
   const sessionToken = propSessionToken ?? dialTribeContext?.sessionToken ?? null;
-  const [streamKey, setStreamKey] = react.useState(initialStreamKey || null);
-  const [state, setState] = react.useState("idle");
-  react.useEffect(() => {
+  const [streamKey, setStreamKey] = React2.useState(initialStreamKey || null);
+  const [state, setState] = React2.useState("idle");
+  React2.useEffect(() => {
     if (initialStreamKey && initialStreamKey !== streamKey) {
       setStreamKey(initialStreamKey);
     }
   }, [initialStreamKey]);
-  const [error, setError] = react.useState(null);
-  const [mediaStream, setMediaStream] = react.useState(null);
-  const [streamer, setStreamer] = react.useState(null);
-  const [bytesSent, setBytesSent] = react.useState(0);
-  const [startTime, setStartTime] = react.useState(null);
-  const [isMuted, setIsMuted] = react.useState(false);
-  const [isVideoEnabled, setIsVideoEnabled] = react.useState(true);
-  const [facingMode, setFacingMode] = react.useState("user");
-  const [showStopConfirm, setShowStopConfirm] = react.useState(false);
-  const [showCloseConfirm, setShowCloseConfirm] = react.useState(false);
-  const [hasMultipleCameras, setHasMultipleCameras] = react.useState(false);
-  const [videoDevices, setVideoDevices] = react.useState([]);
-  const [audioDevices, setAudioDevices] = react.useState([]);
-  const [selectedVideoDeviceId, setSelectedVideoDeviceId] = react.useState();
-  const [selectedAudioDeviceId, setSelectedAudioDeviceId] = react.useState();
-  const videoRef = react.useRef(null);
-  const streamerRef = react.useRef(null);
-  const mediaStreamRef = react.useRef(null);
+  const [error, setError] = React2.useState(null);
+  const [mediaStream, setMediaStream] = React2.useState(null);
+  const [streamer, setStreamer] = React2.useState(null);
+  const [bytesSent, setBytesSent] = React2.useState(0);
+  const [startTime, setStartTime] = React2.useState(null);
+  const [isMuted, setIsMuted] = React2.useState(false);
+  const [isVideoEnabled, setIsVideoEnabled] = React2.useState(true);
+  const [facingMode, setFacingMode] = React2.useState("user");
+  const [showStopConfirm, setShowStopConfirm] = React2.useState(false);
+  const [showCloseConfirm, setShowCloseConfirm] = React2.useState(false);
+  const [hasMultipleCameras, setHasMultipleCameras] = React2.useState(false);
+  const [videoDevices, setVideoDevices] = React2.useState([]);
+  const [audioDevices, setAudioDevices] = React2.useState([]);
+  const [selectedVideoDeviceId, setSelectedVideoDeviceId] = React2.useState();
+  const [selectedAudioDeviceId, setSelectedAudioDeviceId] = React2.useState();
+  const videoRef = React2.useRef(null);
+  const streamerRef = React2.useRef(null);
+  const mediaStreamRef = React2.useRef(null);
   const isVideoKey = streamKey ? streamKey.startsWith("v") || streamKey.startsWith("w") : false;
   const handleStreamKeySubmit = (key) => {
     setStreamKey(key);
@@ -3119,7 +3118,7 @@ function BroadcastStreamer({
     setStreamKey(key);
     onStreamKeyChange?.(key);
   };
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!streamKey) return;
     const compat = checkBrowserCompatibility();
     if (!compat.compatible) {
@@ -3157,13 +3156,13 @@ function BroadcastStreamer({
       setHasMultipleCameras(false);
     }
   };
-  react.useEffect(() => {
+  React2.useEffect(() => {
     streamerRef.current = streamer;
   }, [streamer]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     mediaStreamRef.current = mediaStream;
   }, [mediaStream]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     return () => {
       if (streamerRef.current) {
         streamerRef.current.stop();
@@ -3173,7 +3172,7 @@ function BroadcastStreamer({
       }
     };
   }, []);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (state === "live") {
       const handleBeforeUnload = (e) => {
         e.preventDefault();
@@ -3184,7 +3183,7 @@ function BroadcastStreamer({
       return () => window.removeEventListener("beforeunload", handleBeforeUnload);
     }
   }, [state]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (videoRef.current && mediaStream) {
       videoRef.current.srcObject = mediaStream;
     }
@@ -3467,36 +3466,9 @@ function BroadcastStreamer({
     }
   };
   if (!sessionToken) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: centeredContainerClass, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white dark:bg-zinc-900 rounded-lg border border-gray-200 dark:border-zinc-800 p-8 max-w-md w-full text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "svg",
-        {
-          className: "w-8 h-8 text-red-600 dark:text-red-400",
-          fill: "none",
-          stroke: "currentColor",
-          viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              strokeWidth: 2,
-              d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-            }
-          )
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-bold text-black dark:text-white mb-2", children: "Authentication Required" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-4", children: "A session token is required to use the broadcast streamer." }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-500 mb-6", children: "Wrap your app with DialTribeProvider or pass a sessionToken prop." }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: handleDone,
-          className: "w-full px-6 py-2 bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 text-black dark:text-white font-medium rounded-lg transition-colors",
-          children: "Close"
-        }
-      )
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: centeredContainerClass, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 border-4 border-gray-700 border-t-blue-600 rounded-full animate-spin mx-auto mb-4" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white text-lg", children: "Connecting..." })
     ] }) });
   }
   if (!streamKey) {
@@ -3675,7 +3647,7 @@ function BroadcastStreamer({
   ] });
 }
 
-// src/utils/broadcast-popup.ts
+// src/utils/dialtribe-popup.ts
 function calculatePopupDimensions() {
   const screenWidth = window.screen.width;
   const screenHeight = window.screen.height;
@@ -3693,26 +3665,22 @@ function calculatePopupDimensions() {
   const top = Math.floor((screenHeight - height) / 2);
   return { width, height, left, top };
 }
-function openBroadcastStreamerPopup(options) {
+function openDialtribeStreamerPopup(options) {
   const {
     sessionToken,
     streamKey,
+    streamerUrl,
     appId,
-    mode,
-    additionalParams,
-    baseUrl = "/broadcasts/new"
+    additionalParams
   } = options;
   const { width, height, left, top } = calculatePopupDimensions();
   const params = new URLSearchParams();
-  if (mode) {
-    params.append("mode", mode);
-  }
   if (additionalParams) {
     Object.entries(additionalParams).forEach(([key, value]) => {
       params.append(key, value);
     });
   }
-  const url = `${baseUrl}${params.toString() ? `?${params.toString()}` : ""}`;
+  const url = `${streamerUrl}${params.toString() ? `?${params.toString()}` : ""}`;
   const popup = window.open(
     url,
     "_blank",
@@ -3742,18 +3710,177 @@ function openBroadcastStreamerPopup(options) {
   setTimeout(sendMessage, 500);
   return popup;
 }
-var openBroadcastPopup = openBroadcastStreamerPopup;
+var openBroadcastPopup = openDialtribeStreamerPopup;
+function useDialtribeStreamerPopup() {
+  const [sessionToken, setSessionToken] = React2.useState(null);
+  const [streamKey, setStreamKey] = React2.useState(null);
+  const [apiBaseUrl, setApiBaseUrl] = React2.useState("");
+  const receivedDataRef = React2.useRef(false);
+  React2.useEffect(() => {
+    const handleMessage = (event) => {
+      if (event.data?.type !== "STREAM_KEY") return;
+      const { sessionToken: token, streamKey: key, apiBaseUrl: url } = event.data;
+      if (token && key) {
+        receivedDataRef.current = true;
+        setSessionToken(token);
+        setStreamKey(key);
+        if (url) {
+          setApiBaseUrl(url);
+        }
+      } else if (key) {
+        receivedDataRef.current = true;
+        setStreamKey(key);
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    const requestCredentials = () => {
+      if (window.opener && !receivedDataRef.current) {
+        window.opener.postMessage({ type: "POPUP_READY" }, "*");
+      }
+    };
+    requestCredentials();
+    const pollInterval = setInterval(() => {
+      if (!receivedDataRef.current) {
+        requestCredentials();
+      } else {
+        clearInterval(pollInterval);
+      }
+    }, 200);
+    const timeout = setTimeout(() => {
+      clearInterval(pollInterval);
+    }, 1e4);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+      clearInterval(pollInterval);
+      clearTimeout(timeout);
+    };
+  }, []);
+  return {
+    sessionToken,
+    streamKey,
+    apiBaseUrl,
+    setStreamKey,
+    isReady: receivedDataRef.current
+  };
+}
+function useDialtribeStreamerLauncher(options) {
+  const {
+    sessionToken,
+    streamKey,
+    streamerUrl,
+    apiBaseUrl,
+    fallback = "fullscreen",
+    onPopupBlocked,
+    onDone,
+    onStreamKeyChange
+  } = options;
+  const [showFallback, setShowFallback] = React2.useState(false);
+  const [wasBlocked, setWasBlocked] = React2.useState(false);
+  const popupRef = React2.useRef(null);
+  const sessionTokenRef = React2.useRef(sessionToken);
+  const streamKeyRef = React2.useRef(streamKey);
+  const apiBaseUrlRef = React2.useRef(apiBaseUrl);
+  React2.useEffect(() => {
+    sessionTokenRef.current = sessionToken;
+  }, [sessionToken]);
+  React2.useEffect(() => {
+    streamKeyRef.current = streamKey;
+  }, [streamKey]);
+  React2.useEffect(() => {
+    apiBaseUrlRef.current = apiBaseUrl;
+  }, [apiBaseUrl]);
+  React2.useEffect(() => {
+    const handleMessage = (event) => {
+      if (event.data?.type === "POPUP_READY" && popupRef.current) {
+        popupRef.current.postMessage(
+          {
+            type: "STREAM_KEY",
+            sessionToken: sessionTokenRef.current,
+            streamKey: streamKeyRef.current,
+            apiBaseUrl: apiBaseUrlRef.current
+          },
+          "*"
+        );
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, []);
+  const launch = React2.useCallback(() => {
+    if (!sessionToken) {
+      console.warn("Cannot launch streamer: no session token");
+      return;
+    }
+    setWasBlocked(false);
+    const popup = openDialtribeStreamerPopup({
+      sessionToken,
+      streamKey,
+      streamerUrl
+    });
+    if (popup) {
+      popupRef.current = popup;
+      return;
+    }
+    setWasBlocked(true);
+    onPopupBlocked?.();
+    switch (fallback) {
+      case "fullscreen":
+        setShowFallback(true);
+        break;
+      case "newTab":
+        window.open(streamerUrl, "_blank");
+        break;
+    }
+  }, [sessionToken, streamKey, streamerUrl, fallback, onPopupBlocked]);
+  const closeFallback = React2.useCallback(() => {
+    setShowFallback(false);
+    onDone?.();
+  }, [onDone]);
+  const Fallback = React2.useCallback(() => {
+    if (fallback !== "fullscreen" || !showFallback) {
+      return null;
+    }
+    if (typeof document === "undefined") {
+      return null;
+    }
+    const streamerElement = React2__default.default.createElement(DialtribeStreamer, {
+      sessionToken: sessionToken || void 0,
+      streamKey: streamKey || void 0,
+      apiBaseUrl,
+      onDone: closeFallback,
+      onStreamKeyChange
+    });
+    const overlayElement = React2__default.default.createElement(
+      DialtribeOverlay,
+      {
+        mode: "fullscreen",
+        isOpen: true,
+        onClose: closeFallback,
+        children: streamerElement
+      }
+    );
+    return reactDom.createPortal(overlayElement, document.body);
+  }, [fallback, showFallback, closeFallback, sessionToken, streamKey, apiBaseUrl, onStreamKeyChange]);
+  return {
+    launch,
+    Fallback,
+    showFallback,
+    closeFallback,
+    popupRef: popupRef.current,
+    wasBlocked
+  };
+}
 
 exports.AudioWaveform = AudioWaveform;
-exports.BroadcastPlayer = BroadcastPlayer;
-exports.BroadcastPlayerErrorBoundary = BroadcastPlayerErrorBoundary;
-exports.BroadcastPlayerModal = BroadcastPlayerModal;
-exports.BroadcastStreamer = BroadcastStreamer;
 exports.CDN_DOMAIN = CDN_DOMAIN;
 exports.DEFAULT_ENCODER_SERVER_URL = DEFAULT_ENCODER_SERVER_URL;
 exports.DIALTRIBE_API_BASE = DIALTRIBE_API_BASE;
-exports.DialTribeClient = DialTribeClient;
-exports.DialTribeProvider = DialTribeProvider;
+exports.DialtribeClient = DialtribeClient;
+exports.DialtribeOverlay = DialtribeOverlay;
+exports.DialtribePlayer = DialtribePlayer;
+exports.DialtribePlayerErrorBoundary = DialtribePlayerErrorBoundary;
+exports.DialtribeProvider = DialtribeProvider;
+exports.DialtribeStreamer = DialtribeStreamer;
 exports.ENDPOINTS = ENDPOINTS;
 exports.HTTP_STATUS = HTTP_STATUS;
 exports.HelloWorld = HelloWorld;
@@ -3771,7 +3898,9 @@ exports.formatTime = formatTime;
 exports.getMediaConstraints = getMediaConstraints;
 exports.getMediaRecorderOptions = getMediaRecorderOptions;
 exports.openBroadcastPopup = openBroadcastPopup;
-exports.openBroadcastStreamerPopup = openBroadcastStreamerPopup;
-exports.useDialTribe = useDialTribe;
+exports.openDialtribeStreamerPopup = openDialtribeStreamerPopup;
+exports.useDialtribe = useDialtribe;
+exports.useDialtribeStreamerLauncher = useDialtribeStreamerLauncher;
+exports.useDialtribeStreamerPopup = useDialtribeStreamerPopup;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map