@atrium-ui/timeline v0.1.1

Timeline

Ref:
https://github.com/luckydye/gyro/tree/master/components/video-editor
and
https://github.com/luckydye/timeline

A general purpose timeline component

A timeline/sequencer that displays clips (two one-dimensional coordinates) and is able to edit those coordinates in one dimension.

The timeline or sequencer display multiple tracks (in terms multiple on-dimensional spaces) which clips can be moved between.

The timeline can display, create and edit markers to be displayed on this time-scale on top.

Terms:

Timeline/Sequencer -> The one-dimensional scale which clips are located in.

Time-Scale -> The on-dimensional space the sequencer (or timeline) visualizes.

Track -> A space which is occupied by any amount of clips.

Clip -> Clips live in a Track but should not overlap each other. Overlap is only created in a multitrack space.

Marker -> Marks a point on the time-scale.

Use Cases and features

• Keyframing
• Clip cutting
• Mute Tracks
• Lock Tracks

Data Types

interface Clip {
    id: string;	// unique identifier
    track: string; // track id
    label: string; // name or label of clip
	offset: number; // start time of clip
    length: number; // length of clip in seconds (assuming the time scale is in seconds)
    type: string; // clip type identifier
    properties: Object; // keyframeable custom properties for any clip type
}

interface Track {
    id: string;	// unique identifier
    timeline: string; // timeline id
    label: string; // name or label of track
    muted: boolean; // track muted
    locked: boolean; // track locked
    type: string; // track type that matches up with clips
}

interface Timeline {
    id: string;	// unique identifier
    title: string; // name or label of timeline
    offset: number; // offset in seconds to the start of time
    length: number; // length in seconds of timeline 
    time: number; // time at which the playhead is located
    playspeed: number; // time speed multiplier
    scale: number; // timeline ui scale factor
}

interface Marker {
	id: string;	// unique identifier
    position: number; // position of marker in seconds
    color: number; // hex number of color
    label: string; // marker label
}

interface Keyframe {
	id: string;	// unique identifier
    position: number; // position of keyframe in seconds
    value: number; // keyframe value
    interpolation: string; // interpolation type
    bezier: Array<Vec2>; // bezier interpolation vectors
}

APIs

• Custom Events for Play/Pause/Scrubbing/Content Change.
• Externally register custom Clip and Track types.
• Drag and Drop handlers.
• While playing timeline emits state events for every playing clip with keyframe values, time, etc.
• Create clips and tracks programmatically and with drag and drop.
• Sync playback with smpte input signal