@nulib/clover 4.0.0-beta.1 → 4.0.0

package/dist/components/Scene/SceneView.mjs

@@ -7,6 +7,7 @@ import { sceneModels, sceneBackground } from "./models.mjs";
 import { showOrientation, Caret, RotatePad } from "./RotatePad.mjs";
 import Caption, { hasInformation, captionLabelId } from "../Body/Caption.mjs";
 import { BodyAlert } from "../Body/BodyAlert.mjs";
+import { BodyUnloadable } from "../../ui/BodyUnloadable.mjs";
 import { Information } from "../Body/glyphs.mjs";
 import { useControlsVisibility } from "../Body/useControlsVisibility.mjs";
 import { useNearViewport } from "../Body/useNearViewport.mjs";
@@ -15,12 +16,14 @@ import { localize } from "../../core/value.mjs";
 import useFullscreen from "../../hooks/useFullscreen.mjs";
 import useFullscreenSupported from "../../hooks/useFullscreenSupported.mjs";
 import useWithinFullscreen from "../../hooks/useWithinFullscreen.mjs";
+import useFullscreenExit from "../../hooks/useFullscreenExit.mjs";
+import { useHighContrast, highContrastProps } from "../../hooks/useHighContrast.mjs";
 import { HostLanguageContext } from "../../i18n/hostLanguage.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
 import { toggleFullscreen } from "../../lib/fullscreen.mjs";
 import { claimContext, returnContext } from "../../lib/renderer/backends/contexts.mjs";
-import { useRootLanguage } from "../../react/language.mjs";
+import { useRootLanguage } from "../../i18n/useRootLanguage.mjs";
 import Button from "../../ui/Button.mjs";
 import ControlCluster, { renderControl } from "../../ui/ControlCluster.mjs";
 import { Reset, ZoomIn, ZoomOut, ZoomExitFullScreen, ZoomFullScreen } from "../../ui/controlGlyphs.mjs";
@@ -28,10 +31,11 @@ import { ErrorBoundary } from "../../ui/ErrorBoundary.mjs";
 import ExitFullscreen from "../../ui/ExitFullscreen.mjs";
 import { Loading } from "../../ui/Loading.mjs";
 import { SHORTCUTS, forwardShortcut } from "../../ui/Tip.mjs";
-import { useContainerName } from "../../ui/useContainerName.mjs";
+import { useContainerName } from "../../i18n/useContainerName.mjs";
 import { useUniqueId } from "../../ui/useUniqueId.mjs";
 import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
 import { engineFor } from "./engines.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 const ALL_CONTROLS = {
   zoom: true,
   fullPage: true,
@@ -59,6 +63,7 @@ function SceneBody({
   scene,
   label,
   language,
+  highContrast,
   className,
   controls = true,
   controlButtons,
@@ -70,8 +75,10 @@ function SceneBody({
   const { t } = useCloverTranslation();
   const [wrapper, setWrapper] = useState(null);
   const root = useRootLanguage(setWrapper);
+  const contrast = useHighContrast(highContrast);
   const hostRef = useRef(null);
   const isFullscreen = useFullscreen(wrapper);
+  const exitShown = useFullscreenExit(wrapper);
   const canFullscreen = useFullscreenSupported();
   const controlsVisible = useControlsVisibility(
     wrapper,
@@ -218,7 +225,8 @@ function SceneBody({
       giveBack();
       setStatus({
         state: "error",
-        error: error instanceof Error ? error : new Error(String(error))
+        error: error instanceof Error ? error : new Error(String(error)),
+        load: true
       });
     });
     return () => {
@@ -431,8 +439,10 @@ function SceneBody({
       "aria-labelledby": figureLabel,
       className: join("clover-canvas", "clover-scene", className),
       "data-testid": "clover-scene",
+      ...highContrastProps(contrast),
       "data-status": status.state === "ready" ? "ready" : status.state === "error" ? "error" : "loading",
       "data-fullscreen": isFullscreen,
+      "data-exit": exitShown || void 0,
       "data-controls": controlsVisible ? "visible" : "hidden",
       "data-navigable": "true",
       ref: root.ref,
@@ -453,7 +463,7 @@ function SceneBody({
         isolation: "isolate"
       },
       children: [
-        /* @__PURE__ */ jsx(ExitFullscreen, { hidden: !isFullscreen }),
+        /* @__PURE__ */ jsx(ExitFullscreen, { hidden: !exitShown }),
         (captioned.length > 0 || React.Children.count(children) > 0) && /* @__PURE__ */ jsxs(ControlCluster, { controls: () => [], controlButtons, children: [
           captioned.length > 0 && /* @__PURE__ */ jsx(
             Button,
@@ -513,11 +523,18 @@ function SceneBody({
           {
             id: keysId,
             style: visuallyHidden,
-            lang: root.langOf("sceneKeys"),
+            ...languageProps(root.langOf("sceneKeys")),
             children: t("sceneKeys")
           }
         ),
-        status.state === "error" && /* @__PURE__ */ jsx(BodyAlert, { error: status.error, className: "clover-scene-error" }),
+        /* @__PURE__ */ jsx(
+          BodyUnloadable,
+          {
+            kind: "model",
+            shown: status.state === "error" && Boolean(status.load)
+          }
+        ),
+        status.state === "error" && !status.load && /* @__PURE__ */ jsx(BodyAlert, { error: status.error, className: "clover-scene-error" }),
         loading && /* @__PURE__ */ jsx(Loading, { overlay: true }),
         captioned.length > 0 && /* @__PURE__ */ jsx(
           Caption,

package/dist/components/Search/Search.mjs

@@ -12,6 +12,7 @@ import { bringIntoView, scrollerOf } from "../../ui/bringIntoView.mjs";
 import { titleTag } from "../../ui/heading.mjs";
 import { useSectionOpened } from "../../ui/Sections.mjs";
 import { FieldPill } from "../../ui/FieldPill.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 const CHUNK = 40;
 const Search = forwardRef(function Search2({
   headingLevel = 3,
@@ -143,7 +144,7 @@ const Search = forwardRef(function Search2({
       className: "clover-content-search-status",
       role: "status",
       "data-status": search.status,
-      lang: statusKey ? langOf(statusKey) : void 0,
+      ...languageProps(statusKey ? langOf(statusKey) : void 0),
       children: status
     }
   );
@@ -198,7 +199,7 @@ const Search = forwardRef(function Search2({
                   {
                     id: `${id}-${index}`,
                     className: "clover-content-search-canvas",
-                    lang: label.text ? label.lang : void 0,
+                    ...languageProps(label.text ? label.lang : void 0),
                     children: label.text || canvasId
                   }
                 ),

package/dist/components/Split/Split.mjs

@@ -4,6 +4,7 @@ import { forwardRef, useRef, useState, useEffect, useCallback, useMemo, createCo
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { Tip } from "../../ui/Tip.mjs";
 import { readSizes, writeSizes, limitsOf, handleGestures, paneElements, cssLength, toPixels, nextStop } from "./splitting.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 const SplitContext = createContext(null);
 function assign(ref, node) {
   if (typeof ref === "function") ref(node);
@@ -172,7 +173,9 @@ const SplitHandle = forwardRef(
         role: "separator",
         "aria-orientation": "vertical",
         "aria-label": label,
-        lang: rest["aria-label"] === void 0 ? langOf("splitHandle") : void 0,
+        ...languageProps(
+          rest["aria-label"] === void 0 ? langOf("splitHandle") : void 0
+        ),
         "aria-valuenow": value ? percent(value.now) : void 0,
         "aria-valuemin": value ? percent(value.min) : void 0,
         "aria-valuemax": value ? percent(value.max) : void 0,

package/dist/components/Status/Status.mjs

@@ -5,6 +5,7 @@ import { join } from "../../lib/classnames.mjs";
 import { useStatus } from "../../react/hooks.mjs";
 import { Loading } from "../../ui/Loading.mjs";
 import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 function Status({
   className,
   loading,
@@ -24,7 +25,14 @@ function Status({
         style: busy && loading !== false ? void 0 : visuallyHidden,
         children: [
           busy && (own ? loading : loading === void 0 && /* @__PURE__ */ jsx(Loading, {})),
-          busy && !own && /* @__PURE__ */ jsx("span", { style: visuallyHidden, lang: langOf("statusLoading"), children: t("statusLoading") })
+          busy && !own && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: visuallyHidden,
+              ...languageProps(langOf("statusLoading")),
+              children: t("statusLoading")
+            }
+          )
         ]
       }
     ),
@@ -35,7 +43,7 @@ function Status({
         "data-status": status,
         role: "alert",
         children: renderError ? renderError(error) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("p", { lang: langOf("statusError"), children: t("statusError") }),
+          /* @__PURE__ */ jsx("p", { ...languageProps(langOf("statusError")), children: t("statusError") }),
           /* @__PURE__ */ jsx("p", { className: "clover-status-detail", lang: "en", children: error.message })
         ] })
       }

package/dist/components/Timeline/playerSurface.mjs

@@ -59,7 +59,8 @@ const playerSurface = (host) => {
     },
     async setImages(images, { world } = {}) {
       var _a, _b;
-      show(((_b = (_a = images.find((image) => image.media)) == null ? void 0 : _a.media) == null ? void 0 : _b.element) ?? null);
+      const element = (_b = (_a = images.find((image) => image.media)) == null ? void 0 : _a.media) == null ? void 0 : _b.element;
+      show(element instanceof HTMLVideoElement ? element : null);
       if (!world && !images.length) return;
       emit(open ? "change" : "open");
       open = true;

package/dist/components/Transcript/Transcript.mjs

@@ -3,21 +3,24 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo, useState, useEffect, useSyncExternalStore, useRef } from "react";
 import { useUniqueId } from "../../ui/useUniqueId.mjs";
 import { createPortal } from "react-dom";
-import { canvasCaptions, canvasTextTranscripts } from "../Canvas/layout.mjs";
+import { canvasTimedText, canvasTextTranscripts } from "../Canvas/layout.mjs";
 import { selectVisibleCanvases } from "../../core/selectors.mjs";
 import { localize } from "../../core/value.mjs";
 import { loadVtt, loadText, parseVtt, paragraphsOf, cueAt } from "../../core/vtt.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
 import { playFrom } from "../../lib/time.mjs";
+import { sameLanguage } from "../../i18n/languages.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 import { useClover, useCloverSelector } from "../../react/context.mjs";
+import { useReadingLanguages } from "../../react/readingLanguages.mjs";
 import { bringIntoView, scrollerOf } from "../../ui/bringIntoView.mjs";
 import { CueTime } from "../../ui/Cue.mjs";
 import { FieldPill } from "../../ui/FieldPill.mjs";
-import { languageCode } from "../../ui/languageCode.mjs";
+import { languageCode } from "../../i18n/languageCode.mjs";
 import { useSectionActions } from "../../ui/Sections.mjs";
 import { Tip } from "../../ui/Tip.mjs";
-import { useContainerName } from "../../ui/useContainerName.mjs";
+import { useContainerName } from "../../i18n/useContainerName.mjs";
 import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
 const CHUNK = 40;
 const fold = (text) => text.toLocaleLowerCase();
@@ -34,6 +37,7 @@ function marked(text, query) {
   if (from < text.length) parts.push(text.slice(from));
   return parts;
 }
+const isCaptionTrack = (file) => file.read === "cues" && file.kind !== "transcript";
 const Transcript = forwardRef(
   function Transcript2({
     as: Tag = "div",
@@ -50,27 +54,40 @@ const Transcript = forwardRef(
       (state) => selectVisibleCanvases(state.manifest, state.canvasId)
     );
     const canvas = canvases.find(
-      (candidate) => canvasCaptions(candidate).length > 0 || canvasTextTranscripts(candidate).length > 0
+      (candidate) => canvasTimedText(candidate).length > 0 || canvasTextTranscripts(candidate).length > 0
     );
     const tracks = useMemo(
       () => canvas ? [
-        ...canvasCaptions(canvas).map((each) => ({
+        ...canvasTimedText(canvas).map((each) => ({
           ...each,
-          kind: "captions"
+          read: "cues"
         })),
         ...canvasTextTranscripts(canvas).map((each) => ({
           ...each,
-          kind: "text"
+          read: "text"
         }))
       ] : [],
       [canvas]
     );
     const [choice, setChoice] = useState(0);
     const track = tracks[choice] ?? tracks[0];
+    const offered = useReadingLanguages();
+    const rootLanguage = (offered == null ? void 0 : offered.chosen) ?? language;
+    useEffect(() => {
+      if (!rootLanguage) return;
+      const index = tracks.findIndex(
+        (option) => option.language && option.language !== "none" && sameLanguage(option.language, rootLanguage)
+      );
+      if (index < 0) return;
+      setChoice(index);
+      const file = tracks[index];
+      if (isCaptionTrack(file) && clover.captions.get() !== file.id)
+        clover.captions.emit(file.id);
+    }, [rootLanguage, tracks, clover]);
     useEffect(() => {
       const follow2 = (id2) => {
         const index = tracks.findIndex(
-          (option) => option.kind === "captions" && option.id === id2
+          (option) => isCaptionTrack(option) && option.id === id2
         );
         if (index >= 0) setChoice(index);
       };
@@ -84,7 +101,7 @@ const Transcript = forwardRef(
       setParagraphs([]);
       if (!track) return;
       let live = true;
-      (track.kind === "captions" ? loadVtt(track.id, clover.request).then(
+      (track.read === "cues" ? loadVtt(track.id, clover.request).then(
         (text) => live && setCues(parseVtt(text))
       ) : loadText(track.id, clover.request).then(
         (text) => live && setParagraphs(paragraphsOf(text))
@@ -179,20 +196,20 @@ const Transcript = forwardRef(
     }, [sticky, hasCues, find]);
     const id = useUniqueId();
     const actions = useSectionActions();
-    const nameKey = tracks.every((each) => each.kind === "captions") ? "playerCaptions" : "transcriptLabel";
+    const nameKey = tracks.every(isCaptionTrack) ? "playerCaptions" : "transcriptLabel";
     const name = useContainerName(t(nameKey), langOf(nameKey));
     if (!canvas || !track) return null;
-    const texts = tracks.filter((each) => each.kind === "text").length;
+    const texts = tracks.filter((each) => each.read === "text").length;
     const shown = tracks.map((each) => {
       const code = languageCode(each.language);
-      if (each.kind === "captions") return code;
+      if (each.read === "cues") return code;
       return texts > 1 && code ? `TXT ${code}` : "TXT";
     });
     const codes = shown.map(
       (code) => code && shown.filter((each) => each === code).length === 1 ? code : void 0
     );
     const lang = track.language && track.language !== "none" ? track.language : void 0;
-    const languages = tracks.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+    const languages = tracks.length > 1 && !offered && /* @__PURE__ */ jsxs(Fragment, { children: [
       name.node,
       /* @__PURE__ */ jsx("fieldset", { ...name.props, className: "clover-transcript-languages", children: tracks.map((option, index) => {
         const label = localize(option.label, language);
@@ -207,8 +224,7 @@ const Transcript = forwardRef(
               checked: index === choice,
               onChange: () => {
                 setChoice(index);
-                if (option.kind === "captions")
-                  clover.captions.emit(option.id);
+                if (isCaptionTrack(option)) clover.captions.emit(option.id);
               }
             }
           ),
@@ -220,7 +236,7 @@ const Transcript = forwardRef(
             "span",
             {
               style: code ? visuallyHidden : void 0,
-              lang: label.text ? label.lang : void 0,
+              ...languageProps(label.text ? label.lang : void 0),
               children: text
             }
           ),
@@ -234,7 +250,10 @@ const Transcript = forwardRef(
         else element.currentTime = cue.start;
         return;
       }
-      clover.goTo(canvas.id, { time: cue.start });
+      clover.goTo(canvas.id, {
+        time: cue.start,
+        ...play && { autoplay: true }
+      });
     };
     const go = (index) => {
       const cue = cues[matches[index]];
@@ -250,7 +269,7 @@ const Transcript = forwardRef(
     };
     const count = matches.length;
     const statusKey = !query ? null : count === 0 ? "contentSearchResultsNone" : count === 1 ? "contentSearchResult" : "contentSearchResults";
-    const finding = find && track.kind === "captions" && cues.length > 0 && /* @__PURE__ */ jsxs("div", { className: "clover-transcript-find", children: [
+    const finding = find && track.read === "cues" && cues.length > 0 && /* @__PURE__ */ jsxs("div", { className: "clover-transcript-find", children: [
       /* @__PURE__ */ jsx(
         FieldPill,
         {
@@ -278,7 +297,7 @@ const Transcript = forwardRef(
         {
           className: "clover-transcript-find-status",
           role: "status",
-          lang: statusKey ? langOf(statusKey) : void 0,
+          ...languageProps(statusKey ? langOf(statusKey) : void 0),
           children: statusKey ? t(statusKey, { count }) : ""
         }
       )
@@ -293,16 +312,16 @@ const Transcript = forwardRef(
         children: [
           languages && (actions ? createPortal(languages, actions) : languages),
           finding,
-          track.kind === "text" ? (
+          track.read === "text" ? (
             // Untimed: the words alone, a paragraph each, nothing to press.
-            /* @__PURE__ */ jsx("div", { className: "clover-transcript-body", lang, children: paragraphs.map((paragraph, index) => /* @__PURE__ */ jsx("p", { children: paragraph }, index)) })
+            /* @__PURE__ */ jsx("div", { className: "clover-transcript-body", ...languageProps(lang), children: paragraphs.map((paragraph, index) => /* @__PURE__ */ jsx("p", { children: paragraph }, index)) })
           ) : /* @__PURE__ */ jsx(
             "ol",
             {
               ref: list,
               className: "clover-transcript-cues",
               id: `${id}-cues`,
-              lang,
+              ...languageProps(lang),
               children: cues.slice(0, drawn).map((cue, index) => /* @__PURE__ */ jsx(
                 "li",
                 {
@@ -341,7 +360,7 @@ const Transcript = forwardRef(
               ))
             }
           ),
-          track.kind === "captions" && drawn < cues.length && /* @__PURE__ */ jsx(
+          track.read === "cues" && drawn < cues.length && /* @__PURE__ */ jsx(
             "div",
             {
               ref: end,

package/dist/core/annotation-bodies.mjs

@@ -4,22 +4,42 @@ import { asArray } from "../lib/asArray.mjs";
 const isCaptionFile = (body) => (body == null ? void 0 : body.format) === "text/vtt" || typeof (body == null ? void 0 : body.id) === "string" && /\.vtt(\?|$)/i.test(body.id);
 function readBodies(annotation) {
   const bodies = [];
-  for (let body of bodiesOf(annotation)) {
-    if ((body == null ? void 0 : body.type) === "Choice") body = asArray(body.items)[0];
-    if (!body || isCaptionFile(body)) continue;
+  let choices = 0;
+  const read = (body, choice) => {
+    var _a;
+    if (!body || isCaptionFile(body)) return;
+    if (body.type === "SpecificResource") {
+      if (body.source && typeof body.source === "object")
+        read(body.source, choice);
+      return;
+    }
+    const of = choice === void 0 ? {} : { choice };
     if (body.type === "TextualBody" || typeof body.value === "string") {
       bodies.push({
         value: String(body.value ?? ""),
         format: body.format,
-        language: asArray(body.language)[0]
+        language: asArray(body.language)[0],
+        ...of
       });
     } else if (body.type === "Image" && body.id) {
       const label = body.label ?? annotation.label;
       bodies.push({
         image: body.id,
         format: body.format,
-        ...label ? { label } : {}
+        ...label ? { label } : {},
+        ...of
       });
+    } else if (body.type === "Feature") {
+      const label = ((_a = body.properties) == null ? void 0 : _a.label) ?? annotation.label;
+      if (label && typeof label === "object")
+        bodies.push({ label, place: true, ...of });
+    }
+  };
+  for (const body of bodiesOf(annotation)) {
+    if ((body == null ? void 0 : body.type) !== "Choice") read(body);
+    else {
+      const choice = choices++;
+      for (const item of asArray(body.items)) read(item, choice);
     }
   }
   return bodies;

package/dist/core/annotation-collection.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { readPage } from "./annotation-sets.mjs";
+import { readPage, pageLabel } from "./annotation-sets.mjs";
 import { upgradePage } from "./pages.mjs";
 import { fetchJson } from "./request.mjs";
 import { asArray } from "../lib/asArray.mjs";
@@ -41,7 +41,8 @@ async function loadAnnotationSets(input, { request, signal } = {}) {
       if (entries.length) {
         sets.push({
           id,
-          label: page.label ?? json.label,
+          // Its own name, its Collection's (from the reference too), or the content's.
+          label: pageLabel(page, raw === json ? item : void 0) ?? json.label,
           source: "added",
           entries
         });

package/dist/core/annotation-name.mjs

@@ -1,6 +1,12 @@
 "use client";
+import { languageToRead } from "../i18n/languages.mjs";
 import { toPlainText, readAs, markdownToPlainText } from "./text.mjs";
 import { localize } from "./value.mjs";
+const tagOf = (body) => body.language && body.language !== "none" ? body.language : "none";
+function bodyInLanguage(bodies, language) {
+  const tag = languageToRead([...new Set(bodies.map(tagOf))], language);
+  return bodies.find((body) => tagOf(body) === tag);
+}
 function annotationName(bodies, language) {
   const named = (text2, lang) => text2 ? { text: text2, ...lang ? { lang } : {} } : {};
   const texts = bodies.filter((body2) => {
@@ -8,18 +14,14 @@ function annotationName(bodies, language) {
     return (_a = body2.value) == null ? void 0 : _a.trim();
   });
   if (!texts.length) {
-    const image = bodies.find((body2) => body2.image && body2.label);
+    const image = bodies.find(
+      (body2) => (body2.image || body2.place) && body2.label
+    );
     if (!image) return {};
     const { text: text2, lang } = localize(image.label, language);
     return named(toPlainText(text2).trim(), lang);
   }
-  const tagOf = (body2) => body2.language && body2.language !== "none" ? body2.language : "none";
-  const first = {};
-  texts.forEach((body2, index) => {
-    var _a;
-    first[_a = tagOf(body2)] ?? (first[_a] = [String(index)]);
-  });
-  const body = texts[Number(localize(first, language).text) || 0];
+  const body = bodyInLanguage(texts, language);
   const value = body.value;
   const kind = readAs(body.format, value);
   const text = kind === "markdown" ? markdownToPlainText(value) : kind === "html" ? toPlainText(value) : value;
@@ -27,5 +29,6 @@ function annotationName(bodies, language) {
   return named(text.trim(), tag === "none" ? void 0 : tag);
 }
 export {
-  annotationName
+  annotationName,
+  bodyInLanguage
 };