@banou/media-player 0.6.2 → 0.7.0

package/dist/react/components/chrome.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode, Ref } from 'react';
+export type ChromeProps = {
+    ref?: Ref<HTMLDivElement> | ((element: HTMLDivElement | null) => void);
+    onVideoRef: (element: HTMLVideoElement | null) => void;
+    onCanvasRef: (element: HTMLCanvasElement | null) => void;
+    children?: ReactNode;
+};
+export declare const Chrome: ({ ref, onVideoRef, onCanvasRef, children }: ChromeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Chrome;

package/dist/react/components/control-bar.d.ts

@@ -0,0 +1,2 @@
+export declare const ControlBar: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ControlBar;

package/dist/react/components/overlay.d.ts

@@ -0,0 +1,4 @@
+export declare const Overlay: ({ onCanvasRef }: {
+    onCanvasRef: (element: HTMLCanvasElement | null) => void;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Overlay;

package/dist/react/components/playback-slider.d.ts

@@ -0,0 +1,2 @@
+export declare const PlaybackSlider: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export default PlaybackSlider;

package/dist/react/components/progress-bar.d.ts

@@ -0,0 +1,2 @@
+export declare const ProgressBar: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ProgressBar;

package/dist/react/components/settings.d.ts

@@ -0,0 +1,2 @@
+export declare const SettingsAction: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export default SettingsAction;

package/dist/react/components/sound.d.ts

@@ -0,0 +1,7 @@
+import type { Ref } from 'react';
+export type SoundProps = {
+    /** Lands on the button, which is what the control bar attaches its wheel listener to. */
+    ref?: Ref<HTMLButtonElement> | ((element: HTMLButtonElement | null) => void);
+};
+export declare const Sound: ({ ref }: SoundProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Sound;

package/{build → dist/react}/components/tooltip-display.d.ts

@@ -1,5 +1,10 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { PlacesType } from 'react-tooltip';
+export declare enum buttonSize {
+    sm = "sm",
+    md = "md",
+    lg = "lg"
+}
 interface TooltipDisplayProps {
     id: string;
     toolTipText: ReactNode;
@@ -11,10 +16,5 @@ interface TooltipDisplayProps {
     size?: buttonSize;
     disabled?: boolean;
 }
-export declare enum buttonSize {
-    sm = "sm",
-    md = "md",
-    lg = "lg"
-}
-export declare const TooltipDisplay: ({ id, toolTipText, text, delayShow, closeDelay, offset, tooltipPlace, disabled, size }: TooltipDisplayProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const TooltipDisplay: ({ id, toolTipText, text, delayShow, closeDelay, offset, tooltipPlace, disabled, size }: TooltipDisplayProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default TooltipDisplay;

package/dist/react/components/volume-slider.d.ts

@@ -0,0 +1,6 @@
+type VolumeSliderType = {
+    value: number;
+    onChange: (v: number) => void;
+};
+export declare const VolumeSlider: ({ value, onChange }: VolumeSliderType) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default VolumeSlider;

package/dist/react/hooks/use-drag-value.d.ts

@@ -0,0 +1,23 @@
+import type { PointerEvent as ReactPointerEvent, RefObject } from 'react';
+export type UseDragValueOptions = {
+    /** The element the fraction is measured across. */
+    ref: RefObject<HTMLElement | null>;
+    /** Called with a 0..1 fraction on press and on every move, and once more on release. */
+    onChange: (fraction: number) => void;
+    orientation?: 'horizontal' | 'vertical';
+    disabled?: boolean;
+};
+/** Press-and-drag over an element, reported as a 0..1 fraction. */
+export declare const useDragValue: ({ ref, onChange, orientation, disabled }: UseDragValueOptions) => {
+    dragging: boolean;
+    /** Spread onto the element that owns the gesture. */
+    handlers: {
+        onPointerDown: (event: ReactPointerEvent<HTMLElement>) => void;
+        onPointerMove: (event: ReactPointerEvent<HTMLElement>) => void;
+        onPointerUp: (event: ReactPointerEvent<HTMLElement>) => void;
+        onPointerCancel: (event: ReactPointerEvent<HTMLElement>) => void;
+        style: {
+            touchAction: 'none';
+        };
+    };
+};

package/dist/react/hooks/use-picture-in-picture.d.ts

@@ -0,0 +1,2 @@
+/** Picture in picture with the subtitles composited in. */
+export declare const usePictureInPicture: (video: HTMLVideoElement | null, canvas: HTMLCanvasElement | null) => () => void;

package/dist/react/hooks/use-playback.d.ts

@@ -0,0 +1,6 @@
+import type { MediaPlayerOptions } from '../video-player';
+/**
+ * Owns the engine for the life of a source: start, teardown, and every piece of state the pipeline
+ * discovers. Nothing is mirrored in React state, so the store is the only place any of it lives.
+ */
+export declare const usePlayback: (video: HTMLVideoElement | null, canvas: HTMLCanvasElement | null, options: MediaPlayerOptions) => void;

package/dist/react/hooks/use-thumbnails.d.ts

@@ -0,0 +1,11 @@
+import type { ThumbnailImage } from '../../engine';
+import type { DownloadedRange } from '../source-feature';
+export type UseSeekThumbnailsOptions = {
+    publicPath: string;
+    workerUrl: string;
+    length: number | undefined;
+    read: ((offset: number, size: number) => Promise<ArrayBuffer>) | undefined;
+    /** When omitted the whole file is treated as readable, which is the case for a local file. */
+    downloadedRanges?: DownloadedRange[];
+};
+export declare const useSeekThumbnails: ({ publicPath, workerUrl, length, read, downloadedRanges, }: UseSeekThumbnailsOptions) => ThumbnailImage[];

package/dist/react/player.d.ts

@@ -0,0 +1,25 @@
+export declare const Player: import("@videojs/react").CreatePlayerResult<import("@videojs/react").PlayerStore<[import("@videojs/react").PlayerFeature<import("@videojs/media").MediaPlaybackState>, import("@videojs/react").PlayerFeature<import("@videojs/media").MediaPlaybackRateState>, import("@videojs/react").PlayerFeature<import("@videojs/media").MediaQualityState>, import("@videojs/react").PlayerFeature<import("@videojs/media").MediaAudioTrackState>, import("@videojs/react").PlayerFeature<import("@videojs/media").MediaVolumeState>, import("@videojs/react").PlayerFeature<import("@videojs/media").MediaTimeState>, import("@videojs/react").PlayerFeature<import("@videojs/media").MediaSourceState>, import("@videojs/react").PlayerFeature<import("@videojs/media").MediaBufferState>, import("@videojs/react").PlayerFeature<import("@videojs/media").MediaFullscreenState>, import("@videojs/react").PlayerFeature<import("@videojs/media").MediaPictureInPictureState>, import("@videojs/react").PlayerFeature<import("@videojs/media").MediaRemotePlaybackState>, import("@videojs/react").PlayerFeature<import("@videojs/media").MediaControlsState>, import("@videojs/react").PlayerFeature<import("@videojs/media").MediaTextTrackState>, import("@videojs/react").PlayerFeature<import("@videojs/media").MediaErrorState>, import("@videojs/react").PlayerFeature<{
+    title?: string;
+    size?: number;
+    downloadedRanges?: import("./source-feature").DownloadedRange[];
+    indexes: import("..").MediaIndex[];
+    thumbnails: import("..").ThumbnailImage[];
+    subtitleStreams: import("..").SubtitleStream[];
+    selectedSubtitleStream: number | undefined;
+    selectSubtitleStream: (streamIndex: number | undefined) => void;
+    audioStreams: import("libav-wasm/build/worker").AudioStream[];
+    selectedAudioStream: number;
+    selectAudioStream: (streamIndex: number) => void;
+    hideUI: boolean;
+    setHideUI: (hide: boolean) => void;
+    togglePictureInPicture: () => void;
+    playbackError: unknown;
+    ready: boolean;
+    setSourceState: (partial: Partial<import("./source-feature").SourceState>) => void;
+}>]>>;
+/**
+ * Typed player state, to be used instead of the `usePlayer` from `@videojs/react`, whose fields come
+ * back as `unknown`. With no selector it returns the store without subscribing; with one it subscribes.
+ */
+export declare const usePlayer: typeof Player.usePlayer;
+export type PlayerStore = ReturnType<typeof Player.usePlayer>;

package/dist/react/source-feature.d.ts

@@ -0,0 +1,84 @@
+import type { AudioStream, MediaIndex, SubtitleStream, ThumbnailImage } from '../engine';
+/**
+ * A byte span of the file the consumer has in hand, mapped onto the timeline through the keyframe
+ * index, because a file's download percentage is not its playback percentage.
+ */
+export type DownloadedRange = {
+    startByteOffset: number;
+    endByteOffset: number;
+};
+/**
+ * Everything about the source that the chrome reads, carried on the player store next to the built-in
+ * playback state so a component never has to know which of two channels owns a field.
+ *
+ * The store is the single reader surface; the React layer is the single writer, through
+ * `setSourceState`.
+ */
+export type SourceState = {
+    /** Shown top left over the video. */
+    title?: string;
+    /** Total byte length of the source. */
+    size?: number;
+    downloadedRanges?: DownloadedRange[];
+    /** Keyframe index of the input, which turns a downloaded byte range into a time range. */
+    indexes: MediaIndex[];
+    thumbnails: ThumbnailImage[];
+    subtitleStreams: SubtitleStream[];
+    /** undefined means subtitles are off. */
+    selectedSubtitleStream: number | undefined;
+    selectSubtitleStream: (streamIndex: number | undefined) => void;
+    audioStreams: AudioStream[];
+    selectedAudioStream: number;
+    selectAudioStream: (streamIndex: number) => void;
+    /** Chrome auto-hide. True means the controls, title and cursor are hidden. */
+    hideUI: boolean;
+    setHideUI: (hide: boolean) => void;
+    /** Owned here, not by `pip`: that watches the media element, and the window holds a mirror. */
+    togglePictureInPicture: () => void;
+    /** Set when the pipeline fails. Cleared when it recovers. */
+    playbackError: unknown;
+    /** Whether the engine has produced its first media segment. */
+    ready: boolean;
+    /**
+     * The write seam, wired in `attach`. Only the React layer calls it.
+     *
+     * It is a no-op until the media element attaches. Every caller writes either from an engine
+     * callback or after `startPlayback` resolves, both of which are far later than attach, and the one
+     * synchronous write is a reset to the values the defaults below already hold.
+     */
+    setSourceState: (partial: Partial<SourceState>) => void;
+};
+export declare const sourceFeature: import("@videojs/react").PlayerFeature<{
+    /** Shown top left over the video. */
+    title?: string;
+    /** Total byte length of the source. */
+    size?: number;
+    downloadedRanges?: DownloadedRange[];
+    /** Keyframe index of the input, which turns a downloaded byte range into a time range. */
+    indexes: MediaIndex[];
+    thumbnails: ThumbnailImage[];
+    subtitleStreams: SubtitleStream[];
+    /** undefined means subtitles are off. */
+    selectedSubtitleStream: number | undefined;
+    selectSubtitleStream: (streamIndex: number | undefined) => void;
+    audioStreams: AudioStream[];
+    selectedAudioStream: number;
+    selectAudioStream: (streamIndex: number) => void;
+    /** Chrome auto-hide. True means the controls, title and cursor are hidden. */
+    hideUI: boolean;
+    setHideUI: (hide: boolean) => void;
+    /** Owned here, not by `pip`: that watches the media element, and the window holds a mirror. */
+    togglePictureInPicture: () => void;
+    /** Set when the pipeline fails. Cleared when it recovers. */
+    playbackError: unknown;
+    /** Whether the engine has produced its first media segment. */
+    ready: boolean;
+    /**
+     * The write seam, wired in `attach`. Only the React layer calls it.
+     *
+     * It is a no-op until the media element attaches. Every caller writes either from an engine
+     * callback or after `startPlayback` resolves, both of which are far later than attach, and the one
+     * synchronous write is a reset to the values the defaults below already hold.
+     */
+    setSourceState: (partial: Partial<SourceState>) => void;
+}>;

package/dist/react/video-player.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+import type { DownloadedRange } from './source-feature';
+/**
+ * The source, read a range at a time: the player never downloads the whole file. Both fields travel
+ * together, so passing one without the other is a type error.
+ */
+export type MediaPlayerSource = {
+    read: (offset: number, size: number) => Promise<ArrayBuffer>;
+    size: number;
+} | {
+    read?: undefined;
+    size?: undefined;
+};
+export type MediaPlayerOptions = MediaPlayerSource & {
+    /**
+     * Where libav's wasm is served from. BOTH `libav.wasm` and `libav-jspi.wasm` have to be there:
+     * libav-wasm picks between them on `WebAssembly.Suspending`, so serving one fails only on the
+     * browsers that pick the other.
+     */
+    publicPath: string;
+    libavWorkerUrl: string;
+    jassubWorkerUrl: string;
+    /** jassub's SIMD build, `jassub-worker-modern.wasm`. */
+    jassubWasmUrl: string;
+    /**
+     * jassub's non-SIMD build, `jassub-worker.wasm`, for Safari before 16.4.
+     * Without it subtitles fail outright on those browsers rather than falling back to the slower build.
+     */
+    jassubLegacyWasmUrl?: string;
+    /** Fallback face for `liberation sans`, used when a subtitle track names a font the file does not carry. */
+    defaultFontUrl?: string;
+    bufferSize?: number;
+    autoplay?: boolean;
+    title?: string;
+    /** Byte spans available, painted on the seekbar and informing the thumbnail generator. */
+    downloadedRanges?: DownloadedRange[];
+    onSeek?: (fraction: number) => void;
+    onPlaybackError?: (error: unknown) => void;
+};
+export declare const MediaPlayer: (options: MediaPlayerOptions & {
+    children?: ReactNode;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default MediaPlayer;

package/dist/utils/source.d.ts

@@ -0,0 +1,30 @@
+declare const fromBlob: ({ blob, name }: {
+    blob: Blob;
+    name?: string;
+}) => {
+    length: number;
+    name: string | undefined;
+    read: (offset: number, size: number) => Promise<ArrayBuffer>;
+};
+declare const fromUrl: ({ url, length: _length, name, credentials }: {
+    url: string;
+    length?: number;
+    name?: string;
+    credentials?: RequestCredentials;
+}) => Promise<{
+    length: number;
+    name: string | undefined;
+    read: (offset: number, size: number) => Promise<ArrayBuffer>;
+}>;
+/** A source resolved down to what the remuxer needs: a total length and a byte-range reader. */
+export type RemuxerInput = {
+    length: number;
+    name?: string;
+    read: (offset: number, size: number) => Promise<ArrayBuffer>;
+};
+export declare const inputToRemuxerInput: (params: Parameters<typeof fromBlob | typeof fromUrl>[0] | {
+    length: number;
+    name?: string;
+    read: (offset: number, size: number) => Promise<ArrayBuffer>;
+}) => Promise<RemuxerInput>;
+export {};

package/dist/utils/track-label.d.ts

@@ -0,0 +1,19 @@
+export type LabelledTrack = {
+    streamIndex: number;
+    title: string;
+    language: string;
+};
+/**
+ * Human name for a track's language tag. `fallback: 'none'` is what makes an unknown tag come back
+ * undefined instead of echoing itself, so the caller can fall through to the title.
+ */
+export declare const displayLanguage: (language: string | undefined) => string | undefined;
+/**
+ * Names a set of tracks for a menu, by language, falling back to the title then the stream index.
+ * The title is appended only to break a tie, because on a MultiSub release every title is the same
+ * source tag and titling every row gives nine identical entries.
+ */
+export declare const labelTracks: <T extends LabelledTrack>(tracks: T[]) => {
+    track: T;
+    label: string;
+}[];

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

@@ -0,0 +1,6 @@
+/** Higher values put more of the slider's travel at the quiet end. */
+export declare const VOLUME_EXPONENT = 2;
+/** Slider position (0-1) to gain, on a curve that matches how loudness is perceived. */
+export declare const linearToLogVolume: (linearValue: number) => number;
+/** Gain (0-1) back to slider position. */
+export declare const logToLinearVolume: (logVolume: number) => number;

package/package.json

@@ -1,51 +1,63 @@
 {
   "name": "@banou/media-player",
-  "version": "0.6.2",
-  "description": "",
+  "version": "0.7.0",
+  "description": "A video player for containers and codecs the browser cannot play natively, remuxed on the fly",
   "type": "module",
-  "main": "build/index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./engine": {
+      "types": "./dist/engine/index.d.ts",
+      "import": "./dist/engine/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
-    "build",
-    "tsconfig.json",
-    "tsconfig.node.json",
-    "src"
+    "dist",
+    "src/lib"
   ],
   "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",
-    "copy-worker": "shx cp node_modules/libav-wasm/build/worker.js build/libav.js",
-    "copy-worker-wasm": "shx cp node_modules/libav-wasm/build/libav.wasm build/libav.wasm",
-    "copy-libass": "copyfiles -u 3 ./node_modules/jassub/dist/* build",
-    "types": "tsc"
+    "dev": "npm run copy-assets && vp dev --port 4560",
+    "build": "shx rm -rf build/ && npm run copy-assets && vp build",
+    "preview": "vp preview",
+    "build-lib": "shx rm -rf dist/ && vp build -c vite.lib.config.ts && npm run types",
+    "types": "tsc -p tsconfig.lib.json",
+    "copy-assets": "shx mkdir -p public && npm run copy-libav && npm run copy-libass",
+    "copy-libav": "shx cp node_modules/libav-wasm/build/worker.js public/libav-worker.js && shx cp node_modules/libav-wasm/build/libav.wasm public/libav.wasm && shx cp node_modules/libav-wasm/build/libav-jspi.wasm public/libav-jspi.wasm",
+    "copy-libass": "shx cp node_modules/jassub/dist/jassub-worker.js public/jassub-worker.js && shx cp node_modules/jassub/dist/jassub-worker.wasm public/jassub-worker.wasm && shx cp node_modules/jassub/dist/jassub-worker-modern.wasm public/jassub-worker-modern.wasm && shx cp node_modules/jassub/dist/default.woff2 public/default.woff2"
   },
   "author": "Banou26",
-  "devDependencies": {
-    "@types/node": "^18.11.18",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@vitejs/plugin-react": "^4.3.4",
-    "concurrently": "^7.6.0",
-    "copyfiles": "^2.4.1",
-    "mime": "^3.0.0",
-    "shx": "^0.3.4",
-    "typescript": "^5.8.2",
-    "vite": "^6.2.1"
-  },
   "dependencies": {
+    "@videojs/core": "10.0.0-beta.26",
+    "@videojs/react": "10.0.0-beta.26",
+    "ass-compiler": "^0.1.16",
+    "jassub": "^1.8.6",
+    "libav-wasm": "^0.8.4",
+    "react-feather": "^2.0.10",
+    "react-tooltip": "^5.28.0"
+  },
+  "peerDependencies": {
     "@emotion/react": "^11.14.0",
-    "@xstate/react": "^5.0.1",
-    "ass-compiler": "^0.1.15",
-    "jassub": "^1.7.18",
-    "libav-wasm": "^0.6.2",
-    "osra": "^0.1.2",
-    "p-queue": "^7.3.4",
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@types/node": "^22.20.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^6.0.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-feather": "^2.0.10",
-    "react-tooltip": "^5.28.0",
-    "xstate": "^5.19.1"
+    "shx": "^0.3.4",
+    "typescript": "^7.0.2",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
+    "vite-plus": "0.2.4"
+  },
+  "overrides": {
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4"
   }
 }

package/src/lib/engine/index.ts

@@ -0,0 +1,14 @@
+export { startPlayback, terminateRemuxer, DEFAULT_BUFFER_SIZE } from './playback'
+export type { PlaybackOptions, PlaybackController, MediaIndex, AudioStream } from './playback'
+
+export { createSubtitleRenderer, SUBTITLES_OFF } from './subtitles'
+export type { SubtitleRenderer, SubtitleRendererOptions, SubtitleStream } from './subtitles'
+
+export { createThumbnailGenerator } from './thumbnails'
+export type { ThumbnailGenerator, ThumbnailGeneratorOptions, ThumbnailImage } from './thumbnails'
+
+export { getTimeRanges, updateSourceBuffer } from './source-buffer'
+export type { TimeRange } from './source-buffer'
+
+export { createPictureInPicture } from './picture-in-picture'
+export type { PictureInPictureController, PictureInPictureOptions } from './picture-in-picture'