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

package/dist/index.mjs

@@ -1,6 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { createContext, useState, useCallback, useEffect, useContext, useRef, Component } from 'react';
+import React2, { createContext, useState, useCallback, useEffect, useContext, useRef, Component } from 'react';
 import ReactPlayer from 'react-player';
+import { createPortal } from 'react-dom';
 
 // src/components/HelloWorld.tsx
 function HelloWorld({ name = "World" }) {
@@ -21,8 +22,8 @@ function HelloWorld({ name = "World" }) {
     /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "14px" }, children: "@dialtribe/react-sdk is working correctly" })
   ] });
 }
-var DialTribeContext = createContext(null);
-function DialTribeProvider({
+var DialtribeContext = createContext(null);
+function DialtribeProvider({
   sessionToken: initialToken,
   onTokenRefresh,
   onTokenExpired,
@@ -58,22 +59,22 @@ function DialTribeProvider({
     markExpired,
     apiBaseUrl
   };
-  return /* @__PURE__ */ jsx(DialTribeContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx(DialtribeContext.Provider, { value, children });
 }
-function useDialTribe() {
-  const context = useContext(DialTribeContext);
+function useDialtribe() {
+  const context = useContext(DialtribeContext);
   if (!context) {
     throw new Error(
-      'useDialTribe must be used within a DialTribeProvider. Wrap your app with <DialTribeProvider sessionToken="sess_xxx">...</DialTribeProvider>'
+      'useDialtribe must be used within a DialtribeProvider. Wrap your app with <DialtribeProvider sessionToken="sess_xxx">...</DialtribeProvider>'
     );
   }
   return context;
 }
-function useDialTribeOptional() {
-  return useContext(DialTribeContext);
+function useDialtribeOptional() {
+  return useContext(DialtribeContext);
 }
 
-// src/client/DialTribeClient.ts
+// src/client/DialtribeClient.ts
 function getDefaultApiBaseUrl() {
   if (typeof process !== "undefined" && process.env?.NEXT_PUBLIC_DIALTRIBE_API_URL) {
     return process.env.NEXT_PUBLIC_DIALTRIBE_API_URL;
@@ -93,13 +94,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
@@ -764,7 +765,7 @@ function getErrorMessage(error) {
   }
   return "Unable to play media. Please try refreshing the page or contact support if the problem persists.";
 }
-function BroadcastPlayer({
+function DialtribePlayer({
   broadcast,
   appId,
   contentId,
@@ -775,18 +776,18 @@ function BroadcastPlayer({
   className = "",
   enableKeyboardShortcuts = false
 }) {
-  const { sessionToken, setSessionToken, markExpired, apiBaseUrl } = useDialTribe();
+  const { sessionToken, setSessionToken, markExpired, apiBaseUrl } = useDialtribe();
   const clientRef = useRef(null);
   if (!clientRef.current && sessionToken) {
-    clientRef.current = new DialTribeClient({
+    clientRef.current = new DialtribeClient({
       sessionToken,
       apiBaseUrl,
       onTokenRefresh: (newToken, expiresAt) => {
-        debug.log(`[DialTribeClient] Token refreshed, expires at ${expiresAt}`);
+        debug.log(`[DialtribeClient] Token refreshed, expires at ${expiresAt}`);
         setSessionToken(newToken, expiresAt);
       },
       onTokenExpired: () => {
-        debug.error("[DialTribeClient] Token expired");
+        debug.error("[DialtribeClient] Token expired");
         markExpired();
       }
     });
@@ -1231,7 +1232,7 @@ function BroadcastPlayer({
         setAudioElement(internalPlayer);
       }
     } catch (error) {
-      debug.error("[BroadcastPlayer] Error getting internal player:", error);
+      debug.error("[DialtribePlayer] Error getting internal player:", error);
     }
   };
   useEffect(() => {
@@ -1439,7 +1440,7 @@ function BroadcastPlayer({
     return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsx(LoadingSpinner, { variant: "white", text: "Loading..." }) });
   }
   const hasTranscript = broadcast.transcriptStatus === 2 && transcriptData && (transcriptData.segments && transcriptData.segments.some((s) => s.words && s.words.length > 0) || transcriptData.words && transcriptData.words.length > 0);
-  return /* @__PURE__ */ jsxs("div", { className: `bg-black rounded-lg shadow-2xl w-full max-h-full flex flex-col overflow-hidden ${className}`, children: [
+  const playerContent = /* @__PURE__ */ jsxs("div", { className: `bg-black rounded-lg shadow-2xl w-full max-h-full flex flex-col overflow-hidden ${className}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "bg-zinc-900/50 backdrop-blur-sm border-b border-zinc-800 px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 flex justify-between items-center rounded-t-lg shrink-0", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-white", children: broadcast.streamKeyRecord?.foreignName || "Broadcast" }),
@@ -1971,90 +1972,9 @@ function BroadcastPlayer({
         }
       ` })
   ] });
+  return playerContent;
 }
-function BroadcastPlayerModal({
-  broadcast,
-  isOpen,
-  onClose,
-  appId,
-  contentId,
-  foreignId,
-  foreignTier,
-  renderClipCreator,
-  className,
-  enableKeyboardShortcuts = false
-}) {
-  const closeButtonRef = useRef(null);
-  const previousActiveElement = useRef(null);
-  useEffect(() => {
-    if (!isOpen) return;
-    previousActiveElement.current = document.activeElement;
-    setTimeout(() => {
-      closeButtonRef.current?.focus();
-    }, 100);
-    return () => {
-      if (previousActiveElement.current) {
-        previousActiveElement.current.focus();
-      }
-    };
-  }, [isOpen]);
-  useEffect(() => {
-    if (!isOpen) return;
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen, onClose]);
-  if (!isOpen) return null;
-  const handleBackdropClick = (e) => {
-    if (e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "fixed inset-0 bg-black/70 backdrop-blur-xl flex items-center justify-center z-50 p-2 sm:p-4",
-      onClick: handleBackdropClick,
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-label": "Broadcast player",
-      children: /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-7xl max-h-[95vh] sm:max-h-[90vh] overflow-hidden", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            ref: closeButtonRef,
-            onClick: onClose,
-            className: "absolute top-2 right-2 sm:top-4 sm:right-4 z-10 text-gray-400 hover:text-white text-2xl leading-none transition-colors w-8 h-8 flex items-center justify-center bg-black/50 rounded-full",
-            title: "Close (ESC)",
-            "aria-label": "Close player",
-            children: "\xD7"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          BroadcastPlayer,
-          {
-            broadcast,
-            appId,
-            contentId,
-            foreignId,
-            foreignTier,
-            renderClipCreator,
-            className,
-            enableKeyboardShortcuts,
-            onError: (error) => {
-              debug.error("[BroadcastPlayerModal] Player error:", error);
-            }
-          }
-        )
-      ] })
-    }
-  );
-}
-var BroadcastPlayerErrorBoundary = class extends Component {
+var DialtribePlayerErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
     this.handleReset = () => {
@@ -2180,6 +2100,84 @@ var BroadcastPlayerErrorBoundary = class extends Component {
     return this.props.children;
   }
 };
+var overlayStyles = {
+  modal: {
+    backdrop: "bg-black/70 backdrop-blur-xl p-2 sm:p-4",
+    container: "max-w-7xl max-h-[95vh] sm:max-h-[90vh]"
+  },
+  fullscreen: {
+    backdrop: "bg-black",
+    container: "h-full"
+  }
+};
+function DialtribeOverlay({
+  isOpen,
+  onClose,
+  mode = "modal",
+  children,
+  ariaLabel = "Dialog",
+  showCloseButton = true,
+  closeOnBackdropClick = true,
+  closeOnEsc = true
+}) {
+  const closeButtonRef = useRef(null);
+  const previousActiveElement = useRef(null);
+  useEffect(() => {
+    if (!isOpen) return;
+    previousActiveElement.current = document.activeElement;
+    setTimeout(() => {
+      closeButtonRef.current?.focus();
+    }, 100);
+    return () => {
+      if (previousActiveElement.current) {
+        previousActiveElement.current.focus();
+      }
+    };
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen || !closeOnEsc) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose, closeOnEsc]);
+  if (!isOpen) {
+    return null;
+  }
+  const handleBackdropClick = (e) => {
+    if (closeOnBackdropClick && e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  const styles = overlayStyles[mode];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `fixed inset-0 flex items-center justify-center z-50 ${styles.backdrop}`,
+      onClick: handleBackdropClick,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsxs("div", { className: `relative w-full overflow-hidden ${styles.container}`, children: [
+        showCloseButton && /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: closeButtonRef,
+            onClick: onClose,
+            className: "absolute top-2 right-2 sm:top-4 sm:right-4 z-10 text-gray-400 hover:text-white text-2xl leading-none transition-colors w-8 h-8 flex items-center justify-center bg-black/50 rounded-full",
+            title: "Close (ESC)",
+            "aria-label": "Close",
+            children: "\xD7"
+          }
+        ),
+        children
+      ] })
+    }
+  );
+}
 
 // src/utils/media-constraints.ts
 function getMediaConstraints(options) {
@@ -3066,7 +3064,7 @@ function StreamKeyInput({ onSubmit, inline = false }) {
     ] })
   ] }) });
 }
-function BroadcastStreamer({
+function DialtribeStreamer({
   sessionToken: propSessionToken,
   streamKey: initialStreamKey,
   onDone,
@@ -3075,9 +3073,9 @@ 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] = useState(initialStreamKey || null);
   const [state, setState] = useState("idle");
@@ -3461,36 +3459,9 @@ function BroadcastStreamer({
     }
   };
   if (!sessionToken) {
-    return /* @__PURE__ */ jsx("div", { className: centeredContainerClass, children: /* @__PURE__ */ jsxs("div", { className: "bg-white dark:bg-zinc-900 rounded-lg border border-gray-200 dark:border-zinc-800 p-8 max-w-md w-full text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ jsx(
-        "svg",
-        {
-          className: "w-8 h-8 text-red-600 dark:text-red-400",
-          fill: "none",
-          stroke: "currentColor",
-          viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              strokeWidth: 2,
-              d: "M12 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__ */ jsx("h2", { className: "text-xl font-bold text-black dark:text-white mb-2", children: "Authentication Required" }),
-      /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-4", children: "A session token is required to use the broadcast streamer." }),
-      /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: centeredContainerClass, children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 border-4 border-gray-700 border-t-blue-600 rounded-full animate-spin mx-auto mb-4" }),
+      /* @__PURE__ */ jsx("p", { className: "text-white text-lg", children: "Connecting..." })
     ] }) });
   }
   if (!streamKey) {
@@ -3669,7 +3640,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;
@@ -3687,26 +3658,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",
@@ -3736,8 +3703,167 @@ function openBroadcastStreamerPopup(options) {
   setTimeout(sendMessage, 500);
   return popup;
 }
-var openBroadcastPopup = openBroadcastStreamerPopup;
+var openBroadcastPopup = openDialtribeStreamerPopup;
+function useDialtribeStreamerPopup() {
+  const [sessionToken, setSessionToken] = useState(null);
+  const [streamKey, setStreamKey] = useState(null);
+  const [apiBaseUrl, setApiBaseUrl] = useState("");
+  const receivedDataRef = useRef(false);
+  useEffect(() => {
+    const handleMessage = (event) => {
+      if (event.data?.type !== "STREAM_KEY") return;
+      const { sessionToken: token, streamKey: key, apiBaseUrl: url } = event.data;
+      if (token && key) {
+        receivedDataRef.current = true;
+        setSessionToken(token);
+        setStreamKey(key);
+        if (url) {
+          setApiBaseUrl(url);
+        }
+      } else if (key) {
+        receivedDataRef.current = true;
+        setStreamKey(key);
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    const requestCredentials = () => {
+      if (window.opener && !receivedDataRef.current) {
+        window.opener.postMessage({ type: "POPUP_READY" }, "*");
+      }
+    };
+    requestCredentials();
+    const pollInterval = setInterval(() => {
+      if (!receivedDataRef.current) {
+        requestCredentials();
+      } else {
+        clearInterval(pollInterval);
+      }
+    }, 200);
+    const timeout = setTimeout(() => {
+      clearInterval(pollInterval);
+    }, 1e4);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+      clearInterval(pollInterval);
+      clearTimeout(timeout);
+    };
+  }, []);
+  return {
+    sessionToken,
+    streamKey,
+    apiBaseUrl,
+    setStreamKey,
+    isReady: receivedDataRef.current
+  };
+}
+function useDialtribeStreamerLauncher(options) {
+  const {
+    sessionToken,
+    streamKey,
+    streamerUrl,
+    apiBaseUrl,
+    fallback = "fullscreen",
+    onPopupBlocked,
+    onDone,
+    onStreamKeyChange
+  } = options;
+  const [showFallback, setShowFallback] = useState(false);
+  const [wasBlocked, setWasBlocked] = useState(false);
+  const popupRef = useRef(null);
+  const sessionTokenRef = useRef(sessionToken);
+  const streamKeyRef = useRef(streamKey);
+  const apiBaseUrlRef = useRef(apiBaseUrl);
+  useEffect(() => {
+    sessionTokenRef.current = sessionToken;
+  }, [sessionToken]);
+  useEffect(() => {
+    streamKeyRef.current = streamKey;
+  }, [streamKey]);
+  useEffect(() => {
+    apiBaseUrlRef.current = apiBaseUrl;
+  }, [apiBaseUrl]);
+  useEffect(() => {
+    const handleMessage = (event) => {
+      if (event.data?.type === "POPUP_READY" && popupRef.current) {
+        popupRef.current.postMessage(
+          {
+            type: "STREAM_KEY",
+            sessionToken: sessionTokenRef.current,
+            streamKey: streamKeyRef.current,
+            apiBaseUrl: apiBaseUrlRef.current
+          },
+          "*"
+        );
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, []);
+  const launch = useCallback(() => {
+    if (!sessionToken) {
+      console.warn("Cannot launch streamer: no session token");
+      return;
+    }
+    setWasBlocked(false);
+    const popup = openDialtribeStreamerPopup({
+      sessionToken,
+      streamKey,
+      streamerUrl
+    });
+    if (popup) {
+      popupRef.current = popup;
+      return;
+    }
+    setWasBlocked(true);
+    onPopupBlocked?.();
+    switch (fallback) {
+      case "fullscreen":
+        setShowFallback(true);
+        break;
+      case "newTab":
+        window.open(streamerUrl, "_blank");
+        break;
+    }
+  }, [sessionToken, streamKey, streamerUrl, fallback, onPopupBlocked]);
+  const closeFallback = useCallback(() => {
+    setShowFallback(false);
+    onDone?.();
+  }, [onDone]);
+  const Fallback = useCallback(() => {
+    if (fallback !== "fullscreen" || !showFallback) {
+      return null;
+    }
+    if (typeof document === "undefined") {
+      return null;
+    }
+    const streamerElement = React2.createElement(DialtribeStreamer, {
+      sessionToken: sessionToken || void 0,
+      streamKey: streamKey || void 0,
+      apiBaseUrl,
+      onDone: closeFallback,
+      onStreamKeyChange
+    });
+    const overlayElement = React2.createElement(
+      DialtribeOverlay,
+      {
+        mode: "fullscreen",
+        isOpen: true,
+        onClose: closeFallback,
+        children: streamerElement
+      }
+    );
+    return createPortal(overlayElement, document.body);
+  }, [fallback, showFallback, closeFallback, sessionToken, streamKey, apiBaseUrl, onStreamKeyChange]);
+  return {
+    launch,
+    Fallback,
+    showFallback,
+    closeFallback,
+    popupRef: popupRef.current,
+    wasBlocked
+  };
+}
 
-export { AudioWaveform, BroadcastPlayer, BroadcastPlayerErrorBoundary, BroadcastPlayerModal, BroadcastStreamer, CDN_DOMAIN, DEFAULT_ENCODER_SERVER_URL, DIALTRIBE_API_BASE, DialTribeClient, DialTribeProvider, ENDPOINTS, HTTP_STATUS, HelloWorld, LoadingSpinner, StreamKeyDisplay, StreamKeyInput, StreamingControls, StreamingPreview, WebSocketStreamer, buildBroadcastCdnUrl, buildBroadcastS3KeyPrefix, calculatePopupDimensions, checkBrowserCompatibility, formatTime, getMediaConstraints, getMediaRecorderOptions, openBroadcastPopup, openBroadcastStreamerPopup, useDialTribe };
+export { AudioWaveform, CDN_DOMAIN, DEFAULT_ENCODER_SERVER_URL, DIALTRIBE_API_BASE, DialtribeClient, DialtribeOverlay, DialtribePlayer, DialtribePlayerErrorBoundary, DialtribeProvider, DialtribeStreamer, ENDPOINTS, HTTP_STATUS, HelloWorld, LoadingSpinner, StreamKeyDisplay, StreamKeyInput, StreamingControls, StreamingPreview, WebSocketStreamer, buildBroadcastCdnUrl, buildBroadcastS3KeyPrefix, calculatePopupDimensions, checkBrowserCompatibility, formatTime, getMediaConstraints, getMediaRecorderOptions, openBroadcastPopup, openDialtribeStreamerPopup, useDialtribe, useDialtribeStreamerLauncher, useDialtribeStreamerPopup };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map