@livo-tv/sdk 1.16.0 → 1.17.0

package/dist/studio/index.d.cts

@@ -417,6 +417,10 @@ declare function studioRoomLabels(t: (key: string, values?: Record<string, strin
     shareRequestTimeout: string;
     shareRespondError: string;
     goOffAir: string;
+    moveToAudience: string;
+    moveToAudienceTitle: string;
+    moveToAudienceDescription: string;
+    moveToAudienceConfirm: string;
     goOnAir: string;
     takeOffAir: string;
     bringOnAir: string;
@@ -559,6 +563,7 @@ type StudioGuestLobbyLabels = {
     hint: string;
     name: string;
     join: string;
+    joining: string;
     waitingForHost: string;
     camera: string;
     mic: string;
@@ -628,6 +633,7 @@ type StudioLobbyLabels = {
     hint: string;
     name: string;
     join: string;
+    joining: string;
     waitingForHost: string;
     camera: string;
     mic: string;

package/dist/studio/index.d.ts

@@ -417,6 +417,10 @@ declare function studioRoomLabels(t: (key: string, values?: Record<string, strin
     shareRequestTimeout: string;
     shareRespondError: string;
     goOffAir: string;
+    moveToAudience: string;
+    moveToAudienceTitle: string;
+    moveToAudienceDescription: string;
+    moveToAudienceConfirm: string;
     goOnAir: string;
     takeOffAir: string;
     bringOnAir: string;
@@ -559,6 +563,7 @@ type StudioGuestLobbyLabels = {
     hint: string;
     name: string;
     join: string;
+    joining: string;
     waitingForHost: string;
     camera: string;
     mic: string;
@@ -628,6 +633,7 @@ type StudioLobbyLabels = {
     hint: string;
     name: string;
     join: string;
+    joining: string;
     waitingForHost: string;
     camera: string;
     mic: string;

package/dist/studio/index.js

@@ -11656,21 +11656,18 @@ function pipSpotlightFrom(tile, kind) {
 }
 function resolveStudioPipSpotlight(tiles, activeSpeakerId) {
   const visible = tiles.filter((tile) => isOnStage(tile.stageStatus));
+  const sharing = visible.find((tile) => tile.screenShareEnabled);
+  if (sharing) {
+    return pipSpotlightFrom(sharing, "screen");
+  }
   const pinned = visible.find((tile) => tile.pinned === true);
   if (pinned) {
-    return pipSpotlightFrom(
-      pinned,
-      pinned.screenShareEnabled ? "screen" : pinned.videoEnabled ? "camera" : "idle"
-    );
+    return pipSpotlightFrom(pinned, pinned.videoEnabled ? "camera" : "idle");
   }
   const speaker = activeSpeakerId ? visible.find((tile) => tile.id === activeSpeakerId) : void 0;
   if (speaker) {
     return pipSpotlightFrom(speaker, speaker.videoEnabled ? "camera" : "idle");
   }
-  const sharing = visible.find((tile) => tile.screenShareEnabled);
-  if (sharing) {
-    return pipSpotlightFrom(sharing, "screen");
-  }
   const remoteCam = visible.find((tile) => !tile.isSelf && tile.videoEnabled);
   if (remoteCam) {
     return pipSpotlightFrom(remoteCam, "camera");
@@ -22835,6 +22832,7 @@ function StudioDeviceSelectGroup({
   devices,
   selected,
   labels,
+  disabled: disabled2 = false,
   onChange,
   speakerAction
 }) {
@@ -22846,6 +22844,7 @@ function StudioDeviceSelectGroup({
         label: labels.cameraDevice,
         options: devices.video,
         value: selected.video,
+        disabled: disabled2,
         onChange: (id) => onChange("video", id)
       }
     ),
@@ -22856,6 +22855,7 @@ function StudioDeviceSelectGroup({
         label: labels.micDevice,
         options: devices.audio,
         value: selected.audio,
+        disabled: disabled2,
         onChange: (id) => onChange("audio", id)
       }
     ),
@@ -22866,6 +22866,7 @@ function StudioDeviceSelectGroup({
         label: labels.speakerDevice,
         options: devices.speaker,
         value: selected.speaker,
+        disabled: disabled2,
         onChange: (id) => onChange("speaker", id),
         action: speakerAction
       }
@@ -22877,6 +22878,7 @@ function DeviceRow({
   label,
   options,
   value,
+  disabled: disabled2 = false,
   onChange,
   action
 }) {
@@ -22895,6 +22897,7 @@ function DeviceRow({
             "border-input bg-background h-8 min-w-0 flex-1 rounded-md border px-2 text-base md:text-sm"
           ),
           value: display,
+          disabled: disabled2,
           onChange: (event) => onChange(event.target.value),
           children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.deviceId, children: option.label }, option.deviceId))
         }
@@ -28545,24 +28548,35 @@ function StudioToolbar({
         children: selfStageStatus === "ON_STAGE" ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {})
       }
     ) : null,
-    showStageGuest ? /* @__PURE__ */ jsx(
+    showStageGuest ? selfStageStatus === "ON_STAGE" ? /* @__PURE__ */ jsx(
+      ConfirmAction,
+      {
+        triggerLabel: labels.moveToAudience,
+        title: labels.moveToAudienceTitle,
+        description: labels.moveToAudienceDescription,
+        confirmLabel: labels.moveToAudienceConfirm,
+        pending,
+        onConfirm: onLeaveStage,
+        trigger: /* @__PURE__ */ jsx(
+          Button3,
+          {
+            type: "button",
+            size: "icon-lg",
+            variant: "secondary",
+            disabled: pending || !canLeaveStage,
+            "aria-label": labels.moveToAudience,
+            children: /* @__PURE__ */ jsx(Users, {})
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx(
       ControlIcon,
       {
-        label: selfStageStatus === "ON_STAGE" ? labels.goOffAir : selfStageStatus === "REQUESTED_TO_JOIN_STAGE" ? labels.stageRequested : labels.askToGoOnAir,
+        label: selfStageStatus === "REQUESTED_TO_JOIN_STAGE" ? labels.stageRequested : labels.askToGoOnAir,
         pressed: selfStageStatus === "REQUESTED_TO_JOIN_STAGE",
-        disabled: selfStageStatus === "REQUESTED_TO_JOIN_STAGE" || selfStageStatus === "ON_STAGE" && !canLeaveStage,
-        onClick: () => {
-          if (selfStageStatus === "ON_STAGE") {
-            if (!canLeaveStage) {
-              toast.message(labels.offAirLastVisible);
-              return;
-            }
-            onLeaveStage();
-            return;
-          }
-          onAskStage();
-        },
-        children: selfStageStatus === "ON_STAGE" ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {})
+        disabled: selfStageStatus === "REQUESTED_TO_JOIN_STAGE",
+        onClick: onAskStage,
+        children: /* @__PURE__ */ jsx(Eye, {})
       }
     ) : null,
     showScreenControl ? canShareFreely ? /* @__PURE__ */ jsx(
@@ -29606,6 +29620,7 @@ function StudioRoom({
     try {
       await meeting.leave();
       setLeaveState("left");
+    } catch {
     } finally {
       setPending(false);
     }
@@ -30242,7 +30257,8 @@ var LOBBY_DEVICE_LABEL_DEFAULTS = {
   speakerDevice: "Speaker",
   testSpeaker: "Test",
   testSpeakerError: "Could not play the speaker test",
-  cameraOff: "Camera is off"
+  cameraOff: "Camera is off",
+  joining: "Joining\u2026"
 };
 function StudioGuestLobby({
   reducedMotion,
@@ -30277,7 +30293,9 @@ function StudioGuestLobby({
     testSpeakerError: labels.testSpeakerError ?? LOBBY_DEVICE_LABEL_DEFAULTS.testSpeakerError,
     cameraOff: labels.cameraOff ?? LOBBY_DEVICE_LABEL_DEFAULTS.cameraOff
   };
+  const joiningLabel = labels.joining?.trim() || LOBBY_DEVICE_LABEL_DEFAULTS.joining;
   function changeDevice(kind, deviceId) {
+    if (joining) return;
     persistStudioDeviceSelection(kind, deviceId);
     onDeviceChange?.(kind, deviceId);
     if (!savedDevices) {
@@ -30285,7 +30303,7 @@ function StudioGuestLobby({
     }
   }
   async function onTestSpeaker() {
-    if (testingSpeaker) return;
+    if (testingSpeaker || joining) return;
     const speakerId = effective.speaker || devices.speaker[0]?.deviceId || void 0;
     setTestingSpeaker(true);
     try {
@@ -30324,6 +30342,7 @@ function StudioGuestLobby({
           size: "icon-lg",
           "aria-pressed": muted,
           "aria-label": labels.mic,
+          disabled: joining,
           onClick: () => onMutedChange(!muted),
           children: muted ? /* @__PURE__ */ jsx(MicOff, {}) : /* @__PURE__ */ jsx(Mic, {})
         }
@@ -30336,6 +30355,7 @@ function StudioGuestLobby({
           size: "icon-lg",
           "aria-pressed": cameraOn,
           "aria-label": labels.camera,
+          disabled: joining,
           onClick: () => onCameraChange(!cameraOn),
           children: cameraOn ? /* @__PURE__ */ jsx(Video, {}) : /* @__PURE__ */ jsx(VideoOff, {})
         }
@@ -30347,6 +30367,7 @@ function StudioGuestLobby({
         devices,
         selected: effective,
         labels: deviceLabels,
+        disabled: joining,
         onChange: changeDevice,
         speakerAction: /* @__PURE__ */ jsx(
           Button3,
@@ -30354,7 +30375,7 @@ function StudioGuestLobby({
             type: "button",
             size: "sm",
             variant: "outline",
-            disabled: testingSpeaker,
+            disabled: testingSpeaker || joining,
             onClick: () => void onTestSpeaker(),
             children: deviceLabels.testSpeaker
           }
@@ -30372,6 +30393,7 @@ function StudioGuestLobby({
           onChange: (event) => onDisplayNameChange(event.target.value),
           maxLength: 80,
           required: true,
+          disabled: joining,
           autoComplete: "name"
         }
       )
@@ -30385,8 +30407,18 @@ function StudioGuestLobby({
         size: "lg",
         className: "w-full",
         disabled: joining || showName && !displayName.trim(),
+        "aria-busy": joining,
         onClick: onJoin,
-        children: waitingForHost ? labels.waitingForHost : labels.join
+        children: joining ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            LoaderCircle,
+            {
+              "aria-hidden": true,
+              className: "animate-spin motion-reduce:animate-none"
+            }
+          ),
+          joiningLabel
+        ] }) : waitingForHost ? labels.waitingForHost : labels.join
       }
     )
   ] });
@@ -30701,6 +30733,7 @@ function studioMeetingFromRtk(raw) {
   const chatSend = /* @__PURE__ */ new Map();
   const nameOverrides = /* @__PURE__ */ new Map();
   let joinStageInFlight = null;
+  let leaveInProgress = false;
   let joinedStageLocally = false;
   let stageGrantPending = false;
   let stageGrantJoinFailures = 0;
@@ -30814,6 +30847,7 @@ function studioMeetingFromRtk(raw) {
     for (const listener of stageGrantListeners) listener(userId);
   }
   function markStageGranted() {
+    if (leaveInProgress) return;
     stageGrantPending = true;
     void ensureStageJoined();
   }
@@ -30861,6 +30895,7 @@ function studioMeetingFromRtk(raw) {
   async function runJoinStageAttempts() {
     let lastError;
     for (let attempt = 0; attempt < STAGE_JOIN_MAX_ATTEMPTS; attempt++) {
+      if (leaveInProgress) return;
       if (currentStageStatus() === "ON_STAGE") {
         notifyStage();
         return;
@@ -30909,6 +30944,7 @@ function studioMeetingFromRtk(raw) {
     }
   }
   async function ensureStageJoined() {
+    if (leaveInProgress) return;
     if (currentStageStatus() === "ON_STAGE") {
       clearStageGrantPending();
       return;
@@ -31045,10 +31081,29 @@ function studioMeetingFromRtk(raw) {
       await applyCurrentVideoEffects();
     },
     async leave() {
-      if (typeof window !== "undefined") {
-        window.removeEventListener("unhandledrejection", onUnhandledRejection);
+      leaveInProgress = true;
+      clearStageGrantPending();
+      try {
+        if (typeof window !== "undefined") {
+          window.removeEventListener(
+            "unhandledrejection",
+            onUnhandledRejection
+          );
+        }
+        let firstFailed = false;
+        try {
+          await meeting.leave?.();
+        } catch {
+          firstFailed = true;
+        }
+        const roomState = meeting.self?.roomState ?? null;
+        if (firstFailed || roomState === "joined" || roomState === "stageLeft") {
+          await meeting.leave?.();
+        }
+      } finally {
+        clearStageGrantPending();
+        leaveInProgress = false;
       }
-      await meeting.leave?.();
     },
     async setAudioEnabled(enabled) {
       if (enabled) await meeting.self?.enableAudio?.();
@@ -31823,6 +31878,9 @@ function LivoGuestStudio({
     session?.authToken ?? null,
     sessionGen
   );
+  useEffect(() => {
+    if (meeting) setJoining(false);
+  }, [meeting]);
   useEffect(() => {
     const identity = readStudioGuestIdentity();
     setDisplayName(identity.displayName);
@@ -31855,6 +31913,7 @@ function LivoGuestStudio({
       setStatus(null);
       setSession(next);
     } catch (err) {
+      setJoining(false);
       const code = studioErrorCode(err);
       if (code === "studio_not_started") {
         setWaitingForHost(true);
@@ -31871,7 +31930,6 @@ function LivoGuestStudio({
       }
     } finally {
       joinInFlight.current = false;
-      setJoining(false);
     }
   }, [apiUrl, displayName, guestId, lobbyLabels, token]);
   useEffect(() => {
@@ -32133,6 +32191,10 @@ function studioRoomLabels(t) {
     shareRequestTimeout: t("shareRequestTimeout"),
     shareRespondError: t("shareRespondError"),
     goOffAir: t("goOffAir"),
+    moveToAudience: t("moveToAudience"),
+    moveToAudienceTitle: t("moveToAudienceTitle"),
+    moveToAudienceDescription: t("moveToAudienceDescription"),
+    moveToAudienceConfirm: t("moveToAudienceConfirm"),
     goOnAir: t("goOnAir"),
     takeOffAir: t("takeOffAir"),
     bringOnAir: t("bringOnAir"),