@supersuit/artifacts 0.4.6 → 0.4.7

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 `@supersuit/artifacts`. One entry per version, newest first. Each entry says what changed, how a
 host can tell whether it is affected (DETECTOR), what a host does about it (REMEDY), and the tests.
 
+## 0.4.7 (2026-09-27)
+
+**A page of videos opens as fast as a page of text.**
+
+- 0.4.6 marked every inline video `autoplay`, so all of them downloaded the moment the page opened
+  (21 diagrams, 6.8 MB, competing with the text and narration on a phone). The markup now carries
+  `preload="metadata"` and `data-artifact-video` instead, and a small client component,
+  `VideoAutoplay`, mounted only on pages that embed an `.mp4`, loads and plays each video as it
+  comes within a screen of view and pauses it when it leaves.
+- **DETECTOR:** a page with many inline videos is slow to become readable on cellular.
+- **REMEDY:** update the dependency; no host change.
+- **Tests:** the markup no longer autoplays and preloads only metadata; `VideoAutoplay` plays a
+  video only once it intersects, raises its preload, and pauses it when it leaves.
+
 ## 0.4.6 (2026-09-27)
 
 **Pages play video: `![alt](x.mp4)` is a silent, looping, autoplaying inline video.**

package/lib/artifacts/render.js

@@ -3,6 +3,7 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { hasNotesWidget, headingsOf } from './widgets.js';
 import { HeadingNotes, NoteToggle, NotesEarlier, NotesProvider } from '../widgets/notes.js';
+import { VideoAutoplay } from '../reader/video-autoplay.js';
 // Every colour is a theme variable (brand/theme.ts), so a page follows its light, dark or system mode.
 const GOLD = 'var(--a-accent)';
 function hostOf(url) {
@@ -49,12 +50,14 @@ export function isReachableHref(href) {
  *  is decoded frame by frame on the CPU and stuttered on an iPhone at 24fps (2026-09-27); video
  *  is decoded in hardware. */
 const VIDEO = /\.mp4(?:[?#].*)?$/i;
+const VIDEO_IN_MD = /\]\([^)\s]+\.mp4(?:[?#][^)]*)?\)/i;
 const escapeAttr = (s) => s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 // Written as markup, not JSX: React renders `muted` as a property and leaves it out of server
-// HTML, and iOS refuses to autoplay a video whose markup is not muted. `playsinline` keeps
-// iPhone from going full screen.
+// HTML, and iOS refuses to play a video unprompted whose markup is not muted. `playsinline` keeps
+// iPhone from going full screen. No `autoplay`: VideoAutoplay starts each one as it nears the
+// screen, so a page of videos does not download them all on open.
 function InlineVideo({ src, label }) {
-    const html = `<video src="${escapeAttr(src)}" aria-label="${escapeAttr(label)}" autoplay muted loop playsinline preload="auto" disablepictureinpicture class="block w-full"></video>`;
+    const html = `<video src="${escapeAttr(src)}" aria-label="${escapeAttr(label)}" data-artifact-video muted loop playsinline preload="metadata" disablepictureinpicture class="block w-full"></video>`;
     return _jsx("span", { className: "my-6 block overflow-hidden rounded-lg border border-[color:var(--a-line)]", dangerouslySetInnerHTML: { __html: html } });
 }
 const components = {
@@ -148,5 +151,5 @@ export function ArtifactMarkdown({ markdown, notes }) {
     const body = (_jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: on ? notesComponents(headings) : pageComponents(headings), children: markdown }));
     return (
     // break-words: a bare URL in prose is one unbreakable word and pushed phones 7px sideways (2026-09-26).
-    _jsx("div", { className: "break-words text-[17px] text-[color:var(--a-body)]", children: on ? (_jsx(NotesProvider, { artifactId: notes.artifactId, headings: headings.map(({ slug, text }) => ({ slug, text })), accent: notes.accent, children: body })) : body }));
+    _jsxs("div", { className: "break-words text-[17px] text-[color:var(--a-body)]", children: [on ? (_jsx(NotesProvider, { artifactId: notes.artifactId, headings: headings.map(({ slug, text }) => ({ slug, text })), accent: notes.accent, children: body })) : body, VIDEO_IN_MD.test(markdown) ? _jsx(VideoAutoplay, {}) : null] }));
 }

package/lib/reader/video-autoplay.d.ts

@@ -0,0 +1 @@
+export declare function VideoAutoplay(): null;

package/lib/reader/video-autoplay.js

@@ -0,0 +1,31 @@
+'use client';
+// Plays each inline video only while it is near the screen. With `autoplay` in the markup every
+// video on the page downloads the moment it opens (the Freedom whitepaper: 21 diagrams, 6.8 MB,
+// competing with the text and the narration on a phone). Here a video loads and plays as it
+// comes within a screen of view and pauses when it leaves, so opening the page costs the text.
+import { useEffect } from 'react';
+export function VideoAutoplay() {
+    useEffect(() => {
+        const videos = Array.from(document.querySelectorAll('video[data-artifact-video]'));
+        if (!videos.length || typeof IntersectionObserver === 'undefined') {
+            for (const v of videos)
+                void v.play?.().catch(() => { });
+            return;
+        }
+        const io = new IntersectionObserver((entries) => {
+            for (const e of entries) {
+                const v = e.target;
+                if (e.isIntersecting) {
+                    v.preload = 'auto';
+                    void v.play().catch(() => { });
+                }
+                else
+                    v.pause();
+            }
+        }, { rootMargin: '100% 0px' });
+        for (const v of videos)
+            io.observe(v);
+        return () => io.disconnect();
+    }, []);
+    return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersuit/artifacts",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "Publish markdown as branded, read-aloud pages from a Next.js app: the artifacts store, the route factory, the read-along reader, brand packs, password and confidential pages, and share cards.",
   "license": "MIT",
   "type": "module",