@nulib/clover 0.0.0-stage → 4.0.0-beta.0

package/dist/components/Annotations/Annotations.mjs

@@ -0,0 +1,674 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { forwardRef, useEffect, useMemo, useState, useRef } from "react";
+import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import { EntryBodies } from "./EntryBodies.mjs";
+import { selectListedSets, findEntry, selectHiddenSets, manifestOfAnnotation } from "../../core/annotation-sets.mjs";
+import { annotationName } from "../../core/annotation-name.mjs";
+import { readLink } from "../../core/link.mjs";
+import { showLink } from "../../core/show-link.mjs";
+import { loadManifest } from "../../core/load.mjs";
+import { selectSequence, selectVisibleCanvases } from "../../core/selectors.mjs";
+import { parseTime } from "../../core/ranges.mjs";
+import { regionSource } from "../../core/region.mjs";
+import { resolveThumbnail } from "../../core/thumbnail.mjs";
+import { localize } from "../../core/value.mjs";
+import { langWithin } from "../../i18n/config.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { playFrom } from "../../lib/time.mjs";
+import { useClover, useCloverSelector } from "../../react/context.mjs";
+import { bringIntoView, scrollerOf } from "../../ui/bringIntoView.mjs";
+import { titleTag } from "../../ui/heading.mjs";
+import { CueTime } from "../../ui/Cue.mjs";
+import { HideToggle } from "../../ui/HideToggle.mjs";
+import { languageCode } from "../../ui/languageCode.mjs";
+import { Tip } from "../../ui/Tip.mjs";
+import { useContainerName } from "../../ui/useContainerName.mjs";
+import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
+import { languagesOf, startingLanguage, inLanguage, autonym } from "./languages.mjs";
+const Annotations = forwardRef(
+  function Annotations2({
+    scope = "all",
+    renderEntry,
+    headingLevel = 3,
+    as: Tag = "div",
+    className,
+    ...rest
+  }, ref) {
+    const { t, langOf } = useCloverTranslation();
+    const { clover, language } = useClover("Annotations");
+    const sets = useCloverSelector(
+      (state) => selectListedSets(state.manifest, state.addedSets)
+    );
+    const shown = useCloverSelector(
+      (state) => selectVisibleCanvases(state.manifest, state.canvasId)
+    );
+    const hiddenSets = useCloverSelector(
+      (state) => selectHiddenSets(
+        state.manifest,
+        state.addedSets,
+        state.hiddenSets,
+        state.shownSets
+      )
+    );
+    const selected = useCloverSelector((state) => state.annotationId);
+    const highlighted = React.useSyncExternalStore(
+      clover.highlight.subscribe,
+      clover.highlight.get,
+      clover.highlight.get
+    );
+    const choose = (id) => {
+      const entry = findEntry(sets, id);
+      const time = entry && parseTime(entry.target.t);
+      const element = clover.media.get();
+      if (time && element && shown.some((canvas) => canvas.id === entry.canvasId))
+        playFrom(element, time.start);
+      clover.selectAnnotation(id);
+    };
+    useEffect(() => {
+      if (scope === "all") return clover.holdAllAnnotationPages();
+    }, [clover, scope]);
+    const visible = (set) => set.entries.filter(
+      (entry) => shown.some((canvas) => canvas.id === entry.canvasId)
+    );
+    const groups = sets.map((set) => ({ set, entries: visible(set) })).filter(({ entries }) => entries.length);
+    const Heading = titleTag(headingLevel);
+    const showLabel = {
+      text: t("annotationsShow"),
+      lang: langOf("annotationsShow")
+    };
+    if (scope === "all")
+      return /* @__PURE__ */ jsx(
+        AnnotationLayers,
+        {
+          ref,
+          as: Tag,
+          className,
+          rest,
+          sets,
+          shown: shown.map((canvas) => canvas.id),
+          headingLevel,
+          language,
+          showLabel,
+          hiddenSets,
+          selected,
+          highlighted,
+          renderEntry,
+          onSelect: choose,
+          onHighlight: (id) => clover.highlight.emit(id),
+          onVisible: (ids, on) => ids.forEach((id) => clover.setSetVisible(id, on))
+        }
+      );
+    if (!groups.length) return null;
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ref,
+        className: join("clover-annotations", className),
+        ...rest,
+        children: groups.map(({ set, entries }) => /* @__PURE__ */ jsx(
+          AnnotationGroup,
+          {
+            set,
+            entries,
+            canvases: shown,
+            Heading,
+            headingLevel,
+            language,
+            title: localize(set.label, language),
+            showLabel,
+            hidden: hiddenSets.includes(set.id),
+            selected,
+            highlighted,
+            renderEntry,
+            onSelect: choose,
+            onHighlight: (id) => clover.highlight.emit(id),
+            onVisible: (on) => clover.setSetVisible(set.id, on)
+          },
+          set.id
+        ))
+      }
+    );
+  }
+);
+function AnnotationGroup({
+  set,
+  entries,
+  canvases,
+  Heading,
+  headingLevel: setLevel,
+  title,
+  language,
+  showLabel,
+  hidden,
+  selected,
+  highlighted,
+  renderEntry,
+  onSelect,
+  onHighlight,
+  onVisible
+}) {
+  const id = useUniqueId();
+  const headingLevel = title.text ? setLevel + 1 : setLevel;
+  const languages = useMemo(() => languagesOf(entries), [entries]);
+  const [picked, setPicked] = useState();
+  const chosen = startingLanguage(languages, language, picked);
+  const listed = entries.filter((entry) => inLanguage(entry, chosen));
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: "clover-annotations-set",
+      "aria-labelledby": title.text ? `${id}-title` : void 0,
+      "data-set": set.id,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "clover-annotations-set-header", children: [
+          title.text && /* @__PURE__ */ jsx(
+            Heading,
+            {
+              className: "clover-annotations-title",
+              id: `${id}-title`,
+              lang: title.lang,
+              children: title.text
+            }
+          ),
+          chosen && /* @__PURE__ */ jsx(
+            LanguageChoice,
+            {
+              languages,
+              chosen,
+              onChange: setPicked
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            HideToggle,
+            {
+              hidden,
+              onChange: (hide) => onVisible(!hide),
+              of: title.text ? `${id}-title` : void 0
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("ol", { className: "clover-annotations-list", children: listed.map((entry, index) => /* @__PURE__ */ jsx(
+          AnnotationItem,
+          {
+            entry,
+            canvas: canvases.find((canvas) => canvas.id === entry.canvasId),
+            index,
+            headingLevel,
+            language,
+            showLabel,
+            selected: entry.id === selected,
+            highlighted: entry.id === highlighted,
+            renderEntry,
+            onSelect,
+            onHighlight
+          },
+          entry.id
+        )) })
+      ]
+    }
+  );
+}
+function layersOf(sets, canvases, language) {
+  const order = new Map(canvases.map((canvas, index) => [canvas.id, index]));
+  const layers = /* @__PURE__ */ new Map();
+  for (const set of sets) {
+    const title = localize(set.label, language);
+    const key = title.text;
+    let layer = layers.get(key);
+    if (!layer) {
+      layer = { title, setIds: [], byCanvas: /* @__PURE__ */ new Map() };
+      layers.set(key, layer);
+    }
+    layer.setIds.push(set.id);
+    for (const entry of set.entries) {
+      const list = layer.byCanvas.get(entry.canvasId) ?? [];
+      list.push(entry);
+      layer.byCanvas.set(entry.canvasId, list);
+    }
+  }
+  return [...layers.entries()].map(([key, layer]) => ({
+    key,
+    title: layer.title,
+    setIds: layer.setIds,
+    canvases: inOrder([...layer.byCanvas.entries()], order).map(
+      ([canvasId, entries]) => {
+        var _a;
+        return {
+          canvasId,
+          label: localize(
+            (_a = canvases.find((canvas) => canvas.id === canvasId)) == null ? void 0 : _a.label,
+            language
+          ),
+          entries
+        };
+      }
+    )
+  }));
+}
+function inOrder(groups, order) {
+  return groups.every(([id]) => order.has(id)) ? groups.sort(([a], [b]) => order.get(a) - order.get(b)) : groups;
+}
+const fetched = /* @__PURE__ */ new WeakMap();
+function fetchManifest(clover, id) {
+  let byId = fetched.get(clover);
+  if (!byId) fetched.set(clover, byId = /* @__PURE__ */ new Map());
+  let manifest = byId.get(id);
+  if (!manifest) {
+    manifest = loadManifest(
+      { id, type: "Manifest" },
+      { request: clover.request }
+    ).catch(() => null);
+    byId.set(id, manifest);
+  }
+  return manifest;
+}
+function useElsewhere(layers, here) {
+  const { clover, language } = useClover("Annotations");
+  const wanted = useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const layer of layers)
+      for (const group of layer.canvases) {
+        if (here.has(group.canvasId)) continue;
+        const manifest = manifestOfAnnotation(group.entries[0].annotation);
+        if (manifest) ids.add(manifest);
+      }
+    return [...ids];
+  }, [layers, here]);
+  const [manifests, setManifests] = useState([]);
+  useEffect(() => {
+    let live = true;
+    Promise.all(wanted.map((id) => fetchManifest(clover, id))).then(
+      (found) => live && setManifests(found.filter((each) => Boolean(each)))
+    );
+    return () => {
+      live = false;
+    };
+  }, [clover, wanted]);
+  return useMemo(() => {
+    const of = /* @__PURE__ */ new Map();
+    for (const manifest of manifests) {
+      const { canvases } = selectSequence(manifest);
+      const title = localize(manifest.label, language);
+      for (const canvas of canvases) {
+        const own = localize(canvas.label, language);
+        of.set(canvas.id, {
+          canvas,
+          label: canvases.length > 1 && own.text ? [title, own] : [title]
+        });
+      }
+    }
+    return { named: wanted.length > 0, of };
+  }, [manifests, wanted, language]);
+}
+const AnnotationLayers = forwardRef(function AnnotationLayers2({
+  as: Tag,
+  className,
+  rest,
+  sets,
+  shown,
+  headingLevel,
+  language,
+  showLabel,
+  hiddenSets,
+  selected,
+  highlighted,
+  renderEntry,
+  onSelect,
+  onHighlight,
+  onVisible
+}, ref) {
+  const id = useUniqueId();
+  const canvases = useCloverSelector(
+    (state) => selectSequence(state.manifest).canvases
+  );
+  const layers = useMemo(
+    () => layersOf(sets, canvases, language),
+    [sets, canvases, language]
+  );
+  const canvasById = useMemo(
+    () => new Map(canvases.map((canvas) => [canvas.id, canvas])),
+    [canvases]
+  );
+  const elsewhere = useElsewhere(layers, canvasById);
+  const [picked, setPicked] = useState({});
+  const manifestLabel = useCloverSelector((state) => {
+    var _a;
+    return (_a = state.manifest) == null ? void 0 : _a.label;
+  });
+  const title = useMemo(
+    () => localize(manifestLabel, language),
+    [manifestLabel, language]
+  );
+  const grouped = canvases.length > 1 || elsewhere.named;
+  const root = useRef(null);
+  const still = () => {
+    const node = root.current;
+    if (!node || !node.getClientRects().length) return true;
+    const box = scrollerOf(node) ?? node;
+    return box.matches(":hover") || box.contains(document.activeElement);
+  };
+  const shownKey = shown.join("\n");
+  useEffect(() => {
+    const node = root.current;
+    if (!node || !grouped || still()) return;
+    const group = shown.map(
+      (canvasId) => node.querySelector(
+        `[data-canvas="${CSS.escape(canvasId)}"]`
+      )
+    ).find(Boolean);
+    if (!group) return;
+    const layer = group.closest(".clover-annotations-set");
+    const first = (layer == null ? void 0 : layer.querySelector("[data-canvas]")) === group;
+    bringIntoView(first && layer ? layer : group, "start");
+  }, [shownKey]);
+  useEffect(() => {
+    const node = root.current;
+    if (!node || !selected || still()) return;
+    const entry = node.querySelector(
+      `[data-entry="${CSS.escape(selected)}"]`
+    );
+    if (entry) bringIntoView(entry, "nearest");
+  }, [selected]);
+  if (!layers.length) return null;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref: (node) => {
+        root.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className: join("clover-annotations", className),
+      "data-scope": "all",
+      ...rest,
+      children: layers.map((layer, layerIndex) => {
+        const Title = titleTag(headingLevel);
+        const level = layer.title.text ? headingLevel + 1 : headingLevel;
+        const Label = titleTag(level);
+        const hidden = layer.setIds.every(
+          (setId) => hiddenSets.includes(setId)
+        );
+        const languages = languagesOf(
+          layer.canvases.flatMap((group) => group.entries)
+        );
+        const chosen = startingLanguage(languages, language, picked[layer.key]);
+        return /* @__PURE__ */ jsxs(
+          "section",
+          {
+            className: "clover-annotations-set",
+            "aria-labelledby": layer.title.text ? `${id}-${layerIndex}` : void 0,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "clover-annotations-set-header", children: [
+                layer.title.text && /* @__PURE__ */ jsx(
+                  Title,
+                  {
+                    className: "clover-annotations-title",
+                    id: `${id}-${layerIndex}`,
+                    lang: layer.title.lang,
+                    children: layer.title.text
+                  }
+                ),
+                chosen && /* @__PURE__ */ jsx(
+                  LanguageChoice,
+                  {
+                    languages,
+                    chosen,
+                    onChange: (tag) => setPicked((current) => ({ ...current, [layer.key]: tag }))
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  HideToggle,
+                  {
+                    hidden,
+                    onChange: (hide) => onVisible(layer.setIds, !hide),
+                    of: layer.title.text ? `${id}-${layerIndex}` : void 0
+                  }
+                )
+              ] }),
+              layer.canvases.map((group, groupIndex) => {
+                var _a;
+                const entries = group.entries.filter(
+                  (entry) => inLanguage(entry, chosen)
+                );
+                if (!entries.length) return null;
+                const there = elsewhere.of.get(group.canvasId);
+                const label = there ? there.label : elsewhere.named && title.text ? canvases.length > 1 && group.label.text ? [title, group.label] : [title] : [group.label];
+                const labeled = grouped && Boolean((_a = label[0]) == null ? void 0 : _a.text);
+                const current = grouped && shown.includes(group.canvasId);
+                const labelId = `${id}-${layerIndex}-${groupIndex}`;
+                return /* @__PURE__ */ jsxs(
+                  "section",
+                  {
+                    className: "clover-annotations-canvas",
+                    "data-canvas": group.canvasId,
+                    "aria-labelledby": labeled ? labelId : void 0,
+                    "aria-current": current ? "true" : void 0,
+                    children: [
+                      labeled && /* @__PURE__ */ jsx(
+                        Label,
+                        {
+                          className: "clover-annotations-canvas-label",
+                          id: labelId,
+                          lang: label.length === 1 ? label[0].lang : void 0,
+                          children: label.length === 1 ? label[0].text : label.map((part, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                            index > 0 && ", ",
+                            /* @__PURE__ */ jsx("span", { lang: part.lang, children: part.text })
+                          ] }, index))
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("ol", { className: "clover-annotations-list", children: entries.map((entry, index) => /* @__PURE__ */ jsx(
+                        AnnotationItem,
+                        {
+                          entry,
+                          canvas: canvasById.get(group.canvasId) ?? (there == null ? void 0 : there.canvas),
+                          index,
+                          headingLevel: labeled ? level + 1 : level,
+                          language,
+                          showLabel,
+                          selected: entry.id === selected,
+                          highlighted: entry.id === highlighted,
+                          renderEntry,
+                          onSelect,
+                          onHighlight
+                        },
+                        entry.id
+                      )) })
+                    ]
+                  },
+                  group.canvasId
+                );
+              })
+            ]
+          },
+          layer.key
+        );
+      })
+    }
+  );
+});
+function LanguageChoice({
+  languages,
+  chosen,
+  onChange
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const id = useUniqueId();
+  const name = useContainerName(
+    t("annotationsLanguage"),
+    langOf("annotationsLanguage")
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    name.node,
+    /* @__PURE__ */ jsx("fieldset", { ...name.props, className: "clover-annotations-languages", children: languages.map((tag) => {
+      const own = autonym(tag);
+      return /* @__PURE__ */ jsxs("label", { className: "clover-annotations-language", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "radio",
+            name: `${id}-language`,
+            checked: tag === chosen,
+            onChange: () => onChange(tag)
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "clover-annotations-language-code", children: languageCode(tag) }),
+        " ",
+        /* @__PURE__ */ jsx("span", { style: visuallyHidden, lang: tag, children: own }),
+        /* @__PURE__ */ jsx(Tip, { label: own, lang: tag })
+      ] }, tag);
+    }) })
+  ] });
+}
+const THUMBNAIL_SIZE = 52;
+function useRegionThumbnail(entry, canvas) {
+  const { clover } = useClover("Annotations");
+  const source = useMemo(() => {
+    const rect = entry.target.rect;
+    if (!rect || !canvas || entry.bodies.some((body) => body.image))
+      return null;
+    return regionSource(canvas, rect);
+  }, [entry, canvas]);
+  const [src, setSrc] = useState();
+  useEffect(() => {
+    setSrc(void 0);
+    if (!source) return;
+    let live = true;
+    void resolveThumbnail(source, THUMBNAIL_SIZE, clover.request).then(
+      (url) => live && setSrc(url)
+    );
+    return () => {
+      live = false;
+    };
+  }, [source, clover]);
+  return src;
+}
+function AnnotationItem({
+  entry,
+  canvas,
+  index,
+  headingLevel,
+  language,
+  showLabel,
+  selected,
+  highlighted,
+  renderEntry,
+  onSelect,
+  onHighlight
+}) {
+  const { hostLanguage, t, langOf } = useCloverTranslation();
+  const own = entryText(entry, language);
+  const text = own.text ? own : { text: String(index + 1) };
+  const time = parseTime(entry.target.t);
+  const show = time ? { text: t("annotationsShowTime"), lang: langOf("annotationsShowTime") } : showLabel;
+  const oneLanguage = !show.lang && !langWithin(text.lang, hostLanguage);
+  const name = text.text ? `${show.text}: ${text.text}` : show.text;
+  const thumbnail = useRegionThumbnail(entry, canvas);
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "clover-annotations-entry",
+      "data-entry": entry.id,
+      "data-selected": selected,
+      "data-highlighted": highlighted,
+      onMouseEnter: () => onHighlight(entry.id),
+      onMouseLeave: () => onHighlight(null),
+      onFocus: () => onHighlight(entry.id),
+      onBlur: () => onHighlight(null),
+      onClick: (event) => {
+        if (event.target.closest("a, button")) return;
+        onSelect(entry.id);
+      },
+      children: [
+        time && /* @__PURE__ */ jsx(CueTime, { start: time.start, className: "clover-annotations-time" }),
+        thumbnail && /* @__PURE__ */ jsx(
+          "img",
+          {
+            className: "clover-annotations-thumbnail",
+            src: thumbnail,
+            alt: "",
+            width: THUMBNAIL_SIZE / 2,
+            height: THUMBNAIL_SIZE / 2,
+            loading: "lazy",
+            decoding: "async"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "clover-annotations-body clover-cue-text", children: [
+          renderEntry ? renderEntry(entry) : /* @__PURE__ */ jsx(
+            EntryBodies,
+            {
+              bodies: entry.bodies,
+              language,
+              headingLevel
+            }
+          ),
+          /* @__PURE__ */ jsx(FollowLink, { annotation: entry.annotation })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "clover-annotations-show",
+            "aria-pressed": selected,
+            "aria-label": oneLanguage ? name : void 0,
+            style: visuallyHidden,
+            onClick: () => onSelect(entry.id),
+            children: !oneLanguage && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("span", { lang: show.lang, children: [
+                show.text,
+                text.text && ":"
+              ] }),
+              text.text && /* @__PURE__ */ jsxs(Fragment, { children: [
+                " ",
+                /* @__PURE__ */ jsx("span", { lang: text.lang, children: text.text })
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function FollowLink({ annotation }) {
+  const { clover } = useClover("Annotations");
+  const { t, langOf } = useCloverTranslation();
+  const link = useMemo(() => readLink(annotation), [annotation]);
+  if (!link) return null;
+  const text = t("annotationsOpenLink");
+  const lang = langOf("annotationsOpenLink");
+  if (!link.canvasId && !link.manifestId)
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: "clover-annotations-link",
+        href: link.id,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        lang,
+        children: text
+      }
+    );
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "clover-annotations-link",
+      lang,
+      onClick: (event) => {
+        var _a;
+        const root = event.currentTarget.closest(".clover-root");
+        if (!showLink(clover, link)) return;
+        (_a = root == null ? void 0 : root.querySelector(".clover-canvas-viewport")) == null ? void 0 : _a.focus({ preventScroll: true });
+      },
+      children: text
+    }
+  );
+}
+function entryText(entry, language) {
+  const { text = "", lang } = annotationName(entry.bodies, language);
+  return { text: text.slice(0, 120), ...lang ? { lang } : {} };
+}
+export {
+  Annotations
+};