@nulib/clover 4.0.0 → 4.1.0

package/dist/components/Canvas/RowFits.mjs

@@ -0,0 +1,85 @@
+"use client";
+import { useRef, useLayoutEffect } from "react";
+function fitsRow(widths, room, gap) {
+  return widths.reduce((sum, width) => sum + width + gap, -gap) <= room;
+}
+function refocus(cluster, id, more) {
+  const page = cluster.ownerDocument;
+  const shown = (node) => node instanceof HTMLElement && cluster.contains(node) && !node.closest("[hidden]");
+  const target = [
+    page.getElementById(id),
+    page.getElementById(more),
+    ...Array.from(cluster.querySelectorAll("button"))
+  ].find(shown);
+  target == null ? void 0 : target.focus();
+}
+function Fits({
+  cluster,
+  ids,
+  more,
+  fits,
+  onFits
+}) {
+  const shown = useRef(fits);
+  shown.current = fits;
+  const report = useRef(onFits);
+  report.current = onFits;
+  const widths = useRef(/* @__PURE__ */ new Map());
+  const latest = useRef(ids);
+  latest.current = ids;
+  const moved = useRef(null);
+  const key = ids.join(" ");
+  useLayoutEffect(() => {
+    const page = cluster.ownerDocument;
+    const measure = () => {
+      var _a;
+      const ids2 = latest.current;
+      const style = getComputedStyle(cluster);
+      const gap = parseFloat(style.columnGap) || 0;
+      let room = cluster.clientWidth - (parseFloat(style.paddingLeft) || 0) - (parseFloat(style.paddingRight) || 0);
+      let unit = 0;
+      for (const id of ids2) {
+        const width = (_a = page.getElementById(id)) == null ? void 0 : _a.offsetWidth;
+        if (width) widths.current.set(id, width);
+        unit = Math.max(unit, widths.current.get(id) ?? 0);
+      }
+      for (const child of Array.from(cluster.children)) {
+        if (!(child instanceof HTMLElement) || ids2.includes(child.id) || child.id === more || child.classList.contains("clover-canvas-more") || !child.offsetWidth || getComputedStyle(child).position === "absolute")
+          continue;
+        room -= child.offsetWidth + gap;
+      }
+      const next = fitsRow(
+        ids2.map((id) => widths.current.get(id) ?? unit),
+        room,
+        gap
+      );
+      if (next === shown.current) return;
+      const active = page.activeElement;
+      moved.current = active instanceof HTMLElement && cluster.contains(active) ? active.id : null;
+      shown.current = next;
+      report.current(next);
+    };
+    measure();
+    const resize = new ResizeObserver(() => measure());
+    resize.observe(cluster);
+    const mutation = new MutationObserver(() => measure());
+    mutation.observe(cluster, { childList: true });
+    return () => {
+      resize.disconnect();
+      mutation.disconnect();
+    };
+  }, [cluster, key, more]);
+  useLayoutEffect(() => {
+    const id = moved.current;
+    moved.current = null;
+    if (id === null) return;
+    const active = cluster.ownerDocument.activeElement;
+    if (!active || !cluster.contains(active) || active.closest("[hidden]"))
+      refocus(cluster, id, more);
+  }, [fits, cluster, more]);
+  return null;
+}
+export {
+  Fits,
+  fitsRow
+};

package/dist/components/Canvas/layout.mjs

@@ -169,6 +169,16 @@ function paintedImages(canvas, selections = {}, { allFrames = false } = {}) {
   );
   return images;
 }
+function paintedType(canvases, selections = {}) {
+  for (const canvas of canvases) {
+    let type;
+    eachPainted(canvas, selections, (resolved) => {
+      type ?? (type = resolved.body.type);
+    });
+    if (typeof type === "string") return type.toLowerCase();
+  }
+  return void 0;
+}
 function paintedMedia(canvas, selections = {}) {
   const media = [];
   eachPainted(canvas, selections, (resolved, target, _frame, t) => {
@@ -451,6 +461,7 @@ export {
   mediaSegments,
   paintedImages,
   paintedMedia,
+  paintedType,
   placeholderStill,
   playsHere,
   resolveBody,

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

@@ -1,13 +1,13 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useEffect, useState } from "react";
-import { PlayerFace, PlayerChapters } from "./Player.mjs";
-import Transport, { chapterAt } from "./Transport.mjs";
+import { useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { PlayerFace } from "./Player.mjs";
+import Transport from "./Transport.mjs";
 import { useCaptionTracks } from "./useCaptionTracks.mjs";
 import { useMediaController } from "./useMediaController.mjs";
 import { useMediaElement, captionName } from "./useMediaElement.mjs";
 import { cueText } from "../../../core/vtt.mjs";
-import { playFrom } from "../../../lib/time.mjs";
+import { hasCamera } from "../surface.mjs";
 import { useOptionalClover } from "../../../react/context.mjs";
 import { BodyUnloadable } from "../../../ui/BodyUnloadable.mjs";
 import { languageProps } from "../../../i18n/direction.mjs";
@@ -16,6 +16,7 @@ const MOMENT_SECONDS = 3;
 const MediaBody = ({
   media,
   request,
+  fillable = false,
   surface,
   instance,
   onElement,
@@ -39,6 +40,48 @@ const MediaBody = ({
   const language = givenLanguage ?? rootLanguage;
   const element = useMediaElement(media, { request, language });
   const controller = useMediaController(element, media.duration);
+  const [filled, setFilled] = useState(false);
+  const filledRef = useRef(filled);
+  filledRef.current = filled;
+  const frameVideo = useCallback(
+    (immediate) => {
+      if (!hasCamera(surface)) return;
+      if (!filledRef.current) return surface.home(immediate);
+      const world = surface.getHomeBounds();
+      const host = surface.host;
+      if (!world || !(host == null ? void 0 : host.clientWidth) || !host.clientHeight) return;
+      surface.fitBounds(
+        fillRect(world, host.clientWidth / host.clientHeight),
+        immediate
+      );
+    },
+    [surface]
+  );
+  const firstFit = useRef(true);
+  useEffect(() => {
+    if (firstFit.current) {
+      firstFit.current = false;
+      return;
+    }
+    if (fillable) frameVideo(false);
+  }, [filled, fillable, frameVideo]);
+  useEffect(() => {
+    if (!fillable || !filled || !hasCamera(surface)) return;
+    const again = () => frameVideo(true);
+    const observer = new ResizeObserver(again);
+    observer.observe(surface.host);
+    const offOpen = surface.on("open", again);
+    const offChange = surface.on("change", again);
+    return () => {
+      observer.disconnect();
+      offOpen();
+      offChange();
+    };
+  }, [fillable, filled, surface, frameVideo]);
+  const fill = useMemo(
+    () => fillable ? { filled, onToggle: () => setFilled((was) => !was) } : void 0,
+    [fillable, filled]
+  );
   const failed = useMediaFailed(element);
   const own = useMemo(
     () => media.captions.map((caption2, index) => {
@@ -167,43 +210,45 @@ const MediaBody = ({
       chapters,
       highlightedChapter,
       onChapterHighlight,
-      request
+      request,
+      fill
     }
   );
-  const cuesShown = cues.length + playing.length > 0 && /* @__PURE__ */ jsxs("div", { className: "clover-canvas-captions", "aria-live": "off", children: [
-    playing.map((note) => /* @__PURE__ */ jsxs(
-      "span",
-      {
-        className: "clover-canvas-captions-cue",
-        "data-kind": "annotation",
-        children: [
-          note.page && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "clover-canvas-captions-cue-label",
-              ...languageProps(note.page.lang),
-              children: note.page.text
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { ...languageProps(note.lang), children: note.label })
-        ]
-      },
-      note.id
-    )),
-    cues.map((text, index) => /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "clover-canvas-captions-cue",
-        ...languageProps(
-          captionLanguage && captionLanguage !== "none" ? captionLanguage : void 0
+  const noteLines = playing.map((note) => /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "clover-canvas-captions-cue",
+      "data-kind": "annotation",
+      children: [
+        note.page && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "clover-canvas-captions-cue-label",
+            ...languageProps(note.page.lang),
+            children: note.page.text
+          }
         ),
-        children: text
-      },
-      index
-    ))
+        /* @__PURE__ */ jsx("span", { ...languageProps(note.lang), children: note.label })
+      ]
+    },
+    note.id
+  ));
+  const captionLines = cues.map((text, index) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "clover-canvas-captions-cue",
+      ...languageProps(
+        captionLanguage && captionLanguage !== "none" ? captionLanguage : void 0
+      ),
+      children: text
+    },
+    index
+  ));
+  const cuesShown = cues.length + playing.length > 0 && /* @__PURE__ */ jsxs("div", { className: "clover-canvas-captions", "aria-live": "off", children: [
+    noteLines,
+    captionLines
   ] });
   if (player) {
-    const current = chapterAt(chapters ?? [], currentTime);
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -221,17 +266,17 @@ const MediaBody = ({
               language
             }
           ),
-          cuesShown,
-          transport,
-          /* @__PURE__ */ jsx(BodyUnloadable, { kind: media.kind, shown: failed, room: true }),
-          chapters && chapters.length > 0 && /* @__PURE__ */ jsx(
-            PlayerChapters,
+          playing.length > 0 && /* @__PURE__ */ jsx(
+            "div",
             {
-              chapters,
-              current,
-              onSeek: (seconds) => element && playFrom(element, seconds)
+              className: "clover-canvas-captions clover-canvas-player-notes",
+              "aria-live": "off",
+              children: noteLines
             }
-          )
+          ),
+          cues.length > 0 && /* @__PURE__ */ jsx("div", { className: "clover-canvas-captions", "aria-live": "off", children: captionLines }),
+          transport,
+          /* @__PURE__ */ jsx(BodyUnloadable, { kind: media.kind, shown: failed, room: true })
         ] })
       }
     );
@@ -291,6 +336,19 @@ function useVideoSize(element) {
   }, [element]);
   return size;
 }
+function fillRect(world, shape) {
+  return world.width / world.height > shape ? {
+    x: world.x + (world.width - world.height * shape) / 2,
+    y: world.y,
+    width: world.height * shape,
+    height: world.height
+  } : {
+    x: world.x,
+    y: world.y + (world.height - world.width / shape) / 2,
+    width: world.width,
+    height: world.width / shape
+  };
+}
 function containAspect(box, size) {
   if (!size) return box;
   if (!box.width || !box.height)
@@ -307,5 +365,6 @@ function containAspect(box, size) {
 }
 export {
   containAspect,
-  MediaBody as default
+  MediaBody as default,
+  fillRect
 };

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

@@ -3,9 +3,6 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { thumbnailSource, stillSource } from "../../../core/thumbnail.mjs";
 import { localize } from "../../../core/value.mjs";
-import { useCloverTranslation } from "../../../i18n/useCloverTranslation.mjs";
-import { useContainerName } from "../../../i18n/useContainerName.mjs";
-import { CueTime } from "../../../ui/Cue.mjs";
 import { useThumbnail } from "../../../ui/EntryThumbnail.mjs";
 import { languageProps } from "../../../i18n/direction.mjs";
 const ART_SIZE = 1200;
@@ -122,58 +119,6 @@ function PlayerFace({
     ] })
   ] });
 }
-function PlayerChapters({
-  chapters,
-  current,
-  onSeek
-}) {
-  const { t, langOf, hostLanguage } = useCloverTranslation();
-  const name = useContainerName(
-    t("playerChapters"),
-    langOf("playerChapters"),
-    false,
-    hostLanguage
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("ol", { className: "clover-canvas-player-chapters", ...name.props, children: chapters.map((chapter, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: "clover-canvas-player-chapter",
-        "aria-current": index === current ? "true" : void 0,
-        onClick: () => onSeek(chapter.start),
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "clover-canvas-player-chapter-number",
-              "aria-hidden": "true",
-              children: index + 1
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "clover-canvas-player-chapter-label",
-              ...languageProps(chapter.lang || void 0),
-              children: chapter.label
-            }
-          ),
-          " ",
-          /* @__PURE__ */ jsx(
-            CueTime,
-            {
-              start: chapter.start,
-              className: "clover-canvas-player-chapter-time"
-            }
-          )
-        ]
-      }
-    ) }, chapter.id ?? index)) }),
-    name.node
-  ] });
-}
 export {
-  PlayerChapters,
   PlayerFace
 };

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

@@ -11,7 +11,7 @@ import { join } from "../../../lib/classnames.mjs";
 import { languageCode } from "../../../i18n/languageCode.mjs";
 import { Tip, SHORTCUTS } from "../../../ui/Tip.mjs";
 import { useOneOpen } from "../../../ui/useOneOpen.mjs";
-import { PlayIcon, PauseIcon, VolumeMutedIcon, VolumeHighIcon, ChaptersIcon, CaptionsIcon, ExitFullScreenIcon, FullScreenIcon } from "../../../ui/mediaIcons.mjs";
+import { PlayIcon, PauseIcon, VolumeMutedIcon, VolumeHighIcon, CaptionsIcon, FitIcon, FillIcon, ExitFullScreenIcon, FullScreenIcon } from "../../../ui/mediaIcons.mjs";
 import { useContainerName } from "../../../i18n/useContainerName.mjs";
 import { useCloverTranslation } from "../../../i18n/useCloverTranslation.mjs";
 import { toggleFullscreen } from "../../../lib/fullscreen.mjs";
@@ -239,7 +239,8 @@ const Transport = ({
   chapters = [],
   highlightedChapter = null,
   onChapterHighlight,
-  request
+  request,
+  fill
 }) => {
   var _a, _b;
   const { t, langOf } = useCloverTranslation();
@@ -487,27 +488,7 @@ const Transport = ({
               }
             )
           ] }),
-          (chapters.length > 0 || captions.length > 0 || hasFullscreen) && /* @__PURE__ */ jsxs("div", { className: "clover-canvas-transport-end", children: [
-            chapters.length > 0 && /* @__PURE__ */ jsx(
-              TransportMenu,
-              {
-                id: `${instance}-chapters`,
-                label: t("playerChapters"),
-                labelLang: langOf("playerChapters"),
-                button: "chapters",
-                icon: /* @__PURE__ */ jsx(ChaptersIcon, {}),
-                options: chapters.map((item) => ({
-                  label: item.label,
-                  lang: item.lang,
-                  time: formatTime(item.start),
-                  thumbnail: chapterPicture(item)
-                })),
-                selected: chapter,
-                onSelect: (index) => controller.seek(chapters[index].start),
-                request,
-                asMenu: true
-              }
-            ),
+          (captions.length > 0 || hasFullscreen || fill) && /* @__PURE__ */ jsxs("div", { className: "clover-canvas-transport-end", children: [
             captions.length > 0 && /* @__PURE__ */ jsx(
               TransportMenu,
               {
@@ -523,6 +504,15 @@ const Transport = ({
                 onSelect: (index) => onCaptionChange(index - 1)
               }
             ),
+            fill && /* @__PURE__ */ jsx(
+              TransportButton,
+              {
+                words: fill.filled ? "playerFit" : "playerFill",
+                button: "fill",
+                onClick: fill.onToggle,
+                children: fill.filled ? /* @__PURE__ */ jsx(FitIcon, {}) : /* @__PURE__ */ jsx(FillIcon, {})
+              }
+            ),
             hasFullscreen && /* @__PURE__ */ jsx(
               TransportButton,
               {
@@ -540,5 +530,6 @@ const Transport = ({
 };
 export {
   chapterAt,
+  chapterPicture,
   Transport as default
 };

package/dist/components/Canvas/panClearOfControls.mjs

@@ -1,6 +1,6 @@
 "use client";
 const CONTROLS = [
-  ".clover-canvas-controls",
+  ".clover-canvas-controls > *",
   ".clover-canvas-navigator",
   ".clover-canvas-transport",
   '.clover-canvas-caption[data-open="true"]',

package/dist/components/Collection/Collection.mjs

@@ -59,7 +59,7 @@ const Collection = forwardRef(
             {
               as: label.as,
               label: shown.label,
-              className: "clover-collection-title",
+              className: "clover-collection-title clover-title",
               ...label.title
             }
           ),

package/dist/components/Items/CountMenu.mjs

@@ -78,6 +78,7 @@ function CountMenu({
         triggerId,
         onClose: close,
         holds,
+        inside: true,
         className: "clover-pager-menu",
         children: /* @__PURE__ */ jsx("div", { className: "clover-collection clover-pager-list", children: list(() => close(true)) })
       }

package/dist/components/Items/Item.mjs

@@ -130,14 +130,15 @@ function ItemFigure({
   size,
   language,
   request,
-  showSummary = false
+  showSummary = false,
+  secondary = "summary"
 }) {
   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 navDate = showSummary ? readDate(item.navDate) : null;
+  const summary = showSummary && secondary === "summary" ? localize(item.summary, language) : null;
+  const navDate = showSummary && secondary === "navDate" ? readDate(item.navDate) : null;
   const labeled = labels.some((label) => label.text);
   return /* @__PURE__ */ jsxs(
     "figure",

package/dist/components/Items/Items.mjs

@@ -115,6 +115,7 @@ function MemberItems({
 function ViewItems({
   onSelect,
   forwardedRef,
+  singleItem = false,
   ...rest
 }) {
   const { clover, language } = useOptionalClover();
@@ -126,7 +127,7 @@ function ViewItems({
     (state) => selectSequence(state.manifest).direction
   );
   const items = itemsOfManifest(manifest);
-  if (items.length < 2) return null;
+  if (items.length < (singleItem ? 1 : 2)) return null;
   const select = (item) => clover.goTo(item.id);
   if (rest.layout === "pager") {
     return /* @__PURE__ */ jsx(
@@ -186,6 +187,7 @@ function ItemsView({
   request,
   language,
   showSummary = false,
+  secondary = "summary",
   heading,
   headingLevel = 2,
   renderItem,
@@ -194,9 +196,11 @@ function ItemsView({
   as: Tag = "section",
   className,
   "aria-label": ariaLabel,
-  // The pager's, not a list's.
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // The pager's, not a list's, and the views' alone (`ViewItems`).
+  /* eslint-disable @typescript-eslint/no-unused-vars */
   size,
+  singleItem,
+  /* eslint-enable @typescript-eslint/no-unused-vars */
   highContrast,
   ...rest
 }) {
@@ -208,6 +212,21 @@ function ItemsView({
   const contrast = useHighContrast(highContrast);
   const slider = layout === "slider";
   const listbox = navigation === "id";
+  const viewport = useRef(null);
+  const masonry = layout === "masonry";
+  useEffect(() => {
+    const box = viewport.current;
+    if (!masonry || !box) return;
+    let release;
+    let live = true;
+    void import("./masonry.mjs").then(({ attachMasonry }) => {
+      if (live) release = attachMasonry(box);
+    });
+    return () => {
+      live = false;
+      release == null ? void 0 : release();
+    };
+  }, [masonry]);
   const track = useScrollTrack({
     align: listbox ? "center" : "start",
     itemCount: items.length
@@ -245,16 +264,16 @@ function ItemsView({
     var _a2;
     if (selected < 0) return;
     const instant = !arrived.current;
-    arrived.current = true;
     if (slider) {
-      track.scrollToIndex(selected, { instant });
+      if (track.scrollToIndex(selected, { instant })) arrived.current = true;
       return;
     }
+    arrived.current = true;
     const option = (_a2 = listRef.current) == null ? void 0 : _a2.querySelector(
       `[data-track-index="${selected}"]`
     );
     if (option) keepInView(option, instant);
-  }, [slider, selected]);
+  }, [slider, selected, track.scrollToIndex]);
   const Title = titleTag(headingLevel);
   const headingLabel = heading ? localize(heading.label, language) : null;
   const headingSummary = heading ? localize(heading.summary, language) : null;
@@ -273,10 +292,11 @@ function ItemsView({
       size: thumbnailSize,
       language,
       request,
-      showSummary
+      showSummary,
+      secondary
     }
   );
-  const positioned = (item) => !(renderItem || localize(item.label, language).text || showSummary && localize(item.summary, language).text);
+  const positioned = (item) => !(renderItem || localize(item.label, language).text || showSummary && secondary === "summary" && localize(item.summary, language).text);
   const positionName = (item, index) => positioned(item) ? t("canvasPosition", { index: index + 1, total: items.length }) : void 0;
   const positionLang = (item) => positioned(item) ? langOf("canvasPosition") : void 0;
   const trackStyle = slider ? { display: "flex", margin: 0, padding: 0, listStyle: "none" } : void 0;
@@ -347,7 +367,7 @@ function ItemsView({
           (headingLabel == null ? void 0 : headingLabel.text) && /* @__PURE__ */ jsx(
             Title,
             {
-              className: "clover-items-title",
+              className: "clover-items-title clover-title",
               id: `${id}-title`,
               ...languageProps(headingLabel.lang),
               children: headingLabel.text
@@ -385,7 +405,7 @@ function ItemsView({
                 {
                   id: `${id}-viewport`,
                   className: "clover-items-viewport",
-                  ref: slider ? track.ref : void 0,
+                  ref: slider ? track.ref : viewport,
                   children: listbox ? /* @__PURE__ */ jsx(
                     "div",
                     {

package/dist/components/Items/PagerLayout.mjs

@@ -18,6 +18,8 @@ function PagerLayout({
   language,
   navigation,
   of,
+  secondary,
+  singleItem,
   /* eslint-enable @typescript-eslint/no-unused-vars */
   highContrast,
   ...rest

package/dist/components/Items/TargetItems.mjs

@@ -172,7 +172,7 @@ function TargetsSection({
       heading.text && /* @__PURE__ */ jsx(
         Title,
         {
-          className: "clover-collection-title",
+          className: "clover-collection-title clover-title",
           ...languageProps(heading.lang),
           children: heading.text
         }

package/dist/components/Items/masonry.mjs

@@ -0,0 +1,35 @@
+"use client";
+function attachMasonry(box) {
+  const items = () => Array.from(
+    box.querySelectorAll(
+      ".clover-items-track > .clover-items-item"
+    )
+  );
+  const span = (item) => {
+    const track = item.parentElement;
+    if (!track) return;
+    const style = getComputedStyle(track);
+    const row = parseFloat(style.gridAutoRows) || 1;
+    const gap = parseFloat(style.columnGap) || 0;
+    const height = item.getBoundingClientRect().height;
+    item.style.gridRowEnd = `span ${Math.max(1, Math.ceil((height + gap) / row))}`;
+  };
+  const sizes = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(
+    (entries) => entries.forEach((entry) => span(entry.target))
+  );
+  const watch = () => items().forEach((item) => {
+    sizes == null ? void 0 : sizes.observe(item);
+    span(item);
+  });
+  const added = new MutationObserver(watch);
+  added.observe(box, { childList: true, subtree: true });
+  watch();
+  return () => {
+    added.disconnect();
+    sizes == null ? void 0 : sizes.disconnect();
+    items().forEach((item) => item.style.removeProperty("grid-row-end"));
+  };
+}
+export {
+  attachMasonry
+};