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

package/dist/dialtribe-streamer.mjs

@@ -310,7 +310,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;
@@ -401,10 +404,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) {
@@ -449,6 +454,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
@@ -478,9 +496,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();
@@ -501,8 +532,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) => {
@@ -1499,6 +1531,7 @@ function DialtribeStreamer({
     }
   }, [initialStreamKey]);
   const [error, setError] = useState(null);
+  const [diagnostics, setDiagnostics] = useState(null);
   const [mediaStream, setMediaStream] = useState(null);
   const [streamer, setStreamer] = useState(null);
   const [bytesSent, setBytesSent] = useState(0);
@@ -1695,9 +1728,11 @@ function DialtribeStreamer({
             setState("error");
           }
         },
-        onError: (errorMsg) => {
+        onError: (errorMsg, diag) => {
           setError(errorMsg);
-          setState("error");
+          if (diag) {
+            setDiagnostics(diag);
+          }
         }
       });
       await newStreamer.start();
@@ -1982,13 +2017,37 @@ function DialtribeStreamer({
           )
         }
       ) }),
-      /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-black dark:text-white mb-2", children: "Stream Terminated" }),
-      /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-2", children: error || "Your broadcast was terminated by an administrator." }),
-      /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-6", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-black dark:text-white mb-2", children: "Stream Ended" }),
+      /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-2", children: error || "Connection closed unexpectedly" }),
+      /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { children: [
+          "Codec: ",
+          diagnostics.mimeType || "unknown"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          "Chunks: ",
+          diagnostics.chunksSent,
+          " (",
+          (diagnostics.bytesSent / 1024).toFixed(1),
+          " KB)"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          "Duration: ",
+          (diagnostics.elapsedMs / 1e3).toFixed(1),
+          "s"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          "Close code: ",
+          diagnostics.closeCode ?? "N/A",
+          diagnostics.closeReason ? ` (${diagnostics.closeReason})` : ""
+        ] })
+      ] }),
+      !diagnostics && /* @__PURE__ */ jsx("div", { className: "mb-6" }),
       /* @__PURE__ */ jsx(
         "button",
         {