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

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

@@ -0,0 +1,39 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCloverTranslation } from "../../../i18n/useCloverTranslation.mjs";
+import { Tip } from "../../../ui/Tip.mjs";
+function TransportButton({
+  words,
+  button,
+  shortcut,
+  disabled,
+  pressed,
+  onClick,
+  buttonRef,
+  children
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const label = t(words);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-label": label,
+      lang: langOf(words),
+      "aria-keyshortcuts": shortcut == null ? void 0 : shortcut.keys,
+      "aria-disabled": disabled || void 0,
+      "aria-pressed": pressed,
+      className: "clover-canvas-transport-button",
+      "data-button": button,
+      onClick,
+      ref: buttonRef,
+      type: "button",
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Tip, { label, shortcut })
+      ]
+    }
+  );
+}
+export {
+  TransportButton
+};

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

@@ -0,0 +1,28 @@
+"use client";
+import { useLayoutEffect } from "react";
+function useBarHeight(bar) {
+  useLayoutEffect(() => {
+    const element = bar.current;
+    const canvas = element == null ? void 0 : element.closest(".clover-canvas");
+    if (!element || !canvas) return;
+    const write = () => {
+      const height = element.offsetHeight;
+      if (height) {
+        canvas.style.setProperty(
+          "--clover-transport-bar-height",
+          `${height}px`
+        );
+      }
+    };
+    write();
+    const observer = new ResizeObserver(write);
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      canvas.style.removeProperty("--clover-transport-bar-height");
+    };
+  }, [bar]);
+}
+export {
+  useBarHeight
+};

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

@@ -0,0 +1,131 @@
+"use client";
+import { useState, useEffect, useMemo } from "react";
+const SYSTEM_EVENTS = [
+  "webkitbeginfullscreen",
+  "webkitendfullscreen",
+  "enterpictureinpicture",
+  "leavepictureinpicture",
+  "webkitpresentationmodechanged"
+];
+const NO_TRACKS = [];
+const isCaptions = (track) => track.kind === "captions" || track.kind === "subtitles";
+function inSystemPlayer(video, type) {
+  if (type === "webkitbeginfullscreen" || type === "enterpictureinpicture") {
+    return true;
+  }
+  const fullscreen = type !== "webkitendfullscreen" && Boolean(video.webkitDisplayingFullscreen);
+  const pictureInPicture = type !== "leavepictureinpicture" && (video.webkitPresentationMode === "picture-in-picture" || typeof document !== "undefined" && document.pictureInPictureElement === video);
+  return fullscreen || pictureInPicture;
+}
+function useCaptionTracks(element, own, key) {
+  const ownCount = own.length;
+  const first = ownCount ? 0 : -1;
+  const [selection, setSelection] = useState({
+    choice: first,
+    picked: false,
+    key
+  });
+  if (selection.key !== key) {
+    setSelection({ choice: first, picked: false, key });
+  }
+  const { choice, picked } = selection;
+  const [stream, setStream] = useState(NO_TRACKS);
+  const [system, setSystem] = useState(false);
+  useEffect(() => {
+    var _a, _b;
+    const list = element == null ? void 0 : element.textTracks;
+    if (!list) {
+      setStream(NO_TRACKS);
+      return;
+    }
+    const read = () => {
+      const found = Array.from(list).slice(ownCount).filter(isCaptions);
+      setStream(
+        (current) => current.length === found.length && current.every((track2, index) => track2 === found[index]) ? current : found.length ? found : NO_TRACKS
+      );
+    };
+    read();
+    (_a = list.addEventListener) == null ? void 0 : _a.call(list, "addtrack", read);
+    (_b = list.addEventListener) == null ? void 0 : _b.call(list, "removetrack", read);
+    return () => {
+      var _a2, _b2;
+      (_a2 = list.removeEventListener) == null ? void 0 : _a2.call(list, "addtrack", read);
+      (_b2 = list.removeEventListener) == null ? void 0 : _b2.call(list, "removetrack", read);
+    };
+  }, [element, ownCount]);
+  useEffect(() => {
+    setSystem(false);
+    if (!element) return;
+    const video = element;
+    const update = (event) => setSystem(inSystemPlayer(video, event.type));
+    SYSTEM_EVENTS.forEach((type) => video.addEventListener(type, update));
+    return () => SYSTEM_EVENTS.forEach((type) => video.removeEventListener(type, update));
+  }, [element]);
+  useEffect(() => {
+    var _a;
+    const list = element == null ? void 0 : element.textTracks;
+    if (!list) return;
+    const tracks = () => Array.from(list);
+    const resolve = (all) => typeof choice === "number" ? choice >= 0 ? all[choice] : void 0 : all.includes(choice) ? choice : void 0;
+    const apply = () => {
+      const all = tracks();
+      const chosen = resolve(all);
+      all.forEach((track2, index) => {
+        const mode = track2 === chosen ? system ? "showing" : "hidden" : index < ownCount ? "hidden" : isCaptions(track2) ? "disabled" : null;
+        if (mode && track2.mode !== mode) track2.mode = mode;
+      });
+    };
+    const adopt = () => {
+      if (picked || ownCount || choice !== -1) return false;
+      const shown = tracks().slice(ownCount).find((track2) => isCaptions(track2) && track2.mode === "showing");
+      if (!shown) return false;
+      setSelection({ choice: shown, picked: false, key });
+      return true;
+    };
+    const follow = () => {
+      const all = tracks();
+      const at2 = all.findIndex(
+        (track2, index) => (index < ownCount || isCaptions(track2)) && track2.mode === "showing"
+      );
+      if (all[at2] === resolve(all)) return;
+      setSelection({
+        choice: at2 < 0 ? -1 : at2 < ownCount ? at2 : all[at2],
+        picked: true,
+        key
+      });
+    };
+    if (system || !adopt()) apply();
+    const onChange = () => {
+      if (system) follow();
+      else if (!adopt()) apply();
+    };
+    (_a = list.addEventListener) == null ? void 0 : _a.call(list, "change", onChange);
+    return () => {
+      var _a2;
+      return (_a2 = list.removeEventListener) == null ? void 0 : _a2.call(list, "change", onChange);
+    };
+  }, [element, choice, picked, system, ownCount, key, stream]);
+  const options = useMemo(
+    () => [
+      ...own,
+      ...stream.map((track2, index) => ({
+        label: track2.label || track2.language || String(own.length + index + 1),
+        labelLang: track2.label ? track2.language || void 0 : void 0,
+        language: track2.language || void 0
+      }))
+    ],
+    [own, stream]
+  );
+  const at = typeof choice === "number" ? -1 : stream.indexOf(choice);
+  const active = typeof choice === "number" ? choice : at < 0 ? -1 : ownCount + at;
+  const track = typeof choice === "number" ? choice >= 0 ? Array.from((element == null ? void 0 : element.textTracks) ?? NO_TRACKS)[choice] : void 0 : stream[at];
+  const select = (index) => setSelection({
+    choice: index < 0 ? -1 : index < ownCount ? index : stream[index - ownCount] ?? -1,
+    picked: true,
+    key
+  });
+  return { options, active, select, track };
+}
+export {
+  useCaptionTracks
+};

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

@@ -0,0 +1,77 @@
+"use client";
+import { useCallback, useState, useEffect } from "react";
+const EVENTS = [
+  "play",
+  "pause",
+  "ended",
+  "timeupdate",
+  "durationchange",
+  "loadedmetadata",
+  "volumechange",
+  "progress",
+  "seeked"
+];
+function useMediaController(element, declaredDuration) {
+  const read = useCallback(
+    (el) => {
+      const duration = el && Number.isFinite(el.duration) && el.duration > 0 ? el.duration : declaredDuration ?? 0;
+      let buffered = 0;
+      if (el && el.buffered.length) {
+        buffered = el.buffered.end(el.buffered.length - 1);
+      }
+      return {
+        paused: (el == null ? void 0 : el.paused) ?? true,
+        currentTime: (el == null ? void 0 : el.currentTime) ?? 0,
+        duration,
+        muted: (el == null ? void 0 : el.muted) ?? false,
+        volume: (el == null ? void 0 : el.volume) ?? 1,
+        buffered
+      };
+    },
+    [declaredDuration]
+  );
+  const [state, setState] = useState(() => read(element));
+  useEffect(() => {
+    setState(read(element));
+    if (!element) return;
+    const sync = () => setState(read(element));
+    EVENTS.forEach((type) => element.addEventListener(type, sync));
+    return () => EVENTS.forEach((type) => element.removeEventListener(type, sync));
+  }, [element, read]);
+  const play = useCallback(() => {
+    var _a, _b;
+    (_b = (_a = element == null ? void 0 : element.play()) == null ? void 0 : _a.catch) == null ? void 0 : _b.call(_a, () => void 0);
+  }, [element]);
+  const pause = useCallback(() => element == null ? void 0 : element.pause(), [element]);
+  const toggle = useCallback(
+    () => (element == null ? void 0 : element.paused) ? play() : pause(),
+    [element, play, pause]
+  );
+  const seek = useCallback(
+    (seconds) => {
+      if (!element) return;
+      const max = Number.isFinite(element.duration) ? element.duration : state.duration;
+      element.currentTime = Math.max(0, Math.min(max || seconds, seconds));
+    },
+    [element, state.duration]
+  );
+  const skip = useCallback(
+    (seconds) => element && seek(element.currentTime + seconds),
+    [element, seek]
+  );
+  const setVolume = useCallback(
+    (volume) => {
+      if (!element) return;
+      element.volume = Math.max(0, Math.min(1, volume));
+      element.muted = element.volume === 0;
+    },
+    [element]
+  );
+  const toggleMute = useCallback(() => {
+    if (element) element.muted = !element.muted;
+  }, [element]);
+  return { ...state, play, toggle, seek, skip, setVolume, toggleMute };
+}
+export {
+  useMediaController
+};

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

@@ -0,0 +1,100 @@
+"use client";
+import { useState, useRef, useEffect } from "react";
+import { STILL_SIZE } from "../layout.mjs";
+import { resolveThumbnail } from "../../../core/thumbnail.mjs";
+import { localize } from "../../../core/value.mjs";
+import { sendsCredentials, requestKey } from "../../../core/request.mjs";
+import { loadVtt } from "../../../core/vtt.mjs";
+import { isHls } from "../../../lib/hls.mjs";
+function captionName(caption, index, language) {
+  const name = localize(caption.label, language);
+  return name.text ? { text: name.text, lang: name.lang } : { text: caption.language || String(index + 1) };
+}
+function useMediaElement(media, { request, language }) {
+  const [element, setElement] = useState(null);
+  const captionsKey = JSON.stringify(media.captions);
+  const posterKey = media.poster ? media.poster.src ?? media.poster.service ?? "" : "";
+  const withCredentials = sendsCredentials(request);
+  const requestRef = useRef(request);
+  requestRef.current = request;
+  const languageRef = useRef(language);
+  languageRef.current = language;
+  useEffect(() => {
+    let canceled = false;
+    const video = document.createElement("video");
+    video.playsInline = true;
+    video.preload = "metadata";
+    video.className = "clover-canvas-media-element";
+    const poster = media.poster;
+    if (poster == null ? void 0 : poster.src) video.poster = poster.src;
+    else if (poster)
+      void resolveThumbnail(poster, STILL_SIZE, requestRef.current).then(
+        (url) => {
+          if (!canceled && url) video.poster = url;
+        }
+      );
+    const blobs = [];
+    media.captions.forEach((caption, index) => {
+      const track = document.createElement("track");
+      track.kind = "captions";
+      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) return;
+        const url = URL.createObjectURL(
+          new Blob([text], { type: "text/vtt" })
+        );
+        blobs.push(url);
+        track.src = url;
+      }).catch(() => void 0);
+    });
+    let hls = null;
+    if (isHls(media.src, media.format)) {
+      import("hls.js").then(({ default: Hls }) => {
+        if (canceled) return;
+        if (!Hls.isSupported()) {
+          video.src = media.src;
+          return;
+        }
+        const instance = new Hls({
+          xhrSetup: (xhr) => {
+            var _a;
+            xhr.withCredentials = withCredentials;
+            for (const [name, value] of Object.entries(
+              ((_a = requestRef.current) == null ? void 0 : _a.headers) ?? {}
+            )) {
+              xhr.setRequestHeader(name, value);
+            }
+          }
+        });
+        instance.loadSource(media.src);
+        instance.attachMedia(video);
+        hls = instance;
+      }).catch(() => {
+        if (!canceled) video.src = media.src;
+      });
+    } else {
+      video.src = media.src;
+    }
+    for (const track of Array.from(video.textTracks ?? [])) {
+      track.mode = "hidden";
+    }
+    setElement(video);
+    return () => {
+      canceled = true;
+      video.pause();
+      hls == null ? void 0 : hls.destroy();
+      video.removeAttribute("src");
+      video.load();
+      video.remove();
+      blobs.forEach((url) => URL.revokeObjectURL(url));
+      setElement(null);
+    };
+  }, [media.src, media.format, posterKey, captionsKey, requestKey(request)]);
+  return element;
+}
+export {
+  captionName,
+  useMediaElement
+};

package/dist/components/Canvas/panClearOfControls.mjs

@@ -0,0 +1,92 @@
+"use client";
+const CONTROLS = [
+  ".clover-canvas-controls",
+  ".clover-canvas-navigator",
+  ".clover-canvas-transport",
+  '.clover-canvas-caption[data-open="true"]',
+  ".clover-canvas-menu",
+  ".clover-canvas-placeholder-toggle",
+  ".clover-canvas-exit-full-screen"
+].join(", ");
+const overlap = (a, b, c, d) => a < d && c < b;
+function panClearOfControls(renderer, hotspot) {
+  var _a;
+  const layer = (_a = renderer.overlays) == null ? void 0 : _a.container;
+  if (!layer) return;
+  const figure = layer.closest(".clover-canvas");
+  if ((figure == null ? void 0 : figure.getAttribute("data-navigable")) === "false") return;
+  const bodyRect = layer.getBoundingClientRect();
+  if (!bodyRect.width || !bodyRect.height) return;
+  const clear = {
+    top: bodyRect.top,
+    right: bodyRect.right,
+    bottom: bodyRect.bottom,
+    left: bodyRect.left
+  };
+  let pieces = Array.from(
+    (figure == null ? void 0 : figure.querySelectorAll(CONTROLS)) ?? []
+  ).flatMap((piece) => {
+    if (piece.closest(".clover-canvas") !== figure) return [];
+    const [tx = 0, ty = 0] = (getComputedStyle(piece).translate || "").split(" ").map((length) => parseFloat(length) || 0);
+    const moving = piece.getBoundingClientRect();
+    const top = moving.top - ty;
+    const right = moving.right - tx;
+    const bottom = moving.bottom - ty;
+    const left = moving.left - tx;
+    if (!moving.width || !moving.height || !overlap(left, right, bodyRect.left, bodyRect.right) || !overlap(top, bottom, bodyRect.top, bodyRect.bottom))
+      return [];
+    const sides = [
+      ["top", bottom - bodyRect.top],
+      ["bottom", bodyRect.bottom - top],
+      ["left", right - bodyRect.left],
+      ["right", bodyRect.right - left]
+    ];
+    const [side] = sides.reduce(
+      (least, cut) => cut[1] < least[1] ? cut : least
+    );
+    return [{ side, top, right, bottom, left }];
+  });
+  const boxes = [
+    hotspot,
+    hotspot.querySelector(".clover-canvas-annotation-point")
+  ].filter((node) => Boolean(node)).map((node) => node.getBoundingClientRect());
+  const own = {
+    top: Math.min(...boxes.map((box) => box.top)),
+    right: Math.max(...boxes.map((box) => box.right)),
+    bottom: Math.max(...boxes.map((box) => box.bottom)),
+    left: Math.min(...boxes.map((box) => box.left))
+  };
+  let dx = 0;
+  let dy = 0;
+  for (let cut = true; cut; ) {
+    const beside = pieces.filter(
+      (piece) => piece.side === "top" || piece.side === "bottom" ? overlap(piece.left, piece.right, own.left + dx, own.right + dx) : overlap(piece.top, piece.bottom, own.top + dy, own.bottom + dy)
+    );
+    pieces = pieces.filter((piece) => !beside.includes(piece));
+    cut = beside.length > 0;
+    for (const piece of beside) {
+      if (piece.side === "top") clear.top = Math.max(clear.top, piece.bottom);
+      if (piece.side === "bottom")
+        clear.bottom = Math.min(clear.bottom, piece.top);
+      if (piece.side === "left") clear.left = Math.max(clear.left, piece.right);
+      if (piece.side === "right")
+        clear.right = Math.min(clear.right, piece.left);
+    }
+    dx = shift(own.left, own.right, clear.left, clear.right);
+    dy = shift(own.top, own.bottom, clear.top, clear.bottom);
+  }
+  if (!dx && !dy) return;
+  const center = renderer.worldToScreenPoint(renderer.getCamera());
+  renderer.panTo(
+    renderer.screenToWorldPoint({ x: center.x - dx, y: center.y - dy })
+  );
+}
+function shift(start, end, min, max) {
+  if (end - start > max - min) return (min + max - start - end) / 2;
+  if (start < min) return min - start;
+  if (end > max) return max - end;
+  return 0;
+}
+export {
+  panClearOfControls
+};

package/dist/components/Canvas/rendererSurface.mjs

@@ -0,0 +1,6 @@
+"use client";
+import { CanvasRenderer } from "../../lib/renderer/CanvasRenderer.mjs";
+const rendererSurface = (host, options) => new CanvasRenderer(host, options);
+export {
+  rendererSurface
+};

package/dist/components/Canvas/surface.mjs

@@ -0,0 +1,5 @@
+"use client";
+const hasCamera = (surface) => Boolean(surface && "overlays" in surface);
+export {
+  hasCamera
+};

package/dist/components/Canvas/track.mjs

@@ -0,0 +1,43 @@
+"use client";
+import { parseAnnotationTarget } from "../../core/annotations.mjs";
+import { GROUPS } from "../../core/painting.mjs";
+const partsOf = (target) => Array.isArray(target) ? target.flatMap(partsOf) : GROUPS.includes(target == null ? void 0 : target.type) ? partsOf(target.items ?? []) : target == null ? [] : [target];
+const annotationTargets = (target) => partsOf(target).map((part) => parseAnnotationTarget(part));
+const meets = (key, next) => Math.abs(key.end - next.start) < 1e-3;
+const lerp = (a, b, f) => a + (b - a) * f;
+function orderKeys(keys) {
+  const ordered = [...keys].sort((a, b) => a.start - b.start);
+  return ordered.map((key, index) => {
+    const next = ordered[index + 1];
+    return key.end === Infinity && next ? { ...key, end: next.start } : key;
+  });
+}
+function boxAt(keys, time) {
+  let low = 0;
+  let high = keys.length - 1;
+  let found = -1;
+  while (low <= high) {
+    const middle = low + high >> 1;
+    if (keys[middle].start <= time) {
+      found = middle;
+      low = middle + 1;
+    } else high = middle - 1;
+  }
+  const key = keys[found];
+  if (!key || time >= key.end) return null;
+  const next = keys[found + 1];
+  if (!next || !meets(key, next) || !Number.isFinite(key.end)) return key.world;
+  const f = (time - key.start) / (key.end - key.start || 1);
+  const [a, b] = [key.world, next.world];
+  return {
+    x: lerp(a.x, b.x, f),
+    y: lerp(a.y, b.y, f),
+    width: lerp(a.width, b.width, f),
+    height: lerp(a.height, b.height, f)
+  };
+}
+export {
+  annotationTargets,
+  boxAt,
+  orderKeys
+};

package/dist/components/Canvas/useSvgReader.mjs

@@ -0,0 +1,23 @@
+"use client";
+import { useMemo } from "react";
+import { parseAnnotationTarget } from "../../core/annotations.mjs";
+import { useLoaded } from "../../hooks/useLoaded.mjs";
+const loadSvgShape = () => import("../../core/svg-shape.mjs");
+function useSvgReader(annotations) {
+  var _a;
+  const needed = useMemo(
+    () => Boolean(
+      annotations == null ? void 0 : annotations.some(
+        ({ annotation }) => {
+          var _a2;
+          return (_a2 = parseAnnotationTarget(annotation == null ? void 0 : annotation.target)) == null ? void 0 : _a2.svg;
+        }
+      )
+    ),
+    [annotations]
+  );
+  return ((_a = useLoaded(loadSvgShape, needed)) == null ? void 0 : _a.readSvgShape) ?? null;
+}
+export {
+  useSvgReader
+};

package/dist/components/Collection/Collection.mjs

@@ -0,0 +1,76 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect } from "react";
+import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import { Items } from "../Items/Items.mjs";
+import { Label } from "../Label/Label.mjs";
+import { Summary, Id, Homepage } from "../Primitives/Primitives.mjs";
+import { partOfCollection } from "../../core/selectors.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { useClover, useCloverSelector } from "../../react/context.mjs";
+import { titled } from "../../ui/heading.mjs";
+const Collection = forwardRef(
+  function Collection2({ headingLevel = 3, className, ...rest }, ref) {
+    const { clover } = useClover("Collection");
+    const { t, langOf } = useCloverTranslation();
+    const id = useUniqueId();
+    const collection = useCloverSelector((state) => state.collection);
+    const partOf = useCloverSelector(
+      (state) => partOfCollection(state.manifest)
+    );
+    useEffect(() => {
+      if (!collection && (partOf == null ? void 0 : partOf.id)) void clover.openCollection(partOf.id);
+    }, [clover, collection, partOf]);
+    const shown = collection ?? partOf;
+    if (!shown) return null;
+    const homepage = shown.homepage;
+    const label = titled(headingLevel, `${id}-label`);
+    const section = (titleKey, part) => {
+      const {
+        as: Title,
+        title,
+        group
+      } = titled(headingLevel, `${id}-${titleKey}`);
+      return /* @__PURE__ */ jsxs("section", { className: "clover-about-section", ...group, children: [
+        /* @__PURE__ */ jsx(
+          Title,
+          {
+            className: "clover-about-heading",
+            lang: langOf(titleKey),
+            ...title,
+            children: t(titleKey)
+          }
+        ),
+        part
+      ] });
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: join("clover-about clover-collection", className),
+        ...shown.label ? label.group : null,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            Label,
+            {
+              as: label.as,
+              label: shown.label,
+              className: "clover-collection-title",
+              ...label.title
+            }
+          ),
+          /* @__PURE__ */ jsx(Summary, { value: shown.summary, className: "clover-about-summary" }),
+          /* @__PURE__ */ jsx(Items, { of: "members", layout: "list" }),
+          Array.isArray(homepage) && homepage.length > 0 && section("aboutHomepage", /* @__PURE__ */ jsx(Homepage, { value: homepage })),
+          section("aboutCollection", /* @__PURE__ */ jsx(Id, { value: shown.id }))
+        ]
+      }
+    );
+  }
+);
+export {
+  Collection
+};