@banou/media-player 0.8.21 → 0.9.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-B8CKGIng.js";
+import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-DZrYu66u.js";
 import { Children as s, Fragment as c, isValidElement as l, useCallback as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
 import { css as h, keyframes as g } from "@emotion/react";
 import { createPlayer as _, useContainerAttach as v, useMediaAttach as y } from "@videojs/react";
@@ -179,7 +179,7 @@ var ee = {
 			try {
 				let n = await i({
 					videoElement: e,
-					canvasElement: t,
+					subtitleContainer: t,
 					read: (e, t) => A.current(e, t),
 					length: s,
 					publicPath: c,
@@ -287,7 +287,7 @@ var ee = {
 		if (!e || !n || !s) return;
 		let t = a({
 			video: e,
-			canvas: n,
+			subtitles: n,
 			mode: s,
 			onBurnedInChange: o
 		});
@@ -337,12 +337,18 @@ var ee = {
 		regular: "\n      font-weight: 400;\n      font-size: calc(0.8 * var(--mp-unit));\n      line-height: calc(1.1 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1 * var(--mp-unit));\n        line-height: calc(1.4 * var(--mp-unit));\n      }\n    "
 	}
 }, ge = h`
-  top: unset !important;
-  left: unset !important;
-  width: 100%;
-  height: 100%;
-  margin: auto;
-  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  canvas {
+    top: unset !important;
+    left: unset !important;
+    width: 100%;
+    height: 100%;
+    margin: auto;
+    pointer-events: none;
+  }
 `, _e = h`
   position: absolute;
   top: 0;
@@ -402,7 +408,7 @@ var ee = {
   ${H.bLarge.regular}
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   pointer-events: none;
-`, be = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", xe = ({ onCanvasRef: e }) => {
+`, be = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", xe = ({ onSubtitleRef: e }) => {
 	let t = V((e) => e.title), n = V((e) => e.hideUI), r = V((e) => e.playbackError), i = V((e) => e.ready), a = V((e) => e.size), o = V((e) => e.waiting);
 	return /* @__PURE__ */ w(S, { children: [
 		t ? /* @__PURE__ */ C("div", {
@@ -419,7 +425,8 @@ var ee = {
 			css: ye,
 			children: be(r)
 		}) : void 0,
-		/* @__PURE__ */ C("canvas", {
+		/* @__PURE__ */ C("div", {
+			className: "subtitles",
 			ref: e,
 			css: ge
 		})
@@ -2088,6 +2095,19 @@ ${X}
     z-index: 2;
   }
 
+  /* The subtitle layer sits UNDER the title and the spinner, where the canvas itself used to sit.
+     As a plain child div it is matched by the rule above and raised to the overlay items' level,
+     which paints subtitles over the title's gradient, over the spinner and over the error text.
+     Naming the type as well is what takes it back: :not() carries the specificity of its argument,
+     so the rule above is (0,2,1) and a bare .subtitles at (0,2,0) loses to it whatever the source
+     order, while div.subtitles ties at (0,2,1) and second place in the same block then wins.
+     subtitle-layering.browser.test.tsx measures the computed value rather than trusting this. */
+  & > div.subtitles {
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+  }
+
   canvas {
     height: 100%;
     width: 100%;
@@ -2112,7 +2132,7 @@ ${X}
 		key: r,
 		item: e
 	}];
-}), ut = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, controls: i, children: a }) => {
+}), ut = ({ ref: e, onVideoRef: t, onSubtitleRef: n, overlay: r, controls: i, children: a }) => {
 	let o = V(), s = V((e) => e.hideUI), c = V((e) => e.setHideUI), l = p(void 0), u = p("mouse"), f = p({
 		x: -1,
 		y: -1
@@ -2155,7 +2175,7 @@ ${X}
 		},
 		className: s ? "hide" : "",
 		children: [
-			/* @__PURE__ */ C(xe, { onCanvasRef: n }),
+			/* @__PURE__ */ C(xe, { onSubtitleRef: n }),
 			lt(r).map(({ key: e, item: t }) => /* @__PURE__ */ C("div", {
 				css: st,
 				style: { ...s ? {
@@ -2265,7 +2285,7 @@ ${X}
 	}, [I, z]), /* @__PURE__ */ C(ut, {
 		ref: g,
 		onVideoRef: n ? void 0 : b,
-		onCanvasRef: S,
+		onSubtitleRef: S,
 		overlay: e.overlay,
 		controls: e.controls,
 		children: t

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

@@ -3,12 +3,12 @@ export type ChromeProps = {
     ref?: Ref<HTMLDivElement> | ((element: HTMLDivElement | null) => void);
     /** Absent means render no video element: the media belongs to someone else and arrives as children. */
     onVideoRef?: (element: HTMLVideoElement | null) => void;
-    onCanvasRef: (element: HTMLCanvasElement | null) => void;
+    onSubtitleRef: (element: HTMLDivElement | null) => void;
     /** The app's own content, over the video and outside the click-to-pause region, unlike `children`. */
     overlay?: ReactNode;
     /** False draws no control bar at all, leaving the picture, the title and the overlay. */
     controls?: boolean;
     children?: ReactNode;
 };
-export declare const Chrome: ({ ref, onVideoRef, onCanvasRef, overlay, controls, children }: ChromeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Chrome: ({ ref, onVideoRef, onSubtitleRef, overlay, controls, children }: ChromeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Chrome;

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

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

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

@@ -13,5 +13,10 @@ export type PictureInPicture = {
  * hidden mirror. Where it does not, and the engine is Gecko, the same composite becomes the picture
  * in the page so that the BROWSER'S own picture in picture control carries the subtitles with it,
  * which it otherwise cannot: it takes a video element, and the subtitles live on a canvas above one.
+ *
+ * The second argument is the subtitle LAYER, not that canvas. From jassub 2 the canvas belongs to the
+ * renderer and is replaced on every pipeline rebuild, so only the layer lives long enough to hold.
  */
-export declare const usePictureInPicture: (video: HTMLVideoElement | null, canvas: HTMLCanvasElement | null) => PictureInPicture;
+export declare const usePictureInPicture: (video: HTMLVideoElement | null, 
+/** The subtitle layer, not the canvas: see `PictureInPictureOptions.subtitles`. */
+subtitles: HTMLElement | null) => PictureInPicture;

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

@@ -3,6 +3,6 @@ import type { MediaPlayerLocalOptions } 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, 
+export declare const usePlayback: (video: HTMLVideoElement | null, subtitles: HTMLElement | null, 
 /** null when the media is remote: there are no bytes, so there is no pipeline to run. */
 options: MediaPlayerLocalOptions | null) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.8.21",
+  "version": "0.9.0",
   "description": "A video player for containers and codecs the browser cannot play natively, remuxed on the fly",
   "type": "module",
   "main": "dist/index.js",
@@ -34,9 +34,8 @@
     "build-lib": "shx rm -rf dist/ && vp build -c vite.lib.config.ts && npm run types",
     "prepublishOnly": "npm run build-lib",
     "types": "tsc -p tsconfig.lib.json",
-    "copy-assets": "shx mkdir -p public && npm run copy-libav && npm run copy-libass",
+    "copy-assets": "shx mkdir -p public && npm run copy-libav",
     "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",
     "test": "npm run fixtures && vp test run",
     "fixtures": "node scripts/fixture.mjs"
   },
@@ -45,7 +44,7 @@
     "@videojs/core": "10.0.0-beta.26",
     "@videojs/react": "10.0.0-beta.26",
     "ass-compiler": "^0.1.16",
-    "jassub": "^1.8.6",
+    "jassub": "^2.5.16",
     "libav-wasm": "^0.8.4",
     "osra": "^0.6.12",
     "react-feather": "^2.0.10",

package/src/lib/engine/picture-in-picture.ts

@@ -27,8 +27,15 @@ export type PictureInPictureMode = 'window' | 'burn-in'
 
 export type PictureInPictureOptions = {
   video: HTMLVideoElement
-  /** The subtitle canvas. jassub sizes it to the video's content rect, so it maps 1:1. */
-  canvas: HTMLCanvasElement
+  /**
+   * The subtitle LAYER, not the canvas inside it.
+   *
+   * From jassub 2 the canvas is created and removed by the subtitle renderer, one per pipeline
+   * build, so an element captured here would stop being the one being painted the moment the audio
+   * track changed. The layer is what React owns for the life of the player, so hiding and restoring
+   * it stays correct across a rebuild, and the canvas is looked up per frame.
+   */
+  subtitles: HTMLElement
   maxWidth?: number
   /** Where the mirror is mounted. It must be in the document. Defaults to the video's parent. */
   container?: HTMLElement
@@ -87,7 +94,7 @@ export const pictureInPictureMode = (): PictureInPictureMode | null => {
 
 /** Takes over the document's Media Session play/pause handlers while a session is open. */
 export const createPictureInPicture = (options: PictureInPictureOptions): PictureInPictureController => {
-  const { video, canvas } = options
+  const { video, subtitles } = options
   const mode = options.mode ?? pictureInPictureMode() ?? 'window'
   const maxWidth = options.maxWidth ?? (mode === 'burn-in' ? BURN_IN_MAX_WIDTH : DEFAULT_MAX_WIDTH)
 
@@ -112,9 +119,12 @@ export const createPictureInPicture = (options: PictureInPictureOptions): Pictur
 
   const draw = (composite: HTMLCanvasElement, context: CanvasRenderingContext2D) => {
     context.drawImage(video, 0, 0, composite.width, composite.height)
-    // drawImage throws on a zero-sized source, which the canvas is until jassub has painted
-    if (canvas.width > 0 && canvas.height > 0) {
-      context.drawImage(canvas, 0, 0, composite.width, composite.height)
+    // Resolved per frame: the renderer replaces this element on every pipeline rebuild. A canvas
+    // jassub has transferred reports the size of the last frame its worker committed, so the zero
+    // check still keeps drawImage off a source with no dimensions to read.
+    const surface = subtitles.querySelector('canvas')
+    if (surface && surface.width > 0 && surface.height > 0) {
+      context.drawImage(surface, 0, 0, composite.width, composite.height)
     }
   }
 
@@ -254,18 +264,23 @@ export const createPictureInPicture = (options: PictureInPictureOptions): Pictur
    * The real element is dimmed, never `display: none`: jassub sizes the subtitle canvas from its
    * `offsetWidth`/`offsetHeight`, and a collapsed box silently yields a composite with no subtitles
    * in it, which is exactly the thing being asked for.
+   *
+   * The LAYER is what gets hidden, rather than the canvas inside it. The canvas is replaced whenever
+   * the pipeline is rebuilt, so hiding that would leave the replacement visible over the composite
+   * (doubled subtitles) and would restore `display` onto an element that is no longer in the tree
+   * (subtitles gone for the rest of the session). The layer outlives both.
    */
   const present = (mirror: HTMLVideoElement) => {
     const videoOpacity = video.style.opacity
-    const canvasDisplay = canvas.style.display
+    const subtitlesDisplay = subtitles.style.display
     mirror.style.cssText =
       'position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:1'
     video.style.opacity = '0'
-    canvas.style.display = 'none'
+    subtitles.style.display = 'none'
     restore = () => {
       restore = undefined
       video.style.opacity = videoOpacity
-      canvas.style.display = canvasDisplay
+      subtitles.style.display = subtitlesDisplay
     }
   }
 

package/src/lib/engine/playback.ts

@@ -13,7 +13,14 @@ export type MediaIndex = { pos: number, timestamp: number }
 
 export type PlaybackOptions = {
   videoElement: HTMLVideoElement
-  canvasElement: HTMLCanvasElement
+  /**
+   * The subtitle layer. The renderer creates its own canvas inside it, one per jassub instance.
+   *
+   * Renamed from `canvasElement` in the jassub 2 migration, deliberately: passing a canvas here now
+   * means jassub transfers it to a worker and deletes it on teardown, so a caller that kept handing
+   * over an element it owns has to see a type error rather than a runtime one.
+   */
+  subtitleContainer: HTMLElement
   read: (offset: number, size: number) => Promise<ArrayBuffer>
   length: number
   /** serves BOTH `libav.wasm` and `libav-jspi.wasm`; libav-wasm picks one on `WebAssembly.Suspending` */
@@ -114,7 +121,7 @@ export const terminateRemuxer = (remuxer: { worker: Worker, destroy: () => Promi
 
 export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackController> => {
   const {
-    videoElement, canvasElement, read, length, publicPath, libavWorkerUrl,
+    videoElement, subtitleContainer, read, length, publicPath, libavWorkerUrl,
     jassubWorkerUrl, jassubWasmUrl, jassubLegacyWasmUrl, defaultFontUrl, bufferSize = DEFAULT_BUFFER_SIZE,
     audioStreamIndex, onReady, onError, onRecovered, onSeek, onSubtitleStreams,
     onAudioStreams,
@@ -152,7 +159,7 @@ export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackC
 
     const subtitles = createSubtitleRenderer({
       video: videoElement,
-      canvas: canvasElement,
+      container: subtitleContainer,
       workerUrl: jassubWorkerUrl,
       wasmUrl: jassubWasmUrl,
       legacyWasmUrl: jassubLegacyWasmUrl,