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

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

descriptionPaneVisible

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

style

get style(): TimelineStyle
Style getter / setter

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

thumbnailVttFile

get thumbnailVttFile(): undefined | ThumbnailVttFile
Thumbnail VTT file

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

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

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

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

addToFooterFlexGroup

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

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

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

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

constrainTimelinePosition

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

destroy

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

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

getHorizontalScrollPercent

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

getScrollHandleHorizontals

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

getScrubberLane

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

getTimecodedContainerDimension

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

getTimecodedFloatingDimension

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

getTimecodedFloatingHorizontals

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

getTimecodedFloatingPosition

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

getTimecodedFloatingRect

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

getTimecodedFloatingRelativePointerPosition

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

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

getTimelineLanes

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

getVisiblePositionRange

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

getVisibleTimeRange

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

getZoomPercent

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

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

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

maximizeTimelineLanes

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

minimizeTimelineLanes

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

removeAllTimelineLanes

removeAllTimelineLanes(): void
Removes all timeline lanes

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

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

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

scrollHorizontallyToPercent

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

scrollTimeline

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

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

scrollToPlayheadEased

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

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

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

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

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

timelineContainerPositionToTime

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

timelinePositionToFrame

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

timelinePositionToTime

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

timelinePositionToTimecode

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

timeToTimelinePosition

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

toggleDescriptionPaneVisible

toggleDescriptionPaneVisible(): void
Toggles Timeline description pane

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

toggleDescriptionPaneVisibleEased

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

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

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

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

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

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

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

zoomToMaxEased

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

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

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$