@livo-tv/sdk 1.3.3 → 1.4.0

package/dist/studio/index.cjs

@@ -1274,15 +1274,15 @@ function AudioWaveform({
     if (!canvas || !track || reducedMotion) return;
     const AudioCtx = window.AudioContext || window.webkitAudioContext;
     if (!AudioCtx) return;
-    const ctx2 = new AudioCtx();
-    const source = ctx2.createMediaStreamSource(new MediaStream([track]));
-    const analyser = ctx2.createAnalyser();
+    const ctx3 = new AudioCtx();
+    const source = ctx3.createMediaStreamSource(new MediaStream([track]));
+    const analyser = ctx3.createAnalyser();
     analyser.fftSize = 64;
     source.connect(analyser);
     const data = new Uint8Array(analyser.frequencyBinCount);
     const graphic = canvas.getContext("2d");
     const surface = canvas;
-    let frame = 0;
+    let frame2 = 0;
     function draw() {
       if (!graphic) return;
       analyser.getByteFrequencyData(data);
@@ -1300,12 +1300,12 @@ function AudioWaveform({
           barHeight
         );
       }
-      frame = requestAnimationFrame(draw);
+      frame2 = requestAnimationFrame(draw);
     }
-    frame = requestAnimationFrame(draw);
+    frame2 = requestAnimationFrame(draw);
     return () => {
-      cancelAnimationFrame(frame);
-      void ctx2.close();
+      cancelAnimationFrame(frame2);
+      void ctx3.close();
     };
   }, [track, reducedMotion]);
   if (reducedMotion) {
@@ -1591,10 +1591,10 @@ async function playSpeakerTest(deviceId) {
   if (!AudioCtx) {
     throw new Error("AudioContext unavailable");
   }
-  const ctx2 = new AudioCtx();
-  void ctx2.resume();
-  const oscillator = ctx2.createOscillator();
-  const gain = ctx2.createGain();
+  const ctx3 = new AudioCtx();
+  void ctx3.resume();
+  const oscillator = ctx3.createOscillator();
+  const gain = ctx3.createGain();
   oscillator.type = "sine";
   oscillator.frequency.value = TEST_HZ;
   gain.gain.value = 0.18;
@@ -1604,7 +1604,7 @@ async function playSpeakerTest(deviceId) {
     const probe = document.createElement("audio");
     const canRoute = Boolean(deviceId) && typeof probe.setSinkId === "function";
     if (canRoute && deviceId) {
-      const destination = ctx2.createMediaStreamDestination();
+      const destination = ctx3.createMediaStreamDestination();
       gain.connect(destination);
       audio = probe;
       audio.autoplay = true;
@@ -1615,13 +1615,13 @@ async function playSpeakerTest(deviceId) {
         await audio.play();
       } catch {
         gain.disconnect();
-        gain.connect(ctx2.destination);
+        gain.connect(ctx3.destination);
         audio.srcObject = null;
         audio.remove();
         audio = null;
       }
     } else {
-      gain.connect(ctx2.destination);
+      gain.connect(ctx3.destination);
     }
     oscillator.start();
     await new Promise((resolve) => {
@@ -1633,7 +1633,7 @@ async function playSpeakerTest(deviceId) {
       audio.srcObject = null;
       audio.remove();
     }
-    await ctx2.close();
+    await ctx3.close();
   }
 }
 function StudioDeviceSelectGroup({
@@ -2416,7 +2416,7 @@ function StudioChatPanel({
   isModerator: isModerator2,
   labels
 }) {
-  const [tick, setTick] = react.useState(0);
+  const [tick2, setTick] = react.useState(0);
   const [draft, setDraft] = react.useState("");
   const [editingId, setEditingId] = react.useState(null);
   const listRef = react.useRef(null);
@@ -2426,9 +2426,9 @@ function StudioChatPanel({
   );
   const messages = react.useMemo(
     () => meeting.chatMessages().filter((row) => !row.targetUserIds?.length),
-    [meeting, tick]
+    [meeting, tick2]
   );
-  const pinned = react.useMemo(() => meeting.pinnedChatMessages(), [meeting, tick]);
+  const pinned = react.useMemo(() => meeting.pinnedChatMessages(), [meeting, tick2]);
   const limit = meeting.chatMaxTextLimit();
   const pictures = react.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
@@ -2928,6 +2928,171 @@ function StudioSidePanel({
     ] })
   ] });
 }
+
+// src/studio/lib/audio-levels.ts
+var LEVEL_SENSITIVITY = 4;
+var LEVEL_ATTACK = 0.55;
+var LEVEL_DECAY = 0.12;
+var SPEAKING_ON = 0.12;
+var SPEAKING_OFF = 0.06;
+var SPEAKING_HOLD_MS = 180;
+var tracks = /* @__PURE__ */ new Map();
+var ctx2 = null;
+var frame = 0;
+var tickRunning = false;
+function audioContextCtor2() {
+  if (typeof window === "undefined") return null;
+  return window.AudioContext || window.webkitAudioContext || null;
+}
+function ensureContext2() {
+  const AudioCtx = audioContextCtor2();
+  if (!AudioCtx) return null;
+  if (!ctx2 || ctx2.state === "closed") {
+    ctx2 = new AudioCtx();
+  }
+  return ctx2;
+}
+function rmsFromTimeDomain(data) {
+  if (data.length === 0) return 0;
+  let sum = 0;
+  for (let i = 0; i < data.length; i += 1) {
+    const centered = ((data[i] ?? 128) - 128) / 128;
+    sum += centered * centered;
+  }
+  return Math.sqrt(sum / data.length);
+}
+function normalizeAudioLevel(rms) {
+  return Math.min(1, Math.max(0, rms * LEVEL_SENSITIVITY));
+}
+function smoothAudioLevel(previous, raw) {
+  const factor = raw > previous ? LEVEL_ATTACK : LEVEL_DECAY;
+  return previous + (raw - previous) * factor;
+}
+function nextSpeakingGate(gate, level, now) {
+  if (!gate.speaking) {
+    if (level >= SPEAKING_ON) {
+      return { speaking: true, quietSince: null };
+    }
+    return { speaking: false, quietSince: null };
+  }
+  if (level >= SPEAKING_OFF) {
+    return { speaking: true, quietSince: null };
+  }
+  const quietSince = gate.quietSince ?? now;
+  if (now - quietSince >= SPEAKING_HOLD_MS) {
+    return { speaking: false, quietSince: null };
+  }
+  return { speaking: true, quietSince };
+}
+function tick() {
+  for (const entry of tracks.values()) {
+    entry.analyser.getByteTimeDomainData(entry.data);
+    const raw = normalizeAudioLevel(rmsFromTimeDomain(entry.data));
+    entry.smoothed = smoothAudioLevel(entry.smoothed, raw);
+    for (const cb of entry.listeners) {
+      cb(entry.smoothed);
+    }
+  }
+  if (tracks.size > 0) {
+    frame = requestAnimationFrame(tick);
+    return;
+  }
+  tickRunning = false;
+  frame = 0;
+}
+function startTick() {
+  if (tickRunning) return;
+  tickRunning = true;
+  frame = requestAnimationFrame(tick);
+}
+function stopTickIfIdle() {
+  if (tracks.size > 0 || !frame) return;
+  cancelAnimationFrame(frame);
+  tickRunning = false;
+  frame = 0;
+}
+function subscribeStudioAudioLevel(track, cb) {
+  const context = ensureContext2();
+  if (!context) return () => void 0;
+  void context.resume();
+  const id = track.id;
+  let entry = tracks.get(id);
+  if (!entry) {
+    const source = context.createMediaStreamSource(new MediaStream([track]));
+    const analyser = context.createAnalyser();
+    analyser.fftSize = 512;
+    analyser.smoothingTimeConstant = 0;
+    source.connect(analyser);
+    entry = {
+      source,
+      analyser,
+      data: new Uint8Array(analyser.fftSize),
+      refs: 0,
+      smoothed: 0,
+      listeners: /* @__PURE__ */ new Set()
+    };
+    tracks.set(id, entry);
+  }
+  entry.refs += 1;
+  entry.listeners.add(cb);
+  startTick();
+  return () => {
+    const current = tracks.get(id);
+    if (!current) return;
+    current.listeners.delete(cb);
+    current.refs -= 1;
+    if (current.refs <= 0) {
+      current.source.disconnect();
+      current.analyser.disconnect();
+      tracks.delete(id);
+    }
+    stopTickIfIdle();
+  };
+}
+
+// src/studio/hooks/use-speaking-glow.ts
+function clearSpeakingGlow(el) {
+  el.style.removeProperty("--livo-speaking-level");
+  el.removeAttribute("data-speaking");
+}
+function useSpeakingGlow({
+  track,
+  enabled,
+  reducedMotion
+}) {
+  const [el, setEl] = react.useState(null);
+  const gateRef = react.useRef({ speaking: false, quietSince: null });
+  const setRef = react.useCallback((node) => {
+    setEl(node);
+  }, []);
+  react.useEffect(() => {
+    if (!el || !enabled || !track) {
+      if (el) clearSpeakingGlow(el);
+      gateRef.current = { speaking: false, quietSince: null };
+      return;
+    }
+    const unsubscribe = subscribeStudioAudioLevel(track, (level) => {
+      const node = el;
+      gateRef.current = nextSpeakingGate(gateRef.current, level, Date.now());
+      if (gateRef.current.speaking) {
+        node.dataset.speaking = "true";
+        if (!reducedMotion) {
+          node.style.setProperty("--livo-speaking-level", String(level));
+        } else {
+          node.style.removeProperty("--livo-speaking-level");
+        }
+        return;
+      }
+      clearSpeakingGlow(node);
+    });
+    return () => {
+      unsubscribe();
+      clearSpeakingGlow(el);
+      gateRef.current = { speaking: false, quietSince: null };
+    };
+  }, [el, enabled, reducedMotion, track]);
+  return setRef;
+}
 function DropdownMenu({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Root, { "data-slot": "dropdown-menu", ...props });
 }
@@ -3076,12 +3241,18 @@ function StudioTile({
   const onStage = isOnStage(tile.stageStatus);
   const [confirm, setConfirm] = react.useState(null);
   const showMenu = (canModerate || canManageStage) && !tile.isSelf;
+  const glowRef = useSpeakingGlow({
+    track: tile.kind === "screen" || !tile.audioEnabled ? null : meeting.participantAudioTrack(tile.id),
+    enabled: onStage,
+    reducedMotion
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "article",
     {
+      ref: glowRef,
       "aria-label": tile.name,
       className: cn(
-        "bg-muted relative overflow-hidden rounded-xl",
+        "livo-studio-tile bg-muted relative overflow-hidden rounded-xl",
         compact ? "aspect-video w-40 shrink-0 md:w-full" : tile.kind === "screen" ? "min-h-0 flex-1 md:min-h-48" : fill ? "size-full min-h-0 md:aspect-video md:h-auto" : "aspect-video"
       ),
       children: [
@@ -3111,6 +3282,13 @@ function StudioTile({
             contain: tile.kind === "screen"
           }
         ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "livo-studio-tile-glow pointer-events-none absolute inset-0 z-20 rounded-xl"
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-0 bottom-0 z-10 flex items-end justify-between gap-2 bg-linear-to-t from-black/70 to-transparent p-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "min-w-0 truncate text-xs font-medium text-white", children: [
             tile.name,
@@ -3253,9 +3431,7 @@ function StudioStage({
   onOpenPeople
 }) {
   const displayTiles = expandStudioTiles(participants);
-  const stage = studioStageLayout(displayTiles, {
-    activeSpeakerId: meeting.activeSpeakerId()
-  });
+  const stage = studioStageLayout(displayTiles);
   const sharing = stage.spotlight.length > 0;
   const overflowLabel = labels.stageOverflow.replace(
     "{count}",
@@ -3588,7 +3764,7 @@ function StudioRoom({
   const [screenRequestPending, setScreenRequestPending] = react.useState(false);
   const [pending, setPending] = react.useState(false);
   const [publishing, setPublishing] = react.useState(false);
-  const [tick, setTick] = react.useState(0);
+  const [tick2, setTick] = react.useState(0);
   const [leaveState, setLeaveState] = react.useState(null);
   const [sideTab, setSideTab] = react.useState(null);
   const [settingsOpen, setSettingsOpen] = react.useState(false);
@@ -3832,7 +4008,7 @@ function StudioRoom({
     });
   }, [meeting]);
   const sawParticipants = react.useRef(false);
-  const participants = react.useMemo(() => meeting.participants(), [meeting, tick]);
+  const participants = react.useMemo(() => meeting.participants(), [meeting, tick2]);
   react.useEffect(() => {
     const other = duplicateSelfParticipant(participants);
     if (!other) return;
@@ -3847,22 +4023,22 @@ function StudioRoom({
     () => participants.filter((row) => isOnStage(row.stageStatus)),
     [participants]
   );
-  const waitlisted = react.useMemo(() => meeting.waitlisted(), [meeting, tick]);
+  const waitlisted = react.useMemo(() => meeting.waitlisted(), [meeting, tick2]);
   const connectionState = react.useMemo(
     () => meeting.connectionState(),
-    [meeting, tick]
+    [meeting, tick2]
   );
   const lastMeetingError = react.useMemo(
     () => meeting.lastMeetingError(),
-    [meeting, tick]
+    [meeting, tick2]
   );
   const canManageStage = meeting.canManageStage();
   const stageEnabled = meeting.stageEnabled();
   const stageRequests = react.useMemo(
     () => canManageStage ? meeting.stageRequests() : [],
-    [canManageStage, meeting, tick]
+    [canManageStage, meeting, tick2]
   );
-  const chatMessages = react.useMemo(() => meeting.chatMessages(), [meeting, tick]);
+  const chatMessages = react.useMemo(() => meeting.chatMessages(), [meeting, tick2]);
   const inWaitingRoom = meeting.inWaitingRoom();
   const screenAvailable = canStartScreenShare(participants);
   const durableScreenBlock = screenShareBlock(
@@ -5781,6 +5957,9 @@ function studioMeetingFromRtk(raw) {
     localVideoTrack() {
       return meeting.self?.videoTrack ?? null;
     },
+    participantAudioTrack(participantId) {
+      return participantFor(participantId)?.audioTrack ?? null;
+    },
     participantVideoTrack(participantId) {
       return participantFor(participantId)?.videoTrack ?? null;
     },