@banou/media-player 0.6.2 → 0.7.0

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

@@ -1,56 +0,0 @@
-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: 'TIME_UPDATE';
-    currentTime: 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

@@ -1,24 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

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

package/build/utils/context.d.ts

@@ -1,14 +0,0 @@
-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/index.d.ts

@@ -1,4 +0,0 @@
-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

@@ -1,260 +0,0 @@
-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/utils/mp4box.d.ts

@@ -1,61 +0,0 @@
-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/use-local-storage.d.ts

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

package/build/utils/use-scrub.d.ts

@@ -1,11 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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

package/src/components/chrome.tsx

@@ -1,95 +0,0 @@
-/// <reference types="@emotion/react/types/css-prop" />
-import { MouseEventHandler, ReactNode, useContext, useRef, type HTMLAttributes } from 'react'
-
-import { css } from '@emotion/react'
-
-import { MediaMachineContext } from '../state-machines'
-import { MediaPlayerContext } from '../utils/context'
-import { togglePlay } from '../utils/actor-utils'
-import { Overlay } from './overlay'
-import ControlBar from './control-bar'
-
-const style = css`
-  position: relative;
-  background-color: black;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-
-  & > div:not(:last-of-type) {
-    position: absolute;
-    z-index: 2;
-  }
-
-  canvas {
-    height: 100%;
-    width: 100%;
-    pointer-events: none;
-    position: absolute;
-    z-index: 1;
-  }
-
-  .video, video {
-    height: 100%;
-    width: 100%;
-    background-color: black;
-    object-fit: contain;
-  }
-
-  &.hide {
-    cursor: none;
-  }
-`
-
-export type ChromeOptions = {
-  mediaInformation?: ReactNode
-  loadingInformation?: ReactNode
-} & HTMLAttributes<HTMLDivElement>
-
-export const Chrome = ({ children, mediaInformation, loadingInformation }: ChromeOptions) => {
-  const mediaActor = MediaMachineContext.useActorRef()
-  const mediaPlayerContext = useContext(MediaPlayerContext)
-  const isPaused = MediaMachineContext.useSelector((state) => state.context.media.paused)
-  const currentTime = MediaMachineContext.useSelector((state) => state.context.media.currentTime)
-  const duration = MediaMachineContext.useSelector((state) => state.context.media.duration)
-
-  const autoHide = useRef<number>()
-  const containerRef = useRef<HTMLDivElement>(null)
-
-  const mouseMove: MouseEventHandler<HTMLDivElement> = (ev) => {
-    mediaPlayerContext.update(({ ...mediaPlayerContext, hideUI: false }))
-    if (autoHide.current) clearInterval(autoHide.current)
-    const timeout = setTimeout(() => {
-      mediaPlayerContext.update(({ ...mediaPlayerContext, hideUI: true }))
-    }, 3_000) as unknown as number
-    autoHide.current = timeout
-  }
-
-  const mouseOut: React.DOMAttributes<HTMLDivElement>['onMouseOut'] = (ev) => {
-    if (ev.currentTarget.parentElement !== ev.relatedTarget && ev.relatedTarget !== null) return
-    mediaPlayerContext.update(({ ...mediaPlayerContext, hideUI: true }))
-  }
-
-  return (
-    <div
-      css={style}
-      ref={containerRef}
-      onMouseMove={mouseMove}
-      onMouseOut={mouseOut}
-      className={mediaPlayerContext.hideUI ? 'hide' : ''}
-    >
-      <Overlay loadingInformation={loadingInformation}/>
-      <ControlBar mediaInformation={mediaInformation} containerRef={containerRef}/>
-      <div
-        className='video'
-        onClick={() => togglePlay(mediaActor, isPaused, duration, currentTime)}
-      >
-        {children}
-      </div>
-    </div>
-  )
-}
-
-export default Chrome

package/src/components/overlay.tsx

@@ -1,91 +0,0 @@
-/// <reference types="@emotion/react/types/css-prop" />
-
-import { ClassAttributes, ReactNode, useCallback, useContext, useEffect, useState } from 'react'
-import { css } from '@emotion/react'
-
-import { MediaMachineContext } from '../state-machines'
-import { MediaPlayerContext } from '../utils/context'
-import { fonts } from '../utils/fonts'
-
-const style = css`
-  top: unset !important;
-  left: unset !important;
-  width: 100%;
-  height: 100%;
-  margin: auto;
-  pointer-events: none;
-`
-
-const titleStyle = css`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  padding: 2.4rem;
-  ${fonts.headings.small}
-  color: white;
-  text-shadow: 0 0 4px rgba(0, 0, 0, 1);
-  z-index: 2;
-  pointer-events: none;
-
-  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 80%, transparent 100%);
-  transition: opacity 0.1s cubic-bezier(.4,0,1,1);
-`
-
-const loadingInformationStyle = css`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  font-size: 2rem;
-  color: white;
-  text-shadow: 0 0 4px rgba(0, 0, 0, 1);
-  z-index: 2;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  pointer-events: none;
-`
-
-export const Overlay = ({ loadingInformation }: { loadingInformation?: ReactNode }) => {
-  const mediaActor = MediaMachineContext.useActorRef()
-  const duration = MediaMachineContext.useSelector((state) => state.context.media.duration)
-  const mediaPlayerContext = useContext(MediaPlayerContext)
-
-  const [canvasElement, setCanvasElement] = useState<HTMLCanvasElement | null>()
-  const refFunction: ClassAttributes<HTMLCanvasElement>['ref'] = useCallback((element: HTMLCanvasElement | null) => {
-    setCanvasElement(element)
-  }, [])
-
-  useEffect(() => {
-    if (!canvasElement) return
-    mediaActor.send({
-      type: 'SET_CANVAS_ELEMENT',
-      canvasElement,
-    })
-  }, [canvasElement])
-
-  return (
-    <>
-      {
-        mediaPlayerContext.title
-          ? (
-            <div
-              css={titleStyle}
-              style={{ ...mediaPlayerContext.hideUI ? { opacity: '0', pointerEvents: 'none' } : {} }}
-            >
-              {mediaPlayerContext.title}
-            </div>
-          )
-          : undefined
-      }
-      {
-        duration === undefined && loadingInformation
-          ? <div css={loadingInformationStyle}>{loadingInformation}</div>
-          : undefined
-      }
-      <canvas ref={refFunction} css={style}/>
-    </>
-  )
-}