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

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 export { HelloWorld, HelloWorldProps } from './hello-world.mjs';
-export { A as ApiClientConfig, h as AudioWaveform, B as Broadcast, C as CDN_DOMAIN, d as DIALTRIBE_API_BASE, c as DialtribeClient, a as DialtribeContextValue, i as DialtribeOverlay, k as DialtribeOverlayMode, j as DialtribeOverlayProps, e as DialtribePlayer, g as DialtribePlayerErrorBoundary, f as DialtribePlayerProps, D as DialtribeProvider, b as DialtribeProviderProps, E as ENDPOINTS, H as HTTP_STATUS, q as HttpStatusCode, L as LoadingSpinner, m as TranscriptData, l as TranscriptSegment, T as TranscriptWord, o as buildBroadcastCdnUrl, p as buildBroadcastS3KeyPrefix, n as formatTime, u as useDialtribe } from './dialtribe-player-Rc9kfQiX.mjs';
-export { DEFAULT_ENCODER_SERVER_URL, DialtribeStreamer, DialtribeStreamerProps, MediaConstraintsOptions, OpenDialtribeStreamerPopupOptions, PopupDimensions, PopupFallbackMode, StreamKeyDisplay, StreamKeyDisplayProps, StreamKeyInput, StreamKeyInputProps, StreamingControlState, StreamingControls, StreamingControlsProps, StreamingPreview, StreamingPreviewProps, UseDialtribeStreamerLauncherOptions, UseDialtribeStreamerLauncherReturn, UseDialtribeStreamerPopupReturn, WebSocketStreamer, WebSocketStreamerOptions, calculatePopupDimensions, checkBrowserCompatibility, getMediaConstraints, getMediaRecorderOptions, openBroadcastPopup, openDialtribeStreamerPopup, useDialtribeStreamerLauncher, useDialtribeStreamerPopup } from './dialtribe-streamer.mjs';
+export { A as ApiClientConfig, h as AudioWaveform, B as Broadcast, C as CDN_DOMAIN, d as DIALTRIBE_API_BASE, c as DialtribeClient, a as DialtribeContextValue, i as DialtribeOverlay, k as DialtribeOverlayMode, j as DialtribeOverlayProps, e as DialtribePlayer, g as DialtribePlayerErrorBoundary, f as DialtribePlayerProps, D as DialtribeProvider, b as DialtribeProviderProps, E as ENDPOINTS, H as HTTP_STATUS, q as HttpStatusCode, L as LoadingSpinner, m as TranscriptData, l as TranscriptSegment, T as TranscriptWord, o as buildBroadcastCdnUrl, p as buildBroadcastS3KeyPrefix, n as formatTime, u as useDialtribe } from './dialtribe-player-CNriUtNi.mjs';
+export { j as DEFAULT_ENCODER_SERVER_URL, D as DialtribeStreamer, a as DialtribeStreamerProps, M as MediaConstraintsOptions, O as OpenDialtribeStreamerPopupOptions, P as PopupDimensions, w as PopupFallbackMode, l as StreamDiagnostics, f as StreamKeyDisplay, g as StreamKeyDisplayProps, h as StreamKeyInput, i as StreamKeyInputProps, e as StreamingControlState, c as StreamingControls, d as StreamingControlsProps, S as StreamingPreview, b as StreamingPreviewProps, t as UseDialtribeStreamerLauncherOptions, v as UseDialtribeStreamerLauncherReturn, U as UseDialtribeStreamerPopupReturn, W as WebSocketStreamer, k as WebSocketStreamerOptions, r as calculatePopupDimensions, o as checkBrowserCompatibility, m as getMediaConstraints, n as getMediaRecorderOptions, q as openBroadcastPopup, p as openDialtribeStreamerPopup, s as useDialtribeStreamerLauncher, u as useDialtribeStreamerPopup } from './dialtribe-streamer-Bc17hH6o.mjs';
 import 'react/jsx-runtime';
 import 'react';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { HelloWorld, HelloWorldProps } from './hello-world.js';
-export { A as ApiClientConfig, h as AudioWaveform, B as Broadcast, C as CDN_DOMAIN, d as DIALTRIBE_API_BASE, c as DialtribeClient, a as DialtribeContextValue, i as DialtribeOverlay, k as DialtribeOverlayMode, j as DialtribeOverlayProps, e as DialtribePlayer, g as DialtribePlayerErrorBoundary, f as DialtribePlayerProps, D as DialtribeProvider, b as DialtribeProviderProps, E as ENDPOINTS, H as HTTP_STATUS, q as HttpStatusCode, L as LoadingSpinner, m as TranscriptData, l as TranscriptSegment, T as TranscriptWord, o as buildBroadcastCdnUrl, p as buildBroadcastS3KeyPrefix, n as formatTime, u as useDialtribe } from './dialtribe-player-Rc9kfQiX.js';
-export { DEFAULT_ENCODER_SERVER_URL, DialtribeStreamer, DialtribeStreamerProps, MediaConstraintsOptions, OpenDialtribeStreamerPopupOptions, PopupDimensions, PopupFallbackMode, StreamKeyDisplay, StreamKeyDisplayProps, StreamKeyInput, StreamKeyInputProps, StreamingControlState, StreamingControls, StreamingControlsProps, StreamingPreview, StreamingPreviewProps, UseDialtribeStreamerLauncherOptions, UseDialtribeStreamerLauncherReturn, UseDialtribeStreamerPopupReturn, WebSocketStreamer, WebSocketStreamerOptions, calculatePopupDimensions, checkBrowserCompatibility, getMediaConstraints, getMediaRecorderOptions, openBroadcastPopup, openDialtribeStreamerPopup, useDialtribeStreamerLauncher, useDialtribeStreamerPopup } from './dialtribe-streamer.js';
+export { A as ApiClientConfig, h as AudioWaveform, B as Broadcast, C as CDN_DOMAIN, d as DIALTRIBE_API_BASE, c as DialtribeClient, a as DialtribeContextValue, i as DialtribeOverlay, k as DialtribeOverlayMode, j as DialtribeOverlayProps, e as DialtribePlayer, g as DialtribePlayerErrorBoundary, f as DialtribePlayerProps, D as DialtribeProvider, b as DialtribeProviderProps, E as ENDPOINTS, H as HTTP_STATUS, q as HttpStatusCode, L as LoadingSpinner, m as TranscriptData, l as TranscriptSegment, T as TranscriptWord, o as buildBroadcastCdnUrl, p as buildBroadcastS3KeyPrefix, n as formatTime, u as useDialtribe } from './dialtribe-player-CNriUtNi.js';
+export { j as DEFAULT_ENCODER_SERVER_URL, D as DialtribeStreamer, a as DialtribeStreamerProps, M as MediaConstraintsOptions, O as OpenDialtribeStreamerPopupOptions, P as PopupDimensions, w as PopupFallbackMode, l as StreamDiagnostics, f as StreamKeyDisplay, g as StreamKeyDisplayProps, h as StreamKeyInput, i as StreamKeyInputProps, e as StreamingControlState, c as StreamingControls, d as StreamingControlsProps, S as StreamingPreview, b as StreamingPreviewProps, t as UseDialtribeStreamerLauncherOptions, v as UseDialtribeStreamerLauncherReturn, U as UseDialtribeStreamerPopupReturn, W as WebSocketStreamer, k as WebSocketStreamerOptions, r as calculatePopupDimensions, o as checkBrowserCompatibility, m as getMediaConstraints, n as getMediaRecorderOptions, q as openBroadcastPopup, p as openDialtribeStreamerPopup, s as useDialtribeStreamerLauncher, u as useDialtribeStreamerPopup } from './dialtribe-streamer-jgZX44_G.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/index.js

@@ -2267,7 +2267,10 @@ var WebSocketStreamer = class {
     this.websocket = null;
     this.mediaRecorder = null;
     this.bytesSent = 0;
+    this.chunksSent = 0;
     this.userStopped = false;
+    // Track if user initiated the stop
+    this.startTime = 0;
     this.streamKey = options.streamKey;
     this.mediaStream = options.mediaStream;
     this.isVideo = options.isVideo;
@@ -2358,10 +2361,12 @@ Please check encoder server logs and DATABASE_URL configuration.`
       console.log("\u2705 WebSocket connected");
       this.setupWebSocketHandlers();
       const recorderOptions = getMediaRecorderOptions(this.isVideo);
+      this.mimeType = recorderOptions.mimeType;
       this.mediaRecorder = new MediaRecorder(this.mediaStream, recorderOptions);
       console.log("\u{1F399}\uFE0F MediaRecorder created with options:", recorderOptions);
       this.setupMediaRecorderHandlers();
       this.mediaRecorder.start(300);
+      this.startTime = Date.now();
       console.log("\u{1F534} Recording started");
       this.onStateChange?.("live");
     } catch (error) {
@@ -2406,6 +2411,19 @@ Please check encoder server logs and DATABASE_URL configuration.`
   getBytesSent() {
     return this.bytesSent;
   }
+  /**
+   * Get current diagnostics
+   */
+  getDiagnostics(closeCode, closeReason) {
+    return {
+      mimeType: this.mimeType,
+      chunksSent: this.chunksSent,
+      bytesSent: this.bytesSent,
+      elapsedMs: this.startTime ? Date.now() - this.startTime : 0,
+      closeCode,
+      closeReason
+    };
+  }
   /**
    * Update the media stream (e.g., when flipping camera)
    * This keeps the WebSocket connection alive while swapping the media source
@@ -2435,9 +2453,22 @@ Please check encoder server logs and DATABASE_URL configuration.`
     this.websocket.addEventListener("close", (event) => {
       console.log("\u{1F50C} WebSocket closed", { code: event.code, reason: event.reason });
       if (!this.userStopped) {
-        console.warn("\u26A0\uFE0F Stream was terminated remotely (not user-initiated)");
+        const diagnostics = this.getDiagnostics(event.code, event.reason);
+        console.warn("\u26A0\uFE0F Stream ended unexpectedly", diagnostics);
+        let errorMessage;
+        if (event.code === 1e3) {
+          errorMessage = event.reason || "Stream ended by server";
+        } else if (event.code === 1001) {
+          errorMessage = "Connection closed - server going away";
+        } else if (event.code === 1006) {
+          errorMessage = "Connection lost unexpectedly";
+        } else if (event.code >= 4e3 && event.code < 5e3) {
+          errorMessage = event.reason || "Stream terminated by server";
+        } else {
+          errorMessage = `Connection closed (code: ${event.code})`;
+        }
         this.onStateChange?.("terminated");
-        this.onError?.("Your stream was terminated by an administrator");
+        this.onError?.(errorMessage, diagnostics);
       }
       if (this.mediaRecorder && this.mediaRecorder.state !== "inactive") {
         this.mediaRecorder.stop();
@@ -2458,8 +2489,9 @@ Please check encoder server logs and DATABASE_URL configuration.`
       if (event.data.size > 0 && this.websocket?.readyState === WebSocket.OPEN) {
         this.websocket.send(event.data);
         this.bytesSent += event.data.size;
+        this.chunksSent += 1;
         this.onBytesUpdate?.(this.bytesSent);
-        console.log(`\u{1F4E4} Sent ${(event.data.size / 1024).toFixed(2)} KB (Total: ${(this.bytesSent / 1024 / 1024).toFixed(2)} MB)`);
+        console.log(`\u{1F4E4} Sent chunk #${this.chunksSent}: ${(event.data.size / 1024).toFixed(2)} KB (Total: ${(this.bytesSent / 1024 / 1024).toFixed(2)} MB)`);
       }
     });
     this.mediaRecorder.addEventListener("error", (event) => {
@@ -3092,6 +3124,7 @@ function DialtribeStreamer({
     }
   }, [initialStreamKey]);
   const [error, setError] = React2.useState(null);
+  const [diagnostics, setDiagnostics] = React2.useState(null);
   const [mediaStream, setMediaStream] = React2.useState(null);
   const [streamer, setStreamer] = React2.useState(null);
   const [bytesSent, setBytesSent] = React2.useState(0);
@@ -3288,9 +3321,11 @@ function DialtribeStreamer({
             setState("error");
           }
         },
-        onError: (errorMsg) => {
+        onError: (errorMsg, diag) => {
           setError(errorMsg);
-          setState("error");
+          if (diag) {
+            setDiagnostics(diag);
+          }
         }
       });
       await newStreamer.start();
@@ -3575,13 +3610,37 @@ function DialtribeStreamer({
           )
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-bold text-black dark:text-white mb-2", children: "Stream Terminated" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-2", children: error || "Your broadcast was terminated by an administrator." }),
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-bold text-black dark:text-white mb-2", children: "Stream Ended" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-2", children: error || "Connection closed unexpectedly" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-2", children: [
         "Total sent: ",
         (bytesSent / 1024 / 1024).toFixed(2),
         " MB"
       ] }),
+      diagnostics && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-400 dark:text-gray-500 mb-6 font-mono bg-gray-100 dark:bg-zinc-800 rounded p-2 text-left", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          "Codec: ",
+          diagnostics.mimeType || "unknown"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          "Chunks: ",
+          diagnostics.chunksSent,
+          " (",
+          (diagnostics.bytesSent / 1024).toFixed(1),
+          " KB)"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          "Duration: ",
+          (diagnostics.elapsedMs / 1e3).toFixed(1),
+          "s"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          "Close code: ",
+          diagnostics.closeCode ?? "N/A",
+          diagnostics.closeReason ? ` (${diagnostics.closeReason})` : ""
+        ] })
+      ] }),
+      !diagnostics && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {