@nulib/clover 0.0.0-stage → 4.0.0-beta.0

package/dist/components/Canvas/layout.mjs

@@ -0,0 +1,369 @@
+"use client";
+import { parseAnnotationTarget, isSound } from "../../core/annotations.mjs";
+import { isPainting, bodiesOf } from "../../core/painting.mjs";
+import { findImageServiceId } from "../../lib/renderer/sources/imageService.mjs";
+import { asArray } from "../../lib/asArray.mjs";
+const TIME_BASED_CANVAS = { width: 1600, height: 900 };
+function arrangeCanvases(canvases, direction) {
+  const placements = new Array(canvases.length);
+  if (!canvases.length) return placements;
+  const sizes = canvases.map(canvasSize);
+  const horizontal = direction === "left-to-right" || direction === "right-to-left";
+  const reversed = direction === "right-to-left" || direction === "bottom-to-top";
+  const common = horizontal ? sizes[0].height : sizes[0].width;
+  const order = canvases.map((_, index) => index);
+  if (reversed) order.reverse();
+  let along = 0;
+  for (const index of order) {
+    const size = sizes[index];
+    const scale = common / (horizontal ? size.height : size.width);
+    const width = size.width * scale;
+    const height = size.height * scale;
+    placements[index] = horizontal ? { x: along, y: 0, width, height } : { x: 0, y: along, width, height };
+    along += horizontal ? width : height;
+  }
+  return placements;
+}
+function canvasSize(canvas) {
+  var _a, _b;
+  if (canvas.width && canvas.height) {
+    return { width: canvas.width, height: canvas.height };
+  }
+  const companion = companionCanvas(canvas);
+  if ((companion == null ? void 0 : companion.width) && companion.height) {
+    return { width: companion.width, height: companion.height };
+  }
+  const first = ((_a = paintedImages(canvas)[0]) == null ? void 0 : _a.body) ?? ((_b = paintedMedia(canvas)[0]) == null ? void 0 : _b.body);
+  const width = Number(first == null ? void 0 : first.width);
+  const height = Number(first == null ? void 0 : first.height);
+  return width > 0 && height > 0 ? { width, height } : TIME_BASED_CANVAS;
+}
+function companionCanvas(canvas) {
+  return canvas.accompanyingContainer ?? canvas.placeholderContainer;
+}
+function choiceKey(canvas, annotation, page, index, body) {
+  return `${canvas.id}|${annotation.id ?? `${page}:${index}`}|${body}`;
+}
+function findChoices(canvases) {
+  const groups = [];
+  for (const canvas of canvases) {
+    eachPaintingBody(canvas, (raw, key) => {
+      const body = raw;
+      if ((body == null ? void 0 : body.type) !== "Choice") return;
+      const items = asArray(body.items).filter(
+        (item) => Boolean(item) && typeof item === "object"
+      );
+      if (items.length > 1) {
+        groups.push({
+          key,
+          canvasId: canvas.id,
+          label: body.label,
+          items: items.map((item) => ({ label: item.label, id: item.id }))
+        });
+      }
+    });
+  }
+  return groups;
+}
+const framesOf = /* @__PURE__ */ new WeakMap();
+const NO_FRAMES = [];
+function animationFrames(canvas) {
+  var _a;
+  const cached = framesOf.get(canvas);
+  if (cached) return cached;
+  const frames = [];
+  for (const page of canvas.items ?? []) {
+    for (const annotation of page.items ?? []) {
+      if (!isPainting(annotation)) continue;
+      const t = annotation.target ? (_a = parseAnnotationTarget(annotation.target)) == null ? void 0 : _a.t : void 0;
+      if (!t) continue;
+      const [start, end] = t.split(",").map(Number);
+      if (!Number.isFinite(start)) continue;
+      frames.push({ annotation, start, end: Number.isFinite(end) ? end : NaN });
+    }
+  }
+  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 (next != null) {
+      frame.end = next > frame.start ? next : frame.start + share;
+    } else if (Number.isFinite(duration) && duration > frame.start) {
+      frame.end = duration;
+    } else if (!(frame.end > frame.start)) {
+      frame.end = frame.start + share;
+    }
+  });
+  const result = frames.length > 1 ? frames : NO_FRAMES;
+  framesOf.set(canvas, result);
+  return result;
+}
+const frameKey = (canvas) => `frame:${canvas.id}`;
+function eachPaintingBody(canvas, visit) {
+  (canvas.items ?? []).forEach((page, p) => {
+    (page.items ?? []).forEach((annotation, a) => {
+      if (!isPainting(annotation)) return;
+      bodiesOf(annotation).forEach(
+        (body, b) => visit(body, choiceKey(canvas, annotation, p, a, b), annotation)
+      );
+    });
+  });
+}
+function paintedImages(canvas, selections = {}, { allFrames = false } = {}) {
+  const images = [];
+  eachPainted(
+    canvas,
+    selections,
+    (resolved, target, frame) => {
+      if (resolved.body.type !== "Image") return;
+      images.push({
+        body: resolved.body,
+        region: resolved.region,
+        target,
+        ...frame >= 0 ? { frame } : {}
+      });
+    },
+    allFrames
+  );
+  return images;
+}
+function paintedMedia(canvas, selections = {}) {
+  const media = [];
+  eachPainted(canvas, selections, (resolved, target) => {
+    const type = resolved.body.type;
+    if (type !== "Video" && !isSound(type)) return;
+    media.push({
+      kind: type === "Video" ? "video" : "audio",
+      body: resolved.body,
+      target
+    });
+  });
+  return media;
+}
+function eachPainted(canvas, selections, visit, allFrames = false) {
+  const width = canvas.width ?? 0;
+  const height = canvas.height ?? 0;
+  const frames = animationFrames(canvas);
+  const selected = Math.min(
+    selections[frameKey(canvas)] ?? 0,
+    Math.max(0, frames.length - 1)
+  );
+  eachPaintingBody(canvas, (rawBody, key, annotation) => {
+    const frame = frames.findIndex((f) => f.annotation === annotation);
+    if (!allFrames && frame >= 0 && frame !== selected) return;
+    const resolved = resolveBody(rawBody, selections[key] ?? 0);
+    if (!resolved) return;
+    const parsed = annotation.target ? parseAnnotationTarget(annotation.target) : void 0;
+    const rect = parsed == null ? void 0 : parsed.rect;
+    visit(
+      resolved,
+      rect ? { x: rect.x, y: rect.y, width: rect.w, height: rect.h } : {
+        x: 0,
+        y: 0,
+        width: width || Number(resolved.body.width) || 0,
+        height: height || Number(resolved.body.height) || 0
+      },
+      frame
+    );
+  });
+}
+function canvasCaptions(canvas) {
+  const tracks = [];
+  const pages = [...canvas.annotations ?? [], ...canvas.items ?? []];
+  for (const page of pages) {
+    for (const annotation of page.items ?? []) {
+      if (!asArray(annotation.motivation).includes("supplementing")) continue;
+      for (const raw of asArray(annotation.body)) {
+        const body = raw;
+        const bodies = (body == null ? void 0 : body.type) === "Choice" ? asArray(body.items) : [body];
+        for (const candidate of bodies) {
+          const id = candidate == null ? void 0 : candidate.id;
+          const isVtt = (candidate == null ? void 0 : candidate.format) === "text/vtt" || typeof id === "string" && /\.vtt(\?|$)/i.test(id);
+          if (!isVtt || typeof id !== "string") continue;
+          tracks.push({
+            id,
+            label: candidate.label,
+            language: asArray(candidate.language)[0]
+          });
+        }
+      }
+    }
+  }
+  return tracks;
+}
+function canvasTextTranscripts(canvas) {
+  const found = [];
+  const add = (raw) => {
+    const candidate = raw;
+    const id = candidate == null ? void 0 : candidate.id;
+    if (typeof id !== "string" || found.some((each) => each.id === id)) return;
+    const format = candidate == null ? void 0 : candidate.format;
+    if (format ? format !== "text/plain" : !/\.txt(\?|$)/i.test(id)) return;
+    found.push({
+      id,
+      label: candidate == null ? void 0 : candidate.label,
+      language: asArray(candidate == null ? void 0 : candidate.language)[0]
+    });
+  };
+  const pages = [...canvas.annotations ?? [], ...canvas.items ?? []];
+  for (const page of pages) {
+    for (const annotation of page.items ?? []) {
+      if (!asArray(annotation.motivation).includes("supplementing")) continue;
+      for (const raw of asArray(annotation.body)) {
+        const body = raw;
+        ((body == null ? void 0 : body.type) === "Choice" ? asArray(body.items) : [body]).forEach(add);
+      }
+    }
+  }
+  asArray(canvas.rendering).forEach(add);
+  return found;
+}
+function resolveBody(raw, choice = 0) {
+  if (!raw || typeof raw !== "object") return null;
+  const body = raw;
+  if (body.type === "Choice") {
+    const items = asArray(body.items);
+    return resolveBody(items[choice] ?? items[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
+    );
+    const inner = resolveBody({ type: "Image", ...source });
+    return inner ? { ...inner, region: (selector == null ? void 0 : selector.region) ?? inner.region } : null;
+  }
+  if (body.type !== "Image" && body.type !== "Video" && !isSound(body.type)) {
+    return null;
+  }
+  return {
+    body,
+    region: typeof body.region === "string" ? body.region : void 0
+  };
+}
+function canvasScene(canvases, direction, selections = {}, {
+  standIns = true
+} = {}) {
+  const placements = arrangeCanvases(canvases, direction);
+  const images = [];
+  const media = [];
+  const frames = {};
+  canvases.forEach((canvas, index) => {
+    const place = placements[index];
+    const size = canvasSize(canvas);
+    const kx = place.width / size.width;
+    const ky = place.height / size.height;
+    const toWorld = (target) => ({
+      x: place.x + target.x * kx,
+      y: place.y + target.y * ky,
+      width: target.width * kx,
+      height: target.height * ky
+    });
+    const sounds = paintedMedia(canvas, selections);
+    const painted = paintedImages(canvas, selections, {
+      allFrames: true
+    }).map((image) => ({
+      ...image,
+      canvas
+    }));
+    const companion = companionCanvas(canvas);
+    if (standIns && !painted.length && sounds.some((m) => m.kind === "audio") && companion) {
+      const companionSize = canvasSize(companion);
+      for (const image of paintedImages(companion)) {
+        painted.push({
+          ...image,
+          canvas: companion,
+          target: {
+            x: image.target.x / companionSize.width * size.width,
+            y: image.target.y / companionSize.height * size.height,
+            width: image.target.width / companionSize.width * size.width,
+            height: image.target.height / companionSize.height * size.height
+          }
+        });
+      }
+    }
+    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);
+      }
+    });
+    const [first] = sounds;
+    if (first == null ? void 0 : first.body.id) {
+      media.push({
+        id: `${canvas.id}|media|${first.body.id}`,
+        kind: first.kind,
+        src: first.body.id,
+        format: first.body.format,
+        placement: toWorld(first.target),
+        duration: Number(first.body.duration ?? canvas.duration) || void 0,
+        poster: posterFor(canvas),
+        captions: canvasCaptions(canvas)
+      });
+    }
+  });
+  return { images, media, placements, frames };
+}
+function posterFor(canvas) {
+  var _a;
+  return (_a = placeholderStill(canvas)) == null ? void 0 : _a.source;
+}
+const STILL_SIZE = 1280;
+function placeholderStill(canvas) {
+  var _a;
+  const placeholder = canvas.placeholderContainer;
+  if (!placeholder) return void 0;
+  const body = (_a = paintedImages(placeholder)[0]) == null ? void 0 : _a.body;
+  if (!body) return void 0;
+  const service = findImageServiceId(body.service);
+  const id = typeof body.id === "string" ? body.id : void 0;
+  const source = service ? { service, fallback: id } : id ? { src: id } : void 0;
+  if (!source) return void 0;
+  const { width, height } = canvasSize(placeholder);
+  return { source, width, height };
+}
+function canvasRectToWorld(canvas, placement, rect) {
+  const size = canvasSize(canvas);
+  const kx = placement.width / size.width;
+  const ky = placement.height / size.height;
+  return {
+    x: placement.x + rect.x * kx,
+    y: placement.y + rect.y * ky,
+    width: rect.width * kx,
+    height: rect.height * ky
+  };
+}
+export {
+  STILL_SIZE,
+  animationFrames,
+  arrangeCanvases,
+  canvasCaptions,
+  canvasRectToWorld,
+  canvasScene,
+  canvasSize,
+  canvasTextTranscripts,
+  findChoices,
+  frameKey,
+  paintedImages,
+  paintedMedia,
+  placeholderStill,
+  resolveBody
+};

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

@@ -0,0 +1,285 @@
+"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 { 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 { useOptionalClover } from "../../../react/context.mjs";
+const SKIP_SECONDS = 10;
+const MOMENT_SECONDS = 3;
+const MediaBody = ({
+  media,
+  request,
+  surface,
+  instance,
+  onElement,
+  onFit,
+  onEnded,
+  onCaptionChange,
+  caption,
+  navigable = true,
+  fullscreen = false,
+  isFullscreen = false,
+  autoPlay = false,
+  chapters,
+  highlightedChapter,
+  onChapterHighlight,
+  language: givenLanguage,
+  notes,
+  player
+}) => {
+  var _a, _b;
+  const rootLanguage = (_a = useOptionalClover()) == null ? void 0 : _a.language;
+  const language = givenLanguage ?? rootLanguage;
+  const element = useMediaElement(media, { request, language });
+  const controller = useMediaController(element, media.duration);
+  const own = useMemo(
+    () => media.captions.map((caption2, index) => {
+      const name = captionName(caption2, index, language);
+      return {
+        label: name.text,
+        labelLang: name.lang,
+        language: caption2.language
+      };
+    }),
+    [media.captions, language]
+  );
+  const captions = useCaptionTracks(element, own, media.id);
+  const { active: shown, select } = captions;
+  useEffect(() => {
+    if (!caption || shown < 0) return;
+    const index = media.captions.findIndex((each) => each.id === caption);
+    if (index >= 0 && index !== shown) select(index);
+  }, [caption, media.captions]);
+  const [cues, setCues] = useState([]);
+  useEffect(() => {
+    onElement(element);
+    return () => onElement(null);
+  }, [element, onElement]);
+  const size = useVideoSize(media.kind === "video" ? element : null);
+  const fit = useMemo(
+    () => size && containAspect(media.placement, size),
+    [media.placement, size]
+  );
+  useEffect(() => {
+    onFit == null ? void 0 : onFit(fit);
+    return () => onFit == null ? void 0 : onFit(null);
+  }, [fit, onFit]);
+  useEffect(() => {
+    if (!element || !onEnded) return;
+    element.addEventListener("ended", onEnded);
+    return () => element.removeEventListener("ended", onEnded);
+  }, [element, onEnded]);
+  const { play, toggle, toggleMute, skip } = controller;
+  useEffect(() => {
+    if (autoPlay) play();
+  }, [autoPlay, play]);
+  useEffect(() => {
+    surface.setGestures({
+      clickToZoom: false,
+      dblClickToZoom: true,
+      navigable
+    });
+    const off = surface.on("tap", () => toggle());
+    return () => {
+      off();
+      surface.setGestures({});
+    };
+  }, [surface, toggle, navigable]);
+  useEffect(() => {
+    const host = surface.host;
+    const onKeyDown = (event) => {
+      if (event.target !== host || event.altKey || event.metaKey) return;
+      if (event.ctrlKey) return;
+      const key = event.key.toLowerCase();
+      if (key === " " || key === "k") toggle();
+      else if (key === "m") toggleMute();
+      else if (key === "j") skip(-SKIP_SECONDS);
+      else if (key === "l") skip(SKIP_SECONDS);
+      else return;
+      event.preventDefault();
+    };
+    host.addEventListener("keydown", onKeyDown);
+    return () => host.removeEventListener("keydown", onKeyDown);
+  }, [surface, toggle, toggleMute, skip]);
+  const { track } = captions;
+  useEffect(() => {
+    setCues([]);
+    if (!track) return;
+    const update = () => setCues(
+      Array.from(track.activeCues ?? []).map((cue) => {
+        var _a2, _b2;
+        const vtt = cue;
+        return ((_b2 = (_a2 = vtt.getCueAsHTML) == null ? void 0 : _a2.call(vtt)) == null ? void 0 : _b2.textContent) ?? cueText(vtt.text ?? "");
+      })
+    );
+    track.addEventListener("cuechange", update);
+    update();
+    return () => track.removeEventListener("cuechange", update);
+  }, [track]);
+  const captionLabels = useMemo(
+    () => captions.options.map(({ label, labelLang, language: language2 }) => ({
+      label,
+      lang: labelLang,
+      language: language2
+    })),
+    [captions.options]
+  );
+  const captionLanguage = (_b = captions.options[captions.active]) == null ? void 0 : _b.language;
+  const [started, setStarted] = useState(false);
+  useEffect(() => setStarted(false), [media.id]);
+  const { paused } = controller;
+  useEffect(() => {
+    if (!paused) setStarted(true);
+  }, [paused]);
+  const { currentTime } = controller;
+  const playing = useMemo(
+    () => (notes ?? []).filter(
+      (note) => note.label && currentTime >= note.start && currentTime < (note.end ?? note.start + MOMENT_SECONDS)
+    ),
+    [notes, currentTime]
+  );
+  const transport = /* @__PURE__ */ jsx(
+    Transport,
+    {
+      instance,
+      controller,
+      kind: media.kind,
+      captions: captionLabels,
+      activeCaption: captions.active,
+      onCaptionChange: (index) => {
+        captions.select(index);
+        const chosen = media.captions[index];
+        onCaptionChange == null ? void 0 : onCaptionChange(
+          chosen ? { id: chosen.id, language: chosen.language } : null
+        );
+      },
+      fullscreen,
+      isFullscreen,
+      video: media.kind === "video" ? element : null,
+      chapters,
+      highlightedChapter,
+      onChapterHighlight
+    }
+  );
+  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
+    ))
+  ] });
+  if (player) {
+    const current = chapterAt(chapters ?? [], currentTime);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "clover-canvas-media",
+        "data-kind": media.kind,
+        "data-player": "",
+        "data-testid": "clover-canvas-media",
+        children: /* @__PURE__ */ jsxs("div", { className: "clover-canvas-player", children: [
+          /* @__PURE__ */ jsx(
+            PlayerFace,
+            {
+              player,
+              started,
+              request,
+              language
+            }
+          ),
+          cuesShown,
+          transport,
+          chapters && chapters.length > 0 && /* @__PURE__ */ jsx(
+            PlayerChapters,
+            {
+              chapters,
+              current,
+              onSeek: (seconds) => element && playFrom(element, seconds)
+            }
+          )
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "clover-canvas-media",
+      "data-kind": media.kind,
+      "data-testid": "clover-canvas-media",
+      children: [
+        transport,
+        cuesShown
+      ]
+    }
+  );
+};
+function useVideoSize(element) {
+  const [size, setSize] = useState(
+    null
+  );
+  useEffect(() => {
+    setSize(null);
+    if (!element) return;
+    const read = () => {
+      const { videoWidth: width, videoHeight: height } = element;
+      if (width > 0 && height > 0) {
+        setSize(
+          (current) => (current == null ? void 0 : current.width) === width && current.height === height ? current : { width, height }
+        );
+      }
+    };
+    read();
+    element.addEventListener("loadedmetadata", read);
+    element.addEventListener("resize", read);
+    return () => {
+      element.removeEventListener("loadedmetadata", read);
+      element.removeEventListener("resize", read);
+    };
+  }, [element]);
+  return size;
+}
+function containAspect(box, size) {
+  if (!size || !box.width || !box.height) return box;
+  const scale = Math.min(box.width / size.width, box.height / size.height);
+  const width = size.width * scale;
+  const height = size.height * scale;
+  return {
+    x: box.x + (box.width - width) / 2,
+    y: box.y + (box.height - height) / 2,
+    width,
+    height
+  };
+}
+export {
+  containAspect,
+  MediaBody as default
+};