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

package/dist/components/CollectionSelect/CollectionSelect.mjs

@@ -0,0 +1,114 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect, useRef } from "react";
+import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import { itemsOfCollection } from "../../core/items.mjs";
+import { localize } from "../../core/value.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { useClover, useCloverSelector } from "../../react/context.mjs";
+const STEPS = /* @__PURE__ */ new Set([
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown"
+]);
+const STEP_TIME = 100;
+const CollectionSelect = forwardRef(
+  function CollectionSelect2({ onChange, className, ...rest }, ref) {
+    const { t, langOf } = useCloverTranslation();
+    const { clover, language } = useClover("CollectionSelect");
+    const collection = useCloverSelector((state) => state.collection);
+    const shown = useCloverSelector((state) => {
+      var _a;
+      return ((_a = state.manifest) == null ? void 0 : _a.id) ?? "";
+    });
+    const id = useUniqueId();
+    const [pending, setPending] = useState(null);
+    useEffect(() => setPending(null), [shown, collection]);
+    const steppedAt = useRef(-Infinity);
+    const asked = useRef(null);
+    useEffect(() => {
+      asked.current = null;
+    }, [shown, collection]);
+    const choose = (next) => {
+      if (!next || next === shown || next === asked.current) return;
+      asked.current = next;
+      onChange == null ? void 0 : onChange(next);
+      void clover.goToManifest(next).finally(() => {
+        if (asked.current === next) asked.current = null;
+      });
+    };
+    const stepBack = () => {
+      if (pending === null || pending === shown || pending === asked.current) {
+        return false;
+      }
+      setPending(null);
+      return true;
+    };
+    const items = itemsOfCollection(collection);
+    if (items.length < 2) return null;
+    const label = localize(collection == null ? void 0 : collection.label, language);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: join("clover-collection-select", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: `${id}-select`,
+              className: "clover-collection-select-label",
+              lang: label.text ? label.lang : langOf("collectionLabel"),
+              children: label.text || t("collectionLabel")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              id: `${id}-select`,
+              className: "clover-collection-select-control",
+              value: pending ?? shown,
+              onKeyDown: (event) => {
+                const { key } = event;
+                if (key === "Enter") choose(pending);
+                else if (key === "Escape") {
+                  if (stepBack()) event.preventDefault();
+                } else if (STEPS.has(key) || key.length === 1 && !event.ctrlKey && !event.metaKey) {
+                  steppedAt.current = performance.now();
+                }
+              },
+              onBlur: stepBack,
+              onChange: (event) => {
+                const next = event.target.value;
+                setPending(next);
+                if (performance.now() - steppedAt.current > STEP_TIME) choose(next);
+              },
+              children: items.map((item) => {
+                const text = localize(item.label, language);
+                return /* @__PURE__ */ jsx(
+                  "option",
+                  {
+                    value: item.id,
+                    lang: text.text ? text.lang : void 0,
+                    children: text.text || item.id
+                  },
+                  item.id
+                );
+              })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  CollectionSelect
+};

package/dist/components/Contents/Contents.mjs

@@ -0,0 +1,120 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef, useSyncExternalStore, useState, useEffect } from "react";
+import { currentContents, tableOfContents } from "../../core/ranges.mjs";
+import { localize } from "../../core/value.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { playFrom } from "../../lib/time.mjs";
+import { CueTime } from "../../ui/Cue.mjs";
+import { useClover, useCloverSelector } from "../../react/context.mjs";
+import { useContainerName } from "../../ui/useContainerName.mjs";
+const Contents = forwardRef(
+  function Contents2({ as: Tag = "nav", className, ...rest }, ref) {
+    const { t, langOf } = useCloverTranslation();
+    const { clover, language } = useClover("Contents");
+    const name = useContainerName(
+      t("informationPanelTabsContents"),
+      langOf("informationPanelTabsContents"),
+      rest["aria-label"] !== void 0 || rest["aria-labelledby"] !== void 0
+    );
+    const nodes = useCloverSelector((state) => tableOfContents(state.manifest));
+    const canvasId = useCloverSelector((state) => state.canvasId);
+    const element = useSyncExternalStore(
+      clover.media.subscribe,
+      clover.media.get,
+      clover.media.get
+    );
+    const current = useCurrent(nodes, canvasId, element);
+    const highlighted = useSyncExternalStore(
+      clover.chapter.subscribe,
+      clover.chapter.get,
+      clover.chapter.get
+    );
+    if (!nodes.length) return null;
+    const choose = (node) => {
+      if (!node.canvasId) return;
+      if (node.canvasId === canvasId && node.time && element) {
+        playFrom(element, node.time.start);
+        return;
+      }
+      clover.goTo(node.canvasId, {
+        ...node.time ? { time: node.time.start } : {},
+        ...node.region ? { region: node.region } : {}
+      });
+    };
+    const render = (list) => /* @__PURE__ */ jsx("ol", { className: "clover-contents-list", children: list.map((node) => {
+      const label = localize(node.label, language);
+      return /* @__PURE__ */ jsxs("li", { className: "clover-contents-item", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "clover-contents-button",
+            "aria-current": node.id === current ? "true" : void 0,
+            "data-highlighted": node.id === highlighted ? "true" : void 0,
+            disabled: !node.canvasId,
+            onMouseEnter: () => clover.chapter.emit(node.id),
+            onMouseLeave: () => clover.chapter.emit(null),
+            onFocus: () => clover.chapter.emit(node.id),
+            onBlur: () => clover.chapter.emit(null),
+            "data-timed": node.time ? "true" : void 0,
+            lang: label.text && !node.time ? label.lang : void 0,
+            onClick: () => choose(node),
+            children: node.time ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                CueTime,
+                {
+                  start: node.time.start,
+                  className: "clover-contents-time"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "clover-cue-text",
+                  lang: label.text ? label.lang : void 0,
+                  children: label.text || node.id
+                }
+              )
+            ] }) : label.text || node.id
+          }
+        ),
+        node.children.length > 0 && render(node.children)
+      ] }, node.id);
+    }) });
+    return /* @__PURE__ */ jsxs(
+      Tag,
+      {
+        ref,
+        ...name.props,
+        className: join("clover-contents", className),
+        ...rest,
+        children: [
+          name.node,
+          render(nodes)
+        ]
+      }
+    );
+  }
+);
+function useCurrent(nodes, canvasId, element) {
+  const [current, setCurrent] = useState(
+    () => currentContents(nodes, canvasId)
+  );
+  useEffect(() => {
+    const update = () => setCurrent(currentContents(nodes, canvasId, element == null ? void 0 : element.currentTime));
+    update();
+    if (!element) return;
+    element.addEventListener("timeupdate", update);
+    element.addEventListener("seeked", update);
+    return () => {
+      element.removeEventListener("timeupdate", update);
+      element.removeEventListener("seeked", update);
+    };
+  }, [nodes, canvasId, element]);
+  return current;
+}
+export {
+  Contents
+};

package/dist/components/Download/Download.mjs

@@ -0,0 +1,105 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import { selectVisibleCanvases } from "../../core/selectors.mjs";
+import { localize } from "../../core/value.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { useClover, useCloverSelector } from "../../react/context.mjs";
+import { titleTag } from "../../ui/heading.mjs";
+import { asArray } from "../../lib/asArray.mjs";
+function renderingsOf(resources, language) {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const resource of resources) {
+    for (const item of asArray(resource == null ? void 0 : resource.rendering)) {
+      const id = (item == null ? void 0 : item.id) ?? (item == null ? void 0 : item["@id"]);
+      if (typeof id !== "string" || seen.has(id)) continue;
+      seen.add(id);
+      const label = localize(item.label, language);
+      out.push({
+        id,
+        label: label.text || item.format || id,
+        // A format or an address in place of a label is in no language.
+        lang: label.text ? label.lang : void 0,
+        format: item.format
+      });
+    }
+  }
+  return out;
+}
+function useDownloads() {
+  const { language } = useClover("Download");
+  const manifest = useCloverSelector((state) => state.manifest);
+  const shown = useCloverSelector(
+    (state) => selectVisibleCanvases(state.manifest, state.canvasId)
+  );
+  return {
+    page: renderingsOf(shown, language),
+    all: renderingsOf([manifest], language)
+  };
+}
+function DownloadGroups({
+  page,
+  all,
+  headingLevel = 3
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const id = useUniqueId();
+  const Heading = titleTag(headingLevel);
+  const list = (titleKey, items, key) => items.length > 0 && /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: "clover-download-group",
+      "aria-labelledby": `${id}-${key}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          Heading,
+          {
+            className: "clover-download-title",
+            id: `${id}-${key}`,
+            lang: langOf(titleKey),
+            children: t(titleKey)
+          }
+        ),
+        /* @__PURE__ */ jsx("ul", { className: "clover-download-list", children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "a",
+          {
+            className: "clover-download-link",
+            href: item.id,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            lang: item.lang,
+            children: [
+              item.label,
+              item.format && item.format !== item.label && /* @__PURE__ */ jsxs("span", { className: "clover-download-format", children: [
+                " ",
+                "(",
+                item.format,
+                ")"
+              ] })
+            ]
+          }
+        ) }, item.id)) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "clover-download-groups", children: [
+    list("downloadPage", page, "page"),
+    list("downloadAll", all, "all")
+  ] });
+}
+function Download({
+  className,
+  headingLevel = 3,
+  ...rest
+}) {
+  const { page, all } = useDownloads();
+  if (!page.length && !all.length) return null;
+  return /* @__PURE__ */ jsx("div", { ...rest, className: join("clover-download", className), children: /* @__PURE__ */ jsx(DownloadGroups, { page, all, headingLevel }) });
+}
+export {
+  Download,
+  DownloadGroups,
+  useDownloads
+};

package/dist/components/Items/Item.mjs

@@ -0,0 +1,184 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { isSound } from "../../core/annotations.mjs";
+import { thumbnailSource, resolveThumbnail } from "../../core/thumbnail.mjs";
+import { localize } from "../../core/value.mjs";
+import { useNearViewport, NEAR_VIEWPORT_MARGIN } from "../Body/useNearViewport.mjs";
+import { watchClamp } from "./clamped.mjs";
+function formatDuration(seconds) {
+  const total = Math.max(0, Math.round(seconds));
+  const h = Math.floor(total / 3600);
+  const m = Math.floor(total % 3600 / 60);
+  const s = String(total % 60).padStart(2, "0");
+  return h ? `${h}:${String(m).padStart(2, "0")}:${s}` : `${m}:${s}`;
+}
+function useThumbnail(part, size, request, near) {
+  const source = thumbnailSource(part.resource);
+  const [src, setSrc] = useState(source == null ? void 0 : source.src);
+  const key = (source == null ? void 0 : source.src) ?? (source == null ? void 0 : source.service) ?? (source == null ? void 0 : source.fallback);
+  useEffect(() => {
+    if (!source) return setSrc(void 0);
+    if (source.src) return setSrc(source.src);
+    if (!near) return;
+    let current = true;
+    resolveThumbnail(source, size, request).then((url) => {
+      if (current) setSrc(url);
+    });
+    return () => {
+      current = false;
+    };
+  }, [key, size, near]);
+  return { src, none: !source };
+}
+const Speaker = () => /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 512 512", children: [
+  /* @__PURE__ */ jsx("path", { d: "M232 416a24 24 0 01-14.9-5.2L125.8 336H56a24 24 0 01-24-24V200a24 24 0 0124-24h69.8l91.3-74.8A24 24 0 01256 120v272a24 24 0 01-24 24z" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M336 176a112 112 0 010 160M384 128a176 176 0 010 256",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: "32"
+    }
+  )
+] });
+function Picture({
+  part,
+  size,
+  request,
+  alt,
+  altLang
+}) {
+  const [box, setBox] = useState(null);
+  const near = useNearViewport(
+    box,
+    NEAR_VIEWPORT_MARGIN,
+    box == null ? void 0 : box.closest('[data-layout="slider"] .clover-items-viewport')
+  );
+  const { src, none } = useThumbnail(part, size, request, near);
+  const [loaded, setLoaded] = useState(false);
+  const { width, height } = part.resource ?? {};
+  const ratio = width && height ? width / height : 1;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: setBox,
+      className: "clover-items-picture",
+      "data-loaded": loaded,
+      "data-empty": src ? void 0 : true,
+      style: src && !(width && height) ? void 0 : { "--clover-items-ratio": ratio },
+      children: [
+        !src && none && isSound(part.media) && /* @__PURE__ */ jsx(Speaker, {}),
+        src && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt,
+            lang: alt ? altLang : void 0,
+            width: size,
+            height: Math.round(size / ratio),
+            loading: "lazy",
+            decoding: "async",
+            draggable: false,
+            onLoad: () => setLoaded(true),
+            onError: () => setLoaded(true)
+          }
+        ),
+        part.duration ? /* @__PURE__ */ jsx("span", { className: "clover-items-duration", children: formatDuration(part.duration) }) : null
+      ]
+    }
+  );
+}
+function ItemLabel({
+  text,
+  lang,
+  first
+}) {
+  const ref = useRef(null);
+  const [cut, setCut] = useState(false);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node || !text) return;
+    return watchClamp(node, setCut);
+  }, [text]);
+  return /* @__PURE__ */ jsxs("span", { className: "clover-items-label", "data-clamped": cut || void 0, children: [
+    !first && " ",
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: "clover-items-label-text",
+        lang: text ? lang : void 0,
+        children: text
+      }
+    ),
+    cut && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "clover-items-label-full",
+        lang,
+        "aria-hidden": "true",
+        hidden: true,
+        children: text
+      }
+    )
+  ] });
+}
+function ItemFigure({
+  item,
+  size,
+  language,
+  request,
+  showSummary = false
+}) {
+  var _a, _b;
+  const labels = item.parts.map(
+    (part) => localize(item.parts.length === 1 ? item.label : part.label, language)
+  );
+  const summary = showSummary ? localize(item.summary, language) : null;
+  const labeled = labels.some((label) => label.text);
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      role: "none",
+      className: "clover-items-figure",
+      "data-parts": item.parts.length,
+      "data-media": (_b = (_a = item.parts[0]) == null ? void 0 : _a.media) == null ? void 0 : _b.toLowerCase(),
+      style: { "--parts": item.parts.length },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "clover-items-pictures", children: item.parts.map((part, index) => {
+          const alt = labels[index].text ? { text: "" } : localize(part.label, language);
+          return /* @__PURE__ */ jsx(
+            Picture,
+            {
+              part,
+              size,
+              request,
+              alt: alt.text,
+              altLang: alt.lang
+            },
+            part.id
+          );
+        }) }),
+        (labeled || (summary == null ? void 0 : summary.text)) && /* @__PURE__ */ jsxs("figcaption", { className: "clover-items-caption", children: [
+          labels.map((label, index) => /* @__PURE__ */ jsx(
+            ItemLabel,
+            {
+              text: label.text,
+              lang: label.lang,
+              first: index === 0
+            },
+            item.parts[index].id
+          )),
+          (summary == null ? void 0 : summary.text) && /* @__PURE__ */ jsx("span", { className: "clover-items-summary", lang: summary.lang, children: summary.text.replace(/<[^>]*>/g, "") })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ItemFigure,
+  formatDuration
+};