@nulib/clover 4.0.0-beta.1 → 4.1.0

package/dist/react/hooks.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { useMemo } from "react";
-import { selectAnnotationSets } from "../core/annotation-sets.mjs";
+import { selectAnnotationCollection, selectAnnotationSets } from "../core/annotation-sets.mjs";
 import { navigationOf } from "../core/clover.mjs";
 import { selectPosition, selectSequence, selectVisibleCanvases, selectCanvas } from "../core/selectors.mjs";
 import { localize } from "../core/value.mjs";
@@ -40,6 +40,11 @@ function useNavigation() {
     [clover, position, total]
   );
 }
+function useAnnotationCollection() {
+  return useCloverSelector(
+    (state) => selectAnnotationCollection(state.manifest, state.addedSets)
+  );
+}
 function useAnnotationSets() {
   return useCloverSelector(
     (state) => selectAnnotationSets(state.manifest, state.addedSets)
@@ -57,6 +62,7 @@ function useLangOf() {
 }
 export {
   useActiveCanvas,
+  useAnnotationCollection,
   useAnnotationSets,
   useLangOf,
   useLocalized,

package/dist/react/readingLanguages.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { useMemo } from "react";
+import { descriptionLanguages, startingLanguage } from "../core/language-choice.mjs";
+import { useClover, useCloverSelector } from "./context.mjs";
+function useReadingLanguages() {
+  const { language, chooseLanguage } = useClover("About");
+  const manifest = useCloverSelector(
+    (state) => state.manifest
+  );
+  const languages = useMemo(() => descriptionLanguages(manifest), [manifest]);
+  const chosen = startingLanguage(languages, language);
+  return chosen && chooseLanguage ? { languages, chosen, onChange: chooseLanguage } : null;
+}
+export {
+  useReadingLanguages
+};

package/dist/react/useContentStateOutput.mjs

@@ -0,0 +1,71 @@
+"use client";
+import { useEffect, useRef, useCallback } from "react";
+const REPORT_MS = 100;
+function useContentStateOutput(read, onChange) {
+  const latest = useRef({ read, onChange });
+  latest.current = { read, onChange };
+  const timer = useRef(void 0);
+  const last = useRef("");
+  useEffect(
+    () => () => {
+      clearTimeout(timer.current);
+      timer.current = void 0;
+    },
+    []
+  );
+  return useCallback(() => {
+    if (!latest.current.onChange || timer.current !== void 0) return;
+    timer.current = setTimeout(() => {
+      var _a, _b;
+      timer.current = void 0;
+      const state = latest.current.read();
+      if (!state || state.encoded === last.current) return;
+      last.current = state.encoded;
+      (_b = (_a = latest.current).onChange) == null ? void 0 : _b.call(_a, state);
+    }, REPORT_MS);
+  }, []);
+}
+function watchMedia(element, changed) {
+  element == null ? void 0 : element.addEventListener("pause", changed);
+  element == null ? void 0 : element.addEventListener("seeked", changed);
+  return () => {
+    element == null ? void 0 : element.removeEventListener("pause", changed);
+    element == null ? void 0 : element.removeEventListener("seeked", changed);
+  };
+}
+function useRootContentState(clover, onChange) {
+  const changed = useContentStateOutput(
+    () => clover.getContentState(),
+    onChange
+  );
+  const enabled = Boolean(onChange);
+  useEffect(() => {
+    if (!enabled) return;
+    let canvasId = clover.store.get().canvasId;
+    const offStore = clover.store.subscribe(() => {
+      const next = clover.store.get().canvasId;
+      if (next !== canvasId) {
+        canvasId = next;
+        changed();
+      }
+    });
+    const offViewport = clover.viewport.subscribe(changed);
+    let offElement = watchMedia(clover.media.get(), changed);
+    const offMedia = clover.media.subscribe((element) => {
+      offElement();
+      offElement = watchMedia(element, changed);
+    });
+    changed();
+    return () => {
+      offStore();
+      offViewport();
+      offMedia();
+      offElement();
+    };
+  }, [clover, enabled, changed]);
+}
+export {
+  useContentStateOutput,
+  useRootContentState,
+  watchMedia
+};

package/dist/react/usePagesReached.mjs

@@ -0,0 +1,42 @@
+"use client";
+import { useState, useEffect, useCallback } from "react";
+import { findEntry, selectManifestSets } from "../core/annotation-sets.mjs";
+import { selectVisibleCanvases } from "../core/selectors.mjs";
+import { useClover, useCloverSelector } from "./context.mjs";
+function usePagesReached(pages) {
+  const { clover } = useClover("Annotations");
+  const pickedPage = useCloverSelector(
+    (state) => {
+      var _a;
+      return state.annotationId ? (_a = findEntry(selectManifestSets(state.manifest), state.annotationId)) == null ? void 0 : _a.setId : void 0;
+    }
+  );
+  const visible = useCloverSelector(
+    (state) => selectVisibleCanvases(state.manifest, state.canvasId)
+  );
+  const [reached, setReached] = useState(0);
+  const run = pages.findIndex((page) => !page.fetched);
+  const loaded = run === -1 ? pages.length : run;
+  const viewPage = pages.reduce(
+    (last, page, index) => visible.some((canvas) => canvas.id === page.canvasId) ? index : last,
+    -1
+  );
+  const upTo = Math.max(
+    reached,
+    pages.findIndex((page) => page.id === pickedPage),
+    viewPage,
+    0
+  );
+  useEffect(() => {
+    const missing = pages.slice(0, upTo + 1).filter((page) => !page.fetched).map((page) => page.id);
+    if (missing.length) clover.fetchAnnotationPages(missing);
+  }, [clover, pages, upTo]);
+  const reachNext = useCallback(
+    () => setReached((was) => Math.max(was, loaded)),
+    [loaded]
+  );
+  return { loaded, more: loaded < pages.length, reachNext };
+}
+export {
+  usePagesReached
+};