@nulib/clover 4.0.0-beta.1 → 4.1.0

package/dist/components/Canvas/Controls.mjs

@@ -1,29 +1,46 @@
 "use client";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
-import { Comment, Information } from "../Body/glyphs.mjs";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import { Place, Chapters, Information, Comment } from "../Body/glyphs.mjs";
 import Button from "../../ui/Button.mjs";
-import ControlCluster from "../../ui/ControlCluster.mjs";
+import ControlCluster, { renderControl } from "../../ui/ControlCluster.mjs";
 import { ZoomIn, ZoomOut, ZoomExitFullScreen, ZoomFullScreen, Rotate, Reset, Choice } from "../../ui/controlGlyphs.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { localize } from "../../core/value.mjs";
 import { toggleFullscreen } from "../../lib/fullscreen.mjs";
 import useFullscreenSupported from "../../hooks/useFullscreenSupported.mjs";
+import useWithinFullscreen from "../../hooks/useWithinFullscreen.mjs";
 import { useLoaded } from "../../hooks/useLoaded.mjs";
+import { Fits } from "./RowFits.mjs";
 import { SHORTCUTS } from "../../ui/Tip.mjs";
 const loadAnnotationMenu = () => import("./AnnotationMenu.mjs");
+const loadChaptersMenu = () => import("./ChaptersMenu.mjs");
 const loadChoiceMenu = () => import("./ChoiceMenu.mjs");
+const loadImageControls = () => import("./ImageControls.mjs");
 const ZOOM_PER_CLICK = 2;
+const VIEW = /* @__PURE__ */ new Set([
+  "zoomIn",
+  "zoomOut",
+  "rotateRight",
+  "rotateLeft",
+  "reset",
+  "fullPage"
+]);
 const Controls = ({
   renderer,
   instance,
   config,
   controlButtons,
-  hasPlaceholder,
+  placeholder,
+  placeholderIsMore = false,
   choices = [],
   selections = {},
   onSelect,
   annotations = [],
+  chapters = [],
+  mediaElement = null,
+  onChapter,
+  request,
   hiddenPages,
   onPageVisibilityChange,
   selectedAnnotation = null,
@@ -32,10 +49,15 @@ const Controls = ({
   captionId,
   captionOpen = false,
   onCaptionToggle,
+  placeId,
+  placeOpen = false,
+  onPlaceToggle,
   language,
+  fit = true,
+  more: moreWhen = "auto",
   children
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const { t, langOf } = useCloverTranslation();
   const [choiceOpen, setChoiceOpen] = useState(false);
   const [annotationsOpen, setAnnotationsOpen] = useState(false);
@@ -53,7 +75,44 @@ const Controls = ({
     [annotationsId, onAnnotationActivate]
   );
   const showAnnotations = config.annotations && annotations.length > 0 && onAnnotationSelect;
+  const [chaptersOpen, setChaptersOpen] = useState(false);
+  const chaptersId = `chapters-${instance}`;
+  const chaptersMenuId = `${chaptersId}-menu`;
+  const showChapters = chapters.length > 0 && Boolean(onChapter);
+  const chaptersFocused = useRef(false);
+  const figure = useRef(null);
+  useEffect(() => {
+    const follow = () => {
+      var _a2;
+      chaptersFocused.current = ((_a2 = document.activeElement) == null ? void 0 : _a2.id) === chaptersId;
+    };
+    document.addEventListener("focusin", follow);
+    return () => document.removeEventListener("focusin", follow);
+  }, [chaptersId]);
+  const handOn = useCallback(() => {
+    var _a2, _b2;
+    if (!chaptersFocused.current) return;
+    chaptersFocused.current = false;
+    const active = document.activeElement;
+    if (active && active !== document.body) return;
+    (_b2 = (_a2 = figure.current) == null ? void 0 : _a2.querySelector(
+      '.clover-canvas-transport :is([data-button="play"], [data-button="pause"])'
+    )) == null ? void 0 : _b2.focus();
+  }, []);
+  useEffect(() => {
+    if (!showChapters) handOn();
+  }, [showChapters, handOn]);
+  useEffect(() => () => handOn(), [handOn]);
+  const closeChapters = useCallback(
+    (restoreFocus) => {
+      var _a2;
+      setChaptersOpen(false);
+      if (restoreFocus) (_a2 = document.getElementById(chaptersId)) == null ? void 0 : _a2.focus();
+    },
+    [chaptersId]
+  );
   const showInformation = config.information && captionId && onCaptionToggle;
+  const showPlace = config.map && placeId && onPlaceToggle;
   const choiceId = `choice-${instance}`;
   const ownChoiceLabel = choices.length === 1 ? localize(choices[0].label, language) : null;
   const choiceLabel = (ownChoiceLabel == null ? void 0 : ownChoiceLabel.text) || t("canvasChoice");
@@ -63,10 +122,11 @@ const Controls = ({
     loadAnnotationMenu,
     Boolean(showAnnotations)
   )) == null ? void 0 : _a.default;
-  const ChoiceMenu = (_b = useLoaded(
+  const ChaptersMenu = (_b = useLoaded(loadChaptersMenu, showChapters)) == null ? void 0 : _b.default;
+  const ChoiceMenu = (_c = useLoaded(
     loadChoiceMenu,
     choices.length > 0 && Boolean(onSelect)
-  )) == null ? void 0 : _b.default;
+  )) == null ? void 0 : _c.default;
   const closeChoice = useCallback(
     (restoreFocus) => {
       var _a2;
@@ -76,11 +136,31 @@ const Controls = ({
     [choiceId]
   );
   const canFullscreen = useFullscreenSupported();
-  const controls = (isFullscreen) => {
-    const specs = [];
+  const [cluster, setCluster] = useState(null);
+  useEffect(() => {
+    figure.current = (cluster == null ? void 0 : cluster.closest(".clover-canvas")) ?? null;
+  }, [cluster]);
+  const isFullscreen = useWithinFullscreen(cluster);
+  const [moreOpen, setMoreOpen] = useState(false);
+  const annotationsButton = (className) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      className,
+      id: annotationsId,
+      label: annotationsLabel,
+      lang: annotationsLang,
+      onClick: () => setAnnotationsOpen((open) => !open),
+      expanded: annotationsOpen,
+      controls: annotationsMenuId,
+      children: /* @__PURE__ */ jsx(Comment, {})
+    },
+    "annotations"
+  );
+  const controls = () => {
+    const specs2 = [];
     const camera = renderer;
     if (config.zoom && camera) {
-      specs.push(
+      specs2.push(
         {
           key: "zoomIn",
           id: `zoomIn-${instance}`,
@@ -102,7 +182,7 @@ const Controls = ({
       );
     }
     if (config.fullPage && canFullscreen) {
-      specs.push({
+      specs2.push({
         key: "fullPage",
         id: `fullPage-${instance}`,
         label: isFullscreen ? t("imageExitFullScreen") : t("imageFullScreen"),
@@ -113,7 +193,7 @@ const Controls = ({
       });
     }
     if (config.rotation && camera) {
-      specs.push(
+      specs2.push(
         {
           key: "rotateRight",
           id: `rotateRight-${instance}`,
@@ -135,7 +215,7 @@ const Controls = ({
       );
     }
     if (config.reset && camera) {
-      specs.push({
+      specs2.push({
         key: "reset",
         id: `reset-${instance}`,
         shortcut: SHORTCUTS.reset,
@@ -147,7 +227,7 @@ const Controls = ({
       });
     }
     if (choices.length) {
-      specs.push({
+      specs2.push({
         key: "choice",
         id: choiceId,
         label: choiceLabel,
@@ -158,42 +238,141 @@ const Controls = ({
         controls: menuId
       });
     }
-    return specs;
+    return specs2;
   };
+  const specs = controls();
+  const view = [
+    ...specs.filter((spec) => spec.key !== "fullPage"),
+    ...specs.filter((spec) => spec.key === "fullPage")
+  ].map((spec) => ({
+    id: spec.id,
+    view: VIEW.has(spec.key),
+    node: renderControl(spec, controlButtons)
+  }));
+  const own = [
+    showPlace && {
+      id: `place-${instance}`,
+      view: false,
+      node: /* @__PURE__ */ jsx(
+        Button,
+        {
+          id: `place-${instance}`,
+          label: t("mapLabel"),
+          lang: langOf("mapLabel"),
+          onClick: onPlaceToggle,
+          expanded: placeOpen,
+          controls: placeId,
+          children: /* @__PURE__ */ jsx(Place, {})
+        },
+        "place"
+      )
+    },
+    showChapters && {
+      id: chaptersId,
+      view: false,
+      node: /* @__PURE__ */ jsx(
+        Button,
+        {
+          id: chaptersId,
+          label: t("playerChapters"),
+          lang: langOf("playerChapters"),
+          onClick: () => setChaptersOpen((open) => !open),
+          expanded: chaptersOpen,
+          controls: chaptersMenuId,
+          children: /* @__PURE__ */ jsx(Chapters, {})
+        },
+        "chapters"
+      )
+    },
+    showAnnotations && {
+      id: annotationsId,
+      view: false,
+      node: annotationsButton()
+    },
+    showInformation && {
+      id: `information-${instance}`,
+      view: false,
+      node: /* @__PURE__ */ jsx(
+        Button,
+        {
+          id: `information-${instance}`,
+          label: t("informationPanelTabsAbout"),
+          lang: langOf("informationPanelTabsAbout"),
+          onClick: onCaptionToggle,
+          expanded: captionOpen,
+          controls: captionId,
+          children: /* @__PURE__ */ jsx(Information, {})
+        },
+        "information"
+      )
+    },
+    Boolean(placeholder) && {
+      id: `placeholder-${instance}`,
+      view: false,
+      node: /* @__PURE__ */ jsx(React.Fragment, { children: placeholder }, "placeholder")
+    }
+  ].filter(
+    (item) => Boolean(item)
+  );
+  const toggle = own.filter((item) => item.id === `placeholder-${instance}`);
+  const lead = [...view.filter((item) => item.view), ...toggle];
+  const rest = [
+    ...view.filter((item) => !item.view),
+    ...own.filter((item) => !toggle.includes(item))
+  ];
+  const items = [...lead, ...rest];
+  const [fits, setFits] = useState(true);
+  const always = moreWhen === "always" || placeholderIsMore;
+  const ImageControls = (_d = useLoaded(
+    loadImageControls,
+    fit && (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;
+  useEffect(() => {
+    if (!tucked.length) setMoreOpen(false);
+  }, [tucked.length]);
+  const shown = (list) => list.filter(
+    (item) => !tucked.includes(item) && !(deck && item.id === `placeholder-${instance}`)
+  ).map(({ node }) => node);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      ControlCluster,
+    /* @__PURE__ */ jsxs(ControlCluster, { fit, clusterRef: setCluster, children: [
+      shown(lead),
+      ImageControls && tucked.length > 0 && /* @__PURE__ */ jsx(
+        ImageControls,
+        {
+          instance,
+          open: deck || moreOpen,
+          onOpenChange: setMoreOpen,
+          toggle: deck ? placeholder : void 0,
+          children: tucked.map(({ node }) => node)
+        }
+      ),
+      shown(rest),
+      children
+    ] }),
+    fit && !always && cluster && /* @__PURE__ */ jsx(
+      Fits,
+      {
+        cluster,
+        ids: items.map(({ id }) => id),
+        more: `more-${instance}`,
+        fits,
+        onFits: setFits
+      }
+    ),
+    ChaptersMenu && chaptersOpen && showChapters && /* @__PURE__ */ jsx(
+      ChaptersMenu,
       {
-        controls,
-        controlButtons,
-        hasPlaceholder,
-        children: [
-          showAnnotations && /* @__PURE__ */ jsx(
-            Button,
-            {
-              id: annotationsId,
-              label: annotationsLabel,
-              lang: annotationsLang,
-              onClick: () => setAnnotationsOpen((open) => !open),
-              expanded: annotationsOpen,
-              controls: annotationsMenuId,
-              children: /* @__PURE__ */ jsx(Comment, {})
-            }
-          ),
-          showInformation && /* @__PURE__ */ jsx(
-            Button,
-            {
-              id: `information-${instance}`,
-              label: t("informationPanelTabsAbout"),
-              lang: langOf("informationPanelTabsAbout"),
-              onClick: onCaptionToggle,
-              expanded: captionOpen,
-              controls: captionId,
-              children: /* @__PURE__ */ jsx(Information, {})
-            }
-          ),
-          children
-        ]
+        id: chaptersMenuId,
+        triggerId: chaptersId,
+        label: t("playerChapters"),
+        labelLang: langOf("playerChapters"),
+        chapters,
+        element: mediaElement,
+        onChapter,
+        request,
+        onClose: closeChapters
       }
     ),
     AnnotationMenu && annotationsOpen && showAnnotations && /* @__PURE__ */ jsx(

package/dist/components/Canvas/ControlsFade.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { useEffect } from "react";
+import { useControlsVisibility } from "../Body/useControlsVisibility.mjs";
+function ControlsFade({
+  element,
+  hideDelay,
+  picture,
+  onChange
+}) {
+  const visible = useControlsVisibility(element, hideDelay, picture);
+  useEffect(() => onChange(visible), [visible, onChange]);
+  return null;
+}
+export {
+  ControlsFade as default
+};