TrackList

TrackList renders the label column for each track, showing the track name and clip count. Tracks can be resized by dragging the separator between them.

Live Example

Usage

import { TrackList, TimelineProvider } from '@timelinx/ui';

<TimelineProvider engine={engine}>
  <TrackList
    trackHeights={{ v1: 80, a1: 68 }}
    onTrackHeightChange={(id, h) => setHeights(prev => ({ ...prev, [id]: h }))}
    clipCounts={new Map([['v1', 3], ['a1', 1]])}
  />
</TimelineProvider>

Props

Context Requirement

TrackList must be inside a TimelineProvider. It reads the engine to enumerate tracks, resolve track types, and render the label column for each track in the timeline.