@banou/media-player 0.9.0 → 0.10.1

package/README.md

@@ -58,6 +58,13 @@ player.play()
 
 `useSeekThumbnails` and `usePictureInPicture` are exported for reuse outside the bundled chrome.
 
+`useSeekThumbnails` returns `{ thumbnails, requestThumbnail }`. Previews are generated from the start
+of the file to the end, which is right until somebody points at the seekbar: `requestThumbnail(time)`
+moves the preview covering `time` to the front of that queue, and the walk carries on behind it from
+wherever it had got to. Pass `undefined` when the pointer leaves. The bundled seekbar calls it for
+you, so this is only for a chrome you draw yourself. It cannot interrupt a decode already in flight,
+so the wait is the tail of that one rather than the whole backlog.
+
 `downloadedRanges` paints byte spans you already hold onto the seekbar, mapped through the keyframe
 index rather than by percentage, because a file's download progress is not its playback progress:
 containers carry headers, fonts and attachments that occupy no time at all.
@@ -143,10 +150,39 @@ chrome at once.
 
 ## What it does
 
-Play and pause, seek with a preview thumbnail and a keyframe-accurate scrub, volume on a log curve,
-mute, playback speed, audio track selection, subtitle track selection, picture in picture, fullscreen,
-and keyboard shortcuts. Nothing is persisted: volume, speed and track choices start at their defaults
-every load.
+Play and pause, seek with a preview thumbnail and a keyframe-accurate scrub, chapters on the seekbar,
+an offer to skip an opening or ending, volume on a log curve, mute, playback speed, audio track
+selection, subtitle track selection, picture in picture, fullscreen, and keyboard shortcuts. Nothing
+is persisted: volume, speed and track choices start at their defaults every load.
+
+### Chapters
+
+Chapters come from the container, and the seekbar draws them as segments with a break at each
+boundary. Hovering one lifts it above its neighbours and names it beside the time in the preview.
+
+Pass `chapters` to supply them yourself, on either arm, and they win over whatever the file declared:
+
+```tsx
+<MediaPlayer {...source} chapters={[{ start: 0, end: 88, title: 'Opening' }]} />
+```
+
+They are `{ start, end, title }` in seconds, ordered and non-overlapping, and they need not cover the
+whole duration. A local file gets them from libav automatically, so this is for a source that knows
+chapters the container does not.
+
+### Skip Opening and Skip Ending
+
+When a chapter looks like an opening or an ending, a button offers to jump past it, appearing a
+second before the chapter and staying six seconds. It never skips on its own, so a wrong guess costs
+a button nobody presses rather than a jump out of the episode.
+
+The guess is made from the chapter title, against the names releases actually use (`OP`, `Opening`,
+`ED`, `Ending`, `Credits`, and the same names carrying a song), and it defers across the whole file:
+`Intro` is the opening where nothing else claims to be, and the cold open where an `OP` follows it.
+A file whose chapters carry no usable name at all falls back to shape, where a chapter of about
+ninety seconds in each half of the runtime is the opening and the ending. Nothing shorter than
+fifteen seconds is ever offered, and a disc that is mostly themes offers nothing, because there the
+themes are what is being watched.
 
 ### Picture in picture keeps the subtitles
 

package/dist/engine/index.d.ts

@@ -1,5 +1,5 @@
 export { startPlayback, terminateRemuxer, MediaElementError, isMediaElementError, DEFAULT_BUFFER_SIZE } from './playback';
-export type { PlaybackOptions, PlaybackController, MediaIndex, AudioStream } from './playback';
+export type { PlaybackOptions, PlaybackController, MediaIndex, MediaChapter, AudioStream } from './playback';
 export { createSubtitleRenderer, SUBTITLES_OFF } from './subtitles';
 export type { SubtitleRenderer, SubtitleRendererOptions, SubtitleStream } from './subtitles';
 export { createThumbnailGenerator } from './thumbnails';

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-DZrYu66u.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-b5_5HscR.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/playback.d.ts

@@ -6,6 +6,21 @@ export type MediaIndex = {
     pos: number;
     timestamp: number;
 };
+/**
+ * One named span of the timeline, in SECONDS.
+ *
+ * Chapters are not required to tile the duration: a container routinely declares a last chapter that
+ * ends fractionally before the file does, and nothing guarantees the first starts at zero. Anything
+ * drawing them has to treat the gaps as ordinary un-named time rather than assume full cover.
+ *
+ * libav also reports an `index`, dropped here the way `MediaIndex` drops it: array position already
+ * carries it, and a caller supplying their own chapters should not have to number them.
+ */
+export type MediaChapter = {
+    start: number;
+    end: number;
+    title: string;
+};
 export type PlaybackOptions = {
     videoElement: HTMLVideoElement;
     /**
@@ -49,6 +64,8 @@ export type PlaybackController = {
     selectSubtitleStream: (streamIndex: number | undefined) => void;
     /** Keyframe index of the input, which is what maps a downloaded byte range onto the timeline. */
     indexes: MediaIndex[];
+    /** Named spans the container declared, empty when it declared none. */
+    chapters: MediaChapter[];
     duration: number;
     videoMimeType: string;
     audioMimeType: string;

package/dist/engine/thumbnails.d.ts

@@ -17,6 +17,17 @@ export type ThumbnailGeneratorOptions = {
 export type ThumbnailGenerator = {
     /** Report which byte ranges are readable. Called with no argument when the whole file is. */
     update: (ranges?: [number, number][]) => void;
+    /**
+     * Where the viewer is pointing, so that preview is decoded next. `undefined` when they stop.
+     *
+     * Only the slot covering `time` jumps the queue, and only for as long as it is still waiting, so
+     * this moves one preview forward rather than re-ordering the run. Everything behind it keeps the
+     * order it was claimed in and carries on the moment the jumped slot is done.
+     *
+     * It cannot interrupt a decode that has already started, so the wait is the tail of the one in
+     * flight and not the whole backlog.
+     */
+    prioritize: (time: number | undefined) => void;
     destroy: () => void;
 };
 export declare const createThumbnailGenerator: (options: ThumbnailGeneratorOptions) => Promise<ThumbnailGenerator>;

package/dist/{engine-DZrYu66u.js → engine-b5_5HscR.js}

@@ -374,6 +374,7 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			videoElement: n,
 			selectSubtitleStream: (e) => s.selectStream(e),
 			indexes: e.indexes ?? [],
+			chapters: e.chapters ?? [],
 			duration: e.info.input.duration,
 			videoMimeType: e.info.output.videoMimeType,
 			audioMimeType: e.info.output.audioMimeType
@@ -404,7 +405,14 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		}
 		for (let [e, t] of a.entries()) t.endTime = a[e + 1]?.timestamp ?? n;
 		a.length > 1 && a.at(-1).timestamp > n - r * 2 && a.pop();
-		let l = [], u = !1, d = Promise.resolve(), f = () => {
+		let l = [], u = !1, d = [], f = !1, p, m = () => {
+			let e = p;
+			if (e !== void 0) {
+				let t = d.findIndex(({ timestamp: t, endTime: n }) => t <= e && e < n);
+				if (t >= 0) return t;
+			}
+			return 0;
+		}, h = () => {
 			let e = [];
 			for (let [t, n] of l.entries()) {
 				n.startTime - (e.at(-1)?.endTime ?? 0) > .01 && e.push({
@@ -425,30 +433,39 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 				startTime: t,
 				endTime: n
 			}), o(e);
-		}, p = (e) => {
-			e.done = !0, d = d.then(async () => {
-				if (u) return;
-				let t = await Promise.race([c.readKeyframe(e.timestamp), new Promise((e, t) => setTimeout(() => t(/* @__PURE__ */ Error("timed out")), M))]), n = await createImageBitmap(new Blob([t], { type: "image/png" })), r = new OffscreenCanvas(s, Math.max(1, Math.round(n.height * (s / n.width))));
-				r.getContext("2d").drawImage(n, 0, 0, r.width, r.height), n.close();
-				let i = await r.convertToBlob({
-					type: "image/webp",
-					quality: .7
-				});
-				u || (l = [...l, {
-					url: URL.createObjectURL(i),
-					startTime: e.timestamp,
-					endTime: e.endTime
-				}].sort((e, t) => e.startTime - t.startTime), f());
-			}).catch(() => {
+		}, g = async (e) => {
+			if (u) return;
+			let t = await Promise.race([c.readKeyframe(e.timestamp), new Promise((e, t) => setTimeout(() => t(/* @__PURE__ */ Error("timed out")), M))]), n = await createImageBitmap(new Blob([t], { type: "image/png" })), r = new OffscreenCanvas(s, Math.max(1, Math.round(n.height * (s / n.width))));
+			r.getContext("2d").drawImage(n, 0, 0, r.width, r.height), n.close();
+			let i = await r.convertToBlob({
+				type: "image/webp",
+				quality: .7
+			});
+			u || (l = [...l, {
+				url: URL.createObjectURL(i),
+				startTime: e.timestamp,
+				endTime: e.endTime
+			}].sort((e, t) => e.startTime - t.startTime), h());
+		}, _ = () => {
+			if (f || u || !d.length) return;
+			let e = d.splice(m(), 1)[0];
+			f = !0, g(e).catch(() => {
 				e.attempts += 1, e.done = e.attempts >= ae;
+			}).finally(() => {
+				f = !1, _();
 			});
+		}, v = (e) => {
+			e.done = !0, d.push(e), _();
 		};
-		return f(), {
+		return h(), {
 			update: (e) => {
-				if (!u) for (let t of a) t.done || (!e || e.some(([e, n]) => e <= t.startByte && t.endByte <= n)) && p(t);
+				if (!u) for (let t of a) t.done || (!e || e.some(([e, n]) => e <= t.startByte && t.endByte <= n)) && v(t);
+			},
+			prioritize: (e) => {
+				u || (p = e);
 			},
 			destroy: () => {
-				u = !0;
+				u = !0, d.length = 0;
 				for (let e of l) URL.revokeObjectURL(e.url);
 				l = [], A(c);
 			}

package/dist/index.d.ts

@@ -10,5 +10,5 @@ export { useSeekThumbnails } from './react/hooks/use-thumbnails';
 export { usePictureInPicture } from './react/hooks/use-picture-in-picture';
 export { inputToRemuxerInput } from './utils/source';
 export type { RemuxerInput } from './utils/source';
-export type { AudioStream, MediaIndex, PictureInPictureController, PlaybackController, PlaybackOptions, SubtitleStream, ThumbnailImage, } from './engine';
+export type { AudioStream, MediaChapter, MediaIndex, PictureInPictureController, PlaybackController, PlaybackOptions, SubtitleStream, ThumbnailImage, } from './engine';
 export { startPlayback, createThumbnailGenerator, createSubtitleRenderer, createPictureInPicture, SUBTITLES_OFF, } from './engine';