@livo-tv/sdk 1.16.0 → 1.18.0

package/README.md

@@ -79,7 +79,7 @@ Wrap the studio in `StudioWindowGate` with a **stable** `lockKey` (stream id or
 
 Omit `playerOrigin` in native embeds. The watch-share control only appears when you pass a player origin; native partners should share their own watch URL.
 
-`endedHref` is the link on the host's ended-session action. When it is omitted or blank, that action goes to `/streams/:id`.
+`endedHref` is the link on the host's ended-session action. When it is omitted or blank, that action goes to `/streams/:id`. Optional `endedExtra` renders under that action. Omit it and the card stays the same.
 
 Regression page: `pnpm example:embed` serves `examples/partner-embed` on `http://localhost:3003`.
 

package/dist/studio/index.cjs

@@ -11595,6 +11595,7 @@ function EmptyState({
   actionLabel,
   onAction,
   actionHref,
+  extra,
   role = "status"
 }) {
   const action = actionLabel && actionHref ? /* @__PURE__ */ jsxRuntime.jsx(Button3, { render: /* @__PURE__ */ jsxRuntime.jsx("a", { href: actionHref }), children: actionLabel }) : actionLabel ? /* @__PURE__ */ jsxRuntime.jsx(Button3, { type: "button", onClick: onAction, children: actionLabel }) : null;
@@ -11606,7 +11607,8 @@ function EmptyState({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold", children: title }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground max-w-md text-sm", children: description }),
-        action
+        action,
+        extra
       ]
     }
   );
@@ -11677,21 +11679,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 +22855,7 @@ function StudioDeviceSelectGroup({
   devices,
   selected,
   labels,
+  disabled: disabled2 = false,
   onChange,
   speakerAction
 }) {
@@ -22867,6 +22867,7 @@ function StudioDeviceSelectGroup({
         label: labels.cameraDevice,
         options: devices.video,
         value: selected.video,
+        disabled: disabled2,
         onChange: (id) => onChange("video", id)
       }
     ),
@@ -22877,6 +22878,7 @@ function StudioDeviceSelectGroup({
         label: labels.micDevice,
         options: devices.audio,
         value: selected.audio,
+        disabled: disabled2,
         onChange: (id) => onChange("audio", id)
       }
     ),
@@ -22887,6 +22889,7 @@ function StudioDeviceSelectGroup({
         label: labels.speakerDevice,
         options: devices.speaker,
         value: selected.speaker,
+        disabled: disabled2,
         onChange: (id) => onChange("speaker", id),
         action: speakerAction
       }
@@ -22898,6 +22901,7 @@ function DeviceRow({
   label,
   options,
   value,
+  disabled: disabled2 = false,
   onChange,
   action
 }) {
@@ -22916,6 +22920,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 +28571,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(
@@ -28915,7 +28931,8 @@ function StudioRoom({
   captionsBaseUrl,
   apiUrl,
   cdnBase,
-  endedHref
+  endedHref,
+  endedExtra
 }) {
   const [cameraOn, setCameraOn] = React18.useState(initialCameraOn);
   const [screenOn, setScreenOn] = React18.useState(false);
@@ -29627,6 +29644,7 @@ function StudioRoom({
     try {
       await meeting.leave();
       setLeaveState("left");
+    } catch {
     } finally {
       setPending(false);
     }
@@ -29647,6 +29665,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__ */ jsxRuntime.jsx("div", { className: "flex h-dvh flex-col items-center justify-center p-6", children: /* @__PURE__ */ jsxRuntime.jsx(
         EmptyState,
@@ -29655,7 +29674,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
         }
       ) })
     );
@@ -30263,7 +30283,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 +30319,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 +30329,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 +30368,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 +30381,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 +30393,7 @@ function StudioGuestLobby({
         devices,
         selected: effective,
         labels: deviceLabels,
+        disabled: joining,
         onChange: changeDevice,
         speakerAction: /* @__PURE__ */ jsxRuntime.jsx(
           Button3,
@@ -30375,7 +30401,7 @@ function StudioGuestLobby({
             type: "button",
             size: "sm",
             variant: "outline",
-            disabled: testingSpeaker,
+            disabled: testingSpeaker || joining,
             onClick: () => void onTestSpeaker(),
             children: deviceLabels.testSpeaker
           }
@@ -30393,6 +30419,7 @@ function StudioGuestLobby({
           onChange: (event) => onDisplayNameChange(event.target.value),
           maxLength: 80,
           required: true,
+          disabled: joining,
           autoComplete: "name"
         }
       )
@@ -30406,8 +30433,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 +30759,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 +30873,7 @@ function studioMeetingFromRtk(raw) {
     for (const listener of stageGrantListeners) listener(userId);
   }
   function markStageGranted() {
+    if (leaveInProgress) return;
     stageGrantPending = true;
     void ensureStageJoined();
   }
@@ -30882,6 +30921,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 +30970,7 @@ function studioMeetingFromRtk(raw) {
     }
   }
   async function ensureStageJoined() {
+    if (leaveInProgress) return;
     if (currentStageStatus() === "ON_STAGE") {
       clearStageGrantPending();
       return;
@@ -31066,10 +31107,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?.();
@@ -31682,7 +31742,8 @@ function LivoHostStudio({
   theme,
   appDownloadUrl,
   guestUrl,
-  endedHref
+  endedHref,
+  endedExtra
 }) {
   const reducedMotion = usePrefersReducedMotion();
   const [session, setSession] = React18.useState(null);
@@ -31804,7 +31865,8 @@ function LivoHostStudio({
       playerOrigin,
       appDownloadUrl,
       apiUrl,
-      endedHref
+      endedHref,
+      endedExtra
     }
   ) });
 }
@@ -31844,6 +31906,9 @@ function LivoGuestStudio({
     session?.authToken ?? null,
     sessionGen
   );
+  React18.useEffect(() => {
+    if (meeting) setJoining(false);
+  }, [meeting]);
   React18.useEffect(() => {
     const identity = readStudioGuestIdentity();
     setDisplayName(identity.displayName);
@@ -31876,6 +31941,7 @@ function LivoGuestStudio({
       setStatus(null);
       setSession(next);
     } catch (err) {
+      setJoining(false);
       const code = studioErrorCode(err);
       if (code === "studio_not_started") {
         setWaitingForHost(true);
@@ -31892,7 +31958,6 @@ function LivoGuestStudio({
       }
     } finally {
       joinInFlight.current = false;
-      setJoining(false);
     }
   }, [apiUrl, displayName, guestId, lobbyLabels, token]);
   React18.useEffect(() => {
@@ -32154,6 +32219,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"),