InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @videorc/stream-manager

This installs every part with it: Chat Message, Chat Toolbar, Chat Composer, Stream Stats Bar, Activity Feed and Stream Manager Status Bar.

UsageCopy Anchor Link

import { StreamManager } from "@/components/blocks/stream-manager/stream-manager";

<StreamManager
  activity={activity}
  destinations={destinations}
  highlight={onStream}
  live
  messages={messages}
  onHighlight={toggleOnStream}
  onSend={send}
  platform={process.platform}
  stats={stats}
/>

The window is presentational: your app owns the session and passes it in as plain data, and every action comes back as a callback. Nothing reaches for Electron, IPC or window.videorc.

A row's click calls onHighlight, and the window shows whatever highlight you pass back: applying while Studio puts it on stream, then live, or failed with its reason.

The windowCopy Anchor Link

• Three tiers by its own width. The body is @container/stream-manager, never the viewport. From 1,040 px Chat sits beside a right pane with Activity and Buddy tabs, and the stats bar draws its sparklines. From 640 px one pane sits behind Chat, Activity and Buddy tabs. Below 640 px (320 minimum) the filters and the status bar's controls fold into menus. Every pane renders once; only its placement changes. Give it any size: a window, a split pane or a docs preview.
• The title row carries the title only. The stats bar says ON AIR, and a finished session (history) gets its own bar with Back to live. Pass the platform you know so the row leaves room for the macOS traffic lights.
• Live and not. While live, a click puts a message on stream, the composer shows, and a row's time and ⋯ wait for the pointer. Off air, chat says how it starts and the rows are plain text.
• Keys. While focus is in the window, ⌘F searches chat, ⌘L writes in it and ⌘J brings Buddy forward. The status bar prints the same keys as clickable hints.
• Replies and thanks fill the composer, never send. A row's ⋯ Reply writes "@name ", and Activity's Thank in chat writes what thankYouDraft returns: the streamer sends.

ExamplesCopy Anchor Link

HistoryCopy Anchor Link

Without live the window reads a session back: history adds its bar with Back to live, the stats are the session's totals, and the rows are plain text with their times. There's no composer, and an empty chat says how it starts.

ThemingCopy Anchor Link

KeyboardCopy Anchor Link

On Windows and Linux the keys are Ctrl. They answer while focus is inside the window, so a page around it keeps its own.

AccessibilityCopy Anchor Link

The title is the window's h1. The stats bar, Chat and Activity are named regions, and the pane tabs are a tab list; Buddy's dot says what it means through buddy.toneLabel, never colour alone. Each part brings its own: see their pages.

API referenceCopy Anchor Link

StreamManagerBuddyCopy Anchor Link