@byomakase/omakase-player 0.0.2

package/dist/api/timeline-api.d.ts

@@ -0,0 +1,91 @@
+/**
+ *       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.
+ */
+import { Api } from "./api";
+import { Observable } from "rxjs";
+import { TimelineScrollEvent, TimelineZoomEvent } from "../types";
+import { AudioTrackLane, MarkerLane, SubtitlesLane, ThumbnailLane } from "../timeline";
+import { GenericTimelaneLane } from "../timeline/timeline-lane";
+import { TimelineStyle } from "../timeline/timeline";
+import { MarkerLaneConfig } from "../timeline/marker/marker-lane";
+import { ThumbnailLaneConfig } from "../timeline/thumbnail/thumbnail-lane";
+import { SubtitlesLaneConfig } from "../timeline/subtitles/subtitles-lane";
+import { ScrubberLane } from "../timeline/scrubber-lane";
+import { Scrollbar } from "../timeline/scrollbar";
+export interface TimelineApi extends Api {
+    onScroll$: Observable<TimelineScrollEvent>;
+    onZoom$: Observable<TimelineZoomEvent>;
+    get style(): TimelineStyle;
+    /***
+     * Timeline zoom
+     * @param percent number between 100 and TimelineConfig.zoomMax
+     */
+    zoomTo(percent: number): Observable<number>;
+    /***
+     * Zoom in. Zoom scale in single method call is defined with TimelineConfig.zoomScale
+     */
+    zoomIn(): Observable<number>;
+    /***
+     * Zoom out. Zoom scale in single method call is defined with TimelineConfig.zoomScale
+     */
+    zoomOut(): Observable<number>;
+    /***
+     * Returns current zoom perent
+     */
+    getZoomPercent(): number;
+    /***
+     * Scrolls timeline
+     * @param percent in range from 0 - timeline start or first timestamp, to 100 - timeline end or last timestamop
+     */
+    scrollTo(percent: number): Observable<number>;
+    /***
+     * Scrolls timeline to playhead position
+     */
+    scrollToPlayhead(): Observable<number>;
+    getScrollbar(): Scrollbar;
+    /***
+     * Adds instantiated TimelineLane to timeline
+     * @param timelineLane
+     */
+    addLane(timelineLane: GenericTimelaneLane): void;
+    /***
+     * Removes TimelineLane by id
+     * @param id
+     */
+    removeLane(id: string): any;
+    /***
+     * Adds multiple instantiated TimelineLane-s to timeline
+     * @param timelineLanes
+     */
+    addLanes(timelineLanes: GenericTimelaneLane[]): void;
+    /***
+     * Returns all TimelineLane-s
+     */
+    getLanes(): GenericTimelaneLane[];
+    /***
+     * Returns single TimelineLane
+     * @param id TimelineLane.id
+     */
+    getLane(id: string): GenericTimelaneLane;
+    getScrubberLane(): ScrubberLane;
+    getMarkerLane(id: string): MarkerLane;
+    getThumbnailLane(id: string): ThumbnailLane;
+    getSubtitlesLane(id: string): SubtitlesLane;
+    getAudioTrackLane(id: string): AudioTrackLane;
+    createMarkerLane(config: MarkerLaneConfig): MarkerLane;
+    createThumbnailLane(config: ThumbnailLaneConfig): ThumbnailLane;
+    createSubtitlesLane(config: SubtitlesLaneConfig): SubtitlesLane;
+    toggleLeftPanelVisible(visible: boolean): void;
+}

package/dist/api/video-api.d.ts

@@ -0,0 +1,68 @@
+/**
+ *       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.
+ */
+import { Api } from "./api";
+import { Observable } from "rxjs";
+import { AudioEvent, VideoEndedEvent, VideoLoadedEvent, VideoPlayEvent, VideoSeekedEvent, VideoSeekingEvent, VideoTimeChangeEvent } from "../types/events";
+import { Video } from "../video/video";
+import Hls from "hls.js";
+import { HelpMenuGroup } from "../types";
+export interface VideoApi extends Api {
+    onVideoLoaded$: Observable<VideoLoadedEvent>;
+    onVideoTimeChange$: Observable<VideoTimeChangeEvent>;
+    onPlay$: Observable<VideoPlayEvent>;
+    onPause$: Observable<VideoPlayEvent>;
+    onSeeking$: Observable<VideoSeekingEvent>;
+    onSeeked$: Observable<VideoSeekedEvent>;
+    onEnded$: Observable<VideoEndedEvent>;
+    onAudioSwitched$: Observable<AudioEvent>;
+    loadVideo(sourceUrl: string, frameRate: number, duration?: number): Observable<Video>;
+    isVideoLoaded(): boolean;
+    getVideo(): Video;
+    getHTMLVideoElement(): HTMLVideoElement;
+    getDuration(): number;
+    getCurrentTime(): number;
+    getPlaybackRate(): number;
+    setPlaybackRate(playbackRate: number): any;
+    getVolume(): number;
+    setVolume(volume: number): any;
+    getCurrentFrame(): number;
+    getFrameRate(): number;
+    getTotalFrames(): number;
+    isPlaying(): boolean;
+    isPaused(): boolean;
+    isSeeking(): boolean;
+    play(): void;
+    pause(): void;
+    togglePlayPause(): void;
+    seekToFrame(frame: number): Observable<boolean>;
+    seekFromCurrentFrame(framesCount: number): Observable<boolean>;
+    seekPreviousFrame(): Observable<boolean>;
+    seekNextFrame(): Observable<boolean>;
+    seekToTimestamp(currentTime: number): Observable<boolean>;
+    formatTimestamp(currentTime: number): string;
+    calculateTimeToFrame(time: number): number;
+    calculateFrameToTime(framesCount: number): number;
+    mute(): any;
+    unmute(): any;
+    isFullscreen(): boolean;
+    toggleFullscreen(): any;
+    getAudioTracks(): any[];
+    getCurrentAudioTrack(): any;
+    setAudioTrack(audioTrackId: number): any;
+    getHls(): Hls;
+    addHelpMenuGroup(helpMenuGroup: HelpMenuGroup): any;
+    getHelpMenuGroups(): HelpMenuGroup[];
+}

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

@@ -0,0 +1,32 @@
+/**
+ *       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 { AudioApi } from "../api/audio-api";
+import { VideoController } from "../video/video-controller";
+import { Subject } from "rxjs";
+import { AudioEvent } from "../types";
+export declare class AudioController implements AudioApi {
+    protected videoController: VideoController;
+    readonly onAudioSwitched$: Subject<AudioEvent>;
+    constructor(videoController: VideoController);
+    getAudioTracks(): any[];
+    getCurrentAudioTrack(): any;
+    setAudioTrack(audioTrackId: number): void;
+}

package/dist/common/browser-provider.d.ts

@@ -0,0 +1,34 @@
+/**
+ *       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.
+ */
+export declare class BrowserProvider {
+    private static _instance;
+    private _userAgent;
+    private _isFirefox;
+    private _isEdge;
+    private _isChromium;
+    private _isChrome;
+    private _isAndroid;
+    private _isSafari;
+    private constructor();
+    static instance(): BrowserProvider;
+    private resolveUserAgent;
+    get isSafari(): any;
+    get isFirefox(): any;
+    get isEdge(): any;
+    get isChromium(): any;
+    get isChrome(): any;
+    get isAndroid(): any;
+}

package/dist/common/component.d.ts

@@ -0,0 +1,56 @@
+/**
+ *       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 Konva from "konva";
+import { Observable, Subject } from "rxjs";
+import { StyleAdapter } from "./style-adapter";
+import { WithOptionalPartial } from "../types/types";
+export interface ComponentConfig<S> {
+    style: S;
+}
+/***
+ * Intended to be used in component constructors. 'style' property is made optional, style type 'S' type is made Partial
+ */
+export type ComponentConfigStyleComposed<T extends ComponentConfig<any>> = WithOptionalPartial<T, 'style'>;
+export declare const composeConfigAndDefault: <T extends ComponentConfig<any>>(config: Partial<ComponentConfigStyleComposed<T>>, configDefault: T) => T;
+export interface Component<C extends ComponentConfig<S>, S, T extends Konva.Node> {
+    get style(): S;
+    set style(value: Partial<S>);
+    initCanvasNode(): T;
+    getCanvasNode(): T;
+    destroy(): any;
+    isInitialized(): boolean;
+}
+export declare abstract class BaseComponent<C extends ComponentConfig<S>, S, T extends Konva.Node> implements Component<C, S, T> {
+    protected config: C;
+    protected styleAdapter: StyleAdapter<S>;
+    protected canvasNode: T;
+    readonly onDestroy$: Subject<void>;
+    protected constructor(config: C);
+    protected abstract createCanvasNode(): T;
+    initCanvasNode(): T;
+    initCanvasNodeAsync(): Observable<T>;
+    protected createCanvasNodeAsync(): Observable<T>;
+    protected afterCanvasNodeInit(): void;
+    destroy(): void;
+    getCanvasNode(): T;
+    isInitialized(): boolean;
+    get style(): S;
+    set style(value: Partial<S>);
+}

package/dist/common/measurement.d.ts

@@ -0,0 +1,41 @@
+/**
+ *       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.
+ */
+export type Position = {
+    x: number;
+    y: number;
+};
+export type Dimension = {
+    width: number;
+    height: number;
+};
+export type RectMeasurement = Position & Dimension;
+export type HorizontalMeasurement = {
+    x: number;
+    width: number;
+};
+export type VerticalMeasurement = {
+    y: number;
+    height: number;
+};
+export interface OnMeasurementsChange {
+    onMeasurementsChange(): any;
+}
+export interface HasDimension {
+    getDimension(): Dimension;
+}
+export interface HasRectMeasurement {
+    getRect(): RectMeasurement;
+}

package/dist/common/style-adapter.d.ts

@@ -0,0 +1,27 @@
+/**
+ *       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 { Subject } from "rxjs";
+export declare class StyleAdapter<T> {
+    readonly onChange$: Subject<T>;
+    private _style;
+    constructor(style: T);
+    get style(): T;
+    set style(value: Partial<T>);
+}

package/dist/common/styles-provider.d.ts

@@ -0,0 +1,33 @@
+/**
+ *       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 { Subject } from "rxjs";
+import { OmakasePlayerStyle } from "../omakase-player";
+export interface Styles {
+    omakasePlayerStyle: OmakasePlayerStyle;
+}
+export declare class StylesProvider {
+    private static _instance;
+    readonly onChange$: Subject<Styles>;
+    private _styles;
+    private constructor();
+    static instance(): StylesProvider;
+    get styles(): Styles;
+    set styles(value: Partial<Styles>);
+}

package/dist/constants.d.ts

@@ -0,0 +1,9 @@
+import { Dimension, Position } from "./common/measurement";
+export declare class Constants {
+    static POSITION_TOP_LEFT: Position;
+    static DIMENSION_ZERO: Dimension;
+    static GOLDEN_RATIO: number;
+    static TIMELINE_ZOOM_EASED_DURATION_MS: number;
+    static TIMELINE_SCROLL_EASED_DURATION_MS: number;
+    static MIME_TYPE_VND_APPLE_MPEGURL: string;
+}

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

@@ -0,0 +1,53 @@
+/**
+ *       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 { VideoController } from "../video/video-controller";
+import { Timeline } from "../timeline/timeline";
+export declare class DomController {
+    private readonly _playerHTMLElementId;
+    private _videoElement;
+    private _timelineElement;
+    private _videoController;
+    private videoEventBreaker$;
+    private showTemporaryOnMouseMoveTimeoutId;
+    private readonly divPlayer;
+    private divPlayerWrapper;
+    private divButtonPlay;
+    private divButtonPause;
+    private divButtonLoading;
+    private divButtonReplay;
+    private divButtonHelp;
+    private divHelp;
+    private divHelpMenu;
+    private _timeline;
+    constructor(playerHTMLElementId: string);
+    private createDom;
+    private getElementById;
+    private getPlayerElement;
+    private getPlayerElements;
+    private showElements;
+    private isShown;
+    private hideElements;
+    private helpChangeHandler;
+    isFullscreen(): boolean;
+    toggleFullscreen(videoElement: HTMLVideoElement): void;
+    set videoController(value: VideoController);
+    set timeline(value: Timeline);
+    get videoElement(): HTMLVideoElement;
+}

package/dist/dom/fullscreen.d.ts

@@ -0,0 +1,32 @@
+/***
+ * https://github.com/imbhargav5/rooks/blob/main/packages/rooks/src/hooks/useFullscreen.ts
+ */
+export interface FullscreenElement {
+    requestFullscreen?: Element["requestFullscreen"];
+    webkitRequestFullscreen?: Element["requestFullscreen"];
+    webkitRequestFullScreen?: Element["requestFullscreen"];
+    mozRequestFullScreen?: Element["requestFullscreen"];
+    msRequestFullscreen?: Element["requestFullscreen"];
+}
+export interface FullscreenDocument {
+    fullscreenEnabled?: Document["fullscreenEnabled"];
+    webkitFullscreenEnabled?: Document["fullscreenEnabled"];
+    mozFullScreenEnabled?: Document["fullscreenEnabled"];
+    msFullscreenEnabled?: Document["fullscreenEnabled"];
+    fullscreenElement?: Document["fullscreenElement"];
+    webkitFullscreenElement?: Document["fullscreenElement"];
+    webkitCurrentFullScreenElement?: Document["fullscreenElement"];
+    mozFullScreenElement?: Document["fullscreenElement"];
+    msFullscreenElement?: Document["fullscreenElement"];
+    exitFullscreen?: Document["exitFullscreen"];
+    webkitExitFullscreen?: Document["exitFullscreen"];
+    webkitCancelFullScreen?: Document["exitFullscreen"];
+    mozCancelFullScreen?: Document["exitFullscreen"];
+    msExitFullscreen?: Document["exitFullscreen"];
+}
+export declare class Fullscreen {
+    static isFullscreenEnabled(): boolean;
+    static isFullscreen(): boolean;
+    static requestFullscreen(element: Element | null, options?: FullscreenOptions | undefined): Promise<void>;
+    static exitFullscreen(): Promise<void>;
+}

package/dist/events.d.ts

@@ -0,0 +1,14 @@
+export type OmakaseEventMap<T> = {
+    [K in keyof T]: T[K];
+};
+export type OmakaseEventKey<T extends OmakaseEventMap<any>> = keyof T;
+export type OmakaseEventListener<T> = (event: T) => void;
+export interface OmakaseEventEmitter<T extends OmakaseEventMap<any>> {
+    on<K extends OmakaseEventKey<T>>(eventKey: K, handler: OmakaseEventListener<T[K]>): void;
+    off<K extends OmakaseEventKey<T>>(eventKey: K, handler: OmakaseEventListener<T[K]>): void;
+    emit<K extends OmakaseEventKey<T>>(eventKey: K, event: T[K]): void;
+    once<K extends OmakaseEventKey<T>>(eventKey: K, handler: OmakaseEventListener<T[K]>): void;
+    listeners<K extends OmakaseEventKey<T>>(eventKey: K): OmakaseEventListener<T[K]>[];
+    listenerCount<K extends OmakaseEventKey<T>>(eventKey: K): void;
+    removeAllListeners<K extends OmakaseEventKey<T>>(eventKey?: K): void;
+}

package/dist/http.d.ts

@@ -0,0 +1,2 @@
+import { AxiosResponse } from "axios";
+export declare function httpGet<T>(url: string): Promise<AxiosResponse<T, any>>;

package/dist/images/help.svg

@@ -0,0 +1,17 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_d_313_115)">
+        <path d="M25.3001 19.16C27.5701 15.37 27.5701 10.63 25.3001 6.84C25.6501 6.52 25.6801 5.98 25.3601 5.63C25.3601 5.63 25.3401 5.61 25.3301 5.6L22.3901 2.66C22.0601 2.33 21.5201 2.33 21.1801 2.66C21.1801 2.66 21.1601 2.68 21.1501 2.69C17.3701 0.43 12.6301 0.43 8.84006 2.7C8.52006 2.35 7.99006 2.32 7.64006 2.64C7.63006 2.64 7.62006 2.66 7.61006 2.67L4.67006 5.61C4.34006 5.95 4.34006 6.49 4.67006 6.82C4.67006 6.82 4.69006 6.84 4.70006 6.85C2.43006 10.64 2.43006 15.38 4.70006 19.17C4.35006 19.49 4.32006 20.03 4.64006 20.38C4.64006 20.38 4.66006 20.4 4.67006 20.41L7.61006 23.35C7.95006 23.68 8.49006 23.68 8.82006 23.35C8.82006 23.35 8.84006 23.33 8.85006 23.32C12.6401 25.59 17.3801 25.59 21.1701 23.32C21.4901 23.67 22.0301 23.7 22.3801 23.38C22.3801 23.38 22.4001 23.36 22.4101 23.35L25.3501 20.41C25.6801 20.07 25.6801 19.53 25.3501 19.2C25.3501 19.2 25.3301 19.18 25.3201 19.18L25.3001 19.16ZM24.6501 18.58L22.2301 16.44C23.2601 14.27 23.2601 11.74 22.2301 9.57L24.6501 7.43C26.6501 10.88 26.6401 15.14 24.6501 18.59V18.58ZM21.7901 3.27L24.7301 6.2L21.5801 8.99L19.0001 6.42C19.1101 6.29 21.7801 3.28 21.7901 3.26V3.27ZM21.4101 16.16C21.2501 16.19 21.0901 16.27 20.9801 16.39L18.4001 18.97C18.2801 19.09 18.2001 19.24 18.1701 19.4C16.1801 20.38 13.8401 20.38 11.8501 19.4C11.8201 19.24 11.7401 19.08 11.6201 18.97L9.04006 16.39C8.92006 16.27 8.77006 16.19 8.61006 16.16C7.63006 14.17 7.63006 11.83 8.61006 9.84C8.77006 9.81 8.93006 9.73 9.05006 9.61L11.6301 7.03C11.7501 6.91 11.8301 6.76 11.8601 6.6C13.8501 5.62 16.1901 5.62 18.1801 6.6C18.2101 6.76 18.2901 6.92 18.4101 7.03L20.9901 9.61C21.1101 9.73 21.2601 9.81 21.4301 9.84C22.4101 11.83 22.4101 14.17 21.4301 16.16H21.4101ZM20.5801 3.35L18.4401 5.77C16.2701 4.73 13.7401 4.73 11.5701 5.77L9.43006 3.35C12.8801 1.35 17.1401 1.35 20.5901 3.35H20.5801ZM8.20006 3.27L10.9901 6.42L8.42006 9L5.26006 6.21L8.19006 3.27H8.20006ZM5.35006 7.42L7.77006 9.56C6.74006 11.73 6.74006 14.26 7.77006 16.43L5.35006 18.57C3.35006 15.12 3.35006 10.86 5.35006 7.41V7.42ZM8.21006 22.73L5.27006 19.8L8.42006 17.01L11.0001 19.58C11.0001 19.58 8.21006 22.73 8.21006 22.74V22.73ZM9.42006 22.65L11.5601 20.23C13.7301 21.27 16.2601 21.27 18.4301 20.23L20.5701 22.65C17.1201 24.65 12.8601 24.65 9.41006 22.65H9.42006ZM21.8001 22.73L19.0101 19.58L21.5801 17C21.5801 17 24.7301 19.79 24.7401 19.79L21.8101 22.73H21.8001Z" fill="white"/>
+    </g>
+    <defs>
+        <filter id="filter0_d_313_115" x="0.997559" y="0.996248" width="28.0049" height="28.0263" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="2"/>
+            <feGaussianBlur stdDeviation="1"/>
+            <feComposite in2="hardAlpha" operator="out"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_313_115"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_313_115" result="shape"/>
+        </filter>
+    </defs>
+</svg>

package/dist/images/loading.svg

@@ -0,0 +1,29 @@
+<svg width="113" height="113" viewBox="0 0 113 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g clip-path="url(#clip0_313_105)" filter="url(#filter0_d_313_105)">
+		<path d="M56.5001 0C54.7134 0 53.2654 1.44798 53.2654 3.23468V22.9391C53.2654 24.7258 54.7134 26.1738 56.5001 26.1738C58.2868 26.1738 59.7347 24.7258 59.7347 22.9391V3.23468C59.7347 1.44798 58.2868 0 56.5001 0Z" fill="white"/>
+		<path d="M93.6225 19.95C94.8842 18.6883 94.8842 16.6391 93.6225 15.3774C92.3608 14.1157 90.3116 14.1157 89.0499 15.3774L75.112 29.3153C73.8503 30.577 73.8503 32.6262 75.112 33.8879C76.3314 35.1073 78.4568 35.1073 79.6846 33.8879L93.6225 19.95Z" fill="white"/>
+		<path d="M23.95 15.3774C23.3234 14.7508 22.4936 14.429 21.6637 14.429C20.8339 14.429 20.004 14.7423 19.3774 15.3774C18.1157 16.6391 18.1157 18.6883 19.3774 19.95L33.3153 33.8879C34.5347 35.1073 36.6686 35.1073 37.8879 33.8879C39.1496 32.6262 39.1496 30.577 37.8879 29.3153L23.95 15.3774Z" fill="white"/>
+		<path d="M4 52.5C4 54.2867 5.44798 55.7347 7.23468 55.7347H26.9391C28.7258 55.7347 30.1738 54.2867 30.1738 52.5C30.1738 50.7133 28.7258 49.2653 26.9391 49.2653H7.23468C5.44798 49.2653 4 50.7133 4 52.5Z" fill="white"/>
+		<path d="M37.8795 75.6847C39.1412 74.423 39.1412 72.3738 37.8795 71.1121C36.6178 69.8504 34.5686 69.8504 33.3069 71.1121L19.369 85.05C18.7594 85.6597 18.4207 86.4726 18.4207 87.3363C18.4207 88.2 18.7594 89.0129 19.369 89.6226C20.5884 90.8419 22.7138 90.8419 23.9416 89.6226L37.8795 75.6847Z" fill="white"/>
+		<g opacity="0.3">
+			<path d="M105.765 49.2653H86.0609C84.2742 49.2653 82.8262 50.7133 82.8262 52.5C82.8262 54.2867 84.2742 55.7347 86.0609 55.7347H105.765C107.552 55.7347 109 54.2867 109 52.5C109 50.7133 107.552 49.2653 105.765 49.2653Z" fill="white"/>
+			<path d="M94.5709 87.3363C94.5709 86.4726 94.2322 85.6597 93.6225 85.05L79.6846 71.1121C79.0749 70.5024 78.262 70.1637 77.3983 70.1637C76.5346 70.1637 75.7217 70.5024 75.112 71.1121C73.8503 72.3738 73.8503 74.423 75.112 75.6847L89.0499 89.6226C90.2693 90.8419 92.3947 90.8419 93.6225 89.6226C94.2322 89.0129 94.5709 88.2 94.5709 87.3363Z" fill="white"/>
+			<path d="M56.5001 78.8262C54.7134 78.8262 53.2654 80.2742 53.2654 82.0609V101.765C53.2654 103.552 54.7134 105 56.5001 105C58.2868 105 59.7347 103.552 59.7347 101.765V82.0609C59.7347 80.2742 58.2868 78.8262 56.5001 78.8262Z" fill="white"/>
+		</g>
+	</g>
+	<defs>
+		<filter id="filter0_d_313_105" x="0" y="0" width="113" height="113" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+			<feOffset dy="4"/>
+			<feGaussianBlur stdDeviation="2"/>
+			<feComposite in2="hardAlpha" operator="out"/>
+			<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
+			<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_313_105"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_313_105" result="shape"/>
+		</filter>
+		<clipPath id="clip0_313_105">
+			<rect width="105" height="105" fill="white" transform="translate(4)"/>
+		</clipPath>
+	</defs>
+</svg>

package/dist/images/pause.svg

@@ -0,0 +1,19 @@
+<svg width="114" height="114" viewBox="0 0 114 114" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_d_261_534)">
+        <path d="M57.0001 0.320007C27.9526 0.320007 4.32007 23.9525 4.32007 53C4.32007 82.0475 27.9526 105.68 57.0001 105.68C86.0476 105.68 109.68 82.0475 109.68 53C109.68 23.9525 86.0476 0.320007 57.0001 0.320007ZM57.0001 103.18C29.3301 103.18 6.82007 80.67 6.82007 53C6.82007 25.33 29.3301 2.82001 57.0001 2.82001C84.6701 2.82001 107.18 25.33 107.18 53C107.18 80.67 84.6701 103.18 57.0001 103.18Z" fill="white"/>
+        <path d="M80.49 28.9H65.425C64.735 28.9 64.175 29.46 64.175 30.15V75.85C64.175 76.54 64.735 77.1 65.425 77.1H80.49C81.18 77.1 81.74 76.54 81.74 75.85V30.15C81.74 29.4575 81.18 28.9 80.49 28.9ZM79.24 74.6H66.675V31.4H79.24V74.6Z" fill="white"/>
+        <path d="M48.575 28.9H33.51C32.82 28.9 32.26 29.46 32.26 30.15V75.85C32.26 76.54 32.82 77.1 33.51 77.1H48.575C49.265 77.1 49.825 76.54 49.825 75.85V30.15C49.825 29.4575 49.265 28.9 48.575 28.9ZM47.325 74.6H34.76V31.4H47.325V74.6Z" fill="white"/>
+    </g>
+    <defs>
+        <filter id="filter0_d_261_534" x="0.320068" y="0.320007" width="113.36" height="113.36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="4"/>
+            <feGaussianBlur stdDeviation="2"/>
+            <feComposite in2="hardAlpha" operator="out"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_261_534"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_261_534" result="shape"/>
+        </filter>
+    </defs>
+</svg>

package/dist/images/play.svg

@@ -0,0 +1,18 @@
+<svg width="114" height="114" viewBox="0 0 114 114" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_d_261_530)">
+        <path d="M57.0001 0.320007C27.9526 0.320007 4.32007 23.9525 4.32007 53C4.32007 82.0475 27.9526 105.68 57.0001 105.68C86.0476 105.68 109.68 82.0475 109.68 53C109.68 23.9525 86.0476 0.320007 57.0001 0.320007ZM57.0001 103.18C29.3301 103.18 6.82007 80.67 6.82007 53C6.82007 25.33 29.3301 2.82001 57.0001 2.82001C84.6701 2.82001 107.18 25.33 107.18 53C107.18 80.67 84.6701 103.18 57.0001 103.18Z" fill="white"/>
+        <path d="M81.9476 51.9175L43.6801 29.825C43.2926 29.6025 42.8176 29.6025 42.4301 29.825C42.0426 30.0475 41.8051 30.46 41.8051 30.9075V75.0925C41.8051 75.54 42.0426 75.9525 42.4301 76.175C42.6226 76.2875 42.8401 76.3425 43.0551 76.3425C43.2701 76.3425 43.4876 76.2875 43.6801 76.175L81.9451 54.0825C82.3326 53.86 82.5701 53.4475 82.5701 53C82.5701 52.5525 82.3326 52.14 81.9476 51.9175ZM44.3051 72.9275V33.0725L78.8226 53L44.3051 72.9275Z" fill="white"/>
+    </g>
+    <defs>
+        <filter id="filter0_d_261_530" x="0.320068" y="0.320007" width="113.36" height="113.36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="4"/>
+            <feGaussianBlur stdDeviation="2"/>
+            <feComposite in2="hardAlpha" operator="out"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_261_530"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_261_530" result="shape"/>
+        </filter>
+    </defs>
+</svg>

package/dist/images/replay.svg

@@ -0,0 +1,23 @@
+<svg width="105" height="113" viewBox="0 0 105 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_d_280_117)">
+        <g clip-path="url(#clip0_280_117)">
+            <path d="M4.11453 53.448C3.64226 60.3193 4.63823 67.1041 7.07672 73.6176C9.41468 79.867 12.938 85.45 17.5461 90.2148C21.9976 94.8159 27.251 98.4444 33.159 100.997C45.3327 106.258 58.7713 106.335 70.9988 101.21C94.0885 91.5357 106.017 65.3366 98.1565 41.5689C93.9926 28.9813 85.1107 18.8954 73.1521 13.1674C67.3469 10.3875 61.163 8.80709 54.7687 8.47042C48.15 8.12207 41.6247 9.13207 35.3754 11.47C32.0835 12.7021 28.9109 14.3036 25.951 16.2301L24.2724 17.3219L27.7817 1.48928C27.8518 1.16898 27.7957 0.84167 27.6203 0.565791C27.445 0.289912 27.1715 0.0981992 26.8512 0.0280605C26.1965 -0.114555 25.5419 0.301602 25.3946 0.958568L21.0858 20.4151C20.9922 20.8335 21.0741 21.2567 21.3149 21.6097C21.558 21.9651 21.9298 22.1966 22.3576 22.2597L42.0736 25.1447C42.7399 25.2429 43.3595 24.78 43.4577 24.1137C43.5068 23.7911 43.4249 23.4684 43.2309 23.2066C43.0345 22.9424 42.7493 22.7717 42.4243 22.725L24.574 20.1181L26.2947 18.9351C29.3832 16.8099 32.7264 15.0681 36.231 13.7589C47.9956 9.35651 60.7352 9.92697 72.0976 15.3697C83.4531 20.8078 91.8814 30.3818 95.8349 42.3311C103.298 64.897 91.9726 89.7706 70.0519 98.9564C64.3286 101.355 58.3224 102.555 52.3209 102.555C46.151 102.555 39.9881 101.287 34.1292 98.7577C22.5633 93.7591 13.768 84.5265 9.36324 72.7619C7.04165 66.557 6.09711 60.0949 6.55535 53.5509C6.57873 53.2096 6.45716 52.8729 6.21869 52.6228C5.98489 52.3773 5.67161 52.244 5.3326 52.244C5.32325 52.244 5.31156 52.244 5.30221 52.244C4.67797 52.2557 4.15661 52.7841 4.11453 53.4457V53.448Z" fill="white"/>
+            <path d="M75.5812 57.1701L39.7941 36.5095C39.4317 36.3015 38.9875 36.3015 38.6251 36.5095C38.2628 36.7176 38.0406 37.1034 38.0406 37.5219V78.8429C38.0406 79.2614 38.2628 79.6472 38.6251 79.8553C38.8052 79.9605 39.0086 80.0119 39.2096 80.0119C39.4107 80.0119 39.6141 79.9605 39.7941 79.8553L75.5789 59.1947C75.9413 58.9867 76.1634 58.6009 76.1634 58.1824C76.1634 57.7639 75.9413 57.3782 75.5812 57.1701ZM40.3786 76.8183V39.5465L72.6588 58.1824L40.3786 76.8183Z" fill="white"/>
+        </g>
+    </g>
+    <defs>
+        <filter id="filter0_d_280_117" x="0" y="0" width="104.567" height="113" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="4"/>
+            <feGaussianBlur stdDeviation="2"/>
+            <feComposite in2="hardAlpha" operator="out"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_280_117"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_280_117" result="shape"/>
+        </filter>
+        <clipPath id="clip0_280_117">
+            <rect width="96.567" height="105" fill="white" transform="translate(4)"/>
+        </clipPath>
+    </defs>
+</svg>

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./timeline/marker";
+export * from "./timeline";
+export * from "./omakase-player";