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<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$: 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:1868

descriptionPaneVisible

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

style

get style(): TimelineStyle
Style getter / setter

Returns TimelineStyle
Implementation of TimelineApi.style
- Defined in project/src/timeline/timeline.ts:1853
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:1857

thumbnailVttFile

get thumbnailVttFile(): undefined | ThumbnailVttFile
Thumbnail VTT file

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

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:1518

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:1526

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:1613

addToFooterFlexGroup

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

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:1646

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:1634

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:1642

constrainTimelinePosition

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

destroy

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

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

getHorizontalScrollPercent

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

getScrollHandleHorizontals

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

getScrubberLane

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

getTimecodedContainerDimension

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

getTimecodedFloatingDimension

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

getTimecodedFloatingHorizontals

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

getTimecodedFloatingPosition

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

getTimecodedFloatingRect

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

getTimecodedFloatingRelativePointerPosition

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

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

getTimelineLanes

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

getVisiblePositionRange

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

getVisibleTimeRange

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

getZoomPercent

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

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:1763

loadThumbnailVttFileFromUrl

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

maximizeTimelineLanes

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

minimizeTimelineLanes

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

removeAllTimelineLanes

removeAllTimelineLanes(): void
Removes all timeline lanes

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

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:1554

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:1561

scrollHorizontallyToPercent

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

scrollTimeline

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

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:1142

scrollToPlayheadEased

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

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

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:1781

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:1791

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:1668

timelinePositionToFrame

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

timelinePositionToTime

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

timelinePositionToTimecode

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

timeToTimelinePosition

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

toggleDescriptionPaneVisible

toggleDescriptionPaneVisible(): void
Toggles Timeline description pane

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

toggleDescriptionPaneVisibleEased

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

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

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:1876

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:1276

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:1280

zoomTo

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

zoomToEased

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

zoomToMaxEased

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

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

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 undefined | ThumbnailVttFile

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 undefined | Position

getTimelineLane

Type Parameters

Parameters

`Readonly`onPlayheadMove$

`Readonly`onReady$

`Readonly`onScroll$

`Readonly`onScrubberMove$

`Readonly`onStyleChange$

`Readonly`onTimecodeClick$

`Readonly`onTimecodeMouseMove$

`Readonly`onZoom$