Overview
Introduction
Vuer M3U is a generalized m3u8 playlist engine that extends HLS beyond video. Standard HLS maps time ranges to .ts video segments — vuer-m3u extends that to support JSONL, WebVTT, MessagePack, Parquet, custom binary, and more, all synchronized to a single shared timeline.
Why Vuer M3U?
Robotics and teleoperation data doesn't live in one stream. A single experiment episode might contain:
- Video — camera feeds
- IMU — accelerometer + gyroscope at 100 Hz+
- Joint angles / end-effector pose — high-rate state
- Action labels — discrete phase annotations (
reach,grasp,place) - Subtitles — human operator notes
All need to play back in sync, be scrubbed, and be inspected together. Vuer M3U reuses the battle-tested m3u8 format for all of them, with a pluggable decoder system and a shared timeline clock.
Features
| Feature | Description |
|---|---|
| Shared Timeline | One TimelineClock drives all views — play, pause, seek, rate, loop |
| Context-based wiring | <ClockProvider> feeds the clock to every hook and view in the tree |
| M3U8 Parsing | Standard HLS tags; chunk format inferred from file extensions |
| LRU Cache + Prefetch | Segments are cached and prefetched ahead automatically |
| Live Polling | Omit #EXT-X-ENDLIST — engine polls for new segments |
| Pluggable Decoders | Register custom decoders globally or per-engine |
| Framework Agnostic Core | TimelineClock and Playlist work without React |
API Overview
| Export | Kind | Purpose |
|---|---|---|
TimelineContainer · defaultTimelineViews | Component · Map | Multi-track timeline (trends over time). Dispatches each dtype to a lane. |
TrackerContainer · defaultTrackerViews | Component · Map | Multi-track dashboard (instant state at clock.time). Dispatches each dtype to a view. Same TimelineConfig drives both. |
ClockProvider · useClockContext | Component · Hook | Share one TimelineClock across every hook / view / container in the tree. |
useTimeline · useClockValue | Hooks | Clock lifecycle + discrete state · throttled clock.time at N fps. |
usePlaylist · useSegment · useSegmentTrack · useMergedTrack · useTrackSample | Hooks | The 4-layer data model — see Hooks. |
TimelineController | Component | Bottom-mounted scrubber + play/pause + rate + loop (optional). |
VideoPlayer · SubtitleView · ActionLabelView · DetectionBoxView · BarTrackView · ImuChartView · ImuGizmoView · JointAngleView · PoseView | Components | The pre-built views — direct-import or dispatch via <TrackerContainer>. |
TimelineClock · Playlist | Classes | Pure time source · parser + loader + cache + live poll (framework-agnostic). |
registerDecoder · findBracket · sampleTrack | Functions | Global decoder registration · keyframe lookup · imperative sampling. |