@boyernick/standard-ui-react 0.4.2-canary.62 → 0.4.2-canary.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boyernick/standard-ui-react",
-  "version": "0.4.2-canary.62",
+  "version": "0.4.2-canary.64",
   "description": "React components for StandardUI",
   "license": "MIT",
   "type": "module",

package/src/lib/lens-glass/renderer.ts

@@ -114,6 +114,23 @@ const instances = new Set<{ markChanged(): void }>();
 // Reading what is behind a pane
 // ────────────────────────────────────────────────────────────────
 
+/**
+ * Layout does not change within a frame (the renderer only moves its own
+ * absolutely positioned canvases), so each element is measured once per frame
+ * however many panes look at it.
+ */
+let frameRects: Map<Element, DOMRect> | null = null;
+
+function rectOf(element: Element) {
+  if (!frameRects) return element.getBoundingClientRect();
+  let rect = frameRects.get(element);
+  if (!rect) {
+    rect = element.getBoundingClientRect();
+    frameRects.set(element, rect);
+  }
+  return rect;
+}
+
 const toBox = (rect: DOMRect): Box => ({
   x: rect.left,
   y: rect.top,
@@ -127,15 +144,24 @@ const transparent = (color: string) =>
 /** Media whose pixels a canvas cannot read without tainting it. */
 const tainted = new WeakSet<Element>();
 
+const originChecks = new WeakMap<Element, { source: string; cross: boolean }>();
+
 function crossOrigin(element: HTMLImageElement | HTMLVideoElement) {
   if (element.crossOrigin) return false;
   const source = element.currentSrc || element.getAttribute("src") || "";
-  if (!source || source.startsWith("data:") || source.startsWith("blob:")) return false;
-  try {
-    return new URL(source, location.href).origin !== location.origin;
-  } catch {
-    return true;
+  const known = originChecks.get(element);
+  if (known && known.source === source) return known.cross;
+  let cross: boolean;
+  if (!source || source.startsWith("data:") || source.startsWith("blob:")) cross = false;
+  else {
+    try {
+      cross = new URL(source, location.href).origin !== location.origin;
+    } catch {
+      cross = true;
+    }
   }
+  originChecks.set(element, { source, cross });
+  return cross;
 }
 
 function drawable(element: Element): element is HTMLImageElement | HTMLVideoElement | HTMLCanvasElement {
@@ -149,6 +175,71 @@ function drawable(element: Element): element is HTMLImageElement | HTMLVideoElem
   return element instanceof HTMLCanvasElement && element.width > 0 && element.height > 0;
 }
 
+/**
+ * Images are drawn from a downsized copy decoded off the main thread. Drawing
+ * a full-size <img> the first time decodes it synchronously — a Retina
+ * screenshot behind a carousel arrow held a frame for 380ms — and the glass
+ * frosts what it shows anyway, so it never needs more than this.
+ */
+const MAX_BITMAP_EDGE = 960;
+
+type ImageCopy = { src: string; bitmap?: ImageBitmap; pending?: boolean; failed?: boolean };
+const imageCopies = new WeakMap<HTMLImageElement, ImageCopy>();
+
+/**
+ * The drawable copy of an image: a ready bitmap, the image itself where
+ * bitmaps are unavailable, or null while the copy is still decoding (it is
+ * left out until `ready` is called).
+ */
+function imageCopy(image: HTMLImageElement, ready: () => void): CanvasImageSource | null {
+  if (typeof createImageBitmap !== "function") return image;
+  const src = image.currentSrc || image.src;
+  let copy = imageCopies.get(image);
+  if (!copy || copy.src !== src) {
+    copy?.bitmap?.close();
+    copy = { src };
+    imageCopies.set(image, copy);
+  }
+  if (copy.bitmap) return copy.bitmap;
+  if (copy.failed) return image;
+  if (!copy.pending) {
+    const target = copy;
+    target.pending = true;
+    const longEdge = Math.max(image.naturalWidth, image.naturalHeight);
+    const scale = Math.min(1, MAX_BITMAP_EDGE / Math.max(1, longEdge));
+    const options: ImageBitmapOptions | undefined = scale < 1
+      ? {
+          resizeWidth: Math.max(1, Math.round(image.naturalWidth * scale)),
+          resizeHeight: Math.max(1, Math.round(image.naturalHeight * scale)),
+          resizeQuality: "medium",
+        }
+      : undefined;
+    // Decode from the file's bytes (the HTTP cache has them): a Blob decodes
+    // entirely off the main thread, where an <img> source can still decode on
+    // it. SVG and anything else a Blob cannot decode falls back to the element.
+    const fromBytes = fetch(src, { mode: "cors", credentials: "same-origin", cache: "force-cache" })
+      .then((response) => {
+        if (!response.ok) throw new Error(`Glass: image fetch ${response.status}`);
+        return response.blob();
+      })
+      .then((blob) => createImageBitmap(blob, options));
+    fromBytes
+      .catch(() => createImageBitmap(image, options))
+      .then((bitmap) => {
+        if (imageCopies.get(image) === target) target.bitmap = bitmap;
+        else bitmap.close();
+      })
+      .catch(() => {
+        target.failed = true;
+      })
+      .finally(() => {
+        target.pending = false;
+        ready();
+      });
+  }
+  return null;
+}
+
 /** Whether drawing this source would taint a canvas (its pixels are cross-origin). */
 function unreadable(source: CanvasImageSource) {
   const probe = document.createElement("canvas");
@@ -175,7 +266,7 @@ function naturalSize(element: HTMLImageElement | HTMLVideoElement | HTMLCanvasEl
  * up to the root, and its opacity after every ancestor's. Null if hidden.
  */
 function visibility(element: Element, root: Element) {
-  let clip: Box | null = toBox(element.getBoundingClientRect());
+  let clip: Box | null = toBox(rectOf(element));
   let opacity = 1;
   for (let node: Element | null = element; node && node !== root; node = node.parentElement) {
     const style = getComputedStyle(node);
@@ -183,7 +274,7 @@ function visibility(element: Element, root: Element) {
     opacity *= Number(style.opacity) || 0;
     if (opacity <= 0.01) return null;
     if (node !== element && (style.overflowX !== "visible" || style.overflowY !== "visible")) {
-      clip = clip && intersect(clip, toBox(node.getBoundingClientRect()));
+      clip = clip && intersect(clip, toBox(rectOf(node)));
       if (!clip) return null;
     }
   }
@@ -196,7 +287,7 @@ function clipOf(element: Element): Box {
   for (let node = element.parentElement; node; node = node.parentElement) {
     const style = getComputedStyle(node);
     if (style.overflowX !== "visible" || style.overflowY !== "visible") {
-      clip = intersect(clip, toBox(node.getBoundingClientRect())) ?? { x: 0, y: 0, width: 0, height: 0 };
+      clip = intersect(clip, toBox(rectOf(node))) ?? { x: 0, y: 0, width: 0, height: 0 };
     }
     if (node.dataset?.slot === "glass-root") break;
   }
@@ -211,6 +302,13 @@ type Pane = {
   element: HTMLElement;
   canvas: HTMLCanvasElement;
   context: CanvasRenderingContext2D;
+  /** This pane's own ground canvas, kept between frames rather than resized. */
+  scene: HTMLCanvasElement;
+  sceneContext: CanvasRenderingContext2D;
+  /** When a playing video behind it last redrew this pane. */
+  lastVideoFrame: number;
+  /** Whether the pane was drawable last time it was checked. */
+  shown: boolean;
   restorePosition: string | null;
   hover: number;
   press: number;
@@ -234,11 +332,6 @@ export interface LensGlass {
 export function createLensGlass({ root, glassElements, defaults = {} }: LensGlassOptions): LensGlass {
   getShared(); // throws if WebGL is unavailable, so the root can fall back
 
-  const scene = document.createElement("canvas");
-  const maybeSceneContext = scene.getContext("2d");
-  if (!maybeSceneContext) throw new Error("Glass: 2D canvas is unavailable.");
-  const sceneContext: CanvasRenderingContext2D = maybeSceneContext;
-
   // If anything below throws, take back what was already added to the DOM so
   // a failed start leaves the panes as they were.
   const injected: Array<{ canvas: HTMLCanvasElement; element: HTMLElement; position: string | null }> = [];
@@ -264,6 +357,9 @@ export function createLensGlass({ root, glassElements, defaults = {} }: LensGlas
     injected.push(record);
     const context = canvas.getContext("2d");
     if (!context) throw new Error("Glass: 2D canvas is unavailable.");
+    const scene = document.createElement("canvas");
+    const sceneContext = scene.getContext("2d");
+    if (!sceneContext) throw new Error("Glass: 2D canvas is unavailable.");
 
     let restorePosition: string | null = null;
     if (getComputedStyle(element).position === "static") {
@@ -273,7 +369,7 @@ export function createLensGlass({ root, glassElements, defaults = {} }: LensGlas
     }
 
     const pane: Pane = {
-      element, canvas, context, restorePosition,
+      element, canvas, context, scene, sceneContext, lastVideoFrame: 0, shown: false, restorePosition,
       hover: 0, press: 0, hoverTarget: 0, pressTarget: 0, signature: "", cleanup: () => {},
     };
     const enter = () => { pane.hoverTarget = 1; wake(); };
@@ -332,10 +428,19 @@ export function createLensGlass({ root, glassElements, defaults = {} }: LensGlas
     return getComputedStyle(document.documentElement).backgroundColor || "#000";
   };
 
+  // `forced`: something may have changed, so check every pane this frame.
+  // `redraw`: draw every pane even if nothing it depends on looks different
+  // (markChanged, a restored WebGL context).
   let forced = true;
+  let redraw = true;
   let visible = true;
   let frame = 0;
   let destroyed = false;
+  // Frames since anything last moved or changed; the loop stops a few frames
+  // after the page settles and waits for an event to wake it.
+  let quietFrames = 0;
+  let lastLayout = "";
+  let transitions = 0;
 
   const intersection = new IntersectionObserver((entries) => {
     visible = entries.some((entry) => entry.isIntersecting);
@@ -345,62 +450,132 @@ export function createLensGlass({ root, glassElements, defaults = {} }: LensGlas
 
   const mutations = new MutationObserver((records) => {
     // Our own canvases change on every frame we draw; they are not the ground.
-    const relevant = records.filter(
-      (record) => (record.target as HTMLElement).dataset?.glassCanvas === undefined,
-    );
+    // A pane's own contents (a progress bar, a label) are drawn over the glass,
+    // not refracted by it; only its configuration matters.
+    const relevant = records.filter((record) => {
+      const target = record.target as HTMLElement;
+      if (target.dataset?.glassCanvas !== undefined) return false;
+      if (record.attributeName === "data-config") return true;
+      return !(target instanceof Element && !paneSet.has(target as HTMLElement) && insidePane(target));
+    });
     if (!relevant.length) return;
-    // Inline style changes (a carousel's transform while dragging) move
-    // things, which the per-frame position check already sees; only a change
-    // in what exists or how it is styled means re-listing what paints.
+    // Inline style changes (a carousel's transform while dragging) only move
+    // things, which the position check sees; a change in what exists or how
+    // it is styled means re-listing what paints.
     if (relevant.some((record) => record.type === "childList" || record.attributeName !== "style")) {
       collectMedia();
     }
+    // An inline style can change opacity or clipping without moving anything.
     forced = true;
     wake();
   });
   mutations.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: ["src", "data-config", "class", "style"] });
 
-  // Media keeps changing on its own while it plays or loads.
-  const onMediaEvent = () => { forced = true; wake(); };
-  root.addEventListener("load", onMediaEvent, true);
-  root.addEventListener("loadeddata", onMediaEvent, true);
-  root.addEventListener("seeked", onMediaEvent, true);
-  window.addEventListener("resize", onMediaEvent);
+  // Everything else that can change what a pane shows arrives as an event.
+  const onChange = () => { forced = true; wake(); };
+  const onMove = () => wake();
+  const onTransitionStart = () => { transitions += 1; forced = true; wake(); };
+  const onTransitionEnd = () => { transitions = Math.max(0, transitions - 1); forced = true; wake(); };
+  const rootEvents: Array<[string, EventListener]> = [
+    ["load", onChange], ["loadeddata", onChange], ["seeked", onChange], ["play", onChange],
+    ["pause", onChange], ["ended", onChange],
+    ["transitionrun", onTransitionStart], ["transitionend", onTransitionEnd], ["transitioncancel", onTransitionEnd],
+    ["animationstart", onTransitionStart], ["animationend", onTransitionEnd], ["animationcancel", onTransitionEnd],
+    ["pointerover", onChange], ["pointerout", onChange], ["pointermove", onMove], ["pointerdown", onMove],
+  ];
+  for (const [type, listener] of rootEvents) root.addEventListener(type, listener, true);
+  window.addEventListener("resize", onChange);
+  window.addEventListener("scroll", onMove, { capture: true, passive: true });
   // A root that started in a background tab draws when the tab is shown.
-  document.addEventListener("visibilitychange", onMediaEvent);
+  document.addEventListener("visibilitychange", onChange);
 
   function wake() {
+    quietFrames = 0;
     if (!frame && !destroyed) frame = requestAnimationFrame(tick);
   }
 
-  function tick() {
+  const rectKey = (element: Element) => {
+    const r = rectOf(element);
+    return `${r.x.toFixed(1)},${r.y.toFixed(1)},${r.width.toFixed(1)},${r.height.toFixed(1)}`;
+  };
+
+  /** Whether a pane can be seen at all: not faded out, hidden or clipped away. */
+  function paneShown(pane: Pane) {
+    const seen = visibility(pane.element, root);
+    if (!seen || seen.opacity < 0.02) return false;
+    return Boolean(intersect(seen.clip, { x: 0, y: 0, width: innerWidth, height: innerHeight }));
+  }
+
+  function tick(now: number) {
     frame = 0;
     // Hidden tabs get no animation frames anyway; no need to check here.
     if (destroyed || !visible) return;
-    let animating = false;
-    const ground = groundColor();
+    frameRects = new Map();
+    try {
+      step(now);
+    } finally {
+      frameRects = null;
+    }
+  }
+
+  function step(now: number) {
+
+    // Cheap: where the panes and media are. Anything else that matters
+    // arrives as an event and sets `forced`.
+    const layout = panes.map((pane) => rectKey(pane.element)).join(";") + "|" + media.map(rectKey).join(";");
+    const moved = layout !== lastLayout || transitions > 0;
+    lastLayout = layout;
+    const check = forced || moved;
+
+    const ground = check ? groundColor() : "";
     const dpr = Math.min(window.devicePixelRatio || 1, 2);
-    const playing = media.some(
-      (element) => element instanceof HTMLVideoElement && !element.paused && !element.ended,
+    const playing = media.filter(
+      (element): element is HTMLVideoElement =>
+        element instanceof HTMLVideoElement && !element.paused && !element.ended,
     );
+    let animating = false;
+    let videoBehindShownPane = false;
 
     for (const pane of panes) {
       pane.hover += (pane.hoverTarget - pane.hover) * 0.25;
       pane.press += (pane.pressTarget - pane.press) * 0.35;
       if (Math.abs(pane.hoverTarget - pane.hover) < 0.01) pane.hover = pane.hoverTarget;
       if (Math.abs(pane.pressTarget - pane.press) < 0.01) pane.press = pane.pressTarget;
-      if (pane.hover !== pane.hoverTarget || pane.press !== pane.pressTarget) animating = true;
-      renderPane(pane, ground, dpr, forced || playing);
+      const paneAnimating = pane.hover !== pane.hoverTarget || pane.press !== pane.pressTarget;
+      if (paneAnimating) animating = true;
+
+      if (check || paneAnimating) pane.shown = paneShown(pane);
+      if (!pane.shown) {
+        // Draw afresh when it next appears.
+        pane.signature = "";
+        continue;
+      }
+
+      // A playing video behind a shown pane changes every frame; follow it
+      // at up to 30fps.
+      const paneBox = toBox(rectOf(pane.element));
+      const overVideo = playing.some((video) => intersect(toBox(rectOf(video)), paneBox));
+      let videoFrame = false;
+      if (overVideo) {
+        videoBehindShownPane = true;
+        if (now - pane.lastVideoFrame >= 33) {
+          pane.lastVideoFrame = now;
+          videoFrame = true;
+        }
+      }
+
+      if (!check && !paneAnimating && !videoFrame) continue;
+      renderPane(pane, ground || groundColor(), dpr, redraw);
     }
     forced = false;
-    // Keep polling positions while anything could be moving: transforms and
-    // scroll offsets inside the root change without a DOM mutation.
-    if (animating || playing || media.length > 0) frame = requestAnimationFrame(tick);
+    redraw = false;
+    quietFrames = moved || animating ? 0 : quietFrames + 1;
+    if (animating || videoBehindShownPane || quietFrames < 12) frame = requestAnimationFrame(tick);
   }
 
   function renderPane(pane: Pane, ground: string, dpr: number, force: boolean) {
     const { element } = pane;
-    const rect = element.getBoundingClientRect();
+    const rect = rectOf(element);
     if (rect.width < 1 || rect.height < 1) return;
     const style = getComputedStyle(element);
     const config = { ...defaults, ...parseConfig(element.dataset.config) };
@@ -421,8 +596,8 @@ export function createLensGlass({ root, glassElements, defaults = {} }: LensGlas
     const drawn: Layer[] = [];
     for (const item of paintList) {
       const isMedia = item instanceof HTMLImageElement || item instanceof HTMLVideoElement || item instanceof HTMLCanvasElement;
+      if (!intersect(toBox(rectOf(item)), region)) continue;
       if (isMedia && !drawable(item)) continue;
-      if (!intersect(toBox(item.getBoundingClientRect()), region)) continue;
       const seen = visibility(item, root);
       if (!seen) continue;
       const clip = intersect(seen.clip, region);
@@ -439,14 +614,20 @@ export function createLensGlass({ root, glassElements, defaults = {} }: LensGlas
       });
     }
 
+    // Relative to the pane: a pane that moves together with what is behind it
+    // (a video player's controls as its slide pages) shows the same thing, and
+    // its canvas moves with it, so it needs no redraw.
+    const ox = rect.left;
+    const oy = rect.top;
+    const px = (value: number) => value.toFixed(1);
     const signature = [
-      region.x.toFixed(1), region.y.toFixed(1), region.width.toFixed(1), region.height.toFixed(1),
+      px(region.width), px(region.height),
       dpr, ground, element.dataset.config ?? "", pane.hover.toFixed(2), pane.press.toFixed(2),
       ...drawn.map(({ element: item, clip, opacity, filter, color }) => {
-        const r = item.getBoundingClientRect();
+        const r = rectOf(item);
         const frameKey = item instanceof HTMLVideoElement ? item.currentTime.toFixed(3)
           : item instanceof HTMLImageElement ? item.currentSrc : "";
-        return `${r.x.toFixed(1)},${r.y.toFixed(1)},${r.width.toFixed(1)},${r.height.toFixed(1)}|${clip.x.toFixed(1)},${clip.y.toFixed(1)},${clip.width.toFixed(1)},${clip.height.toFixed(1)}|${opacity.toFixed(2)}|${filter}|${color ?? ""}|${frameKey}`;
+        return `${px(r.x - ox)},${px(r.y - oy)},${px(r.width)},${px(r.height)}|${px(clip.x - ox)},${px(clip.y - oy)},${px(clip.width)},${px(clip.height)}|${opacity.toFixed(2)}|${filter}|${color ?? ""}|${frameKey}`;
       }),
     ].join(";");
     if (!force && signature === pane.signature) return;
@@ -457,8 +638,16 @@ export function createLensGlass({ root, glassElements, defaults = {} }: LensGlas
     if (region.width * region.height * scale * scale > MAX_SCENE_PIXELS) {
       scale = Math.sqrt(MAX_SCENE_PIXELS / (region.width * region.height));
     }
-    scene.width = Math.max(1, Math.round(region.width * scale));
-    scene.height = Math.max(1, Math.round(region.height * scale));
+    const { scene, sceneContext } = pane;
+    const sceneWidth = Math.max(1, Math.round(region.width * scale));
+    const sceneHeight = Math.max(1, Math.round(region.height * scale));
+    // Resizing a canvas reallocates it; only do so when the size changes.
+    if (scene.width !== sceneWidth || scene.height !== sceneHeight) {
+      scene.width = sceneWidth;
+      scene.height = sceneHeight;
+    }
+    sceneContext.setTransform(1, 0, 0, 1, 0, 0);
+    sceneContext.clearRect(0, 0, sceneWidth, sceneHeight);
     sceneContext.setTransform(scale, 0, 0, scale, -region.x * scale, -region.y * scale);
     sceneContext.globalAlpha = 1;
     sceneContext.fillStyle = ground;
@@ -467,7 +656,7 @@ export function createLensGlass({ root, glassElements, defaults = {} }: LensGlas
       sceneContext.save();
       sceneContext.globalAlpha = opacity;
       if (color !== null) {
-        const box = toBox(item.getBoundingClientRect());
+        const box = toBox(rectOf(item));
         const visible = intersect(box, clip);
         if (visible) {
           sceneContext.fillStyle = color;
@@ -477,7 +666,7 @@ export function createLensGlass({ root, glassElements, defaults = {} }: LensGlas
         continue;
       }
       const source = item as HTMLImageElement | HTMLVideoElement | HTMLCanvasElement;
-      const box = source.getBoundingClientRect();
+      const box = rectOf(source);
       const itemStyle = getComputedStyle(source);
       const content = source instanceof HTMLCanvasElement
         ? { x: 0, y: 0, width: box.width, height: box.height }
@@ -490,8 +679,11 @@ export function createLensGlass({ root, glassElements, defaults = {} }: LensGlas
       sceneContext.clip();
       // Canvas understands CSS filter functions (blur, brightness, …) as is.
       if (filter !== "none") sceneContext.filter = filter;
+      const picture = source instanceof HTMLImageElement ? imageCopy(source, instance.markChanged) : source;
       try {
-        sceneContext.drawImage(source, box.left + content.x, box.top + content.y, content.width, content.height);
+        if (picture) {
+          sceneContext.drawImage(picture, box.left + content.x, box.top + content.y, content.width, content.height);
+        }
       } catch {
         tainted.add(source);
       }
@@ -577,6 +769,7 @@ export function createLensGlass({ root, glassElements, defaults = {} }: LensGlas
   const instance: LensGlass = {
     markChanged() {
       forced = true;
+      redraw = true;
       wake();
     },
     destroy() {
@@ -584,11 +777,10 @@ export function createLensGlass({ root, glassElements, defaults = {} }: LensGlas
       if (frame) cancelAnimationFrame(frame);
       intersection.disconnect();
       mutations.disconnect();
-      root.removeEventListener("load", onMediaEvent, true);
-      root.removeEventListener("loadeddata", onMediaEvent, true);
-      root.removeEventListener("seeked", onMediaEvent, true);
-      window.removeEventListener("resize", onMediaEvent);
-      document.removeEventListener("visibilitychange", onMediaEvent);
+      for (const [type, listener] of rootEvents) root.removeEventListener(type, listener, true);
+      window.removeEventListener("resize", onChange);
+      window.removeEventListener("scroll", onMove, { capture: true });
+      document.removeEventListener("visibilitychange", onChange);
       for (const pane of panes) {
         pane.cleanup();
         pane.canvas.remove();

package/src/video-player.tsx

@@ -45,6 +45,15 @@ export type VideoPlayerProps = ComponentProps<"div"> & {
   title?: string
   /** Accessible name for the video. Defaults to title. */
   "aria-label"?: string
+  /**
+   * CORS mode for the video. The glass controls can only refract frames the
+   * page may read, which needs the host to allow cross-origin reads. By
+   * default the player asks with `anonymous` and, if the host refuses and the
+   * video fails to load, loads it once more without CORS — the video plays
+   * either way, and the controls fall back to the ground colour. Pass a mode
+   * to fix it, or `null` never to ask.
+   */
+  crossOrigin?: "anonymous" | "use-credentials" | null
 }
 
 export const VideoPlayer = ({
@@ -53,6 +62,7 @@ export const VideoPlayer = ({
   title,
   className,
   "aria-label": ariaLabel,
+  crossOrigin,
   ...props
 }: VideoPlayerProps) => {
   const playerRef = useRef<HTMLDivElement>(null)
@@ -65,6 +75,13 @@ export const VideoPlayer = ({
   const [buffering, setBuffering] = useState(false)
   const [ended, setEnded] = useState(false)
   const [failed, setFailed] = useState(false)
+  // Automatic CORS: ask first, fall back once if the host refuses. Kept per
+  // source, so a new src gets a fresh attempt.
+  const automaticCors = crossOrigin === undefined
+  const [corsRefusedSrc, setCorsRefusedSrc] = useState<string | null>(null)
+  const videoCrossOrigin = automaticCors
+    ? corsRefusedSrc === src ? undefined : "anonymous"
+    : crossOrigin ?? undefined
   const [fullscreen, setFullscreen] = useState(false)
   const pipSupported = useSyncExternalStore(
     subscribePipSupport,
@@ -181,6 +198,11 @@ export const VideoPlayer = ({
       setEnded(true)
     }
     const handleError = () => {
+      // Refused with CORS: try once more without it, rather than fail.
+      if (video.dataset.cors === "auto" && video.crossOrigin) {
+        setCorsRefusedSrc(video.getAttribute("src"))
+        return
+      }
       setPlaying(false)
       setLoading(false)
       setBuffering(false)
@@ -233,6 +255,15 @@ export const VideoPlayer = ({
     }
   }, [])
 
+  // Changing the crossorigin attribute alone does not refetch; reload so the
+  // fallback takes effect.
+  const appliedCrossOrigin = useRef(videoCrossOrigin)
+  useEffect(() => {
+    if (appliedCrossOrigin.current === videoCrossOrigin) return
+    appliedCrossOrigin.current = videoCrossOrigin
+    videoRef.current?.load()
+  }, [videoCrossOrigin])
+
   useEffect(() => {
     const handleFullscreenChange = () => {
       setFullscreen(document.fullscreenElement === playerRef.current)
@@ -289,7 +320,11 @@ export const VideoPlayer = ({
         // carries its own hairline ring and doubled the frame. Black only in
         // fullscreen, where letterboxing needs it: behind the rounded clip it
         // bled through the video's anti-aliased corners as a dark stroke.
-        "group relative isolate overflow-hidden rounded-xl shadow-[var(--shadow-300)] ring-1 ring-border-primary data-[fullscreen]:h-screen data-[fullscreen]:w-screen data-[fullscreen]:rounded-none data-[fullscreen]:bg-black data-[fullscreen]:ring-0 fullscreen:h-screen fullscreen:w-screen fullscreen:rounded-none fullscreen:bg-black fullscreen:ring-0",
+        // The corners stay rounded in fullscreen: browsers keep :fullscreen
+        // matching through their exit animation, so a square corner collapsed
+        // back into the page square and only rounded once it landed. Against
+        // the black backdrop the rounding does not show while fullscreen.
+        "group relative isolate overflow-hidden rounded-xl shadow-[var(--shadow-300)] ring-1 ring-border-primary data-[fullscreen]:h-screen data-[fullscreen]:w-screen data-[fullscreen]:bg-black data-[fullscreen]:ring-0 fullscreen:h-screen fullscreen:w-screen fullscreen:bg-black fullscreen:ring-0",
         className,
       )}
       aria-busy={loading || buffering || undefined}
@@ -299,6 +334,8 @@ export const VideoPlayer = ({
         ref={videoRef}
         src={src}
         poster={poster}
+        crossOrigin={videoCrossOrigin}
+        data-cors={automaticCors ? "auto" : undefined}
         preload="auto"
         playsInline
         className="aspect-video w-full cursor-pointer object-cover group-data-[fullscreen]:h-full group-data-[fullscreen]:w-full group-data-[fullscreen]:aspect-auto group-data-[fullscreen]:object-cover"