apiVersion: capsule.dev/v0.1
kind: Capsule
name: lkmeet-livekit-ui-components
version: 0.1.0
type: library
purpose:
summary: '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
interfaces:
provides:
- kind: library
name: CameraSettings
description: React component for managing camera devices and virtual backgrounds.
- kind: library
name: MicrophoneSettings
description: React component for managing microphone devices and noise cancellation.
- kind: library
name: KeyboardShortcuts
description: React component for global keyboard shortcuts to control media.
- kind: library
name: RecordingIndicator
description: React component to visually indicate if a meeting is being recorded.
- kind: library
name: DebugMode
description: React component providing a debug overlay for LiveKit room information
and simulation.
- kind: library
name: SettingsMenu
description: React component for a comprehensive settings menu for media and recording.
requires:
- kind: http_api
name: /api/record/start
from_capsule: lkmeet-livekit-recording-api
description: Required by SettingsMenu to start recording.
- kind: http_api
name: /api/record/stop
from_capsule: lkmeet-livekit-recording-api
description: Required by SettingsMenu to stop recording.
dependencies:
capsules:
- name: lkmeet-livekit-client-utils
version: '>=0.1.0'
agent:
summary_for_ai: '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.
'
verification:
invariants:
- 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.
x-reuse:
notes: 'The `BACKGROUND_IMAGES` array in `CameraSettings.tsx` contains hardcoded
paths to specific background images (`public/background-images/`). These will
need to be replaced or parameterized. The `toast` styling in `RecordingIndicator.tsx`
is specific to the `lk-button` class and colors. The Datadog integration in `Debug.tsx`
(using `NEXT_PUBLIC_DATADOG_CLIENT_TOKEN` and `NEXT_PUBLIC_DATADOG_SITE`) is specific
and should be removed or made optional. Keyboard shortcuts (Cmd/Ctrl-Shift-A,
Cmd/Ctrl-Shift-V) are hardcoded.
'
x-reconstruct:
install: install.json