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)

Api
- TimelineApi

Implemented by

Timeline

Properties

onPlayheadMove$

onPlayheadMove$: Observable<PlayheadMoveEvent>

Fires on moving the playhead

`Readonly`onReady$

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.

`Readonly`onScroll$

onScroll$: Observable<TimelineScrollEvent>

Fires on Timeline scroll

onScrubberMove$

onScrubberMove$: Observable<ScrubberMoveEvent>

Fires on moving the scrubber

`Readonly`onStyleChange$

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

`Readonly`onZoom$

onZoom$: Observable<TimelineZoomEvent>

Fires on Timeline zoom

style

style: TimelineStyle

Style getter / setter

Accessors

descriptionPaneVisible

get descriptionPaneVisible(): boolean
Returns boolean
true if visible, false if not visible
- Defined in project/src/api/timeline-api.ts:85

thumbnailVttFile

get thumbnailVttFile(): undefined | ThumbnailVttFile
Thumbnail VTT file

Returns undefined | ThumbnailVttFile
- Defined in project/src/api/timeline-api.ts:80

Methods

addTimelineLane

addTimelineLane(timelineLane: TimelineLaneApi): TimelineLaneApi
Adds TimelineLaneApi instance to timeline
Parameters
- timelineLane: TimelineLaneApi
Returns TimelineLaneApi
- Defined in project/src/api/timeline-api.ts:148

addTimelineLaneAtIndex

addTimelineLaneAtIndex(
timelineLane: TimelineLaneApi,
index: number,
): TimelineLaneApi
Adds TimelineLaneApi instance to timeline
Parameters
- timelineLane: TimelineLaneApi
- index: number
Returns TimelineLaneApi
- Defined in project/src/api/timeline-api.ts:155

addTimelineLanes

addTimelineLanes(timelineLanes: TimelineLaneApi[]): TimelineLaneApi[]
Adds multiple instantiated TimelineLaneApi instances to timeline
Parameters
- timelineLanes: TimelineLaneApi[]
Returns TimelineLaneApi[]
- Defined in project/src/api/timeline-api.ts:178

destroy

destroy(): void
Destroys Timeline and it's dependencies

Returns void
- Defined in project/src/api/timeline-api.ts:251

getScrubberLane

getScrubberLane(): ScrubberLane
Returns ScrubberLane
ScrubberLane instance
- Defined in project/src/api/timeline-api.ts:194

getTimelineLane

getTimelineLane<T extends TimelineLaneApi>(id: string): undefined | T
Type Parameters
- T extends TimelineLaneApi
Parameters
- id: string
  TimelineLaneApi.id
Returns undefined | T
single TimelineLaneApi instance
- Defined in project/src/api/timeline-api.ts:189

getTimelineLanes

getTimelineLanes(): TimelineLaneApi[]
Returns TimelineLaneApi[]
all TimelineLaneApi instances
- Defined in project/src/api/timeline-api.ts:183

getZoomPercent

getZoomPercent(): number
Returns number
current zoom perent
- Defined in project/src/api/timeline-api.ts:131

loadThumbnailVttFile

loadThumbnailVttFile(vttFile: ThumbnailVttFile): void
Load ThumbnailVttFile by url
Parameters
- vttFile: ThumbnailVttFile
Returns void
- Defined in project/src/api/timeline-api.ts:229

loadThumbnailVttFileFromUrl

loadThumbnailVttFileFromUrl(
vttUrl: string,
): Observable<undefined | ThumbnailVttFile>
Load ThumbnailVttFile
Parameters
- vttUrl: string
Returns Observable<undefined | ThumbnailVttFile>
- Defined in project/src/api/timeline-api.ts:224

maximizeTimelineLanes

maximizeTimelineLanes(timelineLanes: TimelineLaneApi[]): void
Maximize timeline lanes
Parameters
- timelineLanes: TimelineLaneApi[]
Returns void
- Defined in project/src/api/timeline-api.ts:241

minimizeTimelineLanes

minimizeTimelineLanes(timelineLanes: TimelineLaneApi[]): void
Minimize timeline lanes
Parameters
- timelineLanes: TimelineLaneApi[]
Returns void
- Defined in project/src/api/timeline-api.ts:235

removeAllTimelineLanes

removeAllTimelineLanes(): void
Removes all timeline lanes

Returns void
- Defined in project/src/api/timeline-api.ts:172

removeTimelineLane

removeTimelineLane(id: string): void
Removes TimelineLaneApi instance by id
Parameters
- id: string
  TimelineLaneApi.id
Returns void
- Defined in project/src/api/timeline-api.ts:161

removeTimelineLanes

removeTimelineLanes(ids: string[]): void
Removes TimelineLaneApi instances by ids
Parameters
- ids: string[]
  TimelineLaneApi.ids
Returns void
- Defined in project/src/api/timeline-api.ts:167

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>
- Defined in project/src/api/timeline-api.ts:137

scrollToPlayheadEased

scrollToPlayheadEased(): Observable<number>
Scrolls timeline to playhead position

Returns Observable<number>
- Defined in project/src/api/timeline-api.ts:142

setDescriptionPaneVisible

setDescriptionPaneVisible(visible: boolean): void
Shows or hides Timeline description pane
Parameters
- visible: boolean
Returns void
- Defined in project/src/api/timeline-api.ts:199

setDescriptionPaneVisibleEased

setDescriptionPaneVisibleEased(visible: boolean): Observable<void>
Shows or hides Timeline description pane
Parameters
- visible: boolean
Returns Observable<void>
- Defined in project/src/api/timeline-api.ts:209

settleLayout

settleLayout(): void
Recalculates and settles layout, called on window resize event

Returns void
- Defined in project/src/api/timeline-api.ts:246

toggleDescriptionPaneVisible

toggleDescriptionPaneVisible(): void
Toggles Timeline description pane

Returns void
- Defined in project/src/api/timeline-api.ts:204

toggleDescriptionPaneVisibleEased

toggleDescriptionPaneVisibleEased(): Observable<void>
Toggles Timeline description pane

Returns Observable<void>
- Defined in project/src/api/timeline-api.ts:214

toggleTimecodeEdit

toggleTimecodeEdit(): void
Toggles the CTI between its interactive and read-only state

Returns void
- Defined in project/src/api/timeline-api.ts:219

zoomInEased

zoomInEased(): Observable<number>
Zoom in. Zoom scale in single method call is defined with TimelineConfig.zoomScale

Returns Observable<number>
- Defined in project/src/api/timeline-api.ts:116

zoomOutEased

zoomOutEased(): Observable<number>
Zoom out. Zoom scale in single method call is defined with TimelineConfig.zoomScale

Returns Observable<number>
- Defined in project/src/api/timeline-api.ts:121

zoomTo

zoomTo(percent: number): number
Timeline zoom
Parameters
- percent: number
  number between 100 and TimelineConfig.zoomMax
Returns number
- Defined in project/src/api/timeline-api.ts:91
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
- Defined in project/src/api/timeline-api.ts:98

zoomToEased

zoomToEased(percent: number): Observable<number>
Timeline zoom
Parameters
- percent: number
  number between 100 and TimelineConfig.zoomMax
Returns Observable<number>
- Defined in project/src/api/timeline-api.ts:104
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>
- Defined in project/src/api/timeline-api.ts:111

zoomToMaxEased

zoomToMaxEased(): Observable<number>
Zoom to max resolution

Returns Observable<number>
- Defined in project/src/api/timeline-api.ts:126

Interface TimelineApi

Hierarchy (View Summary)

Implemented by

Index

Properties

Accessors

Methods

Properties

onPlayheadMove$

ReadonlyonReady$

ReadonlyonScroll$

onScrubberMove$

ReadonlyonStyleChange$

onTimecodeClick$

onTimecodeMouseMove$

ReadonlyonZoom$

style

Accessors

descriptionPaneVisible

Returns boolean

thumbnailVttFile

Returns undefined | ThumbnailVttFile

Methods

addTimelineLane

Parameters

Returns TimelineLaneApi

addTimelineLaneAtIndex

Parameters

Returns TimelineLaneApi

addTimelineLanes

Parameters

Returns TimelineLaneApi[]

destroy

Returns void

getScrubberLane

Returns ScrubberLane

getTimelineLane

Type Parameters

Parameters

Returns undefined | T

getTimelineLanes

Returns TimelineLaneApi[]

getZoomPercent

Returns number

loadThumbnailVttFile

Parameters

Returns void

loadThumbnailVttFileFromUrl

Parameters

Returns Observable<undefined | ThumbnailVttFile>

maximizeTimelineLanes

Parameters

Returns void

minimizeTimelineLanes

Parameters

Returns void

removeAllTimelineLanes

Returns void

removeTimelineLane

Parameters

Returns void

removeTimelineLanes

Parameters

Returns void

scrollToEased

Parameters

Returns Observable<number>

scrollToPlayheadEased

Returns Observable<number>

setDescriptionPaneVisible

Parameters

Returns void

setDescriptionPaneVisibleEased

Parameters

Returns Observable<void>

settleLayout

Returns void

toggleDescriptionPaneVisible

Returns void

toggleDescriptionPaneVisibleEased

`Readonly`onReady$

`Readonly`onScroll$

`Readonly`onStyleChange$

`Readonly`onZoom$