@livo-tv/sdk 1.16.0 → 1.18.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;
@@ -525,7 +529,7 @@ type StudioDeviceSelection = {
     speaker: string;
 };
 
-declare function StudioRoom({ session, meeting, control, onRefreshStatus, onRejoin, labels, reducedMotion, embed, chrome, headerStart, playerOrigin, windowGate, initialCameraOn, initialMuted, initialDevices, appDownloadUrl, captionsBaseUrl, apiUrl, cdnBase, endedHref, }: {
+declare function StudioRoom({ session, meeting, control, onRefreshStatus, onRejoin, labels, reducedMotion, embed, chrome, headerStart, playerOrigin, windowGate, initialCameraOn, initialMuted, initialDevices, appDownloadUrl, captionsBaseUrl, apiUrl, cdnBase, endedHref, endedExtra, }: {
     session: StudioSession;
     meeting: StudioMeetingHandle;
     control: StudioControlActions;
@@ -550,6 +554,8 @@ declare function StudioRoom({ session, meeting, control, onRefreshStatus, onRejo
     cdnBase?: string;
     /** Partner URL for the ended-session action. Defaults to `/streams/:id`. */
     endedHref?: string;
+    /** Partner content under the return link on the session-over card. */
+    endedExtra?: ReactNode;
 }): react.JSX.Element;
 
 declare function StudioSkeleton(): react.JSX.Element;
@@ -559,6 +565,7 @@ type StudioGuestLobbyLabels = {
     hint: string;
     name: string;
     join: string;
+    joining: string;
     waitingForHost: string;
     camera: string;
     mic: string;
@@ -605,7 +612,7 @@ declare function StudioWindowGate({ lockKey, allowTakeover, labels, children, }:
     children: ReactNode;
 }): react.JSX.Element;
 
-declare function LivoHostStudio({ token, apiUrl, labels, redeemError, embed, chrome, headerStart, playerOrigin, theme, appDownloadUrl, guestUrl, endedHref, }: {
+declare function LivoHostStudio({ token, apiUrl, labels, redeemError, embed, chrome, headerStart, playerOrigin, theme, appDownloadUrl, guestUrl, endedHref, endedExtra, }: {
     token: string;
     apiUrl?: string;
     labels: StudioRoomLabels;
@@ -621,6 +628,8 @@ declare function LivoHostStudio({ token, apiUrl, labels, redeemError, embed, chr
     guestUrl?: string | null;
     /** Partner URL for the ended-session action. Defaults to `/streams/:id`. */
     endedHref?: string;
+    /** Partner content under the return link on the session-over card. */
+    endedExtra?: ReactNode;
 }): react.JSX.Element;
 
 type StudioLobbyLabels = {
@@ -628,6 +637,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;
@@ -525,7 +529,7 @@ type StudioDeviceSelection = {
     speaker: string;
 };
 
-declare function StudioRoom({ session, meeting, control, onRefreshStatus, onRejoin, labels, reducedMotion, embed, chrome, headerStart, playerOrigin, windowGate, initialCameraOn, initialMuted, initialDevices, appDownloadUrl, captionsBaseUrl, apiUrl, cdnBase, endedHref, }: {
+declare function StudioRoom({ session, meeting, control, onRefreshStatus, onRejoin, labels, reducedMotion, embed, chrome, headerStart, playerOrigin, windowGate, initialCameraOn, initialMuted, initialDevices, appDownloadUrl, captionsBaseUrl, apiUrl, cdnBase, endedHref, endedExtra, }: {
     session: StudioSession;
     meeting: StudioMeetingHandle;
     control: StudioControlActions;
@@ -550,6 +554,8 @@ declare function StudioRoom({ session, meeting, control, onRefreshStatus, onRejo
     cdnBase?: string;
     /** Partner URL for the ended-session action. Defaults to `/streams/:id`. */
     endedHref?: string;
+    /** Partner content under the return link on the session-over card. */
+    endedExtra?: ReactNode;
 }): react.JSX.Element;
 
 declare function StudioSkeleton(): react.JSX.Element;
@@ -559,6 +565,7 @@ type StudioGuestLobbyLabels = {
     hint: string;
     name: string;
     join: string;
+    joining: string;
     waitingForHost: string;
     camera: string;
     mic: string;
@@ -605,7 +612,7 @@ declare function StudioWindowGate({ lockKey, allowTakeover, labels, children, }:
     children: ReactNode;
 }): react.JSX.Element;
 
-declare function LivoHostStudio({ token, apiUrl, labels, redeemError, embed, chrome, headerStart, playerOrigin, theme, appDownloadUrl, guestUrl, endedHref, }: {
+declare function LivoHostStudio({ token, apiUrl, labels, redeemError, embed, chrome, headerStart, playerOrigin, theme, appDownloadUrl, guestUrl, endedHref, endedExtra, }: {
     token: string;
     apiUrl?: string;
     labels: StudioRoomLabels;
@@ -621,6 +628,8 @@ declare function LivoHostStudio({ token, apiUrl, labels, redeemError, embed, chr
     guestUrl?: string | null;
     /** Partner URL for the ended-session action. Defaults to `/streams/:id`. */
     endedHref?: string;
+    /** Partner content under the return link on the session-over card. */
+    endedExtra?: ReactNode;
 }): react.JSX.Element;
 
 type StudioLobbyLabels = {
@@ -628,6 +637,7 @@ type StudioLobbyLabels = {
     hint: string;
     name: string;
     join: string;
+    joining: string;
     waitingForHost: string;
     camera: string;
     mic: string;

package/dist/studio/index.js

@@ -11574,6 +11574,7 @@ function EmptyState({
   actionLabel,
   onAction,
   actionHref,
+  extra,
   role = "status"
 }) {
   const action = actionLabel && actionHref ? /* @__PURE__ */ jsx(Button3, { render: /* @__PURE__ */ jsx("a", { href: actionHref }), children: actionLabel }) : actionLabel ? /* @__PURE__ */ jsx(Button3, { type: "button", onClick: onAction, children: actionLabel }) : null;
@@ -11585,7 +11586,8 @@ function EmptyState({
       children: [
         /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: title }),
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-md text-sm", children: description }),
-        action
+        action,
+        extra
       ]
     }
   );
@@ -11656,21 +11658,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 +22834,7 @@ function StudioDeviceSelectGroup({
   devices,
   selected,
   labels,
+  disabled: disabled2 = false,
   onChange,
   speakerAction
 }) {
@@ -22846,6 +22846,7 @@ function StudioDeviceSelectGroup({
         label: labels.cameraDevice,
         options: devices.video,
         value: selected.video,
+        disabled: disabled2,
         onChange: (id) => onChange("video", id)
       }
     ),
@@ -22856,6 +22857,7 @@ function StudioDeviceSelectGroup({
         label: labels.micDevice,
         options: devices.audio,
         value: selected.audio,
+        disabled: disabled2,
         onChange: (id) => onChange("audio", id)
       }
     ),
@@ -22866,6 +22868,7 @@ function StudioDeviceSelectGroup({
         label: labels.speakerDevice,
         options: devices.speaker,
         value: selected.speaker,
+        disabled: disabled2,
         onChange: (id) => onChange("speaker", id),
         action: speakerAction
       }
@@ -22877,6 +22880,7 @@ function DeviceRow({
   label,
   options,
   value,
+  disabled: disabled2 = false,
   onChange,
   action
 }) {
@@ -22895,6 +22899,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 +28550,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(
@@ -28894,7 +28910,8 @@ function StudioRoom({
   captionsBaseUrl,
   apiUrl,
   cdnBase,
-  endedHref
+  endedHref,
+  endedExtra
 }) {
   const [cameraOn, setCameraOn] = useState(initialCameraOn);
   const [screenOn, setScreenOn] = useState(false);
@@ -29606,6 +29623,7 @@ function StudioRoom({
     try {
       await meeting.leave();
       setLeaveState("left");
+    } catch {
     } finally {
       setPending(false);
     }
@@ -29626,6 +29644,7 @@ function StudioRoom({
   }
   if (sessionOver) {
     const canRejoin = session.role === "moderator" && onRejoin != null && isStudioActiveStatus(session.stream.status);
+    const returnHref = canRejoin || session.role !== "moderator" ? void 0 : endedHref?.trim() || `/streams/${session.stream.id}`;
     return withStudioToaster(
       /* @__PURE__ */ jsx("div", { className: "flex h-dvh flex-col items-center justify-center p-6", children: /* @__PURE__ */ jsx(
         EmptyState,
@@ -29634,7 +29653,8 @@ function StudioRoom({
           description: labels.endedDescription,
           actionLabel: canRejoin ? labels.rejoin : session.role === "moderator" ? labels.endedAction : void 0,
           onAction: canRejoin ? onRejoin : void 0,
-          actionHref: canRejoin || session.role !== "moderator" ? void 0 : endedHref?.trim() || `/streams/${session.stream.id}`
+          actionHref: returnHref,
+          extra: returnHref ? endedExtra : void 0
         }
       ) })
     );
@@ -30242,7 +30262,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 +30298,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 +30308,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 +30347,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 +30360,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 +30372,7 @@ function StudioGuestLobby({
         devices,
         selected: effective,
         labels: deviceLabels,
+        disabled: joining,
         onChange: changeDevice,
         speakerAction: /* @__PURE__ */ jsx(
           Button3,
@@ -30354,7 +30380,7 @@ function StudioGuestLobby({
             type: "button",
             size: "sm",
             variant: "outline",
-            disabled: testingSpeaker,
+            disabled: testingSpeaker || joining,
             onClick: () => void onTestSpeaker(),
             children: deviceLabels.testSpeaker
           }
@@ -30372,6 +30398,7 @@ function StudioGuestLobby({
           onChange: (event) => onDisplayNameChange(event.target.value),
           maxLength: 80,
           required: true,
+          disabled: joining,
           autoComplete: "name"
         }
       )
@@ -30385,8 +30412,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 +30738,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 +30852,7 @@ function studioMeetingFromRtk(raw) {
     for (const listener of stageGrantListeners) listener(userId);
   }
   function markStageGranted() {
+    if (leaveInProgress) return;
     stageGrantPending = true;
     void ensureStageJoined();
   }
@@ -30861,6 +30900,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 +30949,7 @@ function studioMeetingFromRtk(raw) {
     }
   }
   async function ensureStageJoined() {
+    if (leaveInProgress) return;
     if (currentStageStatus() === "ON_STAGE") {
       clearStageGrantPending();
       return;
@@ -31045,10 +31086,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?.();
@@ -31661,7 +31721,8 @@ function LivoHostStudio({
   theme,
   appDownloadUrl,
   guestUrl,
-  endedHref
+  endedHref,
+  endedExtra
 }) {
   const reducedMotion = usePrefersReducedMotion();
   const [session, setSession] = useState(null);
@@ -31783,7 +31844,8 @@ function LivoHostStudio({
       playerOrigin,
       appDownloadUrl,
       apiUrl,
-      endedHref
+      endedHref,
+      endedExtra
     }
   ) });
 }
@@ -31823,6 +31885,9 @@ function LivoGuestStudio({
     session?.authToken ?? null,
     sessionGen
   );
+  useEffect(() => {
+    if (meeting) setJoining(false);
+  }, [meeting]);
   useEffect(() => {
     const identity = readStudioGuestIdentity();
     setDisplayName(identity.displayName);
@@ -31855,6 +31920,7 @@ function LivoGuestStudio({
       setStatus(null);
       setSession(next);
     } catch (err) {
+      setJoining(false);
       const code = studioErrorCode(err);
       if (code === "studio_not_started") {
         setWaitingForHost(true);
@@ -31871,7 +31937,6 @@ function LivoGuestStudio({
       }
     } finally {
       joinInFlight.current = false;
-      setJoining(false);
     }
   }, [apiUrl, displayName, guestId, lobbyLabels, token]);
   useEffect(() => {
@@ -32133,6 +32198,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"),