@livo-tv/sdk 1.2.3 → 1.3.0

package/dist/studio/index.cjs

@@ -1899,6 +1899,7 @@ function StudioGuestWaiting({
   muted,
   labels,
   settingsOpen,
+  statusLabel,
   onToggleCamera,
   onToggleMute,
   onOpenSettings,
@@ -1930,7 +1931,7 @@ function StudioGuestWaiting({
         reducedMotion
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-center text-sm", role: "status", children: labels.waitingHost }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-center text-sm", role: "status", children: statusLabel ?? labels.waitingHost }),
     /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         ControlIcon,
@@ -2703,11 +2704,15 @@ function StudioSidePanel({
   onGrantStage,
   onDenyStage,
   onTakeOffAir,
+  onKick,
   guestUrl,
   onShareGuestLink
 }) {
   const panelists = participants.filter((row) => isOnStage(row.stageStatus));
   const audience = participants.filter((row) => !isOnStage(row.stageStatus));
+  const [pendingKick, setPendingKick] = react.useState(
+    null
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "bg-background flex min-h-0 w-full flex-1 flex-col border-t md:w-80 md:flex-none md:border-l md:border-t-0", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2824,23 +2829,37 @@ function StudioSidePanel({
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: labels.panelists }),
         panelists.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: labels.noPanelists }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: panelists.map((row) => {
           const userId = row.userId;
+          const showKick = isModerator2 && !row.isSelf && Boolean(row.id);
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "li",
             {
               className: "space-y-2 rounded-md border p-2",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-sm", children: row.name }),
-                !row.isSelf && userId ? /* @__PURE__ */ jsxRuntime.jsx(
-                  Button,
-                  {
-                    type: "button",
-                    size: "xs",
-                    variant: "outline",
-                    className: "w-full",
-                    onClick: () => onTakeOffAir(userId),
-                    children: labels.offAir
-                  }
-                ) : null
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+                  !row.isSelf && userId ? /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
+                    {
+                      type: "button",
+                      size: "xs",
+                      variant: "outline",
+                      className: "w-full",
+                      onClick: () => onTakeOffAir(userId),
+                      children: labels.offAir
+                    }
+                  ) : null,
+                  showKick ? /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
+                    {
+                      type: "button",
+                      size: "xs",
+                      variant: "ghost",
+                      className: "w-full",
+                      onClick: () => setPendingKick(row),
+                      children: labels.kick
+                    }
+                  ) : null
+                ] })
               ]
             },
             row.id
@@ -2851,29 +2870,61 @@ function StudioSidePanel({
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: labels.audience }),
         audience.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: labels.noAudience }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: audience.map((row) => {
           const userId = row.userId;
+          const showKick = isModerator2 && !row.isSelf && Boolean(row.id);
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "li",
             {
               className: "space-y-2 rounded-md border p-2",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-sm", children: row.name }),
-                !row.isSelf && userId ? /* @__PURE__ */ jsxRuntime.jsx(
-                  Button,
-                  {
-                    type: "button",
-                    size: "xs",
-                    variant: "outline",
-                    className: "w-full",
-                    onClick: () => onGrantStage(userId),
-                    children: labels.bringOnAir
-                  }
-                ) : null
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+                  !row.isSelf && userId ? /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
+                    {
+                      type: "button",
+                      size: "xs",
+                      variant: "outline",
+                      className: "w-full",
+                      onClick: () => onGrantStage(userId),
+                      children: labels.bringOnAir
+                    }
+                  ) : null,
+                  showKick ? /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
+                    {
+                      type: "button",
+                      size: "xs",
+                      variant: "ghost",
+                      className: "w-full",
+                      onClick: () => setPendingKick(row),
+                      children: labels.kick
+                    }
+                  ) : null
+                ] })
               ]
             },
             row.id
           );
         }) })
-      ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ConfirmAction,
+        {
+          open: pendingKick !== null,
+          onOpenChange: (open) => {
+            if (!open) setPendingKick(null);
+          },
+          triggerLabel: labels.kick,
+          title: pendingKick ? labels.kickTitleNamed.replace("{name}", pendingKick.name) : labels.kickTitle,
+          description: labels.kickDescription,
+          confirmLabel: labels.kickConfirm,
+          onConfirm: () => {
+            const target = pendingKick;
+            setPendingKick(null);
+            if (target) onKick(target.id);
+          }
+        }
+      )
     ] })
   ] });
 }
@@ -3514,6 +3565,7 @@ function StudioToolbar({
   ] }) });
 }
 var STAGE_GRANT_VERIFY_MS = 4e3;
+var STUDIO_CONNECT_WATCHDOG_MS = 12e3;
 function StudioRoom({
   session,
   meeting,
@@ -3549,6 +3601,7 @@ function StudioRoom({
   );
   const [egressError, setEgressError] = react.useState(null);
   const [shareGrant, setShareGrant] = react.useState("idle");
+  const [connectTimedOut, setConnectTimedOut] = react.useState(false);
   const [screenPermission, setScreenPermission] = react.useState(
     () => meeting.screenSharePermission()
   );
@@ -3795,6 +3848,14 @@ function StudioRoom({
     [participants]
   );
   const waitlisted = react.useMemo(() => meeting.waitlisted(), [meeting, tick]);
+  const connectionState = react.useMemo(
+    () => meeting.connectionState(),
+    [meeting, tick]
+  );
+  const lastMeetingError = react.useMemo(
+    () => meeting.lastMeetingError(),
+    [meeting, tick]
+  );
   const canManageStage = meeting.canManageStage();
   const stageEnabled = meeting.stageEnabled();
   const stageRequests = react.useMemo(
@@ -3892,6 +3953,16 @@ function StudioRoom({
       }
     }
   }, [labels.knock, session.role, waitlisted]);
+  react.useEffect(() => {
+    if (session.role !== "guest" || connectionState !== "connecting") {
+      setConnectTimedOut(false);
+      return;
+    }
+    const id = window.setTimeout(() => {
+      setConnectTimedOut(true);
+    }, STUDIO_CONNECT_WATCHDOG_MS);
+    return () => window.clearTimeout(id);
+  }, [connectionState, session.role]);
   react.useEffect(() => {
     if (inWaitingRoom || screenNoticePrimed.current) return;
     if (!durableScreenBlock) return;
@@ -4207,7 +4278,20 @@ function StudioRoom({
       }
     ) });
   }
-  if (inWaitingRoom && session.role === "guest") {
+  const guestConnectFailed = session.role === "guest" && (connectionState === "failed" || connectionState === "connecting" && connectTimedOut);
+  if (guestConnectFailed) {
+    const detail = [meeting.roomState(), lastMeetingError].filter((value) => Boolean(value)).join(" \u2014 ");
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-dvh flex-col items-center justify-center p-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+      EmptyState,
+      {
+        title: labels.connectFailed,
+        description: detail || labels.connectFailed,
+        actionLabel: onRejoin ? labels.retry : void 0,
+        onAction: onRejoin
+      }
+    ) });
+  }
+  if (session.role === "guest" && (connectionState === "waitlisted" || connectionState === "connecting")) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       StudioGuestWaiting,
       {
@@ -4217,6 +4301,7 @@ function StudioRoom({
         muted,
         labels,
         settingsOpen,
+        statusLabel: connectionState === "connecting" ? labels.connecting : labels.waitingHost,
         onToggleCamera,
         onToggleMute: () => void onToggleMute(),
         onOpenSettings: () => setSettingsOpen(true),
@@ -4401,6 +4486,7 @@ function StudioRoom({
             const tile = participants.find((row) => row.userId === userId);
             if (tile) void onSetStage(tile, false);
           },
+          onKick: (id) => void onKick(id),
           guestUrl: session.guestUrl,
           onShareGuestLink: () => {
             const url = session.guestUrl;
@@ -4742,8 +4828,8 @@ function StudioGuestLobby({
     }
   }
   async function onTestSpeaker() {
-    const speakerId = effective.speaker || devices.speaker[0]?.deviceId || "";
-    if (!speakerId || testingSpeaker) return;
+    if (testingSpeaker) return;
+    const speakerId = effective.speaker || devices.speaker[0]?.deviceId || void 0;
     setTestingSpeaker(true);
     try {
       await playSpeakerTest(speakerId);
@@ -4811,7 +4897,7 @@ function StudioGuestLobby({
             type: "button",
             size: "sm",
             variant: "outline",
-            disabled: !(effective.speaker || devices.speaker[0]?.deviceId) || testingSpeaker,
+            disabled: testingSpeaker,
             onClick: () => void onTestSpeaker(),
             children: deviceLabels.testSpeaker
           }
@@ -5053,6 +5139,38 @@ function isStageDisabledError(error) {
   const message = typeof row.message === "string" ? row.message : "";
   return message.includes("ERR2003") || message.toLowerCase().includes("stage is disabled");
 }
+function isStageBusyError(error) {
+  if (!error || typeof error !== "object") return false;
+  const row = error;
+  if (row.name === "UnsupportedConcurrentMethodExecution") return true;
+  if (row.code === "2006" || row.code === 2006) return true;
+  const message = typeof row.message === "string" ? row.message : "";
+  return message.includes("ERR2006") || message.includes("Unsupported concurrent calls") || message.includes("Action not permitted in current stage status");
+}
+function isRtkMeetingError(error) {
+  if (!error || typeof error !== "object") return false;
+  const row = error;
+  const name = typeof row.name === "string" ? row.name : "";
+  const message = typeof row.message === "string" ? row.message : "";
+  return name === "ClientError" || name === "TransportConnectionError" || message.includes("ERR1608") || message.includes("No speaker found") || message.includes("Socket is not connected");
+}
+function meetingErrorText(error) {
+  if (error instanceof Error && error.message.trim()) return error.message;
+  if (error && typeof error === "object") {
+    const message = error.message;
+    if (typeof message === "string" && message.trim()) return message;
+  }
+  return "Studio failed";
+}
+async function settledDeviceList(load) {
+  if (!load) return [];
+  try {
+    const [result] = await Promise.allSettled([load()]);
+    return result?.status === "fulfilled" ? result.value : [];
+  } catch {
+    return [];
+  }
+}
 function waitMs(ms) {
   return new Promise((resolve) => {
     setTimeout(resolve, ms);
@@ -5090,8 +5208,9 @@ function studioMeetingFromRtk(raw) {
   const pendingPanelists = /* @__PURE__ */ new Set();
   const chatSend = /* @__PURE__ */ new Map();
   const nameOverrides = /* @__PURE__ */ new Map();
-  let joiningStage = false;
+  let joinStageInFlight = null;
   let joinedStageLocally = false;
+  let lastMeetingError = null;
   const historyMessages = [];
   let speakerSinkId = null;
   let lastSpeakerId = typeof meeting.participants?.lastActiveSpeaker === "string" ? meeting.participants.lastActiveSpeaker : null;
@@ -5187,47 +5306,75 @@ function studioMeetingFromRtk(raw) {
     return [...byId.values()].sort((a, b) => a.time - b.time);
   }
   function currentStageStatus() {
-    return meeting.stage?.status ?? meeting.self?.stageStatus;
+    return meeting.self?.stageStatus ?? meeting.stage?.status;
+  }
+  function resolveConnectionState() {
+    const self = meeting.self;
+    const roomState = self?.roomState ?? null;
+    if (roomState === "waitlisted") return "waitlisted";
+    if (roomState === "joined" || self?.roomJoined === true) return "joined";
+    if (lastMeetingError) return "failed";
+    return "connecting";
+  }
+  function recordMeetingError(error) {
+    if (!isRtkMeetingError(error)) return;
+    lastMeetingError = meetingErrorText(error);
+    notifyParticipants();
+  }
+  function onUnhandledRejection(event) {
+    recordMeetingError(event.reason);
+  }
+  if (typeof window !== "undefined") {
+    window.addEventListener("unhandledrejection", onUnhandledRejection);
   }
   async function republishCameraIfOn() {
     if (meeting.self?.videoEnabled !== true) return;
     await meeting.self.disableVideo?.();
     await meeting.self.enableVideo?.();
   }
-  async function joinStageWithRetry() {
-    if (joiningStage) return;
-    joiningStage = true;
-    try {
-      for (let attempt = 0; attempt < STAGE_JOIN_MAX_ATTEMPTS; attempt++) {
-        if (currentStageStatus() === "ON_STAGE") {
+  async function runJoinStageAttempts() {
+    let lastError;
+    for (let attempt = 0; attempt < STAGE_JOIN_MAX_ATTEMPTS; attempt++) {
+      if (currentStageStatus() === "ON_STAGE") {
+        notifyStage();
+        return;
+      }
+      try {
+        await meeting.stage?.join?.();
+        joinedStageLocally = true;
+        await republishCameraIfOn();
+        notifyStage();
+        return;
+      } catch (error) {
+        lastError = error;
+        if (isStageDisabledError(error)) {
           notifyStage();
           return;
         }
-        try {
-          await meeting.stage?.join?.();
-          joinedStageLocally = true;
-          await republishCameraIfOn();
-          notifyStage();
-          return;
-        } catch (error) {
-          if (isStageDisabledError(error)) {
-            notifyStage();
-            return;
-          }
-          console.warn("studio: stage join failed", error);
-          if (attempt === STAGE_JOIN_MAX_ATTEMPTS - 1) {
-            notifyStage();
-            return;
-          }
+        if (isStageBusyError(error)) {
           await waitMs(STAGE_JOIN_RETRY_MS);
-          if (currentStageStatus() !== "ACCEPTED_TO_JOIN_STAGE") {
-            notifyStage();
-            return;
-          }
+          continue;
         }
+        console.warn("studio: stage join failed", error);
+        if (attempt === STAGE_JOIN_MAX_ATTEMPTS - 1) break;
+        await waitMs(STAGE_JOIN_RETRY_MS);
       }
+    }
+    notifyStage();
+    if (currentStageStatus() !== "ON_STAGE") {
+      throw lastError instanceof Error ? lastError : new Error("stage join failed");
+    }
+  }
+  async function joinStageWithRetry() {
+    if (joinStageInFlight) {
+      await joinStageInFlight;
+      return;
+    }
+    joinStageInFlight = runJoinStageAttempts();
+    try {
+      await joinStageInFlight;
     } finally {
-      joiningStage = false;
+      joinStageInFlight = null;
     }
   }
   async function autoJoinStage() {
@@ -5235,18 +5382,27 @@ function studioMeetingFromRtk(raw) {
       notifyStage();
       return;
     }
-    await joinStageWithRetry();
+    try {
+      await joinStageWithRetry();
+    } catch {
+      notifyStage();
+    }
   }
   async function ensureStageJoined() {
     if (currentStageStatus() !== "ACCEPTED_TO_JOIN_STAGE") return;
-    await joinStageWithRetry();
+    try {
+      await joinStageWithRetry();
+    } catch {
+      notifyStage();
+    }
   }
   async function joinStageIfAllowed() {
     if (meeting.self?.permissions?.stageAccess !== "ALLOWED") return;
     if (currentStageStatus() === "ON_STAGE") return;
     try {
-      await meeting.stage?.join?.();
+      await joinStageWithRetry();
     } catch {
+      notifyStage();
     }
   }
   function queuePanelist(guest, fallbackId) {
@@ -5282,6 +5438,8 @@ function studioMeetingFromRtk(raw) {
   listen(meeting.self, "audioUpdate", rebindMedia);
   listen(meeting.self, "pinned", notifyPinned);
   listen(meeting.self, "unpinned", notifyPinned);
+  listen(meeting.self, "waitlisted", notifyParticipants);
+  listen(meeting.self, "roomJoined", notifyParticipants);
   const joined = meeting.participants?.joined;
   listen(joined, "participantJoined", (payload) => {
     void grantIfPending(payload);
@@ -5349,6 +5507,9 @@ function studioMeetingFromRtk(raw) {
       await joinStageIfAllowed();
     },
     async leave() {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("unhandledrejection", onUnhandledRejection);
+      }
       await meeting.leave?.();
     },
     async setAudioEnabled(enabled) {
@@ -5458,19 +5619,7 @@ function studioMeetingFromRtk(raw) {
         notifyStage();
         return;
       }
-      const userId = meeting.self?.userId;
-      if (userId) {
-        await meeting.stage?.grantAccess?.([userId]);
-      }
-      try {
-        await meeting.stage?.join?.();
-      } catch (error) {
-        notifyStage();
-        throw error;
-      }
-      joinedStageLocally = true;
-      await republishCameraIfOn();
-      notifyStage();
+      await joinStageWithRetry();
     },
     async leaveStage() {
       await meeting.stage?.leave?.();
@@ -5478,7 +5627,7 @@ function studioMeetingFromRtk(raw) {
       notifyStage();
     },
     stageStatus() {
-      return meeting.stage?.status ?? meeting.self?.stageStatus ?? "ON_STAGE";
+      return meeting.self?.stageStatus ?? meeting.stage?.status ?? "OFF_STAGE";
     },
     stageRequests() {
       if (meeting.self?.permissions?.acceptStageRequests !== true) {
@@ -5590,9 +5739,13 @@ function studioMeetingFromRtk(raw) {
       }));
     },
     inWaitingRoom() {
-      const self = meeting.self;
-      if (isStudioRejected(self?.roomState ?? null)) return false;
-      return self?.roomState === "waitlisted" || self?.roomJoined === false;
+      return meeting.self?.roomState === "waitlisted";
+    },
+    connectionState() {
+      return resolveConnectionState();
+    },
+    lastMeetingError() {
+      return lastMeetingError;
     },
     moderatorIds() {
       const ids = [];
@@ -5712,9 +5865,9 @@ function studioMeetingFromRtk(raw) {
     async listDevices() {
       const self = meeting.self;
       const [audio, video, speaker] = await Promise.all([
-        self?.getAudioDevices?.() ?? [],
-        self?.getVideoDevices?.() ?? [],
-        self?.getSpeakerDevices?.() ?? []
+        settledDeviceList(self?.getAudioDevices?.bind(self)),
+        settledDeviceList(self?.getVideoDevices?.bind(self)),
+        settledDeviceList(self?.getSpeakerDevices?.bind(self))
       ]);
       return {
         audio: asOptions(audio),
@@ -5727,6 +5880,10 @@ function studioMeetingFromRtk(raw) {
       if (kind === "speaker") {
         speakerSinkId = deviceId;
         for (const el of audioEls.values()) applySink(el, speakerSinkId);
+        const speakers = await settledDeviceList(
+          meeting.self?.getSpeakerDevices?.bind(meeting.self)
+        );
+        if (speakers.length === 0) return;
       }
       await meeting.self?.setDevice?.({
         deviceId,
@@ -6269,6 +6426,9 @@ function studioRoomLabels(t) {
     preview: t("preview"),
     waiting: t("waiting"),
     waitingHost: t("waitingHost"),
+    connecting: t("connecting"),
+    connectFailed: t("connectFailed"),
+    retry: t("retry"),
     admit: t("admit"),
     deny: t("deny"),
     denied: t("denied"),
@@ -6409,6 +6569,7 @@ function studioRoomLabels(t) {
     unpinnedToast: t("unpinnedToast"),
     pinError: t("pinError"),
     kickTitle: t("kickTitle"),
+    kickTitleNamed: t("kickTitleNamed", { name: "{name}" }),
     kickDescription: t("kickDescription"),
     kickConfirm: t("kickConfirm"),
     kickError: t("kickError"),