@nulib/clover 4.0.0-beta.1 → 4.0.0

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

@@ -1,23 +1,32 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useRef, useState, useLayoutEffect, useEffect } from "react";
+import { useRef, useState, useLayoutEffect, useMemo, useEffect } from "react";
 import { TransportButton } from "./TransportButton.mjs";
 import { useBarHeight } from "./useBarHeight.mjs";
-import { languageCode } from "../../../ui/languageCode.mjs";
+import { gapsOf, gapMask, alongBar, lengthOnBar, seekShare } from "./seekGaps.mjs";
+import { placeMenu } from "./placeMenu.mjs";
+import { imageSource } from "../../../core/thumbnail.mjs";
+import { useThumbnail, PICTURE_SIZE, EntryThumbnail } from "../../../ui/EntryThumbnail.mjs";
+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 { useContainerName } from "../../../ui/useContainerName.mjs";
+import { useContainerName } from "../../../i18n/useContainerName.mjs";
 import { useCloverTranslation } from "../../../i18n/useCloverTranslation.mjs";
 import { toggleFullscreen } from "../../../lib/fullscreen.mjs";
 import useFullscreenSupported from "../../../hooks/useFullscreenSupported.mjs";
+import { languageProps } from "../../../i18n/direction.mjs";
 import { formatTime } from "../../../lib/time.mjs";
+const chapterPicture = (chapter) => typeof (chapter == null ? void 0 : chapter.thumbnail) === "string" ? { src: chapter.thumbnail } : imageSource(chapter == null ? void 0 : chapter.thumbnail);
 function chapterAt(chapters, time) {
+  var _a;
   let found = -1;
   chapters.forEach((candidate, index) => {
     if (candidate.start <= time) found = index;
   });
-  return found;
+  const end = (_a = chapters[found]) == null ? void 0 : _a.end;
+  return end !== void 0 && time >= end ? -1 : found;
 }
 let volumeSettable;
 function canSetVolume() {
@@ -29,21 +38,6 @@ function canSetVolume() {
   }
   return volumeSettable;
 }
-function placeMenu(options, wrapper, transport, bodyBox) {
-  const room = bodyBox.getBoundingClientRect();
-  const above = room.height - (transport.getBoundingClientRect().bottom - wrapper.getBoundingClientRect().top);
-  options.style.setProperty("--clover-transport-menu-above", `${above}px`);
-  options.style.removeProperty("--clover-transport-menu-shift");
-  const box = options.getBoundingClientRect();
-  const inset = parseFloat(getComputedStyle(transport).paddingRight) || 0;
-  const shift = Math.max(
-    room.left + inset - box.left,
-    Math.min(0, room.right - inset - box.right)
-  );
-  if (shift) {
-    options.style.setProperty("--clover-transport-menu-shift", `${shift}px`);
-  }
-}
 function TransportMenu({
   id,
   label,
@@ -54,7 +48,9 @@ function TransportMenu({
   current,
   options,
   selected,
-  onSelect
+  onSelect,
+  request,
+  asMenu = false
 }) {
   const [open, setOpen] = useState(false);
   const menu = useRef(null);
@@ -125,7 +121,7 @@ function TransportMenu({
             "aria-describedby": current ? `${id}-current` : void 0,
             "aria-expanded": open,
             "aria-label": label,
-            lang: labelLang,
+            ...languageProps(labelLang),
             className: "clover-canvas-transport-button",
             "data-active": active ? "" : void 0,
             "data-button": button,
@@ -139,13 +135,16 @@ function TransportMenu({
           }
         ),
         current && // Hidden, yet still read as the description: the name stays the Tip's.
-        /* @__PURE__ */ jsx("span", { hidden: true, id: `${id}-current`, lang: current.lang, children: current.label }),
+        /* @__PURE__ */ jsx("span", { hidden: true, id: `${id}-current`, ...languageProps(current.lang), children: current.label }),
         open && name.node,
         open && /* @__PURE__ */ jsx(
           "fieldset",
           {
             ...name.props,
-            className: "clover-canvas-transport-options",
+            className: join(
+              "clover-canvas-transport-options",
+              asMenu && "clover-canvas-menu"
+            ),
             id,
             ref: list,
             children: options.map((option, index) => {
@@ -179,7 +178,7 @@ function TransportMenu({
                       }
                     ),
                     option.time && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx("span", { children: option.time }),
+                      /* @__PURE__ */ jsx("span", { className: "clover-cue-time", children: option.time }),
                       " "
                     ] }),
                     coded && (code ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -192,7 +191,22 @@ function TransportMenu({
                         "aria-hidden": "true"
                       }
                     )),
-                    /* @__PURE__ */ jsx("span", { lang: option.lang, children: option.label })
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "clover-cue-text",
+                        ...languageProps(option.lang),
+                        children: option.label
+                      }
+                    ),
+                    selected === index && /* @__PURE__ */ jsx(
+                      EntryThumbnail,
+                      {
+                        source: option.thumbnail,
+                        request,
+                        large: true
+                      }
+                    )
                   ]
                 },
                 index
@@ -224,8 +238,10 @@ const Transport = ({
   video,
   chapters = [],
   highlightedChapter = null,
-  onChapterHighlight
+  onChapterHighlight,
+  request
 }) => {
+  var _a, _b;
   const { t, langOf } = useCloverTranslation();
   const canFullscreen = useFullscreenSupported() || kind === "video";
   const bar = useRef(null);
@@ -233,16 +249,24 @@ const Transport = ({
   const { paused, currentTime, duration, buffered, muted, volume } = controller;
   const chapter = chapterAt(chapters, currentTime);
   const [pointed, setPointed] = useState(-1);
+  const [pointedAt, setPointedAt] = useState(0);
   const pointedRef = useRef(-1);
   const point = (index) => {
-    var _a;
+    var _a2;
     if (pointedRef.current === index) return;
     pointedRef.current = index;
     setPointed(index);
-    onChapterHighlight == null ? void 0 : onChapterHighlight(((_a = chapters[index]) == null ? void 0 : _a.id) ?? null);
+    onChapterHighlight == null ? void 0 : onChapterHighlight(((_a2 = chapters[index]) == null ? void 0 : _a2.id) ?? null);
   };
   const [seekFocused, setSeekFocused] = useState(false);
-  const previewed = pointed >= 0 ? pointed : seekFocused ? chapter : -1;
+  const [pointing, setPointing] = useState(false);
+  const previewed = pointing ? pointed : seekFocused ? chapter : -1;
+  const tipShown = (pointing || seekFocused) && duration > 0;
+  const preview = useThumbnail(
+    chapterPicture(chapters[previewed]),
+    PICTURE_SIZE,
+    request
+  );
   const marked = pointed >= 0 ? pointed : chapters.findIndex(
     (each) => each.id !== void 0 && each.id === highlightedChapter
   );
@@ -280,17 +304,21 @@ const Transport = ({
   const muteKey = muted ? "playerUnmute" : "playerMute";
   const fullscreenKey = isFullscreen ? "imageExitFullScreen" : "imageFullScreen";
   const progress = duration ? currentTime / duration * 100 : 0;
+  const gaps = useMemo(() => {
+    const at = gapsOf(chapters, duration);
+    return at.length ? gapMask(at) : void 0;
+  }, [chapters, duration]);
   const loaded = duration ? buffered / duration * 100 : 0;
   const hasFullscreen = fullscreen && canFullscreen;
   const focused = useRef(null);
   const play = useRef(null);
   useLayoutEffect(() => {
-    var _a;
+    var _a2;
     const control = focused.current;
     if (!control || control.isConnected) return;
     focused.current = null;
     const active = document.activeElement;
-    if (!active || active === document.body) (_a = play.current) == null ? void 0 : _a.focus();
+    if (!active || active === document.body) (_a2 = play.current) == null ? void 0 : _a2.focus();
   }, [captions.length, chapters.length, hasFullscreen]);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -323,17 +351,20 @@ const Transport = ({
             onPointerMove: (event) => {
               if (!duration || event.target.closest(".clover-tip"))
                 return;
-              const box = event.currentTarget.getBoundingClientRect();
-              point(
-                chapterAt(
-                  chapters,
-                  (event.clientX - box.left) / box.width * duration
-                )
-              );
+              const at = seekShare(event.currentTarget, event.clientX) * duration;
+              setPointing(true);
+              setPointedAt(Math.floor(at));
+              point(chapterAt(chapters, at));
+            },
+            onPointerLeave: () => {
+              setPointing(false);
+              point(-1);
             },
-            onPointerLeave: () => point(-1),
-            style: previewed >= 0 && duration > 0 ? {
-              "--clover-transport-preview": `${along(previewed).left + along(previewed).width / 2}%`
+            style: tipShown ? {
+              // Over a chapter's middle; with none there, over the time it shows.
+              "--clover-transport-preview": alongBar(
+                previewed >= 0 ? along(previewed).left + along(previewed).width / 2 : (pointing ? pointedAt : currentTime) / duration * 100
+              )
             } : void 0,
             children: [
               /* @__PURE__ */ jsx(
@@ -349,40 +380,39 @@ const Transport = ({
                   min: 0,
                   onChange: (event) => controller.seek(Number(event.target.value)),
                   step: "any",
+                  "data-gaps": gaps ? "" : void 0,
                   style: {
                     "--clover-transport-progress": `${progress}%`,
-                    "--clover-transport-loaded": `${loaded}%`
+                    "--clover-transport-loaded": `${loaded}%`,
+                    // The mask, and where the thumb is along it, which it never cuts.
+                    ...gaps && {
+                      "--clover-transport-gaps": gaps,
+                      "--clover-transport-at": progress / 100
+                    }
                   },
                   type: "range",
                   value: currentTime
                 }
               ),
-              duration > 0 && chapters.slice(1).map((marker, index) => /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  className: "clover-canvas-transport-chapter-marker",
-                  style: { left: `${marker.start / duration * 100}%` }
-                },
-                index
-              )),
               marked >= 0 && duration > 0 && /* @__PURE__ */ jsx(
                 "span",
                 {
                   "aria-hidden": "true",
                   className: "clover-canvas-transport-chapter-span",
                   style: {
-                    left: `${along(marked).left}%`,
-                    width: `${along(marked).width}%`
+                    left: alongBar(along(marked).left),
+                    width: lengthOnBar(along(marked).width)
                   }
                 }
               ),
-              previewed >= 0 && duration > 0 && // Made anew for each chapter, so it measures itself into the Body each time.
+              tipShown && // Made anew for each chapter, so it measures itself into the Body each time.
               /* @__PURE__ */ jsx(
                 Tip,
                 {
-                  label: `${formatTime(chapters[previewed].start)} ${chapters[previewed].label}`,
-                  lang: chapters[previewed].lang
+                  lead: formatTime(pointing ? pointedAt : currentTime),
+                  label: ((_a = chapters[previewed]) == null ? void 0 : _a.label) ?? "",
+                  lang: (_b = chapters[previewed]) == null ? void 0 : _b.lang,
+                  image: previewed >= 0 ? preview : void 0
                 },
                 previewed
               )
@@ -434,7 +464,7 @@ const Transport = ({
                 "span",
                 {
                   "aria-label": t("playerCurrentTime"),
-                  lang: langOf("playerCurrentTime"),
+                  ...languageProps(langOf("playerCurrentTime")),
                   children: formatTime(currentTime)
                 }
               ),
@@ -443,7 +473,7 @@ const Transport = ({
                 "span",
                 {
                   "aria-label": t("playerDuration"),
-                  lang: langOf("playerDuration"),
+                  ...languageProps(langOf("playerDuration")),
                   children: formatTime(duration)
                 }
               )
@@ -452,7 +482,7 @@ const Transport = ({
               "span",
               {
                 className: "clover-canvas-transport-chapter",
-                lang: chapters[chapter].lang,
+                ...languageProps(chapters[chapter].lang),
                 children: chapters[chapter].label
               }
             )
@@ -469,10 +499,13 @@ const Transport = ({
                 options: chapters.map((item) => ({
                   label: item.label,
                   lang: item.lang,
-                  time: formatTime(item.start)
+                  time: formatTime(item.start),
+                  thumbnail: chapterPicture(item)
                 })),
                 selected: chapter,
-                onSelect: (index) => controller.seek(chapters[index].start)
+                onSelect: (index) => controller.seek(chapters[index].start),
+                request,
+                asMenu: true
               }
             ),
             captions.length > 0 && /* @__PURE__ */ jsx(

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

@@ -2,6 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useCloverTranslation } from "../../../i18n/useCloverTranslation.mjs";
 import { Tip } from "../../../ui/Tip.mjs";
+import { languageProps } from "../../../i18n/direction.mjs";
 function TransportButton({
   words,
   button,
@@ -18,7 +19,7 @@ function TransportButton({
     "button",
     {
       "aria-label": label,
-      lang: langOf(words),
+      ...languageProps(langOf(words)),
       "aria-keyshortcuts": shortcut == null ? void 0 : shortcut.keys,
       "aria-disabled": disabled || void 0,
       "aria-pressed": pressed,

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

@@ -0,0 +1,19 @@
+"use client";
+function placeMenu(options, wrapper, transport, bodyBox) {
+  const room = bodyBox.getBoundingClientRect();
+  const above = room.height - (transport.getBoundingClientRect().bottom - wrapper.getBoundingClientRect().top);
+  options.style.setProperty("--clover-transport-menu-above", `${above}px`);
+  options.style.removeProperty("--clover-transport-menu-shift");
+  const box = options.getBoundingClientRect();
+  const inset = parseFloat(getComputedStyle(transport).paddingRight) || 0;
+  const shift = Math.max(
+    room.left + inset - box.left,
+    Math.min(0, room.right - inset - box.right)
+  );
+  if (shift) {
+    options.style.setProperty("--clover-transport-menu-shift", `${shift}px`);
+  }
+}
+export {
+  placeMenu
+};

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

@@ -0,0 +1,43 @@
+"use client";
+const along = (share) => `var(--clover-transport-thumb) / 2 + (100% - var(--clover-transport-thumb)) * ${share / 100}`;
+const alongBar = (share) => `calc(${along(share)})`;
+const lengthOnBar = (share) => `calc((100% - var(--clover-transport-thumb)) * ${share / 100})`;
+function gapMask(at) {
+  const half = "var(--clover-transport-gap) / 2";
+  const stops = at.flatMap((share) => [
+    `#000 0 calc(${along(share)} - ${half})`,
+    `transparent 0 calc(${along(share)} + ${half})`
+  ]);
+  return `linear-gradient(to right, ${[...stops, "#000 0"].join(", ")})`;
+}
+function gapsOf(spans, total) {
+  if (!(total > 0)) return [];
+  const near = (a, b) => Math.abs(a - b) < 0.05;
+  const marks = [];
+  const mark = (at) => {
+    if (at > 0 && at < total && !marks.some((each) => near(each, at)))
+      marks.push(at);
+  };
+  for (const span of spans) mark(span.start);
+  for (const span of spans)
+    if (span.end !== void 0 && Number.isFinite(span.end) && !spans.some((other) => near(other.start, span.end)))
+      mark(span.end);
+  return marks.sort((a, b) => a - b).map((at) => at / total * 100);
+}
+function seekShare(area, clientX) {
+  const seek = area.querySelector("input") ?? area;
+  const box = seek.getBoundingClientRect();
+  const thumb = parseFloat(
+    getComputedStyle(seek).getPropertyValue("--clover-transport-thumb")
+  ) || 0;
+  const travel = box.width - thumb;
+  if (!(travel > 0)) return 0;
+  return Math.min(1, Math.max(0, (clientX - box.left - thumb / 2) / travel));
+}
+export {
+  alongBar,
+  gapMask,
+  gapsOf,
+  lengthOnBar,
+  seekShare
+};

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

@@ -0,0 +1,96 @@
+"use client";
+function playInSequence(video, segments, total) {
+  const proto = HTMLMediaElement.prototype;
+  const time = Object.getOwnPropertyDescriptor(proto, "currentTime");
+  const buffered = Object.getOwnPropertyDescriptor(proto, "buffered");
+  let index = 0;
+  let pending = null;
+  const fileTime = () => time.get.call(video);
+  const setFileTime = (seconds) => time.set.call(video, seconds);
+  const startOf = () => segments[index].start;
+  const segmentAt = (seconds) => {
+    let found = 0;
+    segments.forEach((segment, i) => {
+      if (segment.start <= seconds) found = i;
+    });
+    return found;
+  };
+  const cueTimes = /* @__PURE__ */ new WeakMap();
+  const moveCues = () => {
+    for (const track of Array.from(video.textTracks ?? [])) {
+      for (const cue of Array.from(track.cues ?? [])) {
+        let own = cueTimes.get(cue);
+        if (!own) {
+          own = { start: cue.startTime, end: cue.endTime };
+          cueTimes.set(cue, own);
+        }
+        cue.startTime = own.start - startOf();
+        cue.endTime = own.end - startOf();
+      }
+    }
+  };
+  const go = (next, seconds, play) => {
+    pending = { time: seconds, play };
+    if (next === index) return;
+    index = next;
+    moveCues();
+    video.src = segments[next].src;
+  };
+  const arrived = () => {
+    var _a;
+    if (!pending) return;
+    const { time: seconds, play } = pending;
+    pending = null;
+    setFileTime(Math.max(0, seconds - startOf()));
+    if (play) void ((_a = video.play()) == null ? void 0 : _a.catch(() => void 0));
+  };
+  const ended = (event) => {
+    if (index >= segments.length - 1) return;
+    event.stopImmediatePropagation();
+    go(index + 1, segments[index + 1].start, true);
+  };
+  Object.defineProperty(video, "currentTime", {
+    configurable: true,
+    get: () => pending ? pending.time : startOf() + fileTime(),
+    set: (seconds) => {
+      const next = segmentAt(seconds);
+      if (next === index && !pending) {
+        setFileTime(Math.max(0, seconds - startOf()));
+        return;
+      }
+      go(next, seconds, (pending == null ? void 0 : pending.play) ?? !video.paused);
+      if (next === index && video.readyState >= 1) arrived();
+    }
+  });
+  Object.defineProperty(video, "duration", {
+    configurable: true,
+    get: () => total ?? Number.NaN
+  });
+  Object.defineProperty(video, "buffered", {
+    configurable: true,
+    get: () => {
+      const own = buffered.get.call(video);
+      const offset = startOf();
+      return {
+        length: own.length,
+        start: (i) => offset + own.start(i),
+        end: (i) => offset + own.end(i)
+      };
+    }
+  });
+  video.addEventListener("ended", ended);
+  video.addEventListener("loadedmetadata", arrived);
+  const tracks = Array.from(video.querySelectorAll("track"));
+  tracks.forEach((track) => track.addEventListener("load", moveCues));
+  return () => {
+    video.removeEventListener("ended", ended);
+    video.removeEventListener("loadedmetadata", arrived);
+    tracks.forEach((track) => track.removeEventListener("load", moveCues));
+    for (const name of ["currentTime", "duration", "buffered"]) {
+      delete video[name];
+    }
+  };
+}
+export {
+  playInSequence
+};

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

@@ -13,6 +13,7 @@ function captionName(caption, index, language) {
 function useMediaElement(media, { request, language }) {
   const [element, setElement] = useState(null);
   const captionsKey = JSON.stringify(media.captions);
+  const segmentsKey = JSON.stringify(media.segments ?? null);
   const posterKey = media.poster ? media.poster.src ?? media.poster.service ?? "" : "";
   const withCredentials = sendsCredentials(request);
   const requestRef = useRef(request);
@@ -36,7 +37,7 @@ function useMediaElement(media, { request, language }) {
     const blobs = [];
     media.captions.forEach((caption, index) => {
       const track = document.createElement("track");
-      track.kind = "captions";
+      track.kind = caption.kind;
       if (caption.language) track.srclang = caption.language;
       track.label = captionName(caption, index, languageRef.current).text;
       video.appendChild(track);
@@ -80,10 +81,21 @@ function useMediaElement(media, { request, language }) {
     for (const track of Array.from(video.textTracks ?? [])) {
       track.mode = "hidden";
     }
-    setElement(video);
+    const segments = media.segments;
+    let undoSequence;
+    if (segments && segments.length > 1 && !segments.some((segment) => isHls(segment.src, segment.format))) {
+      void import("./sequence.mjs").then(({ playInSequence }) => {
+        if (canceled) return;
+        undoSequence = playInSequence(video, segments, media.duration);
+        setElement(video);
+      });
+    } else {
+      setElement(video);
+    }
     return () => {
       canceled = true;
       video.pause();
+      undoSequence == null ? void 0 : undoSequence();
       hls == null ? void 0 : hls.destroy();
       video.removeAttribute("src");
       video.load();
@@ -91,7 +103,14 @@ function useMediaElement(media, { request, language }) {
       blobs.forEach((url) => URL.revokeObjectURL(url));
       setElement(null);
     };
-  }, [media.src, media.format, posterKey, captionsKey, requestKey(request)]);
+  }, [
+    media.src,
+    media.format,
+    posterKey,
+    captionsKey,
+    segmentsKey,
+    requestKey(request)
+  ]);
   return element;
 }
 export {

package/dist/components/Collection/Collection.mjs

@@ -10,6 +10,7 @@ import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
 import { useClover, useCloverSelector } from "../../react/context.mjs";
 import { titled } from "../../ui/heading.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 const Collection = forwardRef(
   function Collection2({ headingLevel = 3, className, ...rest }, ref) {
     const { clover } = useClover("Collection");
@@ -37,7 +38,7 @@ const Collection = forwardRef(
           Title,
           {
             className: "clover-about-heading",
-            lang: langOf(titleKey),
+            ...languageProps(langOf(titleKey)),
             ...title,
             children: t(titleKey)
           }

package/dist/components/CollectionSelect/CollectionSelect.mjs

@@ -7,6 +7,7 @@ import { localize } from "../../core/value.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
 import { useClover, useCloverSelector } from "../../react/context.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 const STEPS = /* @__PURE__ */ new Set([
   "ArrowUp",
   "ArrowDown",
@@ -65,7 +66,9 @@ const CollectionSelect = forwardRef(
             {
               htmlFor: `${id}-select`,
               className: "clover-collection-select-label",
-              lang: label.text ? label.lang : langOf("collectionLabel"),
+              ...languageProps(
+                label.text ? label.lang : langOf("collectionLabel")
+              ),
               children: label.text || t("collectionLabel")
             }
           ),
@@ -96,7 +99,7 @@ const CollectionSelect = forwardRef(
                   "option",
                   {
                     value: item.id,
-                    lang: text.text ? text.lang : void 0,
+                    ...languageProps(text.text ? text.lang : void 0),
                     children: text.text || item.id
                   },
                   item.id