@livo-tv/sdk 1.16.0 → 1.17.0

package/dist/studio/index.cjs

@@ -11677,21 +11677,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");
@@ -22856,6 +22853,7 @@ function StudioDeviceSelectGroup({
   devices,
   selected,
   labels,
+  disabled: disabled2 = false,
   onChange,
   speakerAction
 }) {
@@ -22867,6 +22865,7 @@ function StudioDeviceSelectGroup({
         label: labels.cameraDevice,
         options: devices.video,
         value: selected.video,
+        disabled: disabled2,
         onChange: (id) => onChange("video", id)
       }
     ),
@@ -22877,6 +22876,7 @@ function StudioDeviceSelectGroup({
         label: labels.micDevice,
         options: devices.audio,
         value: selected.audio,
+        disabled: disabled2,
         onChange: (id) => onChange("audio", id)
       }
     ),
@@ -22887,6 +22887,7 @@ function StudioDeviceSelectGroup({
         label: labels.speakerDevice,
         options: devices.speaker,
         value: selected.speaker,
+        disabled: disabled2,
         onChange: (id) => onChange("speaker", id),
         action: speakerAction
       }
@@ -22898,6 +22899,7 @@ function DeviceRow({
   label,
   options,
   value,
+  disabled: disabled2 = false,
   onChange,
   action
 }) {
@@ -22916,6 +22918,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__ */ jsxRuntime.jsx("option", { value: option.deviceId, children: option.label }, option.deviceId))
         }
@@ -28566,24 +28569,35 @@ function StudioToolbar({
         children: selfStageStatus === "ON_STAGE" ? /* @__PURE__ */ jsxRuntime.jsx(EyeOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(Eye, {})
       }
     ) : null,
-    showStageGuest ? /* @__PURE__ */ jsxRuntime.jsx(
+    showStageGuest ? selfStageStatus === "ON_STAGE" ? /* @__PURE__ */ jsxRuntime.jsx(
+      ConfirmAction,
+      {
+        triggerLabel: labels.moveToAudience,
+        title: labels.moveToAudienceTitle,
+        description: labels.moveToAudienceDescription,
+        confirmLabel: labels.moveToAudienceConfirm,
+        pending,
+        onConfirm: onLeaveStage,
+        trigger: /* @__PURE__ */ jsxRuntime.jsx(
+          Button3,
+          {
+            type: "button",
+            size: "icon-lg",
+            variant: "secondary",
+            disabled: pending || !canLeaveStage,
+            "aria-label": labels.moveToAudience,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Users, {})
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(EyeOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(Eye, {})
+        disabled: selfStageStatus === "REQUESTED_TO_JOIN_STAGE",
+        onClick: onAskStage,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Eye, {})
       }
     ) : null,
     showScreenControl ? canShareFreely ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -29627,6 +29641,7 @@ function StudioRoom({
     try {
       await meeting.leave();
       setLeaveState("left");
+    } catch {
     } finally {
       setPending(false);
     }
@@ -30263,7 +30278,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,
@@ -30298,7 +30314,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) {
@@ -30306,7 +30324,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 {
@@ -30345,6 +30363,7 @@ function StudioGuestLobby({
           size: "icon-lg",
           "aria-pressed": muted,
           "aria-label": labels.mic,
+          disabled: joining,
           onClick: () => onMutedChange(!muted),
           children: muted ? /* @__PURE__ */ jsxRuntime.jsx(MicOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(Mic, {})
         }
@@ -30357,6 +30376,7 @@ function StudioGuestLobby({
           size: "icon-lg",
           "aria-pressed": cameraOn,
           "aria-label": labels.camera,
+          disabled: joining,
           onClick: () => onCameraChange(!cameraOn),
           children: cameraOn ? /* @__PURE__ */ jsxRuntime.jsx(Video, {}) : /* @__PURE__ */ jsxRuntime.jsx(VideoOff, {})
         }
@@ -30368,6 +30388,7 @@ function StudioGuestLobby({
         devices,
         selected: effective,
         labels: deviceLabels,
+        disabled: joining,
         onChange: changeDevice,
         speakerAction: /* @__PURE__ */ jsxRuntime.jsx(
           Button3,
@@ -30375,7 +30396,7 @@ function StudioGuestLobby({
             type: "button",
             size: "sm",
             variant: "outline",
-            disabled: testingSpeaker,
+            disabled: testingSpeaker || joining,
             onClick: () => void onTestSpeaker(),
             children: deviceLabels.testSpeaker
           }
@@ -30393,6 +30414,7 @@ function StudioGuestLobby({
           onChange: (event) => onDisplayNameChange(event.target.value),
           maxLength: 80,
           required: true,
+          disabled: joining,
           autoComplete: "name"
         }
       )
@@ -30406,8 +30428,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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LoaderCircle,
+            {
+              "aria-hidden": true,
+              className: "animate-spin motion-reduce:animate-none"
+            }
+          ),
+          joiningLabel
+        ] }) : waitingForHost ? labels.waitingForHost : labels.join
       }
     )
   ] });
@@ -30722,6 +30754,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;
@@ -30835,6 +30868,7 @@ function studioMeetingFromRtk(raw) {
     for (const listener of stageGrantListeners) listener(userId);
   }
   function markStageGranted() {
+    if (leaveInProgress) return;
     stageGrantPending = true;
     void ensureStageJoined();
   }
@@ -30882,6 +30916,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;
@@ -30930,6 +30965,7 @@ function studioMeetingFromRtk(raw) {
     }
   }
   async function ensureStageJoined() {
+    if (leaveInProgress) return;
     if (currentStageStatus() === "ON_STAGE") {
       clearStageGrantPending();
       return;
@@ -31066,10 +31102,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?.();
@@ -31844,6 +31899,9 @@ function LivoGuestStudio({
     session?.authToken ?? null,
     sessionGen
   );
+  React18.useEffect(() => {
+    if (meeting) setJoining(false);
+  }, [meeting]);
   React18.useEffect(() => {
     const identity = readStudioGuestIdentity();
     setDisplayName(identity.displayName);
@@ -31876,6 +31934,7 @@ function LivoGuestStudio({
       setStatus(null);
       setSession(next);
     } catch (err) {
+      setJoining(false);
       const code = studioErrorCode(err);
       if (code === "studio_not_started") {
         setWaitingForHost(true);
@@ -31892,7 +31951,6 @@ function LivoGuestStudio({
       }
     } finally {
       joinInFlight.current = false;
-      setJoining(false);
     }
   }, [apiUrl, displayName, guestId, lobbyLabels, token]);
   React18.useEffect(() => {
@@ -32154,6 +32212,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"),