@byomakase/omakase-player
    Preparing search index...

    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>;
        toggleTimecodeEdit(): 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

    Index

    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 toggleTimecodeEdit zoomInEased zoomOutEased zoomTo zoomToEased zoomToMaxEased

    Properties

    onPlayheadMove$: Observable<PlayheadMoveEvent>

    Fires on moving the playhead

    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.

    onScroll$: Observable<TimelineScrollEvent>

    Fires on Timeline scroll

    onScrubberMove$: Observable<ScrubberMoveEvent>

    Fires on moving the scrubber

    onStyleChange$: Observable<TimelineStyle>

    Fires on Timeline style change

    onTimecodeClick$: Observable<TimecodeClickEvent>

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

    onTimecodeMouseMove$: Observable<TimecodeMouseMoveEvent>

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

    onZoom$: Observable<TimelineZoomEvent>

    Fires on Timeline zoom

    style: TimelineStyle

    Style getter / setter

    Accessors

    Methods

    • Scrolls timeline

      Parameters

      • percent: number

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

      Returns Observable<number>

    • Shows or hides Timeline description pane

      Parameters

      • visible: boolean

      Returns Observable<void>

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

      Returns Observable<number>

    • Timeline zoom

      Parameters

      • percent: number

        number between 100 and TimelineConfig.zoomMax

      Returns 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

    • Timeline zoom

      Parameters

      Returns 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>

    Settings

    Member Visibility

    On This Page

    Properties
    Accessors
    Methods