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

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

@@ -0,0 +1,193 @@
+"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 { localize } from "../../../core/value.mjs";
+import { useCloverTranslation } from "../../../i18n/useCloverTranslation.mjs";
+import { useContainerName } from "../../../ui/useContainerName.mjs";
+import { CueTime } from "../../../ui/Cue.mjs";
+const ART_SIZE = 1200;
+const GROUND_SIZE = 32;
+function artworkOf(canvas, language) {
+  const source = stillSource(canvas);
+  if (!source) return null;
+  const width = Number(canvas.width);
+  const height = Number(canvas.height);
+  const name = localize(canvas.label, language);
+  return {
+    source,
+    ratio: width > 0 && height > 0 ? width / height : void 0,
+    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",
+  {
+    "aria-hidden": "true",
+    className: "clover-canvas-player-note",
+    focusable: "false",
+    viewBox: "0 0 24 24",
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M9 18V5l11-2v13",
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "2"
+        }
+      ),
+      /* @__PURE__ */ jsx("circle", { cx: "6", cy: "18", r: "3" }),
+      /* @__PURE__ */ jsx("circle", { cx: "17", cy: "16", r: "3" })
+    ]
+  }
+);
+function PlayerFace({
+  player,
+  started,
+  request,
+  language
+}) {
+  var _a, _b;
+  const { canvas, title, partOf } = player;
+  const before = canvas.placeholderContainer ?? canvas.accompanyingContainer;
+  const during = canvas.accompanyingContainer ?? canvas.placeholderContainer;
+  const shown = started ? during : before;
+  const art = useMemo(() => {
+    if (shown) return artworkOf(shown, language);
+    const { thumbnail } = canvas;
+    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 [loaded, setLoaded] = useState();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "clover-canvas-player-ground",
+        "data-art": ground ? "" : void 0,
+        "aria-hidden": "true",
+        children: ground && // eslint-disable-next-line @next/next/no-img-element -- This library also renders outside Next.js.
+        /* @__PURE__ */ jsx("img", { alt: "", decoding: "async", src: ground })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "clover-canvas-player-art",
+        "data-loaded": src && loaded === src ? "" : void 0,
+        style: {
+          "--clover-player-art-ratio": (art == null ? void 0 : art.ratio) ?? 1
+        },
+        children: src ? (
+          // eslint-disable-next-line @next/next/no-img-element -- This library also renders outside Next.js.
+          /* @__PURE__ */ jsx(
+            "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,
+              decoding: "async",
+              onLoad: () => setLoaded(src),
+              src
+            },
+            src
+          )
+        ) : /* @__PURE__ */ jsx(Note, {})
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "clover-canvas-player-head", children: [
+      (title == null ? void 0 : title.text) && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "clover-canvas-player-title",
+          "aria-hidden": "true",
+          lang: title.lang || void 0,
+          children: title.text
+        }
+      ),
+      (partOf == null ? void 0 : partOf.text) && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "clover-canvas-player-part-of",
+          lang: 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
+};

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

@@ -0,0 +1,511 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useState, useLayoutEffect, useEffect } from "react";
+import { TransportButton } from "./TransportButton.mjs";
+import { useBarHeight } from "./useBarHeight.mjs";
+import { languageCode } from "../../../ui/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 { useCloverTranslation } from "../../../i18n/useCloverTranslation.mjs";
+import { toggleFullscreen } from "../../../lib/fullscreen.mjs";
+import useFullscreenSupported from "../../../hooks/useFullscreenSupported.mjs";
+import { formatTime } from "../../../lib/time.mjs";
+function chapterAt(chapters, time) {
+  let found = -1;
+  chapters.forEach((candidate, index) => {
+    if (candidate.start <= time) found = index;
+  });
+  return found;
+}
+let volumeSettable;
+function canSetVolume() {
+  if (volumeSettable === void 0) {
+    if (typeof document === "undefined") return true;
+    const probe = document.createElement("video");
+    probe.volume = 0.5;
+    volumeSettable = probe.volume === 0.5;
+  }
+  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,
+  labelLang,
+  button,
+  icon,
+  active,
+  current,
+  options,
+  selected,
+  onSelect
+}) {
+  const [open, setOpen] = useState(false);
+  const menu = useRef(null);
+  const trigger = useRef(null);
+  const list = useRef(null);
+  const pointer = useRef(false);
+  const name = useContainerName(label, labelLang);
+  const coded = options.some((option) => languageCode(option.language));
+  useOneOpen(open, () => setOpen(false));
+  const dismiss = () => {
+    var _a;
+    setOpen(false);
+    (_a = trigger.current) == null ? void 0 : _a.focus();
+  };
+  useEffect(() => {
+    if (!open) return;
+    const close = (event) => {
+      var _a, _b, _c;
+      if (event instanceof KeyboardEvent) {
+        if (event.key !== "Escape") return;
+        if ((_a = menu.current) == null ? void 0 : _a.contains(document.activeElement)) {
+          event.preventDefault();
+          (_b = trigger.current) == null ? void 0 : _b.focus();
+        }
+      } else if ((_c = menu.current) == null ? void 0 : _c.contains(event.target)) {
+        return;
+      }
+      setOpen(false);
+    };
+    document.addEventListener("pointerdown", close);
+    document.addEventListener("keydown", close, true);
+    return () => {
+      document.removeEventListener("pointerdown", close);
+      document.removeEventListener("keydown", close, true);
+    };
+  }, [open]);
+  useLayoutEffect(() => {
+    const options2 = list.current;
+    const wrapper = menu.current;
+    const transport = wrapper == null ? void 0 : wrapper.closest(".clover-canvas-transport");
+    const bodyBox = wrapper == null ? void 0 : wrapper.closest(".clover-canvas-media");
+    if (!open || !options2 || !wrapper || !transport || !bodyBox) return;
+    const place = () => placeMenu(options2, wrapper, transport, bodyBox);
+    place();
+    const observer = new ResizeObserver(place);
+    observer.observe(bodyBox);
+    observer.observe(transport);
+    observer.observe(options2);
+    return () => observer.disconnect();
+  }, [open]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "clover-canvas-transport-menu",
+      ref: menu,
+      onBlur: (event) => {
+        var _a;
+        const next = event.relatedTarget;
+        if (open && next instanceof Node && !((_a = menu.current) == null ? void 0 : _a.contains(next))) {
+          setOpen(false);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            "aria-controls": id,
+            "aria-describedby": current ? `${id}-current` : void 0,
+            "aria-expanded": open,
+            "aria-label": label,
+            lang: labelLang,
+            className: "clover-canvas-transport-button",
+            "data-active": active ? "" : void 0,
+            "data-button": button,
+            onClick: () => setOpen((value) => !value),
+            ref: trigger,
+            type: "button",
+            children: [
+              icon,
+              /* @__PURE__ */ jsx(Tip, { label })
+            ]
+          }
+        ),
+        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 }),
+        open && name.node,
+        open && /* @__PURE__ */ jsx(
+          "fieldset",
+          {
+            ...name.props,
+            className: "clover-canvas-transport-options",
+            id,
+            ref: list,
+            children: options.map((option, index) => {
+              const code = languageCode(option.language);
+              return /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  className: "clover-canvas-transport-option",
+                  onPointerDown: () => {
+                    pointer.current = true;
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        checked: selected === index,
+                        name: id,
+                        onChange: () => onSelect(index),
+                        onClick: () => {
+                          if (pointer.current) dismiss();
+                        },
+                        onKeyDown: (event) => {
+                          pointer.current = false;
+                          if (event.key === "Enter") {
+                            event.preventDefault();
+                            onSelect(index);
+                            dismiss();
+                          }
+                        },
+                        type: "radio"
+                      }
+                    ),
+                    option.time && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("span", { children: option.time }),
+                      " "
+                    ] }),
+                    coded && (code ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("span", { className: "clover-canvas-transport-code", children: code }),
+                      " "
+                    ] }) : /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "clover-canvas-transport-code",
+                        "aria-hidden": "true"
+                      }
+                    )),
+                    /* @__PURE__ */ jsx("span", { lang: option.lang, children: option.label })
+                  ]
+                },
+                index
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+const tipIn = (element) => element.querySelector(":scope > .clover-tip");
+const focusVisible = (element) => {
+  try {
+    return element.matches(":focus-visible");
+  } catch {
+    return false;
+  }
+};
+const Transport = ({
+  instance,
+  controller,
+  kind,
+  captions,
+  activeCaption,
+  onCaptionChange,
+  fullscreen = false,
+  isFullscreen = false,
+  video,
+  chapters = [],
+  highlightedChapter = null,
+  onChapterHighlight
+}) => {
+  const { t, langOf } = useCloverTranslation();
+  const canFullscreen = useFullscreenSupported() || kind === "video";
+  const bar = useRef(null);
+  useBarHeight(bar);
+  const { paused, currentTime, duration, buffered, muted, volume } = controller;
+  const chapter = chapterAt(chapters, currentTime);
+  const [pointed, setPointed] = useState(-1);
+  const pointedRef = useRef(-1);
+  const point = (index) => {
+    var _a;
+    if (pointedRef.current === index) return;
+    pointedRef.current = index;
+    setPointed(index);
+    onChapterHighlight == null ? void 0 : onChapterHighlight(((_a = chapters[index]) == null ? void 0 : _a.id) ?? null);
+  };
+  const [seekFocused, setSeekFocused] = useState(false);
+  const previewed = pointed >= 0 ? pointed : seekFocused ? chapter : -1;
+  const marked = pointed >= 0 ? pointed : chapters.findIndex(
+    (each) => each.id !== void 0 && each.id === highlightedChapter
+  );
+  const seekArea = useRef(null);
+  useLayoutEffect(() => {
+    const area = seekArea.current;
+    const figure = area == null ? void 0 : area.closest(".clover-canvas");
+    const tip = area && previewed >= 0 ? tipIn(area) : null;
+    if (!figure || !tip) return;
+    const top = "--clover-transport-preview-top";
+    const place = () => figure.style.setProperty(
+      top,
+      `${figure.getBoundingClientRect().bottom - tip.getBoundingClientRect().top}px`
+    );
+    place();
+    const observer = new ResizeObserver(place);
+    observer.observe(tip);
+    return () => {
+      observer.disconnect();
+      figure.style.removeProperty(top);
+    };
+  }, [previewed]);
+  const along = (index) => {
+    const { start, end = duration } = chapters[index];
+    return {
+      left: start / duration * 100,
+      width: (end - start) / duration * 100
+    };
+  };
+  const playKey = paused ? "playerPlay" : "playerPause";
+  const captionsOff = {
+    label: t("playerCaptionsOff"),
+    lang: langOf("playerCaptionsOff")
+  };
+  const muteKey = muted ? "playerUnmute" : "playerMute";
+  const fullscreenKey = isFullscreen ? "imageExitFullScreen" : "imageFullScreen";
+  const progress = duration ? currentTime / duration * 100 : 0;
+  const loaded = duration ? buffered / duration * 100 : 0;
+  const hasFullscreen = fullscreen && canFullscreen;
+  const focused = useRef(null);
+  const play = useRef(null);
+  useLayoutEffect(() => {
+    var _a;
+    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();
+  }, [captions.length, chapters.length, hasFullscreen]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "clover-canvas-transport",
+      "data-kind": kind,
+      "data-testid": "clover-canvas-transport",
+      onFocus: (event) => {
+        focused.current = event.target;
+      },
+      onBlur: (event) => {
+        const control = event.target;
+        const next = event.relatedTarget;
+        if (next instanceof Node) {
+          if (!event.currentTarget.contains(next)) focused.current = null;
+          return;
+        }
+        queueMicrotask(() => {
+          if (focused.current === control && control.isConnected) {
+            focused.current = null;
+          }
+        });
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: seekArea,
+            className: "clover-canvas-transport-seek-area",
+            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
+                )
+              );
+            },
+            onPointerLeave: () => point(-1),
+            style: previewed >= 0 && duration > 0 ? {
+              "--clover-transport-preview": `${along(previewed).left + along(previewed).width / 2}%`
+            } : void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  "aria-label": t("playerSeek"),
+                  lang: langOf("playerSeek"),
+                  "aria-valuetext": `${formatTime(currentTime)} / ${formatTime(duration)}${chapter >= 0 ? `, ${chapters[chapter].label}` : ""}`,
+                  className: "clover-canvas-transport-seek",
+                  onFocus: (event) => setSeekFocused(focusVisible(event.currentTarget)),
+                  onBlur: () => setSeekFocused(false),
+                  max: duration || 0,
+                  min: 0,
+                  onChange: (event) => controller.seek(Number(event.target.value)),
+                  step: "any",
+                  style: {
+                    "--clover-transport-progress": `${progress}%`,
+                    "--clover-transport-loaded": `${loaded}%`
+                  },
+                  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}%`
+                  }
+                }
+              ),
+              previewed >= 0 && duration > 0 && // 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
+                },
+                previewed
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "clover-canvas-transport-bar", ref: bar, children: [
+          /* @__PURE__ */ jsx(
+            TransportButton,
+            {
+              words: playKey,
+              button: paused ? "play" : "pause",
+              shortcut: SHORTCUTS.play,
+              onClick: controller.toggle,
+              buttonRef: play,
+              children: paused ? /* @__PURE__ */ jsx(PlayIcon, {}) : /* @__PURE__ */ jsx(PauseIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TransportButton,
+            {
+              words: muteKey,
+              button: "mute",
+              shortcut: SHORTCUTS.mute,
+              onClick: controller.toggleMute,
+              children: muted || volume === 0 ? /* @__PURE__ */ jsx(VolumeMutedIcon, {}) : /* @__PURE__ */ jsx(VolumeHighIcon, {})
+            }
+          ),
+          canSetVolume() && /* @__PURE__ */ jsx(
+            "input",
+            {
+              "aria-label": t("playerVolume"),
+              lang: langOf("playerVolume"),
+              className: "clover-canvas-transport-volume",
+              max: 1,
+              min: 0,
+              onChange: (event) => controller.setVolume(Number(event.target.value)),
+              step: 0.05,
+              style: {
+                "--clover-transport-progress": `${(muted ? 0 : volume) * 100}%`
+              },
+              type: "range",
+              value: muted ? 0 : volume
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "clover-canvas-transport-status", children: [
+            /* @__PURE__ */ jsxs("span", { className: "clover-canvas-transport-time", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-label": t("playerCurrentTime"),
+                  lang: langOf("playerCurrentTime"),
+                  children: formatTime(currentTime)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " / " }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-label": t("playerDuration"),
+                  lang: langOf("playerDuration"),
+                  children: formatTime(duration)
+                }
+              )
+            ] }),
+            chapter >= 0 && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "clover-canvas-transport-chapter",
+                lang: chapters[chapter].lang,
+                children: chapters[chapter].label
+              }
+            )
+          ] }),
+          (chapters.length > 0 || captions.length > 0 || hasFullscreen) && /* @__PURE__ */ jsxs("div", { className: "clover-canvas-transport-end", children: [
+            chapters.length > 0 && /* @__PURE__ */ jsx(
+              TransportMenu,
+              {
+                id: `${instance}-chapters`,
+                label: t("playerChapters"),
+                labelLang: langOf("playerChapters"),
+                button: "chapters",
+                icon: /* @__PURE__ */ jsx(ChaptersIcon, {}),
+                options: chapters.map((item) => ({
+                  label: item.label,
+                  lang: item.lang,
+                  time: formatTime(item.start)
+                })),
+                selected: chapter,
+                onSelect: (index) => controller.seek(chapters[index].start)
+              }
+            ),
+            captions.length > 0 && /* @__PURE__ */ jsx(
+              TransportMenu,
+              {
+                id: `${instance}-captions`,
+                label: t("playerCaptions"),
+                labelLang: langOf("playerCaptions"),
+                button: "captions",
+                icon: /* @__PURE__ */ jsx(CaptionsIcon, { on: activeCaption >= 0 }),
+                active: activeCaption >= 0,
+                current: captions[activeCaption] ?? captionsOff,
+                options: [captionsOff, ...captions],
+                selected: activeCaption + 1,
+                onSelect: (index) => onCaptionChange(index - 1)
+              }
+            ),
+            hasFullscreen && /* @__PURE__ */ jsx(
+              TransportButton,
+              {
+                words: fullscreenKey,
+                button: "fullscreen",
+                onClick: (event) => void toggleFullscreen(event.currentTarget, video),
+                children: isFullscreen ? /* @__PURE__ */ jsx(ExitFullScreenIcon, {}) : /* @__PURE__ */ jsx(FullScreenIcon, {})
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  chapterAt,
+  Transport as default
+};