@openrails/contentkit-ui 0.0.0-stage → 0.68.0

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

@@ -0,0 +1,236 @@
+import { RenditionImg as e } from "./rendition-img.js";
+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 { 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";
+import { cn as _ } from "cn";
+import { Cancel01Icon as se, GoBackward10SecIcon as ce, GoForward10SecIcon as le, PauseIcon as ue, PlayIcon as de, SquareArrowExpand01Icon as fe, VolumeHighIcon as pe, VolumeOffIcon as me } from "@hugeicons/core-free-icons";
+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,
+		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
+	});
+	let [Ee, 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 = () => {
+		V.current || (V.current = !0, _e({
+			time: H(),
+			playing: z
+		}));
+	}, ke = () => {
+		V.current || (V.current = !0, A?.pause(), y({ time: H() }));
+	}, U = () => {
+		A && (!k || A.paused || A.ended ? E.play() : A.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
+		}));
+	}, q = (e, t) => {
+		if (!A || x === "global" && !"kjlmKJLM".includes(t)) return !1;
+		switch (e.type) {
+			case "toggle":
+				U();
+				break;
+			case "seekBy":
+				if (!k) return !1;
+				G(A.currentTime + e.seconds);
+				break;
+			case "mute":
+				K();
+				break;
+			default: return !1;
+		}
+		return I(), !0;
+	}, J = p(q);
+	J.current = q;
+	let [Y, je] = m(null);
+	f(() => {
+		if (!x || !Y) return;
+		let e = x === "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) => {
+		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";
+	return /* @__PURE__ */ g(ee, {
+		ref: je,
+		appearance: Ce,
+		role: "region",
+		"aria-label": S ? `${w("player.miniPlayer")}: ${S}` : w("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),
+		style: {
+			aspectRatio: String(Z),
+			width: `min(24rem, calc(100vw - 2rem), calc(60svh * ${Z}))`,
+			...Se
+		},
+		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,
+				className: "absolute inset-0 size-full object-contain",
+				playsInline: !0,
+				preload: "none",
+				crossOrigin: be,
+				"aria-label": S
+			}),
+			!k && (typeof v.poster == "string" ? /* @__PURE__ */ h("img", {
+				alt: "",
+				src: v.poster,
+				className: "pointer-events-none absolute inset-0 size-full object-contain"
+			}) : Q.length ? /* @__PURE__ */ h(e, {
+				outputs: Q,
+				className: "pointer-events-none absolute inset-0 size-full object-contain"
+			}) : /* @__PURE__ */ h(l, {
+				vtt: `${v.base}sprite.vtt`,
+				xhrSetup: C.xhrSetup
+			})),
+			/* @__PURE__ */ h("div", {
+				"aria-hidden": !0,
+				"data-ckui": "surface",
+				className: "absolute inset-0",
+				onClick: Me
+			}),
+			/* @__PURE__ */ h(ae, {
+				cues: k ? N : [],
+				bottom: B ? "2.75rem" : "0.75rem"
+			}),
+			/* @__PURE__ */ g("div", {
+				"data-ckui": "controls",
+				className: _("pointer-events-none absolute inset-0 bg-black/45 transition-opacity duration-200 focus-within:opacity-100 motion-reduce:transition-none", B ? "opacity-100 [&_button]:pointer-events-auto" : "opacity-0"),
+				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"),
+							icon: fe,
+							onClick: Oe,
+							className: $,
+							"data-ckui": "mini-expand"
+						}), /* @__PURE__ */ h(o, {
+							label: w("player.close"),
+							icon: se,
+							onClick: ke,
+							className: $,
+							"data-ckui": "mini-close"
+						})]
+					}),
+					/* @__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 }),
+								icon: ce,
+								disabled: !k,
+								onClick: () => {
+									G(H() - 10), I();
+								},
+								className: _($, "[&_svg]:size-6")
+							}),
+							/* @__PURE__ */ h("button", {
+								type: "button",
+								"aria-label": w(z ? "player.pause" : "player.resume"),
+								title: w(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, {
+									icon: z ? ue : de,
+									className: "size-7 fill-current",
+									strokeWidth: 1.5,
+									"aria-hidden": !0
+								})
+							}),
+							/* @__PURE__ */ h(o, {
+								label: w("player.seekForward", { seconds: 10 }),
+								icon: le,
+								disabled: !k,
+								onClick: () => {
+									G(H() + 10), I();
+								},
+								className: _($, "[&_svg]:size-6")
+							})
+						]
+					}),
+					/* @__PURE__ */ g("div", {
+						className: "absolute inset-x-0 bottom-3 flex items-center justify-between px-2.5",
+						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"),
+							icon: M.muted ? me : pe,
+							onClick: K,
+							className: _($, "size-8")
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ h("div", {
+				className: "absolute inset-x-0 bottom-0 z-10",
+				children: /* @__PURE__ */ h(oe, {
+					thin: !0,
+					time: M.time || v.time,
+					duration: W,
+					buffered: M.buffered,
+					onSeek: G,
+					onScrub: (e) => De(e !== null)
+				})
+			}),
+			O && /* @__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", {
+					type: "button",
+					onClick: E.retry,
+					className: "rounded-md bg-white/15 px-2 py-1 font-medium hover:bg-white/25",
+					children: w("player.retry")
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { v as VideoMiniPlayer };
+
+//# sourceMappingURL=video-mini-player.js.map

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

@@ -0,0 +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`} xhrSetup={options.xhrSetup} />\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

@@ -0,0 +1,146 @@
+import { CSSProperties, ReactNode } from 'react';
+import { ContentKitUiAppearance } from '../appearance.js';
+import { PlaybackError } from '../client/playback.js';
+import { PlayerTrack } from '../client/player.js';
+import { HlsPlayerOptions } from '../react/gallery.js';
+import { PlaybackProgress } from '../react/player.js';
+import { PublicPreset } from '../client/public.js';
+import { EncodeProgress as Progress } from '../client/generated/wire.js';
+type XhrSetup = HlsPlayerOptions["xhrSetup"];
+/** The first frame of a video's seek sprite (sprite.vtt), fitted like object-fit. */
+export declare function SpriteFrame({ vtt, xhrSetup, fit, className }: {
+    vtt: string;
+    xhrSetup?: XhrSetup;
+    fit?: "contain" | "cover";
+    className?: string;
+}): import('react').JSX.Element | null;
+type At<T> = T extends unknown ? T & {
+    time: number;
+} : never;
+/** Playback as it happens, for analytics; never during an inline preview. */
+export type PlayerEvent = At<{
+    type: "play" | "playing" | "pause" | "waiting" | "ended";
+} | {
+    type: "seek";
+    from: number;
+} | {
+    type: "rate";
+    rate: number;
+} | {
+    type: "volume";
+    volume: number;
+    muted: boolean;
+}
+/** The viewer's quality choice; height null is Auto. */
+ | {
+    type: "quality";
+    height: number | null;
+} | {
+    type: "audio";
+    track: PlayerTrack;
+} | {
+    type: "subtitles";
+    track: PlayerTrack | null;
+} | {
+    type: "fullscreen" | "pip" | "theater";
+    on: boolean;
+} | {
+    type: "error";
+    error: PlaybackError;
+}>;
+/** Everything a VideoMiniPlayer needs to carry on where the player stopped. */
+export interface PlayerHandoff {
+    base: string;
+    time: number;
+    playing: boolean;
+    width?: number;
+    height?: number;
+    duration?: number;
+    poster?: string | PublicPreset | null;
+    audioLanguage?: string;
+    subtitleLanguage?: string | null;
+}
+/** A host entry in the settings menu: a choice (e.g. version) or an action (e.g. report a problem). */
+export type PlayerMenuItem = {
+    label: string;
+    value: string;
+    options: readonly {
+        value: string;
+        label: string;
+    }[];
+    onChange: (value: string) => void;
+} | {
+    label: string;
+    onSelect: () => void;
+};
+export interface PlayerSlotContext {
+    /** Where popups must portal to stay visible: the player while fullscreen, else undefined (the body). */
+    container?: HTMLElement;
+    /** The control buttons' class. */
+    className: string;
+}
+export interface VideoPlayerProps extends Omit<HlsPlayerOptions, "src"> {
+    /** The ladder's HLS folder (client.media.hlsBase: {media}/{kind}/{id}/hls/{dir}): master.m3u8 and sprite.vtt resolve under it. */
+    base?: string | null;
+    /** Shown until playback starts: the poster's public preset or a URL; default the first sprite frame. */
+    poster?: string | PublicPreset | null;
+    /** The video's size (read API w/h): the box is reserved before anything loads; default the decoded frame's. */
+    width?: number;
+    height?: number;
+    duration?: number;
+    /** A pending encode (an editor read's `pending` and `progress`): shows its progress instead of a player. */
+    pending?: boolean;
+    progress?: Progress | null;
+    /** Why the video cannot be encoded (an editor read's `failed.message`). */
+    failed?: string;
+    /**
+     * `frame` is as wide as its column allows at the video's aspect, never
+     * taller than `maxHeight`; `fill` fills a sized parent (a carousel slide).
+     */
+    layout?: "frame" | "fill";
+    maxHeight?: string;
+    /** Preview muted inline before play (hover, or in view on touch); default the provider's. */
+    inlinePreview?: boolean;
+    /** Where the preview starts, seconds; default 10% in. */
+    previewStart?: number;
+    /** Shortcuts while focus is in the player (default), page-wide (a watch page: one such player per page), or none. */
+    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;
+    /** Milliseconds. Default 10000. */
+    progressInterval?: number;
+    onEvent?: (event: PlayerEvent) => void;
+    /** Theater mode is the host's layout; the button shows with onTheaterChange. */
+    theater?: boolean;
+    onTheaterChange?: (theater: boolean) => void;
+    /** Shows the mini-player button: the player pauses and hands over where it was. */
+    onMiniPlayer?: (handoff: PlayerHandoff) => void;
+    /** A control-bar slot for the host's downloads. */
+    renderDownloads?: (ctx: PlayerSlotContext) => ReactNode;
+    /** Host entries in the settings menu, after its own. */
+    menuItems?: readonly PlayerMenuItem[];
+    crossOrigin?: "anonymous" | "use-credentials";
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+    appearance?: ContentKitUiAppearance;
+}
+/**
+ * Whether a shortcut key belongs to the player: never while typing or in a
+ * menu, not the arrows on a slider (it steps itself), and outside the
+ * player (page-wide shortcuts) not on another control.
+ */
+export declare function keyAllowed(target: EventTarget | null, key: string, root: Element): boolean;
+/**
+ * An HLS player that never spins forever: poster and play control, its own
+ * controls (seek with sprite preview, volume, subtitles, audio, quality,
+ * speed, picture-in-picture, theater, fullscreen, mini player), shortcuts,
+ * 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;
+/** 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. */
+export declare function qualityLabel(height: number): string;
+export {};