Views

ActionLabelView

Discrete action / phase annotations — highlights the events active at the current time.

Compatible dtypes: action_label

Purpose

Each segment carries a self-contained list of labeled time ranges (e.g., reach, grasp, place). Uses useSegment — one segment is loaded at a time, and the view highlights every event whose [ts, te) covers the current clock.

Props

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

Data Schema

import type { ActionEvent } from '@vuer-ai/vuer-m3u';
 
type ActionEvent = {
  ts: number;         // event start, seconds
  te: number;         // event end, seconds
  label: string;      // short identifier shown in the UI
  [key: string]: unknown;   // free-form extras (operator id, score, notes …)
};

Field	Required	Notes
`ts`	yes	Seconds on playlist timeline
`te`	yes	Seconds. Must be `> ts`; events may overlap
`label`	yes	Shown as the row label
anything else	no	Preserved through decoding; ignore unless your custom view consumes it

Events must stay inside their enclosing segment's [startTime, endTime) — the library loads one segment at a time.

Example

{"ts": 0.0, "te": 2.5, "label": "reach", "operator": "alice"}
{"ts": 2.5, "te": 4.8, "label": "grasp", "operator": "alice", "object": "cup"}
{"ts": 4.8, "te": 7.2, "label": "lift",  "operator": "alice"}
{"ts": 7.2, "te": 9.0, "label": "place", "operator": "alice", "target": "shelf_a"}

Extra fields (operator, object, target, …) pass through decoding unchanged; the default view ignores them but custom views can read them.

Usage

Loading demo...

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

const ANNOTATIONS_URL = '/vuer-m3u-demo/annotations/playlist.m3u8'

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

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

Under the Hood

The view reads the current segment via useSegment<ActionEvent[]>, polls time at 4 fps with useClockValue, and filters the list for overlap. See Custom Views — discrete data for a hand-rolled mini version.