@byomakase/omakase-player 0.0.2

package/dist/style.css

@@ -0,0 +1 @@
+.omakase-player{display:block}.omakase-player .d-none{display:none}.omakase-player .d-block{display:block}.omakase-player .float-start{float:left!important}.omakase-player .float-end{float:right!important}.omakase-player .omakase-player-wrapper{display:block;position:relative;width:700px}.omakase-player .omakase-player-wrapper .omakase-video{display:block;width:100%;opacity:100%}.omakase-player .omakase-player-wrapper .omakase-video-controls .omakase-overlay-buttons .omakase-video-overlay-button{background-repeat:no-repeat;width:128px;height:128px;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;background-size:contain;background-position:center}.omakase-player .omakase-player-wrapper .omakase-video-controls .omakase-overlay-buttons .omakase-button-play{background-image:url(/images/play.svg)}.omakase-player .omakase-player-wrapper .omakase-video-controls .omakase-overlay-buttons .omakase-button-pause{background-image:url(/images/pause.svg)}.omakase-player .omakase-player-wrapper .omakase-video-controls .omakase-overlay-buttons .omakase-button-replay{background-image:url(/images/replay.svg)}.omakase-player .omakase-player-wrapper .omakase-video-controls .omakase-overlay-buttons .omakase-button-loading{background-image:url(/images/loading.svg);animation:loading 3s linear infinite}@keyframes loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.omakase-player .omakase-player-wrapper .omakase-help{font-family:Arial;font-size:13px;position:absolute;right:20px;top:20px}.omakase-player .omakase-player-wrapper .omakase-help .omakase-help-dropdown{position:absolute;right:0;top:0}.omakase-player .omakase-player-wrapper .omakase-help .omakase-help-dropdown .omakase-help-button{background-color:transparent;background-image:url(/images/help.svg);background-repeat:no-repeat;background-size:contain;background-position:center;border:0;padding:0;width:30px;height:30px;margin:0 0 5px}.omakase-player .omakase-player-wrapper .omakase-help .omakase-help-dropdown .omakase-help-menu{z-index:100;position:absolute;right:0;width:400px}.omakase-player .omakase-player-wrapper .omakase-help .omakase-help-dropdown .omakase-help-menu .omakase-help-group-title{background:rgb(2,171,141);display:block;padding:5px 10px;color:#fff;font-weight:700;text-align:left}.omakase-player .omakase-player-wrapper .omakase-help .omakase-help-dropdown .omakase-help-menu .omakase-help-group{overflow-y:scroll;display:block;height:200px;background:rgba(2,171,141,.2)}.omakase-player .omakase-player-wrapper .omakase-help .omakase-help-dropdown .omakase-help-menu .omakase-help-group .omakase-help-item{display:list-item;padding:5px 10px;color:#fff}.omakase-player .omakase-player-wrapper .omakase-help .omakase-help-dropdown .omakase-help-menu .omakase-help-group .omakase-help-item:hover{background-color:#a93232}

package/dist/subtitles/subtitles-controller.d.ts

@@ -0,0 +1,51 @@
+/**
+ *       Copyright 2023 ByOmakase, LLC (https://byomakase.org)
+ *
+ *       Licensed under the Apache License, Version 2.0 (the "License");
+ *       you may not use this file except in compliance with the License.
+ *       You may obtain a copy of the License at
+ *
+ *           http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *       Unless required by applicable law or agreed to in writing, software
+ *       distributed under the License is distributed on an "AS IS" BASIS,
+ *       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *       See the License for the specific language governing permissions and
+ *       limitations under the License.
+ *
+ *       Includes rxjs <https://github.com/ReactiveX/rxjs>
+ *       Available under Apache License Version 2.0
+ *       <https://github.com/ReactiveX/rxjs/blob/master/LICENSE.txt>
+ */
+import { SubtitlesVttTrack } from "../track/subtitles-vtt-track";
+import { OmakaseTextTrack, OmakaseTextTrackCue, SubtitlesCreateEvent, SubtitlesEvent, SubtitlesVttTrackConfig } from "../types";
+import { Observable, Subject } from "rxjs";
+import { VideoController } from "../video/video-controller";
+import { SubtitlesApi } from "../api/subtitles-api";
+export declare class SubtitlesController implements SubtitlesApi {
+    protected currentTrack: OmakaseTextTrack<OmakaseTextTrackCue>;
+    protected videoController: VideoController;
+    protected subtitlesTracks: Map<string, OmakaseTextTrack<OmakaseTextTrackCue>>;
+    readonly onCreate$: Subject<SubtitlesCreateEvent>;
+    readonly onRemove$: Subject<SubtitlesEvent>;
+    readonly onShow$: Subject<SubtitlesEvent>;
+    readonly onHide$: Subject<SubtitlesEvent>;
+    constructor(videoController: VideoController);
+    private getDomTextTrack;
+    /***
+     * https://github.com/whatwg/html/issues/1921
+     * https://github.com/web-platform-tests/wpt/pull/6594
+     *
+     * @param track
+     * @private
+     */
+    private removeDomTextTrack;
+    private static createHTMLTrackElement;
+    createVttTrack(config: SubtitlesVttTrackConfig): Observable<SubtitlesVttTrack | undefined>;
+    getTracks(): OmakaseTextTrack<OmakaseTextTrackCue>[];
+    removeAllTracks(): void;
+    removeTrack(id: string): void;
+    getCurrentTrack(): OmakaseTextTrack<OmakaseTextTrackCue> | undefined;
+    showTrack(id?: string): void;
+    hideTrack(id?: string): void;
+}

package/dist/timeline/audio-track/audio-track-lane-item.d.ts

@@ -0,0 +1,38 @@
+import { BaseComponent, ComponentConfig, ComponentConfigStyleComposed } from "../../common/component";
+import Konva from "konva";
+import { Dimension, HasRectMeasurement, Position, RectMeasurement } from "../../common/measurement";
+import { AudioVttCue } from "../../types";
+import { WithOptionalPartial } from "../../types/types";
+export interface AudioTrackLaneItemStyle {
+    height: number;
+    cornerRadius: number;
+    opacity: number;
+    visible: boolean;
+    maxSampleFillLinearGradientColorStops: (number | string)[];
+    minSampleFillLinearGradientColorStops: (number | string)[];
+}
+export interface AudioTrackLaneItemConfig extends ComponentConfig<AudioTrackLaneItemStyle> {
+    audioVttCue: AudioVttCue;
+    x: number;
+    width: number;
+    listening?: boolean;
+}
+export declare class AudioTrackLaneItem extends BaseComponent<AudioTrackLaneItemConfig, AudioTrackLaneItemStyle, Konva.Group> implements HasRectMeasurement {
+    private x;
+    private width;
+    private listening;
+    private group;
+    private maxSampleBar;
+    private minSampleBar;
+    private audioVttCue;
+    constructor(config: ComponentConfigStyleComposed<AudioTrackLaneItemConfig>);
+    protected createCanvasNode(): Konva.Group;
+    private resolveMaxSampleBarHeight;
+    private resolveMinSampleBarHeight;
+    setPosition(position: WithOptionalPartial<Position, 'y'>): void;
+    getPosition(): Position;
+    getDimension(): Dimension;
+    getRect(): RectMeasurement;
+    getAudioVttCue(): AudioVttCue;
+    setAudioVttCue(audioVttCue: AudioVttCue): void;
+}

package/dist/timeline/audio-track/audio-track-lane.d.ts

@@ -0,0 +1,46 @@
+import { BaseTimelineLane, TimelaneLaneConfig, TimelineLaneStyle } from "../timeline-lane";
+import Konva from "konva";
+import { Subject } from "rxjs";
+import { ComponentConfigStyleComposed } from "../../common/component";
+import { AudioTrackLaneItem } from "./audio-track-lane-item";
+export interface AudioTrackLaneStyle extends TimelineLaneStyle {
+    paddingTop: number;
+    paddingBottom: number;
+    itemWidth: number;
+    itemMinPadding: number;
+    itemCornerRadius: number;
+    maxSampleFillLinearGradientColorStops: (number | string)[];
+    minSampleFillLinearGradientColorStops: (number | string)[];
+}
+export interface AudioTrackLaneConfig extends TimelaneLaneConfig<AudioTrackLaneStyle> {
+    audioVttFileUrl: string;
+}
+export declare class AudioTrackLane extends BaseTimelineLane<AudioTrackLaneConfig, AudioTrackLaneStyle> {
+    private _audioVttFileUrl;
+    protected readonly audioTrackLaneItemsMap: Map<number, AudioTrackLaneItem>;
+    protected timecodedGroup: Konva.Group;
+    protected timecodedEventCatcher: Konva.Rect;
+    protected audioTrackLaneItemsGroup: Konva.Group;
+    private audioVttFile;
+    private numOfInterpolations;
+    private itemPadding;
+    readonly onSettleLayout$: Subject<void>;
+    constructor(config: ComponentConfigStyleComposed<AudioTrackLaneConfig>);
+    protected createCanvasNode(): Konva.Group;
+    protected settleLayout(): void;
+    protected afterCanvasNodeInit(): void;
+    clearContent(): void;
+    private clearItems;
+    private getVisibleCues;
+    private createEntities;
+    private resolveNumOfCuesPerInterpolation;
+    private resolveCuesInterpolations;
+    private settleAll;
+    private resolveInterpolatedItemPosition;
+    private settlePosition;
+    private fetchAndCreateAudioTrack;
+    private fetchAudioTrackVttFile;
+    private isVttLoaded;
+    get audioVttFileUrl(): string;
+    set audioVttFileUrl(value: string);
+}

package/dist/timeline/audio-track/index.d.ts

@@ -0,0 +1 @@
+export { AudioTrackLane } from './audio-track-lane';

package/dist/timeline/index.d.ts

@@ -0,0 +1,5 @@
+export type { TimelaneLane } from './timeline-lane';
+export * from "./marker";
+export * from "./subtitles";
+export * from "./thumbnail";
+export * from "./audio-track";

package/dist/timeline/marker/index.d.ts

@@ -0,0 +1,4 @@
+export type { Marker } from "./marker";
+export { MarkerLane } from "./marker-lane";
+export { MomentMarker } from "./moment-marker";
+export { PeriodMarker } from "./period-marker";

package/dist/timeline/marker/marker-handle.d.ts

@@ -0,0 +1,55 @@
+import { BaseComponent, Component, ComponentConfig } from "../../common/component";
+import Konva from "konva";
+import { OnMeasurementsChange, Position, VerticalMeasurement } from "../../common/measurement";
+import { MarkerLane } from "./marker-lane";
+import { Timeline } from "../timeline";
+import { MarkerRenderType, MarkerSymbolType } from "./marker";
+export interface MarkerHandleStyle {
+    color: string;
+    markerRenderType: MarkerRenderType;
+    markerSymbolType: MarkerSymbolType;
+    lineStrokeWidth: number;
+    lineOpacity: number;
+}
+export declare const MARKER_HANDLE_STYLE_DEFAULT: MarkerHandleStyle;
+export interface MarkerHandleConfig<S extends MarkerHandleStyle> extends ComponentConfig<S> {
+    x: number;
+    editable: boolean;
+}
+export interface MarkerHandle<C extends MarkerHandleConfig<S>, S extends MarkerHandleStyle> extends Component<C, S, Konva.Group>, OnMeasurementsChange {
+    getPosition(): Position;
+    setPosition(position: Position): any;
+    getHandleGroup(): Konva.Group;
+    getSymbol(): Konva.Shape;
+    getVerticalMeasurement(): VerticalMeasurement;
+    setColor(color: string): any;
+    onDrag: (markerHandleGroup: Konva.Group) => void;
+    onDragEnd: (markerHandleGroup: Konva.Group) => void;
+}
+export declare abstract class BaseMarkerHandle<C extends MarkerHandleConfig<S>, S extends MarkerHandleStyle> extends BaseComponent<C, S, Konva.Group> implements MarkerHandle<C, S> {
+    protected x: number;
+    protected editable: boolean;
+    protected group: Konva.Group;
+    protected symbol: Konva.Shape;
+    protected line: Konva.Line;
+    protected handleGroup: Konva.Group;
+    protected markerLane: MarkerLane;
+    protected timeline: Timeline;
+    onDrag: (markerHandleGroup: Konva.Group) => void;
+    onDragEnd: (markerHandleGroup: Konva.Group) => void;
+    protected constructor(config: C, markerLane: MarkerLane, timeline: Timeline);
+    protected createCanvasNode(): Konva.Group;
+    protected abstract createSymbol(): Konva.Shape;
+    protected afterCanvasNodeInit(): void;
+    onMeasurementsChange(): void;
+    getVerticalMeasurement(): VerticalMeasurement;
+    getHandleGroup(): Konva.Group;
+    getSymbol(): Konva.Shape;
+    /**
+     * Caution: returns group that is draggable
+     */
+    getPosition(): Position;
+    setPosition(position: Position): void;
+    setColor(color: string): void;
+    setEditable(editable: boolean): void;
+}

package/dist/timeline/marker/marker-lane.d.ts

@@ -0,0 +1,38 @@
+import { GenericMarker } from "./marker";
+import Konva from "konva";
+import { BaseTimelineLane, TimelaneLaneConfig, TimelineLaneStyle } from "../timeline-lane";
+import { MarkerLaneApi } from "../../api/marker-lane-api";
+import { ComponentConfigStyleComposed } from "../../common/component";
+import { PeriodMarker, PeriodMarkerConfig } from "./period-marker";
+import { MomentMarker, MomentMarkerConfig } from "./moment-marker";
+import { Subject } from "rxjs";
+import { MarkerFocusEvent } from "../../types";
+export interface HasMarkerLane {
+    setMarkerLane(markerLane: MarkerLane): void;
+}
+export interface MarkerLaneStyle extends TimelineLaneStyle {
+}
+export interface MarkerLaneConfig extends TimelaneLaneConfig<MarkerLaneStyle> {
+}
+export declare class MarkerLane extends BaseTimelineLane<MarkerLaneConfig, MarkerLaneStyle> implements MarkerLaneApi {
+    protected markersGroup: Konva.Group;
+    private markers;
+    private markersMap;
+    private markerInFocus;
+    readonly onMarkerFocus$: Subject<MarkerFocusEvent>;
+    constructor(config: ComponentConfigStyleComposed<MarkerLaneConfig>);
+    protected createCanvasNode(): Konva.Group;
+    protected settleLayout(): void;
+    destroy(): void;
+    clearContent(): void;
+    createMomentMarker(config: MomentMarkerConfig): MomentMarker;
+    createPeriodMarker(config: PeriodMarkerConfig): PeriodMarker;
+    addMarker(marker: GenericMarker): GenericMarker;
+    removeAllMarkers(): void;
+    removeMarker(id: string): void;
+    getMarker(id: string): GenericMarker;
+    getMarkers(): GenericMarker[];
+    focusMarker(id: string): void;
+    getMarkerInFocus(): GenericMarker;
+    private moveToTop;
+}

package/dist/timeline/marker/marker.d.ts

@@ -0,0 +1,64 @@
+import { OnMeasurementsChange } from "../../common/measurement";
+import { BaseComponent, Component, ComponentConfig } from "../../common/component";
+import Konva from "konva";
+import { HasMarkerLane, MarkerLane } from "./marker-lane";
+import { MarkerChangeEvent, MarkerEvent, TimeObservation } from "../../types";
+import { Subject } from "rxjs";
+import { Timeline } from "../timeline";
+export type MarkerRenderType = 'lane' | 'spanning';
+export type MarkerSymbolType = 'square' | 'triangle' | 'circle';
+export interface MarkerStyle {
+    color: string;
+    renderType: MarkerRenderType;
+    symbolType: MarkerSymbolType;
+}
+export declare const MARKER_STYLE_DEFAULT: MarkerStyle;
+export interface MarkerConfig<T extends TimeObservation, S extends MarkerStyle> extends ComponentConfig<S> {
+    id: string;
+    observation: T;
+    description?: string;
+    editable?: boolean;
+}
+export interface Marker<T extends TimeObservation, C extends MarkerConfig<T, S>, S extends MarkerStyle, E extends MarkerChangeEvent> extends Component<C, S, Konva.Group>, HasMarkerLane, OnMeasurementsChange {
+    onChange$: Subject<E>;
+    onClick$: Subject<MarkerEvent>;
+    onMouseEnter$: Subject<MarkerEvent>;
+    onMouseLeave$: Subject<MarkerEvent>;
+    get style(): S;
+    setStyle(value: Partial<S>): any;
+    getId(): string;
+    getDescription(): string;
+    getTimeObservation(): T;
+    setTimeObservation(timeObservation: T): void;
+    setEditable(editable: boolean): any;
+    setTimeline(timeline: Timeline): any;
+}
+export type GenericMarker = Marker<TimeObservation, MarkerConfig<TimeObservation, MarkerStyle>, MarkerStyle, MarkerChangeEvent>;
+export declare abstract class BaseMarker<T extends TimeObservation, C extends MarkerConfig<T, S>, S extends MarkerStyle, E extends MarkerChangeEvent> extends BaseComponent<C, S, Konva.Group> implements Marker<T, C, S, E> {
+    protected id: string;
+    protected observation: T;
+    protected description: string;
+    protected editable: boolean;
+    protected group: Konva.Group;
+    protected markerLane: MarkerLane;
+    protected timeline: Timeline;
+    readonly onChange$: Subject<E>;
+    readonly onClick$: Subject<MarkerEvent>;
+    readonly onMouseEnter$: Subject<MarkerEvent>;
+    readonly onMouseLeave$: Subject<MarkerEvent>;
+    protected constructor(config: C);
+    protected createCanvasNode(): Konva.Group;
+    protected afterCanvasNodeInit(): void;
+    onMeasurementsChange(): void;
+    destroy(): void;
+    abstract onChange(): any;
+    setTimeline(timeline: Timeline): void;
+    setMarkerLane(markerLane: MarkerLane): void;
+    getId(): string;
+    getDescription(): string;
+    getTimeObservation(): T;
+    setTimeObservation(timeObservation: T): void;
+    setEditable(editable: boolean): void;
+    get style(): S;
+    setStyle(value: Partial<S>): void;
+}

package/dist/timeline/marker/moment-marker.d.ts

@@ -0,0 +1,31 @@
+import Konva from "konva";
+import { BaseMarker, MarkerConfig, MarkerStyle } from "./marker";
+import { MomentMarkerChangeEvent, MomentObservation } from "../../types";
+import { BaseMarkerHandle, MarkerHandleConfig, MarkerHandleStyle } from "./marker-handle";
+import { MarkerLane } from "./marker-lane";
+import { Timeline } from "../timeline";
+import { ComponentConfigStyleComposed } from "../../common/component";
+export interface MomentMarkerHandleStyle extends MarkerHandleStyle {
+    markerSymbolSize: number;
+}
+export interface MomentMarkerHandleConfig extends MarkerHandleConfig<MomentMarkerHandleStyle> {
+}
+export declare class MomentMarkerHandle extends BaseMarkerHandle<MomentMarkerHandleConfig, MomentMarkerHandleStyle> {
+    constructor(config: ComponentConfigStyleComposed<MomentMarkerHandleConfig>, markerLane: MarkerLane, timeline: Timeline);
+    protected createSymbol(): Konva.Shape;
+}
+export interface MomentMarkerStyle extends MarkerStyle {
+}
+export interface MomentMarkerConfig extends MarkerConfig<MomentObservation, MomentMarkerStyle> {
+}
+export declare class MomentMarker extends BaseMarker<MomentObservation, MomentMarkerConfig, MomentMarkerStyle, MomentMarkerChangeEvent> {
+    private markerHandle;
+    constructor(config: ComponentConfigStyleComposed<MomentMarkerConfig>);
+    protected createCanvasNode(): Konva.Group;
+    protected afterCanvasNodeInit(): void;
+    private initMarkerHandle;
+    onChange(): void;
+    onMeasurementsChange(): void;
+    settlePosition(): void;
+    setEditable(editable: boolean): void;
+}

package/dist/timeline/marker/period-marker.d.ts

@@ -0,0 +1,43 @@
+import Konva from "konva";
+import { BaseMarker, MarkerConfig, MarkerStyle } from "./marker";
+import { PeriodMarkerChangeEvent, PeriodObservation } from "../../types";
+import { BaseMarkerHandle, MarkerHandleConfig, MarkerHandleStyle } from "./marker-handle";
+import { Timeline } from "../timeline";
+import { MarkerLane } from "./marker-lane";
+import { ComponentConfigStyleComposed } from "../../common/component";
+export interface PeriodMarkerHandleStyle extends MarkerHandleStyle {
+    markerSymbolSize: number;
+    periodMarkerHandleType: 'start' | 'end';
+}
+export interface PeriodMarkerHandleConfig extends MarkerHandleConfig<PeriodMarkerHandleStyle> {
+}
+export declare class PeriodMarkerHandle extends BaseMarkerHandle<PeriodMarkerHandleConfig, PeriodMarkerHandleStyle> {
+    constructor(config: ComponentConfigStyleComposed<PeriodMarkerHandleConfig>, markerLane: MarkerLane, timeline: Timeline);
+    protected createSymbol(): Konva.Shape;
+}
+export interface PeriodMarkerStyle extends MarkerStyle {
+    selectedAreaOpacity: number;
+    markerHandleAreaOpacity: number;
+}
+export interface PeriodMarkerConfig extends MarkerConfig<PeriodObservation, PeriodMarkerStyle> {
+}
+export declare class PeriodMarker extends BaseMarker<PeriodObservation, PeriodMarkerConfig, PeriodMarkerStyle, PeriodMarkerChangeEvent> {
+    private startMarkerHandle;
+    private endMarkerHandle;
+    private selectedAreaRect;
+    private markerHandleRect;
+    constructor(config: ComponentConfigStyleComposed<PeriodMarkerConfig>);
+    protected createCanvasNode(): Konva.Group;
+    onChange(): void;
+    onMeasurementsChange(): void;
+    private initSelectedAreaRect;
+    private initStartMarkerHandle;
+    private initEndMarkerHandle;
+    private settlePosition;
+    private settleMeasurements;
+    setTimeObservation(timeObservation: PeriodObservation): void;
+    setEditable(editable: boolean): void;
+    protected afterCanvasNodeInit(): void;
+    private hasStart;
+    private hasEnd;
+}

package/dist/timeline/playhead-hover.d.ts

@@ -0,0 +1,36 @@
+import { BaseComponent, ComponentConfig, ComponentConfigStyleComposed } from "../common/component";
+import Konva from "konva";
+import { OnMeasurementsChange } from "../common/measurement";
+import { Timeline } from "./timeline";
+import { StylesProvider } from "../common/styles-provider";
+export interface PlayheadHoverStyle {
+    x: number;
+    y: number;
+    height: number;
+    fill: string;
+    fillSnapped: string;
+    lineWidth: number;
+    symbolY: number;
+    symbolHeight: number;
+    textFontSize: number;
+    textFill: string;
+    textSnappedFill: string;
+    visible: boolean;
+}
+export interface PlayheadHoverConfig extends ComponentConfig<PlayheadHoverStyle> {
+}
+export declare class PlayheadHover extends BaseComponent<PlayheadHoverConfig, PlayheadHoverStyle, Konva.Group> implements OnMeasurementsChange {
+    protected readonly stylesProvider: StylesProvider;
+    protected group: Konva.Group;
+    protected line: Konva.Line;
+    protected symbol: Konva.Circle;
+    protected label: Konva.Label;
+    protected text: Konva.Text;
+    private timeline;
+    constructor(config: Partial<ComponentConfigStyleComposed<PlayheadHoverConfig>>, timeline: Timeline);
+    protected createCanvasNode(): Konva.Group;
+    protected afterCanvasNodeInit(): void;
+    onMeasurementsChange(): void;
+    sync(x: number, isSnapped?: boolean): void;
+    toggleVisible(visible: boolean): void;
+}

package/dist/timeline/playhead.d.ts

@@ -0,0 +1,40 @@
+import { BaseComponent, ComponentConfig, ComponentConfigStyleComposed } from "../common/component";
+import Konva from "konva";
+import { OnMeasurementsChange } from "../common/measurement";
+import { Timeline } from "./timeline";
+import { VideoController } from "../video/video-controller";
+export interface PlayheadStyle {
+    visible: boolean;
+    fill: string;
+    lineWidth: number;
+    symbolHeight: number;
+    scrubberHeight: number;
+    backgroundFill: string;
+    backgroundOpacity: number;
+    playProgressFill: string;
+    playProgressOpacity: number;
+    bufferedFill: string;
+    bufferedOpacity: number;
+}
+export interface PlayheadConfig extends ComponentConfig<PlayheadStyle> {
+}
+export declare class Playhead extends BaseComponent<PlayheadConfig, PlayheadStyle, Konva.Group> implements OnMeasurementsChange {
+    protected timeline: Timeline;
+    protected videoController: VideoController;
+    protected group: Konva.Group;
+    protected background: Konva.Rect;
+    protected playProgressBackground: Konva.Rect;
+    protected playheadGroup: Konva.Group;
+    protected playheadLine: Konva.Line;
+    protected playheadSymbol: Konva.Line;
+    protected bufferedGroup: Konva.Group;
+    constructor(config: Partial<ComponentConfigStyleComposed<PlayheadConfig>>, timeline: Timeline, videoController: VideoController);
+    protected createCanvasNode(): Konva.Group;
+    protected afterCanvasNodeInit(): void;
+    onMeasurementsChange(): void;
+    getPlayheadPosition(): number;
+    protected settleLayout(): void;
+    private doPlayProgress;
+    private doBufferingProgress;
+    private createBuffers;
+}

package/dist/timeline/scrollbar.d.ts

@@ -0,0 +1,60 @@
+import { BaseComponent, ComponentConfig, ComponentConfigStyleComposed } from "../common/component";
+import Konva from "konva";
+import { HasRectMeasurement, HorizontalMeasurement, OnMeasurementsChange, Position, RectMeasurement } from "../common/measurement";
+import { ScrollbarScrollEvent, ScrollbarZoomEvent } from "../types";
+import { Subject } from "rxjs";
+export interface ScrollableHorizontally {
+    setHorizontalScrollPercent(percent: number): void;
+    getHorizontalScrollPercent(): number;
+    getScrollHandleHorizontalMeasurement(scrollbarWidth: number): HorizontalMeasurement;
+}
+export interface ScrollbarStyle {
+    height: number;
+    backgroundFill: string;
+    backgroundFillOpacity: number;
+    handleBarFill: string;
+    handleBarOpacity: number;
+    handleOpacity: number;
+}
+export interface ScrollbarConfig extends ComponentConfig<ScrollbarStyle> {
+    x: number;
+    y: number;
+    width: number;
+    zoomMax: number;
+    scrollStepNumberOfDivisions: number;
+}
+export declare class Scrollbar extends BaseComponent<ScrollbarConfig, ScrollbarStyle, Konva.Group> implements OnMeasurementsChange, HasRectMeasurement {
+    protected x: number;
+    protected y: number;
+    protected width: number;
+    protected scrollStepNumberOfDivisions: number;
+    protected zoomMax: number;
+    protected minHandleBarWidth: any;
+    private group;
+    private handleGroup;
+    private background;
+    private handleBar;
+    private leftZoomHandle;
+    private rightZoomHandle;
+    readonly onScroll$: Subject<ScrollbarScrollEvent>;
+    readonly onZoom$: Subject<ScrollbarZoomEvent>;
+    constructor(config: Partial<ComponentConfigStyleComposed<ScrollbarConfig>>);
+    protected createCanvasNode(): Konva.Group;
+    protected afterCanvasNodeInit(): void;
+    onMeasurementsChange(): void;
+    onStyleChange(): void;
+    private getScrollHandleMaxX;
+    private getConstrainedHandleBarX;
+    private clickScrollTo;
+    private scrollTo;
+    private scrollToEased;
+    private calculateHandleBarWidthFromZoomRatioPercent;
+    getZoomPercent(): number;
+    getScrollHandlePercent(): number;
+    updateScrollHandle(scrollable: ScrollableHorizontally): void;
+    private syncLeftRightHandles;
+    setWidth(value: number): void;
+    setPosition(position: Position): void;
+    getPosition(): Position;
+    getRect(): RectMeasurement;
+}

package/dist/timeline/scrubber-lane.d.ts

@@ -0,0 +1,44 @@
+import Konva from "konva";
+import { BaseTimelineLane, TimelaneLaneConfig, TimelineLaneStyle } from "./timeline-lane";
+import { Subject } from "rxjs";
+import { ClickEvent, MouseEnterEvent, MouseLeaveEvent, MouseMoveEvent, MouseOutEvent, MouseOverEvent } from "../types";
+import { TimecodeDisplay } from "./timecode-display";
+import { VideoController } from "../video/video-controller";
+import { ComponentConfigStyleComposed } from "../common/component";
+export interface ScrubberLaneStyle extends TimelineLaneStyle {
+    tickDivisor: number;
+    tickDivisionMinWidth: number;
+    tickFill: string;
+    tickHeight: number;
+    divisionTickFill: string;
+    divisionTickHeight: number;
+    timecodeShowFirst: boolean;
+    timecodeFontSize: number;
+    timecodeFill: string;
+}
+export interface ScrubberLaneConfig extends TimelaneLaneConfig<ScrubberLaneStyle> {
+}
+export declare class ScrubberLane extends BaseTimelineLane<ScrubberLaneConfig, ScrubberLaneStyle> {
+    protected tickDivisionWidth: number;
+    protected tickTotalDivisions: number;
+    protected timecodeDisplay: TimecodeDisplay;
+    protected timecodedGroup: Konva.Group;
+    protected timecodedEventCatcher: Konva.Rect;
+    protected ticksGroup: Konva.Group;
+    protected videoController: VideoController;
+    readonly onClick$: Subject<ClickEvent>;
+    readonly onMouseEnter$: Subject<MouseEnterEvent>;
+    readonly onMouseOver$: Subject<MouseOverEvent>;
+    readonly onMouseMove$: Subject<MouseMoveEvent>;
+    readonly onMouseOut$: Subject<MouseOutEvent>;
+    readonly onMouseLeave$: Subject<MouseLeaveEvent>;
+    constructor(config: ComponentConfigStyleComposed<ScrubberLaneConfig>, videoController: VideoController);
+    protected createCanvasNode(): Konva.Group;
+    protected settleLayout(): void;
+    protected afterCanvasNodeInit(): void;
+    onStyleChange(): void;
+    destroy(): void;
+    clearContent(): void;
+    refreshTimeDivisions(forceCreate?: boolean): void;
+    private resolveTimeDivisionWidth;
+}

package/dist/timeline/subtitles/index.d.ts

@@ -0,0 +1 @@
+export { SubtitlesLane } from './subtitles-lane';

package/dist/timeline/subtitles/subtitles-lane-item.d.ts

@@ -0,0 +1,40 @@
+import { BaseComponent, ComponentConfig, ComponentConfigStyleComposed } from "../../common/component";
+import Konva from "konva";
+import { Dimension, HasRectMeasurement, HorizontalMeasurement, OnMeasurementsChange, Position, RectMeasurement } from "../../common/measurement";
+import { Comparable, OmakaseTextTrackCue } from "../../types";
+import { WithOptionalPartial } from "../../types/types";
+import { SubtitlesLane } from "./subtitles-lane";
+export interface SubtitlesLaneItemStyle {
+    height: number;
+    fill: string;
+    opacity: number;
+    visible: boolean;
+}
+export interface SubtitlesLaneItemConfig extends ComponentConfig<SubtitlesLaneItemStyle> {
+    textTrackCue: OmakaseTextTrackCue;
+    x: number;
+    width: number;
+    listening?: boolean;
+}
+export declare class SubtitlesLaneItem extends BaseComponent<SubtitlesLaneItemConfig, SubtitlesLaneItemStyle, Konva.Group> implements OnMeasurementsChange, HasRectMeasurement, Comparable<SubtitlesLaneItem> {
+    private x;
+    private width;
+    private listening;
+    private group;
+    private backgroundRect;
+    private textTrackCue;
+    private subtitlesLane;
+    constructor(config: ComponentConfigStyleComposed<SubtitlesLaneItemConfig>, subtitlesLane: SubtitlesLane);
+    protected createCanvasNode(): Konva.Group;
+    onMeasurementsChange(): void;
+    setPosition(position: WithOptionalPartial<Position, 'y'>): void;
+    getPosition(): Position;
+    getDimension(): Dimension;
+    getRect(): RectMeasurement;
+    getHorizontalMeasurement(): HorizontalMeasurement;
+    setHorizontalMeasurement(horizontalMeasurement: HorizontalMeasurement): void;
+    setVisible(visible: boolean): void;
+    getTextTrackCue(): OmakaseTextTrackCue;
+    setTextTrackCue(textTrackCue: OmakaseTextTrackCue): void;
+    compareTo(o: SubtitlesLaneItem): number;
+}

package/dist/timeline/subtitles/subtitles-lane.d.ts

@@ -0,0 +1,38 @@
+import { BaseTimelineLane, TimelaneLaneConfig, TimelineLaneStyle } from "../timeline-lane";
+import Konva from "konva";
+import { Subject } from "rxjs";
+import { HorizontalMeasurement } from "../../common/measurement";
+import { OmakaseTextTrackCue } from "../../types";
+import { SubtitlesLaneItem } from "./subtitles-lane-item";
+import { ComponentConfigStyleComposed } from "../../common/component";
+export interface SubtitlesLaneStyle extends TimelineLaneStyle {
+    paddingTop: number;
+    paddingBottom: number;
+    subtitlesLaneItemOpacity: number;
+    subtitlesLaneItemFill: string;
+}
+export interface SubtitlesLaneConfig extends TimelaneLaneConfig<SubtitlesLaneStyle> {
+    subtitlesVttUrl: string;
+}
+export declare class SubtitlesLane extends BaseTimelineLane<SubtitlesLaneConfig, SubtitlesLaneStyle> {
+    private _subtitlesVttUrl;
+    protected readonly subtitlesLaneItemsMap: Map<number, SubtitlesLaneItem>;
+    protected timecodedGroup: Konva.Group;
+    protected timecodedEventCatcher: Konva.Rect;
+    protected subtitlesLaneItemsGroup: Konva.Group;
+    private subtitlesVttFile;
+    readonly onSettleLayout$: Subject<void>;
+    constructor(config: ComponentConfigStyleComposed<SubtitlesLaneConfig>);
+    protected createCanvasNode(): Konva.Group;
+    protected settleLayout(): void;
+    protected afterCanvasNodeInit(): void;
+    clearContent(): void;
+    private clearItems;
+    private createEntities;
+    resolveItemHorizontalMeasurement(textTrackCue: OmakaseTextTrackCue): HorizontalMeasurement;
+    private fetchAndCreateSubtitles;
+    private fetchSubtitlesVttFile;
+    isVttLoaded(): boolean;
+    get subtitlesVttUrl(): string;
+    set subtitlesVttUrl(value: string);
+}