Live Video Player

name: "Live Video Player"
short_description: A live-stream player with a pulsing LIVE badge, viewer count, and latency indicator.
long_visual_description: >
  A 16:9 stream surface with a LIVE badge, latency label, and live viewer count across the
  top, and a bottom control bar with play/pause, mute, and a "Live edge" indicator — no
  scrubber, since live plays at the edge.

use_cases:
  - Live stream playback (gaming, events, talks).
  - Live sports or match broadcast.
  - Live shopping or auction stream.
  - Webinar or town-hall live view.
  - Breaking-news live feed.

recommended_for:
  - Playing a live stream with live-specific affordances.
avoid_for:
  - On-demand video with seeking (use video-player).

markets:
  - Global

example_usage: >
  Show a pulsing LIVE badge, the current viewer count, and an optional latency label.
  Provide src pointing at an HLS playlist (.m3u8) for real playback. HLS delivery depends
  on hls.js (github.com/video-dev/hls.js): it is loaded lazily from a CDN only when a
  stream is present, while Safari/iOS use native HLS. The URL rides on data-src (not src)
  so nothing resolves to the page URL when empty. The demo and Storybook use the public
  test stream https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8.

props:
  poster: The poster/preview frame.
  src: The HLS (.m3u8) stream URL, played via hls.js (native HLS on Safari/iOS).
  viewers: The live viewer count label.
  latency: Optional latency mode label.
  sync_id: Optional id that links satellite components (transcript/chapters) to this stream.

example_prompts:
  - "Add a live player with a LIVE badge and viewer count."
  - "Add a low-latency live stream player."

relationships:
  parents:
    - layout/split-view
  related:
    - video/video-transcript
    - video/video-chapters

lifecycle: experimental
content_model: A live stream surface with LIVE/viewer/latency indicators and basic controls.

theming:
  tokens_used:
    - --color-danger
    - --color-danger-contrast
    - --radius-card
    - --radius-control
    - --shadow-card

editorial_guidance: >
  Keep the viewer count live and remove the LIVE badge the instant the stream ends.

categorization:
  category: Video
  subcategory: Live
  atomic_type: organism
  usage_type: [player, media]
  maturity: ai-generated
  wcag:
    level: AA
    notes: Controls are real buttons with aria-pressed; the LIVE state and viewer count are real text; the pulsing dot is decorative.
  keyboard_support: Play and mute activate on Enter/Space.
  seo_score: 35
  text_direction: both