@nulib/clover 4.0.0-beta.1 → 4.1.0

package/dist/components/Canvas/ChaptersMenu.mjs

@@ -0,0 +1,105 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import ControlMenu from "./ControlMenu.mjs";
+import { chapterAt, chapterPicture } from "./media/Transport.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
+import { useContainerName } from "../../i18n/useContainerName.mjs";
+import { EntryThumbnail } from "../../ui/EntryThumbnail.mjs";
+import { formatTime } from "../../lib/time.mjs";
+const ChaptersMenu = ({
+  id,
+  triggerId,
+  label,
+  labelLang,
+  chapters,
+  element,
+  onChapter,
+  request,
+  onClose
+}) => {
+  const name = useContainerName(label, labelLang);
+  const [time, setTime] = useState(() => (element == null ? void 0 : element.currentTime) ?? 0);
+  useEffect(() => {
+    if (!element) return;
+    const update = () => setTime(element.currentTime);
+    update();
+    element.addEventListener("timeupdate", update);
+    element.addEventListener("seeked", update);
+    return () => {
+      element.removeEventListener("timeupdate", update);
+      element.removeEventListener("seeked", update);
+    };
+  }, [element]);
+  const current = chapterAt(chapters, time);
+  const pointer = useRef(false);
+  const go = (index) => {
+    onChapter(chapters[index].start);
+    setTime(chapters[index].start);
+  };
+  return /* @__PURE__ */ jsxs(
+    ControlMenu,
+    {
+      "data-testid": "clover-canvas-chapters",
+      id,
+      onClose,
+      triggerId,
+      children: [
+        /* @__PURE__ */ jsx("fieldset", { className: "clover-canvas-menu-group", ...name.props, children: chapters.map((chapter, index) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: "clover-canvas-menu-item clover-canvas-chapters-item",
+            onPointerDown: () => {
+              pointer.current = true;
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: id,
+                  checked: index === current,
+                  onChange: () => go(index),
+                  onClick: () => {
+                    if (pointer.current) onClose(true);
+                  },
+                  onKeyDown: (event) => {
+                    pointer.current = false;
+                    if (event.key === "Enter") {
+                      event.preventDefault();
+                      go(index);
+                      onClose(true);
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "clover-cue-time", children: formatTime(chapter.start) }),
+              " ",
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "clover-cue-text",
+                  ...languageProps(chapter.lang || void 0),
+                  children: chapter.label
+                }
+              ),
+              index === current && /* @__PURE__ */ jsx(
+                EntryThumbnail,
+                {
+                  source: chapterPicture(chapter),
+                  request,
+                  large: true
+                }
+              )
+            ]
+          },
+          chapter.id ?? index
+        )) }),
+        name.node
+      ]
+    }
+  );
+};
+export {
+  ChaptersMenu as default
+};

package/dist/components/Canvas/ChoiceMenu.mjs

@@ -1,9 +1,10 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { createElement } from "react";
 import ControlMenu from "./ControlMenu.mjs";
+import { playsHere } from "./layout.mjs";
 import { localize } from "../../core/value.mjs";
-import { useContainerName } from "../../ui/useContainerName.mjs";
+import { useContainerName } from "../../i18n/useContainerName.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 const ChoiceMenu = ({
   id,
   triggerId,
@@ -30,42 +31,61 @@ const ChoiceMenu = ({
         unlabeled && fallbackName.node,
         choices.map((group, g) => {
           const heading = localize(group.label, language);
-          return /* @__PURE__ */ createElement(
+          return /* @__PURE__ */ jsxs(
             "fieldset",
             {
               ...heading.text ? {} : fallbackName.props,
               className: "clover-canvas-menu-group",
-              key: group.key
-            },
-            heading.text && /* @__PURE__ */ jsx("legend", { className: "clover-canvas-menu-legend", lang: heading.lang, children: heading.text }),
-            group.items.map((item, index) => {
-              const text = localize(item.label, language);
-              const shown = text.text || (item.image ? "" : String(index + 1));
-              return /* @__PURE__ */ jsxs("label", { className: "clover-canvas-menu-item", children: [
-                /* @__PURE__ */ jsx(
-                  "input",
+              children: [
+                heading.text && /* @__PURE__ */ jsx(
+                  "legend",
                   {
-                    type: "radio",
-                    name: `${id}-${g}`,
-                    "aria-label": shown ? void 0 : String(index + 1),
-                    checked: (selections[group.key] ?? 0) === index,
-                    onChange: () => onSelect(group.key, index)
+                    className: "clover-canvas-menu-legend",
+                    ...languageProps(heading.lang),
+                    children: heading.text
                   }
                 ),
-                item.image && // eslint-disable-next-line @next/next/no-img-element -- This library also renders outside Next.js.
-                /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    alt: "",
-                    className: "clover-canvas-menu-image",
-                    decoding: "async",
-                    loading: "lazy",
-                    src: item.image
-                  }
-                ),
-                shown && /* @__PURE__ */ jsx("span", { lang: text.text ? text.lang : void 0, children: shown })
-              ] }, index);
-            })
+                group.items.map((item, index) => {
+                  const text = localize(item.label, language);
+                  const shown = text.text || (item.image ? "" : String(index + 1));
+                  const unplayable = !playsHere(item);
+                  return /* @__PURE__ */ jsxs(
+                    "label",
+                    {
+                      className: "clover-canvas-menu-item",
+                      "data-disabled": unplayable || void 0,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            type: "radio",
+                            name: `${id}-${g}`,
+                            "aria-label": shown ? void 0 : String(index + 1),
+                            checked: (selections[group.key] ?? 0) === index,
+                            disabled: unplayable,
+                            onChange: () => onSelect(group.key, index)
+                          }
+                        ),
+                        item.image && // eslint-disable-next-line @next/next/no-img-element -- This library also renders outside Next.js.
+                        /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            alt: "",
+                            className: "clover-canvas-menu-image",
+                            decoding: "async",
+                            loading: "lazy",
+                            src: item.image
+                          }
+                        ),
+                        shown && /* @__PURE__ */ jsx("span", { ...languageProps(text.text ? text.lang : void 0), children: shown })
+                      ]
+                    },
+                    index
+                  );
+                })
+              ]
+            },
+            group.key
           );
         })
       ]

package/dist/components/Canvas/Connected.mjs

@@ -1,13 +1,14 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useSyncExternalStore, useMemo, useRef, useCallback, useEffect } from "react";
+import { useSyncExternalStore, useRef, useState, useEffect, useMemo, useCallback } from "react";
 import CanvasView from "./CanvasView.mjs";
 import { useRangeChapters, applyTarget } from "./fromManifest.mjs";
-import { paintedMedia } from "./layout.mjs";
+import { paintedMedia, canvasCaptions } from "./layout.mjs";
 import { selectDrawnSets, selectUnlistedSets, selectHiddenSets } from "../../core/annotation-sets.mjs";
 import { showLink } from "../../core/show-link.mjs";
 import { chaptersOf } from "../../core/ranges.mjs";
 import { hasBehavior } from "../../core/selectors.mjs";
+import { sameLanguage } from "../../i18n/languages.mjs";
 import { useClover, useCloverSelector } from "../../react/context.mjs";
 import { useVisibleCanvases, useSequence, useManifest, useActiveCanvas } from "../../react/hooks.mjs";
 const ConnectedCanvas = ({
@@ -47,7 +48,12 @@ const ConnectedCanvas = ({
   );
   const target = useCloverSelector((state) => state.target);
   const sets = useCloverSelector(
-    (state) => selectDrawnSets(state.manifest, state.addedSets, state.search.set)
+    (state) => selectDrawnSets(
+      state.manifest,
+      state.addedSets,
+      state.search.set,
+      state.regions
+    )
   );
   const unlistedSets = useCloverSelector(
     (state) => selectUnlistedSets(
@@ -66,6 +72,15 @@ const ConnectedCanvas = ({
     )
   );
   const selectedAnnotation = useCloverSelector((state) => state.annotationId);
+  const selectedRef = useRef(selectedAnnotation);
+  selectedRef.current = selectedAnnotation;
+  const [refind, setRefind] = useState(0);
+  useEffect(
+    () => clover.found.subscribe((id) => {
+      if (id && id === selectedRef.current) setRefind((count) => count + 1);
+    }),
+    [clover]
+  );
   const highlighted = useSyncExternalStore(
     clover.highlight.subscribe,
     clover.highlight.get,
@@ -85,7 +100,9 @@ const ConnectedCanvas = ({
         annotation: entry.annotation,
         targetIndex: shown.indexOf(entry.canvasId),
         pageId: set.id,
-        ...set.label ? { pageLabel: set.label } : {}
+        ...set.label ? { pageLabel: set.label } : {},
+        ...entry.place ? { place: entry.place } : {},
+        ...entry.layer ? { layer: { key: entry.layer.key, item: entry.layer.item } } : {}
       }))
     );
   }, [givenAnnotations, sets, canvases]);
@@ -109,6 +126,16 @@ const ConnectedCanvas = ({
   );
   const hasMediaRef = useRef(hasMedia);
   hasMediaRef.current = hasMedia;
+  const rootLanguage = givenCaption === void 0 ? context.language : void 0;
+  const mediaCanvasId = mediaCanvas == null ? void 0 : mediaCanvas.id;
+  useEffect(() => {
+    if (!rootLanguage || !mediaCanvas) return;
+    const file = canvasCaptions(mediaCanvas).find(
+      (track) => track.language && sameLanguage(track.language, rootLanguage)
+    );
+    if (file && clover.captions.get() !== file.id)
+      clover.captions.emit(file.id);
+  }, [rootLanguage, mediaCanvasId, clover]);
   const applyTarget$1 = useCallback(() => {
     const pending = clover.store.get().target;
     if (!pending) return;
@@ -118,7 +145,12 @@ const ConnectedCanvas = ({
       return;
     clover.consumeTarget();
   }, [clover]);
+  const lastCanvas = useRef(canvasKey);
   useEffect(() => {
+    if (lastCanvas.current !== canvasKey) {
+      lastCanvas.current = canvasKey;
+      media.current = null;
+    }
     if (target) applyTarget$1();
   }, [target, canvasKey, applyTarget$1]);
   const onReadyRef = useRef(onReady);
@@ -188,6 +220,7 @@ const ConnectedCanvas = ({
     {
       ...rest,
       manifestId,
+      navPlace: manifest == null ? void 0 : manifest.navPlace,
       canvases,
       viewingDirection: direction,
       language,
@@ -212,6 +245,7 @@ const ConnectedCanvas = ({
       highlightedChapter,
       onChapterHighlight: (id) => clover.chapter.emit(id),
       selectedAnnotation,
+      refind,
       highlightedAnnotation: highlighted,
       onAnnotationSelect: (id) => clover.selectAnnotation(id),
       onAnnotationLink: rest.onAnnotationLink ?? followLink,

package/dist/components/Canvas/ControlMenu.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
+import { useRef, useLayoutEffect, useEffect } from "react";
 import { join } from "../../lib/classnames.mjs";
 import { useOneOpen } from "../../ui/useOneOpen.mjs";
 const ControlMenu = ({
@@ -9,16 +9,22 @@ const ControlMenu = ({
   onClose,
   "data-testid": testId,
   className,
+  holds,
+  inside = false,
   children
 }) => {
   const ref = useRef(null);
   useOneOpen(true, () => onClose(false));
+  useLayoutEffect(() => {
+    const menu = ref.current;
+    if (menu && inside) keepInside(menu);
+  }, [inside]);
   useEffect(() => {
     const menu = ref.current;
     const item = (menu == null ? void 0 : menu.querySelector('input[type="radio"]:checked')) ?? (menu == null ? void 0 : menu.querySelector(
       'input[type="radio"]:not(:disabled)'
-    )) ?? (menu == null ? void 0 : menu.querySelector("input"));
-    const row = item == null ? void 0 : item.closest("label");
+    )) ?? (menu == null ? void 0 : menu.querySelector("input")) ?? (menu == null ? void 0 : menu.querySelector('[role="option"][tabindex="0"]'));
+    const row = item == null ? void 0 : item.closest('label, [role="option"]');
     if (menu && row) {
       const bottom = row.offsetTop + row.offsetHeight;
       if (bottom > menu.scrollTop + menu.clientHeight) {
@@ -28,21 +34,22 @@ const ControlMenu = ({
     }
     item == null ? void 0 : item.focus({ preventScroll: true });
     const onPointerDown = (event) => {
-      var _a, _b;
+      var _a, _b, _c;
       const target = event.target;
       if ((_a = ref.current) == null ? void 0 : _a.contains(target)) return;
       if ((_b = document.getElementById(triggerId)) == null ? void 0 : _b.contains(target)) return;
+      if (target && ((_c = holds == null ? void 0 : holds()) == null ? void 0 : _c.contains(target))) return;
       onClose(false);
     };
     const onKeyDown = (event) => {
       var _a, _b;
       if (event.key !== "Escape") return;
       const active = document.activeElement;
-      const inside = Boolean(
+      const inside2 = Boolean(
         ((_a = ref.current) == null ? void 0 : _a.contains(active)) || ((_b = document.getElementById(triggerId)) == null ? void 0 : _b.contains(active))
       );
-      if (inside) event.preventDefault();
-      onClose(inside);
+      if (inside2) event.preventDefault();
+      onClose(inside2);
     };
     document.addEventListener("pointerdown", onPointerDown);
     document.addEventListener("keydown", onKeyDown, true);
@@ -50,7 +57,7 @@ const ControlMenu = ({
       document.removeEventListener("pointerdown", onPointerDown);
       document.removeEventListener("keydown", onKeyDown, true);
     };
-  }, [triggerId, onClose]);
+  }, [triggerId, onClose, holds]);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -62,6 +69,20 @@ const ControlMenu = ({
     }
   );
 };
+function keepInside(menu) {
+  const box = menu.getBoundingClientRect();
+  let start = 0;
+  let end = document.documentElement.clientWidth;
+  for (let node = menu.parentElement; node; node = node.parentElement) {
+    if (getComputedStyle(node).overflowX === "visible") continue;
+    const clip = node.getBoundingClientRect();
+    start = Math.max(start, clip.left);
+    end = Math.min(end, clip.right);
+    break;
+  }
+  const shift = Math.max(start - box.left, Math.min(0, end - box.right));
+  if (shift) menu.style.translate = `${shift}px 0`;
+}
 export {
   ControlMenu as default
 };