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

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

descriptionPaneVisible

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

style

get style(): TimelineStyle
Style getter / setter

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

thumbnailVttFile

get thumbnailVttFile(): undefined | ThumbnailVttFile
Thumbnail VTT file

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

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

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

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

addToFooterFlexGroup

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

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

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

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

constrainTimelinePosition

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

destroy

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

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

getHorizontalScrollPercent

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

getScrollHandleHorizontals

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

getScrubberLane

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

getTimecodedContainerDimension

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

getTimecodedFloatingDimension

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

getTimecodedFloatingHorizontals

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

getTimecodedFloatingPosition

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

getTimecodedFloatingRect

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

getTimecodedFloatingRelativePointerPosition

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

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

getTimelineLanes

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

getVisiblePositionRange

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

getVisibleTimeRange

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

getZoomPercent

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

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

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

maximizeTimelineLanes

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

minimizeTimelineLanes

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

removeAllTimelineLanes

removeAllTimelineLanes(): void
Removes all timeline lanes

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

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

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

scrollHorizontallyToPercent

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

scrollTimeline

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

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

scrollToPlayheadEased

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

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

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

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

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

timelineContainerPositionToTime

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

timelinePositionToFrame

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

timelinePositionToTime

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

timelinePositionToTimecode

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

timeToTimelinePosition

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

toggleDescriptionPaneVisible

toggleDescriptionPaneVisible(): void
Toggles Timeline description pane

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

toggleDescriptionPaneVisibleEased

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

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

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

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

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

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

zoomToMaxEased

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

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

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$