@nulib/clover 4.2.0 → 4.3.1

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

@@ -0,0 +1,236 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef, useState, useLayoutEffect, useMemo } from "react";
+import { alongBar } from "./seekGaps.mjs";
+import { Steps } from "../../../ui/Steps.mjs";
+import { hideUntilBack } from "../../../ui/Tip.mjs";
+import { useCloverTranslation } from "../../../i18n/useCloverTranslation.mjs";
+import { languageProps } from "../../../i18n/direction.mjs";
+import { formatTime } from "../../../lib/time.mjs";
+const THUMB = 12;
+function groupMarks(marks, duration, width, target) {
+  const x = (mark) => THUMB / 2 + (width - THUMB) * (mark.start / duration);
+  const groups = [];
+  for (const mark of marks) {
+    const group = groups[groups.length - 1];
+    const near = group ? width > 0 ? x(mark) - x(group[0]) < target : mark.start === group[0].start : false;
+    if (near) group.push(mark);
+    else groups.push([mark]);
+  }
+  return groups;
+}
+const SCROLL_KEYS = {
+  ArrowDown: (words) => parseFloat(getComputedStyle(words).lineHeight) || 16,
+  ArrowUp: (words) => -(parseFloat(getComputedStyle(words).lineHeight) || 16),
+  PageDown: (words) => words.clientHeight,
+  PageUp: (words) => -words.clientHeight
+};
+function scrollWords(event) {
+  const words = event.currentTarget.querySelector(
+    ".clover-canvas-transport-mark-words"
+  );
+  const by = SCROLL_KEYS[event.key];
+  if (!words || !by || event.altKey || event.ctrlKey || event.metaKey)
+    return false;
+  const delta = by(words);
+  const room = delta > 0 ? words.scrollHeight - words.clientHeight - words.scrollTop : words.scrollTop;
+  if (room < 1) return false;
+  event.preventDefault();
+  words.scrollBy({ top: delta });
+  return true;
+}
+function SeekMarks({
+  marks,
+  duration,
+  selected,
+  onSelect,
+  onActivate
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const toolbar = useRef(null);
+  const [bar, setBar] = useState({ width: 0, target: 0, from: 0 });
+  useLayoutEffect(() => {
+    const element = toolbar.current;
+    if (!element) return;
+    const body = element.closest(".clover-canvas-media");
+    const measure = () => {
+      const button = element.querySelector(
+        ".clover-canvas-transport-mark"
+      );
+      const next = {
+        width: element.clientWidth,
+        target: (button == null ? void 0 : button.offsetWidth) ?? 0,
+        from: body ? element.getBoundingClientRect().left - body.getBoundingClientRect().left : 0
+      };
+      setBar(
+        (was) => was.width === next.width && was.target === next.target && was.from === next.from ? was : next
+      );
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    if (body) observer.observe(body);
+    return () => observer.disconnect();
+  }, []);
+  const groups = useMemo(
+    () => groupMarks(marks, duration, bar.width, bar.target),
+    [marks, duration, bar]
+  );
+  const [stepped, setStepped] = useState({});
+  const shownIn = (group) => {
+    const picked = group.findIndex((mark) => mark.id === selected);
+    if (picked >= 0) return picked;
+    return Math.min(stepped[group[0].id] ?? 0, group.length - 1);
+  };
+  const [focused, setFocused] = useState(null);
+  const [lit, setLit] = useState(null);
+  const light = (id) => {
+    setLit(id);
+    onActivate == null ? void 0 : onActivate(id);
+  };
+  const buttons = useRef([]);
+  const escaped = useRef(/* @__PURE__ */ new Set());
+  if (!marks.length || !(duration > 0)) return null;
+  const holds = (group, id) => Boolean(id) && group.some((mark) => mark.id === id);
+  const stop = Math.max(
+    0,
+    groups.findIndex((group) => holds(group, focused ?? selected))
+  );
+  const moveTo = (index) => {
+    var _a;
+    const next = Math.min(groups.length - 1, Math.max(0, index));
+    (_a = buttons.current[next]) == null ? void 0 : _a.focus();
+  };
+  const along = (group) => alongBar(group[0].start / duration * 100);
+  const inBody = (group) => `${bar.from + THUMB / 2 + (bar.width - THUMB) * (group[0].start / duration)}px`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "clover-canvas-transport-points", "aria-hidden": "true", children: groups.map((group) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "clover-canvas-transport-mark-point",
+        "data-active": holds(group, lit) || holds(group, selected) ? "true" : void 0,
+        style: { left: along(group) }
+      },
+      group[0].id
+    )) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: toolbar,
+        className: "clover-canvas-transport-marks",
+        role: "toolbar",
+        "aria-label": t("informationPanelTabsAnnotations"),
+        lang: langOf("informationPanelTabsAnnotations"),
+        onKeyDown: (event) => {
+          const index = buttons.current.findIndex(
+            (button) => button === document.activeElement
+          );
+          if (index < 0) return;
+          const step = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
+          if (event.key === "ArrowRight") moveTo(index + step);
+          else if (event.key === "ArrowLeft") moveTo(index - step);
+          else if (event.key === "Home") moveTo(0);
+          else if (event.key === "End") moveTo(groups.length - 1);
+          else return;
+          event.preventDefault();
+        },
+        children: groups.map((group, index) => {
+          const shown = shownIn(group);
+          const mark = group[shown];
+          const time = formatTime(mark.start);
+          const place = group.length > 1 ? ` ${shown + 1} / ${group.length}` : "";
+          const show = (to) => {
+            setStepped((was) => ({ ...was, [group[0].id]: to }));
+            light(group[to].id);
+            onSelect(group[to].id);
+          };
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "clover-canvas-transport-mark-group",
+              style: {
+                left: along(group),
+                ...bar.width > 0 && { "--clover-mark-x": inBody(group) }
+              },
+              onPointerEnter: () => {
+                escaped.current.delete(group[0].id);
+                light(mark.id);
+              },
+              onPointerLeave: () => light(null),
+              onFocus: () => {
+                escaped.current.delete(group[0].id);
+                setFocused(mark.id);
+                light(mark.id);
+              },
+              onBlur: (event) => {
+                if (!event.currentTarget.contains(event.relatedTarget))
+                  light(null);
+              },
+              onKeyDown: (event) => {
+                if (event.defaultPrevented) return;
+                if (scrollWords(event)) return;
+                if (event.key !== "Escape") return;
+                if (escaped.current.has(group[0].id)) return;
+                event.preventDefault();
+                escaped.current.add(group[0].id);
+                const point = buttons.current[index];
+                if (point && document.activeElement !== point) point.focus();
+                hideUntilBack(event.currentTarget, "tipHidden", [
+                  "pointerenter",
+                  "focusin"
+                ]);
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: (button) => {
+                      buttons.current[index] = button;
+                    },
+                    type: "button",
+                    className: "clover-canvas-transport-mark",
+                    tabIndex: index === stop ? 0 : -1,
+                    "aria-label": `${time} ${mark.label}${place}`,
+                    ...languageProps(mark.lang),
+                    "aria-current": holds(group, selected) ? "true" : void 0,
+                    "data-active": holds(group, selected) ? "true" : void 0,
+                    onClick: () => onSelect(mark.id)
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "clover-tip clover-canvas-transport-mark-tip", children: [
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: "clover-canvas-transport-mark-words",
+                      "aria-hidden": "true",
+                      ...languageProps(mark.lang),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "clover-tip-lead", children: time }),
+                        mark.label
+                      ]
+                    }
+                  ),
+                  group.length > 1 && /* @__PURE__ */ jsx(
+                    Steps,
+                    {
+                      steps: {
+                        position: shown,
+                        total: group.length,
+                        step: (by) => show(shown + by)
+                      }
+                    }
+                  )
+                ] })
+              ]
+            },
+            group[0].id
+          );
+        })
+      }
+    )
+  ] });
+}
+export {
+  SeekMarks,
+  groupMarks
+};

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useRef, useState, useLayoutEffect, useMemo, useEffect } from "react";
+import { useRef, useState, useLayoutEffect, useMemo, Suspense, lazy, useEffect } from "react";
 import { TransportButton } from "./TransportButton.mjs";
 import { useBarHeight } from "./useBarHeight.mjs";
 import { gapsOf, gapMask, alongBar, lengthOnBar, seekShare } from "./seekGaps.mjs";
@@ -17,7 +17,13 @@ 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 SeekMarks = lazy(
+  () => import("./SeekMarks.mjs").then(({ SeekMarks: SeekMarks2 }) => ({ default: SeekMarks2 }))
+);
+const SEEK_MARKS = ".clover-canvas-transport-marks";
 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) {
   var _a;
@@ -240,7 +246,11 @@ const Transport = ({
   highlightedChapter = null,
   onChapterHighlight,
   request,
-  fill
+  fill,
+  marks = [],
+  selectedMark,
+  onMarkSelect,
+  onMarkActivate
 }) => {
   var _a, _b;
   const { t, langOf } = useCloverTranslation();
@@ -350,8 +360,13 @@ const Transport = ({
             ref: seekArea,
             className: "clover-canvas-transport-seek-area",
             onPointerMove: (event) => {
-              if (!duration || event.target.closest(".clover-tip"))
+              const over = event.target;
+              if (over.closest(SEEK_MARKS)) {
+                setPointing(false);
+                point(-1);
                 return;
+              }
+              if (!duration || over.closest(".clover-tip")) return;
               const at = seekShare(event.currentTarget, event.clientX) * duration;
               setPointing(true);
               setPointedAt(Math.floor(at));
@@ -368,6 +383,16 @@ const Transport = ({
               )
             } : void 0,
             children: [
+              onMarkSelect && marks.length > 0 && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+                SeekMarks,
+                {
+                  marks,
+                  duration,
+                  selected: selectedMark,
+                  onSelect: onMarkSelect,
+                  onActivate: onMarkActivate
+                }
+              ) }),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -528,6 +553,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,25 +34,10 @@ 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;
-      if (caption.language) track.srclang = caption.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;
-      }).catch(() => void 0);
-    });
     let hls = null;
+    let attached = Promise.resolve();
     if (isHls(media.src, media.format)) {
-      import("hls.js").then(({ default: Hls }) => {
+      attached = import("hls.js").then(({ default: Hls }) => {
         if (canceled) return;
         if (!Hls.isSupported()) {
           video.src = media.src;
@@ -78,6 +63,22 @@ function useMediaElement(media, { request, language }) {
     } else {
       video.src = media.src;
     }
+    media.captions.forEach((caption, index) => {
+      const track = document.createElement("track");
+      track.kind = caption.kind;
+      if (caption.language) track.srclang = caption.language;
+      track.label = captionName(caption, index, languageRef.current).text;
+      video.appendChild(track);
+      Promise.all([loadVtt(caption.id, requestRef.current), attached]).then(([text]) => {
+        if (canceled) return;
+        addCues(track.track, text);
+        whenSettled(track, () => {
+          var _a, _b;
+          if (!canceled && !((_b = (_a = track.track) == null ? void 0 : _a.cues) == null ? void 0 : _b.length))
+            addCues(track.track, text);
+        });
+      }).catch(() => void 0);
+    });
     for (const track of Array.from(video.textTracks ?? [])) {
       track.mode = "hidden";
     }
@@ -100,7 +101,6 @@ function useMediaElement(media, { request, language }) {
       video.removeAttribute("src");
       video.load();
       video.remove();
-      blobs.forEach((url) => URL.revokeObjectURL(url));
       setElement(null);
     };
   }, [
@@ -113,7 +113,42 @@ function useMediaElement(media, { request, language }) {
   ]);
   return element;
 }
+function whenSettled(element, then) {
+  if (element.readyState >= HTMLTrackElement.LOADED) return;
+  element.addEventListener("load", then, { once: true });
+  element.addEventListener("error", then, { once: true });
+}
+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 {

package/dist/components/Map/MapView.mjs

@@ -18,10 +18,14 @@ import { getMapWorkerUrl } from "../../core/map-config.mjs";
 import { useNearViewport } from "../Body/useNearViewport.mjs";
 import { languageProps, directionOf } from "../../i18n/direction.mjs";
 import { Tip } from "../../ui/Tip.mjs";
+import { ZoomOut, ZoomIn } from "../../ui/controlGlyphs.mjs";
+import { Information } from "../Body/glyphs.mjs";
 import { NavDate } from "../../ui/NavDate.mjs";
 import { readDate } from "../../core/dates.mjs";
 import { dateTimeOf, formatDate } from "../../core/dates-format.mjs";
 import { cloverI18n, langWithin } from "../../i18n/config.mjs";
+import { adoptSheet } from "../../ui/adoptSheet.mjs";
+import __clover_sheet_map from "../../ui/sheets/map.mjs";
 const RootMap = forwardRef(function RootMap2(props, ref) {
   return /* @__PURE__ */ jsx(ConnectedMap, { ...props, scope: "view", landmark: false, forwardedRef: ref });
 });
@@ -210,11 +214,22 @@ function MapView({
     let instance = null;
     let observer = null;
     let letGo = null;
-    Promise.all([import("maplibre-gl"), import("./worker.mjs")]).then(([module, bundled]) => {
+    Promise.all([
+      import("maplibre-gl"),
+      import("./worker.mjs").then(
+        (bundled) => bundled.mapLibreSheet().then(() => bundled)
+      )
+    ]).then(async ([module, bundled]) => {
       var _a;
       const maplibre = "Map" in module ? module : module.default;
       if (!live || !container.current) return;
       const worker = workerUrl ?? getMapWorkerUrl() ?? bundled.bundledWorkerUrl((_a = maplibre.getVersion) == null ? void 0 : _a.call(maplibre));
+      const viaBlob = !!worker && (worker.startsWith("blob:") || new URL(worker, location.href).origin !== location.origin);
+      if (viaBlob && !await bundled.blobWorkersAllowed()) {
+        if (live) setFailed(true);
+        return;
+      }
+      if (!live || !container.current) return;
       if (worker) maplibre.setWorkerUrl(worker);
       const { t: t2 } = latest.current;
       instance = new maplibre.Map({
@@ -590,7 +605,10 @@ function MapView({
               ),
               map && tips.map(
                 ({ element, key }) => createPortal(
-                  /* @__PURE__ */ jsx(Tip, { label: t(key), lang: langOf(key) }),
+                  /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(MapGlyph, { name: key }),
+                    /* @__PURE__ */ jsx(Tip, { label: t(key), lang: langOf(key) })
+                  ] }),
                   element,
                   key
                 )
@@ -842,6 +860,28 @@ function hash(text) {
   }
   return (value >>> 0).toString(36);
 }
+const GLYPHS = {
+  imageZoomIn: ZoomIn,
+  imageZoomOut: ZoomOut,
+  mapAttribution: Information
+};
+function MapGlyph({ name }) {
+  const Glyph = GLYPHS[name];
+  if (!Glyph) return null;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "clover-geomap-glyph",
+      viewBox: "0 0 512 512",
+      fill: "currentColor",
+      stroke: "currentColor",
+      focusable: "false",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(Glyph, {})
+    }
+  );
+}
+adoptSheet("map", __clover_sheet_map);
 export {
   ConnectedMap,
   GivenMap,