@nulib/clover 4.0.0-beta.1 → 4.1.0

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 } : {}
       });
@@ -129,19 +169,47 @@ 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) => {
+  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 +233,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 +267,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 +313,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 +374,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 +455,15 @@ export {
   canvasScene,
   canvasSize,
   canvasTextTranscripts,
+  canvasTimedText,
   findChoices,
   frameKey,
+  mediaSegments,
   paintedImages,
   paintedMedia,
+  paintedType,
   placeholderStill,
-  resolveBody
+  playsHere,
+  resolveBody,
+  startingChoices
 };

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

@@ -1,19 +1,22 @@
 "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";
 const SKIP_SECONDS = 10;
 const MOMENT_SECONDS = 3;
 const MediaBody = ({
   media,
   request,
+  fillable = false,
   surface,
   instance,
   onElement,
@@ -37,6 +40,49 @@ 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) => {
       const name = captionName(caption2, index, language);
@@ -163,41 +209,46 @@ const MediaBody = ({
       video: media.kind === "video" ? element : null,
       chapters,
       highlightedChapter,
-      onChapterHighlight
+      onChapterHighlight,
+      request,
+      fill
     }
   );
+  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
+          }
+        ),
+        /* @__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: [
-    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",
-              lang: note.page.lang,
-              children: note.page.text
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { lang: note.lang, children: note.label })
-        ]
-      },
-      note.id
-    )),
-    cues.map((text, index) => /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "clover-canvas-captions-cue",
-        lang: captionLanguage && captionLanguage !== "none" ? captionLanguage : void 0,
-        children: text
-      },
-      index
-    ))
+    noteLines,
+    captionLines
   ] });
   if (player) {
-    const current = chapterAt(chapters ?? [], currentTime);
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -215,16 +266,17 @@ const MediaBody = ({
               language
             }
           ),
-          cuesShown,
-          transport,
-          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 })
         ] })
       }
     );
@@ -237,11 +289,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
@@ -267,8 +336,23 @@ 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 || !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;
@@ -281,5 +365,6 @@ function containAspect(box, size) {
 }
 export {
   containAspect,
-  MediaBody as default
+  MediaBody as default,
+  fillRect
 };

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

@@ -1,11 +1,10 @@
 "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 { 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 +19,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 +60,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 +88,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 +104,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,65 +112,13 @@ function PlayerFace({
         "p",
         {
           className: "clover-canvas-player-part-of",
-          lang: partOf.lang || void 0,
+          ...languageProps(partOf.lang || void 0),
           children: partOf.text
         }
       )
     ] })
   ] });
 }
-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",
-              lang: 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
 };