lkmeet-livekit-ui-components v0.1.0

library

capsule://quake0day/[email protected]

Offers a suite of reusable React UI components and associated styles for common LiveKit features, such as camera and microphone settings, keyboard shortcuts for media control, a recording indicator, and a debug overlay.

Owns

Camera and microphone configuration UI
Keyboard shortcut handling for media toggles
Visual indicator for recording status
Developer debug overlay for LiveKit room info
Settings menu for media and recording options

Does not own

Core LiveKit client logic
Application-level routing or state management

AI orientation

This capsule contains UI components that interact with LiveKit client SDK and potentially backend APIs. Ensure components are highly configurable and visually consistent. Pay attention to how `SettingsMenu` interacts with the recording API and how `DebugMode` integrates with Datadog. The virtual background feature in `CameraSettings` uses specific image paths.

Provides

library:CameraSettings — React component for managing camera devices and virtual backgrounds.
library:MicrophoneSettings — React component for managing microphone devices and noise cancellation.
library:KeyboardShortcuts — React component for global keyboard shortcuts to control media.
library:RecordingIndicator — React component to visually indicate if a meeting is being recorded.
library:DebugMode — React component providing a debug overlay for LiveKit room information and simulation.
library:SettingsMenu — React component for a comprehensive settings menu for media and recording.

Requires

http_api:/api/record/start from lkmeet-livekit-recording-api — Required by SettingsMenu to start recording.
http_api:/api/record/stop from lkmeet-livekit-recording-api — Required by SettingsMenu to stop recording.

Dependencies

Capsules

lkmeet-livekit-client-utils >=0.1.0

Invariants (must always hold)

Keyboard shortcuts must not conflict with browser or OS shortcuts.
Media device menus must correctly list available devices.
Recording indicator must accurately reflect the room's recording status.

Source files (8)

Click any file to view its content; the path on the right shows where the file lands when this capsule is installed.

src/lib/CameraSettings.tsx → src/components/livekit/camera-settings.tsx
src/lib/Debug.tsx → src/components/livekit/debug-mode.tsx
src/lib/KeyboardShortcuts.tsx → src/components/livekit/keyboard-shortcuts.tsx
src/lib/MicrophoneSettings.tsx → src/components/livekit/microphone-settings.tsx
src/lib/RecordingIndicator.tsx → src/components/livekit/recording-indicator.tsx
src/lib/SettingsMenu.tsx → src/components/livekit/settings-menu.tsx
src/styles/Debug.module.css → src/components/livekit/debug-mode.module.css
src/styles/SettingsMenu.module.css → src/components/livekit/settings-menu.module.css

Plus capsule.yaml and install.json.

Upstream source

https://github.com/quake0day/livekit-meet-capsules/blob/main/lkmeet-livekit-ui-components/capsule.yaml

Pull this capsule locally:

capsule pull capsule://quake0day/[email protected]

Or render to your terminal:

capsule man capsule://quake0day/[email protected]