🐛(frontend) promote the active speaker in the carousel layout

The stage stopped re-rendering on ActiveSpeakersChanged when useTracks
moved to `updateOnlyOn: []`, a change made to avoid re-rendering the
whole stage on every speaker update. useVisualStableUpdate promotes
speakers only when the layout renders, so in the focus layout's
carousel a speaker outside the visible tiles was no longer brought
into view. The grid layout already had a fix,
useSpeakerPromotionTrigger, but the carousel did not.

Fix: the carousel now uses the same tripwire on the tiles it
guarantees to show. The tripwire also ignores speakers with no tile in
the layout (e.g. the pinned participant, shown in the focus view);
otherwise they would trigger a useless render on every speaker event.

Enhancement: the active speaker is now pinned near the top of the
column instead of landing anywhere in the visible span:
- the local camera stays first and the top speaker's camera second;
  the rest is still ordered by useVisualStableUpdate
- the top speaker is the loudest remote participant with a tile;
  the local participant is never promoted
- the slot is sticky through silence, and a new speaker only takes it
  after the current one has held it for 2s and only if still speaking,
  so a back-and-forth doesn't make tiles flip
- the slot is reserved before anyone speaks, so the first promotion
  doesn't reshuffle the whole column
- the tripwire still promotes other hidden speakers into the rest

Re-renders: useTopSpeaker only renders when the top speaker changes.
It runs on the same event as the tripwire, and React 18 merges their
updates into a single render.

The ordering (splitCarouselTiles) and the slot timing
(watchTopSpeaker) are framework-free.

CHANGELOG.md

@@ -26,6 +26,9 @@ and this project adheres to
 - 🔒️(frontend) upgrade tiff to fix CVE-2026-4775
 - 🔒️(backend) bind accepted lobby entries to the current username
 - 🔒️(backend) sign lobby participant id
+- 🐛(frontend) omit the default speaker id sent to LiveKit
+- 🐛(frontend) play the speaker test when no output is picked
+- 🐛(frontend) promote the active speaker in the carousel layout
 
 ## [1.34.0] - 2026-10-07
 

src/frontend/src/features/layout/components/CarouselLayout.tsx

@@ -3,6 +3,9 @@ import { getScrollBarWidth } from '@livekit/components-core'
 import * as React from 'react'
 import { TrackLoop, useVisualStableUpdate } from '@livekit/components-react'
 import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
+import { useSpeakerPromotionTrigger } from '../hooks/useSpeakerPromotionTrigger'
+import { useTopSpeaker } from '../hooks/useTopSpeaker'
+import { splitCarouselTiles } from '../utils/splitCarouselTiles'
 
 const MIN_HEIGHT = 130
 const MIN_WIDTH = 140
@@ -66,7 +69,19 @@ export function CarouselLayout({
     setPrevTiles(tilesThatFit)
   }
 
-  const sortedTiles = useVisualStableUpdate(tracks, maxVisibleTiles)
+  const topSpeakerId = useTopSpeaker(tracks)
+  const { head, rest, restSpan } = splitCarouselTiles(
+    tracks,
+    topSpeakerId,
+    maxVisibleTiles
+  )
+  const stableRest = useVisualStableUpdate(rest, restSpan)
+  const sortedTiles = [...head, ...stableRest]
+
+  useSpeakerPromotionTrigger(
+    sortedTiles.slice(0, head.length + restSpan),
+    tracks
+  )
 
   React.useLayoutEffect(() => {
     if (asideEl.current) {

src/frontend/src/features/layout/components/GridLayout.tsx

@@ -46,7 +46,7 @@ export function GridLayout({ tracks, ...props }: GridLayoutProps) {
 
   const { layout } = useGridLayout(gridEl, tracks.length)
   const pagination = usePagination(layout.maxTiles, tracks)
-  useSpeakerPromotionTrigger(pagination.tracks)
+  useSpeakerPromotionTrigger(pagination.tracks, tracks)
 
   useSwipe(gridEl, {
     onLeftSwipe: pagination.nextPage,

src/frontend/src/features/layout/hooks/useSpeakerPromotionTrigger.ts

@@ -8,35 +8,42 @@ import { useEffect, useReducer, useRef } from 'react'
  * Tripwire for speaker promotion.
  *
  * Listens to `RoomEvent.ActiveSpeakersChanged` imperatively and forces ONE
- * re-render of the host component only when an active speaker has none of
- * their tiles are within the visible span (`maxVisibleTiles`). That render
- * re-runs `useVisualStableUpdate`, which reads live `participant.isSpeaking`
- * state and performs the actual swap.
+ * re-render of the host when a speaker has a tile in `allTiles` but none in
+ * `visibleTiles`. That render re-runs `useVisualStableUpdate`, which reads
+ * live `participant.isSpeaking` state and performs the actual swap.
  *
- * Speakers already visible are ignored. Everything else costs zero React work.
+ * Speakers already visible cost nothing, nor do speakers the layout doesn't
+ * show at all (e.g. the pinned participant, rendered by the focus view).
  *
  * Requires the parent to NOT re-render on speaker events itself, i.e.
  * `useTracks(..., { updateOnlyOn: [] })` upstream.
  */
 export function useSpeakerPromotionTrigger(
-  sortedTiles: TrackReferenceOrPlaceholder[]
+  /** Tiles inside the span the layout guarantees to speakers. */
+  visibleTiles: TrackReferenceOrPlaceholder[],
+  /** Every tile the layout shows, visible or not. */
+  allTiles: TrackReferenceOrPlaceholder[]
 ) {
   const room = useRoomContext()
   const [, forceRender] = useReducer((n: number) => n + 1, 0)
 
-  // Refs so the listener reads current values without re-subscribing
-  // and without itself being a render dependency.
-  const tilesRef = useRef(sortedTiles)
-  tilesRef.current = sortedTiles
+  // Read by the listener at event time, so it never re-subscribes.
+  const tilesRef = useRef({ visibleTiles, allTiles })
+  tilesRef.current = { visibleTiles, allTiles }
 
   useEffect(() => {
     const onActiveSpeakersChanged = (speakers: Participant[]) => {
-      const tiles = tilesRef.current
-      const hiddenSpeakerExists = speakers.some(
-        (speaker) =>
-          !tiles.some((t) => t.participant.identity === speaker.identity)
-      )
-      if (hiddenSpeakerExists) {
+      const { visibleTiles, allTiles } = tilesRef.current
+      const hasTileIn =
+        (tiles: TrackReferenceOrPlaceholder[]) => (identity: string) =>
+          tiles.some((t) => t.participant.identity === identity)
+      const isShown = hasTileIn(allTiles)
+      const isVisible = hasTileIn(visibleTiles)
+
+      const isHidden = (identity: string) =>
+        isShown(identity) && !isVisible(identity)
+
+      if (speakers.some(({ identity }) => isHidden(identity))) {
         forceRender()
       }
     }

src/frontend/src/features/layout/hooks/useTopSpeaker.ts

@@ -0,0 +1,33 @@
+import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+import { useRoomContext } from '@livekit/components-react'
+import { useEffect, useRef, useState } from 'react'
+import { watchTopSpeaker } from '../utils/watchTopSpeaker'
+
+/**
+ * Identity of the participant who should hold the top speaker slot, among
+ * those with a tile in `tracks`. See `watchTopSpeaker` for the rules.
+ *
+ * Re-renders the host only when the holder changes. Expects
+ * `useTracks(..., { updateOnlyOn: [] })` upstream.
+ */
+export function useTopSpeaker(tracks: TrackReferenceOrPlaceholder[]) {
+  const room = useRoomContext()
+  const [topSpeakerId, setTopSpeakerId] = useState<string>()
+
+  // Read by the listener at event time; subscribing once keeps the hold
+  // state alive across renders.
+  const tracksRef = useRef(tracks)
+  tracksRef.current = tracks
+
+  useEffect(
+    () =>
+      watchTopSpeaker(room, {
+        isEligible: (identity) =>
+          tracksRef.current.some((t) => t.participant.identity === identity),
+        onChange: setTopSpeakerId,
+      }),
+    [room]
+  )
+
+  return topSpeakerId
+}

src/frontend/src/features/layout/utils/splitCarouselTiles.ts

@@ -0,0 +1,36 @@
+import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+import { Track } from 'livekit-client'
+
+/**
+ * Splits carousel tiles into a fixed head and a rest that is free to reorder.
+ *
+ * Head: the local camera, then the top speaker's camera. The rest goes through
+ * `useVisualStableUpdate`, which only keeps speakers visible within its first
+ * `restSpan` tiles. The head's slots are taken out of that span, so the head
+ * can never push a promoted speaker out of view.
+ *
+ * The speaker slot is reserved even while it is empty: `useVisualStableUpdate`
+ * treats any change of span as a relayout and re-sorts everything, so the span
+ * must not move when the first speaker gets promoted.
+ */
+export function splitCarouselTiles(
+  tracks: TrackReferenceOrPlaceholder[],
+  topSpeakerId: string | undefined,
+  maxVisibleTiles: number
+) {
+  const cameraOf = (match: (t: TrackReferenceOrPlaceholder) => boolean) =>
+    tracks.find((t) => t.source === Track.Source.Camera && match(t))
+
+  const local = cameraOf((t) => t.participant.isLocal)
+  const speaker = topSpeakerId
+    ? cameraOf((t) => t.participant.identity === topSpeakerId)
+    : undefined
+
+  const head = [local, speaker].filter((t) => t !== undefined)
+  const rest = tracks.filter((t) => !head.includes(t))
+
+  const reservedSlots = (local ? 1 : 0) + 1
+  const restSpan = Math.max(maxVisibleTiles - reservedSlots, 1)
+
+  return { head, rest, restSpan }
+}

src/frontend/src/features/layout/utils/watchTopSpeaker.ts

@@ -0,0 +1,63 @@
+import { RoomEvent } from 'livekit-client'
+import type { Room } from 'livekit-client'
+
+/** Minimum time a speaker keeps the top slot before someone else can take it. */
+export const TOP_SPEAKER_HOLD_MS = 2000
+
+type SpeakerSource = Pick<Room, 'on' | 'off' | 'activeSpeakers'>
+
+/**
+ * Calls `onChange` with the participant who should hold the top speaker slot.
+ *
+ * The candidate is the loudest remote speaker for whom `isEligible` is true
+ * (e.g. who has a tile in the layout). The slot is sticky: silence keeps the
+ * current holder. A new speaker only takes over once the holder has had it for
+ * `holdMs`, and only if they are still the loudest at that point; someone who
+ * stops talking before then never steals it. A holder who is no longer
+ * eligible (left, got pinned) is replaced right away.
+ *
+ * `onChange` only fires on an actual change. Returns an unsubscribe function.
+ */
+export function watchTopSpeaker(
+  room: SpeakerSource,
+  {
+    isEligible,
+    onChange,
+    holdMs = TOP_SPEAKER_HOLD_MS,
+  }: {
+    isEligible: (identity: string) => boolean
+    onChange: (identity: string) => void
+    holdMs?: number
+  }
+) {
+  let holder: string | undefined
+  let holdUntil = 0
+  let retry: ReturnType<typeof setTimeout> | undefined
+
+  const evaluate = () => {
+    clearTimeout(retry)
+
+    // `activeSpeakers` is sorted loudest first and is always current, which
+    // the deferred retry needs; the event payload would be stale by then.
+    const candidate = room.activeSpeakers.find(
+      (p) => !p.isLocal && isEligible(p.identity)
+    )?.identity
+    if (!candidate || candidate === holder) return
+
+    const wait = holder && isEligible(holder) ? holdUntil - Date.now() : 0
+    if (wait > 0) {
+      retry = setTimeout(evaluate, wait)
+      return
+    }
+
+    holder = candidate
+    holdUntil = Date.now() + holdMs
+    onChange(candidate)
+  }
+
+  room.on(RoomEvent.ActiveSpeakersChanged, evaluate)
+  return () => {
+    room.off(RoomEvent.ActiveSpeakersChanged, evaluate)
+    clearTimeout(retry)
+  }
+}

src/frontend/src/features/rooms/components/Conference.tsx

@@ -45,6 +45,7 @@ import { userStore } from '@/stores/user'
 import { WatchMediaDeviceErrors } from './WatchMediaDeviceErrors'
 import { MeetDevtools } from '@/features/devtools'
 import { VOICE_AUDIO_CONSTRAINTS } from '@/features/rooms/livekit/utils/constants'
+import { resolveAudioOutputDeviceId } from '@/features/rooms/utils/resolveAudioOutputDeviceId'
 
 export const Conference = ({
   roomId,
@@ -120,7 +121,7 @@ export const Conference = ({
         ...VOICE_AUDIO_CONSTRAINTS,
       },
       audioOutput: {
-        deviceId: userConfig.audioOutputDeviceId ?? undefined,
+        deviceId: resolveAudioOutputDeviceId(userConfig.audioOutputDeviceId),
       },
     }
     // do not rely on the userConfig object directly as its reference may change on every render

src/frontend/src/features/rooms/livekit/components/controls/Device/OutputSoundTester.tsx

@@ -4,6 +4,7 @@ import { RiVolumeUpLine } from '@remixicon/react'
 import { styled } from '@/styled-system/jsx'
 import { Button } from '@/primitives'
 import { canTestAudioOutput } from '@/features/rooms/utils/canTestAudioOutput'
+import { resolveAudioOutputDeviceId } from '@/features/rooms/utils/resolveAudioOutputDeviceId'
 
 // Speaker test in the audiooutput menu footer (Meet-style UX). Outputs have
 // no track: the test plays a bundled file through the selected sink, and
@@ -66,6 +67,8 @@ export const OutputSoundTester = ({
   const audioRef = useRef<HTMLAudioElement>(null)
   const [isPlaying, setIsPlaying] = useState(false)
 
+  const outputId = resolveAudioOutputDeviceId(sinkId)
+
   const latestSinkIdRef = useRef(sinkId)
   latestSinkIdRef.current = sinkId
 
@@ -79,15 +82,15 @@ export const OutputSoundTester = ({
   }, [])
 
   useEffect(() => {
-    if (!sinkId || !canTestAudioOutput()) return
-    audioRef.current?.setSinkId(sinkId).catch(() => {
+    if (!outputId || !canTestAudioOutput()) return
+    audioRef.current?.setSinkId(outputId).catch(() => {
       // Re-routing failed (stale or unplugged device): stop the test rather
       // than keep playing through the previous sink.
       if (latestSinkIdRef.current === sinkId) {
         stopPlayback()
       }
     })
-  }, [sinkId, stopPlayback])
+  }, [outputId, sinkId, stopPlayback])
 
   useEffect(() => {
     const audio = audioRef.current
@@ -108,8 +111,8 @@ export const OutputSoundTester = ({
             // Confirm routing before starting: a no-op when already routed,
             // but rejects on a stale device id, so the test never plays
             // through the wrong sink.
-            if (sinkId && canTestAudioOutput()) {
-              await audio.setSinkId(sinkId)
+            if (outputId && canTestAudioOutput()) {
+              await audio.setSinkId(outputId)
             }
             await audio.play()
             setIsPlaying(true)

src/frontend/src/features/rooms/utils/resolveAudioOutputDeviceId.ts

@@ -0,0 +1,11 @@
+/**
+ * `'default'` means "use the system output". Firefox has no device with that
+ * id, so setSinkId('default') rejects. Omit it and the browser keeps the OS
+ * default, which is the same result.
+ */
+export const resolveAudioOutputDeviceId = (
+  deviceId: string | undefined
+): string | undefined => {
+  if (!deviceId || deviceId === 'default') return undefined
+  return deviceId
+}