@gramps-connect/story 0.1.3 → 0.3.0

package/dist/player.js

@@ -459,7 +459,8 @@ var ENGLISH = {
   historical: "Historical",
   historicalMapYear: (year) => `Historical map, ${year}`,
   noDateStandardMap: "No date here \u2014 standard map",
-  historicalYear: "Historical map year"
+  historicalYear: "Historical map year",
+  photoOf: (n, total) => `Photo ${n} of ${total}`
 };
 var TABLE = {
   en: ENGLISH,
@@ -473,7 +474,8 @@ var TABLE = {
     historical: "Historisch",
     historicalMapYear: (year) => `Historische Karte, ${year}`,
     noDateStandardMap: "Kein Datum hier \u2014 Standardkarte",
-    historicalYear: "Jahr der historischen Karte"
+    historicalYear: "Jahr der historischen Karte",
+    photoOf: (n, total) => `Foto ${n} von ${total}`
   },
   es: {
     previous: "Anterior",
@@ -485,7 +487,8 @@ var TABLE = {
     historical: "Hist\xF3rico",
     historicalMapYear: (year) => `Mapa hist\xF3rico, ${year}`,
     noDateStandardMap: "Sin fecha aqu\xED \u2014 mapa est\xE1ndar",
-    historicalYear: "A\xF1o del mapa hist\xF3rico"
+    historicalYear: "A\xF1o del mapa hist\xF3rico",
+    photoOf: (n, total) => `Foto ${n} de ${total}`
   },
   fr: {
     previous: "Pr\xE9c\xE9dent",
@@ -497,7 +500,8 @@ var TABLE = {
     historical: "Historique",
     historicalMapYear: (year) => `Carte historique, ${year}`,
     noDateStandardMap: "Pas de date ici \u2014 carte standard",
-    historicalYear: "Ann\xE9e de la carte historique"
+    historicalYear: "Ann\xE9e de la carte historique",
+    photoOf: (n, total) => `Photo ${n} sur ${total}`
   },
   nl: {
     previous: "Vorige",
@@ -509,7 +513,8 @@ var TABLE = {
     historical: "Historisch",
     historicalMapYear: (year) => `Historische kaart, ${year}`,
     noDateStandardMap: "Geen datum hier \u2014 standaardkaart",
-    historicalYear: "Jaar van de historische kaart"
+    historicalYear: "Jaar van de historische kaart",
+    photoOf: (n, total) => `Foto ${n} van ${total}`
   }
 };
 function stringsFor(...languages) {
@@ -676,8 +681,45 @@ function SlidePhoto({ mediaKey, item, caption, credit, resolveMedia, colors }) {
     (caption || credit) && /* @__PURE__ */ jsx4("figcaption", { style: { fontSize: 13, color: colors.muted }, children: [caption, credit && `\xA9 ${credit}`].filter(Boolean).join(" \xB7 ") })
   ] });
 }
-function SlideContent({ slide, story, resolveMedia, colors }) {
-  const photo = slide?.media?.find((m) => Object.prototype.hasOwnProperty.call(story.media, m.ref));
+function PhotoThumb({ mediaKey, item, label, selected, onSelect, resolveMedia, colors }) {
+  const [src, setSrc] = useState3(null);
+  useEffect3(() => {
+    let cancelled = false;
+    resolveMedia(mediaKey, item).then((url) => {
+      if (!cancelled) setSrc(url);
+    }, () => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [mediaKey, item, resolveMedia]);
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      title: label,
+      "aria-pressed": selected,
+      onClick: onSelect,
+      style: {
+        width: 44,
+        height: 44,
+        padding: 0,
+        borderRadius: 4,
+        overflow: "hidden",
+        cursor: "pointer",
+        border: `2px solid ${selected ? colors.mark : "transparent"}`,
+        background: colors.border,
+        opacity: selected ? 1 : 0.7
+      },
+      children: src && /* @__PURE__ */ jsx4("img", { src, alt: "", style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } })
+    }
+  );
+}
+function SlideContent({ slide, story, resolveMedia, colors, strings }) {
+  const photos = (slide?.media ?? []).filter((m) => Object.prototype.hasOwnProperty.call(story.media, m.ref));
+  const [shown, setShown] = useState3(0);
+  const photo = photos[Math.min(shown, photos.length - 1)];
   const eyebrow = [slide?.date?.text, slide?.place?.name].filter(Boolean).join(" \xB7 ");
   return /* @__PURE__ */ jsxs3(Fragment, { children: [
     photo && /* @__PURE__ */ jsx4(
@@ -691,6 +733,19 @@ function SlideContent({ slide, story, resolveMedia, colors }) {
         colors
       }
     ),
+    photos.length > 1 && /* @__PURE__ */ jsx4("div", { style: { display: "flex", gap: 6, flexWrap: "wrap", justifyContent: "center" }, children: photos.map((m, i) => /* @__PURE__ */ jsx4(
+      PhotoThumb,
+      {
+        mediaKey: m.ref,
+        item: story.media[m.ref],
+        label: strings.photoOf(i + 1, photos.length),
+        selected: photo === m,
+        onSelect: () => setShown(i),
+        resolveMedia,
+        colors
+      },
+      `${i}:${m.ref}`
+    )) }),
     /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: 4, alignItems: "center", maxWidth: 640, textAlign: "center" }, children: [
       eyebrow && /* @__PURE__ */ jsx4("div", { dir: "auto", style: { fontSize: 14, color: colors.muted }, children: eyebrow }),
       slide?.title && /* @__PURE__ */ jsx4("div", { dir: "auto", style: { fontSize: 20, fontWeight: 700, color: colors.text }, children: slide.title }),
@@ -757,6 +812,7 @@ function StoryPlayer({
   onSlideChange,
   renderMapModeControl,
   brand,
+  actions,
   initialSlide = 0
 }) {
   const colors = useMemo(() => ({ ...defaultColors(dark), ...colorOverrides }), [dark, colorOverrides]);
@@ -867,7 +923,7 @@ function StoryPlayer({
     const item = Object.prototype.hasOwnProperty.call(story.media, key) ? story.media[key] : void 0;
     return item ? resolveMedia(key, item) : Promise.resolve(null);
   }, [story, resolveMedia]);
-  const content = /* @__PURE__ */ jsx4(SlideContent, { slide, story, resolveMedia, colors });
+  const content = /* @__PURE__ */ jsx4(SlideContent, { slide, story, resolveMedia, colors, strings }, slide?.id ?? index);
   const timeline = showTimeline && /* @__PURE__ */ jsx4(TimelineStrip, { points: datedSlides, currentIndex: index, onSelect: setIndex, colors });
   return /* @__PURE__ */ jsxs3(
     "div",
@@ -938,6 +994,22 @@ function StoryPlayer({
             children: /* @__PURE__ */ jsx4("div", { style: { pointerEvents: "auto" }, children: renderMapModeControl ? renderMapModeControl(modeControlProps) : /* @__PURE__ */ jsx4(MapModeControl, { ...modeControlProps, strings, colors }) })
           }
         ),
+        actions && /* @__PURE__ */ jsx4(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              right: onClose ? 60 : 12,
+              height: BAR_HEIGHT,
+              zIndex: 3,
+              display: "flex",
+              alignItems: "center",
+              gap: 8
+            },
+            children: actions
+          }
+        ),
         onClose && /* @__PURE__ */ jsx4(
           RoundButton,
           {