A chapter can show a recording: #clip(name), used once for the chords in the guide's mouse section

#clip reads docs/site/media/clips.toml. On the site it is the landing's
video (poster, autoplay muted loop playsinline, controls) with its
caption, and the in-view script that plays it now runs on every page;
in the book it is the poster at 7 cm with the caption. The guide shows
the chords clip under its mouse table, in place of the TODO.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

1 files changed, 22 insertions, 0 deletions

diff --git a/docs/typ/style.typ b/docs/typ/style.typ
index 23bdab3c..9753eedf 100644
--- a/docs/typ/style.typ
+++ b/docs/typ/style.typ
@@ -584,3 +584,25 @@
         fill: if unsaved { white } else { palette.ink }, mark)))
   }
 }
+
+/// A recording from docs/site/media/clips.toml, by name. On the site the
+/// same video as the landing's (poster, autoplay muted loop, played while
+/// in view) and its caption; in print its poster, small, and the caption.
+#let clip(name) = {
+  let c = toml("../site/media/clips.toml").clip.find(c => c.name == name)
+  assert(c != none, message: "no clip named " + name + " in clips.toml")
+  let said = if c.caption.contains("#") { eval(c.caption, mode: "markup") } else { c.caption }
+  context if html-out() {
+    html.elem("figure", attrs: (class: "clip inline", id: "rec-" + c.name), {
+      html.elem("video", attrs: (poster: "media/" + c.name + ".png", autoplay: "", muted: "", loop: "",
+        playsinline: "", controls: ""), {
+        html.elem("source", attrs: (src: "media/" + c.name + ".webm", type: "video/webm"))
+        html.elem("source", attrs: (src: "media/" + c.name + ".mp4", type: "video/mp4"))
+      })
+      html.elem("figcaption", said)
+    })
+  } else {
+    figure(image("/docs/site/media/" + c.name + ".png", width: 7cm, alt: c.caption),
+      caption: text(size: 0.9em, said), numbering: none, kind: "clip", supplement: none)
+  }
+}