Interface TimelineApi

interface TimelineApi {
    onPlayheadMove$: Observable<PlayheadMoveEvent>;
    onReady$: Observable<undefined | TimelineReadyEvent>;
    onScroll$: Observable<TimelineScrollEvent>;
    onScrubberMove$: Observable<ScrubberMoveEvent>;
    onStyleChange$: Observable<TimelineStyle>;
    onTimecodeClick$: Observable<TimecodeClickEvent>;
    onTimecodeMouseMove$: Observable<TimecodeMouseMoveEvent>;
    onZoom$: Observable<TimelineZoomEvent>;
    style: TimelineStyle;
    get descriptionPaneVisible(): boolean;
    get thumbnailVttFile(): undefined | ThumbnailVttFile;
    addTimelineLane(timelineLane: TimelineLaneApi): TimelineLaneApi;
    addTimelineLaneAtIndex(
        timelineLane: TimelineLaneApi,
        index: number,
    ): TimelineLaneApi;
    addTimelineLanes(timelineLanes: TimelineLaneApi[]): TimelineLaneApi[];
    destroy(): void;
    getScrubberLane(): ScrubberLane;
    getTimelineLane<T extends TimelineLaneApi>(id: string): undefined | T;
    getTimelineLanes(): TimelineLaneApi[];
    getZoomPercent(): number;
    loadThumbnailVttFile(vttFile: ThumbnailVttFile): void;
    loadThumbnailVttFileFromUrl(
        vttUrl: string,
    ): Observable<undefined | ThumbnailVttFile>;
    maximizeTimelineLanes(timelineLanes: TimelineLaneApi[]): void;
    minimizeTimelineLanes(timelineLanes: TimelineLaneApi[]): void;
    removeAllTimelineLanes(): void;
    removeTimelineLane(id: string): void;
    removeTimelineLanes(ids: string[]): void;
    scrollToEased(percent: number): Observable<number>;
    scrollToPlayheadEased(): Observable<number>;
    setDescriptionPaneVisible(visible: boolean): void;
    setDescriptionPaneVisibleEased(visible: boolean): Observable<void>;
    settleLayout(): void;
    toggleDescriptionPaneVisible(): void;
    toggleDescriptionPaneVisibleEased(): Observable<void>;
    zoomInEased(): Observable<number>;
    zoomOutEased(): Observable<number>;
    zoomTo(percent: number): number;
    zoomTo(percent: number, zoomFocusPercent: undefined | number): number;
    zoomToEased(percent: number): Observable<number>;
    zoomToEased(
        percent: number,
        zoomFocusPercent: undefined | number,
    ): Observable<number>;
    zoomToMaxEased(): Observable<number>;
}

Hierarchy (View Summary)

Implemented by

Properties

onPlayheadMove$ onReady$ onScroll$ onScrubberMove$ onStyleChange$ onTimecodeClick$ onTimecodeMouseMove$ onZoom$ style

Accessors

descriptionPaneVisible thumbnailVttFile

Methods

addTimelineLane addTimelineLaneAtIndex addTimelineLanes destroy getScrubberLane getTimelineLane getTimelineLanes getZoomPercent loadThumbnailVttFile loadThumbnailVttFileFromUrl maximizeTimelineLanes minimizeTimelineLanes removeAllTimelineLanes removeTimelineLane removeTimelineLanes scrollToEased scrollToPlayheadEased setDescriptionPaneVisible setDescriptionPaneVisibleEased settleLayout toggleDescriptionPaneVisible toggleDescriptionPaneVisibleEased zoomInEased zoomOutEased zoomTo zoomToEased zoomToMaxEased

Properties

onPlayheadMove$

onPlayheadMove$: Observable<PlayheadMoveEvent>

Fires on moving the playhead

ReadonlyonReady$

onReady$: Observable<undefined | TimelineReadyEvent>

Fires when Timeline is ready and all timeline lanes are created. Initial value is undefined. Always emits the current value on subscription.

ReadonlyonScroll$

onScroll$: Observable<TimelineScrollEvent>

Fires on Timeline scroll

onScrubberMove$

onScrubberMove$: Observable<ScrubberMoveEvent>

Fires on moving the scrubber

ReadonlyonStyleChange$

onStyleChange$: Observable<TimelineStyle>

Fires on Timeline style change

onTimecodeClick$

onTimecodeClick$: Observable<TimecodeClickEvent>

Fires on click anywhere on Timeline where timecode of the video can be determined

onTimecodeMouseMove$

onTimecodeMouseMove$: Observable<TimecodeMouseMoveEvent>

Fires on mouse move anywhere on Timeline where timecode of the video can be determined

ReadonlyonZoom$

onZoom$: Observable<TimelineZoomEvent>

Fires on Timeline zoom

style

style: TimelineStyle

Style getter / setter

Accessors

descriptionPaneVisible

thumbnailVttFile

Methods

addTimelineLane

addTimelineLaneAtIndex

addTimelineLanes

destroy

getScrubberLane

getTimelineLane

getTimelineLanes

getZoomPercent

loadThumbnailVttFile

loadThumbnailVttFileFromUrl

maximizeTimelineLanes

minimizeTimelineLanes

removeAllTimelineLanes

removeTimelineLane

removeTimelineLanes

scrollToEased

  • scrollToEased(percent: number): Observable<number>

  • Scrolls timeline

    Parameters

    • percent: number

      in range from 0 - timeline start or first timestamp, to 100 - timeline end or last timestamop

    Returns Observable<number>

scrollToPlayheadEased

setDescriptionPaneVisible

setDescriptionPaneVisibleEased

  • setDescriptionPaneVisibleEased(visible: boolean): Observable<void>

  • Shows or hides Timeline description pane

    Parameters

    • visible: boolean

    Returns Observable<void>

settleLayout

toggleDescriptionPaneVisible

toggleDescriptionPaneVisibleEased

zoomInEased

  • zoomInEased(): Observable<number>

  • Zoom in. Zoom scale in single method call is defined with TimelineConfig.zoomScale

    Returns Observable<number>

zoomOutEased

zoomTo

  • zoomTo(percent: number): number

  • Timeline zoom

    Parameters

    • percent: number

      number between 100 and TimelineConfig.zoomMax

    Returns number

  • zoomTo(percent: number, zoomFocusPercent: undefined | number): number

  • Timeline zoom

    Parameters

    • percent: number

      number between 100 and TimelineConfig.zoomMax

    • zoomFocusPercent: undefined | number

      in range from 0 - timeline start or first timestamp, to 100 - timeline end or last timestamop

    Returns number

zoomToEased

  • zoomToEased(percent: number): Observable<number>

  • Timeline zoom

    Parameters

    Returns Observable<number>

  • zoomToEased(
        percent: number,
        zoomFocusPercent: undefined | number,
    ): Observable<number>

  • Timeline zoom

    Parameters

    • percent: number

      number between 100 and TimelineConfig.zoomMax

    • zoomFocusPercent: undefined | number

      in range from 0 - timeline start or first timestamp, to 100 - timeline end or last timestamop

    Returns Observable<number>

zoomToMaxEased

Settings

Member Visibility

On This Page

Properties
Accessors
Methods