@caitdesk/viewer

@caitdesk/viewer

Caption display components, settings panel, and WebSocket source for CaitDesk viewers.

Installation

npm install @caitdesk/viewer
# Peer dependencies
npm install svelte bits-ui @lucide/svelte tailwindcss tw-animate-css

Quick Start

Drop-in CaptionViewer handles connection, display, and settings:

<script>
  import { CaptionViewer } from '@caitdesk/viewer';
</script>

<CaptionViewer
  wsUrl="wss://broadcast.example.com/ws?ticket=..."
  eventId="evt-123"
  eventStatus="live"
/>

CSS Setup

Import the theme CSS in your app's stylesheet:

@import "tailwindcss";
@import "@caitdesk/viewer/styles/base.css";
@import "@caitdesk/viewer/styles/theme-shared.css";
@import "@caitdesk/viewer/styles/theme-viewer.css";

/* Include viewer package in Tailwind source scanning */
@source "node_modules/@caitdesk/viewer/dist/**/*.{svelte,js}";

Individual Components

For more control, use the individual building blocks:

<script>
  import {
    CaptionDisplay,
    CaptionSettingsPanel,
    createBroadcastCaptionSource,
    createCaptionSettingsStore,
    VIEWER_FIELDS,
    EVENT_STATUS,
  } from '@caitdesk/viewer';
</script>

Components

Component	Description
CaptionViewer	All-in-one: connects WebSocket, renders captions, shows settings gear
CaptionDisplay	Caption renderer with transcript/subtitle modes, stream flow, auto-scroll
CaptionPreview	Lightweight style preview with sample text
CaptionSettingsPanel	Sheet drawer for editing caption display settings

Source

Export	Description
createBroadcastCaptionSource(opts)	WebSocket client with auto-reconnect, ping, latency tracking

Store

Export	Description
createCaptionSettingsStore(eventId, defaults?)	3-layer settings merge: system defaults -> event -> localStorage

Settings

Export	Description
VIEWER_FIELDS	Field descriptors for caption display + style settings
groupSettingsFields(fields)	Group fields by tab (Display / Styles)
formatSettingsValue(field, value)	Format a value for read-only display

Types

Export	Description
CaptionDisplaySettings	All caption appearance options
CaptionSource	Interface for any caption feed
BroadcastCaptionSource	Extended source with viewer count, language selection
EVENT_STATUS	Event lifecycle states
TRANSLATION_LANGUAGES	ISO 639-1 code -> display name map

CaptionViewer Props

Prop	Type	Required	Description
wsUrl	string	Yes	WebSocket URL with auth ticket
eventId	string	Yes	Event identifier
eventStatus	string	Yes	Initial event status (live, scheduled, ended)
scheduledStart	string	No	ISO date for scheduled events
description	string	No	Event description
captionDisplay	Partial<CaptionDisplaySettings>	No	Event-level display defaults

License

Proprietary