Stream Manager Status Bar

InstallationCopy Anchor Link

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

UsageCopy Anchor Link

import { StreamManagerStatusBar } from "@/components/blocks/stream-manager/stream-manager-status-bar";

<StreamManagerStatusBar
  destinations={destinations}
  onClear={clearView}
  onMarkClip={(seconds) => saveClip(seconds)}
  onOpenPreview={openPreview}
  onPinnedChange={setPinned}
  onSearchChat={focusSearch}
  onWriteInChat={focusComposer}
  pinned={pinned}
/>

The left side is chat, per destination: its 20 px mark and a status dot. Quiet when fine: a platform that reads and sends says nothing more, and a word appears only when something needs the streamer ("X read-only", "Twitch reconnect to send"), or the destination's own words when chat is stuck. The details open on hover and on focus: what chat can do there, the account it reads as, and any destinationNotes.

The right side is the window's controls, each one there only when you pass its callback, and every one labelled:

• the window's keys as clickable hints: ⌘F Search, ⌘L Write and ⌘J Buddy;
• Hide screen, Keep on top (Pin Window Button) and Highlight position (a menu);
• Clip 30 s and 1 min, with the clip icon and words: mid-stream there's no time to hover;
• Banners (a menu of checks), Clear (it asks first, because it can't be undone) and Open Preview.

ExamplesCopy Anchor Link

NarrowCopy Anchor Link

Below 800 px of Stream Manager the hints keep their keys and the words go to screen readers. Below 640 px every control folds into one ⋯ menu, "More Stream Manager actions", with the stats bar's show, hide and reset choices; a dot that isn't green keeps its word beside it.

ResponsiveCopy Anchor Link

The bar folds by the width of the @container/stream-manager around it, never the viewport: from 1,040 px Hide screen shows its word, from 800 px the hints show theirs, and below 640 px the ⋯ menu takes over. The examples wrap it in that container; the Stream Manager is one. On its own, outside the container, every control shows.

ThemingCopy Anchor Link

KeyboardCopy Anchor Link

The hints print the window's keys; the Stream Manager answers them.

AccessibilityCopy Anchor Link

Each chat state is a button named by its first line ("X chat: read-only"). Every action has a name and a tooltip, never a native title; an icon alone is named by its tooltip. Hide screen says why when it can't run, through Disabled Reason. Clear asks in a Confirm Dialog first.

API referenceCopy Anchor Link