@livo-tv/sdk 1.5.0 → 1.6.0

package/dist/studio/index.js

@@ -1,7 +1,8 @@
 "use client";
 import { createContext, useContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
-import { Loader2, Share2, MicOff, Mic, Video, VideoOff, Settings, X, Link2, EyeOff, Eye, MonitorUp, MessageSquare, Users, Maximize, PictureInPicture2, PhoneOff, Undo2, Volume2, XIcon, Pin, MessageSquareOff, MoreVertical } from 'lucide-react';
+import { Loader2, Share2, MicOff, Mic, Video, VideoOff, Settings, X, Link2, EyeOff, Eye, MonitorUp, Captions, MoreVertical, Maximize, PictureInPicture2, MessageSquare, Users, PhoneOff, Undo2, Volume2, ChevronUp, XIcon, Pin, MessageSquareOff } from 'lucide-react';
+import { CaptionOverlay, EMPTY_LIVE_CAPTION_PLAYOUT, liveCaptionsUrl, loadLiveCaptions, mergeLiveCaptionCues, advanceLiveCaptionPlayout } from '@livo-tv/blocks/video';
 import { toast } from 'sonner';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { clsx } from 'clsx';
@@ -690,7 +691,14 @@ function parseStudioStreamSummary(value) {
   const status = readString(value, "status");
   if (!id || !title || !status) return null;
   const encoderLostAt = isRecord(value) ? typeof value.encoderLostAt === "number" ? value.encoderLostAt : value.encoderLostAt === null ? null : void 0 : void 0;
-  return { id, title, status, encoderLostAt };
+  const captionsEnabled = isRecord(value) ? typeof value.captionsEnabled === "boolean" ? value.captionsEnabled : typeof value.captionsUrl === "string" && value.captionsUrl.length > 0 ? true : value.captionsUrl === null ? false : void 0 : void 0;
+  return {
+    id,
+    title,
+    status,
+    ...encoderLostAt !== void 0 ? { encoderLostAt } : {},
+    ...captionsEnabled !== void 0 ? { captionsEnabled } : {}
+  };
 }
 function parseStudioSession(value) {
   if (!isRecord(value)) return null;
@@ -702,7 +710,9 @@ function parseStudioSession(value) {
   const fromFull = isRecord(value.stream) ? parseStudioStreamSummary({
     id: value.stream.id,
     title: value.stream.title,
-    status: value.stream.status
+    status: value.stream.status,
+    captionsEnabled: value.stream.captionsEnabled,
+    captionsUrl: value.stream.captionsUrl
   }) : null;
   const stream = fromSummary ?? fromFull;
   if (!stream) return null;
@@ -735,6 +745,14 @@ function parsePublicStreamStatus(value) {
   const status = readString(nested, "status");
   return status;
 }
+function parsePublicStreamMeta(value) {
+  if (!isRecord(value)) return null;
+  const nested = isRecord(value.stream) ? value.stream : value;
+  const status = readString(nested, "status");
+  if (!status) return null;
+  const captionsEnabled = typeof nested.captionsEnabled === "boolean" ? nested.captionsEnabled : typeof nested.captionsUrl === "string" && nested.captionsUrl.length > 0;
+  return { status, captionsEnabled };
+}
 function studioErrorCode(error) {
   if (!error || typeof error !== "object") return null;
   const body = "body" in error ? error.body : null;
@@ -1614,6 +1632,211 @@ async function playSpeakerTest(deviceId) {
     await ctx3.close();
   }
 }
+
+// src/studio/lib/caption-prefs.ts
+var STUDIO_CAPTION_LOCALES = ["en", "es", "pt"];
+var DEFAULT_STUDIO_CAPTION_PREFS = {
+  locale: "en",
+  size: "m"
+};
+function isStudioCaptionLocale(value) {
+  return STUDIO_CAPTION_LOCALES.includes(value);
+}
+var STORAGE_KEY = "livo-studio-captions";
+function defaultStorage2() {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function isCaptionSize(value) {
+  return value === "s" || value === "m" || value === "l";
+}
+function captionSizeClass(size) {
+  switch (size) {
+    case "s":
+      return "text-[length:clamp(10px,2.1cqh,0.75rem)]";
+    case "m":
+      return "text-[length:clamp(10px,2.6cqh,0.875rem)]";
+    case "l":
+      return "text-[length:clamp(12px,3.2cqh,1.05rem)]";
+    default: {
+      const _exhaustive = size;
+      return _exhaustive;
+    }
+  }
+}
+function readStudioCaptionPrefs(storage = defaultStorage2(), fallbackLocale = "en") {
+  const raw = storage?.getItem(STORAGE_KEY);
+  if (!raw) {
+    return { ...DEFAULT_STUDIO_CAPTION_PREFS, locale: fallbackLocale };
+  }
+  try {
+    const parsed = JSON.parse(raw);
+    const locale = typeof parsed.locale === "string" && isStudioCaptionLocale(parsed.locale) ? parsed.locale : fallbackLocale;
+    const size = typeof parsed.size === "string" && isCaptionSize(parsed.size) ? parsed.size : "m";
+    return { locale, size };
+  } catch {
+    return { ...DEFAULT_STUDIO_CAPTION_PREFS, locale: fallbackLocale };
+  }
+}
+function persistStudioCaptionPrefs(prefs, storage = defaultStorage2()) {
+  storage?.setItem(STORAGE_KEY, JSON.stringify(prefs));
+}
+function studioCaptionsBaseUrl(apiUrl, streamId) {
+  if (!apiUrl) return void 0;
+  return `${apiUrl.replace(/\/$/, "")}/public/streams/${encodeURIComponent(streamId)}/captions`;
+}
+
+// src/studio/lib/video-effects.ts
+var DEFAULT_STUDIO_VIDEO_EFFECTS = {
+  background: "none",
+  blurStrength: 50,
+  filter: "none"
+};
+var FILTER_CSS = {
+  none: "",
+  grayscale: "grayscale(1)",
+  sepia: "sepia(0.85)",
+  warm: "sepia(0.35) saturate(1.2) hue-rotate(-10deg)",
+  cool: "saturate(0.9) hue-rotate(15deg) brightness(1.05)",
+  bright: "brightness(1.15) contrast(1.08)"
+};
+function defaultStudioEffectBackgrounds(cdnBase = "https://hls.livo.tv") {
+  const root = cdnBase.replace(/\/$/, "");
+  return [
+    {
+      id: "office",
+      url: `${root}/env/backgrounds/office.jpg`,
+      label: "Office"
+    },
+    {
+      id: "lounge",
+      url: `${root}/env/backgrounds/lounge.jpg`,
+      label: "Lounge"
+    },
+    {
+      id: "studio",
+      url: `${root}/env/backgrounds/studio.jpg`,
+      label: "Studio"
+    },
+    { id: "sky", url: `${root}/env/backgrounds/sky.jpg`, label: "Sky" },
+    {
+      id: "forest",
+      url: `${root}/env/backgrounds/forest.jpg`,
+      label: "Forest"
+    },
+    {
+      id: "abstract",
+      url: `${root}/env/backgrounds/abstract.jpg`,
+      label: "Abstract"
+    }
+  ];
+}
+function createFilterVideoMiddleware(filter) {
+  const css = FILTER_CSS[filter];
+  if (!css) return null;
+  return async () => {
+    const scratch = document.createElement("canvas");
+    return async (canvas, ctx3) => {
+      if (scratch.width !== canvas.width || scratch.height !== canvas.height) {
+        scratch.width = canvas.width;
+        scratch.height = canvas.height;
+      }
+      const copy = scratch.getContext("2d");
+      if (!copy) return;
+      copy.clearRect(0, 0, scratch.width, scratch.height);
+      copy.drawImage(canvas, 0, 0);
+      ctx3.save();
+      ctx3.filter = css;
+      ctx3.drawImage(scratch, 0, 0);
+      ctx3.restore();
+    };
+  };
+}
+async function loadBackgroundTransformer(meeting) {
+  const mod = await import('@cloudflare/realtimekit-virtual-background');
+  const Init = mod.default ?? mod.RealtimeKitVideoBackgroundTransformer ?? null;
+  if (!Init) return null;
+  return Init.init({ meeting });
+}
+async function applyStudioVideoEffects(options) {
+  const self = options.self;
+  if (!self?.removeAllVideoMiddlewares || !self.addVideoMiddleware) return;
+  await self.removeAllVideoMiddlewares();
+  const needsSegmentation = options.config.background !== "none";
+  if (needsSegmentation) {
+    await self.setVideoMiddlewareGlobalConfig?.({
+      disablePerFrameCanvasRendering: true
+    });
+    try {
+      const transformer = await loadBackgroundTransformer(options.meeting);
+      if (transformer && options.config.background === "blur") {
+        const strength = Math.min(
+          100,
+          Math.max(0, options.config.blurStrength)
+        );
+        await self.addVideoMiddleware(
+          await transformer.createBackgroundBlurVideoMiddleware(strength)
+        );
+      } else if (transformer && options.config.background === "image" && options.config.imageUrl) {
+        await self.addVideoMiddleware(
+          await transformer.createStaticBackgroundVideoMiddleware(
+            options.config.imageUrl
+          )
+        );
+      }
+    } catch {
+    }
+  }
+  const filter = createFilterVideoMiddleware(options.config.filter);
+  if (filter) await self.addVideoMiddleware(filter);
+}
+
+// src/studio/lib/effects-prefs.ts
+var STORAGE_KEY2 = "livo-studio-video-effects";
+function defaultStorage3() {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+var BACKGROUNDS = ["none", "blur", "image"];
+var FILTERS = [
+  "none",
+  "grayscale",
+  "sepia",
+  "warm",
+  "cool",
+  "bright"
+];
+function isBackground(value) {
+  return BACKGROUNDS.includes(value);
+}
+function isFilter(value) {
+  return FILTERS.includes(value);
+}
+function readStudioVideoEffects(storage = defaultStorage3()) {
+  const raw = storage?.getItem(STORAGE_KEY2);
+  if (!raw) return { ...DEFAULT_STUDIO_VIDEO_EFFECTS };
+  try {
+    const parsed = JSON.parse(raw);
+    const background = typeof parsed.background === "string" && isBackground(parsed.background) ? parsed.background : "none";
+    const filter = typeof parsed.filter === "string" && isFilter(parsed.filter) ? parsed.filter : "none";
+    const blurStrength = typeof parsed.blurStrength === "number" && Number.isFinite(parsed.blurStrength) ? Math.min(100, Math.max(0, parsed.blurStrength)) : 50;
+    const imageUrl = typeof parsed.imageUrl === "string" && parsed.imageUrl ? parsed.imageUrl : void 0;
+    return { background, blurStrength, imageUrl, filter };
+  } catch {
+    return { ...DEFAULT_STUDIO_VIDEO_EFFECTS };
+  }
+}
+function persistStudioVideoEffects(config, storage = defaultStorage3()) {
+  storage?.setItem(STORAGE_KEY2, JSON.stringify(config));
+}
 function StudioDeviceSelectGroup({
   devices,
   selected,
@@ -1692,7 +1915,11 @@ function StudioSettingsDialog({
   meeting,
   labels,
   reducedMotion,
-  cameraOn
+  cameraOn,
+  captionPrefs,
+  onCaptionPrefsChange,
+  captionsAvailable,
+  effectBackgrounds
 }) {
   const devices = useMediaDevices(open ? 1 : 0, open);
   const [saved, setSaved] = useState(
@@ -1704,11 +1931,16 @@ function StudioSettingsDialog({
   const [displayName, setDisplayName] = useState("");
   const [savedDisplayName, setSavedDisplayName] = useState("");
   const [savingDisplayName, setSavingDisplayName] = useState(false);
+  const [tab, setTab] = useState("general");
+  const [effects, setEffects] = useState(
+    () => meeting.videoEffects()
+  );
   const { effective } = resolveDeviceSelection(saved, devices);
   useEffect(() => {
     if (!open) return;
     setSaved(readStudioDeviceSelection());
-  }, [open]);
+    setEffects(meeting.videoEffects());
+  }, [meeting, open]);
   useEffect(() => {
     if (!open) return;
     const selfName = meeting.participants().find((row) => row.isSelf)?.name?.trim() ?? "";
@@ -1761,76 +1993,306 @@ function StudioSettingsDialog({
       setTestingSpeaker(false);
     }
   }
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
+  async function applyEffects(next) {
+    setEffects(next);
+    persistStudioVideoEffects(next);
+    try {
+      await meeting.setVideoEffects(next);
+    } catch {
+    }
+  }
+  const tabs = [
+    { id: "general", label: labels.settingsGeneral },
+    { id: "audio", label: labels.settingsAudio },
+    { id: "video", label: labels.settingsVideo },
+    { id: "effects", label: labels.settingsEffects },
+    { id: "subtitles", label: labels.settingsSubtitles }
+  ];
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-2xl", children: [
     /* @__PURE__ */ jsxs(DialogHeader, { children: [
       /* @__PURE__ */ jsx(DialogTitle, { children: labels.settingsTitle }),
       /* @__PURE__ */ jsx(DialogDescription, { children: labels.settingsDescription })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx(Label, { htmlFor: "studio-display-name", children: labels.guestName }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "tablist",
+          "aria-label": labels.settings,
+          className: "flex shrink-0 flex-row gap-1 overflow-x-auto sm:w-40 sm:flex-col",
+          children: tabs.map((item) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": tab === item.id,
+              className: cn(
+                "rounded-md px-3 py-1.5 text-left text-sm",
+                tab === item.id ? "bg-muted font-medium" : "text-muted-foreground hover:bg-muted/60"
+              ),
+              onClick: () => setTab(item.id),
+              children: item.label
+            },
+            item.id
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-4", children: [
+        tab === "general" ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "studio-display-name", children: labels.guestName }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "studio-display-name",
+                value: displayName,
+                maxLength: STUDIO_DISPLAY_NAME_MAX,
+                onChange: (event) => setDisplayName(event.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                disabled: displayNameSaveDisabled,
+                onClick: () => void onSaveDisplayName(),
+                children: labels.displayNameSave
+              }
+            )
+          ] })
+        ] }) : null,
+        tab === "audio" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "sr-only", children: labels.micLevel }),
+            /* @__PURE__ */ jsx(
+              AudioWaveform,
+              {
+                track: audioTrack,
+                reducedMotion,
+                className: "w-full"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            StudioDeviceSelectGroup,
+            {
+              devices: { ...devices, video: [] },
+              selected: effective,
+              labels,
+              onChange: (kind, id) => void onChange(kind, id),
+              speakerAction: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: "outline",
+                  disabled: testingSpeaker,
+                  onClick: () => void onTestSpeaker(),
+                  children: labels.testSpeaker
+                }
+              )
+            }
+          )
+        ] }) : null,
+        tab === "video" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            SettingsCameraPreview,
+            {
+              track: videoTrack,
+              open,
+              cameraOn,
+              cameraOffLabel: labels.cameraOff
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            StudioDeviceSelectGroup,
+            {
+              devices: { ...devices, audio: [], speaker: [] },
+              selected: effective,
+              labels,
+              onChange: (kind, id) => void onChange(kind, id)
+            }
+          )
+        ] }) : null,
+        tab === "effects" ? /* @__PURE__ */ jsx(
+          EffectsPanel,
+          {
+            labels,
+            effects,
+            backgrounds: effectBackgrounds,
+            onApply: (next) => void applyEffects(next)
+          }
+        ) : null,
+        tab === "subtitles" ? /* @__PURE__ */ jsx(
+          SubtitlesPanel,
+          {
+            labels,
+            prefs: captionPrefs,
+            available: captionsAvailable,
+            onChange: (next) => {
+              persistStudioCaptionPrefs(next);
+              onCaptionPrefsChange(next);
+            }
+          }
+        ) : null
+      ] })
+    ] })
+  ] }) });
+}
+function EffectsPanel({
+  labels,
+  effects,
+  backgrounds,
+  onApply
+}) {
+  const filters = [
+    { id: "none", label: labels.effectFilterNone },
+    { id: "grayscale", label: labels.effectFilterGrayscale },
+    { id: "sepia", label: labels.effectFilterSepia },
+    { id: "warm", label: labels.effectFilterWarm },
+    { id: "cool", label: labels.effectFilterCool },
+    { id: "bright", label: labels.effectFilterBright }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-medium", children: labels.settingsEffects }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-2", children: [
         /* @__PURE__ */ jsx(
-          Input,
+          EffectTile,
           {
-            id: "studio-display-name",
-            value: displayName,
-            maxLength: STUDIO_DISPLAY_NAME_MAX,
-            onChange: (event) => setDisplayName(event.target.value)
+            label: labels.effectNone,
+            active: effects.background === "none",
+            onClick: () => onApply({ ...effects, background: "none" })
           }
         ),
         /* @__PURE__ */ jsx(
-          Button,
+          EffectTile,
           {
-            type: "button",
-            variant: "outline",
-            disabled: displayNameSaveDisabled,
-            onClick: () => void onSaveDisplayName(),
-            children: labels.displayNameSave
+            label: labels.effectBlur,
+            active: effects.background === "blur" && effects.blurStrength <= 50,
+            onClick: () => onApply({ ...effects, background: "blur", blurStrength: 40 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EffectTile,
+          {
+            label: labels.effectBlurStrong,
+            active: effects.background === "blur" && effects.blurStrength > 50,
+            onClick: () => onApply({ ...effects, background: "blur", blurStrength: 80 })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx(
-      SettingsCameraPreview,
-      {
-        track: videoTrack,
-        open,
-        cameraOn,
-        cameraOffLabel: labels.cameraOff
-      }
-    ),
+    backgrounds.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-medium", children: labels.effectBackgrounds }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: backgrounds.map((bg) => /* @__PURE__ */ jsx(
+        EffectTile,
+        {
+          label: bg.label,
+          active: effects.background === "image" && effects.imageUrl === bg.url,
+          previewUrl: bg.url,
+          onClick: () => onApply({
+            ...effects,
+            background: "image",
+            imageUrl: bg.url
+          })
+        },
+        bg.id
+      )) })
+    ] }) : null,
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("p", { className: "sr-only", children: labels.micLevel }),
-      /* @__PURE__ */ jsx(
-        AudioWaveform,
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-medium", children: labels.effectFilters }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: filters.map((filter) => /* @__PURE__ */ jsx(
+        Button,
         {
-          track: audioTrack,
-          reducedMotion,
-          className: "w-full"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      StudioDeviceSelectGroup,
-      {
-        devices,
-        selected: effective,
-        labels,
-        onChange: (kind, id) => void onChange(kind, id),
-        speakerAction: /* @__PURE__ */ jsx(
-          Button,
+          type: "button",
+          size: "sm",
+          variant: effects.filter === filter.id ? "default" : "outline",
+          onClick: () => onApply({ ...effects, filter: filter.id }),
+          children: filter.label
+        },
+        filter.id
+      )) })
+    ] })
+  ] });
+}
+function EffectTile({
+  label,
+  active,
+  previewUrl,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": active,
+      onClick,
+      className: cn(
+        "overflow-hidden rounded-lg border text-left text-xs",
+        active ? "ring-primary ring-2" : "border-border"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            type: "button",
-            size: "sm",
-            variant: "outline",
-            disabled: testingSpeaker,
-            onClick: () => void onTestSpeaker(),
-            children: labels.testSpeaker
+            className: "bg-muted aspect-video w-full bg-cover bg-center",
+            style: previewUrl ? { backgroundImage: `url(${previewUrl})` } : void 0
           }
-        )
-      }
-    )
-  ] }) });
+        ),
+        /* @__PURE__ */ jsx("p", { className: "truncate px-2 py-1", children: label })
+      ]
+    }
+  );
+}
+function SubtitlesPanel({
+  labels,
+  prefs,
+  available,
+  onChange
+}) {
+  const localeLabel = {
+    en: labels.localeEn,
+    es: labels.localeEs,
+    pt: labels.localePt
+  };
+  const sizes = [
+    { id: "s", label: labels.captionsSizeS },
+    { id: "m", label: labels.captionsSizeM },
+    { id: "l", label: labels.captionsSizeL }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    available ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: labels.captionsDelayed }) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: labels.captionsNotReady }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: labels.captionsLanguage }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: STUDIO_CAPTION_LOCALES.map((locale) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: prefs.locale === locale ? "default" : "outline",
+          onClick: () => onChange({ ...prefs, locale }),
+          children: localeLabel[locale]
+        },
+        locale
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: labels.captionsSize }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: sizes.map((size) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: prefs.size === size.id ? "default" : "outline",
+          onClick: () => onChange({ ...prefs, size: size.id }),
+          children: size.label
+        },
+        size.id
+      )) })
+    ] })
+  ] });
 }
 function SettingsCameraPreview({
   track,
@@ -1881,7 +2343,11 @@ function StudioGuestWaiting({
   onToggleCamera,
   onToggleMute,
   onOpenSettings,
-  onCloseSettings
+  onCloseSettings,
+  captionPrefs,
+  onCaptionPrefsChange,
+  captionsAvailable,
+  effectBackgrounds
 }) {
   const [audioTrack, setAudioTrack] = useState(null);
   const [videoTrack, setVideoTrack] = useState(null);
@@ -1948,7 +2414,11 @@ function StudioGuestWaiting({
         meeting,
         labels,
         reducedMotion,
-        cameraOn
+        cameraOn,
+        captionPrefs,
+        onCaptionPrefsChange,
+        captionsAvailable,
+        effectBackgrounds
       }
     )
   ] });
@@ -3573,6 +4043,12 @@ function StudioToolbar({
   stageEnabled,
   canLeaveStage,
   reducedMotion,
+  captionsOn,
+  captionsAvailable,
+  captionsReady,
+  captionPrefs,
+  onCaptionPrefsChange,
+  effectBackgrounds,
   onToggleMute,
   onToggleCamera,
   onToggleScreen,
@@ -3586,204 +4062,360 @@ function StudioToolbar({
   onCloseSettings,
   onOpenPip,
   onClosePip,
+  onToggleCaptions,
   onLeave
 }) {
-  const fullscreenSupported = document.fullscreenEnabled === true && typeof document.documentElement.requestFullscreen === "function";
+  const devices = useMediaDevices(1, true);
+  const saved = readStudioDeviceSelection();
+  const { effective } = resolveDeviceSelection(saved, devices);
+  const fullscreenSupported = typeof document !== "undefined" && document.fullscreenEnabled === true && typeof document.documentElement.requestFullscreen === "function";
   async function enterFullscreen() {
     try {
       await document.documentElement.requestFullscreen();
     } catch {
     }
   }
-  return /* @__PURE__ */ jsx("footer", { className: "flex flex-wrap items-center justify-center gap-2 border-t px-3 py-3", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
-    showMediaControls ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
+  async function onDeviceChange(kind, deviceId) {
+    persistStudioDeviceSelection(kind, deviceId);
+    try {
+      await meeting.setDevice(kind, deviceId);
+    } catch {
+    }
+  }
+  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: muted ? labels.unmute : labels.mute,
-          pressed: muted,
-          tone: muted ? "danger" : "default",
-          onClick: onToggleMute,
-          children: muted ? /* @__PURE__ */ jsx(MicOff, {}) : /* @__PURE__ */ jsx(Mic, {})
+          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, {})
         }
-      ),
-      /* @__PURE__ */ jsx(
+      ) : null,
+      showStageGuest ? /* @__PURE__ */ jsx(
         ControlIcon,
         {
-          label: labels.camera,
-          pressed: cameraOn,
-          onClick: onToggleCamera,
-          children: cameraOn ? /* @__PURE__ */ jsx(Video, {}) : /* @__PURE__ */ jsx(VideoOff, {})
-        }
-      )
-    ] }) : null,
-    session.role === "moderator" && canManageStage ? /* @__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);
+          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;
             }
-            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: labels.shareRequested,
+            pressed: true,
+            disabled: true,
+            onClick: () => void 0,
+            children: /* @__PURE__ */ jsx(MonitorUp, {})
           }
-          onAskStage();
-        },
-        children: selfStageStatus === "ON_STAGE" ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {})
-      }
-    ) : null,
-    session.role === "guest" && stageEnabled ? /* @__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;
+        ),
+        /* @__PURE__ */ jsx(
+          ControlIcon,
+          {
+            label: labels.cancelShareRequest,
+            onClick: onCancelShareRequest,
+            children: /* @__PURE__ */ jsx(X, {})
           }
-          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: labels.askToShare, onClick: onAskToShare, children: /* @__PURE__ */ jsx(MonitorUp, {}) }) : null,
       /* @__PURE__ */ jsx(
         ControlIcon,
         {
-          label: labels.shareRequested,
-          pressed: true,
-          disabled: true,
-          onClick: () => void 0,
-          children: /* @__PURE__ */ jsx(MonitorUp, {})
+          label: captionsLabel,
+          pressed: captionsOn,
+          disabled: !captionsAvailable,
+          onClick: onToggleCaptions,
+          children: /* @__PURE__ */ jsx(Captions, {})
         }
       ),
+      /* @__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, {})
+          }
+        ),
+        /* @__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__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
       /* @__PURE__ */ jsx(
         ControlIcon,
         {
-          label: labels.cancelShareRequest,
-          onClick: onCancelShareRequest,
-          children: /* @__PURE__ */ jsx(X, {})
+          label: unreadChat > 0 ? `${labels.chat} (${unreadChat})` : labels.chat,
+          pressed: chatOpen,
+          badge: unreadChat,
+          onClick: onToggleChat,
+          children: /* @__PURE__ */ jsx(MessageSquare, {})
         }
-      )
-    ] }) : /* @__PURE__ */ jsx(ControlIcon, { label: labels.askToShare, onClick: onAskToShare, children: /* @__PURE__ */ jsx(MonitorUp, {}) }) : null,
-    /* @__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,
-    fullscreenSupported ? /* @__PURE__ */ jsx(
-      ControlIcon,
-      {
-        label: labels.fullscreen,
-        onClick: () => void enterFullscreen(),
-        children: /* @__PURE__ */ jsx(Maximize, {})
-      }
-    ) : null,
-    pipSupported ? /* @__PURE__ */ jsx(
-      ControlIcon,
-      {
-        label: pipOpen ? labels.closePip : labels.openPip,
-        pressed: pipOpen,
-        onClick: () => {
-          if (pipOpen) onClosePip();
-          else onOpenPip();
-        },
-        children: /* @__PURE__ */ jsx(PictureInPicture2, {})
-      }
-    ) : null,
+      ),
+      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,
+  pressed,
+  tone = "default",
+  onClick,
+  pickerLabel,
+  options,
+  selected,
+  onSelect,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
     /* @__PURE__ */ jsx(
       ControlIcon,
       {
-        label: labels.settings,
-        pressed: settingsOpen,
-        onClick: onOpenSettings,
-        children: /* @__PURE__ */ jsx(Settings, {})
+        label,
+        pressed,
+        tone,
+        onClick,
+        children
       }
     ),
-    /* @__PURE__ */ jsx(
-      StudioSettingsDialog,
-      {
-        open: settingsOpen,
-        onOpenChange: onCloseSettings,
-        meeting,
-        reducedMotion,
-        cameraOn,
-        labels: {
-          settingsTitle: labels.settingsTitle,
-          settingsDescription: labels.settingsDescription,
-          guestName: labels.guestName,
-          displayNameSave: labels.displayNameSave,
-          displayNameSaved: labels.displayNameSaved,
-          displayNameError: labels.displayNameError,
-          cameraDevice: labels.cameraDevice,
-          micDevice: labels.micDevice,
-          speakerDevice: labels.speakerDevice,
-          testSpeaker: labels.testSpeaker,
-          testSpeakerError: labels.testSpeakerError,
-          cameraOff: labels.cameraOff,
-          micLevel: labels.micLevel
+    options.length > 0 ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(
+        DropdownMenuTrigger,
+        {
+          render: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "icon-xs",
+              variant: "secondary",
+              className: "-ml-1",
+              "aria-label": pickerLabel
+            }
+          ),
+          children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-3.5" })
         }
-      }
-    ),
-    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, {})
-          }
+      ),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", side: "top", className: "min-w-52", children: options.map((option) => /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          onClick: () => onSelect(option.deviceId),
+          children: [
+            option.deviceId === selected ? "\u2713 " : "",
+            option.label
+          ]
+        },
+        option.deviceId
+      )) })
+    ] }) : null
+  ] });
+}
+var POLL_MS = 2e3;
+var PLAYOUT_MS = 250;
+var STUDIO_EXTRA_LAG_MS = 200;
+function useStudioCaptions({
+  enabled,
+  baseUrl,
+  locale,
+  streamStatus
+}) {
+  const [playout, setPlayout] = useState(
+    EMPTY_LIVE_CAPTION_PLAYOUT
+  );
+  const cuesRef = useRef([]);
+  useEffect(() => {
+    if (!enabled) {
+      cuesRef.current = [];
+      setPlayout(EMPTY_LIVE_CAPTION_PLAYOUT);
+      return;
+    }
+    if (!baseUrl || !isStudioActiveStatus(streamStatus)) return;
+    let cancelled = false;
+    const url = liveCaptionsUrl(baseUrl, locale);
+    const poll = async () => {
+      const loaded = await loadLiveCaptions(url);
+      if (cancelled || !loaded.ok) return;
+      cuesRef.current = mergeLiveCaptionCues(cuesRef.current, loaded.cues);
+    };
+    void poll();
+    const timer = window.setInterval(() => void poll(), POLL_MS);
+    return () => {
+      cancelled = true;
+      window.clearInterval(timer);
+    };
+  }, [baseUrl, enabled, locale, streamStatus]);
+  useEffect(() => {
+    if (!enabled || !baseUrl || !isStudioActiveStatus(streamStatus)) {
+      setPlayout(EMPTY_LIVE_CAPTION_PLAYOUT);
+      return;
+    }
+    const tick2 = () => {
+      setPlayout(
+        (prev) => advanceLiveCaptionPlayout(
+          prev,
+          cuesRef.current,
+          Date.now(),
+          0,
+          void 0,
+          STUDIO_EXTRA_LAG_MS
         )
-      }
-    ) : null
-  ] }) });
+      );
+    };
+    tick2();
+    const timer = window.setInterval(tick2, PLAYOUT_MS);
+    return () => window.clearInterval(timer);
+  }, [baseUrl, enabled, streamStatus]);
+  return playout;
 }
 var STAGE_GRANT_VERIFY_MS = 4e3;
 var STUDIO_CONNECT_WATCHDOG_MS = 12e3;
@@ -3802,7 +4434,10 @@ function StudioRoom({
   initialCameraOn = true,
   initialMuted = false,
   initialDevices,
-  appDownloadUrl
+  appDownloadUrl,
+  captionsBaseUrl,
+  apiUrl,
+  cdnBase
 }) {
   const [cameraOn, setCameraOn] = useState(initialCameraOn);
   const [screenOn, setScreenOn] = useState(false);
@@ -3824,6 +4459,11 @@ function StudioRoom({
   const [egressError, setEgressError] = useState(null);
   const [shareGrant, setShareGrant] = useState("idle");
   const [downloadAppOpen, setDownloadAppOpen] = useState(false);
+  const [captionsOn, setCaptionsOn] = useState(false);
+  const [captionPrefs, setCaptionPrefs] = useState(
+    () => readStudioCaptionPrefs()
+  );
+  const captionHintShown = useRef(false);
   const [connectTimedOut, setConnectTimedOut] = useState(false);
   const [screenPermission, setScreenPermission] = useState(
     () => meeting.screenSharePermission()
@@ -3849,6 +4489,19 @@ function StudioRoom({
   const pip = useDocumentPictureInPicture();
   const gateFromContext = useStudioWindowGate();
   const { reportDuplicate } = windowGate ?? gateFromContext;
+  const resolvedCaptionsBaseUrl = captionsBaseUrl ?? studioCaptionsBaseUrl(apiUrl, session.stream.id);
+  const captionsAvailable = session.stream.captionsEnabled !== false;
+  const captionsReady = isStudioActiveStatus(session.stream.status);
+  const captionPlayout = useStudioCaptions({
+    enabled: captionsOn && captionsAvailable,
+    baseUrl: resolvedCaptionsBaseUrl,
+    locale: captionPrefs.locale,
+    streamStatus: session.stream.status
+  });
+  const effectBackgrounds = useMemo(
+    () => defaultStudioEffectBackgrounds(cdnBase),
+    [cdnBase]
+  );
   const onAir = isLiveStudioStatus(session.stream.status);
   const active = isStudioActiveStatus(session.stream.status);
   if (onAir && liveStartedAtRef.current === null) {
@@ -4533,6 +5186,10 @@ function StudioRoom({
         labels,
         settingsOpen,
         statusLabel: connectionState === "connecting" ? labels.connecting : labels.waitingHost,
+        captionPrefs,
+        onCaptionPrefsChange: setCaptionPrefs,
+        captionsAvailable,
+        effectBackgrounds,
         onToggleCamera,
         onToggleMute: () => void onToggleMute(),
         onOpenSettings: () => setSettingsOpen(true),
@@ -4640,27 +5297,37 @@ function StudioRoom({
       }
     ) : null,
     /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col md:flex-row", children: [
-      /* @__PURE__ */ jsx(
-        StudioStage,
-        {
-          participants: stageParticipants,
-          meeting,
-          reducedMotion,
-          canModerate: session.role === "moderator",
-          canManageStage,
-          onAir,
-          labels,
-          onKick: (id) => void onKick(id),
-          onMute: (id) => void onHostMedia(id, "audio"),
-          onStopCamera: (id) => void onHostMedia(id, "video"),
-          onStopScreen: (id) => void onHostMedia(id, "screen"),
-          onToggleStage: (tile) => void onSetStage(tile, !isOnStage(tile.stageStatus)),
-          onTogglePin: (tile) => void onTogglePin(tile),
-          onToggleChat: (tile) => void onToggleChat(tile),
-          canTakeOff: (id) => canTakeOffAir(participants, id, onAir),
-          onOpenPeople: () => setSideTab("people")
-        }
-      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsx(
+          StudioStage,
+          {
+            participants: stageParticipants,
+            meeting,
+            reducedMotion,
+            canModerate: session.role === "moderator",
+            canManageStage,
+            onAir,
+            labels,
+            onKick: (id) => void onKick(id),
+            onMute: (id) => void onHostMedia(id, "audio"),
+            onStopCamera: (id) => void onHostMedia(id, "video"),
+            onStopScreen: (id) => void onHostMedia(id, "screen"),
+            onToggleStage: (tile) => void onSetStage(tile, !isOnStage(tile.stageStatus)),
+            onTogglePin: (tile) => void onTogglePin(tile),
+            onToggleChat: (tile) => void onToggleChat(tile),
+            canTakeOff: (id) => canTakeOffAir(participants, id, onAir),
+            onOpenPeople: () => setSideTab("people")
+          }
+        ),
+        captionsOn ? /* @__PURE__ */ jsx(
+          CaptionOverlay,
+          {
+            screen: captionPlayout.screen,
+            className: "bottom-3",
+            textClassName: captionSizeClass(captionPrefs.size)
+          }
+        ) : null
+      ] }),
       sideTab ? /* @__PURE__ */ jsx(
         StudioSidePanel,
         {
@@ -4773,6 +5440,12 @@ function StudioRoom({
         stageEnabled,
         canLeaveStage: selfId != null && canTakeOffAir(participants, selfId, onAir),
         reducedMotion,
+        captionsOn,
+        captionsAvailable,
+        captionsReady,
+        captionPrefs,
+        onCaptionPrefsChange: setCaptionPrefs,
+        effectBackgrounds,
         onToggleMute: () => void onToggleMute(),
         onToggleCamera,
         onToggleScreen,
@@ -4800,6 +5473,16 @@ function StudioRoom({
         onCloseSettings: setSettingsOpen,
         onOpenPip,
         onClosePip: pip.close,
+        onToggleCaptions: () => {
+          if (!captionsAvailable) return;
+          if (!captionsOn && !captionHintShown.current) {
+            captionHintShown.current = true;
+            toast.message(
+              captionsReady ? labels.captionsDelayed : labels.captionsNotReady
+            );
+          }
+          setCaptionsOn((current) => !current);
+        },
         onLeave: () => void onLeave()
       }
     ),
@@ -5194,16 +5877,16 @@ function usePrefersReducedMotion() {
 // src/studio/lib/guest-identity.ts
 var NAME_KEY = "livo-studio-display-name";
 var ID_KEY = "livo-studio-guest-id";
-function readStudioGuestIdentity(storage = defaultStorage2()) {
+function readStudioGuestIdentity(storage = defaultStorage4()) {
   const guestId = storage?.getItem(ID_KEY)?.trim() || crypto.randomUUID();
   storage?.setItem(ID_KEY, guestId);
   const displayName = storage?.getItem(NAME_KEY)?.trim() ?? "";
   return { displayName, guestId };
 }
-function persistStudioGuestName(displayName, storage = defaultStorage2()) {
+function persistStudioGuestName(displayName, storage = defaultStorage4()) {
   storage?.setItem(NAME_KEY, displayName.trim());
 }
-function defaultStorage2() {
+function defaultStorage4() {
   if (typeof window === "undefined") return null;
   try {
     return window.localStorage;
@@ -5572,10 +6255,19 @@ function studioMeetingFromRtk(raw) {
   if (typeof window !== "undefined") {
     window.addEventListener("unhandledrejection", onUnhandledRejection);
   }
+  let videoEffects = readStudioVideoEffects();
+  async function applyCurrentVideoEffects() {
+    await applyStudioVideoEffects({
+      self: meeting.self,
+      meeting,
+      config: videoEffects
+    });
+  }
   async function republishCameraIfOn() {
     if (meeting.self?.videoEnabled !== true) return;
     await meeting.self.disableVideo?.();
     await meeting.self.enableVideo?.();
+    await applyCurrentVideoEffects();
   }
   async function acceptAllowedStageIfOffAir() {
     if (currentStageStatus() !== "OFF_STAGE") return;
@@ -5763,6 +6455,7 @@ function studioMeetingFromRtk(raw) {
     async join() {
       await meeting.join?.();
       await joinStageIfAllowed();
+      await applyCurrentVideoEffects();
     },
     async leave() {
       if (typeof window !== "undefined") {
@@ -5775,8 +6468,10 @@ function studioMeetingFromRtk(raw) {
       else await meeting.self?.disableAudio?.();
     },
     async setVideoEnabled(enabled) {
-      if (enabled) await meeting.self?.enableVideo?.();
-      else await meeting.self?.disableVideo?.();
+      if (enabled) {
+        await meeting.self?.enableVideo?.();
+        await applyCurrentVideoEffects();
+      } else await meeting.self?.disableVideo?.();
     },
     async setScreenShareEnabled(enabled) {
       if (enabled) await meeting.self?.enableScreenShare?.();
@@ -6160,6 +6855,14 @@ function studioMeetingFromRtk(raw) {
         }
       });
     },
+    async setVideoEffects(config) {
+      videoEffects = config;
+      persistStudioVideoEffects(config);
+      await applyCurrentVideoEffects();
+    },
+    videoEffects() {
+      return videoEffects;
+    },
     async setDisplayName(name) {
       const trimmed = name.trim().slice(0, STUDIO_DISPLAY_NAME_MAX);
       if (!trimmed) return;
@@ -6391,6 +7094,21 @@ async function getPublicStreamStatus(streamId, apiUrl = defaultApiUrl(), fetchFn
     return null;
   }
 }
+async function getPublicStreamMeta(streamId, apiUrl = defaultApiUrl(), fetchFn = fetch) {
+  try {
+    const body = await publicJson(
+      `${apiUrl.replace(/\/$/, "")}/public/streams/${encodeURIComponent(streamId)}`,
+      {},
+      fetchFn
+    );
+    return parsePublicStreamMeta(body);
+  } catch (error) {
+    if (error instanceof StudioApiError && (error.status === 404 || error.status === 410)) {
+      return { status: "ended", captionsEnabled: false };
+    }
+    return null;
+  }
+}
 var POLL_INTERVAL_MS = 5e3;
 function LivoHostStudio({
   token,
@@ -6406,6 +7124,9 @@ function LivoHostStudio({
   const reducedMotion = usePrefersReducedMotion();
   const [session, setSession] = useState(null);
   const [status, setStatus] = useState(null);
+  const [captionsEnabled, setCaptionsEnabled] = useState(
+    void 0
+  );
   const [error, setError] = useState(null);
   const { meeting, error: meetingError } = useRealtimeKitMeeting(
     session?.authToken ?? null
@@ -6454,6 +7175,20 @@ function LivoHostStudio({
       window.clearInterval(id);
     };
   }, [client, status]);
+  useEffect(() => {
+    if (!session) return;
+    let cancelled = false;
+    const poll = async () => {
+      const next = await getPublicStreamMeta(session.stream.id, apiUrl);
+      if (!cancelled && next) setCaptionsEnabled(next.captionsEnabled);
+    };
+    void poll();
+    const id = window.setInterval(() => void poll(), POLL_INTERVAL_MS);
+    return () => {
+      cancelled = true;
+      window.clearInterval(id);
+    };
+  }, [apiUrl, session]);
   const liveSession = useMemo(() => {
     if (!session) return null;
     if (!status) return session;
@@ -6461,10 +7196,11 @@ function LivoHostStudio({
       ...session,
       stream: {
         ...session.stream,
-        status
+        status,
+        captionsEnabled: captionsEnabled ?? session.stream.captionsEnabled
       }
     };
-  }, [session, status]);
+  }, [captionsEnabled, session, status]);
   if (error || meetingError) {
     return /* @__PURE__ */ jsx("p", { className: "text-destructive p-6", role: "alert", children: error ?? meetingError });
   }
@@ -6482,7 +7218,8 @@ function LivoHostStudio({
       embed,
       chrome,
       playerOrigin,
-      appDownloadUrl
+      appDownloadUrl,
+      apiUrl
     }
   );
 }
@@ -6501,6 +7238,9 @@ function LivoGuestStudio({
   const reducedMotion = usePrefersReducedMotion();
   const [session, setSession] = useState(null);
   const [status, setStatus] = useState(null);
+  const [captionsEnabled, setCaptionsEnabled] = useState(
+    void 0
+  );
   const [error, setError] = useState(null);
   const [displayName, setDisplayName] = useState("");
   const [guestId, setGuestId] = useState("");
@@ -6604,8 +7344,11 @@ function LivoGuestStudio({
     if (current === "ended" || current === "error") return;
     let cancelled = false;
     const poll = async () => {
-      const next = await getPublicStreamStatus(session.stream.id, apiUrl);
-      if (!cancelled && next) setStatus(next);
+      const next = await getPublicStreamMeta(session.stream.id, apiUrl);
+      if (!cancelled && next) {
+        setStatus(next.status);
+        setCaptionsEnabled(next.captionsEnabled);
+      }
     };
     void poll();
     const intervalMs = current === "public" ? POLL_INTERVAL_MS2 : PREVIEW_POLL_INTERVAL_MS;
@@ -6620,9 +7363,13 @@ function LivoGuestStudio({
     if (!status) return session;
     return {
       ...session,
-      stream: { ...session.stream, status }
+      stream: {
+        ...session.stream,
+        status,
+        captionsEnabled: captionsEnabled ?? session.stream.captionsEnabled
+      }
     };
-  }, [session, status]);
+  }, [captionsEnabled, session, status]);
   useEffect(() => {
     if (retryAfterMs == null) return;
     const id = window.setTimeout(() => {
@@ -6683,7 +7430,8 @@ function LivoGuestStudio({
       initialCameraOn: cameraOn,
       initialMuted: muted,
       initialDevices: deviceSelection,
-      appDownloadUrl
+      appDownloadUrl,
+      apiUrl
     }
   );
 }
@@ -6859,10 +7607,40 @@ function studioRoomLabels(t) {
     chatPin: t("chatPin"),
     chatUnpin: t("chatUnpin"),
     chatSave: t("chatSave"),
-    waitingSkeleton: t("waitingSkeleton")
+    waitingSkeleton: t("waitingSkeleton"),
+    more: t("more"),
+    captions: t("captions"),
+    captionsOn: t("captionsOn"),
+    captionsOff: t("captionsOff"),
+    captionsNotReady: t("captionsNotReady"),
+    captionsDelayed: t("captionsDelayed"),
+    captionsLanguage: t("captionsLanguage"),
+    captionsSize: t("captionsSize"),
+    captionsSizeS: t("captionsSizeS"),
+    captionsSizeM: t("captionsSizeM"),
+    captionsSizeL: t("captionsSizeL"),
+    settingsGeneral: t("settingsGeneral"),
+    settingsAudio: t("settingsAudio"),
+    settingsVideo: t("settingsVideo"),
+    settingsEffects: t("settingsEffects"),
+    settingsSubtitles: t("settingsSubtitles"),
+    effectNone: t("effectNone"),
+    effectBlur: t("effectBlur"),
+    effectBlurStrong: t("effectBlurStrong"),
+    effectBackgrounds: t("effectBackgrounds"),
+    effectFilters: t("effectFilters"),
+    effectFilterNone: t("effectFilterNone"),
+    effectFilterGrayscale: t("effectFilterGrayscale"),
+    effectFilterSepia: t("effectFilterSepia"),
+    effectFilterWarm: t("effectFilterWarm"),
+    effectFilterCool: t("effectFilterCool"),
+    effectFilterBright: t("effectFilterBright"),
+    localeEn: t("localeEn"),
+    localeEs: t("localeEs"),
+    localePt: t("localePt")
   };
 }
 
-export { LivoGuestStudio, LivoHostStudio, StudioApiError, StudioControlClient, StudioControlError, StudioGuestLobby, StudioRoom, StudioSkeleton, StudioWindowGate, StudioWindowGateContext, applyEmbedTheme, controlActionsFromClient, createStudioControlClient, decodeEmbedTheme, getPublicStreamStatus, getStudioJoinStatus, joinStudioGuest, redeemStudioHost, studioErrorCode, studioRoomLabels, usePrefersReducedMotion, useRealtimeKitMeeting, useStudioWindowGate };
+export { LivoGuestStudio, LivoHostStudio, StudioApiError, StudioControlClient, StudioControlError, StudioGuestLobby, StudioRoom, StudioSkeleton, StudioWindowGate, StudioWindowGateContext, applyEmbedTheme, controlActionsFromClient, createStudioControlClient, decodeEmbedTheme, getPublicStreamMeta, getPublicStreamStatus, getStudioJoinStatus, joinStudioGuest, redeemStudioHost, studioErrorCode, studioRoomLabels, usePrefersReducedMotion, useRealtimeKitMeeting, useStudioWindowGate };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map