@banou/media-player 0.10.16 → 0.10.17

package/README.md

@@ -158,6 +158,10 @@ an offer to skip an opening or ending, volume on a log curve, mute, playback spe
 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.
 
+The shortcuts (Space or `k`, `f`, `m`, the arrow keys) listen on the whole page. Pass `shortcuts="player"` for a
+player among other content: a key then acts only from inside the player (a click on the picture puts the focus
+there) or while it is fullscreen, and Space and the arrows keep scrolling the page everywhere else.
+
 ### Chapters
 
 Chapters come from the container, and the seekbar draws them as segments with a break at each

package/dist/index.js

@@ -2252,82 +2252,90 @@ ${gt}
       }
     }
   }
-`, Vt = () => {
-	let e = G(), t = G((e) => e.paused), n = G((e) => e.currentTime), r = G((e) => e.duration), i = G((e) => e.seekingTo), a = G((e) => e.fullscreen), o = G((e) => e.hideUI), s = G((e) => e.togglePictureInPicture), c = G((e) => e.pictureInPictureMode), l = G((e) => e.burnedInSubtitles), f = G((e) => e.passThroughPictureInPicture), h = G((e) => e.subtitleTracks), g = G((e) => e.requestSeek), [_, v] = m(null), y = p(null), b = p(void 0), x = c === "burn-in", S = h.length > 0, C = r > 0 && n === r, w = u(({ direction: t, stepSize: n }) => {
-		let r = Ne(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
-		e.setVolume(Me(a)), o && !e.muted && e.toggleMuted();
-	}, [e]);
+`, Vt = ({ shortcuts: e = "window", root: t }) => {
+	let n = G(), r = G((e) => e.paused), i = G((e) => e.currentTime), a = G((e) => e.duration), o = G((e) => e.seekingTo), s = G((e) => e.fullscreen), c = G((e) => e.hideUI), l = G((e) => e.togglePictureInPicture), f = G((e) => e.pictureInPictureMode), h = G((e) => e.burnedInSubtitles), g = G((e) => e.passThroughPictureInPicture), _ = G((e) => e.subtitleTracks), v = G((e) => e.requestSeek), [y, b] = m(null), x = p(null), S = p(void 0), C = f === "burn-in", w = _.length > 0, D = a > 0 && i === a, O = u(({ direction: e, stepSize: t }) => {
+		let r = Ne(n.volume), i = e === "up" ? t : -t, a = Math.max(0, Math.min(1, r + i)), o = n.muted;
+		n.setVolume(Me(a)), o && !n.muted && n.toggleMuted();
+	}, [n]), k = p(!1);
 	d(() => {
-		let t = (t) => g ? g(t) : e.seek(t), n = (n) => {
-			let r = n.target;
-			if (r?.isContentEditable || /^(input|textarea|select)$/i.test(r?.tagName ?? "")) return;
-			let i = !0;
-			if (n.key === "f") e.toggleFullscreen();
-			else if (n.key === "k") e.togglePaused();
-			else if (n.key === " ") e.togglePaused();
-			else if (n.key === "m") e.toggleMuted();
-			else if (n.key === "ArrowUp") w({
+		let r = (e) => v ? v(e) : n.seek(e), i = (e) => e.composedPath()[0], a = (e) => {
+			k.current = !!t.current?.contains(i(e) ?? null);
+		}, o = (a) => {
+			let o = i(a);
+			if (o?.isContentEditable || /^(input|textarea|select)$/i.test(o?.tagName ?? "")) return;
+			let s = t.current?.contains(o ?? null) || o === document.body && k.current;
+			if (e === "player" && !n.fullscreen && !s) return;
+			let c = !0;
+			if (a.key === "f") n.toggleFullscreen();
+			else if (a.key === "k") n.togglePaused();
+			else if (a.key === " ") n.togglePaused();
+			else if (a.key === "m") n.toggleMuted();
+			else if (a.key === "ArrowUp") O({
 				direction: "up",
 				stepSize: It
 			});
-			else if (n.key === "ArrowDown") w({
+			else if (a.key === "ArrowDown") O({
 				direction: "down",
 				stepSize: It
 			});
-			else if (n.key === "ArrowRight") {
-				if (!e.duration) return;
-				t(Math.min(e.currentTime + Lt, e.duration));
-			} else n.key === "ArrowLeft" ? t(Math.max(e.currentTime - Lt, 0)) : i = !1;
-			i && n.preventDefault();
+			else if (a.key === "ArrowRight") {
+				if (!n.duration) return;
+				r(Math.min(n.currentTime + Lt, n.duration));
+			} else a.key === "ArrowLeft" ? r(Math.max(n.currentTime - Lt, 0)) : c = !1;
+			c && a.preventDefault();
+		};
+		return window.addEventListener("keydown", o), window.addEventListener("pointerdown", a, !0), window.addEventListener("focusin", a, !0), () => {
+			window.removeEventListener("keydown", o), window.removeEventListener("pointerdown", a, !0), window.removeEventListener("focusin", a, !0);
 		};
-		return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
 	}, [
+		n,
+		O,
+		v,
 		e,
-		w,
-		g
+		t
 	]);
-	let D = u((e) => {
-		e.preventDefault(), e.deltaY < 0 ? w({
+	let A = u((e) => {
+		e.preventDefault(), e.deltaY < 0 ? O({
 			direction: "up",
 			stepSize: It
-		}) : w({
+		}) : O({
 			direction: "down",
 			stepSize: It
 		});
-	}, [w]);
+	}, [O]);
 	d(() => {
-		if (_) return _.addEventListener("wheel", D, { passive: !1 }), () => _.removeEventListener("wheel", D);
-	}, [_, D]);
-	let O = (e) => {
-		if (!f || f.active || f.armed || e.pointerType === "touch") return;
+		if (y) return y.addEventListener("wheel", A, { passive: !1 }), () => y.removeEventListener("wheel", A);
+	}, [y, A]);
+	let j = (e) => {
+		if (!g || g.active || g.armed || e.pointerType === "touch") return;
 		let { left: t, top: n, width: r, height: i } = e.currentTarget.getBoundingClientRect();
-		f.arm({
+		g.arm({
 			left: t,
 			top: n,
 			width: r,
 			height: i
 		});
-	}, k = !!f?.armed;
+	}, M = !!g?.armed;
 	return d(() => {
-		if (!k) return;
-		clearInterval(b.current);
+		if (!M) return;
+		clearInterval(S.current);
 		let e = Infinity, t = setInterval(() => {
 			if (Date.now() > e) {
 				clearInterval(t);
 				return;
 			}
-			let n = y.current, r = document.activeElement;
+			let n = x.current, r = document.activeElement;
 			n && r?.tagName === "IFRAME" && r.closest(".video")?.parentElement?.contains(n) && n.focus({ preventScroll: !0 });
 		}, Rt);
-		return b.current = t, () => {
+		return S.current = t, () => {
 			e = Date.now() + zt;
 		};
-	}, [k]), d(() => () => clearInterval(b.current), []), /* @__PURE__ */ E("div", {
+	}, [M]), d(() => () => clearInterval(S.current), []), /* @__PURE__ */ E("div", {
 		css: Bt,
-		style: { ...o ? {
+		style: { ...c ? {
 			opacity: "0",
 			pointerEvents: "none"
-		} : k ? { pointerEvents: "none" } : {} },
+		} : M ? { pointerEvents: "none" } : {} },
 		children: [/* @__PURE__ */ T(dt, {}), /* @__PURE__ */ E("div", {
 			className: "actions",
 			children: [/* @__PURE__ */ E("div", {
@@ -2339,16 +2347,16 @@ ${gt}
 						text: /* @__PURE__ */ T("button", {
 							className: "play",
 							type: "button",
-							onClick: () => e.togglePaused(),
-							"aria-label": C ? "Replay" : t ? "Play" : "Pause",
-							children: T(C ? L : t ? I : F, {})
+							onClick: () => n.togglePaused(),
+							"aria-label": D ? "Replay" : r ? "Play" : "Pause",
+							children: T(D ? L : r ? I : F, {})
 						}),
-						toolTipText: /* @__PURE__ */ T("span", { children: C ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
+						toolTipText: /* @__PURE__ */ T("span", { children: D ? "Replay (k)" : r ? "Play (k)" : "Pause (k)" })
 					}),
-					/* @__PURE__ */ T(Ft, { ref: v }),
+					/* @__PURE__ */ T(Ft, { ref: b }),
 					/* @__PURE__ */ T("div", {
 						className: "time",
-						children: Fe(i ?? n, r)
+						children: Fe(o ?? i, a)
 					})
 				]
 			}), /* @__PURE__ */ E("div", {
@@ -2357,40 +2365,40 @@ ${gt}
 					/* @__PURE__ */ T(wt, {}),
 					/* @__PURE__ */ T(At, {}),
 					/* @__PURE__ */ T(Ot, {}),
-					f ? /* @__PURE__ */ T($, {
+					g ? /* @__PURE__ */ T($, {
 						id: "picture-in-picture",
 						tooltipPlace: "top-end",
 						text: /* @__PURE__ */ T("button", {
-							ref: y,
-							className: f.armed ? "picture-in-picture armed" : "picture-in-picture",
+							ref: x,
+							className: g.armed ? "picture-in-picture armed" : "picture-in-picture",
 							type: "button",
-							onPointerEnter: O,
-							onPointerMove: O,
-							onClick: f.active ? f.exit : void 0,
+							onPointerEnter: j,
+							onPointerMove: j,
+							onClick: g.active ? g.exit : void 0,
 							"aria-label": "Picture in picture",
-							"aria-pressed": f.active,
+							"aria-pressed": g.active,
 							children: /* @__PURE__ */ T("img", {
 								src: ft,
 								alt: ""
 							})
 						}),
-						toolTipText: /* @__PURE__ */ T("span", { children: f.active ? "Exit picture in picture" : "Picture in picture" })
-					}) : s ? /* @__PURE__ */ T($, {
+						toolTipText: /* @__PURE__ */ T("span", { children: g.active ? "Exit picture in picture" : "Picture in picture" })
+					}) : l ? /* @__PURE__ */ T($, {
 						id: "picture-in-picture",
 						tooltipPlace: "top-end",
 						text: /* @__PURE__ */ T("button", {
 							className: "picture-in-picture",
 							type: "button",
-							onClick: s,
-							disabled: x && !S,
-							"aria-label": x ? "Put the subtitles in the video" : "Picture in picture",
-							"aria-pressed": x ? l : void 0,
-							children: x ? T(l ? mt : ht, {}) : /* @__PURE__ */ T("img", {
+							onClick: l,
+							disabled: C && !w,
+							"aria-label": C ? "Put the subtitles in the video" : "Picture in picture",
+							"aria-pressed": C ? h : void 0,
+							children: C ? T(h ? mt : ht, {}) : /* @__PURE__ */ T("img", {
 								src: ft,
 								alt: ""
 							})
 						}),
-						toolTipText: /* @__PURE__ */ T("span", { children: x ? S ? l ? "Subtitles are in the picture" : "Put the subtitles in the picture" : "This file has no subtitles" : "Picture in picture" })
+						toolTipText: /* @__PURE__ */ T("span", { children: C ? w ? h ? "Subtitles are in the picture" : "Put the subtitles in the picture" : "This file has no subtitles" : "Picture in picture" })
 					}) : null,
 					/* @__PURE__ */ T($, {
 						id: "full-screen",
@@ -2398,12 +2406,12 @@ ${gt}
 						text: /* @__PURE__ */ T("button", {
 							className: "full-screen",
 							type: "button",
-							onClick: () => e.toggleFullscreen(),
+							onClick: () => n.toggleFullscreen(),
 							"aria-label": "Full screen",
-							"aria-pressed": a,
-							children: T(a ? P : N, {})
+							"aria-pressed": s,
+							children: T(s ? P : N, {})
 						}),
-						toolTipText: /* @__PURE__ */ T("span", { children: a ? "Exit full screen (f)" : "Full screen (f)" })
+						toolTipText: /* @__PURE__ */ T("span", { children: s ? "Exit full screen (f)" : "Full screen (f)" })
 					})
 				]
 			})]
@@ -2594,6 +2602,9 @@ ${gt}
   align-items: center;
   height: 100%;
   width: 100%;
+  /* focusable with shortcuts='player', and the first key after a click on the picture would otherwise
+     ring the whole player as :focus-visible */
+  outline: none;
 
   & > div:not(:last-of-type) {
     position: absolute;
@@ -2646,85 +2657,89 @@ ${gt}
 		key: r,
 		item: e
 	}];
-}), nn = ({ ref: e, onVideoRef: t, onSubtitleRef: n, overlay: r, controls: i, children: a }) => {
-	let o = G(), s = G((e) => e.hideUI), c = G((e) => e.setHideUI), l = G((e) => e.hasMedia), u = G((e) => e.passThroughPictureInPicture), f = p(void 0), m = p("mouse"), h = p({
+}), nn = ({ ref: e, onVideoRef: t, onSubtitleRef: n, overlay: r, controls: i, shortcuts: a, children: o }) => {
+	let s = G(), c = G((e) => e.hideUI), l = G((e) => e.setHideUI), u = G((e) => e.hasMedia), f = G((e) => e.passThroughPictureInPicture), m = p(void 0), h = p("mouse"), g = p({
 		x: -1,
 		y: -1
-	}), g = p(null);
-	d(() => () => clearTimeout(f.current), []), d(() => {
-		l || (clearTimeout(f.current), c(!1));
-	}, [l, c]);
-	let _ = () => {
-		l && c(!0);
-	}, v = (t) => {
-		g.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
-	}, y = () => {
-		if (o.passThroughPictureInPicture?.armed) return !0;
-		if (m.current !== "mouse") return !1;
-		let { x: e, y: t } = h.current;
-		if (!g.current || e < 0) return !1;
-		let n = document.elementFromPoint(e, t);
-		return !!n && g.current.contains(n) && !n.closest(".video");
+	}), _ = p(null);
+	d(() => () => clearTimeout(m.current), []), d(() => {
+		u || (clearTimeout(m.current), l(!1));
+	}, [u, l]);
+	let v = () => {
+		u && l(!0);
+	}, y = (t) => {
+		_.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
 	}, b = () => {
-		if (y()) {
-			f.current = setTimeout(b, Zt);
+		if (s.passThroughPictureInPicture?.armed) return !0;
+		if (h.current !== "mouse") return !1;
+		let { x: e, y: t } = g.current;
+		if (!_.current || e < 0) return !1;
+		let n = document.elementFromPoint(e, t);
+		return !!n && _.current.contains(n) && !n.closest(".video");
+	}, x = () => {
+		if (b()) {
+			m.current = setTimeout(x, Zt);
 			return;
 		}
-		_();
-	}, x = () => {
-		c(!1), clearTimeout(f.current), f.current = setTimeout(b, Zt);
+		v();
+	}, S = () => {
+		l(!1), clearTimeout(m.current), m.current = setTimeout(x, Zt);
 	};
 	return /* @__PURE__ */ E("div", {
 		css: en,
-		ref: v,
+		ref: y,
 		onPointerMove: (e) => {
-			m.current = e.pointerType, e.pointerType === "mouse" && (h.current = {
+			h.current = e.pointerType, e.pointerType === "mouse" && (g.current = {
 				x: e.clientX,
 				y: e.clientY
-			}, x());
+			}, S());
 		},
 		onPointerDown: (e) => {
-			m.current = e.pointerType;
+			h.current = e.pointerType;
 		},
 		onMouseOut: (e) => {
 			let t = e.relatedTarget;
 			if (t && e.currentTarget.contains(t)) return;
 			let { left: n, right: r, top: i, bottom: a } = e.currentTarget.getBoundingClientRect();
-			e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(f.current), _());
+			e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(m.current), v());
 		},
-		className: s ? "hide" : "",
+		className: c ? "hide" : "",
+		tabIndex: a === "player" ? -1 : void 0,
 		children: [
 			/* @__PURE__ */ T(ke, { onSubtitleRef: n }),
 			tn(r).map(({ key: e, item: t }) => /* @__PURE__ */ T("div", {
 				css: Qt,
-				style: { ...s ? {
+				style: { ...c ? {
 					opacity: "0",
 					visibility: "hidden",
 					pointerEvents: "none"
 				} : {} },
 				children: t
 			}, e)),
-			i === !1 ? null : /* @__PURE__ */ T(Vt, {}),
+			i === !1 ? null : /* @__PURE__ */ T(Vt, {
+				shortcuts: a,
+				root: _
+			}),
 			/* @__PURE__ */ T(Wt, {}),
 			/* @__PURE__ */ T(Xt, {}),
-			u?.armed && g.current ? /* @__PURE__ */ T("div", {
+			f?.armed && _.current ? /* @__PURE__ */ T("div", {
 				className: "pass-through",
-				style: { clipPath: $t(u.armed, g.current.getBoundingClientRect()) },
-				onPointerOver: u.disarm
+				style: { clipPath: $t(f.armed, _.current.getBoundingClientRect()) },
+				onPointerOver: f.disarm
 			}) : null,
 			/* @__PURE__ */ E("div", {
 				className: "video",
 				onClick: () => {
-					if (m.current === "mouse") {
-						o.togglePaused();
+					if (h.current === "mouse") {
+						s.togglePaused();
 						return;
 					}
-					s ? x() : (clearTimeout(f.current), _());
+					c ? S() : (clearTimeout(m.current), v());
 				},
 				children: [t ? /* @__PURE__ */ T("video", {
 					ref: t,
 					playsInline: !0
-				}) : null, a]
+				}) : null, o]
 			})
 		]
 	});
@@ -2839,6 +2854,7 @@ ${gt}
 		onSubtitleRef: w,
 		overlay: e.overlay,
 		controls: e.controls,
+		shortcuts: e.shortcuts,
 		children: t
 	});
 }, an = g`

package/dist/react/components/chrome.d.ts

@@ -8,7 +8,8 @@ export type ChromeProps = {
     overlay?: ReactNode;
     /** False draws no control bar at all, leaving the picture, the title and the overlay. */
     controls?: boolean;
+    shortcuts?: 'window' | 'player';
     children?: ReactNode;
 };
-export declare const Chrome: ({ ref, onVideoRef, onSubtitleRef, overlay, controls, children }: ChromeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Chrome: ({ ref, onVideoRef, onSubtitleRef, overlay, controls, shortcuts, children }: ChromeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Chrome;

package/dist/react/components/control-bar.d.ts

@@ -1,2 +1,6 @@
-export declare const ControlBar: () => import("@emotion/react/jsx-runtime").JSX.Element;
+import type { RefObject } from 'react';
+export declare const ControlBar: ({ shortcuts, root }: {
+    shortcuts?: 'window' | 'player';
+    root: RefObject<HTMLDivElement | null>;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default ControlBar;

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

@@ -59,6 +59,13 @@ type CommonOptions = {
      * store's `attach` and does nothing at all until a media arrives.
      */
     controls?: boolean;
+    /**
+     * Where the keyboard shortcuts listen. `'window'`, the default, takes keys from the whole page, which suits a
+     * page that is only the player. `'player'` takes a key only when the focus is inside the player (a click on the
+     * picture puts it there), or nothing has the focus and the last click or focus was in the player, or the player
+     * is fullscreen, so Space and the arrow keys keep scrolling the page and pressing its buttons everywhere else.
+     */
+    shortcuts?: 'window' | 'player';
     /**
      * The app's own content over the video: a download readout, a badge, a logo, anything the player
      * itself has no opinion about.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.10.16",
+  "version": "0.10.17",
   "description": "A video player for containers and codecs the browser cannot play natively, remuxed on the fly",
   "type": "module",
   "main": "dist/index.js",

package/src/lib/react/components/chrome.tsx

@@ -52,6 +52,9 @@ const style = css`
   align-items: center;
   height: 100%;
   width: 100%;
+  /* focusable with shortcuts='player', and the first key after a click on the picture would otherwise
+     ring the whole player as :focus-visible */
+  outline: none;
 
   & > div:not(:last-of-type) {
     position: absolute;
@@ -129,10 +132,11 @@ export type ChromeProps = {
   overlay?: ReactNode
   /** False draws no control bar at all, leaving the picture, the title and the overlay. */
   controls?: boolean
+  shortcuts?: 'window' | 'player'
   children?: ReactNode
 }
 
-export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, children }: ChromeProps) => {
+export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, shortcuts, children }: ChromeProps) => {
   const player = usePlayer()
   const hideUI = usePlayer((state) => state.hideUI)
   const setHideUI = usePlayer((state) => state.setHideUI)
@@ -264,6 +268,8 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, chil
       onPointerDown={onPointerDown}
       onMouseOut={onMouseOut}
       className={hideUI ? 'hide' : ''}
+      // focusable, so a click on the picture puts the focus, and with it the shortcuts, inside the player
+      tabIndex={shortcuts === 'player' ? -1 : undefined}
     >
       <Overlay onSubtitleRef={onSubtitleRef} />
       {overlayItems(overlay).map(({ key, item }) => (
@@ -275,7 +281,7 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, chil
           {item}
         </div>
       ))}
-      {controls === false ? null : <ControlBar />}
+      {controls === false ? null : <ControlBar shortcuts={shortcuts} root={root} />}
       {/* Not tied to `hideUI`: it says what to do next, and it is on screen for nine seconds. */}
       <BurnInHint />
       <SkipChapter />

package/src/lib/react/components/control-bar.tsx

@@ -1,4 +1,6 @@
 /// <reference types="@emotion/react/types/css-prop" />
+import type { RefObject } from 'react'
+
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { css } from '@emotion/react'
 import { Maximize, Minimize, Pause, Play, RotateCcw } from 'lucide-react'
@@ -157,7 +159,9 @@ const style = css`
   }
 `
 
-export const ControlBar = () => {
+export const ControlBar = (
+  { shortcuts = 'window', root }: { shortcuts?: 'window' | 'player', root: RefObject<HTMLDivElement | null> },
+) => {
   const player = usePlayer()
   const paused = usePlayer((state) => state.paused)
   const currentTime = usePlayer((state) => state.currentTime)
@@ -198,12 +202,21 @@ export const ControlBar = () => {
     if (wasMuted && !player.muted) player.toggleMuted()
   }, [player])
 
+  // whether the last press or focus on the page landed in the player: a focused control that goes away (Skip
+  // Opening, once pressed) leaves the focus on the body, and the shortcuts stay with the player through that
+  const engaged = useRef(false)
+
   useEffect(() => {
     const seek = (time: number) => requestSeek ? requestSeek(time) : player.seek(time)
+    // the path, not ev.target, which a shadow root around the player retargets to its host
+    const targetOf = (ev: Event) => ev.composedPath()[0] as HTMLElement | undefined
+    const engage = (ev: Event) => { engaged.current = !!root.current?.contains(targetOf(ev) ?? null) }
     const eventListener = (ev: KeyboardEvent) => {
-      // on the window, so typing into a consumer's own input is the one case that opts out
-      const target = ev.target as HTMLElement | null
+      // on the window, so typing into a consumer's own input opts out
+      const target = targetOf(ev)
       if (target?.isContentEditable || /^(input|textarea|select)$/i.test(target?.tagName ?? '')) return
+      const fromPlayer = root.current?.contains(target ?? null) || (target === document.body && engaged.current)
+      if (shortcuts === 'player' && !player.fullscreen && !fromPlayer) return
 
       let shouldPreventDefault = true
       // space would otherwise reach the browser's own shortcut
@@ -233,8 +246,14 @@ export const ControlBar = () => {
       }
     }
     window.addEventListener('keydown', eventListener)
-    return () => window.removeEventListener('keydown', eventListener)
-  }, [player, modifyVolume, requestSeek])
+    window.addEventListener('pointerdown', engage, true)
+    window.addEventListener('focusin', engage, true)
+    return () => {
+      window.removeEventListener('keydown', eventListener)
+      window.removeEventListener('pointerdown', engage, true)
+      window.removeEventListener('focusin', engage, true)
+    }
+  }, [player, modifyVolume, requestSeek, shortcuts, root])
 
   const handleWheel = useCallback((e: WheelEvent) => {
     e.preventDefault()

package/src/lib/react/video-player.tsx

@@ -73,6 +73,14 @@ type CommonOptions = {
    */
   controls?: boolean
 
+  /**
+   * Where the keyboard shortcuts listen. `'window'`, the default, takes keys from the whole page, which suits a
+   * page that is only the player. `'player'` takes a key only when the focus is inside the player (a click on the
+   * picture puts it there), or nothing has the focus and the last click or focus was in the player, or the player
+   * is fullscreen, so Space and the arrow keys keep scrolling the page and pressing its buttons everywhere else.
+   */
+  shortcuts?: 'window' | 'player'
+
   /**
    * The app's own content over the video: a download readout, a badge, a logo, anything the player
    * itself has no opinion about.
@@ -411,6 +419,7 @@ const PlayerRoot = ({ options, children }: { options: MediaPlayerOptions, childr
       onSubtitleRef={setSubtitleLayer}
       overlay={options.overlay}
       controls={options.controls}
+      shortcuts={options.shortcuts}
     >
       {children}
     </Chrome>