Stream Stats Bar

InstallationCopy Anchor Link

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

This adds stream-stats-bar.tsx and its sparkline, stats-sparkline.tsx, and installs recharts.

UsageCopy Anchor Link

import {
  DEFAULT_STATS_LAYOUT,
  StreamStatsBar,
} from "@/components/blocks/stream-manager/stream-stats-bar";
import type { StatItem } from "@/components/blocks/stream-manager/stream-stats-bar";

const items: StatItem[] = [
  {
    id: "session",
    label: "Session",
    value: "30:44",
    badge: "live",
    tone: "neutral",
    details: [{ label: "Started", value: "8:12 PM" }],
    description: "On air for 30:44",
  },
  {
    id: "viewers",
    label: "Viewers",
    value: "1.2k",
    tone: "neutral",
    spark: [880, 940, 1010, 1232],
    details: [{ label: "YouTube", value: "812", platform: "youtube" }],
    description: "1.2k viewers, peak 1.4k",
  },
];

<StreamStatsBar items={items} layout={layout} onLayoutChange={setLayout} />;

Each stat is plain data you compute: its value as shown, a unit, a change, a tone, its sparkline points and its hover card's rows. The bar never measures anything itself.

• Never an unmeasured zero. Give a stat only when its source exists for this session, and show "–" with the reason in its details when a number can't be read.
• Quiet when fine. Numbers stay monochrome and tabular. Tone lives in the session chip (ON AIR is the only emphasis) and in a stat's sparkline when it's in trouble.
• Main slots first. The first three stats in the layout are drawn larger and never clipped: by default the clock, viewers and followers. The rest follow after a hairline in a clipped, wrapping row, so a stat that doesn't fit drops off the end whole.

ExamplesCopy Anchor Link

Off air, with the screen hiddenCopy Anchor Link

Off air the clock says so in the subtle tier. screenHidden closes the bar with the "Screen hidden" chip, which never moves a stat.

Arranging statsCopy Anchor Link

With onLayoutChange, the streamer drags a stat onto another to move it, and right-clicks the bar to show or hide stats, move the one under the pointer, or reset. The clock and the viewer count can't be hidden or leave the main slots: the viewer count is never hidden while live. Keep the layout per machine, as Videorc does in localStorage. Without onLayoutChange the order is fixed.

arrangeStats, moveStat, setStatHidden and statsLayoutIsDefault are the rules, and STAT_NAMES the stats' names, for a menu of your own (the Stream Manager Status Bar folds the same choices into its ⋯ menu).

ResponsiveCopy Anchor Link

The sparklines are a Wide luxury: they appear when the @container/stream-manager around the bar is 1,040 px or wider. Below it the number is the reading. The examples here wrap the bar in that container; the Stream Manager is one.

ThemingCopy Anchor Link

AccessibilityCopy Anchor Link

The bar is a region named "Stream stats". Each stat is one image named by its description, the whole reading in words, and a stat with details is a tab stop whose hover card also opens on focus. An arrangeable bar is a tab stop too, so its menu opens from the keyboard.

API referenceCopy Anchor Link

StatItemCopy Anchor Link

StatsLayoutCopy Anchor Link