@livo-tv/sdk 1.2.2 → 1.2.4

package/dist/studio/index.d.cts

@@ -126,6 +126,7 @@ type StudioDevices = {
 type StudioVideoKind = "camera" | "screen";
 type StudioHostMediaKind = "audio" | "video" | "screen";
 type StudioScreenSharePermission = "ALLOWED" | "NOT_ALLOWED" | "CAN_REQUEST";
+type StudioConnectionState = "joined" | "waitlisted" | "connecting" | "failed";
 type StudioBroadcast = {
     type: "host-media";
     kind: StudioHostMediaKind;
@@ -190,6 +191,8 @@ type StudioMeetingHandle = {
     participants: () => StudioParticipantTile[];
     waitlisted: () => StudioWaitlistedGuest[];
     inWaitingRoom: () => boolean;
+    connectionState: () => StudioConnectionState;
+    lastMeetingError: () => string | null;
     moderatorIds: () => string[];
     localAudioTrack: () => MediaStreamTrack | null;
     localVideoTrack: () => MediaStreamTrack | null;
@@ -219,6 +222,9 @@ declare function studioRoomLabels(t: (key: string, values?: Record<string, strin
     preview: string;
     waiting: string;
     waitingHost: string;
+    connecting: string;
+    connectFailed: string;
+    retry: string;
     admit: string;
     deny: string;
     denied: string;

package/dist/studio/index.d.ts

@@ -126,6 +126,7 @@ type StudioDevices = {
 type StudioVideoKind = "camera" | "screen";
 type StudioHostMediaKind = "audio" | "video" | "screen";
 type StudioScreenSharePermission = "ALLOWED" | "NOT_ALLOWED" | "CAN_REQUEST";
+type StudioConnectionState = "joined" | "waitlisted" | "connecting" | "failed";
 type StudioBroadcast = {
     type: "host-media";
     kind: StudioHostMediaKind;
@@ -190,6 +191,8 @@ type StudioMeetingHandle = {
     participants: () => StudioParticipantTile[];
     waitlisted: () => StudioWaitlistedGuest[];
     inWaitingRoom: () => boolean;
+    connectionState: () => StudioConnectionState;
+    lastMeetingError: () => string | null;
     moderatorIds: () => string[];
     localAudioTrack: () => MediaStreamTrack | null;
     localVideoTrack: () => MediaStreamTrack | null;
@@ -219,6 +222,9 @@ declare function studioRoomLabels(t: (key: string, values?: Record<string, strin
     preview: string;
     waiting: string;
     waitingHost: string;
+    connecting: string;
+    connectFailed: string;
+    retry: string;
     admit: string;
     deny: string;
     denied: string;

package/dist/studio/index.js

@@ -1875,6 +1875,7 @@ function StudioGuestWaiting({
   muted,
   labels,
   settingsOpen,
+  statusLabel,
   onToggleCamera,
   onToggleMute,
   onOpenSettings,
@@ -1906,7 +1907,7 @@ function StudioGuestWaiting({
         reducedMotion
       }
     ),
-    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-center text-sm", role: "status", children: labels.waitingHost }),
+    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-center text-sm", role: "status", children: statusLabel ?? labels.waitingHost }),
     /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-center gap-2", children: [
       /* @__PURE__ */ jsx(
         ControlIcon,
@@ -2275,13 +2276,13 @@ function BubbleGroup({ className, ...props }) {
     "div",
     {
       "data-slot": "bubble-group",
-      className: cn("flex min-w-0 flex-col gap-2", className),
+      className: cn("flex min-w-min flex-col gap-2", className),
       ...props
     }
   );
 }
 var bubbleVariants = cva(
-  "group/bubble relative flex w-fit min-w-0 max-w-[80%] flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+  "group/bubble relative flex w-fit min-w-min max-w-full flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
   {
     variants: {
       variant: {
@@ -2326,7 +2327,7 @@ function BubbleContent({
     props: mergeProps(
       {
         className: cn(
-          "w-auto max-w-full rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed [overflow-wrap:break-word] group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50",
+          "w-auto max-w-full whitespace-pre-wrap rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed [overflow-wrap:break-word] group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50",
           className
         )
       },
@@ -2510,7 +2511,7 @@ function StudioChatPanel({
             const bubbles = group.rows.map((row) => /* @__PURE__ */ jsxs(
               "div",
               {
-                className: group.mine ? "ml-auto flex w-fit max-w-full flex-col gap-1" : "flex w-fit max-w-full flex-col gap-1",
+                className: group.mine ? "ml-auto flex max-w-[80%] flex-col gap-1 self-end" : "flex max-w-[80%] flex-col gap-1 self-start",
                 children: [
                   /* @__PURE__ */ jsx(
                     Bubble,
@@ -3490,6 +3491,7 @@ function StudioToolbar({
   ] }) });
 }
 var STAGE_GRANT_VERIFY_MS = 4e3;
+var STUDIO_CONNECT_WATCHDOG_MS = 12e3;
 function StudioRoom({
   session,
   meeting,
@@ -3525,6 +3527,7 @@ function StudioRoom({
   );
   const [egressError, setEgressError] = useState(null);
   const [shareGrant, setShareGrant] = useState("idle");
+  const [connectTimedOut, setConnectTimedOut] = useState(false);
   const [screenPermission, setScreenPermission] = useState(
     () => meeting.screenSharePermission()
   );
@@ -3771,6 +3774,14 @@ function StudioRoom({
     [participants]
   );
   const waitlisted = useMemo(() => meeting.waitlisted(), [meeting, tick]);
+  const connectionState = useMemo(
+    () => meeting.connectionState(),
+    [meeting, tick]
+  );
+  const lastMeetingError = useMemo(
+    () => meeting.lastMeetingError(),
+    [meeting, tick]
+  );
   const canManageStage = meeting.canManageStage();
   const stageEnabled = meeting.stageEnabled();
   const stageRequests = useMemo(
@@ -3868,6 +3879,16 @@ function StudioRoom({
       }
     }
   }, [labels.knock, session.role, waitlisted]);
+  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]);
   useEffect(() => {
     if (inWaitingRoom || screenNoticePrimed.current) return;
     if (!durableScreenBlock) return;
@@ -4183,7 +4204,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__ */ jsx("div", { className: "flex h-dvh flex-col items-center justify-center p-6", children: /* @__PURE__ */ 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__ */ jsx(
       StudioGuestWaiting,
       {
@@ -4193,6 +4227,7 @@ function StudioRoom({
         muted,
         labels,
         settingsOpen,
+        statusLabel: connectionState === "connecting" ? labels.connecting : labels.waitingHost,
         onToggleCamera,
         onToggleMute: () => void onToggleMute(),
         onOpenSettings: () => setSettingsOpen(true),
@@ -4718,8 +4753,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);
@@ -4787,7 +4822,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
           }
@@ -4869,7 +4904,11 @@ function isRecorder(participant) {
 function resolvedName(participant, nameOverrides) {
   return nameOverrides.get(participant.id) ?? (participant.userId ? nameOverrides.get(participant.userId) : void 0) ?? participant.name?.trim() ?? "Guest";
 }
-function tileFrom(participant, selfId, pinnedIds, chatSend, nameOverrides) {
+function resolveTileStageStatus(participant, stageEnabled, fallback) {
+  if (!stageEnabled) return "ON_STAGE";
+  return participant.stageStatus ?? fallback ?? "OFF_STAGE";
+}
+function tileFrom(participant, selfId, pinnedIds, chatSend, nameOverrides, stageStatus) {
   return {
     id: participant.id,
     userId: participant.userId ?? "",
@@ -4879,7 +4918,7 @@ function tileFrom(participant, selfId, pinnedIds, chatSend, nameOverrides) {
     videoEnabled: participant.videoEnabled === true,
     screenShareEnabled: participant.screenShareEnabled === true,
     picture: participant.picture ?? null,
-    stageStatus: participant.stageStatus ?? "ON_STAGE",
+    stageStatus,
     pinned: participant.isPinned === true || pinnedIds.has(participant.id),
     chatCanSend: chatSend.get(participant.id) ?? true
   };
@@ -5025,6 +5064,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);
@@ -5062,8 +5133,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;
@@ -5159,47 +5231,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() {
@@ -5207,18 +5307,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) {
@@ -5254,6 +5363,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);
@@ -5321,6 +5432,9 @@ function studioMeetingFromRtk(raw) {
       await joinStageIfAllowed();
     },
     async leave() {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("unhandledrejection", onUnhandledRejection);
+      }
       await meeting.leave?.();
     },
     async setAudioEnabled(enabled) {
@@ -5421,7 +5535,7 @@ function studioMeetingFromRtk(raw) {
       notifyStage();
     },
     async joinStage() {
-      if (currentStageStatus() === "ON_STAGE") {
+      if (meeting.self?.stageStatus === "ON_STAGE") {
         notifyStage();
         return;
       }
@@ -5430,25 +5544,15 @@ function studioMeetingFromRtk(raw) {
         notifyStage();
         return;
       }
-      try {
-        await meeting.stage?.join?.();
-      } catch {
-        const userId = meeting.self?.userId;
-        if (userId) {
-          await meeting.stage?.grantAccess?.([userId]);
-        }
-        await meeting.stage?.join?.();
-      }
-      joinedStageLocally = true;
-      await republishCameraIfOn();
-      notifyStage();
+      await joinStageWithRetry();
     },
     async leaveStage() {
       await meeting.stage?.leave?.();
+      joinedStageLocally = false;
       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) {
@@ -5526,10 +5630,27 @@ function studioMeetingFromRtk(raw) {
     participants() {
       const self = meeting.self;
       const pinned = pinnedIdSet();
-      const joinedRows = asList(meeting.participants?.joined).filter((row) => row.id !== self?.id && !isRecorder(row)).map((row) => tileFrom(row, self?.id, pinned, chatSend, nameOverrides));
+      const stageEnabled = self?.permissions?.stageEnabled !== false;
+      const joinedRows = asList(meeting.participants?.joined).filter((row) => row.id !== self?.id && !isRecorder(row)).map(
+        (row) => tileFrom(
+          row,
+          self?.id,
+          pinned,
+          chatSend,
+          nameOverrides,
+          resolveTileStageStatus(row, stageEnabled)
+        )
+      );
       if (self?.id && !isRecorder(self)) {
         joinedRows.unshift(
-          tileFrom(self, self.id, pinned, chatSend, nameOverrides)
+          tileFrom(
+            self,
+            self.id,
+            pinned,
+            chatSend,
+            nameOverrides,
+            resolveTileStageStatus(self, stageEnabled, meeting.stage?.status)
+          )
         );
       }
       return joinedRows;
@@ -5543,9 +5664,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 = [];
@@ -5665,9 +5790,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),
@@ -5680,6 +5805,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,
@@ -6222,6 +6351,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"),