@byomakase/omakase-player 0.0.2

package/dist/types/track.d.ts

@@ -0,0 +1,21 @@
+export interface OmakaseTrackConfig {
+    id: string;
+    src: string;
+    default: boolean;
+    label: string;
+    language: string;
+}
+export interface OmakaseTextTrackCue {
+    id: string;
+    startTime: number;
+    endTime: number;
+}
+export interface OmakaseTextTrack<T extends OmakaseTextTrackCue> {
+    id: string;
+    src: string;
+    default: boolean;
+    label: string;
+    language: string;
+    hidden: boolean;
+    cues: T[];
+}

package/dist/types/types.d.ts

@@ -0,0 +1,3 @@
+export type CamelToSnakeCase<S extends string> = S extends `${infer T}${infer U}` ? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${CamelToSnakeCase<U>}` : S;
+export type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>;
+export type WithOptionalPartial<T, K extends keyof T> = Omit<T, K> & PartialRecord<K, Partial<T[K]>>;

package/dist/types/vtt.d.ts

@@ -0,0 +1,23 @@
+import { OmakaseTextTrackCue, OmakaseTrackConfig } from "./track";
+export interface OmakaseVttFile<T extends OmakaseVttCue> {
+    getCues(): T[];
+    findCue(time: number): T;
+    findCues(startTime: number, endTime: number): T[];
+}
+export interface OmakaseVttCue extends OmakaseTextTrackCue {
+    text: string;
+    vttCue?: VTTCue;
+}
+export interface ThumbnailVttCue extends OmakaseVttCue {
+    url: string;
+}
+export interface SubtitlesVttCue extends OmakaseVttCue {
+}
+export interface AudioVttCue extends OmakaseVttCue {
+    minSample: number;
+    maxSample: number;
+}
+export interface SubtitlesVttTrackConfig extends OmakaseTrackConfig {
+    label: string;
+    language: string;
+}

package/dist/util/animation-util.d.ts

@@ -0,0 +1,11 @@
+import Konva from "konva";
+import { IFrame } from "konva/lib/types";
+export interface AnimateConf {
+    layer: Konva.Layer;
+    duration: number;
+    from: number;
+    to: number;
+    onUpdateHandler: (frame: IFrame, value: number) => void;
+    onCompleteHandler?: (frame: IFrame, value: number) => void;
+}
+export declare function animate(conf: AnimateConf): void;

package/dist/util/color-util.d.ts

@@ -0,0 +1,3 @@
+export declare class ColorUtil {
+    static randomHexColor(): string;
+}

package/dist/util/frame-util.d.ts

@@ -0,0 +1,18 @@
+import Decimal from "decimal.js";
+export declare class FrameUtil {
+    /***
+     * Returns frame number
+     *
+     * @param time in Seconds
+     * @param frameRateDecimal
+     */
+    static timeToFrame(time: number, frameRateDecimal: Decimal): number;
+    /***
+     * Returns time in seconds
+     *
+     * @param framesCount
+     * @param frameRateDecimal
+     * @param timeCorrection
+     */
+    static frameToTime(framesCount: number, frameRateDecimal: Decimal): number;
+}

package/dist/util/image-util.d.ts

@@ -0,0 +1,9 @@
+import Konva from "konva";
+import { Observable } from "rxjs";
+export declare class ImageUtil {
+    static createKonvaImage(url: string): Observable<Konva.Image>;
+    static createKonvaImageSizedByWidth(url: string, width: number): Observable<Konva.Image>;
+    static createKonvaImageSizedByHeight(url: string, height: number): Observable<Konva.Image>;
+    static calculateProportionalHeight(width: number, image: Konva.Image): number;
+    static calculateProportionalWidth(height: number, image: Konva.Image): number;
+}

package/dist/util/observable-util.d.ts

@@ -0,0 +1,2 @@
+import { Subject } from "rxjs";
+export declare function completeSubject(subject: Subject<void>): void;

package/dist/util/shape-util.d.ts

@@ -0,0 +1,17 @@
+import Konva from "konva";
+export declare class ShapeUtil {
+    static createGoldenRatioWedge(config: {
+        x: number;
+        y: number;
+        height: number;
+        color: string;
+    }): Konva.Line;
+    static createTriangle(config: {
+        x: number;
+        y: number;
+        height: number;
+        color: string;
+    }): Konva.Line;
+    static createEventCatcher(config?: Konva.RectConfig): import("konva/lib/shapes/Rect").Rect;
+    static createDebugRect(): import("konva/lib/shapes/Rect").Rect;
+}

package/dist/util/time-util.d.ts

@@ -0,0 +1,6 @@
+import Decimal from "decimal.js";
+export declare class TimeUtil {
+    static readonly VIDEO_ZERO_TIMESTAMP: string;
+    static formatVideoTimestamp(time: number, frameRateDecimal: Decimal): string;
+    private static padZero;
+}

package/dist/util/window-util.d.ts

@@ -0,0 +1,4 @@
+export declare class WindowUtil {
+    static resetCursorStyle(): void;
+    static cursor(cursor: 'default' | 'pointer' | 'grab' | 'grabbing' | 'ew-resize'): void;
+}

package/dist/validators.d.ts

@@ -0,0 +1,6 @@
+export declare class Validators {
+    static id(): (value: string) => string;
+    static description(): (value: string) => string;
+    static boolean(): (value: boolean) => boolean;
+    static url(): (value: string) => string;
+}

package/dist/video/playback-state.d.ts

@@ -0,0 +1,23 @@
+import { Subject } from "rxjs";
+export interface PlaybackState {
+    playing: boolean;
+    paused: boolean;
+    waiting: boolean;
+    seeking: boolean;
+    buffering: boolean;
+    ended: boolean;
+}
+export declare class PlaybackStateMachine {
+    readonly onChange$: Subject<PlaybackState>;
+    private _state;
+    constructor();
+    private updateState;
+    private compare;
+    get state(): PlaybackState;
+    setPlaying(): void;
+    setPaused(): void;
+    setEnded(): void;
+    set waiting(value: boolean);
+    set seeking(value: boolean);
+    set buffering(value: boolean);
+}

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

@@ -0,0 +1,139 @@
+import Decimal from "decimal.js";
+import { AudioEvent, VideoBufferingEvent, VideoEndedEvent, VideoLoadedEvent, VideoLoadingEvent, VideoPlayEvent, VideoSeekedEvent, VideoSeekingEvent, VideoTimeChangeEvent } from "../types/events";
+import { BehaviorSubject, Observable, Subject } from "rxjs";
+import { BrowserProvider } from "../common/browser-provider";
+import { VideoApi } from "../api/video-api";
+import { Video } from "./video";
+import { DomController } from "../dom/dom-controller";
+import { PlaybackState, PlaybackStateMachine } from "./playback-state";
+import Hls from "hls.js";
+import { HelpMenuGroup } from "../types";
+export declare const HTMLVideoElementEventKeys: {
+    PAUSE: string;
+    WAITING: string;
+    PLAYING: string;
+    TIMEUPDATE: string;
+    SEEKING: string;
+    SEEKED: string;
+    LOADEDDATA: string;
+    LOADEDMETEDATA: string;
+    ENDED: string;
+    PROGRESS: string;
+};
+export interface BufferedTimespan {
+    start: number;
+    end: number;
+}
+export type HTMLVideoElementCrossorigin = 'anonymous' | 'use-credentials';
+interface VideoFrameCallbackData {
+    now: DOMHighResTimeStamp;
+    metadata: VideoFrameCallbackMetadata;
+}
+export declare abstract class VideoController implements VideoApi {
+    protected browserProvider: BrowserProvider;
+    protected domController: DomController;
+    protected crossorigin: HTMLVideoElementCrossorigin;
+    protected videoElement: HTMLVideoElement;
+    protected helpMenuGroups: HelpMenuGroup[];
+    protected video: Video;
+    protected _isVideoLoaded: boolean;
+    protected playbackStateMachine: PlaybackStateMachine;
+    protected frameRateDecimal: Decimal;
+    protected userSetDuration: number;
+    protected frameDurationSpillOverCorrection: number;
+    protected syncStepCurrentTimeMediaTime: number;
+    protected syncLoopMaxIterations: number;
+    protected videoFrameCallbackHandle: number;
+    protected seekInProgress: boolean;
+    protected videoStalledCheckIntervalMs: number;
+    protected videoStalledCheckLastCurrentTime: number;
+    /***
+     * Stream of data provided by videoElement.requestVideoFrameCallback()
+     * @protected
+     */
+    protected readonly videoFrameCallback$: BehaviorSubject<VideoFrameCallbackData>;
+    protected videoEventBreaker$: Subject<void>;
+    /***
+     * Cancels previous unfinished seek operation if new seek is requested
+     * @protected
+     */
+    protected seekBreaker$: Subject<void>;
+    readonly onVideoLoaded$: Subject<VideoLoadedEvent>;
+    readonly onVideoLoading$: Subject<VideoLoadingEvent>;
+    readonly onPlay$: Subject<VideoPlayEvent>;
+    readonly onPause$: Subject<VideoPlayEvent>;
+    readonly onVideoTimeChange$: Subject<VideoTimeChangeEvent>;
+    readonly onSeeking$: Subject<VideoSeekingEvent>;
+    readonly onSeeked$: Subject<VideoSeekedEvent>;
+    readonly onBuffering$: Subject<VideoBufferingEvent>;
+    readonly onEnded$: Subject<VideoEndedEvent>;
+    readonly onAudioSwitched$: Subject<AudioEvent>;
+    readonly onPlaybackState$: Subject<PlaybackState>;
+    readonly onHelpMenuChange$: Subject<void>;
+    protected constructor(domController: DomController, crossorigin: HTMLVideoElementCrossorigin);
+    loadVideo(sourceUrl: string, frameRate: number, duration: number): Observable<Video>;
+    protected abstract videoLoad(sourceUrl: string, frameRate: number, duration: number): Observable<Video>;
+    protected initEventHandlers(): void;
+    getBufferedTimespans(): BufferedTimespan[];
+    protected startVideoFrameCallback(): void;
+    private detachVideoEventListeners;
+    private syncVideoFrames;
+    private seekTimeAndSync;
+    private _seekTimeFireAndForget;
+    private _seekTimeAndSyncNoEmitEvents;
+    /***
+     *
+     * @param timeOffset Time offset in seconds
+     */
+    private seekFromCurrentTimeAndSync;
+    private setCurrentTime;
+    getFrameRateDecimal(): Decimal;
+    private _seekToFrame;
+    /***
+     *
+     * @param framesCount Positive or negative number of frames. If positive - seek forward, if negative - seek backward.
+     */
+    private _seekFromCurrentFrame;
+    private videoTimeChangeHandlerExecutor;
+    getPlaybackState(): PlaybackState;
+    getVideo(): Video;
+    getHTMLVideoElement(): HTMLVideoElement;
+    calculateTimeToFrame(time: number): number;
+    calculateFrameToTime(framesCount: number): number;
+    play(): void;
+    pause(): void;
+    togglePlayPause(): void;
+    isPlaying(): boolean;
+    isPaused(): boolean;
+    isSeeking(): boolean;
+    getCurrentTime(): number;
+    getPlaybackRate(): number;
+    setPlaybackRate(playbackRate: number): void;
+    getVolume(): number;
+    setVolume(volume: number): void;
+    /***
+     * return Video duration in seconds
+     */
+    getDuration(): number;
+    getFrameRate(): number;
+    getTotalFrames(): number;
+    getCurrentFrame(): number;
+    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;
+    mute(): void;
+    unmute(): void;
+    isFullscreen(): boolean;
+    toggleFullscreen(): void;
+    getAudioTracks(): any[];
+    getCurrentAudioTrack(): any;
+    setAudioTrack(audioTrackId: number): void;
+    isVideoLoaded(): boolean;
+    getHls(): Hls;
+    addHelpMenuGroup(helpMenuGroup: HelpMenuGroup): void;
+    getHelpMenuGroups(): HelpMenuGroup[];
+}
+export {};

package/dist/video/video-hls-controller.d.ts

@@ -0,0 +1,15 @@
+import { HTMLVideoElementCrossorigin, VideoController } from "./video-controller";
+import Hls, { MediaPlaylist } from "hls.js";
+import { Observable } from "rxjs";
+import { Video } from "./video";
+import { DomController } from "../dom/dom-controller";
+export declare class VideoHlsController extends VideoController {
+    protected hls: Hls;
+    constructor(domController: DomController, crossorigin: HTMLVideoElementCrossorigin);
+    videoLoad(sourceUrl: string, frameRate: number, duration: number): Observable<Video>;
+    protected initEventHandlers(): void;
+    getAudioTracks(): MediaPlaylist[];
+    getCurrentAudioTrack(): any;
+    setAudioTrack(audioTrackId: number): any;
+    getHls(): Hls;
+}

package/dist/video/video.d.ts

@@ -0,0 +1,19 @@
+export declare class Video {
+    private readonly _element;
+    private readonly _sourceUrl;
+    private readonly _frameRate;
+    private readonly _duration;
+    private readonly _totalFrames;
+    /***
+     * Frame duration in seconds
+     * @private
+     */
+    private readonly _frameDuration;
+    constructor(element: HTMLVideoElement, sourceUrl: string, frameRate: number, duration: number);
+    get element(): HTMLVideoElement;
+    get sourceUrl(): string;
+    get frameRate(): number;
+    get duration(): number;
+    get totalFrames(): number;
+    get frameDuration(): number;
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@byomakase/omakase-player",
+  "version": "0.0.2",
+  "description": "## Omakase Player - Open source JavaScript framework for building frame accurate video experiences",
+  "author": "ByOmakase",
+  "homepage": "https://byomakase.org",
+  "copyright": "Copyright 2023 ByOmakase, LLC <https://byomakase.org/>",
+  "license": "Apache-2.0",
+  "keywords": [
+    "hls",
+    "frame",
+    "accurate",
+    "timeline",
+    "player",
+    "video",
+    "segmentation",
+    "markers"
+  ],
+  "main": "./dist/omakase-player.cjs.js",
+  "module": "./dist/omakase-player.es.js",
+  "style": "./dist/style.css",
+  "scripts": {
+    "dev": "vite",
+    "int": "tsc --noEmit && vite build --debug",
+    "prod": "tsc --noEmit && vite build --debug",
+    "check": "tsc --noEmit",
+    "dev:tsc": "rm -rf dist/lib && tsc --watch",
+    "build:tsc": "rm -rf dist/lib && tsc"
+  },
+  "dependencies": {
+    "axios": "1.3.3",
+    "decimal.js": "10.4.3",
+    "eventemitter3": "5.0.0",
+    "hls.js": "1.3.3",
+    "konva": "8.3.14",
+    "node-webvtt": "1.9.4",
+    "rxjs": "7.8.0",
+    "zod": "3.20.6"
+  },
+  "devDependencies": {
+    "sass": "^1.59.2",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.3",
+    "vite-plugin-dts": "^2.0.0-beta.2"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/byomakase/omakase-player.git"
+  },
+  "bugs": {
+    "url": "https://github.com/byomakase/omakase-player/issues"
+  }
+}

package/style/omakase-player.scss

@@ -0,0 +1,144 @@
+.omakase-player {
+  display: block;
+
+  .d-none {
+    display: none;
+  }
+
+  .d-block {
+    display: block;
+  }
+
+  .float-start {
+    float: left !important;
+  }
+
+  .float-end {
+    float: right !important;
+  }
+
+  .omakase-player-wrapper {
+    display: block;
+    position: relative;
+    width: 700px;
+
+    .omakase-video {
+      display: block;
+      width: 100%;
+      opacity: 100%;
+    }
+
+    .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-button-play {
+          background-image: url(/images/play.svg);
+        }
+
+        .omakase-button-pause {
+          background-image: url(/images/pause.svg);
+        }
+
+        .omakase-button-replay {
+          background-image: url(/images/replay.svg);
+        }
+
+        .omakase-button-loading {
+          background-image: url(/images/loading.svg);
+          animation: loading 3s linear infinite;
+          @keyframes loading {
+            0% {
+              transform: rotate(0);
+            }
+            100% {
+              transform: rotate(360deg);
+            }
+          }
+        }
+
+      }
+    }
+
+    .omakase-help {
+      font-family: Arial;
+      font-size: 13px;
+      position: absolute;
+      right: 20px;
+      top: 20px;
+
+      .omakase-help-dropdown {
+        position: absolute;
+        right: 0;
+        top: 0;
+
+        .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-help-menu {
+          z-index: 100;
+          position: absolute;
+          right: 0;
+          width: 400px;
+
+          .omakase-help-group-title {
+            background: rgba(2, 171, 141, 1);
+            display: block;
+            padding: 5px 10px 5px 10px;
+            color: #ffffff;
+            font-weight: bold;
+            text-align: left;
+          }
+
+          .omakase-help-group {
+            overflow-y: scroll;
+            display: block;
+            height: 200px;
+            background: rgba(2, 171, 141, 0.2);
+
+            .omakase-help-item {
+              display: list-item;
+              padding: 5px 10px 5px 10px;
+              color: #ffffff;
+              //text-align: left;
+
+              span {
+                //text-align: left;
+              }
+
+              &:hover {
+                background-color: #a93232;
+              }
+            }
+          }
+        }
+      }
+    }
+
+  }
+}