Class Timeline

Implements

Destroyable
ScrollableHorizontally
TimelineApi

Index

Constructors

constructor

new Timeline(
config: Partial<ConfigWithOptionalStyle<TimelineConfig>>,
videoController: VideoControllerApi,
): Timeline
Parameters
- config: Partial<ConfigWithOptionalStyle<TimelineConfig>>
- videoController: VideoControllerApi
Returns Timeline
- Defined in project/src/timeline/timeline.ts:359

Properties

`Readonly`onPlayheadMove$

onPlayheadMove$: Subject<PlayheadMoveEvent> = ...

Fires on moving the playhead

`Readonly`onReady$

onReady$: BehaviorSubject<TimelineReadyEvent | undefined> = ...

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$: Subject<TimelineScrollEvent> = ...

Fires on Timeline scroll

`Readonly`onScrubberMove$

onScrubberMove$: Subject<ScrubberMoveEvent> = ...

Fires on moving the scrubber

`Readonly`onStyleChange$

onStyleChange$: Subject<TimelineStyle> = ...

Fires on Timeline style change

`Readonly`onTimecodeClick$

onTimecodeClick$: Subject<TimecodeClickEvent> = ...

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

`Readonly`onTimecodeMouseMove$

onTimecodeMouseMove$: Subject<TimecodeMouseMoveEvent> = ...

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

`Readonly`onZoom$

onZoom$: Subject<TimelineZoomEvent> = ...

Fires on Timeline zoom

Accessors

config

get config(): TimelineConfig
Returns TimelineConfig
- Defined in project/src/timeline/timeline.ts:1872

descriptionPaneVisible

get descriptionPaneVisible(): boolean
Returns boolean
true if visible, false if not visible
Implementation of TimelineApi.descriptionPaneVisible
- Defined in project/src/timeline/timeline.ts:1876

style

get style(): TimelineStyle
Style getter / setter

Returns TimelineStyle
Implementation of TimelineApi.style
- Defined in project/src/timeline/timeline.ts:1857
set style(value: Partial<TimelineStyle>): void
Style getter / setter
Parameters
- value: Partial<TimelineStyle>
Returns void
Implementation of TimelineApi.style
- Defined in project/src/timeline/timeline.ts:1861

thumbnailVttFile

get thumbnailVttFile(): ThumbnailVttFile | undefined
Thumbnail VTT file

Returns ThumbnailVttFile | undefined
Implementation of TimelineApi.thumbnailVttFile
- Defined in project/src/timeline/timeline.ts:1853

Methods

addTimelineLane

addTimelineLane(timelineLane: TimelineLaneApi): TimelineLaneApi
Adds TimelineLaneApi instance to timeline
Parameters
- timelineLane: TimelineLaneApi
Returns TimelineLaneApi
Implementation of TimelineApi.addTimelineLane
- Defined in project/src/timeline/timeline.ts:1522

addTimelineLaneAtIndex

addTimelineLaneAtIndex(
timelineLane: TimelineLaneApi,
index: number,
): TimelineLaneApi
Adds TimelineLaneApi instance to timeline
Parameters
- timelineLane: TimelineLaneApi
- index: number
Returns TimelineLaneApi
Implementation of TimelineApi.addTimelineLaneAtIndex
- Defined in project/src/timeline/timeline.ts:1530

addTimelineLanes

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

addToFooterFlexGroup

addToFooterFlexGroup(flexNode: FlexNode<any>): void
Parameters
- flexNode: FlexNode<any>
Returns void
- Defined in project/src/timeline/timeline.ts:1658

addToSurfaceLayerTimecodedFloatingContent

addToSurfaceLayerTimecodedFloatingContent(
node: Group | Shape<ShapeConfig>,
zIndex?: number,
): void
Parameters
- node: Group | Shape<ShapeConfig>
- zIndex: number = 0
Returns void
- Defined in project/src/timeline/timeline.ts:1650

addToTimecodedFloatingContent

addToTimecodedFloatingContent(
node: Group | Shape<ShapeConfig>,
zIndex?: number,
): void
Parameters
- node: Group | Shape<ShapeConfig>
- zIndex: number = 0
Returns void
- Defined in project/src/timeline/timeline.ts:1638

addToTimecodedStaticContent

addToTimecodedStaticContent(
node: Group | Shape<ShapeConfig>,
zIndex?: number,
): void
Parameters
- node: Group | Shape<ShapeConfig>
- zIndex: number = 0
Returns void
- Defined in project/src/timeline/timeline.ts:1646

constrainTimelinePosition

constrainTimelinePosition(x: number): number
Parameters
- x: number
Returns number
- Defined in project/src/timeline/timeline.ts:1662

destroy

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

Returns void
Implementation of TimelineApi.destroy
- Defined in project/src/timeline/timeline.ts:1884

getHorizontalScrollPercent

getHorizontalScrollPercent(): number
Returns number
Implementation of ScrollableHorizontally.getHorizontalScrollPercent
- Defined in project/src/timeline/timeline.ts:1109

getScrollHandleHorizontals

getScrollHandleHorizontals(scrollbarWidth: number): Horizontals
Parameters
- scrollbarWidth: number
Returns Horizontals
Implementation of ScrollableHorizontally.getScrollHandleHorizontals
- Defined in project/src/timeline/timeline.ts:1126

getScrubberLane

getScrubberLane(): ScrubberLane
Returns ScrubberLane
ScrubberLane instance
Implementation of TimelineApi.getScrubberLane
- Defined in project/src/timeline/timeline.ts:1632

getTimecodedContainerDimension

getTimecodedContainerDimension(): Dimension
Returns Dimension
- Defined in project/src/timeline/timeline.ts:1711

getTimecodedFloatingDimension

getTimecodedFloatingDimension(): Dimension
Returns Dimension
- Defined in project/src/timeline/timeline.ts:1715

getTimecodedFloatingHorizontals

getTimecodedFloatingHorizontals(): Horizontals
Returns Horizontals
- Defined in project/src/timeline/timeline.ts:1734

getTimecodedFloatingPosition

getTimecodedFloatingPosition(): Position
Returns Position
- Defined in project/src/timeline/timeline.ts:1719

getTimecodedFloatingRect

getTimecodedFloatingRect(): RectMeasurement
Returns RectMeasurement
- Defined in project/src/timeline/timeline.ts:1727

getTimecodedFloatingRelativePointerPosition

getTimecodedFloatingRelativePointerPosition(): Position | undefined
Returns Position | undefined
- Defined in project/src/timeline/timeline.ts:1723

getTimelineLane

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

getTimelineLanes

getTimelineLanes(): TimelineLaneApi[]
Returns TimelineLaneApi[]
all TimelineLaneApi instances
Implementation of TimelineApi.getTimelineLanes
- Defined in project/src/timeline/timeline.ts:1623

getVisiblePositionRange

getVisiblePositionRange(): { end: number; start: number }
Returns { end: number; start: number }
- Defined in project/src/timeline/timeline.ts:1741

getVisibleTimeRange

getVisibleTimeRange(): { end: number; start: number }
Returns { end: number; start: number }
- Defined in project/src/timeline/timeline.ts:1760

getZoomPercent

getZoomPercent(): number
Returns number
current zoom perent
Implementation of TimelineApi.getZoomPercent
- Defined in project/src/timeline/timeline.ts:1240

loadThumbnailVttFile

loadThumbnailVttFile(vttFile: ThumbnailVttFile): void
Load ThumbnailVttFile by url
Parameters
- vttFile: ThumbnailVttFile
Returns void
Implementation of TimelineApi.loadThumbnailVttFile
- Defined in project/src/timeline/timeline.ts:1767

loadThumbnailVttFileFromUrl

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

maximizeTimelineLanes

maximizeTimelineLanes(timelineLanes: TimelineLaneApi[]): void
Maximize timeline lanes
Parameters
- timelineLanes: TimelineLaneApi[]
Returns void
Implementation of TimelineApi.maximizeTimelineLanes
- Defined in project/src/timeline/timeline.ts:1846

minimizeTimelineLanes

minimizeTimelineLanes(timelineLanes: TimelineLaneApi[]): void
Minimize timeline lanes
Parameters
- timelineLanes: TimelineLaneApi[]
Returns void
Implementation of TimelineApi.minimizeTimelineLanes
- Defined in project/src/timeline/timeline.ts:1828

removeAllTimelineLanes

removeAllTimelineLanes(): void
Removes all timeline lanes

Returns void
Implementation of TimelineApi.removeAllTimelineLanes
- Defined in project/src/timeline/timeline.ts:1580

removeTimelineLane

removeTimelineLane(id: string): void
Removes TimelineLaneApi instance by id
Parameters
- id: string
  TimelineLaneApi.id
Returns void
Implementation of TimelineApi.removeTimelineLane
- Defined in project/src/timeline/timeline.ts:1558

removeTimelineLanes

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

scrollHorizontallyToPercent

scrollHorizontallyToPercent(percent: number): void
Parameters
- percent: number
Returns void
Implementation of ScrollableHorizontally.scrollHorizontallyToPercent
- Defined in project/src/timeline/timeline.ts:1121

scrollTimeline

scrollTimeline(x: number): void
Parameters
- x: number
Returns void
- Defined in project/src/timeline/timeline.ts:1212

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>
Implementation of TimelineApi.scrollToEased
- Defined in project/src/timeline/timeline.ts:1146

scrollToPlayheadEased

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

Returns Observable<number>
Implementation of TimelineApi.scrollToPlayheadEased
- Defined in project/src/timeline/timeline.ts:1152

setDescriptionPaneVisible

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

setDescriptionPaneVisibleEased

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

settleLayout

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

Returns void
Implementation of TimelineApi.settleLayout
- Defined in project/src/timeline/timeline.ts:940

timelineContainerPositionToTime

timelineContainerPositionToTime(xOnTimeline: number): number
Parameters
- xOnTimeline: number
Returns number
- Defined in project/src/timeline/timeline.ts:1672

timelinePositionToFrame

timelinePositionToFrame(x: number): number
Parameters
- x: number
Returns number
- Defined in project/src/timeline/timeline.ts:1681

timelinePositionToTime

timelinePositionToTime(xOnTimeline: number): number
Parameters
- xOnTimeline: number
Returns number
- Defined in project/src/timeline/timeline.ts:1668

timelinePositionToTimecode

timelinePositionToTimecode(x: number): string
Parameters
- x: number
Returns string
- Defined in project/src/timeline/timeline.ts:1676

timeToTimelinePosition

timeToTimelinePosition(time: number): number
Parameters
- time: number
Returns number
- Defined in project/src/timeline/timeline.ts:1685

toggleDescriptionPaneVisible

toggleDescriptionPaneVisible(): void
Toggles Timeline description pane

Returns void
Implementation of TimelineApi.toggleDescriptionPaneVisible
- Defined in project/src/timeline/timeline.ts:1791

toggleDescriptionPaneVisibleEased

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

Returns Observable<void>
Implementation of TimelineApi.toggleDescriptionPaneVisibleEased
- Defined in project/src/timeline/timeline.ts:1813

toggleTimecodeEdit

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

Returns void
Implementation of TimelineApi.toggleTimecodeEdit
- Defined in project/src/timeline/timeline.ts:1880

zoomInEased

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

Returns Observable<number>
Implementation of TimelineApi.zoomInEased
- Defined in project/src/timeline/timeline.ts:1280

zoomOutEased

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

Returns Observable<number>
Implementation of TimelineApi.zoomOutEased
- Defined in project/src/timeline/timeline.ts:1284

zoomTo

zoomTo(percent: number, zoomFocusPercent?: number | undefined): number
Timeline zoom
Parameters
- percent: number
  number between 100 and TimelineConfig.zoomMax
- zoomFocusPercent: number | undefined = ...
Returns number
Implementation of TimelineApi.zoomTo
- Defined in project/src/timeline/timeline.ts:1251

zoomToEased

zoomToEased(
percent: number,
zoomFocusPercent?: number | undefined,
): Observable<number>
Timeline zoom
Parameters
- percent: number
  number between 100 and TimelineConfig.zoomMax
- zoomFocusPercent: number | undefined = ...
Returns Observable<number>
Implementation of TimelineApi.zoomToEased
- Defined in project/src/timeline/timeline.ts:1264

zoomToMaxEased

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

Returns Observable<number>
Implementation of TimelineApi.zoomToMaxEased
- Defined in project/src/timeline/timeline.ts:1288

Class Timeline

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns Timeline

Properties

ReadonlyonPlayheadMove$

ReadonlyonReady$

ReadonlyonScroll$

ReadonlyonScrubberMove$

ReadonlyonStyleChange$

ReadonlyonTimecodeClick$

ReadonlyonTimecodeMouseMove$

ReadonlyonZoom$

Accessors

config

Returns TimelineConfig

descriptionPaneVisible

Returns boolean

style

Returns TimelineStyle

Parameters

Returns void

thumbnailVttFile

Returns ThumbnailVttFile | undefined

Methods

addTimelineLane

Parameters

Returns TimelineLaneApi

addTimelineLaneAtIndex

Parameters

Returns TimelineLaneApi

addTimelineLanes

Parameters

Returns TimelineLaneApi[]

addToFooterFlexGroup

Parameters

Returns void

addToSurfaceLayerTimecodedFloatingContent

Parameters

Returns void

addToTimecodedFloatingContent

Parameters

Returns void

addToTimecodedStaticContent

Parameters

Returns void

constrainTimelinePosition

Parameters

Returns number

destroy

Returns void

getHorizontalScrollPercent

Returns number

getScrollHandleHorizontals

Parameters

Returns Horizontals

getScrubberLane

Returns ScrubberLane

getTimecodedContainerDimension

Returns Dimension

getTimecodedFloatingDimension

Returns Dimension

getTimecodedFloatingHorizontals

Returns Horizontals

getTimecodedFloatingPosition

Returns Position

getTimecodedFloatingRect

Returns RectMeasurement

getTimecodedFloatingRelativePointerPosition

Returns Position | undefined

getTimelineLane

Type Parameters

Parameters

`Readonly`onPlayheadMove$

`Readonly`onReady$

`Readonly`onScroll$

`Readonly`onScrubberMove$

`Readonly`onStyleChange$

`Readonly`onTimecodeClick$

`Readonly`onTimecodeMouseMove$

`Readonly`onZoom$