@nulib/clover 4.0.0-beta.1 → 4.0.0

package/dist/components/Canvas/LoadedCanvas.mjs

@@ -7,7 +7,7 @@ import { paintedMedia } from "./layout.mjs";
 import { CanvasPending } from "../Body/Pending.mjs";
 import { BodyAlert } from "../Body/BodyAlert.mjs";
 import { loadAnnotationSets } from "../../core/annotation-collection.mjs";
-import { readPage } from "../../core/annotation-sets.mjs";
+import { readPage, pageLabel } from "../../core/annotation-sets.mjs";
 import { loadContent } from "../../core/load.mjs";
 import { useLoaded } from "../../hooks/useLoaded.mjs";
 const loadRanges = () => import("../../core/ranges.mjs");
@@ -132,6 +132,7 @@ function LoadedCanvas({
         canvases: [view.canvas],
         label: props.label ?? view.canvas.label ?? view.content.manifest.label,
         partOf: props.partOf ?? view.content.manifest.label,
+        navPlace: props.navPlace ?? view.content.manifest.navPlace,
         annotations: props.annotations ?? annotations,
         onAnnotationLink: onAnnotationLink ?? follow,
         chapters: props.chapters ?? chapters,
@@ -151,7 +152,7 @@ async function annotationsOf(canvas, content, request) {
   const sets = [
     ...embedded.map((page, index) => ({
       id: page.id ?? `annotations-${index}`,
-      label: page.label,
+      label: pageLabel(page),
       entries: readPage(page, page.id ?? `annotations-${index}`, canvas.id)
     })),
     ...referenced.length ? await loadAnnotationSets(referenced, { request }) : [],
@@ -168,7 +169,8 @@ async function annotationsOf(canvas, content, request) {
       annotation: entry.annotation,
       targetIndex: 0,
       pageId: set.id,
-      ...set.label ? { pageLabel: set.label } : {}
+      ...set.label ? { pageLabel: set.label } : {},
+      ...entry.place ? { place: entry.place } : {}
     }))
   );
 }

package/dist/components/Canvas/PlaceBox.mjs

@@ -0,0 +1,74 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Close } from "../Body/glyphs.mjs";
+import { GivenMap } from "../Map/MapView.mjs";
+import Button from "../../ui/Button.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { localize } from "../../core/value.mjs";
+import { useOneOpen } from "../../ui/useOneOpen.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
+import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
+function PlaceBox({
+  id,
+  open,
+  onClose,
+  feature,
+  name,
+  language
+}) {
+  const { t, langOf } = useCloverTranslation();
+  useOneOpen(open, () => onClose(false));
+  const heading = localize(name, language);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "clover-canvas-caption clover-canvas-place",
+      "data-open": open,
+      "data-testid": "clover-canvas-place",
+      id,
+      role: "group",
+      "aria-labelledby": heading.text ? `${id}-name` : void 0,
+      onKeyDown: (event) => {
+        if (event.key !== "Escape") return;
+        event.preventDefault();
+        event.stopPropagation();
+        onClose(true);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "clover-canvas-caption-close",
+            id: `close-${id}`,
+            label: t("commonClose"),
+            lang: langOf("commonClose"),
+            onClick: () => onClose(true),
+            children: /* @__PURE__ */ jsx(Close, {})
+          }
+        ),
+        heading.text && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: `${id}-name`,
+            style: visuallyHidden,
+            ...languageProps(heading.lang),
+            children: heading.text
+          }
+        ),
+        open && /* @__PURE__ */ jsx(
+          GivenMap,
+          {
+            navPlace: feature,
+            forwardedRef: null,
+            landmark: false,
+            list: false,
+            language
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PlaceBox as default
+};

package/dist/components/Canvas/Placeholder.mjs

@@ -5,6 +5,7 @@ import { Play, Close, OpenViewer, CloseViewer } from "../Body/glyphs.mjs";
 import Button from "../../ui/Button.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { STILL_SIZE } from "./layout.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 function useStill(source, request) {
   const [src, setSrc] = useState(source.src);
   const key = source.src ?? source.service ?? source.fallback;
@@ -32,7 +33,7 @@ function Still({
       "img",
       {
         alt: still.alt,
-        lang: still.alt ? still.lang : void 0,
+        ...languageProps(still.alt ? still.lang : void 0),
         src,
         style
       }

package/dist/components/Canvas/fromManifest.mjs

@@ -10,7 +10,8 @@ function useRangeChapters(manifest, playing, language, read) {
         label: value.text,
         lang: value.lang,
         start: chapter.start,
-        end: chapter.end
+        end: chapter.end,
+        ...chapter.thumbnail ? { thumbnail: chapter.thumbnail } : {}
       };
     }),
     [manifest, playing, language, read]

package/dist/components/Canvas/layout.mjs

@@ -2,7 +2,10 @@
 import { parseAnnotationTarget, isSound } from "../../core/annotations.mjs";
 import { isPainting, bodiesOf } from "../../core/painting.mjs";
 import { findImageServiceId } from "../../lib/renderer/sources/imageService.mjs";
+import { parseTime } from "../../lib/time.mjs";
+import { choiceKey as choiceKey$1 } from "../../core/choice-key.mjs";
 import { asArray } from "../../lib/asArray.mjs";
+import { isHls } from "../../lib/hls.mjs";
 const TIME_BASED_CANVAS = { width: 1600, height: 900 };
 function arrangeCanvases(canvases, direction) {
   const placements = new Array(canvases.length);
@@ -42,7 +45,7 @@ function companionCanvas(canvas) {
   return canvas.accompanyingContainer ?? canvas.placeholderContainer;
 }
 function choiceKey(canvas, annotation, page, index, body) {
-  return `${canvas.id}|${annotation.id ?? `${page}:${index}`}|${body}`;
+  return choiceKey$1(canvas.id, annotation.id, page, index, body);
 }
 function findChoices(canvases) {
   const groups = [];
@@ -58,15 +61,46 @@ function findChoices(canvases) {
           key,
           canvasId: canvas.id,
           label: body.label,
-          items: items.map((item) => ({ label: item.label, id: item.id }))
+          items: items.map((item) => ({
+            label: item.label,
+            id: item.id,
+            ...typeof item.type === "string" ? { type: item.type } : {},
+            ...typeof item.format === "string" ? { format: item.format } : {}
+          }))
         });
       }
     });
   }
   return groups;
 }
+const testers = {};
+function playsHere(item) {
+  if (item.type !== "Video" && !isSound(item.type)) return true;
+  if (!item.format || isHls(item.id, item.format)) return true;
+  if (typeof document === "undefined") return true;
+  const kind = item.type === "Video" ? "video" : "audio";
+  const tester = testers[kind] ?? (testers[kind] = document.createElement(kind));
+  if (typeof tester.canPlayType !== "function") return true;
+  return tester.canPlayType(item.format) !== "";
+}
+function startingChoices(groups) {
+  const chosen = {};
+  for (const group of groups) {
+    const first = group.items.findIndex(playsHere);
+    if (first > 0) chosen[group.key] = first;
+  }
+  return chosen;
+}
 const framesOf = /* @__PURE__ */ new WeakMap();
 const NO_FRAMES = [];
+function paintsMedia(annotation) {
+  return bodiesOf(annotation).some((body) => {
+    const items = (body == null ? void 0 : body.type) === "Choice" ? asArray(body.items) : [body];
+    return items.some(
+      (item) => (item == null ? void 0 : item.type) === "Video" || isSound(item == null ? void 0 : item.type)
+    );
+  });
+}
 function animationFrames(canvas) {
   var _a;
   const cached = framesOf.get(canvas);
@@ -82,12 +116,17 @@ function animationFrames(canvas) {
       frames.push({ annotation, start, end: Number.isFinite(end) ? end : NaN });
     }
   }
+  if (frames.every((frame) => paintsMedia(frame.annotation))) {
+    framesOf.set(canvas, NO_FRAMES);
+    return NO_FRAMES;
+  }
   frames.sort((a, b) => a.start - b.start);
   const duration = Number(canvas.duration);
   const share = Number.isFinite(duration) && duration / frames.length || 0.5;
   frames.forEach((frame, index) => {
     var _a2;
     const next = (_a2 = frames[index + 1]) == null ? void 0 : _a2.start;
+    if (frame.end > frame.start) return;
     if (next != null) {
       frame.end = next > frame.start ? next : frame.start + share;
     } else if (Number.isFinite(duration) && duration > frame.start) {
@@ -121,6 +160,7 @@ function paintedImages(canvas, selections = {}, { allFrames = false } = {}) {
       images.push({
         body: resolved.body,
         region: resolved.region,
+        ...resolved.rotation ? { rotation: resolved.rotation } : {},
         target,
         ...frame >= 0 ? { frame } : {}
       });
@@ -131,17 +171,35 @@ function paintedImages(canvas, selections = {}, { allFrames = false } = {}) {
 }
 function paintedMedia(canvas, selections = {}) {
   const media = [];
-  eachPainted(canvas, selections, (resolved, target) => {
+  eachPainted(canvas, selections, (resolved, target, _frame, t) => {
     const type = resolved.body.type;
     if (type !== "Video" && !isSound(type)) return;
+    const time = parseTime(t);
     media.push({
       kind: type === "Video" ? "video" : "audio",
       body: resolved.body,
-      target
+      target,
+      ...time ? { time } : {}
     });
   });
   return media;
 }
+function mediaSegments(media) {
+  const timed = media.filter(
+    (item) => item.time && typeof item.body.id === "string"
+  );
+  const starts = new Set(timed.map((item) => item.time.start));
+  if (timed.length < 2 || starts.size !== timed.length) return void 0;
+  return timed.sort((a, b) => a.time.start - b.time.start).map((item) => {
+    const own = Number(item.body.duration) || (item.time.end !== void 0 ? item.time.end - item.time.start : void 0);
+    return {
+      src: item.body.id,
+      ...item.body.format ? { format: item.body.format } : {},
+      start: item.time.start,
+      ...own ? { duration: own } : {}
+    };
+  });
+}
 function eachPainted(canvas, selections, visit, allFrames = false) {
   const width = canvas.width ?? 0;
   const height = canvas.height ?? 0;
@@ -165,11 +223,25 @@ function eachPainted(canvas, selections, visit, allFrames = false) {
         width: width || Number(resolved.body.width) || 0,
         height: height || Number(resolved.body.height) || 0
       },
-      frame
+      frame,
+      parsed == null ? void 0 : parsed.t
     );
   });
 }
 function canvasCaptions(canvas) {
+  return canvasTimedText(canvas).filter(
+    (each) => each.kind !== "transcript"
+  );
+}
+function timedTextKind(annotation) {
+  const provides = asArray(annotation.provides);
+  if (provides.includes("closedCaptions")) return "captions";
+  if (provides.includes("subtitles") || provides.includes("translation"))
+    return "subtitles";
+  if (provides.includes("transcript")) return "transcript";
+  return "captions";
+}
+function canvasTimedText(canvas) {
   const tracks = [];
   const pages = [...canvas.annotations ?? [], ...canvas.items ?? []];
   for (const page of pages) {
@@ -185,7 +257,8 @@ function canvasCaptions(canvas) {
           tracks.push({
             id,
             label: candidate.label,
-            language: asArray(candidate.language)[0]
+            language: asArray(candidate.language)[0],
+            kind: timedTextKind(annotation)
           });
         }
       }
@@ -230,10 +303,16 @@ function resolveBody(raw, choice = 0) {
   if (body.type === "SpecificResource" && body.source) {
     const source = typeof body.source === "string" ? { id: body.source } : body.source;
     const selector = asArray(body.selector).find(
-      (s) => (s == null ? void 0 : s.type) === "ImageApiSelector" && s.region
+      (s) => (s == null ? void 0 : s.type) === "ImageApiSelector"
     );
     const inner = resolveBody({ type: "Image", ...source });
-    return inner ? { ...inner, region: (selector == null ? void 0 : selector.region) ?? inner.region } : null;
+    if (!inner) return null;
+    const rotation = (selector == null ? void 0 : selector.rotation) != null ? String(selector.rotation) : void 0;
+    return {
+      ...inner,
+      region: (selector == null ? void 0 : selector.region) || inner.region,
+      ...rotation ? { rotation } : {}
+    };
   }
   if (body.type !== "Image" && body.type !== "Video" && !isSound(body.type)) {
     return null;
@@ -285,36 +364,42 @@ function canvasScene(canvases, direction, selections = {}, {
       }
     }
     const selectedFrame = selections[frameKey(canvas)] ?? 0;
-    painted.forEach(({ body, target, region, frame, canvas: owner }, n) => {
-      var _a;
-      const service = findImageServiceId(body.service);
-      if (!service && !body.id) return;
-      const id = `${owner.id}|${n}|${body.id ?? service}|${region ?? ""}`;
-      const declared = !(service && region);
-      images.push({
-        id,
-        service,
-        url: body.id,
-        width: declared && Number(body.width) || void 0,
-        height: declared && Number(body.height) || void 0,
-        region,
-        placement: toWorld(target),
-        ...frame != null && frame !== selectedFrame ? { hidden: true } : {}
-      });
-      if (frame != null) {
-        const list = frames[_a = frameKey(canvas)] ?? (frames[_a] = []);
-        (list[frame] ?? (list[frame] = [])).push(id);
+    painted.forEach(
+      ({ body, target, region, rotation, frame, canvas: owner }, n) => {
+        var _a;
+        const service = findImageServiceId(body.service);
+        if (!service && !body.id) return;
+        const id = `${owner.id}|${n}|${body.id ?? service}|${region ?? ""}|${rotation ?? ""}`;
+        const declared = !(service && region);
+        images.push({
+          id,
+          service,
+          url: body.id,
+          width: declared && Number(body.width) || void 0,
+          height: declared && Number(body.height) || void 0,
+          region,
+          ...rotation ? { rotation } : {},
+          placement: toWorld(target),
+          ...frame != null && frame !== selectedFrame ? { hidden: true } : {}
+        });
+        if (frame != null) {
+          const list = frames[_a = frameKey(canvas)] ?? (frames[_a] = []);
+          (list[frame] ?? (list[frame] = [])).push(id);
+        }
       }
-    });
+    );
     const [first] = sounds;
     if (first == null ? void 0 : first.body.id) {
+      const segments = mediaSegments(sounds);
+      const lead = segments ? segments[0] : void 0;
       media.push({
         id: `${canvas.id}|media|${first.body.id}`,
         kind: first.kind,
-        src: first.body.id,
-        format: first.body.format,
+        src: (lead == null ? void 0 : lead.src) ?? first.body.id,
+        format: lead ? lead.format : first.body.format,
         placement: toWorld(first.target),
-        duration: Number(first.body.duration ?? canvas.duration) || void 0,
+        duration: segments ? Number(canvas.duration) || void 0 : Number(first.body.duration ?? canvas.duration) || void 0,
+        ...segments ? { segments } : {},
         poster: posterFor(canvas),
         captions: canvasCaptions(canvas)
       });
@@ -360,10 +445,14 @@ export {
   canvasScene,
   canvasSize,
   canvasTextTranscripts,
+  canvasTimedText,
   findChoices,
   frameKey,
+  mediaSegments,
   paintedImages,
   paintedMedia,
   placeholderStill,
-  resolveBody
+  playsHere,
+  resolveBody,
+  startingChoices
 };

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

@@ -9,6 +9,8 @@ import { useMediaElement, captionName } from "./useMediaElement.mjs";
 import { cueText } from "../../../core/vtt.mjs";
 import { playFrom } from "../../../lib/time.mjs";
 import { useOptionalClover } from "../../../react/context.mjs";
+import { BodyUnloadable } from "../../../ui/BodyUnloadable.mjs";
+import { languageProps } from "../../../i18n/direction.mjs";
 const SKIP_SECONDS = 10;
 const MOMENT_SECONDS = 3;
 const MediaBody = ({
@@ -37,6 +39,7 @@ const MediaBody = ({
   const language = givenLanguage ?? rootLanguage;
   const element = useMediaElement(media, { request, language });
   const controller = useMediaController(element, media.duration);
+  const failed = useMediaFailed(element);
   const own = useMemo(
     () => media.captions.map((caption2, index) => {
       const name = captionName(caption2, index, language);
@@ -163,7 +166,8 @@ const MediaBody = ({
       video: media.kind === "video" ? element : null,
       chapters,
       highlightedChapter,
-      onChapterHighlight
+      onChapterHighlight,
+      request
     }
   );
   const cuesShown = cues.length + playing.length > 0 && /* @__PURE__ */ jsxs("div", { className: "clover-canvas-captions", "aria-live": "off", children: [
@@ -177,11 +181,11 @@ const MediaBody = ({
             "span",
             {
               className: "clover-canvas-captions-cue-label",
-              lang: note.page.lang,
+              ...languageProps(note.page.lang),
               children: note.page.text
             }
           ),
-          /* @__PURE__ */ jsx("span", { lang: note.lang, children: note.label })
+          /* @__PURE__ */ jsx("span", { ...languageProps(note.lang), children: note.label })
         ]
       },
       note.id
@@ -190,7 +194,9 @@ const MediaBody = ({
       "span",
       {
         className: "clover-canvas-captions-cue",
-        lang: captionLanguage && captionLanguage !== "none" ? captionLanguage : void 0,
+        ...languageProps(
+          captionLanguage && captionLanguage !== "none" ? captionLanguage : void 0
+        ),
         children: text
       },
       index
@@ -217,6 +223,7 @@ const MediaBody = ({
           ),
           cuesShown,
           transport,
+          /* @__PURE__ */ jsx(BodyUnloadable, { kind: media.kind, shown: failed, room: true }),
           chapters && chapters.length > 0 && /* @__PURE__ */ jsx(
             PlayerChapters,
             {
@@ -237,11 +244,28 @@ const MediaBody = ({
       "data-testid": "clover-canvas-media",
       children: [
         transport,
-        cuesShown
+        cuesShown,
+        /* @__PURE__ */ jsx(BodyUnloadable, { kind: media.kind, shown: failed, room: true })
       ]
     }
   );
 };
+function useMediaFailed(element) {
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    setFailed(Boolean(element == null ? void 0 : element.error));
+    if (!element) return;
+    const fail = () => setFailed(Boolean(element.error));
+    const retry = () => setFailed(false);
+    element.addEventListener("error", fail);
+    element.addEventListener("loadstart", retry);
+    return () => {
+      element.removeEventListener("error", fail);
+      element.removeEventListener("loadstart", retry);
+    };
+  }, [element]);
+  return failed;
+}
 function useVideoSize(element) {
   const [size, setSize] = useState(
     null
@@ -268,7 +292,9 @@ function useVideoSize(element) {
   return size;
 }
 function containAspect(box, size) {
-  if (!size || !box.width || !box.height) return box;
+  if (!size) return box;
+  if (!box.width || !box.height)
+    return { x: box.x, y: box.y, width: size.width, height: size.height };
   const scale = Math.min(box.width / size.width, box.height / size.height);
   const width = size.width * scale;
   const height = size.height * scale;

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

@@ -1,11 +1,13 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useMemo, useState, useEffect } from "react";
-import { thumbnailSource, stillSource, resolveThumbnail } from "../../../core/thumbnail.mjs";
+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 "../../../ui/useContainerName.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;
 const GROUND_SIZE = 32;
 function artworkOf(canvas, language) {
@@ -20,22 +22,6 @@ function artworkOf(canvas, language) {
     alt: name.text ? name : void 0
   };
 }
-function useResolved(source, size, request) {
-  const key = source ? `${source.src ?? source.service ?? source.fallback}|${size}` : "";
-  const [src, setSrc] = useState(source == null ? void 0 : source.src);
-  useEffect(() => {
-    if (!source) return setSrc(void 0);
-    if (source.src) return setSrc(source.src);
-    let live = true;
-    void resolveThumbnail(source, size, request).then(
-      (url) => live && setSrc(url)
-    );
-    return () => {
-      live = false;
-    };
-  }, [key, size]);
-  return src;
-}
 const Note = () => /* @__PURE__ */ jsxs(
   "svg",
   {
@@ -77,8 +63,8 @@ function PlayerFace({
     const source = thumbnailSource({ thumbnail });
     return source ? { source } : null;
   }, [shown, canvas, language]);
-  const src = useResolved(art == null ? void 0 : art.source, ART_SIZE, request);
-  const ground = useResolved(art == null ? void 0 : art.source, GROUND_SIZE, request);
+  const src = useThumbnail(art == null ? void 0 : art.source, ART_SIZE, request, true);
+  const ground = useThumbnail(art == null ? void 0 : art.source, GROUND_SIZE, request, true);
   const [loaded, setLoaded] = useState();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -105,7 +91,7 @@ function PlayerFace({
             "img",
             {
               alt: ((_a = art == null ? void 0 : art.alt) == null ? void 0 : _a.text) ?? "",
-              lang: ((_b = art == null ? void 0 : art.alt) == null ? void 0 : _b.lang) || void 0,
+              ...languageProps(((_b = art == null ? void 0 : art.alt) == null ? void 0 : _b.lang) || void 0),
               decoding: "async",
               onLoad: () => setLoaded(src),
               src
@@ -121,7 +107,7 @@ function PlayerFace({
         {
           className: "clover-canvas-player-title",
           "aria-hidden": "true",
-          lang: title.lang || void 0,
+          ...languageProps(title.lang || void 0),
           children: title.text
         }
       ),
@@ -129,7 +115,7 @@ function PlayerFace({
         "p",
         {
           className: "clover-canvas-player-part-of",
-          lang: partOf.lang || void 0,
+          ...languageProps(partOf.lang || void 0),
           children: partOf.text
         }
       )
@@ -169,7 +155,7 @@ function PlayerChapters({
             "span",
             {
               className: "clover-canvas-player-chapter-label",
-              lang: chapter.lang || void 0,
+              ...languageProps(chapter.lang || void 0),
               children: chapter.label
             }
           ),