Activity Feed

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @videorc/activity-feed

UsageCopy Anchor Link

import { ActivityFeed } from "@/components/blocks/stream-manager/activity-feed";
import type { ActivityItem } from "@/components/blocks/stream-manager/activity-feed";

const items: ActivityItem[] = [
  {
    id: "a1",
    kind: "subscription",
    platform: "twitch",
    name: "nightowl_jonas",
    short: "Resub · 14 months",
    line: "Resubscribed for 14 months at Tier 1",
    message: "Fourteen months of two-camera streams.",
    time: "1m",
  },
];

<ActivityFeed
  items={items}
  onShowOnStream={showOnStream}
  onThank={thankInChat}
  platforms={["youtube", "twitch", "x"]}
/>;

Activity is structured events, never chat text. Each event is plain data: who (name), the fact at a glance (short: "Resub · 14 months"), the sentence (line, on hover and for Copy), the viewer's own words, and the time as you show it ("now", "2m"). The pane derives each event's kind chip from its kind.

• A row leads with who. An event about one named viewer or channel shows their avatar, or their initials until it loads. Counts the platform never named (unnamed), announcements and destinations keep their glyph.
• One tint per row, like chat: a channel point reward paints bg-reward/8, a tip chat's paid fill without its ring, and a sub or membership the member plate. The row on stream wears the live plate instead.
• The ⋯ menu holds Show on stream (with a messageId), Thank in chat, Reconnect Twitch on an unnamed Twitch count, and Copy.

The pane's tabs, Activity beside Buddy, belong to the window: the Stream Manager puts them over the pane, as the demo does.

ExamplesCopy Anchor Link

Empty, with what a platform can't shareCopy Anchor Link

Until something happens the pane says what will show, and note says what never can on these platforms: activityCapabilityNote(platforms, options) writes it. With twitchNeeds.followNames and onReconnectTwitch, Reconnect Twitch asks for the permission that names each follower.

ResponsiveCopy Anchor Link

Inside the Stream Manager the filter strip follows the window's width: from 640 px the platform and kind chips are inline, with each kind's count, and below it they fold into one Filters menu. On its own the chips always show.

ThemingCopy Anchor Link

AccessibilityCopy Anchor Link

The pane is a region named "Activity", and its rows an ordered list. A row's sentence is what a screen reader hears when the short fact says less; on screen it's the fact's tooltip, never a native title. The kind chips are a group named "Filter activity", each explained on hover. Auto-show's switch is named by what it does.

API referenceCopy Anchor Link

ActivityItemCopy Anchor Link

ACTIVITY_FILTERS, activityFilterFor, filterActivity, activityFilterCounts, activityRowShowsPerson, activityRowTint and activityRowActions are the rules the pane follows.