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

package/dist/index.js

@@ -616,7 +616,7 @@ function ThemeScript({ nonce }) {
 }
 
 // src/video/CaptionedVideo.tsx
-import { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback, useEffect as useEffect3, useId, useRef as useRef2, useState as useState3 } from "react";
 
 // src/video/CaptionLayer.tsx
 import { useLayoutEffect, useRef } from "react";
@@ -866,7 +866,7 @@ function cueLines(cue) {
 var CONTROLS_HOLD_MS = 2500;
 var CONTROLS_HEIGHT = 56;
 var usePrefersReducedMotion3 = () => {
-  const [reduced, setReduced] = useState3(true);
+  const [reduced, setReduced] = useState3(null);
   useEffect3(() => {
     const q = window.matchMedia?.("(prefers-reduced-motion: reduce)");
     if (!q) {
@@ -880,6 +880,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)",
@@ -918,6 +949,8 @@ var CaptionedVideo = ({
   captions,
   fallbackCaptions,
   chapters,
+  reducedSrc,
+  storyboard,
   title,
   lang = "en",
   className,
@@ -938,7 +971,12 @@ var CaptionedVideo = ({
   const [paused, setPaused] = useState3(true);
   const [active, setActive] = useState3(false);
   const [focusWithin, setFocusWithin] = useState3(false);
-  const reducedMotion = usePrefersReducedMotion3();
+  const prefersReduced = usePrefersReducedMotion3();
+  const reducedMotion = prefersReduced !== false;
+  const [chosen, setChosen] = useState3(false);
+  const noticeId = useId();
+  const gated = prefersReduced === true && !reducedSrc && !chosen;
+  const videoSrc = prefersReduced && reducedSrc ? reducedSrc : prefersReduced === null && reducedSrc ? void 0 : src;
   useEffect3(() => setOn(readCaptionsChoice()), []);
   useEffect3(() => {
     let live = true;
@@ -993,7 +1031,7 @@ var CaptionedVideo = ({
       cancelAnimationFrame(raf);
       for (const e of events) v.removeEventListener(e, sync);
     };
-  }, [src]);
+  }, [videoSrc]);
   useEffect3(() => {
     const el = stageRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
@@ -1068,21 +1106,32 @@ var CaptionedVideo = ({
     holdRef.current = window.setTimeout(() => setActive(false), CONTROLS_HOLD_MS);
   }, []);
   useEffect3(() => () => window.clearTimeout(holdRef.current), []);
+  useEffect3(() => {
+    const v = videoRef.current;
+    if (!v) return;
+    v.addEventListener("play", wake);
+    return () => v.removeEventListener("play", wake);
+  }, [wake]);
   const toggleCaptions = useCallback(() => setOn((x) => {
     writeCaptionsChoice(!x);
     return !x;
   }), []);
   const toggleFullscreen = 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;
@@ -1106,6 +1155,7 @@ var CaptionedVideo = ({
       ref: wrapRef,
       className,
       onPointerMove: wake,
+      onPointerDown: wake,
       onFocus: () => {
         setFocusWithin(true);
         wake();
@@ -1127,14 +1177,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__ */ jsx12("track", { ref: trackRef, kind: "captions", src: fallbackCaptions, srcLang: lang, label: "Captions", default: true }),
@@ -1153,11 +1204,28 @@ var CaptionedVideo = ({
             page: track ? void 0 : cue
           }
         ) : null,
+        gated ? /* @__PURE__ */ jsxs7("div", { role: "group", "aria-labelledby": noticeId, style: gateStyle, children: [
+          /* @__PURE__ */ jsx12("p", { id: noticeId, style: { margin: 0 }, children: "This video is animated throughout." }),
+          /* @__PURE__ */ jsx12(
+            "button",
+            {
+              type: "button",
+              style: { ...buttonStyle, pointerEvents: "auto" },
+              onClick: () => {
+                setChosen(true);
+                void videoRef.current?.play().catch(() => {
+                });
+              },
+              children: "Play the video"
+            }
+          ),
+          storyboard ? /* @__PURE__ */ jsx12("a", { href: storyboard, style: linkStyle, children: "View the storyboard instead" }) : null
+        ] }) : null,
         /* @__PURE__ */ jsxs7("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