Views

SubtitleView

Display W3C WebVTT subtitles synchronized to the shared clock.

Compatible dtypes: subtitle

Purpose

Each chunk is a standalone .vtt file. useSegment loads the current chunk; the view displays whichever cue's [start, end) contains the current time.

Props

Prop	Type	Default	Description
`src`	`string`	—	m3u8 playlist URL
`clock`	`TimelineClock \| null`	context	Falls back to `<ClockProvider>`
`className`	`string`	—	Wrapper class

Data Schema

Standard WebVTT:

WEBVTT
 
00:00:00.000 --> 00:00:02.500
System initialization
 
00:00:02.500 --> 00:00:05.000
Calibration running

Cue timestamps are absolute seconds on the playlist timeline
One cue visible at a time — if cues overlap, the first match wins

Usage

Loading demo...

import {
  useTimeline,
  ClockProvider,
  TimelineController,
  SubtitleView,
} from '@vuer-ai/vuer-m3u'

const SUBTITLES_URL = '/vuer-m3u-demo/subtitles/playlist.m3u8'

export function SubtitleViewDemo() {
  const { clock, state, play, pause, seek, setPlaybackRate, setLoop } = useTimeline()

  return (
    <ClockProvider clock={clock}>
      <SubtitleView src={SUBTITLES_URL} />
      <TimelineController
        state={state}
        onPlay={play}
        onPause={pause}
        onSeek={seek}
        onSpeedChange={setPlaybackRate}
        onLoopChange={setLoop}
      />
    </ClockProvider>
  )
}

Under the Hood

Pulls raw VTT text via useSegment<string>, parses with a small built-in WebVTT parser, and polls time with useClockValue(10) for cue transitions.