@dialtribe/react-sdk 0.1.0-alpha.5 → 0.1.0-alpha.7

package/dist/broadcast-player.mjs

@@ -8,6 +8,7 @@ function DialTribeProvider({
   sessionToken: initialToken,
   onTokenRefresh,
   onTokenExpired,
+  apiBaseUrl,
   children
 }) {
   const [sessionToken, setSessionTokenState] = useState(initialToken);
@@ -36,7 +37,8 @@ function DialTribeProvider({
     sessionToken,
     setSessionToken,
     isExpired,
-    markExpired
+    markExpired,
+    apiBaseUrl
   };
   return /* @__PURE__ */ jsx(DialTribeContext.Provider, { value, children });
 }
@@ -51,18 +53,28 @@ function useDialTribe() {
 }
 
 // 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`
-};
+function getDefaultApiBaseUrl() {
+  if (typeof process !== "undefined" && process.env?.NEXT_PUBLIC_DIALTRIBE_API_URL) {
+    return process.env.NEXT_PUBLIC_DIALTRIBE_API_URL;
+  }
+  return "https://dialtribe.com/api/public/v1";
+}
+var DIALTRIBE_API_BASE = getDefaultApiBaseUrl();
+function getEndpoints(baseUrl = DIALTRIBE_API_BASE) {
+  return {
+    broadcasts: `${baseUrl}/broadcasts`,
+    broadcast: (id) => `${baseUrl}/broadcasts/${id}`,
+    contentPlay: `${baseUrl}/content/play`,
+    presignedUrl: `${baseUrl}/media/presigned-url`,
+    sessionStart: `${baseUrl}/session/start`,
+    sessionPing: `${baseUrl}/session/ping`
+  };
+}
+var ENDPOINTS = getEndpoints();
 var DialTribeClient = class {
   constructor(config) {
     this.config = config;
+    this.endpoints = config.apiBaseUrl ? getEndpoints(config.apiBaseUrl) : ENDPOINTS;
   }
   /**
    * Make an authenticated request to DialTribe API
@@ -109,7 +121,7 @@ var DialTribeClient = class {
     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 url = `${this.endpoints.broadcasts}${searchParams.toString() ? `?${searchParams}` : ""}`;
     const response = await this.fetch(url);
     if (!response.ok) {
       throw new Error(`Failed to fetch broadcasts: ${response.status} ${response.statusText}`);
@@ -120,7 +132,7 @@ var DialTribeClient = class {
    * Get a single broadcast by ID
    */
   async getBroadcast(id) {
-    const response = await this.fetch(ENDPOINTS.broadcast(id));
+    const response = await this.fetch(this.endpoints.broadcast(id));
     if (!response.ok) {
       if (response.status === 404) {
         throw new Error("Broadcast not found");
@@ -142,7 +154,7 @@ var DialTribeClient = class {
     });
     if (params.hash) searchParams.set("hash", params.hash);
     if (params.action) searchParams.set("action", params.action);
-    const url = `${ENDPOINTS.contentPlay}?${searchParams}`;
+    const url = `${this.endpoints.contentPlay}?${searchParams}`;
     const response = await this.fetch(url, {
       redirect: "manual"
       // Don't follow redirect, we want the URL
@@ -166,7 +178,7 @@ var DialTribeClient = class {
       hash: params.hash,
       fileType: params.fileType
     });
-    const url = `${ENDPOINTS.presignedUrl}?${searchParams}`;
+    const url = `${this.endpoints.presignedUrl}?${searchParams}`;
     const response = await this.fetch(url);
     if (!response.ok) {
       throw new Error(`Failed to refresh URL: ${response.status} ${response.statusText}`);
@@ -179,7 +191,7 @@ var DialTribeClient = class {
    * @returns audienceId and optional resumePosition
    */
   async startSession(params) {
-    const response = await this.fetch(ENDPOINTS.sessionStart, {
+    const response = await this.fetch(this.endpoints.sessionStart, {
       method: "POST",
       body: JSON.stringify(params)
     });
@@ -198,7 +210,7 @@ var DialTribeClient = class {
    * - 3: UNMOUNT
    */
   async sendSessionPing(params) {
-    const response = await this.fetch(ENDPOINTS.sessionPing, {
+    const response = await this.fetch(this.endpoints.sessionPing, {
       method: "POST",
       body: JSON.stringify(params)
     });
@@ -741,11 +753,12 @@ function BroadcastPlayer({
   className = "",
   enableKeyboardShortcuts = false
 }) {
-  const { sessionToken, setSessionToken, markExpired } = useDialTribe();
+  const { sessionToken, setSessionToken, markExpired, apiBaseUrl } = useDialTribe();
   const clientRef = useRef(null);
   if (!clientRef.current && sessionToken) {
     clientRef.current = new DialTribeClient({
       sessionToken,
+      apiBaseUrl,
       onTokenRefresh: (newToken, expiresAt) => {
         debug.log(`[DialTribeClient] Token refreshed, expires at ${expiresAt}`);
         setSessionToken(newToken, expiresAt);
@@ -1404,8 +1417,8 @@ 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 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: [
+  return /* @__PURE__ */ jsxs("div", { className: `bg-black rounded-lg shadow-2xl w-full max-h-full flex flex-col overflow-hidden ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "bg-zinc-900/50 backdrop-blur-sm border-b border-zinc-800 px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 flex justify-between items-center rounded-t-lg shrink-0", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-white", children: broadcast.streamKeyRecord?.foreignName || "Broadcast" }),
         /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-400", children: [
@@ -1433,8 +1446,8 @@ function BroadcastPlayer({
         }
       ) })
     ] }),
-    /* @__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: "flex flex-col md:flex-row flex-1 min-h-0 overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "shrink-0 md:shrink md:flex-1 flex flex-col overflow-hidden", children: [
         /* @__PURE__ */ jsxs("div", { className: `relative ${isAudioOnly ? "bg-linear-to-br from-zinc-900 via-zinc-800 to-zinc-900 flex items-stretch" : "bg-black"}`, children: [
           isAudioOnly ? /* @__PURE__ */ jsx("div", { className: "relative cursor-pointer w-full flex flex-col", onClick: handleVideoClick, children: !hasError ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "w-full h-full relative", children: [
             /* @__PURE__ */ jsx(AudioWaveform, { audioElement, isPlaying: isLiveStream ? true : playing, isLive: isLiveStream }),
@@ -1716,7 +1729,7 @@ function BroadcastPlayer({
           ] })
         ] }))
       ] }),
-      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: [
+      showTranscript && hasTranscript && /* @__PURE__ */ jsxs("div", { className: "flex-1 md:flex-none min-h-0 w-full md:w-96 bg-zinc-900 border-t md:border-t-0 border-l border-zinc-800 flex flex-col overflow-hidden", children: [
         /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-b border-zinc-800 bg-zinc-900/50 shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-green-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }),
@@ -1745,7 +1758,7 @@ function BroadcastPlayer({
             ]
           }
         ) }),
-        /* @__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: (() => {
+        /* @__PURE__ */ jsx("div", { ref: transcriptContainerRef, className: "flex-1 min-h-0 overflow-y-auto px-4 py-4 text-gray-300 leading-relaxed", children: isLoadingTranscript ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx("div", { className: "h-6 w-6 border-2 border-gray-600 border-t-blue-500 rounded-full animate-spin" }) }) : transcriptData?.segments && transcriptData.segments.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-4", children: (() => {
           const filteredSegments = transcriptData.segments.filter((s) => s.words && s.words.length > 0);
           let globalWordIndex = 0;
           const wordMap = /* @__PURE__ */ new Map();
@@ -1905,14 +1918,12 @@ function BroadcastPlayerModal({
 }) {
   const closeButtonRef = useRef(null);
   const previousActiveElement = useRef(null);
-  if (!isOpen) return null;
   useEffect(() => {
-    if (isOpen) {
-      previousActiveElement.current = document.activeElement;
-      setTimeout(() => {
-        closeButtonRef.current?.focus();
-      }, 100);
-    }
+    if (!isOpen) return;
+    previousActiveElement.current = document.activeElement;
+    setTimeout(() => {
+      closeButtonRef.current?.focus();
+    }, 100);
     return () => {
       if (previousActiveElement.current) {
         previousActiveElement.current.focus();
@@ -1920,6 +1931,7 @@ function BroadcastPlayerModal({
     };
   }, [isOpen]);
   useEffect(() => {
+    if (!isOpen) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         onClose();
@@ -1927,7 +1939,8 @@ function BroadcastPlayerModal({
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [onClose]);
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
   const handleBackdropClick = (e) => {
     if (e.target === e.currentTarget) {
       onClose();
@@ -1936,18 +1949,18 @@ function BroadcastPlayerModal({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "fixed inset-0 bg-black/70 backdrop-blur-xl flex items-center justify-center z-50 p-4",
+      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 h-full max-w-7xl max-h-[90vh]", children: [
+      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-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",
+            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"