@livo-tv/sdk 1.6.0 → 1.7.0

package/dist/studio/index.js

@@ -4085,227 +4085,223 @@ function StudioToolbar({
   const showStageModerator = session.role === "moderator" && canManageStage;
   const showStageGuest = session.role === "guest" && stageEnabled;
   const captionsLabel = !captionsAvailable ? labels.captions : !captionsReady ? labels.captionsNotReady : captionsOn ? labels.captionsOn : labels.captionsOff;
-  return /* @__PURE__ */ jsx("footer", { className: "flex flex-wrap items-center justify-center gap-3 border-t px-3 py-3 sm:justify-between", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
-      showMediaControls ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          MediaSplit,
-          {
-            label: muted ? labels.unmute : labels.mute,
-            pressed: muted,
-            tone: muted ? "danger" : "default",
-            onClick: onToggleMute,
-            pickerLabel: labels.micDevice,
-            options: devices.audio,
-            selected: effective.audio,
-            onSelect: (id) => void onDeviceChange("audio", id),
-            children: muted ? /* @__PURE__ */ jsx(MicOff, {}) : /* @__PURE__ */ jsx(Mic, {})
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          MediaSplit,
-          {
-            label: labels.camera,
-            pressed: cameraOn,
-            onClick: onToggleCamera,
-            pickerLabel: labels.cameraDevice,
-            options: devices.video,
-            selected: effective.video,
-            onSelect: (id) => void onDeviceChange("video", id),
-            children: cameraOn ? /* @__PURE__ */ jsx(Video, {}) : /* @__PURE__ */ jsx(VideoOff, {})
-          }
-        )
-      ] }) : null,
-      showStageModerator ? /* @__PURE__ */ jsx(
-        ControlIcon,
-        {
-          label: selfStageStatus === "ON_STAGE" ? labels.goOffAir : labels.goOnAir,
-          pressed: selfStageStatus !== "ON_STAGE",
-          disabled: 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, {})
-        }
-      ) : null,
-      showStageGuest ? /* @__PURE__ */ jsx(
-        ControlIcon,
-        {
-          label: selfStageStatus === "ON_STAGE" ? labels.goOffAir : 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, {})
-        }
-      ) : null,
-      showScreenControl ? canShareFreely ? /* @__PURE__ */ jsx(
-        ControlIcon,
+  return /* @__PURE__ */ jsx("footer", { className: "border-t px-3 py-3", children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
+    showMediaControls ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        MediaSplit,
         {
-          label: labels.screen,
-          pressed: screenOn,
-          disabled: screenPending || !screenAvailable && !screenOn,
-          pending: screenPending,
-          onClick: onToggleScreen,
-          children: /* @__PURE__ */ jsx(MonitorUp, {})
+          label: muted ? labels.unmute : labels.mute,
+          pressed: muted,
+          tone: muted ? "danger" : "default",
+          onClick: onToggleMute,
+          pickerLabel: labels.micDevice,
+          options: devices.audio,
+          selected: effective.audio,
+          onSelect: (id) => void onDeviceChange("audio", id),
+          children: muted ? /* @__PURE__ */ jsx(MicOff, {}) : /* @__PURE__ */ jsx(Mic, {})
         }
-      ) : shareGrant === "requested" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          ControlIcon,
-          {
-            label: labels.shareRequested,
-            pressed: true,
-            disabled: true,
-            onClick: () => void 0,
-            children: /* @__PURE__ */ jsx(MonitorUp, {})
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ControlIcon,
-          {
-            label: labels.cancelShareRequest,
-            onClick: onCancelShareRequest,
-            children: /* @__PURE__ */ jsx(X, {})
-          }
-        )
-      ] }) : /* @__PURE__ */ jsx(ControlIcon, { label: labels.askToShare, onClick: onAskToShare, children: /* @__PURE__ */ jsx(MonitorUp, {}) }) : null,
+      ),
       /* @__PURE__ */ jsx(
-        ControlIcon,
+        MediaSplit,
         {
-          label: captionsLabel,
-          pressed: captionsOn,
-          disabled: !captionsAvailable,
-          onClick: onToggleCaptions,
-          children: /* @__PURE__ */ jsx(Captions, {})
+          label: labels.camera,
+          pressed: cameraOn,
+          onClick: onToggleCamera,
+          pickerLabel: labels.cameraDevice,
+          options: devices.video,
+          selected: effective.video,
+          onSelect: (id) => void onDeviceChange("video", id),
+          children: cameraOn ? /* @__PURE__ */ jsx(Video, {}) : /* @__PURE__ */ jsx(VideoOff, {})
         }
-      ),
-      /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-        /* @__PURE__ */ jsx(
-          DropdownMenuTrigger,
-          {
-            render: /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: "button",
-                size: "icon-lg",
-                variant: "secondary",
-                "aria-label": labels.more
-              }
-            ),
-            children: /* @__PURE__ */ jsx(MoreVertical, {})
+      )
+    ] }) : null,
+    showStageModerator ? /* @__PURE__ */ jsx(
+      ControlIcon,
+      {
+        label: selfStageStatus === "ON_STAGE" ? labels.goOffAir : labels.goOnAir,
+        pressed: selfStageStatus !== "ON_STAGE",
+        disabled: selfStageStatus === "ON_STAGE" && !canLeaveStage,
+        onClick: () => {
+          if (selfStageStatus === "ON_STAGE") {
+            if (!canLeaveStage) {
+              toast.message(labels.offAirLastVisible);
+              return;
+            }
+            onLeaveStage();
+            return;
           }
-        ),
-        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "center", className: "min-w-44", children: [
-          fullscreenSupported ? /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => void enterFullscreen(), children: [
-            /* @__PURE__ */ jsx(Maximize, {}),
-            labels.fullscreen
-          ] }) : null,
-          pipSupported ? /* @__PURE__ */ jsxs(
-            DropdownMenuItem,
-            {
-              onClick: () => {
-                if (pipOpen) onClosePip();
-                else onOpenPip();
-              },
-              children: [
-                /* @__PURE__ */ jsx(PictureInPicture2, {}),
-                pipOpen ? labels.closePip : labels.openPip
-              ]
+          onAskStage();
+        },
+        children: selfStageStatus === "ON_STAGE" ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {})
+      }
+    ) : null,
+    showStageGuest ? /* @__PURE__ */ jsx(
+      ControlIcon,
+      {
+        label: selfStageStatus === "ON_STAGE" ? labels.goOffAir : 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;
             }
-          ) : null,
-          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onOpenSettings, children: [
-            /* @__PURE__ */ jsx(Settings, {}),
-            labels.settings
-          ] })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
+            onLeaveStage();
+            return;
+          }
+          onAskStage();
+        },
+        children: selfStageStatus === "ON_STAGE" ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {})
+      }
+    ) : null,
+    showScreenControl ? canShareFreely ? /* @__PURE__ */ jsx(
+      ControlIcon,
+      {
+        label: labels.screen,
+        pressed: screenOn,
+        disabled: screenPending || !screenAvailable && !screenOn,
+        pending: screenPending,
+        onClick: onToggleScreen,
+        children: /* @__PURE__ */ jsx(MonitorUp, {})
+      }
+    ) : shareGrant === "requested" ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         ControlIcon,
         {
-          label: unreadChat > 0 ? `${labels.chat} (${unreadChat})` : labels.chat,
-          pressed: chatOpen,
-          badge: unreadChat,
-          onClick: onToggleChat,
-          children: /* @__PURE__ */ jsx(MessageSquare, {})
+          label: labels.shareRequested,
+          pressed: true,
+          disabled: true,
+          onClick: () => void 0,
+          children: /* @__PURE__ */ jsx(MonitorUp, {})
         }
       ),
-      session.role === "moderator" ? /* @__PURE__ */ jsx(
-        ControlIcon,
-        {
-          label: peopleBadge > 0 ? `${labels.people} (${peopleBadge})` : labels.people,
-          pressed: peopleOpen,
-          badge: peopleBadge,
-          onClick: onTogglePeople,
-          children: /* @__PURE__ */ jsx(Users, {})
-        }
-      ) : null,
       /* @__PURE__ */ jsx(
         ControlIcon,
         {
-          label: labels.settings,
-          pressed: settingsOpen,
-          onClick: onOpenSettings,
-          children: /* @__PURE__ */ jsx(Settings, {})
+          label: labels.cancelShareRequest,
+          onClick: onCancelShareRequest,
+          children: /* @__PURE__ */ jsx(X, {})
         }
-      ),
+      )
+    ] }) : /* @__PURE__ */ jsx(ControlIcon, { label: labels.askToShare, onClick: onAskToShare, children: /* @__PURE__ */ jsx(MonitorUp, {}) }) : null,
+    /* @__PURE__ */ jsx(
+      ControlIcon,
+      {
+        label: captionsLabel,
+        pressed: captionsOn,
+        disabled: !captionsAvailable,
+        onClick: onToggleCaptions,
+        children: /* @__PURE__ */ jsx(Captions, {})
+      }
+    ),
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
       /* @__PURE__ */ jsx(
-        StudioSettingsDialog,
-        {
-          open: settingsOpen,
-          onOpenChange: onCloseSettings,
-          meeting,
-          reducedMotion,
-          cameraOn,
-          labels,
-          captionPrefs,
-          onCaptionPrefsChange,
-          captionsAvailable,
-          effectBackgrounds
-        }
-      ),
-      session.role === "guest" ? /* @__PURE__ */ jsx(
-        ConfirmAction,
+        DropdownMenuTrigger,
         {
-          triggerLabel: labels.leave,
-          title: labels.leaveTitle,
-          description: labels.leaveDescription,
-          confirmLabel: labels.leaveConfirm,
-          pending,
-          onConfirm: onLeave,
-          trigger: /* @__PURE__ */ jsx(
+          render: /* @__PURE__ */ jsx(
             Button,
             {
               type: "button",
-              variant: "destructive",
               size: "icon-lg",
-              disabled: pending,
-              "aria-label": labels.leave,
-              children: /* @__PURE__ */ jsx(PhoneOff, {})
+              variant: "secondary",
+              "aria-label": labels.more
             }
-          )
+          ),
+          children: /* @__PURE__ */ jsx(MoreVertical, {})
         }
-      ) : null
-    ] })
-  ] }) });
+      ),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "center", className: "min-w-44", children: [
+        fullscreenSupported ? /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => void enterFullscreen(), children: [
+          /* @__PURE__ */ jsx(Maximize, {}),
+          labels.fullscreen
+        ] }) : null,
+        pipSupported ? /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onClick: () => {
+              if (pipOpen) onClosePip();
+              else onOpenPip();
+            },
+            children: [
+              /* @__PURE__ */ jsx(PictureInPicture2, {}),
+              pipOpen ? labels.closePip : labels.openPip
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onOpenSettings, children: [
+          /* @__PURE__ */ jsx(Settings, {}),
+          labels.settings
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ControlIcon,
+      {
+        label: unreadChat > 0 ? `${labels.chat} (${unreadChat})` : labels.chat,
+        pressed: chatOpen,
+        badge: unreadChat,
+        onClick: onToggleChat,
+        children: /* @__PURE__ */ jsx(MessageSquare, {})
+      }
+    ),
+    session.role === "moderator" ? /* @__PURE__ */ jsx(
+      ControlIcon,
+      {
+        label: peopleBadge > 0 ? `${labels.people} (${peopleBadge})` : labels.people,
+        pressed: peopleOpen,
+        badge: peopleBadge,
+        onClick: onTogglePeople,
+        children: /* @__PURE__ */ jsx(Users, {})
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      ControlIcon,
+      {
+        label: labels.settings,
+        pressed: settingsOpen,
+        onClick: onOpenSettings,
+        children: /* @__PURE__ */ jsx(Settings, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StudioSettingsDialog,
+      {
+        open: settingsOpen,
+        onOpenChange: onCloseSettings,
+        meeting,
+        reducedMotion,
+        cameraOn,
+        labels,
+        captionPrefs,
+        onCaptionPrefsChange,
+        captionsAvailable,
+        effectBackgrounds
+      }
+    ),
+    session.role === "guest" ? /* @__PURE__ */ jsx(
+      ConfirmAction,
+      {
+        triggerLabel: labels.leave,
+        title: labels.leaveTitle,
+        description: labels.leaveDescription,
+        confirmLabel: labels.leaveConfirm,
+        pending,
+        onConfirm: onLeave,
+        trigger: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "destructive",
+            size: "icon-lg",
+            disabled: pending,
+            "aria-label": labels.leave,
+            children: /* @__PURE__ */ jsx(PhoneOff, {})
+          }
+        )
+      }
+    ) : null
+  ] }) }) });
 }
 function MediaSplit({
   label,
@@ -4318,8 +4314,8 @@ function MediaSplit({
   onSelect,
   children
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ jsx(
+  if (options.length === 0) {
+    return /* @__PURE__ */ jsx(
       ControlIcon,
       {
         label,
@@ -4328,8 +4324,11 @@ function MediaSplit({
         onClick,
         children
       }
-    ),
-    options.length > 0 ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    );
+  }
+  const iconVariant = tone === "danger" ? "destructive" : pressed ? "default" : "secondary";
+  return /* @__PURE__ */ jsxs("div", { className: "bg-secondary inline-flex h-10 items-center rounded-full p-0.5", children: [
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
       /* @__PURE__ */ jsx(
         DropdownMenuTrigger,
         {
@@ -4338,8 +4337,8 @@ function MediaSplit({
             {
               type: "button",
               size: "icon-xs",
-              variant: "secondary",
-              className: "-ml-1",
+              variant: "ghost",
+              className: "text-muted-foreground hover:text-foreground h-9 w-8 rounded-full hover:bg-transparent",
               "aria-label": pickerLabel
             }
           ),
@@ -4357,7 +4356,28 @@ function MediaSplit({
         },
         option.deviceId
       )) })
-    ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(
+        TooltipTrigger,
+        {
+          render: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "icon-lg",
+              variant: iconVariant,
+              className: iconVariant === "secondary" ? "rounded-full bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_10%)] hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_16%)]" : "rounded-full",
+              "aria-label": label,
+              "aria-pressed": pressed,
+              onClick
+            }
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(TooltipContent, { children: label })
+    ] })
   ] });
 }
 var POLL_MS = 2e3;
@@ -5003,10 +5023,11 @@ function StudioRoom({
   ]);
   const verifyGrantTookEffect = useCallback(
     (userId, retried = false) => {
+      if (!userId) return;
       const id = window.setTimeout(() => {
-        const target = meeting.participants().find((row) => row.userId === userId);
-        if (!target || isOnStage(target.stageStatus)) return;
-        if (!retried && target.stageStatus === "ACCEPTED_TO_JOIN_STAGE") {
+        const target = meeting.participants().find((row) => row.userId === userId || row.id === userId);
+        if (target && isOnStage(target.stageStatus)) return;
+        if (!retried) {
           void meeting.setStageAccess(userId, true).then(() => {
             verifyGrantTookEffect(userId, true);
           }).catch(() => {
@@ -5020,6 +5041,12 @@ function StudioRoom({
     },
     [labels.stageGrantNoEffect, meeting]
   );
+  useEffect(
+    () => meeting.subscribeStageGrant((userId) => {
+      verifyGrantTookEffect(userId);
+    }),
+    [meeting, verifyGrantTookEffect]
+  );
   const onSetStage = useCallback(
     async (tile, on) => {
       const userId = tile.userId;
@@ -5344,20 +5371,13 @@ function StudioRoom({
           peopleBadge,
           labels,
           onAdmitAs: (id, as) => {
-            const guest = waitlisted.find((row) => row.id === id);
-            void Promise.resolve(meeting.admitAs(id, as)).then(() => {
-              if (as === "panelist" && guest?.userId) {
-                verifyGrantTookEffect(guest.userId);
-              }
+            void Promise.resolve(meeting.admitAs(id, as)).catch(() => {
+              toast.error(labels.stageError);
             });
           },
           onAdmitAll: (as) => {
-            const waiting = waitlisted;
-            void Promise.resolve(meeting.admitAll(as)).then(() => {
-              if (as !== "panelist") return;
-              for (const guest of waiting) {
-                if (guest.userId) verifyGrantTookEffect(guest.userId);
-              }
+            void Promise.resolve(meeting.admitAll(as)).catch(() => {
+              toast.error(labels.stageError);
             });
           },
           onDeny: (id) => {
@@ -6060,6 +6080,7 @@ function activeSpeakerFrom(payload, fallback) {
 }
 var STAGE_JOIN_RETRY_MS = 1e3;
 var STAGE_JOIN_MAX_ATTEMPTS = 3;
+var STAGE_GRANT_JOIN_MAX_FAILURES = 8;
 function isStageDisabledError(error) {
   if (!error || typeof error !== "object") return false;
   const row = error;
@@ -6132,12 +6153,15 @@ function studioMeetingFromRtk(raw) {
   const chatListeners = /* @__PURE__ */ new Set();
   const participantListeners = /* @__PURE__ */ new Set();
   const stageListeners = /* @__PURE__ */ new Set();
+  const stageGrantListeners = /* @__PURE__ */ new Set();
   const pinListeners = /* @__PURE__ */ new Set();
   const pendingPanelists = /* @__PURE__ */ new Set();
   const chatSend = /* @__PURE__ */ new Map();
   const nameOverrides = /* @__PURE__ */ new Map();
   let joinStageInFlight = null;
   let joinedStageLocally = false;
+  let stageGrantPending = false;
+  let stageGrantJoinFailures = 0;
   let lastMeetingError = null;
   const historyMessages = [];
   let speakerSinkId = null;
@@ -6236,6 +6260,21 @@ function studioMeetingFromRtk(raw) {
   function currentStageStatus() {
     return meeting.self?.stageStatus ?? meeting.stage?.status;
   }
+  function isStageAccepted() {
+    return meeting.self?.stageStatus === "ACCEPTED_TO_JOIN_STAGE" || meeting.stage?.status === "ACCEPTED_TO_JOIN_STAGE";
+  }
+  function clearStageGrantPending() {
+    stageGrantPending = false;
+    stageGrantJoinFailures = 0;
+  }
+  function notifyStageGrant(userId) {
+    if (!userId) return;
+    for (const listener of stageGrantListeners) listener(userId);
+  }
+  function markStageGranted() {
+    stageGrantPending = true;
+    void ensureStageJoined();
+  }
   function resolveConnectionState() {
     const self = meeting.self;
     const roomState = self?.roomState ?? null;
@@ -6327,22 +6366,21 @@ function studioMeetingFromRtk(raw) {
       joinStageInFlight = null;
     }
   }
-  async function autoJoinStage() {
+  async function ensureStageJoined() {
     if (currentStageStatus() === "ON_STAGE") {
-      notifyStage();
+      clearStageGrantPending();
       return;
     }
+    if (!stageGrantPending && !isStageAccepted()) return;
+    stageGrantPending = true;
+    if (stageGrantJoinFailures >= STAGE_GRANT_JOIN_MAX_FAILURES) return;
     try {
       await joinStageWithRetry();
+      if (currentStageStatus() === "ON_STAGE") {
+        clearStageGrantPending();
+      }
     } catch {
-      notifyStage();
-    }
-  }
-  async function ensureStageJoined() {
-    if (currentStageStatus() !== "ACCEPTED_TO_JOIN_STAGE") return;
-    try {
-      await joinStageWithRetry();
-    } catch {
+      stageGrantJoinFailures += 1;
       notifyStage();
     }
   }
@@ -6373,6 +6411,7 @@ function studioMeetingFromRtk(raw) {
     const grantId = takePendingGrantId(joined2);
     if (!grantId) return;
     await meeting.stage?.grantAccess?.([grantId]);
+    notifyStageGrant(joined2?.userId || grantId);
     notifyStage();
   }
   async function grantPendingIfJoined(participantId, userId) {
@@ -6381,6 +6420,7 @@ function studioMeetingFromRtk(raw) {
     if (!grantId) return;
     pendingPanelists.delete(participantId);
     await meeting.stage?.grantAccess?.([grantId]);
+    notifyStageGrant(already?.userId || grantId);
     notifyStage();
   }
   listen(meeting.self, "videoUpdate", rebindMedia);
@@ -6430,15 +6470,15 @@ function studioMeetingFromRtk(raw) {
   listen(meeting.stage, "stageAccessRequestUpdate", notifyStage);
   listen(meeting.stage, "newStageRequest", notifyStage);
   listen(meeting.stage, "stageRequestApproved", () => {
-    void autoJoinStage();
+    markStageGranted();
+  });
+  listen(meeting.stage, "acceptPresentRequests", () => {
+    markStageGranted();
   });
   listen(meeting.stage, "stageRequestRejected", notifyStage);
-  listen(meeting.stage, "stageStatusUpdate", (status) => {
-    if (status === "ACCEPTED_TO_JOIN_STAGE") {
-      void autoJoinStage();
-      return;
-    }
-    if (status === "ON_STAGE") {
+  listen(meeting.stage, "stageStatusUpdate", () => {
+    if (currentStageStatus() === "ON_STAGE") {
+      clearStageGrantPending();
       if (joinedStageLocally) {
         joinedStageLocally = false;
         notifyStage();
@@ -6449,12 +6489,17 @@ function studioMeetingFromRtk(raw) {
       });
       return;
     }
+    if (isStageAccepted()) {
+      markStageGranted();
+      return;
+    }
     notifyStage();
   });
   return {
     async join() {
       await meeting.join?.();
       await joinStageIfAllowed();
+      await ensureStageJoined();
       await applyCurrentVideoEffects();
     },
     async leave() {
@@ -6550,7 +6595,12 @@ function studioMeetingFromRtk(raw) {
         return;
       }
       if (on) await meeting.stage?.grantAccess?.([userId]);
-      else await meeting.stage?.kick?.([userId]);
+      else {
+        await meeting.stage?.kick?.([userId]);
+        if (meeting.self?.userId === userId) {
+          clearStageGrantPending();
+        }
+      }
       notifyStage();
     },
     async denyStageAccess(userId) {
@@ -6581,6 +6631,7 @@ function studioMeetingFromRtk(raw) {
     async leaveStage() {
       await meeting.stage?.leave?.();
       joinedStageLocally = false;
+      clearStageGrantPending();
       notifyStage();
     },
     stageStatus() {
@@ -6612,6 +6663,12 @@ function studioMeetingFromRtk(raw) {
         stageListeners.delete(cb);
       };
     },
+    subscribeStageGrant(cb) {
+      stageGrantListeners.add(cb);
+      return () => {
+        stageGrantListeners.delete(cb);
+      };
+    },
     canManageStage() {
       return meeting.self?.permissions?.acceptStageRequests === true;
     },