@nulib/clover 4.3.0 → 4.3.1

package/dist/components/Canvas/CanvasView.mjs

@@ -743,6 +743,10 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
             autoPlay: !player && stills.length > 0 && model.quietlyOpened !== canvasKey,
             language,
             notes: model.timed,
+            marked: model.placed,
+            selectedAnnotation: model.selected,
+            onAnnotationSelect: hasAnnotations ? model.select : void 0,
+            onAnnotationActivate: model.activate,
             player: player && canvases ? {
               canvas: canvases[0],
               title: ownName,

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

@@ -35,6 +35,10 @@ const MediaBody = ({
   onChapterHighlight,
   language: givenLanguage,
   notes,
+  marked,
+  selectedAnnotation,
+  onAnnotationSelect,
+  onAnnotationActivate,
   player
 }) => {
   var _a, _b;
@@ -191,6 +195,31 @@ const MediaBody = ({
     ),
     [notes, currentTime]
   );
+  const marking = useMemo(() => {
+    var _a2, _b2;
+    const byId = /* @__PURE__ */ new Map();
+    const marks = [];
+    for (const annotation of [
+      ...notes ?? [],
+      ...(marked ?? []).filter((each) => {
+        var _a3;
+        return (_a3 = each.track) == null ? void 0 : _a3.length;
+      })
+    ]) {
+      const start = "start" in annotation ? annotation.start : (_b2 = (_a2 = annotation.track) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.start;
+      if (start === void 0 || !annotation.label || byId.has(annotation.id))
+        continue;
+      byId.set(annotation.id, annotation);
+      marks.push({
+        id: annotation.id,
+        start,
+        label: annotation.label,
+        lang: annotation.lang
+      });
+    }
+    marks.sort((a, b) => a.start - b.start);
+    return { marks, byId };
+  }, [notes, marked]);
   const transport = /* @__PURE__ */ jsx(
     Transport,
     {
@@ -213,7 +242,14 @@ const MediaBody = ({
       highlightedChapter,
       onChapterHighlight,
       request,
-      fill
+      fill,
+      marks: marking.marks,
+      selectedMark: selectedAnnotation,
+      onMarkSelect: onAnnotationSelect && ((id) => {
+        const annotation = marking.byId.get(id);
+        if (annotation) onAnnotationSelect(annotation);
+      }),
+      onMarkActivate: onAnnotationActivate
     }
   );
   const noteLines = playing.map((note) => /* @__PURE__ */ jsxs(
@@ -268,15 +304,7 @@ const MediaBody = ({
               language
             }
           ),
-          playing.length > 0 && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "clover-canvas-captions clover-canvas-player-notes",
-              "aria-live": "off",
-              children: noteLines
-            }
-          ),
-          cues.length > 0 && /* @__PURE__ */ jsx("div", { className: "clover-canvas-captions", "aria-live": "off", children: captionLines }),
+          /* @__PURE__ */ jsx("div", { className: "clover-canvas-player-cues", children: cues.length > 0 && /* @__PURE__ */ jsx("div", { className: "clover-canvas-captions", "aria-live": "off", children: captionLines }) }),
           transport,
           /* @__PURE__ */ jsx(BodyUnloadable, { kind: media.kind, shown: failed, room: true })
         ] })

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";
@@ -20,6 +20,10 @@ 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;
@@ -242,7 +246,11 @@ const Transport = ({
   highlightedChapter = null,
   onChapterHighlight,
   request,
-  fill
+  fill,
+  marks = [],
+  selectedMark,
+  onMarkSelect,
+  onMarkActivate
 }) => {
   var _a, _b;
   const { t, langOf } = useCloverTranslation();
@@ -352,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));
@@ -370,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",
                 {

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

@@ -34,19 +34,10 @@ function useMediaElement(media, { request, language }) {
           if (!canceled && url) video.poster = url;
         }
       );
-    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) addCues(track.track, text);
-      }).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;
@@ -72,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";
     }
@@ -106,6 +113,11 @@ 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)) {