main
/**
* The React edge of the voice session.
*
* `voiceSession` owns the single tab-wide Room (see session.ts), so the
* vendored components are fed that same instance through `RoomContext` instead
* of the official `LiveKitRoom`, which would tie the connection to a route.
* `VoiceHost` mounts the parts that must keep working while the user navigates
* away from the channel: remote audio playback and the connection toast.
*/
import { ConnectionStateToast, RoomAudioRenderer, RoomContext } from '@app/vendor/livekit'
import type { ReactNode } from 'react'
import { useVoiceSession } from './react'
import { voiceSession } from './session'
/** Injects the live Room for any subtree that renders official components. */
export function VoiceProvider({ children }: { children: ReactNode }) {
const session = useVoiceSession()
const room = session.roomId ? voiceSession.getRoom() : null
if (!room) return null
return <RoomContext.Provider value={room}>{children}</RoomContext.Provider>
}
/**
* Route-independent audio + connection feedback. Mount once, at the root: the
* toast carries lk- classes, so this wrapper owns the theme attribute that
* scopes the vendored stylesheet.
*/
export function VoiceHost() {
return (
<VoiceProvider>
<div className="voice-host" data-lk-theme="default">
<RoomAudioRenderer />
<ConnectionStateToast />
</div>
</VoiceProvider>
)
}