@banou/media-player 0.10.5 → 0.10.7

package/README.md

@@ -3,7 +3,7 @@
 # @banou/media-player
 
 A React video player for files the browser cannot open on its own. It takes a `read(offset, size)` and
-a byte length, remuxes into fragmented MP4 as it plays through [libav-wasm](https://github.com/Banou26/libav-wasm),
+a byte length, remuxes into fragmented MP4 as it plays through [libav-wasm](https://github.com/banou26/libav-wasm),
 and renders ASS/SSA subtitles with jassub. Nothing is downloaded up front, so it plays a 4 GB MKV over
 HTTP range requests, out of a torrent, off a local disk, or out of anything else that can answer for a
 byte range.
@@ -208,6 +208,30 @@ play/pause button.
 If anything in that path is unavailable the player falls back to handing the browser the bare video,
 which plays without subtitles rather than not at all.
 
+### Picture in picture for a media you do not own
+
+A browser opens picture in picture only for a click in the document that owns the `<video>`, so a
+remote media gets the control only when the host opts in to taking that click:
+
+```tsx
+// `.frame` sets `pointer-events: none`, so clicks reach the chrome everywhere else
+<MediaPlayer
+  media={media}
+  pictureInPicture={{ onArmedChange: (armed) => { frame.current!.style.pointerEvents = armed ? 'auto' : '' } }}
+>
+  <iframe ref={frame} className='frame' />
+</MediaPlayer>
+```
+
+While the pointer is over the control, the chrome lets a click through at the control's box and the
+host is told it is armed, so its frame takes that click and enters picture in picture from inside.
+The control follows the media's `enterpictureinpicture` and `leavepictureinpicture` events, and in
+picture in picture a click on it calls the media's `exitPictureInPicture`.
+
+A finger never rests on the control before it presses, so a tap cannot arm it. The control is offered
+only where the primary pointer hovers (`(hover: hover) and (pointer: fine)`), and a touch hides it
+until a pointer that hovers moves again.
+
 ## Layout
 
 One package. `src/` is the demo app, `src/lib` is the library it publishes, and the app imports it by

package/dist/engine/index.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, d as n, f as r, i, l as a, n as o, o as s, r as c, s as l, t as u, u as d } from "../engine-CB5J5kah.js";
+import { a as e, c as t, d as n, f as r, i, l as a, n as o, o as s, r as c, s as l, t as u, u as d } from "../engine-C6PdWBah.js";
 export { i as DEFAULT_BUFFER_SIZE, e as MediaElementError, a as SUBTITLES_OFF, u as createPictureInPicture, d as createSubtitleRenderer, c as createThumbnailGenerator, n as getTimeRanges, s as isMediaElementError, o as pictureInPictureMode, l as startPlayback, t as terminateRemuxer, r as updateSourceBuffer };

package/dist/{engine-CB5J5kah.js → engine-C6PdWBah.js}

@@ -75,7 +75,7 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		x || (x = !0, queueMicrotask(() => {
 			x = !1;
 			let e = l;
-			!e || !t.videoWidth || e.ready.then(() => {
+			e && t.videoWidth && e.ready.then(() => {
 				if (l === e) return e.manualRender({
 					expectedDisplayTime: performance.now(),
 					width: t.videoWidth,
@@ -241,7 +241,7 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		await F(e.data), e.subtitles?.length && s.pushFragments(e.subtitles), te?.();
 		let I = !1, L = !1, R = 0, z, B = () => z ?? n.currentTime, V = !1, H = 0, U = 0, W = null, G = 0, ue = 0, K = !1, de = 0, q = (e, t, n = !1) => {
 			let r = e?.message === "Cancelled";
-			t && r || (console.error(e), !(K && !n) && (K = !0, ne?.(r ? Error("Reading the video file failed", { cause: e }) : e)));
+			t && r || (console.error(e), (!K || n) && (K = !0, ne?.(r ? Error("Reading the video file failed", { cause: e }) : e)));
 		}, fe = async (e = !1) => {
 			if (R > 0 && !e) return;
 			let t = n.currentTime, r = e ? x : v, a = e ? S : y;
@@ -521,7 +521,7 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 	}, g = "requestVideoFrameCallback" in t, _ = () => {
 		h(), v();
 	}, v = () => {
-		d || !a || (o = g ? t.requestVideoFrameCallback(_) : requestAnimationFrame(_));
+		!d && a && (o = g ? t.requestVideoFrameCallback(_) : requestAnimationFrame(_));
 	}, y = () => {
 		o !== void 0 && (g ? t.cancelVideoFrameCallback(o) : cancelAnimationFrame(o)), s !== void 0 && clearInterval(s), o = void 0, s = void 0;
 	}, b = () => {

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 export { MediaPlayer, default } from './react/video-player';
 export type { MediaPlayerOptions, MediaPlayerLocalOptions, MediaPlayerRemoteOptions, MediaPlayerSource, } from './react/video-player';
 export { isDelegatedTracks, isExternalThumbnails } from './react/media';
-export type { DelegatedSelection, DelegatedTracks, ExternalThumbnails, PlayerMedia, TimeRangesLike, } from './react/media';
+export type { DelegatedSelection, DelegatedTracks, ExternalThumbnails, PassThroughPictureInPicture, PlayerMedia, TimeRangesLike, } from './react/media';
 export { Player, usePlayer } from './react/player';
 export type { PlayerStore } from './react/player';
 export { sourceFeature } from './react/source-feature';
-export type { DownloadedRange, PlaybackErrorEntry, SourceState } from './react/source-feature';
+export type { DownloadedRange, PassThroughControl, PlaybackErrorEntry, SourceState, ViewportBox, } from './react/source-feature';
 export { useSeekThumbnails } from './react/hooks/use-thumbnails';
 export { usePictureInPicture } from './react/hooks/use-picture-in-picture';
 export { inputToRemuxerInput } from './utils/source';