@livo-tv/sdk 1.3.3 → 1.5.0

package/dist/studio/index.js

@@ -518,52 +518,38 @@ function canTakeOffAir(tiles, participantId, onAir) {
     (tile) => tile.id !== participantId && isOnStage(tile.stageStatus)
   );
 }
+function pipSpotlightFrom(tile, kind) {
+  return {
+    participantId: tile.id,
+    name: tile.name,
+    kind,
+    picture: tile.picture
+  };
+}
 function resolveStudioPipSpotlight(tiles, activeSpeakerId) {
   const visible = tiles.filter((tile) => isOnStage(tile.stageStatus));
   const pinned = visible.find((tile) => tile.pinned === true);
   if (pinned) {
-    return {
-      participantId: pinned.id,
-      name: pinned.name,
-      kind: pinned.screenShareEnabled ? "screen" : pinned.videoEnabled ? "camera" : "idle",
-      picture: pinned.picture
-    };
+    return pipSpotlightFrom(
+      pinned,
+      pinned.screenShareEnabled ? "screen" : 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 {
-      participantId: sharing.id,
-      name: sharing.name,
-      kind: "screen",
-      picture: sharing.picture
-    };
-  }
-  const speaker = activeSpeakerId ? visible.find((tile) => tile.id === activeSpeakerId && tile.videoEnabled) : void 0;
-  if (speaker) {
-    return {
-      participantId: speaker.id,
-      name: speaker.name,
-      kind: "camera",
-      picture: speaker.picture
-    };
+    return pipSpotlightFrom(sharing, "screen");
   }
   const remoteCam = visible.find((tile) => !tile.isSelf && tile.videoEnabled);
   if (remoteCam) {
-    return {
-      participantId: remoteCam.id,
-      name: remoteCam.name,
-      kind: "camera",
-      picture: remoteCam.picture
-    };
+    return pipSpotlightFrom(remoteCam, "camera");
   }
   const self = visible.find((tile) => tile.isSelf);
   if (!self) return null;
-  return {
-    participantId: self.id,
-    name: self.name,
-    kind: self.videoEnabled ? "camera" : "idle",
-    picture: self.picture
-  };
+  return pipSpotlightFrom(self, self.videoEnabled ? "camera" : "idle");
 }
 function resolveStudioPipSelfView(tiles, spotlight) {
   const self = tiles.find((tile) => tile.isSelf);
@@ -682,6 +668,9 @@ function screenShareBlock(captureSupported, permission) {
   if (permission === "NOT_ALLOWED") return "permission";
   return null;
 }
+function showScreenShareControl(block) {
+  return block !== "permission";
+}
 
 // src/studio/lib/parse.ts
 function isRecord(value) {
@@ -1250,15 +1239,15 @@ function AudioWaveform({
     if (!canvas || !track || reducedMotion) return;
     const AudioCtx = window.AudioContext || window.webkitAudioContext;
     if (!AudioCtx) return;
-    const ctx2 = new AudioCtx();
-    const source = ctx2.createMediaStreamSource(new MediaStream([track]));
-    const analyser = ctx2.createAnalyser();
+    const ctx3 = new AudioCtx();
+    const source = ctx3.createMediaStreamSource(new MediaStream([track]));
+    const analyser = ctx3.createAnalyser();
     analyser.fftSize = 64;
     source.connect(analyser);
     const data = new Uint8Array(analyser.frequencyBinCount);
     const graphic = canvas.getContext("2d");
     const surface = canvas;
-    let frame = 0;
+    let frame2 = 0;
     function draw() {
       if (!graphic) return;
       analyser.getByteFrequencyData(data);
@@ -1276,12 +1265,12 @@ function AudioWaveform({
           barHeight
         );
       }
-      frame = requestAnimationFrame(draw);
+      frame2 = requestAnimationFrame(draw);
     }
-    frame = requestAnimationFrame(draw);
+    frame2 = requestAnimationFrame(draw);
     return () => {
-      cancelAnimationFrame(frame);
-      void ctx2.close();
+      cancelAnimationFrame(frame2);
+      void ctx3.close();
     };
   }, [track, reducedMotion]);
   if (reducedMotion) {
@@ -1464,6 +1453,19 @@ function DialogHeader({ className, ...props }) {
     }
   );
 }
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function DialogTitle({
   className,
   ...props
@@ -1567,10 +1569,10 @@ async function playSpeakerTest(deviceId) {
   if (!AudioCtx) {
     throw new Error("AudioContext unavailable");
   }
-  const ctx2 = new AudioCtx();
-  void ctx2.resume();
-  const oscillator = ctx2.createOscillator();
-  const gain = ctx2.createGain();
+  const ctx3 = new AudioCtx();
+  void ctx3.resume();
+  const oscillator = ctx3.createOscillator();
+  const gain = ctx3.createGain();
   oscillator.type = "sine";
   oscillator.frequency.value = TEST_HZ;
   gain.gain.value = 0.18;
@@ -1580,7 +1582,7 @@ async function playSpeakerTest(deviceId) {
     const probe = document.createElement("audio");
     const canRoute = Boolean(deviceId) && typeof probe.setSinkId === "function";
     if (canRoute && deviceId) {
-      const destination = ctx2.createMediaStreamDestination();
+      const destination = ctx3.createMediaStreamDestination();
       gain.connect(destination);
       audio = probe;
       audio.autoplay = true;
@@ -1591,13 +1593,13 @@ async function playSpeakerTest(deviceId) {
         await audio.play();
       } catch {
         gain.disconnect();
-        gain.connect(ctx2.destination);
+        gain.connect(ctx3.destination);
         audio.srcObject = null;
         audio.remove();
         audio = null;
       }
     } else {
-      gain.connect(ctx2.destination);
+      gain.connect(ctx3.destination);
     }
     oscillator.start();
     await new Promise((resolve) => {
@@ -1609,7 +1611,7 @@ async function playSpeakerTest(deviceId) {
       audio.srcObject = null;
       audio.remove();
     }
-    await ctx2.close();
+    await ctx3.close();
   }
 }
 function StudioDeviceSelectGroup({
@@ -2023,6 +2025,19 @@ var badgeVariants = cva(
 function Badge({ className, variant, ...props }) {
   return /* @__PURE__ */ jsx("span", { className: cn(badgeVariants({ variant }), className), ...props });
 }
+
+// src/studio/lib/studio-video-style.ts
+var STUDIO_VIDEO_MEDIA_STYLE = `
+.livo-studio-tile-video::-webkit-media-controls-start-playback-button,
+.livo-studio-inline-video::-webkit-media-controls-start-playback-button {
+	display: none !important;
+	-webkit-appearance: none;
+}
+.livo-studio-tile-video::-webkit-media-controls,
+.livo-studio-inline-video::-webkit-media-controls {
+	display: none !important;
+}
+`;
 function StudioPipPanel({
   meeting,
   labels,
@@ -2077,7 +2092,7 @@ function StudioPipPanel({
                 /* @__PURE__ */ jsx(StudioLiveBadge, { children: labels.live }),
                 elapsed ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground tabular-nums text-xs", children: elapsed }) : null
               ] }) : null,
-              selfView ? /* @__PURE__ */ jsx(
+              selfView && meeting.localVideoTrack() ? /* @__PURE__ */ jsx(
                 "div",
                 {
                   "data-testid": "pip-self-view",
@@ -2134,7 +2149,8 @@ function PipSpotlight({
   spotlight,
   cameraOffLabel
 }) {
-  if (!spotlight || spotlight.kind === "idle") {
+  const track = spotlight && spotlight.kind !== "idle" ? spotlight.kind === "screen" ? meeting.participantScreenTrack(spotlight.participantId) : meeting.participantVideoTrack(spotlight.participantId) : null;
+  if (!spotlight || spotlight.kind === "idle" || !track) {
     return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-2", children: [
       spotlight?.picture ? /* @__PURE__ */ jsx(
         "img",
@@ -2147,7 +2163,6 @@ function PipSpotlight({
       /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: spotlight?.name ?? cameraOffLabel })
     ] });
   }
-  const track = spotlight.kind === "screen" ? meeting.participantScreenTrack(spotlight.participantId) : meeting.participantVideoTrack(spotlight.participantId);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       PipTrackVideo,
@@ -2166,11 +2181,7 @@ function PipTrackVideo({
   const ref = useRef(null);
   useEffect(() => {
     const el = ref.current;
-    if (!el) return;
-    if (!track) {
-      el.srcObject = null;
-      return;
-    }
+    if (!el || !track) return;
     el.setAttribute("webkit-playsinline", "");
     el.srcObject = new MediaStream([track]);
     void el.play().catch(() => void 0);
@@ -2178,19 +2189,24 @@ function PipTrackVideo({
       el.srcObject = null;
     };
   }, [track]);
-  return /* @__PURE__ */ jsx(
-    "video",
-    {
-      ref,
-      autoPlay: true,
-      playsInline: true,
-      muted: true,
-      className: cn(
-        "livo-studio-inline-video absolute inset-0 size-full",
-        fit === "contain" ? "object-contain" : "object-cover"
-      )
-    }
-  );
+  if (!track) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: STUDIO_VIDEO_MEDIA_STYLE }),
+    /* @__PURE__ */ jsx(
+      "video",
+      {
+        ref,
+        autoPlay: true,
+        playsInline: true,
+        muted: true,
+        disableRemotePlayback: true,
+        className: cn(
+          "livo-studio-inline-video absolute inset-0 size-full",
+          fit === "contain" ? "object-contain" : "object-cover"
+        )
+      }
+    )
+  ] });
 }
 function pipScreenControls({
   labels,
@@ -2392,7 +2408,7 @@ function StudioChatPanel({
   isModerator: isModerator2,
   labels
 }) {
-  const [tick, setTick] = useState(0);
+  const [tick2, setTick] = useState(0);
   const [draft, setDraft] = useState("");
   const [editingId, setEditingId] = useState(null);
   const listRef = useRef(null);
@@ -2402,9 +2418,9 @@ function StudioChatPanel({
   );
   const messages = useMemo(
     () => meeting.chatMessages().filter((row) => !row.targetUserIds?.length),
-    [meeting, tick]
+    [meeting, tick2]
   );
-  const pinned = useMemo(() => meeting.pinnedChatMessages(), [meeting, tick]);
+  const pinned = useMemo(() => meeting.pinnedChatMessages(), [meeting, tick2]);
   const limit = meeting.chatMaxTextLimit();
   const pictures = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
@@ -2904,6 +2920,171 @@ function StudioSidePanel({
     ] })
   ] });
 }
+
+// src/studio/lib/audio-levels.ts
+var LEVEL_SENSITIVITY = 4;
+var LEVEL_ATTACK = 0.55;
+var LEVEL_DECAY = 0.12;
+var SPEAKING_ON = 0.12;
+var SPEAKING_OFF = 0.06;
+var SPEAKING_HOLD_MS = 180;
+var tracks = /* @__PURE__ */ new Map();
+var ctx2 = null;
+var frame = 0;
+var tickRunning = false;
+function audioContextCtor2() {
+  if (typeof window === "undefined") return null;
+  return window.AudioContext || window.webkitAudioContext || null;
+}
+function ensureContext2() {
+  const AudioCtx = audioContextCtor2();
+  if (!AudioCtx) return null;
+  if (!ctx2 || ctx2.state === "closed") {
+    ctx2 = new AudioCtx();
+  }
+  return ctx2;
+}
+function rmsFromTimeDomain(data) {
+  if (data.length === 0) return 0;
+  let sum = 0;
+  for (let i = 0; i < data.length; i += 1) {
+    const centered = ((data[i] ?? 128) - 128) / 128;
+    sum += centered * centered;
+  }
+  return Math.sqrt(sum / data.length);
+}
+function normalizeAudioLevel(rms) {
+  return Math.min(1, Math.max(0, rms * LEVEL_SENSITIVITY));
+}
+function smoothAudioLevel(previous, raw) {
+  const factor = raw > previous ? LEVEL_ATTACK : LEVEL_DECAY;
+  return previous + (raw - previous) * factor;
+}
+function nextSpeakingGate(gate, level, now) {
+  if (!gate.speaking) {
+    if (level >= SPEAKING_ON) {
+      return { speaking: true, quietSince: null };
+    }
+    return { speaking: false, quietSince: null };
+  }
+  if (level >= SPEAKING_OFF) {
+    return { speaking: true, quietSince: null };
+  }
+  const quietSince = gate.quietSince ?? now;
+  if (now - quietSince >= SPEAKING_HOLD_MS) {
+    return { speaking: false, quietSince: null };
+  }
+  return { speaking: true, quietSince };
+}
+function tick() {
+  for (const entry of tracks.values()) {
+    entry.analyser.getByteTimeDomainData(entry.data);
+    const raw = normalizeAudioLevel(rmsFromTimeDomain(entry.data));
+    entry.smoothed = smoothAudioLevel(entry.smoothed, raw);
+    for (const cb of entry.listeners) {
+      cb(entry.smoothed);
+    }
+  }
+  if (tracks.size > 0) {
+    frame = requestAnimationFrame(tick);
+    return;
+  }
+  tickRunning = false;
+  frame = 0;
+}
+function startTick() {
+  if (tickRunning) return;
+  tickRunning = true;
+  frame = requestAnimationFrame(tick);
+}
+function stopTickIfIdle() {
+  if (tracks.size > 0 || !frame) return;
+  cancelAnimationFrame(frame);
+  tickRunning = false;
+  frame = 0;
+}
+function subscribeStudioAudioLevel(track, cb) {
+  const context = ensureContext2();
+  if (!context) return () => void 0;
+  void context.resume();
+  const id = track.id;
+  let entry = tracks.get(id);
+  if (!entry) {
+    const source = context.createMediaStreamSource(new MediaStream([track]));
+    const analyser = context.createAnalyser();
+    analyser.fftSize = 512;
+    analyser.smoothingTimeConstant = 0;
+    source.connect(analyser);
+    entry = {
+      source,
+      analyser,
+      data: new Uint8Array(analyser.fftSize),
+      refs: 0,
+      smoothed: 0,
+      listeners: /* @__PURE__ */ new Set()
+    };
+    tracks.set(id, entry);
+  }
+  entry.refs += 1;
+  entry.listeners.add(cb);
+  startTick();
+  return () => {
+    const current = tracks.get(id);
+    if (!current) return;
+    current.listeners.delete(cb);
+    current.refs -= 1;
+    if (current.refs <= 0) {
+      current.source.disconnect();
+      current.analyser.disconnect();
+      tracks.delete(id);
+    }
+    stopTickIfIdle();
+  };
+}
+
+// src/studio/hooks/use-speaking-glow.ts
+function clearSpeakingGlow(el) {
+  el.style.removeProperty("--livo-speaking-level");
+  el.removeAttribute("data-speaking");
+}
+function useSpeakingGlow({
+  track,
+  enabled,
+  reducedMotion
+}) {
+  const [el, setEl] = useState(null);
+  const gateRef = useRef({ speaking: false, quietSince: null });
+  const setRef = useCallback((node) => {
+    setEl(node);
+  }, []);
+  useEffect(() => {
+    if (!el || !enabled || !track) {
+      if (el) clearSpeakingGlow(el);
+      gateRef.current = { speaking: false, quietSince: null };
+      return;
+    }
+    const unsubscribe = subscribeStudioAudioLevel(track, (level) => {
+      const node = el;
+      gateRef.current = nextSpeakingGate(gateRef.current, level, Date.now());
+      if (gateRef.current.speaking) {
+        node.dataset.speaking = "true";
+        if (!reducedMotion) {
+          node.style.setProperty("--livo-speaking-level", String(level));
+        } else {
+          node.style.removeProperty("--livo-speaking-level");
+        }
+        return;
+      }
+      clearSpeakingGlow(node);
+    });
+    return () => {
+      unsubscribe();
+      clearSpeakingGlow(el);
+      gateRef.current = { speaking: false, quietSince: null };
+    };
+  }, [el, enabled, reducedMotion, track]);
+  return setRef;
+}
 function DropdownMenu({ ...props }) {
   return /* @__PURE__ */ jsx(Menu.Root, { "data-slot": "dropdown-menu", ...props });
 }
@@ -3052,32 +3233,30 @@ function StudioTile({
   const onStage = isOnStage(tile.stageStatus);
   const [confirm, setConfirm] = useState(null);
   const showMenu = (canModerate || canManageStage) && !tile.isSelf;
+  const hasVideoTrack = tileHasVideoTrack(meeting, tile);
+  const glowRef = useSpeakingGlow({
+    track: tile.kind === "screen" || !tile.audioEnabled ? null : meeting.participantAudioTrack(tile.id),
+    enabled: onStage,
+    reducedMotion
+  });
   return /* @__PURE__ */ jsxs(
     "article",
     {
+      ref: glowRef,
       "aria-label": tile.name,
       className: cn(
-        "bg-muted relative overflow-hidden rounded-xl",
+        "livo-studio-tile bg-muted relative overflow-hidden rounded-xl",
         compact ? "aspect-video w-40 shrink-0 md:w-full" : tile.kind === "screen" ? "min-h-0 flex-1 md:min-h-48" : fill ? "size-full min-h-0 md:aspect-video md:h-auto" : "aspect-video"
       ),
       children: [
-        tile.kind === "idle" ? /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-3", children: [
-          tile.picture ? /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: tile.picture,
-              alt: "",
-              className: "size-16 rounded-full object-cover"
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: "bg-background flex size-16 items-center justify-center rounded-full text-xl", children: tile.name.slice(0, 1).toUpperCase() }),
-          /* @__PURE__ */ jsx(
-            AudioWaveform,
-            {
-              track: tile.isSelf ? meeting.localAudioTrack() : null,
-              reducedMotion
-            }
-          )
-        ] }) : /* @__PURE__ */ jsx(
+        tile.kind === "idle" || !hasVideoTrack ? /* @__PURE__ */ jsx(
+          IdlePersonTile,
+          {
+            tile,
+            meeting,
+            reducedMotion
+          }
+        ) : /* @__PURE__ */ jsx(
           StudioTileVideo,
           {
             meeting,
@@ -3087,6 +3266,13 @@ function StudioTile({
             contain: tile.kind === "screen"
           }
         ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "livo-studio-tile-glow pointer-events-none absolute inset-0 z-20 rounded-xl"
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-0 bottom-0 z-10 flex items-end justify-between gap-2 bg-linear-to-t from-black/70 to-transparent p-2", children: [
           /* @__PURE__ */ jsxs("p", { className: "min-w-0 truncate text-xs font-medium text-white", children: [
             tile.name,
@@ -3169,6 +3355,37 @@ function TileStatusIcons({
     tile.chatCanSend === false ? /* @__PURE__ */ jsx(StatusIcon, { label: labels.muteChat, children: /* @__PURE__ */ jsx(MessageSquareOff, {}) }) : null
   ] });
 }
+function tileHasVideoTrack(meeting, tile) {
+  if (tile.kind === "screen") {
+    return meeting.participantScreenTrack(tile.id) != null;
+  }
+  if (tile.kind === "idle") return false;
+  if (tile.isSelf) return meeting.localVideoTrack() != null;
+  return meeting.participantVideoTrack(tile.id) != null;
+}
+function IdlePersonTile({
+  tile,
+  meeting,
+  reducedMotion
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-3", children: [
+    tile.picture ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: tile.picture,
+        alt: "",
+        className: "size-16 rounded-full object-cover"
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "bg-background flex size-16 items-center justify-center rounded-full text-xl", children: tile.name.slice(0, 1).toUpperCase() }),
+    /* @__PURE__ */ jsx(
+      AudioWaveform,
+      {
+        track: tile.isSelf ? meeting.localAudioTrack() : null,
+        reducedMotion
+      }
+    )
+  ] });
+}
 function StatusIcon({
   label,
   children
@@ -3192,23 +3409,27 @@ function StudioTileVideo({
     meeting.attachVideo(participantId, el, kind);
     return () => meeting.attachVideo(participantId, null, kind);
   }, [kind, meeting, participantId]);
-  return /* @__PURE__ */ jsx(
-    "video",
-    {
-      ref,
-      autoPlay: true,
-      playsInline: true,
-      muted: true,
-      disablePictureInPicture: true,
-      controlsList: "nodownload noplaybackrate noremoteplayback",
-      className: cn(
-        "livo-studio-tile-video absolute inset-0 size-full",
-        "pointer-events-none",
-        contain ? "object-contain" : "object-cover",
-        mirror && "-scale-x-100"
-      )
-    }
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: STUDIO_VIDEO_MEDIA_STYLE }),
+    /* @__PURE__ */ jsx(
+      "video",
+      {
+        ref,
+        autoPlay: true,
+        playsInline: true,
+        muted: true,
+        disablePictureInPicture: true,
+        disableRemotePlayback: true,
+        controlsList: "nodownload noplaybackrate noremoteplayback",
+        className: cn(
+          "livo-studio-tile-video absolute inset-0 size-full",
+          "pointer-events-none",
+          contain ? "object-contain" : "object-cover",
+          mirror && "-scale-x-100"
+        )
+      }
+    )
+  ] });
 }
 function StudioStage({
   participants,
@@ -3229,9 +3450,7 @@ function StudioStage({
   onOpenPeople
 }) {
   const displayTiles = expandStudioTiles(participants);
-  const stage = studioStageLayout(displayTiles, {
-    activeSpeakerId: meeting.activeSpeakerId()
-  });
+  const stage = studioStageLayout(displayTiles);
   const sharing = stage.spotlight.length > 0;
   const overflowLabel = labels.stageOverflow.replace(
     "{count}",
@@ -3302,6 +3521,32 @@ function StudioStage({
     }
   );
 }
+function StudioDownloadAppDialog({
+  open,
+  onOpenChange,
+  downloadUrl,
+  labels
+}) {
+  const href = downloadUrl?.trim() ?? "";
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: labels.screenDownloadAppTitle }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: labels.screenUnsupportedDevice })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: () => onOpenChange(false),
+          children: labels.screenDownloadAppDismiss
+        }
+      ),
+      href ? /* @__PURE__ */ jsx(Button, { render: /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noreferrer" }), children: labels.screenDownloadAppAction }) : /* @__PURE__ */ jsx(Button, { type: "button", disabled: true, children: labels.screenDownloadAppAction })
+    ] })
+  ] }) });
+}
 function StudioToolbar({
   session,
   meeting,
@@ -3556,7 +3801,8 @@ function StudioRoom({
   windowGate,
   initialCameraOn = true,
   initialMuted = false,
-  initialDevices
+  initialDevices,
+  appDownloadUrl
 }) {
   const [cameraOn, setCameraOn] = useState(initialCameraOn);
   const [screenOn, setScreenOn] = useState(false);
@@ -3564,7 +3810,7 @@ function StudioRoom({
   const [screenRequestPending, setScreenRequestPending] = useState(false);
   const [pending, setPending] = useState(false);
   const [publishing, setPublishing] = useState(false);
-  const [tick, setTick] = useState(0);
+  const [tick2, setTick] = useState(0);
   const [leaveState, setLeaveState] = useState(null);
   const [sideTab, setSideTab] = useState(null);
   const [settingsOpen, setSettingsOpen] = useState(false);
@@ -3577,6 +3823,7 @@ function StudioRoom({
   );
   const [egressError, setEgressError] = useState(null);
   const [shareGrant, setShareGrant] = useState("idle");
+  const [downloadAppOpen, setDownloadAppOpen] = useState(false);
   const [connectTimedOut, setConnectTimedOut] = useState(false);
   const [screenPermission, setScreenPermission] = useState(
     () => meeting.screenSharePermission()
@@ -3618,6 +3865,11 @@ function StudioRoom({
   const roomState = leaveState ?? meeting.roomState();
   const sessionOver = isStudioSessionOver(session.stream.status, roomState);
   const rejected = isStudioRejected(roomState);
+  const connectionState = useMemo(
+    () => meeting.connectionState(),
+    [meeting, tick2]
+  );
+  const guestConnectFailed = session.role === "guest" && (connectionState === "failed" || connectionState === "connecting" && connectTimedOut);
   useBeforeUnload(active && !sessionOver);
   useWakeLock(active && !sessionOver);
   useEffect(() => {
@@ -3781,12 +4033,13 @@ function StudioRoom({
     void meeting.setScreenShareEnabled(false);
   }, [guestOffStage, meeting]);
   useEffect(() => {
-    if (!sessionOver && !rejected) return;
+    if (!sessionOver && !rejected && !guestConnectFailed) return;
+    pip.close();
     setShareGrant("idle");
     void meeting.setAudioEnabled(false);
     void meeting.setVideoEnabled(false);
     void meeting.setScreenShareEnabled(false);
-  }, [meeting, rejected, sessionOver]);
+  }, [guestConnectFailed, meeting, pip.close, rejected, sessionOver]);
   useEffect(() => {
     return meeting.subscribeMedia(() => {
       const self2 = meeting.participants().find((row) => row.isSelf);
@@ -3808,7 +4061,7 @@ function StudioRoom({
     });
   }, [meeting]);
   const sawParticipants = useRef(false);
-  const participants = useMemo(() => meeting.participants(), [meeting, tick]);
+  const participants = useMemo(() => meeting.participants(), [meeting, tick2]);
   useEffect(() => {
     const other = duplicateSelfParticipant(participants);
     if (!other) return;
@@ -3823,29 +4076,25 @@ function StudioRoom({
     () => participants.filter((row) => isOnStage(row.stageStatus)),
     [participants]
   );
-  const waitlisted = useMemo(() => meeting.waitlisted(), [meeting, tick]);
-  const connectionState = useMemo(
-    () => meeting.connectionState(),
-    [meeting, tick]
-  );
+  const waitlisted = useMemo(() => meeting.waitlisted(), [meeting, tick2]);
   const lastMeetingError = useMemo(
     () => meeting.lastMeetingError(),
-    [meeting, tick]
+    [meeting, tick2]
   );
   const canManageStage = meeting.canManageStage();
   const stageEnabled = meeting.stageEnabled();
   const stageRequests = useMemo(
     () => canManageStage ? meeting.stageRequests() : [],
-    [canManageStage, meeting, tick]
+    [canManageStage, meeting, tick2]
   );
-  const chatMessages = useMemo(() => meeting.chatMessages(), [meeting, tick]);
+  const chatMessages = useMemo(() => meeting.chatMessages(), [meeting, tick2]);
   const inWaitingRoom = meeting.inWaitingRoom();
   const screenAvailable = canStartScreenShare(participants);
   const durableScreenBlock = screenShareBlock(
     captureSupported,
     screenPermission
   );
-  const showScreenControl = durableScreenBlock === null;
+  const showScreenControl = showScreenShareControl(durableScreenBlock);
   const canGoLive = session.role === "moderator" && canPublish(session.stream.status);
   const showPublishButton = session.role === "moderator" && !onAir && session.stream.status !== "ended" && session.stream.status !== "error";
   const self = participants.find((row) => row.isSelf);
@@ -3941,17 +4190,10 @@ function StudioRoom({
   }, [connectionState, session.role]);
   useEffect(() => {
     if (inWaitingRoom || screenNoticePrimed.current) return;
-    if (!durableScreenBlock) return;
+    if (durableScreenBlock !== "permission") return;
     screenNoticePrimed.current = true;
-    toast.message(
-      durableScreenBlock === "device" ? labels.screenUnsupportedDevice : labels.screenNotAllowed
-    );
-  }, [
-    durableScreenBlock,
-    inWaitingRoom,
-    labels.screenNotAllowed,
-    labels.screenUnsupportedDevice
-  ]);
+    toast.message(labels.screenNotAllowed);
+  }, [durableScreenBlock, inWaitingRoom, labels.screenNotAllowed]);
   useEffect(() => {
     return meeting.subscribeBroadcast((message) => {
       if (message.type === "host-media") {
@@ -4060,6 +4302,10 @@ function StudioRoom({
     setCameraOn((current) => !current);
   }, []);
   const onToggleScreen = useCallback(() => {
+    if (durableScreenBlock === "device") {
+      setDownloadAppOpen(true);
+      return;
+    }
     if (!canShareFreely || screenRequestPending) return;
     if (!screenOn && !canStartScreenShare(meeting.participants())) {
       toast.message(labels.screenBusy);
@@ -4069,12 +4315,17 @@ function StudioRoom({
     setScreenOn((current) => !current);
   }, [
     canShareFreely,
+    durableScreenBlock,
     labels.screenBusy,
     meeting,
     screenOn,
     screenRequestPending
   ]);
   const onAskToShare = useCallback(async () => {
+    if (durableScreenBlock === "device") {
+      setDownloadAppOpen(true);
+      return;
+    }
     const local = meeting.participants().find((row) => row.isSelf);
     if (!local) return;
     try {
@@ -4091,7 +4342,12 @@ function StudioRoom({
     } catch {
       toast.error(labels.shareRequestError);
     }
-  }, [labels.shareRequestError, labels.shareRequestSent, meeting]);
+  }, [
+    durableScreenBlock,
+    labels.shareRequestError,
+    labels.shareRequestSent,
+    meeting
+  ]);
   const verifyGrantTookEffect = useCallback(
     (userId, retried = false) => {
       const id = window.setTimeout(() => {
@@ -4254,7 +4510,6 @@ function StudioRoom({
       }
     ) });
   }
-  const guestConnectFailed = session.role === "guest" && (connectionState === "failed" || connectionState === "connecting" && connectTimedOut);
   if (guestConnectFailed) {
     const detail = [meeting.roomState(), lastMeetingError].filter((value) => Boolean(value)).join(" \u2014 ");
     return /* @__PURE__ */ jsx("div", { className: "flex h-dvh flex-col items-center justify-center p-6", children: /* @__PURE__ */ jsx(
@@ -4588,7 +4843,21 @@ function StudioRoom({
         }
       ),
       pip.pipWindow.document.body
-    ) : null
+    ) : null,
+    /* @__PURE__ */ jsx(
+      StudioDownloadAppDialog,
+      {
+        open: downloadAppOpen,
+        onOpenChange: setDownloadAppOpen,
+        downloadUrl: appDownloadUrl,
+        labels: {
+          screenDownloadAppTitle: labels.screenDownloadAppTitle,
+          screenUnsupportedDevice: labels.screenUnsupportedDevice,
+          screenDownloadAppAction: labels.screenDownloadAppAction,
+          screenDownloadAppDismiss: labels.screenDownloadAppDismiss
+        }
+      }
+    )
   ] });
 }
 function isOverconstrained(error) {
@@ -5757,6 +6026,9 @@ function studioMeetingFromRtk(raw) {
     localVideoTrack() {
       return meeting.self?.videoTrack ?? null;
     },
+    participantAudioTrack(participantId) {
+      return participantFor(participantId)?.audioTrack ?? null;
+    },
     participantVideoTrack(participantId) {
       return participantFor(participantId)?.videoTrack ?? null;
     },
@@ -6128,7 +6400,8 @@ function LivoHostStudio({
   embed = false,
   chrome,
   playerOrigin,
-  theme
+  theme,
+  appDownloadUrl
 }) {
   const reducedMotion = usePrefersReducedMotion();
   const [session, setSession] = useState(null);
@@ -6208,7 +6481,8 @@ function LivoHostStudio({
       labels,
       embed,
       chrome,
-      playerOrigin
+      playerOrigin,
+      appDownloadUrl
     }
   );
 }
@@ -6221,7 +6495,8 @@ function LivoGuestStudio({
   lobbyLabels,
   embed = false,
   playerOrigin,
-  theme
+  theme,
+  appDownloadUrl
 }) {
   const reducedMotion = usePrefersReducedMotion();
   const [session, setSession] = useState(null);
@@ -6407,7 +6682,8 @@ function LivoGuestStudio({
       playerOrigin,
       initialCameraOn: cameraOn,
       initialMuted: muted,
-      initialDevices: deviceSelection
+      initialDevices: deviceSelection,
+      appDownloadUrl
     }
   );
 }
@@ -6512,6 +6788,9 @@ function studioRoomLabels(t) {
     pipTitle: t("pipTitle"),
     pipError: t("pipError"),
     screenUnsupportedDevice: t("screenUnsupportedDevice"),
+    screenDownloadAppTitle: t("screenDownloadAppTitle"),
+    screenDownloadAppAction: t("screenDownloadAppAction"),
+    screenDownloadAppDismiss: t("screenDownloadAppDismiss"),
     screenNotAllowed: t("screenNotAllowed"),
     askToShare: t("askToShare"),
     shareRequested: t("shareRequested"),