@nulib/clover 4.2.0 → 4.3.1

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/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,
@@ -714,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/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 = ({
@@ -33,6 +35,10 @@ const MediaBody = ({
   onChapterHighlight,
   language: givenLanguage,
   notes,
+  marked,
+  selectedAnnotation,
+  onAnnotationSelect,
+  onAnnotationActivate,
   player
 }) => {
   var _a, _b;
@@ -189,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,
     {
@@ -211,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(
@@ -266,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 })
         ] })
@@ -363,6 +393,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
 };