@nulib/clover 4.0.0-beta.0 → 4.0.0

package/dist/components/Canvas/FrameAnimation.mjs

@@ -1,16 +1,58 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState, useRef, useCallback, useMemo } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo, useState, useEffect, useRef, useCallback, useLayoutEffect } from "react";
 import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import { createPortal } from "react-dom";
 import ChoiceMenu from "./ChoiceMenu.mjs";
-import { resolveBody } from "./layout.mjs";
+import { canvasSize, resolveBody } from "./layout.mjs";
+import { isSound, parseAnnotationTarget } from "../../core/annotations.mjs";
+import { bodiesOf } from "../../core/painting.mjs";
+import { Markup } from "../../ui/Markup.mjs";
+import { Tip } from "../../ui/Tip.mjs";
+import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
 import { useBarHeight } from "./media/useBarHeight.mjs";
 import { imageSource, resolveThumbnail } from "../../core/thumbnail.mjs";
 import { useOptionalClover } from "../../react/context.mjs";
 import { TransportButton } from "./media/TransportButton.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
-import { PauseIcon, PlayIcon } from "../../ui/mediaIcons.mjs";
+import { PauseIcon, PlayIcon, VolumeMutedIcon, VolumeHighIcon } from "../../ui/mediaIcons.mjs";
+import { formatTime } from "../../lib/time.mjs";
+import { gapsOf, gapMask, alongBar, seekShare } from "./media/seekGaps.mjs";
+import { placeMenu } from "./media/placeMenu.mjs";
+const clockTime = (seconds, total) => total < 10 ? `${formatTime(seconds)}.${Math.min(9, Math.floor((seconds || 0) % 1 * 10))}` : formatTime(seconds);
+const focusVisible = (element) => {
+  try {
+    return element.matches(":focus-visible");
+  } catch {
+    return false;
+  }
+};
 const HOLD_MS = 50;
+const TICK_MS = 250;
+const frameAt = (frames, time) => {
+  let found = 0;
+  frames.forEach((frame, index) => {
+    if (frame.start <= time) found = index;
+  });
+  return found;
+};
+function framesAt(frames, time, total) {
+  const at = Math.min(time, total);
+  const shown = [];
+  frames.forEach((frame, index) => {
+    if (frame.start <= at && (at < frame.end || at >= total && frame.end >= total))
+      shown.push(index);
+  });
+  return shown;
+}
+const nextChange = (frames, time, total) => {
+  let next = total;
+  for (const frame of frames) {
+    if (frame.start > time && frame.start < next) next = frame.start;
+    if (frame.end > time && frame.end < next) next = frame.end;
+  }
+  return next;
+};
 const FRAME_IMAGE = 128;
 function useFrameImages(frames, request) {
   const [images, setImages] = useState([]);
@@ -20,7 +62,7 @@ function useFrameImages(frames, request) {
       frames.map((frame) => {
         const { body } = frame.annotation;
         const resolved = resolveBody(Array.isArray(body) ? body[0] : body);
-        const source = resolved && imageSource(resolved.body, resolved.region);
+        const source = (resolved == null ? void 0 : resolved.body.type) === "Image" ? imageSource(resolved.body, resolved.region) : void 0;
         return source ? resolveThumbnail(source, FRAME_IMAGE, request) : void 0;
       })
     ).then((urls) => live && setImages(urls));
@@ -33,54 +75,140 @@ function useFrameImages(frames, request) {
 function useAnimation(frames, key, {
   autoplay = false,
   loop = false,
+  duration,
   isReady,
   onEnded
 }) {
-  const [frame, setFrame] = useState(0);
+  const total = useMemo(() => {
+    if (duration && Number.isFinite(duration) && duration > 0) return duration;
+    const ends = frames.map((frame2) => frame2.end).filter(Number.isFinite);
+    return ends.length ? Math.max(...ends) : 0;
+  }, [frames, duration]);
+  const [time, setTime] = useState(0);
   const [playing, setPlaying] = useState(false);
   const [repeat, setRepeat] = useState(loop);
+  const [moved, setMoved] = useState(0);
+  const now = useRef(0);
   const ready = useRef(isReady);
   ready.current = isReady;
   const ended = useRef(onEnded);
   ended.current = onEnded;
+  const seek = useCallback(
+    (seconds) => {
+      const at = Math.max(0, Math.min(total, seconds));
+      now.current = at;
+      setTime(at);
+      setMoved((count) => count + 1);
+    },
+    [total]
+  );
   useEffect(() => {
-    setFrame(0);
+    now.current = 0;
+    setTime(0);
     setRepeat(loop);
     const reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
     setPlaying(autoplay && frames.length > 1 && !reduced);
   }, [key]);
   useEffect(() => {
-    if (!playing || frames.length < 2) return;
-    const current = frames[Math.min(frame, frames.length - 1)];
-    const ms = Math.max(40, (current.end - current.start) * 1e3);
-    let timer = setTimeout(function advance() {
+    if (!playing || frames.length < 2 || !(total > 0)) return;
+    let from = { at: Date.now(), time: now.current >= total ? 0 : now.current };
+    let timer;
+    const go = (seconds) => {
+      now.current = seconds;
+      setTime(seconds);
+    };
+    const wait = (time2) => Math.max(
+      0,
+      Math.min(TICK_MS, (nextChange(frames, time2, total) - time2) * 1e3)
+    );
+    const tick = () => {
       var _a;
-      const atEnd = frame + 1 >= frames.length;
-      if (atEnd && !repeat) {
-        setPlaying(false);
-        (_a = ended.current) == null ? void 0 : _a.call(ended);
-        return;
+      const before = now.current;
+      let time2 = from.time + (Date.now() - from.at) / 1e3;
+      if (time2 >= total) {
+        if (!repeat) {
+          go(total);
+          setPlaying(false);
+          (_a = ended.current) == null ? void 0 : _a.call(ended);
+          return;
+        }
+        time2 = 0;
+        from = { at: Date.now(), time: 0 };
       }
-      const next = atEnd ? 0 : frame + 1;
-      if (ready.current && !ready.current(next)) {
-        timer = setTimeout(advance, HOLD_MS);
+      const showing = framesAt(frames, before, total);
+      const coming = framesAt(frames, time2, total).filter(
+        (index) => !showing.includes(index)
+      );
+      if (ready.current && coming.some((index) => !ready.current(index))) {
+        from = { at: Date.now(), time: before };
+        timer = setTimeout(tick, HOLD_MS);
         return;
       }
-      setFrame(next);
-    }, ms);
+      go(time2);
+      timer = setTimeout(tick, wait(time2));
+    };
+    if (from.time !== now.current) go(from.time);
+    timer = setTimeout(tick, wait(from.time));
     return () => clearTimeout(timer);
-  }, [playing, frame, frames, repeat]);
-  return { frame, playing, repeat, setFrame, setPlaying, setRepeat };
+  }, [playing, frames, total, repeat, moved]);
+  const frame = frameAt(frames, time);
+  const shownKey = framesAt(frames, time, total).join(",");
+  const shown = useMemo(
+    () => shownKey ? shownKey.split(",").map(Number) : [],
+    [shownKey]
+  );
+  const setFrame = useCallback(
+    (index) => {
+      var _a;
+      return seek(((_a = frames[index]) == null ? void 0 : _a.start) ?? 0);
+    },
+    [frames, seek]
+  );
+  return {
+    frame,
+    shown,
+    time,
+    total,
+    playing,
+    repeat,
+    setFrame,
+    seek,
+    setPlaying,
+    setRepeat
+  };
 }
 function FrameControls({
   frames,
   animation,
-  language
+  language,
+  sound
 }) {
   var _a;
   const { t, langOf } = useCloverTranslation();
-  const { frame, playing, repeat, setFrame, setPlaying, setRepeat } = animation;
-  const last = frames.length - 1;
+  const {
+    frame,
+    time,
+    total,
+    playing,
+    repeat,
+    setFrame,
+    seek,
+    setPlaying,
+    setRepeat
+  } = animation;
+  const starts = useMemo(
+    () => [...new Set(frames.map((each) => each.start))].sort((a, b) => a - b),
+    [frames]
+  );
+  let here = 0;
+  starts.forEach((start, index) => {
+    if (start <= time) here = index;
+  });
+  const progress = total > 0 ? Math.min(time, total) / total * 100 : 0;
+  const gaps = useMemo(() => {
+    const at = gapsOf(frames, total);
+    return at.length ? gapMask(at) : void 0;
+  }, [frames, total]);
   const triggerId = `${useUniqueId().replace(/:/g, "")}-frames`;
   const menuId = `${triggerId}-menu`;
   const [open, setOpen] = useState(false);
@@ -106,15 +234,38 @@ function FrameControls({
     }),
     [frames, images]
   );
-  const position = t("framePosition", {
-    index: frame + 1,
-    total: frames.length
-  });
+  const [pointedAt, setPointedAt] = useState(null);
+  const [seekFocused, setSeekFocused] = useState(false);
+  const seekArea = useRef(null);
+  const position = `${frame + 1} / ${frames.length}`;
+  useLayoutEffect(() => {
+    var _a2;
+    if (pointedAt === null)
+      (_a2 = seekArea.current) == null ? void 0 : _a2.style.setProperty(
+        "--clover-transport-preview",
+        alongBar(progress)
+      );
+  }, [pointedAt, progress]);
+  const holder = useRef(null);
+  useLayoutEffect(() => {
+    const wrapper = holder.current;
+    const options = wrapper == null ? void 0 : wrapper.querySelector(".clover-canvas-menu");
+    const transport = wrapper == null ? void 0 : wrapper.closest(".clover-canvas-transport");
+    const bodyBox = wrapper == null ? void 0 : wrapper.closest(".clover-canvas-media");
+    if (!open || !wrapper || !options || !transport || !bodyBox) return;
+    const place = () => placeMenu(options, wrapper, transport, bodyBox);
+    place();
+    const observer = new ResizeObserver(place);
+    observer.observe(bodyBox);
+    observer.observe(transport);
+    observer.observe(options);
+    return () => observer.disconnect();
+  }, [open]);
   const step = (by) => {
-    const next = Math.min(last, Math.max(0, frame + by));
-    if (next === frame) return;
+    const to = starts[here + by];
+    if (to === void 0) return;
     setPlaying(false);
-    setFrame(next);
+    setFrame(frames.findIndex((each) => each.start === to));
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -123,98 +274,70 @@ function FrameControls({
       "data-kind": "frames",
       "data-testid": "clover-canvas-frames",
       children: [
-        /* @__PURE__ */ jsx("div", { className: "clover-canvas-transport-seek-area", children: /* @__PURE__ */ jsx(
-          "input",
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            "aria-label": t("frameSeek"),
-            "aria-valuetext": position,
-            lang: langOf("frameSeek"),
-            className: "clover-canvas-transport-seek",
-            max: last,
-            min: 0,
-            step: 1,
-            type: "range",
-            value: frame,
-            onChange: (event) => {
-              setPlaying(false);
-              setFrame(Number(event.target.value));
+            className: "clover-canvas-transport-seek-area",
+            onPointerMove: (event) => {
+              if (!total || event.target.closest(".clover-tip"))
+                return;
+              const box = event.currentTarget.getBoundingClientRect();
+              setPointedAt(
+                clockTime(
+                  seekShare(event.currentTarget, event.clientX) * total,
+                  total
+                )
+              );
+              event.currentTarget.style.setProperty(
+                "--clover-transport-preview",
+                `${(event.clientX - box.left) / box.width * 100}%`
+              );
             },
-            style: {
-              "--clover-transport-progress": `${last ? frame / last * 100 : 0}%`
-            }
-          }
-        ) }),
-        /* @__PURE__ */ jsxs("div", { className: "clover-canvas-transport-bar", ref: bar, children: [
-          /* @__PURE__ */ jsx(
-            TransportButton,
-            {
-              words: "framePrevious",
-              disabled: frame === 0,
-              onClick: () => step(-1),
-              children: /* @__PURE__ */ jsx(
-                "svg",
+            onPointerLeave: () => setPointedAt(null),
+            ref: seekArea,
+            children: [
+              (pointedAt !== null || seekFocused) && /* @__PURE__ */ jsx(Tip, { label: "", lead: pointedAt ?? clockTime(time, total) }),
+              /* @__PURE__ */ jsx(
+                "input",
                 {
-                  "aria-hidden": "true",
-                  focusable: "false",
-                  width: "16",
-                  height: "16",
-                  viewBox: "0 0 16 16",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: "M10 3L5 8l5 5",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "2",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round"
+                  "aria-label": t("playerSeek"),
+                  "aria-valuetext": `${clockTime(time, total)} / ${clockTime(total, total)}, ${position}`,
+                  onFocus: (event) => setSeekFocused(focusVisible(event.currentTarget)),
+                  onBlur: () => setSeekFocused(false),
+                  lang: langOf("playerSeek"),
+                  className: "clover-canvas-transport-seek",
+                  max: total,
+                  min: 0,
+                  step: "any",
+                  type: "range",
+                  value: Math.min(time, total),
+                  onChange: (event) => seek(Number(event.target.value)),
+                  "data-gaps": gaps ? "" : void 0,
+                  style: {
+                    "--clover-transport-progress": `${progress}%`,
+                    ...gaps && {
+                      "--clover-transport-gaps": gaps,
+                      "--clover-transport-at": progress / 100
                     }
-                  )
+                  }
                 }
               )
-            }
-          ),
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "clover-canvas-transport-bar", ref: bar, children: [
           /* @__PURE__ */ jsx(
             TransportButton,
             {
               words: playing ? "playerPause" : "playerPlay",
               button: playing ? "pause" : "play",
               onClick: () => {
-                if (!playing && frame === last) setFrame(0);
+                if (!playing && time >= total) seek(0);
                 setPlaying(!playing);
               },
               children: playing ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx(
-            TransportButton,
-            {
-              words: "frameNext",
-              disabled: frame === last,
-              onClick: () => step(1),
-              children: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  "aria-hidden": "true",
-                  focusable: "false",
-                  width: "16",
-                  height: "16",
-                  viewBox: "0 0 16 16",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: "M6 3l5 5-5 5",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "2",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round"
-                    }
-                  )
-                }
-              )
-            }
-          ),
           /* @__PURE__ */ jsx(
             TransportButton,
             {
@@ -245,60 +368,149 @@ function FrameControls({
               )
             }
           ),
-          /* @__PURE__ */ jsxs("span", { className: "clover-canvas-transport-frames", children: [
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                id: triggerId,
-                className: "clover-canvas-transport-time",
-                "aria-controls": open ? menuId : void 0,
-                "aria-expanded": open,
-                onClick: () => {
-                  if (!open) setPlaying(false);
-                  setOpen(!open);
-                },
-                children: [
-                  /* @__PURE__ */ jsx("span", { "aria-live": "off", lang: langOf("framePosition"), children: position }),
-                  /* @__PURE__ */ jsx(
-                    "svg",
-                    {
-                      "aria-hidden": "true",
-                      focusable: "false",
-                      width: "12",
-                      height: "12",
-                      viewBox: "0 0 12 12",
-                      children: /* @__PURE__ */ jsx(
-                        "path",
+          sound && /* @__PURE__ */ jsx(
+            TransportButton,
+            {
+              words: sound.muted ? "playerUnmute" : "playerMute",
+              button: "mute",
+              onClick: sound.toggle,
+              children: sound.muted ? /* @__PURE__ */ jsx(VolumeMutedIcon, {}) : /* @__PURE__ */ jsx(VolumeHighIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "clover-canvas-transport-status", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("span", { className: "clover-canvas-transport-time", children: [
+            clockTime(time, total),
+            " / ",
+            clockTime(total, total)
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "clover-canvas-transport-end", children: [
+            /* @__PURE__ */ jsxs("span", { className: "clover-canvas-transport-frames", ref: holder, children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  id: triggerId,
+                  className: "clover-canvas-transport-time",
+                  "aria-controls": open ? menuId : void 0,
+                  "aria-expanded": open,
+                  onClick: () => {
+                    if (!open) setPlaying(false);
+                    setOpen(!open);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { className: "clover-canvas-transport-place", "aria-live": "off", children: [
+                      /* @__PURE__ */ jsx("span", { children: position }),
+                      /* @__PURE__ */ jsxs(
+                        "span",
                         {
-                          d: "M3 7.5l3-3 3 3",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "1.5",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round"
+                          className: "clover-canvas-transport-place-room",
+                          "aria-hidden": "true",
+                          hidden: true,
+                          children: [
+                            frames.length,
+                            " / ",
+                            frames.length
+                          ]
                         }
                       )
-                    }
-                  )
-                ]
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        "aria-hidden": "true",
+                        focusable: "false",
+                        width: "12",
+                        height: "12",
+                        viewBox: "0 0 12 12",
+                        children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            d: "M3 7.5l3-3 3 3",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "1.5",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              open && /* @__PURE__ */ jsx(
+                ChoiceMenu,
+                {
+                  id: menuId,
+                  triggerId,
+                  label: t("playerChapters"),
+                  labelLang: langOf("playerChapters"),
+                  language,
+                  choices: [group],
+                  selections: { frame },
+                  onSelect: (_key, index) => {
+                    setPlaying(false);
+                    setFrame(index);
+                  },
+                  onClose: close
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              TransportButton,
+              {
+                words: "commonPrevious",
+                disabled: here === 0,
+                onClick: () => step(-1),
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    "aria-hidden": "true",
+                    focusable: "false",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M10 3L5 8l5 5",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
               }
             ),
-            open && /* @__PURE__ */ jsx(
-              ChoiceMenu,
+            /* @__PURE__ */ jsx(
+              TransportButton,
               {
-                id: menuId,
-                triggerId,
-                label: t("frameSeek"),
-                labelLang: langOf("frameSeek"),
-                language,
-                choices: [group],
-                selections: { frame },
-                onSelect: (_key, index) => {
-                  setPlaying(false);
-                  setFrame(index);
-                },
-                onClose: close
+                words: "commonNext",
+                disabled: here === starts.length - 1,
+                onClick: () => step(1),
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    "aria-hidden": "true",
+                    focusable: "false",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M6 3l5 5-5 5",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
               }
             )
           ] })
@@ -307,6 +519,82 @@ function FrameControls({
     }
   );
 }
+function itemsOf(frames, canvas, place) {
+  const size = canvasSize(canvas);
+  const kx = place.width / (size.width || 1);
+  const ky = place.height / (size.height || 1);
+  return frames.flatMap((frame, index) => {
+    var _a;
+    const body = bodiesOf(frame.annotation)[0];
+    const type = body == null ? void 0 : body.type;
+    const kind = type === "Video" ? "video" : isSound(type) ? "audio" : type === "TextualBody" && typeof (body == null ? void 0 : body.value) === "string" ? "text" : null;
+    if (!kind || !body || kind !== "text" && typeof body.id !== "string")
+      return [];
+    const rect = (_a = parseAnnotationTarget(frame.annotation.target)) == null ? void 0 : _a.rect;
+    const target = rect ? { x: rect.x, y: rect.y, width: rect.w, height: rect.h } : { x: 0, y: 0, width: size.width, height: size.height };
+    return [
+      {
+        index,
+        id: `${frame.annotation.id ?? index}#${kind}`,
+        kind,
+        body,
+        placement: {
+          x: place.x + target.x * kx,
+          y: place.y + target.y * ky,
+          width: target.width * kx,
+          height: target.height * ky
+        }
+      }
+    ];
+  });
+}
+function PaintedText({
+  host,
+  item,
+  shown,
+  language
+}) {
+  useEffect(() => {
+    if (!shown || host.dataset.fitted) return;
+    let frame = 0;
+    const fit = () => {
+      if (!host.isConnected) {
+        frame = requestAnimationFrame(fit);
+        return;
+      }
+      const { width, height } = item.placement;
+      const fits = (size) => {
+        host.style.fontSize = `${size}px`;
+        return host.scrollWidth <= width + 1 && host.scrollHeight <= height + 1;
+      };
+      let low = 1;
+      let high = height * 0.8;
+      if (!fits(high))
+        for (let step = 0; step < 16; step += 1) {
+          const middle = (low + high) / 2;
+          if (fits(middle)) low = middle;
+          else high = middle;
+        }
+      else low = high;
+      host.style.fontSize = `${low}px`;
+      host.dataset.fitted = "";
+    };
+    frame = requestAnimationFrame(fit);
+    return () => cancelAnimationFrame(frame);
+  }, [host, item, shown]);
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      Markup,
+      {
+        as: "div",
+        markup: { [item.body.language ?? "none"]: [item.body.value] },
+        format: item.body.format,
+        language
+      }
+    ),
+    host
+  );
+}
 function FrameAnimation({
   renderer,
   frames,
@@ -316,29 +604,142 @@ function FrameAnimation({
   autoplay,
   loop,
   onEnded,
-  language
+  language,
+  duration,
+  canvas,
+  place,
+  onItems
 }) {
   const animation = useAnimation(frames, animationKey, {
     autoplay,
     loop,
+    duration,
     onEnded,
     isReady: (frame) => (byFrame[frame] ?? []).every((id) => renderer.isReady(id))
   });
+  const items = useMemo(
+    () => canvas && place ? itemsOf(frames, canvas, place) : [],
+    [frames, canvas, place]
+  );
+  const [made, setMade] = useState(
+    []
+  );
   useEffect(() => {
-    const shown = new Set(byFrame[animation.frame] ?? []);
-    renderer.setHidden(byFrame.flat().filter((id) => !shown.has(id)));
-  }, [renderer, byFrame, animation.frame, sceneVersion]);
-  return /* @__PURE__ */ jsx("div", { className: "clover-canvas-media", "data-kind": "frames", children: /* @__PURE__ */ jsx(
-    FrameControls,
-    {
-      frames,
-      animation,
-      language
+    const elements = items.map((item) => {
+      if (item.kind === "text") {
+        const host = document.createElement("div");
+        host.className = "clover-canvas-painted-text";
+        host.setAttribute("aria-hidden", "true");
+        return { item, element: host };
+      }
+      const media = document.createElement(item.kind);
+      media.preload = "auto";
+      media.playsInline = true;
+      media.src = item.body.id;
+      return { item, element: media };
+    });
+    setMade(elements);
+    return () => {
+      for (const { element } of elements) {
+        if (!(element instanceof HTMLMediaElement)) continue;
+        element.pause();
+        element.removeAttribute("src");
+        element.load();
+      }
+    };
+  }, [items]);
+  const report = useRef(onItems);
+  report.current = onItems;
+  useEffect(() => {
+    var _a;
+    (_a = report.current) == null ? void 0 : _a.call(
+      report,
+      made.filter(({ item }) => item.kind !== "audio").map(({ item, element }) => ({
+        id: item.id,
+        placement: item.placement,
+        width: item.placement.width,
+        height: item.placement.height,
+        media: { element },
+        hidden: true
+      }))
+    );
+    return () => {
+      var _a2;
+      return (_a2 = report.current) == null ? void 0 : _a2.call(report, []);
+    };
+  }, [made]);
+  const [muted, setMuted] = useState(Boolean(autoplay));
+  useEffect(() => {
+    var _a;
+    for (const { item, element } of made) {
+      if (!(element instanceof HTMLMediaElement)) continue;
+      element.muted = muted;
+      if (!animation.shown.includes(item.index)) {
+        if (!element.paused) element.pause();
+        continue;
+      }
+      const own = Math.max(0, animation.time - frames[item.index].start);
+      const drift = Math.abs(element.currentTime - own);
+      if (drift > (animation.playing ? 1 : 0.1)) {
+        try {
+          element.currentTime = own;
+        } catch {
+        }
+      }
+      if (animation.playing && element.paused)
+        void ((_a = element.play()) == null ? void 0 : _a.catch(() => void 0));
+      else if (!animation.playing && !element.paused) element.pause();
     }
-  ) });
+  }, [made, frames, animation.shown, animation.time, animation.playing, muted]);
+  useEffect(() => {
+    const shown = /* @__PURE__ */ new Set([
+      ...animation.shown.flatMap((frame) => byFrame[frame] ?? []),
+      ...made.filter(({ item }) => animation.shown.includes(item.index)).map(({ item }) => item.id)
+    ]);
+    renderer.setHidden(
+      [...byFrame.flat(), ...made.map(({ item }) => item.id)].filter(
+        (id) => !shown.has(id)
+      )
+    );
+  }, [renderer, byFrame, made, animation.shown, sceneVersion]);
+  const texts = made.filter(({ item }) => item.kind === "text");
+  const sound = made.some(({ item }) => item.kind !== "text");
+  return /* @__PURE__ */ jsxs("div", { className: "clover-canvas-media", "data-kind": "frames", children: [
+    texts.some(({ item }) => animation.shown.includes(item.index)) && /* @__PURE__ */ jsx("div", { style: visuallyHidden, children: texts.filter(({ item }) => animation.shown.includes(item.index)).map(({ item }) => /* @__PURE__ */ jsx(
+      Markup,
+      {
+        as: "p",
+        markup: { [item.body.language ?? "none"]: [item.body.value] },
+        format: item.body.format,
+        language
+      },
+      item.id
+    )) }),
+    texts.map(({ item, element }) => /* @__PURE__ */ jsx(
+      PaintedText,
+      {
+        host: element,
+        item,
+        shown: animation.shown.includes(item.index),
+        language
+      },
+      item.id
+    )),
+    /* @__PURE__ */ jsx(
+      FrameControls,
+      {
+        frames,
+        animation,
+        language,
+        sound: sound ? { muted, toggle: () => setMuted((was) => !was) } : void 0
+      }
+    )
+  ] });
 }
 export {
   FrameControls,
+  clockTime,
   FrameAnimation as default,
+  framesAt,
   useAnimation
 };