@dataimago/ui 0.1.0-alpha.42 → 0.1.0-alpha.43

package/README.md

@@ -21,7 +21,7 @@ Current public exports:
 - `<Logo>` — manifest-driven mark renderer backed by `@dataimago/brand`.
 - `<BrandAnimation>` — decorative brand animation with reduced-motion poster fallback.
 - `<NavbarLogo>` — animated navbar mark with reduced-motion poster fallback.
-- `<CaptionedVideo>` — a video with the video-foundry's caption treatment drawn over it (frosted panel, word tone, MathML), from a release's `captions.<lang>.json`; the WebVTT file stays as the hidden native track and the fallback text. Fullscreen takes the whole player so the captions come along. `<CaptionLayer>` draws one moment of it (pure presentation), and the caption functions (`pageAt`, `wordTone`, `captionLook`, …) match the foundry's burned-in treatment (the foundry imports them once this ships; #407). Needs `@dataimago/css` loaded for the palette, `--font-family-sans` and the self-hosted Noto Sans Math.
+- `<CaptionedVideo>` — a video with the video-foundry's caption treatment drawn over it (frosted panel, word tone, MathML), from a release's `captions.<lang>.json`; the WebVTT file stays as the hidden native track and the fallback text. Fullscreen takes the whole player so the captions come along. `<CaptionLayer>` draws one moment of it (pure presentation), and the caption functions (`pageAt`, `wordTone`, `captionLook`, …) match the foundry's burned-in treatment (the foundry imports them once this ships; #407). Needs `@dataimago/css` loaded for the palette, `--font-family-sans` and the self-hosted Noto Sans Math. `poster` is required and nothing autoplays. Under `prefers-reduced-motion: reduce` the player plays `reducedSrc` if given; otherwise it says the video is animated throughout and offers `storyboard` (a link) first, and plays the full cut only if the reader chooses it.
 
 ```tsx
 <CaptionedVideo

package/dist/index.cjs

@@ -924,7 +924,7 @@ function cueLines(cue) {
 var CONTROLS_HOLD_MS = 2500;
 var CONTROLS_HEIGHT = 56;
 var usePrefersReducedMotion3 = () => {
-  const [reduced, setReduced] = (0, import_react2.useState)(true);
+  const [reduced, setReduced] = (0, import_react2.useState)(null);
   (0, import_react2.useEffect)(() => {
     const q = window.matchMedia?.("(prefers-reduced-motion: reduce)");
     if (!q) {
@@ -938,6 +938,37 @@ var usePrefersReducedMotion3 = () => {
   }, []);
   return reduced;
 };
+var linkStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  minWidth: 48,
+  minHeight: 48,
+  padding: "0 8px",
+  color: "var(--color-palette-ink-900)",
+  textUnderlineOffset: "0.2em"
+};
+var videoOnlyFullscreen = () => typeof navigator !== "undefined" && /iPhone|iPod/.test(navigator.userAgent);
+var gateStyle = {
+  position: "absolute",
+  left: "50%",
+  top: "50%",
+  transform: "translate(-50%, -50%)",
+  maxWidth: "min(90%, 26rem)",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 10,
+  padding: "14px 18px",
+  textAlign: "center",
+  fontFamily: "var(--font-family-sans)",
+  fontSize: 15,
+  lineHeight: 1.4,
+  color: "var(--color-palette-ink-900)",
+  background: "var(--color-palette-stone-50)",
+  border: "1px solid var(--color-palette-ink-200)",
+  borderRadius: 6
+};
 var buttonStyle = {
   font: "inherit",
   fontFamily: "var(--font-family-sans)",
@@ -976,6 +1007,8 @@ var CaptionedVideo = ({
   captions,
   fallbackCaptions,
   chapters,
+  reducedSrc,
+  storyboard,
   title,
   lang = "en",
   className,
@@ -996,7 +1029,12 @@ var CaptionedVideo = ({
   const [paused, setPaused] = (0, import_react2.useState)(true);
   const [active, setActive] = (0, import_react2.useState)(false);
   const [focusWithin, setFocusWithin] = (0, import_react2.useState)(false);
-  const reducedMotion = usePrefersReducedMotion3();
+  const prefersReduced = usePrefersReducedMotion3();
+  const reducedMotion = prefersReduced !== false;
+  const [chosen, setChosen] = (0, import_react2.useState)(false);
+  const noticeId = (0, import_react2.useId)();
+  const gated = prefersReduced === true && !reducedSrc && !chosen;
+  const videoSrc = prefersReduced && reducedSrc ? reducedSrc : prefersReduced === null && reducedSrc ? void 0 : src;
   (0, import_react2.useEffect)(() => setOn(readCaptionsChoice()), []);
   (0, import_react2.useEffect)(() => {
     let live = true;
@@ -1051,7 +1089,7 @@ var CaptionedVideo = ({
       cancelAnimationFrame(raf);
       for (const e of events) v.removeEventListener(e, sync);
     };
-  }, [src]);
+  }, [videoSrc]);
   (0, import_react2.useEffect)(() => {
     const el = stageRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
@@ -1126,21 +1164,32 @@ var CaptionedVideo = ({
     holdRef.current = window.setTimeout(() => setActive(false), CONTROLS_HOLD_MS);
   }, []);
   (0, import_react2.useEffect)(() => () => window.clearTimeout(holdRef.current), []);
+  (0, import_react2.useEffect)(() => {
+    const v = videoRef.current;
+    if (!v) return;
+    v.addEventListener("play", wake);
+    return () => v.removeEventListener("play", wake);
+  }, [wake]);
   const toggleCaptions = (0, import_react2.useCallback)(() => setOn((x) => {
     writeCaptionsChoice(!x);
     return !x;
   }), []);
   const toggleFullscreen = (0, import_react2.useCallback)(() => {
-    const wrap = wrapRef.current, v = videoRef.current;
+    const wrap = wrapRef.current;
+    const v = videoRef.current;
     if (document.fullscreenElement === wrap) {
       void document.exitFullscreen();
       return;
     }
-    if (wrap?.requestFullscreen) {
-      wrap.requestFullscreen().catch(() => v?.webkitEnterFullscreen?.());
+    if (v?.webkitDisplayingFullscreen) {
+      v.webkitExitFullscreen?.();
+      return;
+    }
+    if (!wrap?.requestFullscreen || !document.fullscreenEnabled || videoOnlyFullscreen()) {
+      v?.webkitEnterFullscreen?.();
       return;
     }
-    v?.webkitEnterFullscreen?.();
+    wrap.requestFullscreen().catch(() => v?.webkitEnterFullscreen?.());
   }, []);
   const onKey = (e) => {
     const t = e.target;
@@ -1164,6 +1213,7 @@ var CaptionedVideo = ({
       ref: wrapRef,
       className,
       onPointerMove: wake,
+      onPointerDown: wake,
       onFocus: () => {
         setFocusWithin(true);
         wake();
@@ -1185,14 +1235,15 @@ var CaptionedVideo = ({
           "video",
           {
             ref: videoRef,
-            src,
+            src: videoSrc,
             poster,
-            controls: true,
+            controls: !gated,
             controlsList: "nofullscreen",
             "data-dataimago-captioned-video": "",
             playsInline: true,
             preload: "metadata",
             "aria-label": title,
+            "aria-hidden": gated || void 0,
             style: { display: "block", width: "100%", height: "100%" },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("track", { ref: trackRef, kind: "captions", src: fallbackCaptions, srcLang: lang, label: "Captions", default: true }),
@@ -1211,11 +1262,28 @@ var CaptionedVideo = ({
             page: track ? void 0 : cue
           }
         ) : null,
+        gated ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { role: "group", "aria-labelledby": noticeId, style: gateStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { id: noticeId, style: { margin: 0 }, children: "This video is animated throughout." }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "button",
+            {
+              type: "button",
+              style: { ...buttonStyle, pointerEvents: "auto" },
+              onClick: () => {
+                setChosen(true);
+                void videoRef.current?.play().catch(() => {
+                });
+              },
+              children: "Play the video"
+            }
+          ),
+          storyboard ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("a", { href: storyboard, style: linkStyle, children: "View the storyboard instead" }) : null
+        ] }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: {
           position: "absolute",
           top: 8,
           right: 8,
-          display: "flex",
+          display: gated ? "none" : "flex",
           gap: 6,
           pointerEvents: "none",
           // hidden once faded: an invisible button must not take a click or a Tab stop