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

package/dist/{broadcast-player.mjs → dialtribe-player.mjs}

@@ -2,9 +2,9 @@ import { createContext, useState, useCallback, useEffect, useContext, useRef, Co
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ReactPlayer from 'react-player';
 
-// src/context/DialTribeProvider.tsx
-var DialTribeContext = createContext(null);
-function DialTribeProvider({
+// src/context/DialtribeProvider.tsx
+var DialtribeContext = createContext(null);
+function DialtribeProvider({
   sessionToken: initialToken,
   onTokenRefresh,
   onTokenExpired,
@@ -40,19 +40,19 @@ 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;
 }
 
-// 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;
@@ -72,13 +72,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
@@ -743,7 +743,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,
@@ -754,18 +754,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();
       }
     });
@@ -1210,7 +1210,7 @@ function BroadcastPlayer({
         setAudioElement(internalPlayer);
       }
     } catch (error) {
-      debug.error("[BroadcastPlayer] Error getting internal player:", error);
+      debug.error("[DialtribePlayer] Error getting internal player:", error);
     }
   };
   useEffect(() => {
@@ -1418,7 +1418,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" }),
@@ -1950,90 +1950,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 = () => {
@@ -2159,7 +2078,85 @@ 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
+      ] })
+    }
+  );
+}
 
-export { AudioWaveform, BroadcastPlayer, BroadcastPlayerErrorBoundary, BroadcastPlayerModal, CDN_DOMAIN, DIALTRIBE_API_BASE, DialTribeClient, DialTribeProvider, ENDPOINTS, HTTP_STATUS, LoadingSpinner, buildBroadcastCdnUrl, buildBroadcastS3KeyPrefix, formatTime, useDialTribe };
-//# sourceMappingURL=broadcast-player.mjs.map
-//# sourceMappingURL=broadcast-player.mjs.map
+export { AudioWaveform, CDN_DOMAIN, DIALTRIBE_API_BASE, DialtribeClient, DialtribeOverlay, DialtribePlayer, DialtribePlayerErrorBoundary, DialtribeProvider, ENDPOINTS, HTTP_STATUS, LoadingSpinner, buildBroadcastCdnUrl, buildBroadcastS3KeyPrefix, formatTime, useDialtribe };
+//# sourceMappingURL=dialtribe-player.mjs.map
+//# sourceMappingURL=dialtribe-player.mjs.map