@nulib/clover 4.1.0 → 4.3.0

package/README.md

@@ -94,7 +94,7 @@ If you serve Clover's files yourself, copy the whole `dist/web-components` folde
 | ------------------------------------- | ------------------------------------------------------------------------------------- |
 | `@nulib/clover`                       | The Viewer (the default export), and every part, hook and helper (named).             |
 | `@nulib/clover/templates`             | The templates: `Default`, `Document` and `Gallery`.                                   |
-| `@nulib/clover/map`                   | `Map`, for navPlace and georeferenced images. The Viewer adds its Map tab itself.     |
+| `@nulib/clover/map`                   | `Map` and its helpers, as `@nulib/clover` exports them (`Clover.Map`).                |
 | `@nulib/clover/three`                 | `registerThreeEngine`, to draw a Scene with three.js, which you install.              |
 | `@nulib/clover/web-components`        | `<clover-viewer>`, and every part as an element.                                      |
 | `@nulib/clover/web-components/viewer` | `<clover-viewer>` alone, for a page that shows a Viewer and nothing else of Clover's. |

package/dist/components/Body/useControlsVisibility.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { useState, useEffect } from "react";
 import { isDirect, TAP_MS, isHovering, TAP_SLOP, isInteractive, DOUBLE_TAP_SLOP } from "../../lib/pointer.mjs";
-const DEFAULT_HIDE_DELAY = 2e3;
+const DEFAULT_HIDE_DELAY = 3e3;
 const LEAVE_DELAY = 1e3;
 const PRESS_FOCUS_MS = 1e3;
 const FADING_CONTROLS = [
@@ -20,10 +20,12 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
     let focusHeld = false;
     let penHovers = false;
     let pressedAt = -Infinity;
+    let pressedInside = false;
     let held = null;
     let swallowClick = false;
     let clickTimer;
     let press = null;
+    let using = null;
     let tap = null;
     const set = (value) => {
       shown = value;
@@ -40,6 +42,11 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
       if (tap) clearTimeout(tap.timer);
       tap = null;
     };
+    const touchShow = () => {
+      set(true);
+      stop();
+      if (Number.isFinite(hideDelay)) timer = setTimeout(hide, hideDelay);
+    };
     const direct = (event) => isDirect(event.pointerType, penHovers);
     const show = (event) => {
       keyboard = event.type === "keydown";
@@ -59,7 +66,10 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
         ...at,
         timer: setTimeout(() => {
           tap = null;
-          set(at.onPicture ? !shown : true);
+          if (at.onPicture && shown) {
+            stop();
+            set(false);
+          } else touchShow();
         }, TAP_MS)
       };
     };
@@ -70,10 +80,21 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
         press = null;
       }
     };
+    const onPicture = (target) => {
+      const pictureElement = picture == null ? void 0 : picture.current;
+      return Boolean(
+        pictureElement && target instanceof Node && pictureElement.contains(target)
+      );
+    };
     const down = (event) => {
       if (!direct(event)) return show(event);
       keyboard = false;
       stop();
+      using = isInteractive(event.target, element) && !onPicture(event.target) ? {
+        id: event.pointerId,
+        inSight: shown || getComputedStyle(element).getPropertyValue("--clover-controls-shown").trim() === "1"
+      } : null;
+      if (using) forgetTap();
       press = event.isPrimary === false ? null : {
         id: event.pointerId,
         x: event.clientX,
@@ -82,26 +103,25 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
       };
     };
     const up = (event) => {
-      if (!direct(event) || (press == null ? void 0 : press.id) !== event.pointerId) return;
+      if (!direct(event)) return;
+      if ((using == null ? void 0 : using.id) === event.pointerId) {
+        if (using.inSight) touchShow();
+        using = null;
+      } else if (shown && event.isPrimary !== false) touchShow();
+      if ((press == null ? void 0 : press.id) !== event.pointerId) return;
       const { target } = press;
       press = null;
       if (event.type !== "pointerup") return;
       if (isInteractive(target, element)) return;
-      const pictureElement = picture == null ? void 0 : picture.current;
-      const onPicture = Boolean(
-        pictureElement && target instanceof Node && pictureElement.contains(target)
-      );
-      if (onPicture && (tap == null ? void 0 : tap.onPicture) && Math.hypot(event.clientX - tap.x, event.clientY - tap.y) < DOUBLE_TAP_SLOP) {
+      const tapped = onPicture(target);
+      if (tapped && (tap == null ? void 0 : tap.onPicture) && Math.hypot(event.clientX - tap.x, event.clientY - tap.y) < DOUBLE_TAP_SLOP) {
         forgetTap();
         return;
       }
-      later({ x: event.clientX, y: event.clientY, onPicture });
+      later({ x: event.clientX, y: event.clientY, onPicture: tapped });
     };
     const underFadedControls = (event) => {
-      const pictureElement = picture == null ? void 0 : picture.current;
-      const target = event.target;
-      if (!pictureElement || !target || !pictureElement.contains(target))
-        return false;
+      if (!onPicture(event.target)) return false;
       return Array.from(element.querySelectorAll(FADING_CONTROLS)).some(
         (piece) => {
           const box = piece.getBoundingClientRect();
@@ -144,6 +164,7 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
     };
     const pressed = (event) => {
       pressedAt = Date.now();
+      pressedInside = element.contains(event.target);
       if (event.type === "pointerdown") focusHeld = false;
     };
     const focus = () => {
@@ -159,6 +180,7 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
     const blur = (event) => {
       if (element.contains(event.relatedTarget)) return;
       focusHeld = false;
+      if (pressedInside && Date.now() - pressedAt < PRESS_FOCUS_MS) return;
       if (shown || keyboard) linger();
     };
     page.addEventListener("pointerdown", pressed, true);

package/dist/components/Canvas/CanvasView.mjs

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useRef, useState, useMemo, useEffect, useCallback, useLayoutEffect, Suspense, lazy } from "react";
 import Caption, { hasInformation, captionLabelId } from "../Body/Caption.mjs";
-import Controls from "./Controls.mjs";
+import Controls, { NO_LIMITS } from "./Controls.mjs";
 import { findChoices, startingChoices, animationFrames, canvasScene, paintedType, placeholderStill, frameKey, canvasSize, canvasRectToWorld } from "./layout.mjs";
 import ExitFullscreen from "../../ui/ExitFullscreen.mjs";
 import { useNearViewport } from "../Body/useNearViewport.mjs";
@@ -24,12 +24,15 @@ import { HostLanguageContext } from "../../i18n/hostLanguage.mjs";
 import { useRootLanguage } from "../../i18n/useRootLanguage.mjs";
 import { useContainerName } from "../../i18n/useContainerName.mjs";
 import { union } from "../../lib/renderer/math/rect.mjs";
-import { findImageServiceId } from "../../lib/renderer/sources/imageService.mjs";
+import { findImageServiceId, fetchInfo } from "../../lib/renderer/sources/imageService.mjs";
 import { hasCamera } from "./surface.mjs";
 import { languageProps } from "../../i18n/direction.mjs";
-import { buildContentState } from "../../core/content-state.mjs";
 import { useContentStateOutput, watchMedia } from "../../react/useContentStateOutput.mjs";
 import { resolveDirection } from "../../core/sequence.mjs";
+let writeContentState;
+const loadContentState = () => import("../../core/content-state.mjs").then((module) => {
+  writeContentState = module.buildContentState;
+});
 const MediaBody = lazy(() => import("./media/MediaBody.mjs"));
 const loadHotspots = () => import("./AnnotationState.mjs");
 const NO_COMMENTS = /* @__PURE__ */ new Map();
@@ -166,6 +169,7 @@ const CanvasBody = (props) => {
   const [status, setStatus] = useState("loading");
   const [unloadable, setUnloadable] = useState(false);
   const [sceneVersion, setSceneVersion] = useState(0);
+  const [viewLimits, setViewLimits] = useState(NO_LIMITS);
   const onReadyRef = useRef(onReady);
   const onViewportChangeRef = useRef(onViewportChange);
   const optionsRef = useRef(options);
@@ -309,6 +313,15 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
   const [imagesOpen, setImagesOpen] = useState(false);
   const [mediaOpenedFor, setMediaOpenedFor] = useState(null);
   const showPlaceholder = !player && stills.length > 0 && (media ? mediaOpenedFor !== canvasKey : !imagesOpen);
+  const stillsRequest = options == null ? void 0 : options.request;
+  useEffect(() => {
+    if (!showPlaceholder) return;
+    void import("../../core/thumbnail.mjs");
+    for (const { source } of stills)
+      if (source.service)
+        fetchInfo(source.service, { request: stillsRequest }).catch(() => {
+        });
+  }, [showPlaceholder, stills, stillsRequest]);
   const onlyInformation = (config, { annotations = false, fullPage = false } = {}) => ({
     ...config,
     zoom: false,
@@ -410,7 +423,11 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
     const region = !time && surface2 && hasCamera(surface2) ? canvasRegion(surface2.getBounds(), shown.canvases, shown.placements) : null;
     const canvas = shown.canvases.find((each) => each.id === (region == null ? void 0 : region.canvasId)) ?? shown.canvases[0];
     if (!canvas) return null;
-    return buildContentState({
+    if (!writeContentState) {
+      void loadContentState().then(() => contentStateChanged());
+      return null;
+    }
+    return writeContentState({
       manifestId,
       canvasId: canvas.id,
       type: canvas.type,
@@ -435,8 +452,16 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
     surfaceRef.current = surface2;
     setSurface(surface2);
     surface2.setDismiss(releaseAnnotation);
+    const readLimits = () => {
+      if (!renderer2) return;
+      const next = renderer2.viewLimits();
+      setViewLimits(
+        (last) => last.atMax === next.atMax && last.atMin === next.atMin && last.atHome === next.atHome ? last : next
+      );
+    };
     const offOpen = surface2.on("open", () => {
       var _a2;
+      readLimits();
       setCleared(false);
       markDrawn();
       contentStateChanged();
@@ -464,6 +489,7 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
       );
     });
     const offChange = surface2.on("change", () => {
+      readLimits();
       setCleared(false);
       markDrawn();
       contentStateChanged();
@@ -479,6 +505,7 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
     );
     const offViewport = surface2.on("viewport", () => {
       var _a2;
+      readLimits();
       if (renderer2) (_a2 = onViewportChangeRef.current) == null ? void 0 : _a2.call(onViewportChangeRef, renderer2.getBounds());
       contentStateChanged();
     });
@@ -594,10 +621,12 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
             instance,
             config: shownControls ?? NO_CONTROLS,
             controlButtons,
+            limits: viewLimits,
             placeholderIsMore: cornerToggle && !media,
             chapters: media ? chapters : void 0,
             mediaElement,
             onChapter: goToChapter,
+            overStill: Boolean(media) && showPlaceholder,
             request: options == null ? void 0 : options.request,
             placeholder: cornerToggle && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
               PlaceholderToggle,

package/dist/components/Canvas/ChaptersMenu.mjs

@@ -15,6 +15,7 @@ const ChaptersMenu = ({
   chapters,
   element,
   onChapter,
+  overStill = false,
   request,
   onClose
 }) => {
@@ -59,7 +60,11 @@ const ChaptersMenu = ({
                   type: "radio",
                   name: id,
                   checked: index === current,
-                  onChange: () => go(index),
+                  onChange: () => {
+                    if (overStill && !pointer.current)
+                      setTime(chapters[index].start);
+                    else go(index);
+                  },
                   onClick: () => {
                     if (pointer.current) onClose(true);
                   },

package/dist/components/Canvas/ControlMenu.mjs

@@ -48,8 +48,15 @@ const ControlMenu = ({
       const inside2 = Boolean(
         ((_a = ref.current) == null ? void 0 : _a.contains(active)) || ((_b = document.getElementById(triggerId)) == null ? void 0 : _b.contains(active))
       );
-      if (inside2) event.preventDefault();
-      onClose(inside2);
+      if (inside2) {
+        event.preventDefault();
+        onClose(true);
+        return;
+      }
+      const after = (late) => {
+        if (late === event && !event.defaultPrevented) onClose(false);
+      };
+      document.addEventListener("keydown", after, { once: true });
     };
     document.addEventListener("pointerdown", onPointerDown);
     document.addEventListener("keydown", onKeyDown, true);

package/dist/components/Canvas/Controls.mjs

@@ -26,11 +26,17 @@ const VIEW = /* @__PURE__ */ new Set([
   "reset",
   "fullPage"
 ]);
+const NO_LIMITS = {
+  atMax: false,
+  atMin: false,
+  atHome: false
+};
 const Controls = ({
   renderer,
   instance,
   config,
   controlButtons,
+  limits = NO_LIMITS,
   placeholder,
   placeholderIsMore = false,
   choices = [],
@@ -40,6 +46,7 @@ const Controls = ({
   chapters = [],
   mediaElement = null,
   onChapter,
+  overStill,
   request,
   hiddenPages,
   onPageVisibilityChange,
@@ -168,6 +175,7 @@ const Controls = ({
           label: t("imageZoomIn"),
           lang: langOf("imageZoomIn"),
           glyph: /* @__PURE__ */ jsx(ZoomIn, {}),
+          unavailable: limits.atMax,
           onClick: () => camera.zoomBy(ZOOM_PER_CLICK)
         },
         {
@@ -177,6 +185,7 @@ const Controls = ({
           label: t("imageZoomOut"),
           lang: langOf("imageZoomOut"),
           glyph: /* @__PURE__ */ jsx(ZoomOut, {}),
+          unavailable: limits.atMin,
           onClick: () => camera.zoomBy(1 / ZOOM_PER_CLICK)
         }
       );
@@ -222,6 +231,7 @@ const Controls = ({
         label: t("imageResetZoom"),
         lang: langOf("imageResetZoom"),
         glyph: /* @__PURE__ */ jsx(Reset, {}),
+        unavailable: limits.atHome,
         // Home also turns the image upright, as `Image`'s reset does.
         onClick: () => camera.home()
       });
@@ -325,10 +335,10 @@ const Controls = ({
   const always = moreWhen === "always" || placeholderIsMore;
   const ImageControls = (_d = useLoaded(
     loadImageControls,
-    fit && (always || !fits) && items.some((item) => item.view)
+    fit && (placeholderIsMore || (always || !fits) && items.some((item) => item.view))
   )) == null ? void 0 : _d.ImageControls;
   const tucked = fits && !always || !ImageControls ? [] : items.filter((item) => item.view);
-  const deck = placeholderIsMore && tucked.length > 0;
+  const deck = placeholderIsMore && Boolean(placeholder) && Boolean(ImageControls);
   useEffect(() => {
     if (!tucked.length) setMoreOpen(false);
   }, [tucked.length]);
@@ -338,11 +348,11 @@ const Controls = ({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(ControlCluster, { fit, clusterRef: setCluster, children: [
       shown(lead),
-      ImageControls && tucked.length > 0 && /* @__PURE__ */ jsx(
+      ImageControls && (tucked.length > 0 || deck) && /* @__PURE__ */ jsx(
         ImageControls,
         {
           instance,
-          open: deck || moreOpen,
+          open: deck ? tucked.length > 0 : moreOpen,
           onOpenChange: setMoreOpen,
           toggle: deck ? placeholder : void 0,
           children: tucked.map(({ node }) => node)
@@ -358,6 +368,7 @@ const Controls = ({
         ids: items.map(({ id }) => id),
         more: `more-${instance}`,
         fits,
+        settled: fits || tucked.length > 0 || !items.some((item) => item.view),
         onFits: setFits
       }
     ),
@@ -371,6 +382,7 @@ const Controls = ({
         chapters,
         element: mediaElement,
         onChapter,
+        overStill,
         request,
         onClose: closeChapters
       }
@@ -408,5 +420,6 @@ const Controls = ({
   ] });
 };
 export {
+  NO_LIMITS,
   Controls as default
 };

package/dist/components/Canvas/FrameAnimation.mjs

@@ -19,6 +19,8 @@ import { PauseIcon, PlayIcon, VolumeMutedIcon, VolumeHighIcon } from "../../ui/m
 import { formatTime } from "../../lib/time.mjs";
 import { gapsOf, gapMask, alongBar, seekShare } from "./media/seekGaps.mjs";
 import { placeMenu } from "./media/placeMenu.mjs";
+import { adoptSheet } from "../../ui/adoptSheet.mjs";
+import __clover_sheet_media from "../../ui/sheets/media.mjs";
 const clockTime = (seconds, total) => total < 10 ? `${formatTime(seconds)}.${Math.min(9, Math.floor((seconds || 0) % 1 * 10))}` : formatTime(seconds);
 const focusVisible = (element) => {
   try {
@@ -736,6 +738,7 @@ function FrameAnimation({
     )
   ] });
 }
+adoptSheet("media", __clover_sheet_media);
 export {
   FrameControls,
   clockTime,

package/dist/components/Canvas/ImageControls.mjs

@@ -7,7 +7,7 @@ import { useContainerName } from "../../i18n/useContainerName.mjs";
 import { useOneOpen } from "../../ui/useOneOpen.mjs";
 import { CloseViewer, OpenViewer } from "../Body/glyphs.mjs";
 import { languageProps } from "../../i18n/direction.mjs";
-import { Tip } from "../../ui/Tip.mjs";
+import { placeTipAgain, Tip } from "../../ui/Tip.mjs";
 function overhang(list) {
   var _a, _b;
   const box = list.getBoundingClientRect();
@@ -90,14 +90,19 @@ function ImageControls({
       else if (under > 0) list2.scrollLeft -= Math.min(under, Math.max(left, 0));
       mark();
     };
+    const scrolled = () => {
+      mark();
+      const active = list2.ownerDocument.activeElement;
+      if (active && list2.contains(active)) placeTipAgain(active);
+    };
     mark();
-    list2.addEventListener("scroll", mark, { passive: true });
+    list2.addEventListener("scroll", scrolled, { passive: true });
     list2.addEventListener("focusin", reveal);
     list2.addEventListener("animationend", mark);
     const resize = new ResizeObserver(() => mark());
     resize.observe(list2);
     return () => {
-      list2.removeEventListener("scroll", mark);
+      list2.removeEventListener("scroll", scrolled);
       list2.removeEventListener("focusin", reveal);
       list2.removeEventListener("animationend", mark);
       resize.disconnect();

package/dist/components/Canvas/Placeholder.mjs

@@ -57,6 +57,8 @@ function PlaceholderToggle({
       id,
       label: t(toggleKey),
       lang: langOf(toggleKey),
+      expanded: more && !media ? !active : void 0,
+      controls: more && !media ? `more-${instance}-list` : void 0,
       onClick: (event) => {
         const focused = document.activeElement === event.currentTarget;
         const figure = event.currentTarget.closest(".clover-canvas");
@@ -100,12 +102,13 @@ const Placeholder = ({
         onToggle
       }
     ),
-    (active || lingering) && /* @__PURE__ */ jsx(
+    (active || lingering || !media) && /* @__PURE__ */ jsx(
       "div",
       {
         "aria-hidden": active ? void 0 : true,
         className: "clover-canvas-placeholder",
-        "data-lingering": !active,
+        "data-hidden": !active && !lingering,
+        "data-lingering": !active && lingering,
         "data-media": media,
         "data-testid": "clover-canvas-placeholder",
         "data-vertical": vertical,

package/dist/components/Canvas/RowFits.mjs

@@ -18,6 +18,7 @@ function Fits({
   ids,
   more,
   fits,
+  settled,
   onFits
 }) {
   const shown = useRef(fits);
@@ -70,13 +71,14 @@ function Fits({
     };
   }, [cluster, key, more]);
   useLayoutEffect(() => {
+    if (!settled) return;
     const id = moved.current;
     moved.current = null;
     if (id === null) return;
     const active = cluster.ownerDocument.activeElement;
     if (!active || !cluster.contains(active) || active.closest("[hidden]"))
       refocus(cluster, id, more);
-  }, [fits, cluster, more]);
+  }, [fits, settled, cluster, more]);
   return null;
 }
 export {

package/dist/components/Canvas/media/MediaBody.mjs

@@ -11,6 +11,8 @@ import { hasCamera } from "../surface.mjs";
 import { useOptionalClover } from "../../../react/context.mjs";
 import { BodyUnloadable } from "../../../ui/BodyUnloadable.mjs";
 import { languageProps } from "../../../i18n/direction.mjs";
+import { adoptSheet } from "../../../ui/adoptSheet.mjs";
+import __clover_sheet_media from "../../../ui/sheets/media.mjs";
 const SKIP_SECONDS = 10;
 const MOMENT_SECONDS = 3;
 const MediaBody = ({
@@ -363,6 +365,7 @@ function containAspect(box, size) {
     height
   };
 }
+adoptSheet("media", __clover_sheet_media);
 export {
   containAspect,
   MediaBody as default,

package/dist/components/Canvas/media/Player.mjs

@@ -5,6 +5,8 @@ import { thumbnailSource, stillSource } from "../../../core/thumbnail.mjs";
 import { localize } from "../../../core/value.mjs";
 import { useThumbnail } from "../../../ui/EntryThumbnail.mjs";
 import { languageProps } from "../../../i18n/direction.mjs";
+import { adoptSheet } from "../../../ui/adoptSheet.mjs";
+import __clover_sheet_media from "../../../ui/sheets/media.mjs";
 const ART_SIZE = 1200;
 const GROUND_SIZE = 32;
 function artworkOf(canvas, language) {
@@ -119,6 +121,7 @@ function PlayerFace({
     ] })
   ] });
 }
+adoptSheet("media", __clover_sheet_media);
 export {
   PlayerFace
 };

package/dist/components/Canvas/media/Transport.mjs

@@ -17,6 +17,8 @@ import { useCloverTranslation } from "../../../i18n/useCloverTranslation.mjs";
 import { toggleFullscreen } from "../../../lib/fullscreen.mjs";
 import useFullscreenSupported from "../../../hooks/useFullscreenSupported.mjs";
 import { languageProps } from "../../../i18n/direction.mjs";
+import { adoptSheet } from "../../../ui/adoptSheet.mjs";
+import __clover_sheet_media from "../../../ui/sheets/media.mjs";
 import { formatTime } from "../../../lib/time.mjs";
 const chapterPicture = (chapter) => typeof (chapter == null ? void 0 : chapter.thumbnail) === "string" ? { src: chapter.thumbnail } : imageSource(chapter == null ? void 0 : chapter.thumbnail);
 function chapterAt(chapters, time) {
@@ -528,6 +530,7 @@ const Transport = ({
     }
   );
 };
+adoptSheet("media", __clover_sheet_media);
 export {
   chapterAt,
   chapterPicture,

package/dist/components/Canvas/media/useMediaElement.mjs

@@ -4,7 +4,7 @@ import { STILL_SIZE } from "../layout.mjs";
 import { resolveThumbnail } from "../../../core/thumbnail.mjs";
 import { localize } from "../../../core/value.mjs";
 import { sendsCredentials, requestKey } from "../../../core/request.mjs";
-import { loadVtt } from "../../../core/vtt.mjs";
+import { loadVtt, vttBlocks } from "../../../core/vtt.mjs";
 import { isHls } from "../../../lib/hls.mjs";
 function captionName(caption, index, language) {
   const name = localize(caption.label, language);
@@ -34,7 +34,6 @@ function useMediaElement(media, { request, language }) {
           if (!canceled && url) video.poster = url;
         }
       );
-    const blobs = [];
     media.captions.forEach((caption, index) => {
       const track = document.createElement("track");
       track.kind = caption.kind;
@@ -42,12 +41,7 @@ function useMediaElement(media, { request, language }) {
       track.label = captionName(caption, index, languageRef.current).text;
       video.appendChild(track);
       loadVtt(caption.id, requestRef.current).then((text) => {
-        if (canceled) return;
-        const url = URL.createObjectURL(
-          new Blob([text], { type: "text/vtt" })
-        );
-        blobs.push(url);
-        track.src = url;
+        if (!canceled) addCues(track.track, text);
       }).catch(() => void 0);
     });
     let hls = null;
@@ -100,7 +94,6 @@ function useMediaElement(media, { request, language }) {
       video.removeAttribute("src");
       video.load();
       video.remove();
-      blobs.forEach((url) => URL.revokeObjectURL(url));
       setElement(null);
     };
   }, [
@@ -113,7 +106,37 @@ function useMediaElement(media, { request, language }) {
   ]);
   return element;
 }
+function addCues(track, text) {
+  if (!track || typeof VTTCue === "undefined") return;
+  for (const { id, start, end, settings, raw } of vttBlocks(text)) {
+    const cue = new VTTCue(start, end, raw);
+    cue.id = id;
+    settle(cue, settings);
+    track.addCue(cue);
+  }
+}
+function settle(cue, settings) {
+  for (const setting of settings.split(" ")) {
+    const [name, value = ""] = setting.split(":");
+    const [first, second] = value.split(",");
+    try {
+      if (name === "vertical") cue.vertical = first;
+      else if (name === "align") cue.align = first;
+      else if (name === "size") cue.size = parseFloat(first);
+      else if (name === "position") {
+        cue.position = parseFloat(first);
+        if (second) cue.positionAlign = second;
+      } else if (name === "line") {
+        cue.snapToLines = !first.endsWith("%");
+        cue.line = parseFloat(first);
+        if (second) cue.lineAlign = second;
+      }
+    } catch {
+    }
+  }
+}
 export {
+  addCues,
   captionName,
   useMediaElement
 };

package/dist/components/Items/masonry.mjs

@@ -1,5 +1,6 @@
 "use client";
 function attachMasonry(box) {
+  box.dataset.masonry = "";
   const items = () => Array.from(
     box.querySelectorAll(
       ".clover-items-track > .clover-items-item"
@@ -28,6 +29,7 @@ function attachMasonry(box) {
     added.disconnect();
     sizes == null ? void 0 : sizes.disconnect();
     items().forEach((item) => item.style.removeProperty("grid-row-end"));
+    delete box.dataset.masonry;
   };
 }
 export {