@banou/media-player 0.8.5 → 0.8.7

package/dist/engine/index.d.ts

@@ -6,5 +6,5 @@ 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';
+export { createPictureInPicture, pictureInPictureMode } from './picture-in-picture';
+export type { PictureInPictureController, PictureInPictureOptions, PictureInPictureMode } from './picture-in-picture';

package/dist/engine/index.js

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

package/dist/engine/picture-in-picture.d.ts

@@ -6,22 +6,34 @@
  * `captureStream()` backs a hidden mirror element, which is the one that enters the window. The
  * original element keeps playing and stays the only audio source.
  */
+/**
+ * `window` opens a real picture in picture window. `burn-in` cannot, and instead paints the
+ * composite into the player itself so the browser's OWN picture in picture control carries the
+ * subtitles with it.
+ */
+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;
     maxWidth?: number;
-    /** Where the hidden mirror is mounted. It must be in the document. Defaults to the video's parent. */
+    /** Where the mirror is mounted. It must be in the document. Defaults to the video's parent. */
     container?: HTMLElement;
-    /**
-     * Toggle used when compositing is unavailable or fails. The React layer passes the player store's
-     * own action, which handles Safari and exits fullscreen first; the default here does neither.
-     */
-    fallback?: () => Promise<void>;
+    /** Overrides detection. Passing a mode the browser cannot honour is the caller's problem. */
+    mode?: PictureInPictureMode;
+    /** Burn-in only, so the chrome can light the control up and say what happened. */
+    onBurnedInChange?: (burnedIn: boolean) => void;
 };
 export type PictureInPictureController = {
     toggle: () => Promise<void>;
     destroy: () => void;
+    mode: PictureInPictureMode;
 };
+/**
+ * null means offer no control at all. That covers Safari, whose picture in picture is
+ * `webkitSetPresentationMode` and not the W3C API, so neither arm here can drive it. A dead button
+ * is worse than no button.
+ */
+export declare const pictureInPictureMode: () => PictureInPictureMode | null;
 /** Takes over the document's Media Session play/pause handlers while a session is open. */
 export declare const createPictureInPicture: (options: PictureInPictureOptions) => PictureInPictureController;

package/dist/{engine-Dmc7JSd9.js → engine-B6flRjLd.js}

@@ -168,7 +168,7 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		clearTimeout(n), t.terminate();
 	});
 }, T = async (t) => {
-	let { videoElement: n, canvasElement: r, read: i, length: o, publicPath: c, libavWorkerUrl: l, jassubWorkerUrl: u, jassubWasmUrl: d, jassubLegacyWasmUrl: f, defaultFontUrl: p, bufferSize: T = C, audioStreamIndex: E, onReady: D, onError: O, onRecovered: k, onSeek: A, onSubtitleStreams: j, onAudioStreams: M } = t, N = await e({
+	let { videoElement: n, canvasElement: r, read: i, length: o, publicPath: c, libavWorkerUrl: l, jassubWorkerUrl: u, jassubWasmUrl: d, jassubLegacyWasmUrl: f, defaultFontUrl: p, bufferSize: T = C, audioStreamIndex: E, onReady: D, onError: O, onRecovered: k, onSeek: A, onSubtitleStreams: j, onAudioStreams: ee } = t, M = await e({
 		publicPath: c,
 		workerUrl: l,
 		workerOptions: { type: "module" },
@@ -176,18 +176,18 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		length: o,
 		audioStreamIndex: E,
 		read: i
-	}), P = [], F = !1, I = () => {
-		if (!F) {
-			F = !0;
-			for (let e of [...P].reverse()) try {
+	}), N = [], P = !1, F = () => {
+		if (!P) {
+			P = !0;
+			for (let e of [...N].reverse()) try {
 				e();
 			} catch {}
 		}
 	};
-	P.push(() => w(N));
+	N.push(() => w(M));
 	try {
-		let e = await N.init(), t = e.audioStreams ?? [], i = t.some((e) => e.streamIndex === E) ? E : t[0]?.streamIndex ?? -1;
-		M?.(t, i);
+		let e = await M.init(), t = e.audioStreams ?? [], i = t.some((e) => e.streamIndex === E) ? E : t[0]?.streamIndex ?? -1;
+		ee?.(t, i);
 		let o = m({
 			video: n,
 			canvas: r,
@@ -197,11 +197,11 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			defaultFontUrl: p,
 			onStreams: j
 		});
-		if (P.push(() => o.destroy()), e.attachments?.length && o.pushAttachments(e.attachments), !e.info.output.videoMimeType) throw Error("The video codec in this file could not be identified");
+		if (N.push(() => o.destroy()), e.attachments?.length && o.pushAttachments(e.attachments), !e.info.output.videoMimeType) throw Error("The video codec in this file could not be identified");
 		let c = [e.info.output.videoMimeType, e.info.output.audioMimeType].filter(Boolean).join(","), l = `video/mp4; codecs="${c}"`;
 		if (!MediaSource.isTypeSupported(l)) throw Error(`This browser cannot play the codecs in this file: ${c}`);
 		let C = new MediaSource(), w = URL.createObjectURL(C);
-		P.push(() => URL.revokeObjectURL(w)), n.src = w;
+		N.push(() => URL.revokeObjectURL(w)), n.src = w;
 		let T = await new Promise((t, n) => {
 			let r = setTimeout(() => {
 				i(), n(/* @__PURE__ */ Error("The MediaSource never opened"));
@@ -220,14 +220,14 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 				i(), n(/* @__PURE__ */ Error("The MediaSource closed before a SourceBuffer could be created"));
 			};
 			C.addEventListener("sourceopen", a, { once: !0 }), C.addEventListener("sourceclose", o, { once: !0 }), C.addEventListener("error", o, { once: !0 });
-		}), { appendBuffer: L, unbufferRange: R, updateTimestampOffset: ee, endOfStream: te } = s(T, C);
-		await L(e.data), e.subtitles?.length && o.pushFragments(e.subtitles), D?.();
-		let z = !1, B = !1, V = !1, H = 0, U = 0, W = null, G = 0, K = 0, q = !1, J = 0, Y = (e, t) => {
+		}), { appendBuffer: I, unbufferRange: L, updateTimestampOffset: R, endOfStream: z } = s(T, C);
+		await I(e.data), e.subtitles?.length && o.pushFragments(e.subtitles), D?.();
+		let B = !1, V = !1, H = !1, U = 0, W = 0, G = null, K = 0, q = 0, J = !1, te = 0, Y = (e, t) => {
 			let n = e?.message === "Cancelled";
-			t && n || (console.error(e), !q && (q = !0, O?.(n ? Error("Reading the video file failed", { cause: e }) : e)));
+			t && n || (console.error(e), !J && (J = !0, O?.(n ? Error("Reading the video file failed", { cause: e }) : e)));
 		}, X = async (e = !1) => {
 			let t = n.currentTime, r = e ? v : h, i = e ? y : g;
-			for (let { start: e, end: n } of a(T)) e < t + r && await R(e, t + r), n > t + i && await R(t + i, n);
+			for (let { start: e, end: n } of a(T)) e < t + r && await L(e, t + r), n > t + i && await L(t + i, n);
 		}, ne = () => {
 			let e = a(T);
 			if (!e.length) return !0;
@@ -240,65 +240,72 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			return a(T).find((t) => t.start <= e + S && e < t.end);
 		}, re = () => {
 			let e = Z();
-			return !!e && e.end >= K - .1;
+			return !!e && e.end >= q - .1;
 		}, Q = () => {
 			let e = a(T).map((e) => e.end);
-			e.length && (K = Math.max(K, ...e));
-		}, $ = async (e) => {
-			B = !0, W = null, G = 0, J = e;
-			let t = ++U;
+			e.length && (q = Math.max(q, ...e));
+		}, ie = async (e) => {
+			V = !0, G = null, K = 0, te = e;
+			let t = ++W;
 			try {
-				let { data: n, pts: r, subtitles: i } = await N.seek(e);
-				if (F || t !== U || (i?.length && o.pushFragments(i), await ee(r), F || t !== U)) return;
-				n.byteLength && (await L(n), Q());
+				let { data: n, pts: r, subtitles: i } = await M.seek(e);
+				if (P || t !== W || (i?.length && o.pushFragments(i), await R(r), P || t !== W)) return;
+				n.byteLength && (await I(n), Q());
 			} catch (e) {
-				Y(e, F || t !== U);
+				Y(e, P || t !== W);
 			} finally {
-				t === U && (B = !1);
+				t === W && (V = !1);
 			}
-		}, ie = async () => {
-			let e = W;
+		}, ae = async () => {
+			let e = G;
 			if (e) try {
-				await L(e), Q(), W === e && (W = null, G = 0);
+				await I(e), Q(), G === e && (G = null, K = 0);
 			} catch (t) {
-				if (W !== e) return;
+				if (G !== e) return;
 				if (t?.name === "QuotaExceededError") {
 					let t = await X(!0).then(() => !0, () => !1);
-					if (W !== e) return;
+					if (G !== e) return;
 					if (t) {
-						V = !1, await $(Z()?.end ?? n.currentTime);
+						H = !1, await ie(Z()?.end ?? n.currentTime);
 						return;
 					}
 				}
-				if (G += 1, G < b) return;
-				throw W = null, t;
+				if (K += 1, K < b) return;
+				throw G = null, t;
 			}
-		}, ae = async () => {
-			if (z || B || F || !W && (V || !ne())) return;
-			let e = ++H, t = U, n = () => F || e !== H || t !== U;
-			z = !0;
+		}, oe = async () => {
+			if (B || V || P || !G && (H || !ne())) return;
+			let e = ++U, t = W, n = () => P || e !== U || t !== W;
+			B = !0;
 			try {
-				if (!W) {
-					let { data: e, subtitles: t, finished: r } = await N.read();
-					if (n() || (r && (V = !0), t?.length && o.pushFragments(t), !e.byteLength)) return;
-					W = e, G = 0;
+				if (!G) {
+					let { data: e, subtitles: t, finished: r } = await M.read();
+					if (n() || (r && (H = !0), t?.length && o.pushFragments(t), !e.byteLength)) return;
+					G = e, K = 0;
 				}
-				await ie(), !n() && q && (q = !1, k?.());
+				await ae(), !n() && J && (J = !1, k?.());
 			} catch (e) {
 				Y(e, n());
 			} finally {
-				e === H && (z = !1);
+				e === U && (B = !1);
 			}
-		}, oe = (e) => e >= J && !!Z(), se = () => {
+		}, se = (e) => e >= te && !!Z(), ce = () => {
 			let t = n.currentTime, r = e.info.input.duration || n.duration;
-			r > 0 && A?.(Math.min(Math.max(t / r, 0), 1)), !oe(t) && (V = !1, $(t));
+			r > 0 && A?.(Math.min(Math.max(t / r, 0), 1)), !se(t) && (H = !1, ie(t));
+		};
+		n.addEventListener("seeking", ce), N.push(() => n.removeEventListener("seeking", ce));
+		let $ = !1, le = () => {
+			if ($) return;
+			$ = !0;
+			let e = n.error;
+			Y(Error(`the media element failed: ${e?.message ?? "unknown"}`, { cause: e }), !1);
 		};
-		n.addEventListener("seeking", se), P.push(() => n.removeEventListener("seeking", se));
-		let ce = setInterval(() => {
-			X().catch(() => {}), ae().catch((e) => Y(e, !1)), V && !W && re() && C.readyState === "open" && te().catch(() => {});
+		n.addEventListener("error", le), N.push(() => n.removeEventListener("error", le));
+		let ue = setInterval(() => {
+			$ || n.error || (X().catch(() => {}), oe().catch((e) => Y(e, !1)), H && !G && re() && C.readyState === "open" && z().catch(() => {}));
 		}, 100);
-		return P.push(() => clearInterval(ce)), {
-			destroy: I,
+		return N.push(() => clearInterval(ue)), {
+			destroy: F,
 			selectSubtitleStream: (e) => o.selectStream(e),
 			indexes: e.indexes ?? [],
 			duration: e.info.input.duration,
@@ -306,9 +313,9 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			audioMimeType: e.info.output.audioMimeType
 		};
 	} catch (e) {
-		throw I(), e;
+		throw F(), e;
 	}
-}, E = 5, D = 500, O = 320, k = 1e6, A = 3, j = 1e4, M = async (e) => {
+}, E = 5, D = 500, O = 320, k = 1e6, A = 3, j = 1e4, ee = async (e) => {
 	let { publicPath: n, workerUrl: r, length: i, read: a, onThumbnails: o, width: s = O } = e, c = await t({
 		publicPath: n,
 		workerUrl: r,
@@ -383,88 +390,119 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 	} catch (e) {
 		throw w(c), e;
 	}
-}, N = 1280, P = 250, F = () => typeof HTMLCanvasElement < "u" && "captureStream" in HTMLCanvasElement.prototype && typeof document < "u" && document.pictureInPictureEnabled, I = (e) => {
-	let { video: t, canvas: n, maxWidth: r = N } = e, i, a, o, s = !1, c = !1, l = !1, u = () => !!i && document.pictureInPictureElement === i.mirror, d = (e, r) => {
+}, M = 1280, N = 1920, P = 250, F = 100, I = () => typeof HTMLCanvasElement < "u" && "captureStream" in HTMLCanvasElement.prototype, L = () => typeof document < "u" && typeof HTMLVideoElement < "u" && typeof HTMLVideoElement.prototype.requestPictureInPicture == "function" && !!document.pictureInPictureEnabled, R = () => typeof HTMLVideoElement < "u" && "mozCaptureStream" in HTMLVideoElement.prototype, z = () => I() ? L() ? "window" : R() ? "burn-in" : null : null, B = (e) => {
+	let { video: t, canvas: n } = e, r = e.mode ?? z() ?? "window", i = e.maxWidth ?? (r === "burn-in" ? N : M), a, o, s, c = !1, l = !1, u = !1, d = !1, f, p = () => r === "burn-in" ? !!a : !!a && document.pictureInPictureElement === a.mirror, m = (e, r) => {
 		r.drawImage(t, 0, 0, e.width, e.height), n.width > 0 && n.height > 0 && r.drawImage(n, 0, 0, e.width, e.height);
-	}, f = () => {
-		i && d(i.composite, i.context);
-	}, p = "requestVideoFrameCallback" in t, m = () => {
-		f(), h();
 	}, h = () => {
-		l || !i || (a = p ? t.requestVideoFrameCallback(m) : requestAnimationFrame(m));
-	}, g = () => {
-		a !== void 0 && (p ? t.cancelVideoFrameCallback(a) : cancelAnimationFrame(a)), o !== void 0 && clearInterval(o), a = void 0, o = void 0;
-	}, _ = () => {
-		"mediaSession" in navigator && (navigator.mediaSession.playbackState = t.paused ? "paused" : "playing");
+		a && m(a.composite, a.context);
+	}, g = "requestVideoFrameCallback" in t, _ = () => {
+		h(), v();
 	}, v = () => {
-		s || !t.paused || t.play().catch(() => {});
+		d || !a || (o = g ? t.requestVideoFrameCallback(_) : requestAnimationFrame(_));
 	}, y = () => {
-		s || (t.paused || t.pause(), s = !0, i?.mirror.play().catch(() => {}).finally(() => {
-			s = !1;
-		}));
+		o !== void 0 && (g ? t.cancelVideoFrameCallback(o) : cancelAnimationFrame(o)), s !== void 0 && clearInterval(s), o = void 0, s = void 0;
 	}, b = () => {
-		_(), i?.mirror.play().catch(() => {});
+		"mediaSession" in navigator && (navigator.mediaSession.playbackState = t.paused ? "paused" : "playing");
 	}, x = () => {
-		_();
-	}, S = [["play", () => {
+		c || l || !t.paused || t.play().catch(() => {});
+	}, S = () => {
+		c || l || (t.paused || t.pause(), r !== "burn-in" && (c = !0, a?.mirror.play().catch(() => {}).finally(() => {
+			c = !1;
+		})));
+	}, C = () => {
+		b(), a?.mirror.play().catch(() => {});
+	}, w = () => {
+		b(), r === "burn-in" && a?.mirror.pause();
+	}, T = () => {
+		if (r !== "burn-in" || !a || !t.paused || l) return;
+		l = !0;
+		let { mirror: e } = a;
+		h(), e.play().then(() => new Promise((e) => {
+			setTimeout(e, F);
+		})).catch(() => {}).finally(() => {
+			e.pause(), setTimeout(() => {
+				l = !1;
+			}, F);
+		});
+	}, E = [["play", () => {
 		t.play().catch(() => {});
-	}], ["pause", () => t.pause()]], C = (e) => {
-		if ("mediaSession" in navigator) for (let [t, n] of S) try {
+	}], ["pause", () => t.pause()]], D = (e) => {
+		if ("mediaSession" in navigator) for (let [t, n] of E) try {
 			navigator.mediaSession.setActionHandler(t, e ? n : null);
 		} catch {}
-	}, w = () => {
-		if (g(), C(!1), t.removeEventListener("play", b), t.removeEventListener("pause", x), !i) return;
-		let { stream: e, mirror: n } = i;
-		n.removeEventListener("play", v), n.removeEventListener("pause", y), n.removeEventListener("leavepictureinpicture", T);
+	}, O = () => {
+		if (y(), D(!1), t.removeEventListener("play", C), t.removeEventListener("pause", w), t.removeEventListener("seeked", T), !a) {
+			f?.();
+			return;
+		}
+		let { stream: e, mirror: n } = a;
+		n.removeEventListener("play", x), n.removeEventListener("pause", S), n.removeEventListener("leavepictureinpicture", k);
 		for (let t of e.getTracks()) t.stop();
-		n.remove(), i = void 0;
-	}, T = () => w(), E = e.fallback ?? (async () => {
-		document.pictureInPictureElement === t ? await document.exitPictureInPicture() : await t.requestPictureInPicture();
-	}), D = async () => {
-		let n = Math.min(t.videoWidth || r, r), a = Math.round(n * ((t.videoHeight || 9) / (t.videoWidth || 16))), s = document.createElement("canvas");
-		s.width = n, s.height = a;
-		let c = s.getContext("2d");
-		if (!c) throw Error("the picture in picture composite has no 2d context");
-		let l = document.createElement("video");
-		l.muted = !0, l.playsInline = !0, l.style.cssText = "position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;left:-1px;top:-1px", d(s, c), i = {
-			composite: s,
-			context: c,
-			stream: s.captureStream(),
-			mirror: l
-		}, l.srcObject = i.stream, (e.container ?? t.parentElement ?? document.body).appendChild(l), h(), o = setInterval(() => {
-			t.paused && f();
-		}, P), l.play().catch(() => {}), l.readyState === 0 && await new Promise((e) => {
+		n.remove(), a = void 0, f?.();
+	}, k = () => O(), A = (e) => {
+		let r = t.style.opacity, i = n.style.display;
+		e.style.cssText = "position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:1", t.style.opacity = "0", n.style.display = "none", f = () => {
+			f = void 0, t.style.opacity = r, n.style.display = i;
+		};
+	}, j = async () => {
+		let n = Math.min(t.videoWidth || i, i), o = Math.round(n * ((t.videoHeight || 9) / (t.videoWidth || 16))), c = document.createElement("canvas");
+		c.width = n, c.height = o;
+		let l = c.getContext("2d");
+		if (!l) throw Error("the picture in picture composite has no 2d context");
+		let u = document.createElement("video");
+		u.muted = !0, u.playsInline = !0, r === "burn-in" ? A(u) : u.style.cssText = "position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;left:-1px;top:-1px", m(c, l);
+		let f = {
+			composite: c,
+			context: l,
+			stream: c.captureStream(),
+			mirror: u
+		};
+		if (a = f, u.srcObject = f.stream, (e.container ?? t.parentElement ?? document.body).appendChild(u), v(), s = setInterval(() => {
+			t.paused && h();
+		}, P), u.play().catch(() => {}), u.readyState === 0 && await new Promise((e) => {
 			let t = () => {
 				clearTimeout(n), e();
 			}, n = setTimeout(t, 1e3);
-			l.addEventListener("loadedmetadata", t, { once: !0 });
-		}), l.addEventListener("play", v), l.addEventListener("pause", y), l.addEventListener("leavepictureinpicture", T), t.addEventListener("play", b), t.addEventListener("pause", x), C(!0), _(), await l.requestPictureInPicture();
+			u.addEventListener("loadedmetadata", t, { once: !0 });
+		}), d || a !== f) {
+			u.remove();
+			return;
+		}
+		if (u.addEventListener("play", x), u.addEventListener("pause", S), u.addEventListener("leavepictureinpicture", k), t.addEventListener("play", C), t.addEventListener("pause", w), t.addEventListener("seeked", T), D(!0), b(), r === "burn-in") {
+			t.paused && u.pause(), e.onBurnedInChange?.(!0);
+			return;
+		}
+		await u.requestPictureInPicture();
 	};
 	return {
 		toggle: async () => {
-			if (!(l || c)) {
-				if (u()) {
-					await document.exitPictureInPicture().catch(() => {});
-					return;
-				}
-				if (!F()) {
-					await E();
-					return;
-				}
-				document.pictureInPictureElement && await document.exitPictureInPicture().catch(() => {}), c = !0;
+			if (!(d || u)) {
+				u = !0;
 				try {
-					await D();
-				} catch (e) {
-					console.warn("subtitle compositing for picture in picture failed, falling back", e), w(), await E().catch(() => {});
+					if (p()) {
+						if (r === "burn-in") {
+							O(), e.onBurnedInChange?.(!1);
+							return;
+						}
+						await document.exitPictureInPicture().catch(() => {});
+						return;
+					}
+					r !== "burn-in" && document.pictureInPictureElement && await document.exitPictureInPicture().catch(() => {});
+					try {
+						await j();
+					} catch (t) {
+						console.warn("subtitle compositing for picture in picture failed", t), O(), r === "burn-in" && e.onBurnedInChange?.(!1);
+					}
 				} finally {
-					c = !1;
+					u = !1;
 				}
 			}
 		},
+		mode: r,
 		destroy: () => {
-			l = !0, u() && document.exitPictureInPicture().catch(() => {}), w();
+			d = !0, r !== "burn-in" && p() && document.exitPictureInPicture().catch(() => {}), O(), r === "burn-in" && e.onBurnedInChange?.(!1);
 		}
 	};
 };
 //#endregion
-export { w as a, a as c, T as i, s as l, M as n, c as o, C as r, m as s, I as t };
+export { T as a, m as c, C as i, a as l, z as n, w as o, ee as r, c as s, B as t, s as u };