@openrails/contentkit-ui 0.103.2 → 0.104.0-rc.2

package/dist/components/video-mini-player.js

@@ -3,9 +3,9 @@ import { publicRenditions as t } from "../client/public.js";
 import { useMessages as n } from "../i18n/context.js";
 import { ContentKitUiRoot as ee } from "../scope.js";
 import { PLAYER_VOLUME_KEY as r, playerKeyAction as i, writeVolume as a } from "../client/player.js";
-import { useHlsPlayer as te } from "../react/gallery.js";
-import { useActiveCues as ne, useMediaState as re, useProgressReports as ie } from "../react/player.js";
-import { Captions as ae, ControlButton as o, SeekBar as oe, Spinner as s, clock as c } from "./player-controls.js";
+import { useHlsPlayer as o } from "../react/gallery.js";
+import { useActiveCues as te, useMediaState as ne, useProgressReports as re } from "../react/player.js";
+import { Captions as ie, ControlButton as s, SeekBar as ae, Spinner as oe, clock as c } from "./player-controls.js";
 import { SpriteFrame as l, keyAllowed as u } from "./video-player.js";
 import { useCallback as d, useEffect as f, useRef as p, useState as m } from "react";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
@@ -14,56 +14,62 @@ import { Cancel01Icon as se, GoBackward10SecIcon as ce, GoForward10SecIcon as le
 import { HugeiconsIcon as he } from "@hugeicons/react";
 //#region src/components/video-mini-player.tsx
 var ge = 2500;
-function v({ handoff: v, onExpand: _e, onClose: y, onProgress: b, progressInterval: ve = 1e4, keyboard: x = "global", label: S, position: ye = "bottom-right", crossOrigin: be, className: xe, style: Se, appearance: Ce, ...C }) {
-	let { t: w } = n(), T = `${v.base}master.m3u8`, E = te({
-		...C,
-		src: T,
+function v({ handoff: v, onExpand: _e, onClose: ve, onProgress: ye, engagement: y, progressInterval: be = 1e4, keyboard: b = "global", label: x, position: xe = "bottom-right", crossOrigin: Se, className: Ce, style: we, appearance: Te, ...S }) {
+	let { t: C } = n(), w = `${v.base}master.m3u8`, T = o({
+		...S,
+		src: w,
 		startAt: v.time,
 		autoPlay: v.playing,
 		audioLanguage: v.audioLanguage,
 		subtitleLanguage: v.subtitleLanguage,
 		trackKey: null,
 		qualityKey: null
-	}), { status: D, error: O, started: k } = E, [A, we] = m(null), j = E.ref, Te = d((e) => {
-		j(e), we(e);
-	}, [j]), M = re(A), N = ne(A);
-	ie(A, {
-		enabled: k,
-		source: k ? T : null,
-		interval: ve,
-		onProgress: b
+	}), { status: E, error: D, started: O } = T, [k, Ee] = m(null), A = T.ref, De = d((e) => {
+		A(e), Ee(e);
+	}, [A]), j = y?.video;
+	f(() => (j?.(O ? k : null), () => j?.(null)), [
+		j,
+		O,
+		k
+	]);
+	let M = ne(k), N = te(k);
+	re(k, {
+		enabled: O,
+		source: O ? w : null,
+		interval: be,
+		onProgress: ye
 	});
-	let [Ee, P] = m(!0), F = p(void 0), I = d(() => {
+	let [Oe, P] = m(!0), F = p(void 0), I = d(() => {
 		P(!0), clearTimeout(F.current), F.current = setTimeout(() => P(!1), ge);
 	}, []), L = d(() => {
 		clearTimeout(F.current), P(!1);
 	}, []);
 	f(() => () => clearTimeout(F.current), []);
-	let [R, De] = m(!1), z = !M.paused && !M.ended, B = Ee || !z || R || !!O, V = p(!1), H = () => A?.currentTime || M.time || v.time, Oe = () => {
+	let [R, ke] = m(!1), z = !M.paused && !M.ended, B = Oe || !z || R || !!D, V = p(!1), H = () => k?.currentTime || M.time || v.time, Ae = () => {
 		V.current || (V.current = !0, _e({
 			time: H(),
 			playing: z
 		}));
-	}, ke = () => {
-		V.current || (V.current = !0, A?.pause(), y({ time: H() }));
+	}, je = () => {
+		V.current || (V.current = !0, k?.pause(), ve({ time: H() }));
 	}, U = () => {
-		A && (!k || A.paused || A.ended ? E.play() : A.pause());
+		k && (!O || k.paused || k.ended ? T.play() : k.pause());
 	}, W = M.duration || v.duration || 0, G = (e) => {
-		A && (A.currentTime = Math.min(W || e, Math.max(0, e)));
-	}, Ae = C.volumeKey === void 0 ? r : C.volumeKey, K = () => {
-		A && (A.muted = !A.muted, !A.muted && A.volume === 0 && (A.volume = 1), a(Ae, {
-			volume: A.volume,
-			muted: A.muted
+		k && (k.currentTime = Math.min(W || e, Math.max(0, e)));
+	}, Me = S.volumeKey === void 0 ? r : S.volumeKey, K = () => {
+		k && (k.muted = !k.muted, !k.muted && k.volume === 0 && (k.volume = 1), a(Me, {
+			volume: k.volume,
+			muted: k.muted
 		}));
 	}, q = (e, t) => {
-		if (!A || x === "global" && !"kjlmKJLM".includes(t)) return !1;
+		if (!k || b === "global" && !"kjlmKJLM".includes(t)) return !1;
 		switch (e.type) {
 			case "toggle":
 				U();
 				break;
 			case "seekBy":
-				if (!k) return !1;
-				G(A.currentTime + e.seconds);
+				if (!O) return !1;
+				G(k.currentTime + e.seconds);
 				break;
 			case "mute":
 				K();
@@ -73,46 +79,46 @@ function v({ handoff: v, onExpand: _e, onClose: y, onProgress: b, progressInterv
 		return I(), !0;
 	}, J = p(q);
 	J.current = q;
-	let [Y, je] = m(null);
+	let [Y, Ne] = m(null);
 	f(() => {
-		if (!x || !Y) return;
-		let e = x === "global" ? document : Y, t = (e) => {
+		if (!b || !Y) return;
+		let e = b === "global" ? document : Y, t = (e) => {
 			let t = e;
 			if (t.defaultPrevented) return;
 			let n = i(t);
 			n && u(t.target, t.key, Y) && J.current(n, t.key) && t.preventDefault();
 		};
 		return e.addEventListener("keydown", t), () => e.removeEventListener("keydown", t);
-	}, [x, Y]);
-	let X = p("mouse"), Me = (e) => {
+	}, [b, Y]);
+	let X = p("mouse"), Pe = (e) => {
 		e.preventDefault(), X.current === "mouse" ? (U(), I()) : B && z ? L() : I();
-	}, Z = v.width && v.height ? v.width / v.height : M.aspect ?? 16 / 9, Q = typeof v.poster == "string" ? [] : t(v.poster), Ne = !O && (D === "loading" || D === "buffering"), $ = "rounded-full text-white hover:bg-white/15";
+	}, Z = v.width && v.height ? v.width / v.height : M.aspect ?? 16 / 9, Q = typeof v.poster == "string" ? [] : t(v.poster), Fe = !D && (E === "loading" || E === "buffering"), $ = "rounded-full text-white hover:bg-white/15";
 	return /* @__PURE__ */ g(ee, {
-		ref: je,
-		appearance: Ce,
+		ref: Ne,
+		appearance: Te,
 		role: "region",
-		"aria-label": S ? `${w("player.miniPlayer")}: ${S}` : w("player.miniPlayer"),
+		"aria-label": x ? `${C("player.miniPlayer")}: ${x}` : C("player.miniPlayer"),
 		"data-ckui": "mini-player",
-		"data-status": D,
-		className: _("@container fixed bottom-4 z-50 touch-manipulation overflow-hidden rounded-md bg-black text-white shadow-lg select-none", ye === "bottom-left" ? "left-4" : "right-4", xe),
+		"data-status": E,
+		className: _("@container fixed bottom-4 z-50 touch-manipulation overflow-hidden rounded-md bg-black text-white shadow-lg select-none", xe === "bottom-left" ? "left-4" : "right-4", Ce),
 		style: {
 			aspectRatio: String(Z),
 			width: `min(24rem, calc(100vw - 2rem), calc(60svh * ${Z}))`,
-			...Se
+			...we
 		},
 		onPointerDown: (e) => X.current = e.pointerType || "mouse",
 		onPointerMove: (e) => e.pointerType === "mouse" && I(),
 		onPointerLeave: (e) => e.pointerType === "mouse" && !R && z && L(),
 		children: [
 			/* @__PURE__ */ h("video", {
-				ref: Te,
+				ref: De,
 				className: "absolute inset-0 size-full object-contain",
 				playsInline: !0,
 				preload: "none",
-				crossOrigin: be,
-				"aria-label": S
+				crossOrigin: Se,
+				"aria-label": x
 			}),
-			!k && (typeof v.poster == "string" ? /* @__PURE__ */ h("img", {
+			!O && (typeof v.poster == "string" ? /* @__PURE__ */ h("img", {
 				alt: "",
 				src: v.poster,
 				className: "pointer-events-none absolute inset-0 size-full object-contain"
@@ -121,16 +127,16 @@ function v({ handoff: v, onExpand: _e, onClose: y, onProgress: b, progressInterv
 				className: "pointer-events-none absolute inset-0 size-full object-contain"
 			}) : /* @__PURE__ */ h(l, {
 				vtt: `${v.base}sprite.vtt`,
-				loader: C.loader
+				loader: S.loader
 			})),
 			/* @__PURE__ */ h("div", {
 				"aria-hidden": !0,
 				"data-ckui": "surface",
 				className: "absolute inset-0",
-				onClick: Me
+				onClick: Pe
 			}),
-			/* @__PURE__ */ h(ae, {
-				cues: k ? N : [],
+			/* @__PURE__ */ h(ie, {
+				cues: O ? N : [],
 				bottom: B ? "2.75rem" : "0.75rem"
 			}),
 			/* @__PURE__ */ g("div", {
@@ -139,16 +145,16 @@ function v({ handoff: v, onExpand: _e, onClose: y, onProgress: b, progressInterv
 				children: [
 					/* @__PURE__ */ g("div", {
 						className: "absolute inset-x-0 top-0 flex items-center justify-between p-1.5",
-						children: [/* @__PURE__ */ h(o, {
-							label: w("player.expand"),
+						children: [/* @__PURE__ */ h(s, {
+							label: C("player.expand"),
 							icon: fe,
-							onClick: Oe,
+							onClick: Ae,
 							className: $,
 							"data-ckui": "mini-expand"
-						}), /* @__PURE__ */ h(o, {
-							label: w("player.close"),
+						}), /* @__PURE__ */ h(s, {
+							label: C("player.close"),
 							icon: se,
-							onClick: ke,
+							onClick: je,
 							className: $,
 							"data-ckui": "mini-close"
 						})]
@@ -156,10 +162,10 @@ function v({ handoff: v, onExpand: _e, onClose: y, onProgress: b, progressInterv
 					/* @__PURE__ */ g("div", {
 						className: "absolute inset-0 m-auto flex h-fit w-fit items-center gap-3 @sm:gap-5",
 						children: [
-							/* @__PURE__ */ h(o, {
-								label: w("player.seekBack", { seconds: 10 }),
+							/* @__PURE__ */ h(s, {
+								label: C("player.seekBack", { seconds: 10 }),
 								icon: ce,
-								disabled: !k,
+								disabled: !O,
 								onClick: () => {
 									G(H() - 10), I();
 								},
@@ -167,24 +173,24 @@ function v({ handoff: v, onExpand: _e, onClose: y, onProgress: b, progressInterv
 							}),
 							/* @__PURE__ */ h("button", {
 								type: "button",
-								"aria-label": w(z ? "player.pause" : "player.resume"),
-								title: w(z ? "player.pause" : "player.resume"),
+								"aria-label": C(z ? "player.pause" : "player.resume"),
+								title: C(z ? "player.pause" : "player.resume"),
 								onClick: () => {
 									U(), I();
 								},
 								className: _("flex size-12 cursor-pointer items-center justify-center outline-none focus-visible:ring-2 focus-visible:ring-white/80", $),
 								"data-ckui": "mini-play",
-								children: Ne && k ? /* @__PURE__ */ h(s, { className: "size-7" }) : /* @__PURE__ */ h(he, {
+								children: Fe && O ? /* @__PURE__ */ h(oe, { className: "size-7" }) : /* @__PURE__ */ h(he, {
 									icon: z ? ue : de,
 									className: "size-7 fill-current",
 									strokeWidth: 1.5,
 									"aria-hidden": !0
 								})
 							}),
-							/* @__PURE__ */ h(o, {
-								label: w("player.seekForward", { seconds: 10 }),
+							/* @__PURE__ */ h(s, {
+								label: C("player.seekForward", { seconds: 10 }),
 								icon: le,
-								disabled: !k,
+								disabled: !O,
 								onClick: () => {
 									G(H() + 10), I();
 								},
@@ -197,8 +203,8 @@ function v({ handoff: v, onExpand: _e, onClose: y, onProgress: b, progressInterv
 						children: [/* @__PURE__ */ h("span", {
 							className: "text-xs font-medium tabular-nums",
 							children: W > 0 ? `${c(M.time || v.time)} / ${c(W)}` : c(M.time || v.time)
-						}), /* @__PURE__ */ h(o, {
-							label: M.muted ? w("player.unmute") : w("player.mute"),
+						}), /* @__PURE__ */ h(s, {
+							label: M.muted ? C("player.unmute") : C("player.mute"),
 							icon: M.muted ? me : pe,
 							onClick: K,
 							className: _($, "size-8")
@@ -208,23 +214,23 @@ function v({ handoff: v, onExpand: _e, onClose: y, onProgress: b, progressInterv
 			}),
 			/* @__PURE__ */ h("div", {
 				className: "absolute inset-x-0 bottom-0 z-10",
-				children: /* @__PURE__ */ h(oe, {
+				children: /* @__PURE__ */ h(ae, {
 					thin: !0,
 					time: M.time || v.time,
 					duration: W,
 					buffered: M.buffered,
 					onSeek: G,
-					onScrub: (e) => De(e !== null)
+					onScrub: (e) => ke(e !== null)
 				})
 			}),
-			O && /* @__PURE__ */ g("div", {
+			D && /* @__PURE__ */ g("div", {
 				role: "alert",
 				className: "absolute inset-0 z-20 flex flex-col items-center justify-center gap-2 bg-black/80 p-3 text-center text-xs",
-				children: [/* @__PURE__ */ h("p", { children: w(`player.errors.${O.kind}`) }), /* @__PURE__ */ h("button", {
+				children: [/* @__PURE__ */ h("p", { children: C(`player.errors.${D.kind}`) }), /* @__PURE__ */ h("button", {
 					type: "button",
-					onClick: E.retry,
+					onClick: T.retry,
 					className: "rounded-md bg-white/15 px-2 py-1 font-medium hover:bg-white/25",
-					children: w("player.retry")
+					children: C("player.retry")
 				})]
 			})
 		]

package/dist/components/video-mini-player.js.map

@@ -1 +1 @@
-{"version":3,"file":"video-mini-player.js","names":[],"sources":["../../src/components/video-mini-player.tsx"],"sourcesContent":["import { Cancel01Icon, GoBackward10SecIcon, GoForward10SecIcon, SquareArrowExpand01Icon, PauseIcon, PlayIcon, VolumeHighIcon, VolumeOffIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useCallback, useEffect, useRef, useState, type CSSProperties, type MouseEvent } from \"react\";\nimport type { ContentKitUiAppearance } from \"../appearance.js\";\nimport { JUMP_SEEK, PLAYER_VOLUME_KEY, playerKeyAction, writeVolume, type PlayerAction } from \"../client/player.js\";\nimport { publicRenditions } from \"../client/public.js\";\nimport { useMessages } from \"../i18n/context.js\";\nimport { useHlsPlayer, type HlsPlayerOptions } from \"../react/gallery.js\";\nimport { useActiveCues, useMediaState, useProgressReports, type PlaybackProgress } from \"../react/player.js\";\nimport { ContentKitUiRoot } from \"../scope.js\";\nimport { Captions, ControlButton, SeekBar, Spinner, clock } from \"./player-controls.js\";\nimport { RenditionImg } from \"./rendition-img.js\";\nimport { SpriteFrame, keyAllowed, type PlayerHandoff } from \"./video-player.js\";\n\nconst CONTROLS_IDLE_MS = 2500;\n\nexport interface VideoMiniPlayerProps extends Omit<HlsPlayerOptions, \"src\" | \"startAt\" | \"autoPlay\" | \"audioLanguage\" | \"subtitleLanguage\" | \"active\"> {\n  /** What VideoPlayer's onMiniPlayer handed over. */\n  handoff: PlayerHandoff;\n  /** Back to the full player, where this one is. */\n  onExpand: (state: { time: number; playing: boolean }) => void;\n  onClose: (state: { time: number }) => void;\n  onProgress?: (progress: PlaybackProgress) => void;\n  /** Milliseconds. Default 10000. */\n  progressInterval?: number;\n  /** K, J, L and M page-wide (default), every shortcut while focus is in it, or none. */\n  keyboard?: \"global\" | \"focus\" | false;\n  /** The video's title. */\n  label?: string;\n  position?: \"bottom-right\" | \"bottom-left\";\n  crossOrigin?: \"anonymous\" | \"use-credentials\";\n  className?: string;\n  style?: CSSProperties;\n  appearance?: ContentKitUiAppearance;\n}\n\n/**\n * The video docked in a corner while the viewer browses: play, ±10 s, mute,\n * a seek line, expand back to the full player and close. It starts where\n * the handoff stopped, playing if it was.\n */\nexport function VideoMiniPlayer({\n  handoff,\n  onExpand,\n  onClose,\n  onProgress,\n  progressInterval = 10_000,\n  keyboard = \"global\",\n  label,\n  position = \"bottom-right\",\n  crossOrigin,\n  className,\n  style,\n  appearance,\n  ...options\n}: VideoMiniPlayerProps) {\n  const { t } = useMessages();\n  const src = `${handoff.base}master.m3u8`;\n  const player = useHlsPlayer({\n    ...options,\n    src,\n    startAt: handoff.time,\n    autoPlay: handoff.playing,\n    audioLanguage: handoff.audioLanguage,\n    subtitleLanguage: handoff.subtitleLanguage,\n    // The handoff carries the viewer's choices; a few hundred pixels need no manual rung.\n    trackKey: null,\n    qualityKey: null,\n  });\n  const { status, error, started } = player;\n  const [video, setVideo] = useState<HTMLVideoElement | null>(null);\n  const attach = player.ref;\n  const videoRef = useCallback(\n    (el: HTMLVideoElement | null) => {\n      attach(el);\n      setVideo(el);\n    },\n    [attach],\n  );\n  const media = useMediaState(video);\n  const cues = useActiveCues(video);\n  useProgressReports(video, { enabled: started, source: started ? src : null, interval: progressInterval, onProgress });\n\n  const [poked, setPoked] = useState(true);\n  const idle = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const poke = useCallback(() => {\n    setPoked(true);\n    clearTimeout(idle.current);\n    idle.current = setTimeout(() => setPoked(false), CONTROLS_IDLE_MS);\n  }, []);\n  const hide = useCallback(() => {\n    clearTimeout(idle.current);\n    setPoked(false);\n  }, []);\n  useEffect(() => () => clearTimeout(idle.current), []);\n  const [scrubbing, setScrubbing] = useState(false);\n  const playing = !media.paused && !media.ended;\n  const shown = poked || !playing || scrubbing || !!error;\n\n  const done = useRef(false);\n  const time = () => video?.currentTime || media.time || handoff.time;\n  const expand = () => {\n    if (done.current) return;\n    done.current = true;\n    onExpand({ time: time(), playing });\n  };\n  const close = () => {\n    if (done.current) return;\n    done.current = true;\n    video?.pause();\n    onClose({ time: time() });\n  };\n  const toggle = () => {\n    if (!video) return;\n    if (!started || video.paused || video.ended) player.play();\n    else video.pause();\n  };\n  const dur = media.duration || handoff.duration || 0;\n  const seek = (to: number) => {\n    if (video) video.currentTime = Math.min(dur || to, Math.max(0, to));\n  };\n  const volumeKey = options.volumeKey === undefined ? PLAYER_VOLUME_KEY : options.volumeKey;\n  const toggleMute = () => {\n    if (!video) return;\n    video.muted = !video.muted;\n    if (!video.muted && video.volume === 0) video.volume = 1;\n    writeVolume(volumeKey, { volume: video.volume, muted: video.muted });\n  };\n\n  const run = (a: PlayerAction, key: string): boolean => {\n    if (!video) return false;\n    // Page-wide, only K, J, L and M: Space and the arrows scroll the page.\n    if (keyboard === \"global\" && !\"kjlmKJLM\".includes(key)) return false;\n    switch (a.type) {\n      case \"toggle\":\n        toggle();\n        break;\n      case \"seekBy\":\n        if (!started) return false;\n        seek(video.currentTime + a.seconds);\n        break;\n      case \"mute\":\n        toggleMute();\n        break;\n      default:\n        return false;\n    }\n    poke();\n    return true;\n  };\n  const runRef = useRef(run);\n  runRef.current = run;\n  const [root, setRoot] = useState<HTMLDivElement | null>(null);\n  useEffect(() => {\n    if (!keyboard || !root) return;\n    const on: EventTarget = keyboard === \"global\" ? document : root;\n    const down = (e: Event) => {\n      const k = e as KeyboardEvent;\n      if (k.defaultPrevented) return;\n      const action = playerKeyAction(k);\n      if (!action || !keyAllowed(k.target, k.key, root) || !runRef.current(action, k.key)) return;\n      k.preventDefault();\n    };\n    on.addEventListener(\"keydown\", down);\n    return () => on.removeEventListener(\"keydown\", down);\n  }, [keyboard, root]);\n\n  // Touch has no hover: a tap shows or hides the controls. A click plays and pauses.\n  const pointerType = useRef(\"mouse\");\n  const onSurfaceClick = (e: MouseEvent) => {\n    e.preventDefault();\n    if (pointerType.current === \"mouse\") {\n      toggle();\n      poke();\n    } else if (shown && playing) hide();\n    else poke();\n  };\n\n  const aspect = handoff.width && handoff.height ? handoff.width / handoff.height : (media.aspect ?? 16 / 9);\n  const posterOutputs = typeof handoff.poster === \"string\" ? [] : publicRenditions(handoff.poster);\n  const busy = !error && (status === \"loading\" || status === \"buffering\");\n  const overlay = \"rounded-full text-white hover:bg-white/15\";\n  return (\n    <ContentKitUiRoot\n      ref={setRoot}\n      appearance={appearance}\n      role=\"region\"\n      aria-label={label ? `${t(\"player.miniPlayer\")}: ${label}` : t(\"player.miniPlayer\")}\n      data-ckui=\"mini-player\"\n      data-status={status}\n      className={cn(\n        \"@container fixed bottom-4 z-50 touch-manipulation overflow-hidden rounded-md bg-black text-white shadow-lg select-none\",\n        position === \"bottom-left\" ? \"left-4\" : \"right-4\",\n        className,\n      )}\n      style={{ aspectRatio: String(aspect), width: `min(24rem, calc(100vw - 2rem), calc(60svh * ${aspect}))`, ...style }}\n      onPointerDown={(e) => (pointerType.current = e.pointerType || \"mouse\")}\n      onPointerMove={(e) => e.pointerType === \"mouse\" && poke()}\n      onPointerLeave={(e) => e.pointerType === \"mouse\" && !scrubbing && playing && hide()}\n    >\n      <video ref={videoRef} className=\"absolute inset-0 size-full object-contain\" playsInline preload=\"none\" crossOrigin={crossOrigin} aria-label={label} />\n      {!started &&\n        (typeof handoff.poster === \"string\" ? (\n          <img alt=\"\" src={handoff.poster} className=\"pointer-events-none absolute inset-0 size-full object-contain\" />\n        ) : posterOutputs.length ? (\n          <RenditionImg outputs={posterOutputs} className=\"pointer-events-none absolute inset-0 size-full object-contain\" />\n        ) : (\n          <SpriteFrame vtt={`${handoff.base}sprite.vtt`} loader={options.loader} />\n        ))}\n      <div aria-hidden data-ckui=\"surface\" className=\"absolute inset-0\" onClick={onSurfaceClick} />\n      <Captions cues={started ? cues : []} bottom={shown ? \"2.75rem\" : \"0.75rem\"} />\n      <div\n        data-ckui=\"controls\"\n        className={cn(\n          \"pointer-events-none absolute inset-0 bg-black/45 transition-opacity duration-200 focus-within:opacity-100 motion-reduce:transition-none\",\n          shown ? \"opacity-100 [&_button]:pointer-events-auto\" : \"opacity-0\",\n        )}\n      >\n        <div className=\"absolute inset-x-0 top-0 flex items-center justify-between p-1.5\">\n          <ControlButton label={t(\"player.expand\")} icon={SquareArrowExpand01Icon} onClick={expand} className={overlay} data-ckui=\"mini-expand\" />\n          <ControlButton label={t(\"player.close\")} icon={Cancel01Icon} onClick={close} className={overlay} data-ckui=\"mini-close\" />\n        </div>\n        <div className=\"absolute inset-0 m-auto flex h-fit w-fit items-center gap-3 @sm:gap-5\">\n          <ControlButton\n            label={t(\"player.seekBack\", { seconds: JUMP_SEEK })}\n            icon={GoBackward10SecIcon}\n            disabled={!started}\n            onClick={() => {\n              seek(time() - JUMP_SEEK);\n              poke();\n            }}\n            className={cn(overlay, \"[&_svg]:size-6\")}\n          />\n          <button\n            type=\"button\"\n            aria-label={playing ? t(\"player.pause\") : t(\"player.resume\")}\n            title={playing ? t(\"player.pause\") : t(\"player.resume\")}\n            onClick={() => {\n              toggle();\n              poke();\n            }}\n            className={cn(\"flex size-12 cursor-pointer items-center justify-center outline-none focus-visible:ring-2 focus-visible:ring-white/80\", overlay)}\n            data-ckui=\"mini-play\"\n          >\n            {busy && started ? <Spinner className=\"size-7\" /> : <HugeiconsIcon icon={playing ? PauseIcon : PlayIcon} className=\"size-7 fill-current\" strokeWidth={1.5} aria-hidden />}\n          </button>\n          <ControlButton\n            label={t(\"player.seekForward\", { seconds: JUMP_SEEK })}\n            icon={GoForward10SecIcon}\n            disabled={!started}\n            onClick={() => {\n              seek(time() + JUMP_SEEK);\n              poke();\n            }}\n            className={cn(overlay, \"[&_svg]:size-6\")}\n          />\n        </div>\n        <div className=\"absolute inset-x-0 bottom-3 flex items-center justify-between px-2.5\">\n          <span className=\"text-xs font-medium tabular-nums\">{dur > 0 ? `${clock(media.time || handoff.time)} / ${clock(dur)}` : clock(media.time || handoff.time)}</span>\n          <ControlButton label={media.muted ? t(\"player.unmute\") : t(\"player.mute\")} icon={media.muted ? VolumeOffIcon : VolumeHighIcon} onClick={toggleMute} className={cn(overlay, \"size-8\")} />\n        </div>\n      </div>\n      <div className=\"absolute inset-x-0 bottom-0 z-10\">\n        <SeekBar thin time={media.time || handoff.time} duration={dur} buffered={media.buffered} onSeek={seek} onScrub={(v) => setScrubbing(v !== null)} />\n      </div>\n      {error && (\n        <div role=\"alert\" className=\"absolute inset-0 z-20 flex flex-col items-center justify-center gap-2 bg-black/80 p-3 text-center text-xs\">\n          <p>{t(`player.errors.${error.kind}`)}</p>\n          <button type=\"button\" onClick={player.retry} className=\"rounded-md bg-white/15 px-2 py-1 font-medium hover:bg-white/25\">\n            {t(\"player.retry\")}\n          </button>\n        </div>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"video-mini-player.js","names":[],"sources":["../../src/components/video-mini-player.tsx"],"sourcesContent":["import { Cancel01Icon, GoBackward10SecIcon, GoForward10SecIcon, SquareArrowExpand01Icon, PauseIcon, PlayIcon, VolumeHighIcon, VolumeOffIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useCallback, useEffect, useRef, useState, type CSSProperties, type MouseEvent } from \"react\";\nimport type { ContentKitUiAppearance } from \"../appearance.js\";\nimport { JUMP_SEEK, PLAYER_VOLUME_KEY, playerKeyAction, writeVolume, type PlayerAction } from \"../client/player.js\";\nimport { publicRenditions } from \"../client/public.js\";\nimport { useMessages } from \"../i18n/context.js\";\nimport { useHlsPlayer, type HlsPlayerOptions } from \"../react/gallery.js\";\nimport type { ReadingEngagement } from \"../react/use-engagement.js\";\nimport { useActiveCues, useMediaState, useProgressReports, type PlaybackProgress } from \"../react/player.js\";\nimport { ContentKitUiRoot } from \"../scope.js\";\nimport { Captions, ControlButton, SeekBar, Spinner, clock } from \"./player-controls.js\";\nimport { RenditionImg } from \"./rendition-img.js\";\nimport { SpriteFrame, keyAllowed, type PlayerHandoff } from \"./video-player.js\";\n\nconst CONTROLS_IDLE_MS = 2500;\n\nexport interface VideoMiniPlayerProps extends Omit<HlsPlayerOptions, \"src\" | \"startAt\" | \"autoPlay\" | \"audioLanguage\" | \"subtitleLanguage\" | \"active\"> {\n  /** What VideoPlayer's onMiniPlayer handed over. */\n  handoff: PlayerHandoff;\n  /** Back to the full player, where this one is. */\n  onExpand: (state: { time: number; playing: boolean }) => void;\n  onClose: (state: { time: number }) => void;\n  onProgress?: (progress: PlaybackProgress) => void;\n  /** Continue actual visible playback measurements after the full player handoff. */\n  engagement?: Pick<ReadingEngagement, \"video\">;\n  /** Milliseconds. Default 10000. */\n  progressInterval?: number;\n  /** K, J, L and M page-wide (default), every shortcut while focus is in it, or none. */\n  keyboard?: \"global\" | \"focus\" | false;\n  /** The video's title. */\n  label?: string;\n  position?: \"bottom-right\" | \"bottom-left\";\n  crossOrigin?: \"anonymous\" | \"use-credentials\";\n  className?: string;\n  style?: CSSProperties;\n  appearance?: ContentKitUiAppearance;\n}\n\n/**\n * The video docked in a corner while the viewer browses: play, ±10 s, mute,\n * a seek line, expand back to the full player and close. It starts where\n * the handoff stopped, playing if it was.\n */\nexport function VideoMiniPlayer({\n  handoff,\n  onExpand,\n  onClose,\n  onProgress,\n  engagement,\n  progressInterval = 10_000,\n  keyboard = \"global\",\n  label,\n  position = \"bottom-right\",\n  crossOrigin,\n  className,\n  style,\n  appearance,\n  ...options\n}: VideoMiniPlayerProps) {\n  const { t } = useMessages();\n  const src = `${handoff.base}master.m3u8`;\n  const player = useHlsPlayer({\n    ...options,\n    src,\n    startAt: handoff.time,\n    autoPlay: handoff.playing,\n    audioLanguage: handoff.audioLanguage,\n    subtitleLanguage: handoff.subtitleLanguage,\n    // The handoff carries the viewer's choices; a few hundred pixels need no manual rung.\n    trackKey: null,\n    qualityKey: null,\n  });\n  const { status, error, started } = player;\n  const [video, setVideo] = useState<HTMLVideoElement | null>(null);\n  const attach = player.ref;\n  const videoRef = useCallback(\n    (el: HTMLVideoElement | null) => {\n      attach(el);\n      setVideo(el);\n    },\n    [attach],\n  );\n  const bindEngagement = engagement?.video;\n  useEffect(() => {\n    bindEngagement?.(started ? video : null);\n    return () => bindEngagement?.(null);\n  }, [bindEngagement, started, video]);\n  const media = useMediaState(video);\n  const cues = useActiveCues(video);\n  useProgressReports(video, { enabled: started, source: started ? src : null, interval: progressInterval, onProgress });\n\n  const [poked, setPoked] = useState(true);\n  const idle = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const poke = useCallback(() => {\n    setPoked(true);\n    clearTimeout(idle.current);\n    idle.current = setTimeout(() => setPoked(false), CONTROLS_IDLE_MS);\n  }, []);\n  const hide = useCallback(() => {\n    clearTimeout(idle.current);\n    setPoked(false);\n  }, []);\n  useEffect(() => () => clearTimeout(idle.current), []);\n  const [scrubbing, setScrubbing] = useState(false);\n  const playing = !media.paused && !media.ended;\n  const shown = poked || !playing || scrubbing || !!error;\n\n  const done = useRef(false);\n  const time = () => video?.currentTime || media.time || handoff.time;\n  const expand = () => {\n    if (done.current) return;\n    done.current = true;\n    onExpand({ time: time(), playing });\n  };\n  const close = () => {\n    if (done.current) return;\n    done.current = true;\n    video?.pause();\n    onClose({ time: time() });\n  };\n  const toggle = () => {\n    if (!video) return;\n    if (!started || video.paused || video.ended) player.play();\n    else video.pause();\n  };\n  const dur = media.duration || handoff.duration || 0;\n  const seek = (to: number) => {\n    if (video) video.currentTime = Math.min(dur || to, Math.max(0, to));\n  };\n  const volumeKey = options.volumeKey === undefined ? PLAYER_VOLUME_KEY : options.volumeKey;\n  const toggleMute = () => {\n    if (!video) return;\n    video.muted = !video.muted;\n    if (!video.muted && video.volume === 0) video.volume = 1;\n    writeVolume(volumeKey, { volume: video.volume, muted: video.muted });\n  };\n\n  const run = (a: PlayerAction, key: string): boolean => {\n    if (!video) return false;\n    // Page-wide, only K, J, L and M: Space and the arrows scroll the page.\n    if (keyboard === \"global\" && !\"kjlmKJLM\".includes(key)) return false;\n    switch (a.type) {\n      case \"toggle\":\n        toggle();\n        break;\n      case \"seekBy\":\n        if (!started) return false;\n        seek(video.currentTime + a.seconds);\n        break;\n      case \"mute\":\n        toggleMute();\n        break;\n      default:\n        return false;\n    }\n    poke();\n    return true;\n  };\n  const runRef = useRef(run);\n  runRef.current = run;\n  const [root, setRoot] = useState<HTMLDivElement | null>(null);\n  useEffect(() => {\n    if (!keyboard || !root) return;\n    const on: EventTarget = keyboard === \"global\" ? document : root;\n    const down = (e: Event) => {\n      const k = e as KeyboardEvent;\n      if (k.defaultPrevented) return;\n      const action = playerKeyAction(k);\n      if (!action || !keyAllowed(k.target, k.key, root) || !runRef.current(action, k.key)) return;\n      k.preventDefault();\n    };\n    on.addEventListener(\"keydown\", down);\n    return () => on.removeEventListener(\"keydown\", down);\n  }, [keyboard, root]);\n\n  // Touch has no hover: a tap shows or hides the controls. A click plays and pauses.\n  const pointerType = useRef(\"mouse\");\n  const onSurfaceClick = (e: MouseEvent) => {\n    e.preventDefault();\n    if (pointerType.current === \"mouse\") {\n      toggle();\n      poke();\n    } else if (shown && playing) hide();\n    else poke();\n  };\n\n  const aspect = handoff.width && handoff.height ? handoff.width / handoff.height : (media.aspect ?? 16 / 9);\n  const posterOutputs = typeof handoff.poster === \"string\" ? [] : publicRenditions(handoff.poster);\n  const busy = !error && (status === \"loading\" || status === \"buffering\");\n  const overlay = \"rounded-full text-white hover:bg-white/15\";\n  return (\n    <ContentKitUiRoot\n      ref={setRoot}\n      appearance={appearance}\n      role=\"region\"\n      aria-label={label ? `${t(\"player.miniPlayer\")}: ${label}` : t(\"player.miniPlayer\")}\n      data-ckui=\"mini-player\"\n      data-status={status}\n      className={cn(\n        \"@container fixed bottom-4 z-50 touch-manipulation overflow-hidden rounded-md bg-black text-white shadow-lg select-none\",\n        position === \"bottom-left\" ? \"left-4\" : \"right-4\",\n        className,\n      )}\n      style={{ aspectRatio: String(aspect), width: `min(24rem, calc(100vw - 2rem), calc(60svh * ${aspect}))`, ...style }}\n      onPointerDown={(e) => (pointerType.current = e.pointerType || \"mouse\")}\n      onPointerMove={(e) => e.pointerType === \"mouse\" && poke()}\n      onPointerLeave={(e) => e.pointerType === \"mouse\" && !scrubbing && playing && hide()}\n    >\n      <video ref={videoRef} className=\"absolute inset-0 size-full object-contain\" playsInline preload=\"none\" crossOrigin={crossOrigin} aria-label={label} />\n      {!started &&\n        (typeof handoff.poster === \"string\" ? (\n          <img alt=\"\" src={handoff.poster} className=\"pointer-events-none absolute inset-0 size-full object-contain\" />\n        ) : posterOutputs.length ? (\n          <RenditionImg outputs={posterOutputs} className=\"pointer-events-none absolute inset-0 size-full object-contain\" />\n        ) : (\n          <SpriteFrame vtt={`${handoff.base}sprite.vtt`} loader={options.loader} />\n        ))}\n      <div aria-hidden data-ckui=\"surface\" className=\"absolute inset-0\" onClick={onSurfaceClick} />\n      <Captions cues={started ? cues : []} bottom={shown ? \"2.75rem\" : \"0.75rem\"} />\n      <div\n        data-ckui=\"controls\"\n        className={cn(\n          \"pointer-events-none absolute inset-0 bg-black/45 transition-opacity duration-200 focus-within:opacity-100 motion-reduce:transition-none\",\n          shown ? \"opacity-100 [&_button]:pointer-events-auto\" : \"opacity-0\",\n        )}\n      >\n        <div className=\"absolute inset-x-0 top-0 flex items-center justify-between p-1.5\">\n          <ControlButton label={t(\"player.expand\")} icon={SquareArrowExpand01Icon} onClick={expand} className={overlay} data-ckui=\"mini-expand\" />\n          <ControlButton label={t(\"player.close\")} icon={Cancel01Icon} onClick={close} className={overlay} data-ckui=\"mini-close\" />\n        </div>\n        <div className=\"absolute inset-0 m-auto flex h-fit w-fit items-center gap-3 @sm:gap-5\">\n          <ControlButton\n            label={t(\"player.seekBack\", { seconds: JUMP_SEEK })}\n            icon={GoBackward10SecIcon}\n            disabled={!started}\n            onClick={() => {\n              seek(time() - JUMP_SEEK);\n              poke();\n            }}\n            className={cn(overlay, \"[&_svg]:size-6\")}\n          />\n          <button\n            type=\"button\"\n            aria-label={playing ? t(\"player.pause\") : t(\"player.resume\")}\n            title={playing ? t(\"player.pause\") : t(\"player.resume\")}\n            onClick={() => {\n              toggle();\n              poke();\n            }}\n            className={cn(\"flex size-12 cursor-pointer items-center justify-center outline-none focus-visible:ring-2 focus-visible:ring-white/80\", overlay)}\n            data-ckui=\"mini-play\"\n          >\n            {busy && started ? <Spinner className=\"size-7\" /> : <HugeiconsIcon icon={playing ? PauseIcon : PlayIcon} className=\"size-7 fill-current\" strokeWidth={1.5} aria-hidden />}\n          </button>\n          <ControlButton\n            label={t(\"player.seekForward\", { seconds: JUMP_SEEK })}\n            icon={GoForward10SecIcon}\n            disabled={!started}\n            onClick={() => {\n              seek(time() + JUMP_SEEK);\n              poke();\n            }}\n            className={cn(overlay, \"[&_svg]:size-6\")}\n          />\n        </div>\n        <div className=\"absolute inset-x-0 bottom-3 flex items-center justify-between px-2.5\">\n          <span className=\"text-xs font-medium tabular-nums\">{dur > 0 ? `${clock(media.time || handoff.time)} / ${clock(dur)}` : clock(media.time || handoff.time)}</span>\n          <ControlButton label={media.muted ? t(\"player.unmute\") : t(\"player.mute\")} icon={media.muted ? VolumeOffIcon : VolumeHighIcon} onClick={toggleMute} className={cn(overlay, \"size-8\")} />\n        </div>\n      </div>\n      <div className=\"absolute inset-x-0 bottom-0 z-10\">\n        <SeekBar thin time={media.time || handoff.time} duration={dur} buffered={media.buffered} onSeek={seek} onScrub={(v) => setScrubbing(v !== null)} />\n      </div>\n      {error && (\n        <div role=\"alert\" className=\"absolute inset-0 z-20 flex flex-col items-center justify-center gap-2 bg-black/80 p-3 text-center text-xs\">\n          <p>{t(`player.errors.${error.kind}`)}</p>\n          <button type=\"button\" onClick={player.retry} className=\"rounded-md bg-white/15 px-2 py-1 font-medium hover:bg-white/25\">\n            {t(\"player.retry\")}\n          </button>\n        </div>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import { CSSProperties, ReactNode } from 'react';
 import { ContentKitUiAppearance } from '../appearance.js';
 import { PlaybackError } from '../client/playback.js';
+import { ReadingEngagement } from '../react/use-engagement.js';
 import { PlayerTrack } from '../client/player.js';
 import { HlsPlayerOptions } from '../react/gallery.js';
 import { PlaybackProgress } from '../react/player.js';
@@ -107,6 +108,8 @@ export interface VideoPlayerProps extends Omit<HlsPlayerOptions, "src"> {
     keyboard?: "focus" | "global" | false;
     /** Resume points and watch time: every `progressInterval` of playback, and on pause, seek, end, page hide and unload. */
     onProgress?: (progress: PlaybackProgress) => void;
+    /** Measure real playback only, excluding inline previews and the poster. */
+    engagement?: Pick<ReadingEngagement, "video">;
     /** Milliseconds. Default 10000. */
     progressInterval?: number;
     onEvent?: (event: PlayerEvent) => void;
@@ -140,7 +143,7 @@ export declare function keyAllowed(target: EventTarget | null, key: string, root
  * touch gestures, resume and progress reports, and a specific error with
  * Retry and a support code.
  */
-export declare function VideoPlayer({ base, poster, width, height, duration, pending, progress, failed, layout, maxHeight, inlinePreview, previewStart, keyboard, onProgress, progressInterval, onEvent, theater, onTheaterChange, onMiniPlayer, renderDownloads, menuItems, crossOrigin, label, className, style, appearance, startAt, ...options }: VideoPlayerProps): import('react').JSX.Element;
+export declare function VideoPlayer({ base, poster, width, height, duration, pending, progress, failed, layout, maxHeight, inlinePreview, previewStart, keyboard, onProgress, engagement, progressInterval, onEvent, theater, onTheaterChange, onMiniPlayer, renderDownloads, menuItems, crossOrigin, label, className, style, appearance, startAt, ...options }: VideoPlayerProps): import('react').JSX.Element;
 /** A preview's start: the given second, else 10% in, kept a second before the end. */
 export declare function previewStartAt(start: number | undefined, duration: number | undefined): number;
 /** "2160p 4K", "1080p HD", "720p": a rung by its short side. */