@livo-tv/sdk 1.6.0 → 1.6.1

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;