@livo-tv/sdk 1.4.0 → 1.5.0

package/dist/studio/index.cjs

@@ -542,52 +542,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);
@@ -706,6 +692,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) {
@@ -1488,6 +1477,19 @@ function DialogHeader({ className, ...props }) {
     }
   );
 }
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.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
@@ -2047,6 +2049,19 @@ var badgeVariants = classVarianceAuthority.cva(
 function Badge({ className, variant, ...props }) {
   return /* @__PURE__ */ jsxRuntime.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,
@@ -2101,7 +2116,7 @@ function StudioPipPanel({
                 /* @__PURE__ */ jsxRuntime.jsx(StudioLiveBadge, { children: labels.live }),
                 elapsed ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground tabular-nums text-xs", children: elapsed }) : null
               ] }) : null,
-              selfView ? /* @__PURE__ */ jsxRuntime.jsx(
+              selfView && meeting.localVideoTrack() ? /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   "data-testid": "pip-self-view",
@@ -2158,7 +2173,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__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-2", children: [
       spotlight?.picture ? /* @__PURE__ */ jsxRuntime.jsx(
         "img",
@@ -2171,7 +2187,6 @@ function PipSpotlight({
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       PipTrackVideo,
@@ -2190,11 +2205,7 @@ function PipTrackVideo({
   const ref = react.useRef(null);
   react.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);
@@ -2202,19 +2213,24 @@ function PipTrackVideo({
       el.srcObject = null;
     };
   }, [track]);
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: STUDIO_VIDEO_MEDIA_STYLE }),
+    /* @__PURE__ */ jsxRuntime.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,
@@ -3241,6 +3257,7 @@ function StudioTile({
   const onStage = isOnStage(tile.stageStatus);
   const [confirm, setConfirm] = react.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,
@@ -3256,23 +3273,14 @@ function StudioTile({
         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__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-3", children: [
-          tile.picture ? /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: tile.picture,
-              alt: "",
-              className: "size-16 rounded-full object-cover"
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-background flex size-16 items-center justify-center rounded-full text-xl", children: tile.name.slice(0, 1).toUpperCase() }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            AudioWaveform,
-            {
-              track: tile.isSelf ? meeting.localAudioTrack() : null,
-              reducedMotion
-            }
-          )
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+        tile.kind === "idle" || !hasVideoTrack ? /* @__PURE__ */ jsxRuntime.jsx(
+          IdlePersonTile,
+          {
+            tile,
+            meeting,
+            reducedMotion
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
           StudioTileVideo,
           {
             meeting,
@@ -3371,6 +3379,37 @@ function TileStatusIcons({
     tile.chatCanSend === false ? /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { label: labels.muteChat, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-3", children: [
+    tile.picture ? /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: tile.picture,
+        alt: "",
+        className: "size-16 rounded-full object-cover"
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-background flex size-16 items-center justify-center rounded-full text-xl", children: tile.name.slice(0, 1).toUpperCase() }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AudioWaveform,
+      {
+        track: tile.isSelf ? meeting.localAudioTrack() : null,
+        reducedMotion
+      }
+    )
+  ] });
+}
 function StatusIcon({
   label,
   children
@@ -3394,23 +3433,27 @@ function StudioTileVideo({
     meeting.attachVideo(participantId, el, kind);
     return () => meeting.attachVideo(participantId, null, kind);
   }, [kind, meeting, participantId]);
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: STUDIO_VIDEO_MEDIA_STYLE }),
+    /* @__PURE__ */ jsxRuntime.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,
@@ -3502,6 +3545,32 @@ function StudioStage({
     }
   );
 }
+function StudioDownloadAppDialog({
+  open,
+  onOpenChange,
+  downloadUrl,
+  labels
+}) {
+  const href = downloadUrl?.trim() ?? "";
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: labels.screenDownloadAppTitle }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: labels.screenUnsupportedDevice })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: () => onOpenChange(false),
+          children: labels.screenDownloadAppDismiss
+        }
+      ),
+      href ? /* @__PURE__ */ jsxRuntime.jsx(Button, { render: /* @__PURE__ */ jsxRuntime.jsx("a", { href, target: "_blank", rel: "noreferrer" }), children: labels.screenDownloadAppAction }) : /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", disabled: true, children: labels.screenDownloadAppAction })
+    ] })
+  ] }) });
+}
 function StudioToolbar({
   session,
   meeting,
@@ -3756,7 +3825,8 @@ function StudioRoom({
   windowGate,
   initialCameraOn = true,
   initialMuted = false,
-  initialDevices
+  initialDevices,
+  appDownloadUrl
 }) {
   const [cameraOn, setCameraOn] = react.useState(initialCameraOn);
   const [screenOn, setScreenOn] = react.useState(false);
@@ -3777,6 +3847,7 @@ function StudioRoom({
   );
   const [egressError, setEgressError] = react.useState(null);
   const [shareGrant, setShareGrant] = react.useState("idle");
+  const [downloadAppOpen, setDownloadAppOpen] = react.useState(false);
   const [connectTimedOut, setConnectTimedOut] = react.useState(false);
   const [screenPermission, setScreenPermission] = react.useState(
     () => meeting.screenSharePermission()
@@ -3818,6 +3889,11 @@ function StudioRoom({
   const roomState = leaveState ?? meeting.roomState();
   const sessionOver = isStudioSessionOver(session.stream.status, roomState);
   const rejected = isStudioRejected(roomState);
+  const connectionState = react.useMemo(
+    () => meeting.connectionState(),
+    [meeting, tick2]
+  );
+  const guestConnectFailed = session.role === "guest" && (connectionState === "failed" || connectionState === "connecting" && connectTimedOut);
   useBeforeUnload(active && !sessionOver);
   useWakeLock(active && !sessionOver);
   react.useEffect(() => {
@@ -3981,12 +4057,13 @@ function StudioRoom({
     void meeting.setScreenShareEnabled(false);
   }, [guestOffStage, meeting]);
   react.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]);
   react.useEffect(() => {
     return meeting.subscribeMedia(() => {
       const self2 = meeting.participants().find((row) => row.isSelf);
@@ -4024,10 +4101,6 @@ function StudioRoom({
     [participants]
   );
   const waitlisted = react.useMemo(() => meeting.waitlisted(), [meeting, tick2]);
-  const connectionState = react.useMemo(
-    () => meeting.connectionState(),
-    [meeting, tick2]
-  );
   const lastMeetingError = react.useMemo(
     () => meeting.lastMeetingError(),
     [meeting, tick2]
@@ -4045,7 +4118,7 @@ function StudioRoom({
     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);
@@ -4141,17 +4214,10 @@ function StudioRoom({
   }, [connectionState, session.role]);
   react.useEffect(() => {
     if (inWaitingRoom || screenNoticePrimed.current) return;
-    if (!durableScreenBlock) return;
+    if (durableScreenBlock !== "permission") return;
     screenNoticePrimed.current = true;
-    sonner.toast.message(
-      durableScreenBlock === "device" ? labels.screenUnsupportedDevice : labels.screenNotAllowed
-    );
-  }, [
-    durableScreenBlock,
-    inWaitingRoom,
-    labels.screenNotAllowed,
-    labels.screenUnsupportedDevice
-  ]);
+    sonner.toast.message(labels.screenNotAllowed);
+  }, [durableScreenBlock, inWaitingRoom, labels.screenNotAllowed]);
   react.useEffect(() => {
     return meeting.subscribeBroadcast((message) => {
       if (message.type === "host-media") {
@@ -4260,6 +4326,10 @@ function StudioRoom({
     setCameraOn((current) => !current);
   }, []);
   const onToggleScreen = react.useCallback(() => {
+    if (durableScreenBlock === "device") {
+      setDownloadAppOpen(true);
+      return;
+    }
     if (!canShareFreely || screenRequestPending) return;
     if (!screenOn && !canStartScreenShare(meeting.participants())) {
       sonner.toast.message(labels.screenBusy);
@@ -4269,12 +4339,17 @@ function StudioRoom({
     setScreenOn((current) => !current);
   }, [
     canShareFreely,
+    durableScreenBlock,
     labels.screenBusy,
     meeting,
     screenOn,
     screenRequestPending
   ]);
   const onAskToShare = react.useCallback(async () => {
+    if (durableScreenBlock === "device") {
+      setDownloadAppOpen(true);
+      return;
+    }
     const local = meeting.participants().find((row) => row.isSelf);
     if (!local) return;
     try {
@@ -4291,7 +4366,12 @@ function StudioRoom({
     } catch {
       sonner.toast.error(labels.shareRequestError);
     }
-  }, [labels.shareRequestError, labels.shareRequestSent, meeting]);
+  }, [
+    durableScreenBlock,
+    labels.shareRequestError,
+    labels.shareRequestSent,
+    meeting
+  ]);
   const verifyGrantTookEffect = react.useCallback(
     (userId, retried = false) => {
       const id = window.setTimeout(() => {
@@ -4454,7 +4534,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__ */ jsxRuntime.jsx("div", { className: "flex h-dvh flex-col items-center justify-center p-6", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4788,7 +4867,21 @@ function StudioRoom({
         }
       ),
       pip.pipWindow.document.body
-    ) : null
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      StudioDownloadAppDialog,
+      {
+        open: downloadAppOpen,
+        onOpenChange: setDownloadAppOpen,
+        downloadUrl: appDownloadUrl,
+        labels: {
+          screenDownloadAppTitle: labels.screenDownloadAppTitle,
+          screenUnsupportedDevice: labels.screenUnsupportedDevice,
+          screenDownloadAppAction: labels.screenDownloadAppAction,
+          screenDownloadAppDismiss: labels.screenDownloadAppDismiss
+        }
+      }
+    )
   ] });
 }
 function isOverconstrained(error) {
@@ -6331,7 +6424,8 @@ function LivoHostStudio({
   embed = false,
   chrome,
   playerOrigin,
-  theme
+  theme,
+  appDownloadUrl
 }) {
   const reducedMotion = usePrefersReducedMotion();
   const [session, setSession] = react.useState(null);
@@ -6411,7 +6505,8 @@ function LivoHostStudio({
       labels,
       embed,
       chrome,
-      playerOrigin
+      playerOrigin,
+      appDownloadUrl
     }
   );
 }
@@ -6424,7 +6519,8 @@ function LivoGuestStudio({
   lobbyLabels,
   embed = false,
   playerOrigin,
-  theme
+  theme,
+  appDownloadUrl
 }) {
   const reducedMotion = usePrefersReducedMotion();
   const [session, setSession] = react.useState(null);
@@ -6610,7 +6706,8 @@ function LivoGuestStudio({
       playerOrigin,
       initialCameraOn: cameraOn,
       initialMuted: muted,
-      initialDevices: deviceSelection
+      initialDevices: deviceSelection,
+      appDownloadUrl
     }
   );
 }
@@ -6715,6 +6812,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"),