@banou/media-player 0.3.0 → 0.4.0

package/build/state-machines/subtitles.d.ts

@@ -0,0 +1,53 @@
+import type { ParsedASS } from 'ass-compiler';
+import type { ASS_Event, JassubOptions } from 'jassub';
+import { Attachment, SubtitleFragment } from 'libav-wasm/build/worker';
+type SubtitlesEvents = {
+    type: 'NEW_SUBTITLE_FRAGMENTS';
+    subtitles: SubtitleFragment[];
+} | {
+    type: 'NEW_ATTACHMENTS';
+    attachments: Attachment[];
+} | {
+    type: 'SELECT_SUBTITLE_STREAM';
+    streamIndex: number;
+};
+type SubtitlesEmittedEvents = {
+    type: 'WAITING';
+} | {
+    type: 'SUBTITLE_STREAMS_UPDATED';
+    subtitlesStreams: SubtitleStream[];
+} | {
+    type: 'SELECTED_SUBTITLE_STREAM_UPDATED';
+    streamIndex: number;
+};
+type SubtitlesInput = {
+    publicPath: string;
+    videoElement: HTMLVideoElement;
+    canvasElement: HTMLCanvasElement;
+    subtitlesRendererOptions: Omit<JassubOptions, 'video' | 'canvas'>;
+};
+export type SubtitlePart = {
+    type: 'header';
+    streamIndex: number;
+    content: string;
+    eventsContent: string;
+    dialogueFormatContent: string;
+    parsed: ParsedASS;
+} | {
+    type: 'dialogue';
+    streamIndex: number;
+    index: number;
+    content: string;
+    parsed: ParsedASS;
+    assEvent: ASS_Event;
+};
+export type SubtitleStream = {
+    header: SubtitlePart & {
+        type: 'header';
+    };
+    dialogues: (SubtitlePart & {
+        type: 'dialogue';
+    })[];
+};
+declare const _default: import("xstate").CallbackActorLogic<SubtitlesEvents, SubtitlesInput, SubtitlesEmittedEvents>;
+export default _default;

package/build/state-machines/thumbnails.d.ts

@@ -0,0 +1,24 @@
+import type { Index } from 'libav-wasm/build/worker';
+import { makeRemuxer } from 'libav-wasm';
+import { DownloadedRange } from '../utils/context';
+type ExtendedIndex = Index & {
+    duration?: number;
+};
+export type Thumbnail = {
+    url: string;
+    blob: Blob;
+    timestamp: number;
+    duration: number;
+    index: ExtendedIndex;
+};
+type DataSourceInput = {
+    remuxerOptions: Parameters<typeof makeRemuxer>[0];
+};
+declare const _default: import("xstate").CallbackActorLogic<{
+    type: "DOWNLOADED_RANGES_UPDATED";
+    downloadedRanges: DownloadedRange[];
+}, DataSourceInput, {
+    type: "NEW_THUMBNAIL";
+    thumbnail: Thumbnail;
+}>;
+export default _default;

package/build/state-machines/utils.d.ts

@@ -0,0 +1,26 @@
+import type { AnyActorSystem } from 'xstate/dist/declarations/src/system';
+import type { AnyEventObject, CallbackActorLogic, CallbackActorRef, EventObject, NonReducibleUnknown } from 'xstate';
+type Receiver<TEvent extends EventObject> = (listener: {
+    bivarianceHack(event: TEvent): void;
+}['bivarianceHack']) => void;
+export type CallbackLogicFunction<TEvent extends EventObject = AnyEventObject, TSentEvent extends EventObject = AnyEventObject, TInput = NonReducibleUnknown, TEmitted extends EventObject = EventObject> = ({ input, system, self, sendBack, receive, emit }: {
+    input: TInput;
+    system: AnyActorSystem;
+    self: CallbackActorRef<TEvent>;
+    sendBack: (event: TSentEvent) => void;
+    receive: Receiver<TEvent>;
+    emit: (emitted: TEmitted) => void;
+}) => Promise<(() => void) | void>;
+type FromAsyncCallback = <TEvent extends EventObject, TInput = NonReducibleUnknown, TEmitted extends EventObject = EventObject>(callback: CallbackLogicFunction<TEvent, AnyEventObject, TInput, TEmitted>) => CallbackActorLogic<TEvent, TInput, TEmitted>;
+export declare const fromAsyncCallback: FromAsyncCallback;
+export declare const getTimeRanges: (sourceBuffer: SourceBuffer) => {
+    index: number;
+    start: number;
+    end: number;
+}[];
+export declare const updateSourceBuffer: (sourceBuffer: SourceBuffer) => {
+    appendBuffer: (buffer: ArrayBuffer) => Promise<void | Event>;
+    unbufferRange: (start: number, end: number) => Promise<unknown>;
+    updateTimestampOffset: (timestampOffset: number) => Promise<void>;
+};
+export {};

package/build/utils/actor-utils.d.ts

@@ -0,0 +1,2 @@
+import { Actor, AnyActorLogic } from "xstate";
+export declare const togglePlay: (mediaActor: Actor<AnyActorLogic>, isPaused: boolean, duration: number | undefined, currentTime: number) => void;

package/build/utils/colors.d.ts

@@ -0,0 +1,8 @@
+declare const colors: {
+    primary: string;
+    secondary: string;
+    hover: string;
+    borderPrimary: string;
+    backgroundTooltip: string;
+};
+export default colors;

package/build/utils/context.d.ts

@@ -0,0 +1,14 @@
+export type DownloadedRange = {
+    startByteOffset: number;
+    endByteOffset: number;
+};
+export type MediaPlayerContextType = {
+    videoElement?: HTMLVideoElement;
+    title?: string;
+    subtitle?: string;
+    size?: number;
+    downloadedRanges?: DownloadedRange[];
+    hideUI: boolean;
+    update: (context: Omit<MediaPlayerContextType, 'update'>) => void;
+};
+export declare const MediaPlayerContext: import("react").Context<MediaPlayerContextType>;

package/build/utils/fonts.d.ts

@@ -0,0 +1,28 @@
+export declare const fonts: {
+    headings: {
+        large: string;
+        medium: string;
+        small: string;
+        extraSmall: string;
+    };
+    bLarge: {
+        bold: string;
+        medium: string;
+        regular: string;
+    };
+    bMedium: {
+        bold: string;
+        medium: string;
+        regular: string;
+    };
+    bSmall: {
+        bold: string;
+        medium: string;
+        regular: string;
+    };
+    bExtraSmall: {
+        bold: string;
+        medium: string;
+        regular: string;
+    };
+};

package/build/{utils.d.ts → utils/index.d.ts}

@@ -1,12 +1,4 @@
-export type Chunk = {
-    offset: number;
-    buffer: Uint8Array;
-    pts: number;
-    duration: number;
-    pos: number;
-    buffered: boolean;
-};
-export declare function debounceImmediateAndLatest<T extends (...args: any[]) => any>(wait: number, func: T): T;
-export declare const queuedDebounceWithLastCall: <T2 extends any[], T extends (...args: T2) => any>(time: number, func: T) => (...args: Parameters<T>) => Promise<any> | undefined;
-export declare const toStreamChunkSize: (SIZE: number) => (stream: ReadableStream) => ReadableStream<Uint8Array>;
-export declare const toBufferedStream: (SIZE: number) => (stream: ReadableStream) => ReadableStream<Uint8Array>;
+export declare function debounceImmediateAndLatest<T extends (...args: any[]) => any>(wait: number, func: T): T;
+export declare const queuedThrottleWithLastCall: <T2 extends any[], T extends (...args: T2) => any>(time: number, func: T) => (...args: Parameters<T>) => Promise<any> | undefined;
+export declare const toStreamChunkSize: (SIZE: number) => (stream: ReadableStream) => ReadableStream<Uint8Array<ArrayBufferLike>>;
+export declare const toBufferedStream: (SIZE: number) => (stream: ReadableStream) => ReadableStream<Uint8Array<ArrayBufferLike>>;

package/build/utils/languages.d.ts

@@ -0,0 +1,260 @@
+type Language = {
+    tag: string;
+    name: string;
+    originalName: string;
+    locale: string;
+};
+export declare const languages: Language[];
+export declare const languageToTag: (lang: string) => string | undefined;
+export declare const tagToLanguage: (langTag: string) => string | undefined;
+export declare enum LanguageTag {
+    /** isiZulu */
+    ZU = "zu",// "isiZulu",
+    /** Chinese */
+    ZH = "zh",// "Chinese",
+    /** Yoruba */
+    YO = "yo",// "Yoruba",
+    /** isiXhosa */
+    XH = "xh",// "isiXhosa",
+    /** Wolof */
+    WO = "wo",// "Wolof",
+    /** Vietnamese */
+    VI = "vi",// "Vietnamese",
+    /** Uzbek */
+    UZ = "uz",// "Uzbek",
+    /** Urdu */
+    UR = "ur",// "Urdu",
+    /** Ukrainian */
+    UK = "uk",// "Ukrainian",
+    /** Uyghur */
+    UG = "ug",// "Uyghur",
+    /** Tamazight */
+    TZM = "tzm",// "Tamazight",
+    /** Tatar */
+    TT = "tt",// "Tatar",
+    /** Turkish */
+    TR = "tr",// "Turkish",
+    /** Setswana */
+    TN = "tn",// "Setswana",
+    /** Turkmen */
+    TK = "tk",// "Turkmen",
+    /** Thai */
+    TH = "th",// "Thai",
+    /** Tajik */
+    TG = "tg",// "Tajik",
+    /** Telugu */
+    TE = "te",// "Telugu",
+    /** Tamil */
+    TA = "ta",// "Tamil",
+    /** Syriac */
+    SYR = "syr",// "Syriac",
+    /** Kiswahili */
+    SW = "sw",// "Kiswahili",
+    /** Swedish */
+    SV = "sv",// "Swedish",
+    /** Serbian */
+    SR = "sr",// "Serbian",
+    /** Albanian */
+    SQ = "sq",// "Albanian",
+    /** Sami */
+    SMS = "sms",// "Sami",
+    /** Sami */
+    SMN = "smn",// "Sami",
+    /** Sami */
+    SMJ = "smj",// "Sami",
+    /** Sami */
+    SMA = "sma",// "Sami",
+    /** Slovenian */
+    SL = "sl",// "Slovenian",
+    /** Slovak */
+    SK = "sk",// "Slovak",
+    /** Sinhala */
+    SI = "si",// "Sinhala",
+    /** Sami */
+    SE = "se",// "Sami",
+    /** Yakut */
+    SAH = "sah",// "Yakut",
+    /** Sanskrit */
+    SA = "sa",// "Sanskrit",
+    /** Kinyarwanda */
+    RW = "rw",// "Kinyarwanda",
+    /** Russian */
+    RU = "ru",// "Russian",
+    /** Romanian */
+    RO = "ro",// "Romanian",
+    /** Romansh */
+    RM = "rm",// "Romansh",
+    /** Quechua */
+    QUZ = "quz",// "Quechua",
+    /** K */
+    QUT = "qut",// "K'iche",
+    /** Portuguese */
+    PT = "pt",// "Portuguese",
+    /** Pashto */
+    PS = "ps",// "Pashto",
+    /** Dari */
+    PRS = "prs",// "Dari",
+    /** Polish */
+    PL = "pl",// "Polish",
+    /** Punjabi */
+    PA = "pa",// "Punjabi",
+    /** Oriya */
+    OR = "or",// "Oriya",
+    /** Occitan */
+    OC = "oc",// "Occitan",
+    /** Sesotho sa Leboa */
+    NSO = "nso",// "Sesotho sa Leboa",
+    /** Norwegian */
+    NO = "no",// "Norwegian",
+    /** Norwegian, Nynorsk */
+    NN = "nn",// "Norwegian, Nynorsk",
+    /** Dutch */
+    NL = "nl",// "Dutch",
+    /** Nepali */
+    NE = "ne",// "Nepali",
+    /** Norwegian, Bokmål */
+    NB = "nb",// "Norwegian, Bokmål",
+    /** Maltese */
+    MT = "mt",// "Maltese",
+    /** Malay */
+    MS = "ms",// "Malay",
+    /** Marathi */
+    MR = "mr",// "Marathi",
+    /** Mohawk */
+    MOH = "moh",// "Mohawk",
+    /** Mongolian */
+    MN = "mn",// "Mongolian",
+    /** Malayalam */
+    ML = "ml",// "Malayalam",
+    /** Macedonian */
+    MK = "mk",// "Macedonian",
+    /** Maori */
+    MI = "mi",// "Maori",
+    /** Latvian */
+    LV = "lv",// "Latvian",
+    /** Lithuanian */
+    LT = "lt",// "Lithuanian",
+    /** Lao */
+    LO = "lo",// "Lao",
+    /** Luxembourgish */
+    LB = "lb",// "Luxembourgish",
+    /** Kyrgyz */
+    KY = "ky",// "Kyrgyz",
+    /** Konkani */
+    KOK = "kok",// "Konkani",
+    /** Korean */
+    KO = "ko",// "Korean",
+    /** Kannada */
+    KN = "kn",// "Kannada",
+    /** Khmer */
+    KM = "km",// "Khmer",
+    /** Greenlandic */
+    KL = "kl",// "Greenlandic",
+    /** Kazakh */
+    KK = "kk",// "Kazakh",
+    /** Georgian */
+    KA = "ka",// "Georgian",
+    /** Japanese */
+    JA = "ja",// "Japanese",
+    /** Inuktitut */
+    IU = "iu",// "Inuktitut",
+    /** Italian */
+    IT = "it",// "Italian",
+    /** Icelandic */
+    IS = "is",// "Icelandic",
+    /** Yi */
+    II = "ii",// "Yi",
+    /** Igbo */
+    IG = "ig",// "Igbo",
+    /** Indonesian */
+    ID = "id",// "Indonesian",
+    /** Armenian */
+    HY = "hy",// "Armenian",
+    /** Hungarian */
+    HU = "hu",// "Hungarian",
+    /** Upper Sorbian */
+    HSB = "hsb",// "Upper Sorbian",
+    /** Croatian */
+    HR = "hr",// "Croatian",
+    /** Hindi */
+    HI = "hi",// "Hindi",
+    /** Hebrew */
+    HE = "he",// "Hebrew",
+    /** Hausa */
+    HA = "ha",// "Hausa",
+    /** Gujarati */
+    GU = "gu",// "Gujarati",
+    /** Alsatian */
+    GSW = "gsw",// "Alsatian",
+    /** Galician */
+    GL = "gl",// "Galician",
+    /** Scottish Gaelic */
+    GD = "gd",// "Scottish Gaelic",
+    /** Irish */
+    GA = "ga",// "Irish",
+    /** Frisian */
+    FY = "fy",// "Frisian",
+    /** French */
+    FR = "fr",// "French",
+    /** Faroese */
+    FO = "fo",// "Faroese",
+    /** Filipino */
+    FIL = "fil",// "Filipino",
+    /** Finnish */
+    FI = "fi",// "Finnish",
+    /** Persian */
+    FA = "fa",// "Persian",
+    /** Basque */
+    EU = "eu",// "Basque",
+    /** Estonian */
+    ET = "et",// "Estonian",
+    /** Spanish */
+    ES = "es",// "Spanish",
+    /** English */
+    EN = "en",// "English",
+    /** Greek */
+    EL = "el",// "Greek",
+    /** Divehi */
+    DV = "dv",// "Divehi",
+    /** Lower Sorbian */
+    DSB = "dsb",// "Lower Sorbian",
+    /** German */
+    DE = "de",// "German",
+    /** Danish */
+    DA = "da",// "Danish",
+    /** Welsh */
+    CY = "cy",// "Welsh",
+    /** Czech */
+    CS = "cs",// "Czech",
+    /** Corsican */
+    CO = "co",// "Corsican",
+    /** Catalan */
+    CA = "ca",// "Catalan",
+    /** Bosnian */
+    BS = "bs",// "Bosnian",
+    /** Breton */
+    BR = "br",// "Breton",
+    /** Tibetan */
+    BO = "bo",// "Tibetan",
+    /** Bengali */
+    BN = "bn",// "Bengali",
+    /** Bulgarian */
+    BG = "bg",// "Bulgarian",
+    /** Belarusian */
+    BE = "be",// "Belarusian",
+    /** Bashkir */
+    BA = "ba",// "Bashkir",
+    /** Azeri */
+    AZ = "az",// "Azeri",
+    /** Assamese */
+    AS = "as",// "Assamese",
+    /** Mapudungun */
+    ARN = "arn",// "Mapudungun",
+    /** Arabic */
+    AR = "ar",// "Arabic",
+    /** Amharic */
+    AM = "am",// "Amharic",
+    /** Afrikaans */
+    AF = "af"
+}
+export {};

package/build/{mp4box.d.ts → utils/mp4box.d.ts}

@@ -1,61 +1,61 @@
-declare module "mp4box" {
-    interface MP4MediaTrack {
-        id: number;
-        created: Date;
-        modified: Date;
-        movie_duration: number;
-        layer: number;
-        alternate_group: number;
-        volume: number;
-        track_width: number;
-        track_height: number;
-        timescale: number;
-        duration: number;
-        bitrate: number;
-        codec: string;
-        language: string;
-        nb_samples: number;
-    }
-    interface MP4VideoData {
-        width: number;
-        height: number;
-    }
-    interface MP4VideoTrack extends MP4MediaTrack {
-        video: MP4VideoData;
-    }
-    interface MP4AudioData {
-        sample_rate: number;
-        channel_count: number;
-        sample_size: number;
-    }
-    interface MP4AudioTrack extends MP4MediaTrack {
-        audio: MP4AudioData;
-    }
-    type MP4Track = MP4VideoTrack | MP4AudioTrack;
-    interface MP4Info {
-        duration: number;
-        timescale: number;
-        fragment_duration: number;
-        isFragmented: boolean;
-        isProgressive: boolean;
-        hasIOD: boolean;
-        brands: string[];
-        created: Date;
-        modified: Date;
-        tracks: MP4Track[];
-    }
-    type MP4ArrayBuffer = ArrayBuffer & {
-        fileStart: number;
-    };
-    interface MP4File {
-        onMoovStart?: () => void;
-        onReady?: (info: MP4Info) => void;
-        onError?: (e: Error) => void;
-        appendBuffer(data: MP4ArrayBuffer): number;
-        start(): void;
-        stop(): void;
-        flush(): void;
-    }
-    function createFile(): MP4File;
-}
-export {};
+declare module "mp4box" {
+    interface MP4MediaTrack {
+        id: number;
+        created: Date;
+        modified: Date;
+        movie_duration: number;
+        layer: number;
+        alternate_group: number;
+        volume: number;
+        track_width: number;
+        track_height: number;
+        timescale: number;
+        duration: number;
+        bitrate: number;
+        codec: string;
+        language: string;
+        nb_samples: number;
+    }
+    interface MP4VideoData {
+        width: number;
+        height: number;
+    }
+    interface MP4VideoTrack extends MP4MediaTrack {
+        video: MP4VideoData;
+    }
+    interface MP4AudioData {
+        sample_rate: number;
+        channel_count: number;
+        sample_size: number;
+    }
+    interface MP4AudioTrack extends MP4MediaTrack {
+        audio: MP4AudioData;
+    }
+    type MP4Track = MP4VideoTrack | MP4AudioTrack;
+    interface MP4Info {
+        duration: number;
+        timescale: number;
+        fragment_duration: number;
+        isFragmented: boolean;
+        isProgressive: boolean;
+        hasIOD: boolean;
+        brands: string[];
+        created: Date;
+        modified: Date;
+        tracks: MP4Track[];
+    }
+    type MP4ArrayBuffer = ArrayBuffer & {
+        fileStart: number;
+    };
+    interface MP4File {
+        onMoovStart?: () => void;
+        onReady?: (info: MP4Info) => void;
+        onError?: (e: Error) => void;
+        appendBuffer(data: MP4ArrayBuffer): number;
+        start(): void;
+        stop(): void;
+        flush(): void;
+    }
+    function createFile(): MP4File;
+}
+export {};

package/build/utils/time.d.ts

@@ -0,0 +1,2 @@
+export declare const formatTime: (time: number | undefined) => string;
+export declare const formatMediaTime: (currentTime: number, duration: number | undefined) => string;

package/build/utils/use-local-storage.d.ts

@@ -0,0 +1,3 @@
+export declare const useLocalStorage: <T>(name: string, defaultValue?: T) => readonly [string | T | undefined, (newValue: string) => void];
+export default useLocalStorage;
+export type mediaMutedType = 'true' | 'false' | undefined;

package/build/{use-scrub.d.ts → utils/use-scrub.d.ts}

@@ -1,11 +1,11 @@
-import type { MouseEventHandler, RefObject } from 'react';
-declare const _default: ({ ref, defaultValue }: {
-    ref: RefObject<HTMLElement>;
-    defaultValue?: number | undefined;
-}) => {
-    value: number | undefined;
-    scrubbing: boolean;
-    scrub: MouseEventHandler<HTMLDivElement>;
-    setValue: import("react").Dispatch<import("react").SetStateAction<number | undefined>>;
-};
-export default _default;
+import type { MouseEventHandler, RefObject } from 'react';
+declare const _default: ({ ref, defaultValue }: {
+    ref: RefObject<HTMLElement>;
+    defaultValue?: number;
+}) => {
+    value: number | undefined;
+    scrubbing: boolean;
+    scrub: MouseEventHandler<HTMLDivElement>;
+    setValue: import("react").Dispatch<import("react").SetStateAction<number | undefined>>;
+};
+export default _default;

package/build/utils/volume-utils.d.ts

@@ -0,0 +1,17 @@
+export declare const VOLUME_EXPONENT = 2;
+/**
+ * Converts a linear slider value (0-1) to logarithmic volume scale
+ * Uses formula: volume = minVolume * (maxVolume/minVolume)^position
+ *
+ * @param linearValue Linear slider position (0-1)
+ * @returns Logarithmic volume value (0-1)
+ */
+export declare const linearToLogVolume: (linearValue: number) => number;
+/**
+ * Converts a logarithmic volume (0-1) back to linear slider position (0-1)
+ * Inverse of the logarithmic formula
+ *
+ * @param logVolume Logarithmic volume (0-1)
+ * @returns Linear slider position (0-1)
+ */
+export declare const logToLinearVolume: (logVolume: number) => number;

package/build/utils/window-height.d.ts

@@ -0,0 +1,2 @@
+declare const useWindowSize: () => number[];
+export default useWindowSize;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "",
   "type": "module",
   "main": "build/index.js",
@@ -12,6 +12,7 @@
   ],
   "scripts": {
     "dev": "vite --port 4560",
+    "build-dev": "vite build --watch",
     "build": "vite build && npm run types",
     "build-for-dev": "vite build && npm run copy-dependencies && npm run types",
     "copy-dependencies": "npm run copy-libass && npm run copy-worker && npm run copy-worker-wasm",
@@ -25,24 +26,26 @@
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
-    "@vitejs/plugin-react": "^3.0.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "concurrently": "^7.6.0",
     "copyfiles": "^2.4.1",
     "mime": "^3.0.0",
-    "react-dom": "^18.2.0",
     "shx": "^0.3.4",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4"
+    "typescript": "^5.8.2",
+    "vite": "^6.2.1"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "jassub": "^1.7.1",
-    "libav-wasm": "^0.3.4",
-    "mp4box": "^0.5.2",
-    "osra": "^0.0.11",
+    "@emotion/react": "^11.14.0",
+    "@xstate/react": "^5.0.1",
+    "ass-compiler": "^0.1.15",
+    "jassub": "^1.7.18",
+    "libav-wasm": "^0.5.3",
+    "osra": "^0.1.2",
     "p-queue": "^7.3.4",
-    "react": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-feather": "^2.0.10",
-    "react-tooltip": "^5.26.3"
+    "react-tooltip": "^5.28.0",
+    "xstate": "^5.19.1"
   }
 }