@gramps-connect/story 0.2.0 → 0.4.0

package/src/editor/StoryEditor.tsx

@@ -6,21 +6,26 @@
 //
 // Needs Mantine: wrap it in a MantineProvider and load @mantine/core's
 // stylesheet, as with any Mantine component.
-import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import {
   ActionIcon, Badge, Box, Button, Divider, Group, Modal, Popover, Select, Stack, Text, TextInput, Tooltip, UnstyledButton,
 } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
-import type { MediaItem, Slide, StoryDoc } from "../types";
+import type { MediaItem, Slide, SlideMedia, StoryDoc } from "../types";
+import { optimizeImage } from "../image";
 import { validate, type StoryIssue } from "../validate";
+import { storyPlaces } from "../player/geo";
 import { StoryPlayer } from "../player/StoryPlayer";
 import type { PlayerStrings } from "../player/strings";
 import { suggestEdtf, type DateTextParser } from "./dates";
 import { DateField } from "./DateField";
 import {
-  addSlide, deleteSlide, duplicateSlide, moveSlide, record, redo, startHistory, undo, updateSlide, updateStory,
-  type History,
+  addImage, addSlide, deleteSlide, findMedia, duplicateSlide, moveSlide, record, redo, setSlidePhotos, startHistory, storyPlaceChoices,
+  undo, updateMedia, updateSlide, updateStory, type History, type NewImage,
 } from "./model";
+import { PhotosField } from "./PhotosField";
+import { PlaceField, type PlaceUpdate } from "./PlaceField";
+import { WIKIDATA_PLACE_SEARCH, type PlaceSearch } from "./placeSearch";
 import { SlideList } from "./SlideList";
 import { StoryTextField } from "./StoryTextField";
 import { EDITOR_ENGLISH, type EditorStrings } from "./strings";
@@ -30,15 +35,19 @@ const BAR_HEIGHT = 56;
 const STORY = -1;
 
 export interface StoryEditorProps {
-  /** The story to start from. Changing it later has no effect: remount
-   * (a new `key`) to edit another. */
+  /** The story to start from, and its files (paths as in media `src`).
+   * Changing these later has no effect: remount (a new `key`) to edit
+   * another story. */
   initialStory: StoryDoc;
-  /** The story's files, for checking that every media file is there. */
-  files?: { has(path: string): boolean };
-  /** As for StoryPlayer. */
-  resolveMedia: (key: string, item: MediaItem) => Promise<string | null>;
-  /** Called with the document after every change, undo and redo included. */
-  onChange?: (doc: StoryDoc) => void;
+  initialFiles?: Map<string, Uint8Array>;
+  /** Called with the document and its files after every change, undo and
+   * redo included. The files only grow while editing (an undone photo's
+   * file stays); pruneMedia leaves out what nothing uses when saving. */
+  onChange?: (doc: StoryDoc, files: Map<string, Uint8Array>) => void;
+  /** Turns a chosen image file into what's stored. By default
+   * optimizeImage: 1600px WebP (JPEG where the browser can't), with the
+   * original's metadata left behind. */
+  prepareImage?: (file: Blob) => Promise<NewImage>;
   /** The host's own buttons (Open, Save, ...), at the right of the top bar. */
   toolbar?: ReactNode;
   /** Shown first in the top bar, e.g. ViewerBrand. */
@@ -48,6 +57,9 @@ export interface StoryEditorProps {
   playerStrings?: Partial<PlayerStrings>;
   /** Date text -> EDTF. By default gramps-date, in the story's language. */
   parseDateText?: DateTextParser;
+  /** Finding a place by name. By default Wikidata, and only when the
+   * person asks; null leaves the search out. */
+  placeSearch?: PlaceSearch | null;
 }
 
 /** The slide an issue's JSON Pointer is about, or STORY. */
@@ -56,7 +68,15 @@ function issueSlide(issue: StoryIssue): number {
   return match ? Number(match[1]) : STORY;
 }
 
-function Thumb({ doc, slide, resolveMedia }: { doc: StoryDoc; slide: Slide; resolveMedia: StoryEditorProps["resolveMedia"] }) {
+type Resolve = (key: string, item: MediaItem) => Promise<string | null>;
+
+/** The default prepareImage. */
+export async function prepareImage(file: Blob): Promise<NewImage> {
+  const image = await optimizeImage(file);
+  return { data: new Uint8Array(await image.blob.arrayBuffer()), mime: image.mime, ext: image.ext, width: image.width, height: image.height };
+}
+
+function Thumb({ doc, slide, resolveMedia }: { doc: StoryDoc; slide: Slide; resolveMedia: Resolve }) {
   const ref = slide.media?.[0]?.ref;
   const item = ref && Object.prototype.hasOwnProperty.call(doc.media, ref) ? doc.media[ref] : undefined;
   const [url, setUrl] = useState<string | null>(null);
@@ -77,8 +97,8 @@ function Thumb({ doc, slide, resolveMedia }: { doc: StoryDoc; slide: Slide; reso
 }
 
 export function StoryEditor({
-  initialStory, files, resolveMedia, onChange, toolbar, brand, dark = false, strings: stringOverrides, playerStrings,
-  parseDateText = suggestEdtf,
+  initialStory, initialFiles, onChange, prepareImage: prepare = prepareImage, toolbar, brand, dark = false,
+  strings: stringOverrides, playerStrings, parseDateText = suggestEdtf, placeSearch = WIKIDATA_PLACE_SEARCH,
 }: StoryEditorProps) {
   const strings = useMemo(() => ({ ...EDITOR_ENGLISH, ...stringOverrides }), [stringOverrides]);
   const [history, setHistory] = useState<History>(() => startHistory(initialStory));
@@ -87,12 +107,39 @@ export function StoryEditor({
   const [problemsOpen, setProblemsOpen] = useState(false);
   const wide = useMediaQuery("(min-width: 1000px)", true);
   const doc = history.present;
+  const [files, setFiles] = useState(() => new Map(initialFiles ?? []));
+  const [busy, setBusy] = useState(false);
+  const [photoError, setPhotoError] = useState<string | null>(null);
+  // The latest of each, for work that finishes after a render (photos).
+  const docRef = useRef(doc);
+  docRef.current = doc;
+  const filesRef = useRef(files);
+  filesRef.current = files;
+
+  // A blob: URL per stored file, made once and released with the editor.
+  const urls = useRef(new Map<string, string>());
+  useEffect(() => () => {
+    for (const url of urls.current.values()) URL.revokeObjectURL(url);
+  }, []);
+  const resolveMedia = useCallback<Resolve>(async (_key, item) => {
+    const cached = urls.current.get(item.src);
+    if (cached) return cached;
+    const data = filesRef.current.get(item.src);
+    if (!data) return null;
+    const url = URL.createObjectURL(new Blob([data as Uint8Array<ArrayBuffer>], { type: item.mime }));
+    urls.current.set(item.src, url);
+    return url;
+  }, []);
+  const urlFor = useCallback((key: string) => {
+    const item = Object.prototype.hasOwnProperty.call(docRef.current.media, key) ? docRef.current.media[key] : undefined;
+    return item ? resolveMedia(key, item) : Promise.resolve(null);
+  }, [resolveMedia]);
 
   // Every change goes through here (and so into history and to the host).
   const apply = useCallback((next: StoryDoc, key?: string) => {
     setHistory((h) => record(h, next, key));
   }, []);
-  useEffect(() => { onChange?.(doc); }, [doc, onChange]);
+  useEffect(() => { onChange?.(doc, files); }, [doc, files, onChange]);
 
   const index = selected === STORY ? STORY : Math.min(selected, doc.slides.length - 1);
   const slide = index === STORY ? undefined : doc.slides[index];
@@ -100,8 +147,77 @@ export function StoryEditor({
     if (index !== STORY) apply(updateSlide(history.present, index, patch), `${slide!.id}:${key}`);
   };
 
+  // A place change applies to the slide as it is by then: a name typed and
+  // a place picked in the same moment both land.
+  const setPlace = (slideId: string, update: PlaceUpdate, key: string) => {
+    setHistory((h) => {
+      const at = h.present.slides.findIndex((s) => s.id === slideId);
+      if (at < 0) return h;
+      const before = h.present.slides[at].place;
+      const after = update(before);
+      return after === before ? h : record(h, updateSlide(h.present, at, { place: after }), `${slideId}:${key}`);
+    });
+  };
+  const placeChoices = useMemo(() => storyPlaceChoices(doc, index), [doc, index]);
+  const around = useMemo(() => storyPlaces(doc.slides.map((s) => s.place))?.bounds ?? null, [doc.slides]);
+
   const issues = useMemo(() => validate(doc, files).errors, [doc, files]);
 
+  /** Prepares image files and puts them on a slide: added at the end, or
+   * in place of photo `replace` (keeping its caption and credit). */
+  const addPhotos = useCallback(async (chosen: File[], slideId: string, replace?: number) => {
+    setBusy(true);
+    setPhotoError(null);
+    // A file already in the story (chosen again) is used as it is;
+    // anything else is prepared first.
+    const chosenImages: (NewImage | string)[] = [];
+    for (const file of chosen) {
+      try {
+        const known = findMedia(docRef.current, filesRef.current, new Uint8Array(await file.arrayBuffer()));
+        chosenImages.push(known ?? await prepare(file));
+      } catch {
+        setPhotoError(strings.photoFailed(file.name || "the image"));
+      }
+    }
+    setBusy(false);
+    if (!chosenImages.length) return;
+    let next = docRef.current;
+    let nextFiles = filesRef.current;
+    const keys: string[] = [];
+    for (const image of chosenImages) {
+      if (typeof image === "string") {
+        keys.push(image);
+        continue;
+      }
+      const added = addImage(next, nextFiles, image);
+      next = added.doc;
+      nextFiles = added.files;
+      keys.push(added.key);
+    }
+    const at = next.slides.findIndex((s) => s.id === slideId);
+    if (at < 0) return;
+    const photos: SlideMedia[] = [...(next.slides[at].media ?? [])];
+    if (replace !== undefined && photos[replace]) photos[replace] = { ...photos[replace], ref: keys[0] };
+    else photos.push(...keys.map((ref) => ({ ref })));
+    setFiles(nextFiles);
+    apply(setSlidePhotos(next, at, photos));
+  }, [apply, prepare, strings]);
+
+  // Pasting an image (outside a text field) adds it to the slide.
+  const slideId = slide?.id;
+  useEffect(() => {
+    if (!slideId) return;
+    const onPaste = (e: ClipboardEvent) => {
+      if ((e.target as HTMLElement | null)?.closest("input, textarea, [contenteditable=true]")) return;
+      const images = [...(e.clipboardData?.files ?? [])].filter((f) => f.type.startsWith("image/"));
+      if (!images.length) return;
+      e.preventDefault();
+      void addPhotos(images, slideId);
+    };
+    window.addEventListener("paste", onPaste);
+    return () => window.removeEventListener("paste", onPaste);
+  }, [slideId, addPhotos]);
+
   // Undo/redo from the keyboard, except where a text field has its own.
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
@@ -181,30 +297,17 @@ export function StoryEditor({
         label={strings.text} value={slide.text ?? ""} boldLabel={strings.bold} italicLabel={strings.italic} minRows={5}
         onChange={(text) => setSlide({ text: text || undefined }, "text")}
       />
-      {slide.place && (
-        <Stack gap={2}>
-          <Text size="sm" fw={500}>{strings.place}</Text>
-          <Text size="sm">
-            {slide.place.name ?? ""}
-            {slide.place.lat !== undefined && slide.place.lon !== undefined && (
-              <Text span c="dimmed" size="sm"> {slide.place.lat.toFixed(4)}, {slide.place.lon.toFixed(4)}</Text>
-            )}
-          </Text>
-        </Stack>
-      )}
-      {slide.media && slide.media.length > 0 && (
-        <Stack gap={4}>
-          <Text size="sm" fw={500}>{strings.photos}</Text>
-          <Group gap="sm">
-            {slide.media.map((m, i) => (
-              <Group key={i} gap="xs" wrap="nowrap">
-                <Thumb doc={doc} slide={{ id: "", media: [m] }} resolveMedia={resolveMedia} />
-                <Text size="xs" c="dimmed" maw={200} lineClamp={2}>{m.caption ?? ""}</Text>
-              </Group>
-            ))}
-          </Group>
-        </Stack>
-      )}
+      <PlaceField
+        place={slide.place} choices={placeChoices} around={around} language={doc.language} search={placeSearch} dark={dark} strings={strings}
+        onChange={(update, key) => setPlace(slide.id, update, key)}
+      />
+      <PhotosField
+        photos={slide.media ?? []} media={doc.media} urlFor={urlFor} strings={strings} busy={busy}
+        onChange={(photos, key) => apply(setSlidePhotos(doc, index, photos), `${slide.id}:${key}`)}
+        onFiles={(chosen, replace) => void addPhotos(chosen, slide.id, replace)}
+        onDescription={(key, alt) => apply(updateMedia(doc, key, { alt: alt || undefined }), `media:${key}:alt`)}
+      />
+      {photoError && <Text size="xs" c="red" role="alert">{photoError}</Text>}
     </Stack>
   );
 

package/src/editor/index.ts

@@ -1,10 +1,15 @@
-export { StoryEditor, type StoryEditorProps } from "./StoryEditor";
+export { prepareImage, StoryEditor, type StoryEditorProps } from "./StoryEditor";
+export { PhotosField, type PhotosFieldProps } from "./PhotosField";
+export { PlaceField, type PlaceFieldProps, type PlaceUpdate } from "./PlaceField";
+export { searchWikidataPlaces, wikidataPoint, WIKIDATA_PLACE_SEARCH, type PlaceSearch, type PlaceSearchResult } from "./placeSearch";
 export { StoryTextField, type StoryTextFieldProps } from "./StoryTextField";
 export { SlideList, type SlideListProps } from "./SlideList";
 export { DateField, type DateFieldProps } from "./DateField";
 export { suggestEdtf, type DateTextParser } from "./dates";
 export { EDITOR_ENGLISH, type EditorStrings } from "./strings";
 export {
-  addSlide, blankStory, COALESCE_MS, deleteSlide, duplicateSlide, moveSlide, nextSlideId, pruneMedia, record, redo,
-  slideDate, startHistory, storyFileName, undo, updateSlide, updateStory, usedMedia, type History,
+  addImage, addSlide, blankStory, COALESCE_MS, deleteSlide, duplicateSlide, findMedia, formatLatLon, moveSlide, nextSlideId, parseLatLon,
+  patchPlace, pruneMedia, record, redo, roundDegrees, setSlidePhotos, slideDate, startHistory, storyFileName, storyPlaceChoices, undo,
+  updateMedia, updateSlide, updateStory, usedMedia,
+  type History, type NewImage,
 } from "./model";

package/src/editor/model.ts

@@ -4,7 +4,7 @@
 // know (a newer minor version's, an extension's) ride along untouched:
 // opening and saving a story must never lose anything.
 import { FORMAT_ID, FORMAT_VERSION } from "../version";
-import type { Slide, StoryDate, StoryDoc } from "../types";
+import type { MediaItem, Place, Slide, SlideMedia, StoryDate, StoryDoc } from "../types";
 
 /** A story with one empty slide: the smallest valid one. */
 export function blankStory(title: string, language?: string): StoryDoc {
@@ -100,6 +100,105 @@ export function slideDate(previous: StoryDate | undefined, text: string, edtf: s
   return next;
 }
 
+/** A place with some fields set or (undefined) removed; one left with
+ * nothing in it is no place at all. Its shape and overlays, and any field
+ * this version doesn't know, stay as they were. */
+export function patchPlace(place: Place | undefined, patch: Partial<Place>): Place | undefined {
+  if (place && Object.entries(patch).every(([key, value]) => place[key as keyof Place] === value)) return place;
+  const next = patched(place ?? {}, patch);
+  return Object.keys(next).length ? next : undefined;
+}
+
+/** Degrees to 5 decimals: about a metre, and no float noise. */
+export const roundDegrees = (value: number) => Math.round(value * 1e5) / 1e5;
+
+/** "47.3769, 8.5417" (or with a space or semicolon between) -> a point;
+ * null when that's not two numbers in range. */
+export function parseLatLon(text: string): { lat: number; lon: number } | null {
+  const parts = text.trim().split(/\s*[,;\s]\s*/);
+  if (parts.length !== 2 || parts.some((p) => !/^[-+]?(\d+\.?\d*|\.\d+)$/.test(p))) return null;
+  const [lat, lon] = parts.map(Number);
+  if (Math.abs(lat) > 90 || Math.abs(lon) > 180) return null;
+  return { lat, lon };
+}
+
+export function formatLatLon(lat: number, lon: number): string {
+  return `${roundDegrees(lat)}, ${roundDegrees(lon)}`;
+}
+
+/** The places of the story's other slides, one per name (the first slide
+ * to use it), for giving another slide the very same place. */
+export function storyPlaceChoices(doc: StoryDoc, exceptIndex?: number): Place[] {
+  const byName = new Map<string, Place>();
+  doc.slides.forEach((slide, i) => {
+    const name = slide.place?.name?.trim();
+    if (i !== exceptIndex && name && !byName.has(name)) byName.set(name, slide.place!);
+  });
+  return [...byName.values()];
+}
+
+/** A prepared image to add to a story (see optimizeImage). */
+export interface NewImage {
+  data: Uint8Array;
+  mime: string;
+  /** File extension, without the dot. */
+  ext: string;
+  width?: number;
+  height?: number;
+}
+
+function sameBytes(a: Uint8Array | undefined, b: Uint8Array): boolean {
+  if (!a || a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+  return true;
+}
+
+/** The media key whose file is exactly these bytes, if any: a photo
+ * that's already in the story, chosen again. */
+export function findMedia(doc: StoryDoc, files: Map<string, Uint8Array>, data: Uint8Array): string | undefined {
+  for (const [key, item] of Object.entries(doc.media)) {
+    if (sameBytes(files.get(item.src), data)) return key;
+  }
+  return undefined;
+}
+
+/** Adds an image to the story's media (not to any slide), or finds the
+ * identical one already there, so the same photo is stored once. Returns
+ * its media key. */
+export function addImage(
+  doc: StoryDoc, files: Map<string, Uint8Array>, image: NewImage, stem = "photo",
+): { doc: StoryDoc; files: Map<string, Uint8Array>; key: string } {
+  const existing = findMedia(doc, files, image.data);
+  if (existing) return { doc, files, key: existing };
+  let n = 1;
+  const taken = (key: string) => Object.prototype.hasOwnProperty.call(doc.media, key) || files.has(`media/${key}.${image.ext}`);
+  while (taken(`${stem}-${n}`)) n += 1;
+  const key = `${stem}-${n}`;
+  const src = `media/${key}.${image.ext}`;
+  const item: MediaItem = {
+    src, mime: image.mime,
+    ...(image.width ? { width: image.width } : {}),
+    ...(image.height ? { height: image.height } : {}),
+  };
+  return {
+    doc: { ...doc, media: { ...doc.media, [key]: item } },
+    files: new Map(files).set(src, image.data),
+    key,
+  };
+}
+
+/** A slide's photo list; an empty one removes the field. */
+export function setSlidePhotos(doc: StoryDoc, index: number, media: SlideMedia[]): StoryDoc {
+  return updateSlide(doc, index, { media: media.length ? media : undefined });
+}
+
+/** Changes a media item itself (its description, shared by every slide
+ * that shows it). */
+export function updateMedia(doc: StoryDoc, key: string, patch: Partial<MediaItem>): StoryDoc {
+  if (!Object.prototype.hasOwnProperty.call(doc.media, key)) return doc;
+  return { ...doc, media: { ...doc.media, [key]: patched(doc.media[key], patch) } };
+}
+
 /** Every media key a slide or overlay refers to. */
 export function usedMedia(doc: StoryDoc): Set<string> {
   const used = new Set<string>();

package/src/editor/placeSearch.ts

@@ -0,0 +1,61 @@
+// Finding a place by name, for the place field's opt-in search: Wikidata's
+// own search, then the chosen item's coordinates (P625). Both endpoints
+// allow any origin and need no key. This is the only thing the editor
+// sends anywhere, and only when asked to: it sends the name typed.
+// (Gramps Connect's place lookup walks the same API further, up the
+// "located in" chain, to build a place hierarchy; a story place is just a
+// name and a point.)
+
+const WIKIDATA_API = "https://www.wikidata.org/w/api.php";
+const WIKIDATA_ENTITY_DATA = "https://www.wikidata.org/wiki/Special:EntityData";
+
+export interface PlaceSearchResult {
+  /** The Wikidata item, e.g. "Q72". */
+  id: string;
+  label: string;
+  /** Usually names the region and country, which tells same-named places
+   * apart. */
+  description?: string;
+}
+
+export interface PlaceSearch {
+  search: (term: string, language: string | undefined, signal?: AbortSignal) => Promise<PlaceSearchResult[]>;
+  /** The result's position, or null when it has none. */
+  point: (result: PlaceSearchResult, signal?: AbortSignal) => Promise<{ lat: number; lon: number } | null>;
+}
+
+/** "fr_CA" or "fr-CA" -> "fr-ca", Wikidata's form. */
+function wikidataLanguage(language: string | undefined): string {
+  return (language ?? "").trim().toLowerCase().replace(/_/g, "-") || "en";
+}
+
+export async function searchWikidataPlaces(term: string, language?: string, signal?: AbortSignal): Promise<PlaceSearchResult[]> {
+  const code = wikidataLanguage(language);
+  const params = new URLSearchParams({
+    action: "wbsearchentities", search: term, language: code, uselang: code, format: "json", limit: "7",
+    origin: "*", // what makes an anonymous api.php GET answer cross-origin
+  });
+  const res = await fetch(`${WIKIDATA_API}?${params}`, { signal });
+  if (!res.ok) throw new Error(`Wikidata search failed (${res.status})`);
+  const data = (await res.json()) as { search?: { id: string; label?: string; description?: string }[] };
+  return (data.search ?? []).map((hit) => ({
+    id: hit.id,
+    label: hit.label ?? hit.id,
+    ...(hit.description ? { description: hit.description } : {}),
+  }));
+}
+
+export async function wikidataPoint(result: PlaceSearchResult, signal?: AbortSignal): Promise<{ lat: number; lon: number } | null> {
+  const res = await fetch(`${WIKIDATA_ENTITY_DATA}/${encodeURIComponent(result.id)}.json`, { signal });
+  if (!res.ok) throw new Error(`Wikidata fetch failed for ${result.id} (${res.status})`);
+  const data = (await res.json()) as {
+    entities?: Record<string, { claims?: Record<string, { mainsnak?: { datavalue?: { value?: unknown } } }[]> }>;
+  };
+  // A redirected item comes back under its new id: take whichever is there.
+  const entity = data.entities?.[result.id] ?? Object.values(data.entities ?? {})[0];
+  const value = entity?.claims?.P625?.[0]?.mainsnak?.datavalue?.value as { latitude?: number; longitude?: number } | undefined;
+  if (typeof value?.latitude !== "number" || typeof value.longitude !== "number") return null;
+  return { lat: value.latitude, lon: value.longitude };
+}
+
+export const WIKIDATA_PLACE_SEARCH: PlaceSearch = { search: searchWikidataPlaces, point: wikidataPoint };

package/src/editor/strings.ts

@@ -32,7 +32,34 @@ export interface EditorStrings {
   matchDateAsWritten: string;
   noPreciseDate: string;
   place: string;
+  placeName: string;
+  removePlace: string;
+  findPlace: string;
+  findPlaceHint: string;
+  findPlaceNone: string;
+  findPlaceFailed: string;
+  findPlaceNoPoint: (name: string) => string;
+  coordinates: string;
+  coordinatesHint: string;
+  coordinatesInvalid: string;
+  placeMap: string;
+  placeMapHint: string;
+  placeShape: string;
+  placeOverlays: (count: number) => string;
+  placeKeeps: (what: string) => string;
   photos: string;
+  photosHint: string;
+  addPhoto: string;
+  replacePhoto: string;
+  movePhotoUp: string;
+  movePhotoDown: string;
+  removePhoto: string;
+  caption: string;
+  credit: string;
+  creditHint: string;
+  description: string;
+  descriptionHint: string;
+  photoFailed: (name: string) => string;
   undo: string;
   redo: string;
   present: string;
@@ -72,7 +99,34 @@ export const EDITOR_ENGLISH: EditorStrings = {
   matchDateAsWritten: "Work it out from the date",
   noPreciseDate: "None: this slide stays off the timeline.",
   place: "Place",
+  placeName: "Name",
+  removePlace: "Remove place",
+  findPlace: "Find on Wikidata",
+  findPlaceHint: "Looks the name up on Wikidata, to put the pin there. The name is all that's sent, and only when you ask.",
+  findPlaceNone: "Wikidata has no place by that name.",
+  findPlaceFailed: "Couldn't reach Wikidata.",
+  findPlaceNoPoint: (name) => `Wikidata has no map position for ${name}.`,
+  coordinates: "Latitude, longitude",
+  coordinatesHint: "e.g. 47.3769, 8.5417",
+  coordinatesInvalid: "Two numbers: latitude (-90 to 90), then longitude (-180 to 180).",
+  placeMap: "Map: click to put the pin",
+  placeMapHint: "Click the map to put the pin there, or drag the pin.",
+  placeShape: "a shape",
+  placeOverlays: (count) => (count === 1 ? "a map overlay" : `${count} map overlays`),
+  placeKeeps: (what) => `This place also has ${what}, kept as they are.`,
   photos: "Photos",
+  photosHint: "Add, drop or paste a photo. It's resized for the screen, and hidden details like camera and location are left out.",
+  addPhoto: "Add photo",
+  replacePhoto: "Replace",
+  movePhotoUp: "Move photo up",
+  movePhotoDown: "Move photo down",
+  removePhoto: "Remove",
+  caption: "Caption",
+  credit: "Credit",
+  creditHint: "Who took it, or where it's from",
+  description: "Description",
+  descriptionHint: "What the photo shows, for anyone who can't see it.",
+  photoFailed: (name) => `Couldn't use ${name}: this browser can't read it as an image.`,
   undo: "Undo",
   redo: "Redo",
   present: "Present",

package/src/player/StoryPlayer.tsx

@@ -114,15 +114,49 @@ function SlidePhoto({ mediaKey, item, caption, credit, resolveMedia, colors }: {
   );
 }
 
-function SlideContent({ slide, story, resolveMedia, colors }: {
+/** A small button showing one of a slide's photos. */
+function PhotoThumb({ mediaKey, item, label, selected, onSelect, resolveMedia, colors }: {
+  mediaKey: string;
+  item: MediaItem;
+  label: string;
+  selected: boolean;
+  onSelect: () => void;
+  resolveMedia: StoryPlayerProps["resolveMedia"];
+  colors: PlayerColors;
+}) {
+  const [src, setSrc] = useState<string | null>(null);
+  useEffect(() => {
+    let cancelled = false;
+    resolveMedia(mediaKey, item).then((url) => { if (!cancelled) setSrc(url); }, () => {});
+    return () => { cancelled = true; };
+  }, [mediaKey, item, resolveMedia]);
+  return (
+    <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,
+      }}
+    >
+      {src && <img src={src} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />}
+    </button>
+  );
+}
+
+function SlideContent({ slide, story, resolveMedia, colors, strings }: {
   slide: Slide | undefined;
   story: StoryDoc;
   resolveMedia: StoryPlayerProps["resolveMedia"];
   colors: PlayerColors;
+  strings: PlayerStrings;
 }) {
-  // The format allows several photos per slide; the player shows the
-  // first one that exists.
-  const photo = slide?.media?.find((m) => Object.prototype.hasOwnProperty.call(story.media, m.ref));
+  // Every photo whose media exists; with several, thumbnails pick which
+  // one is shown. Keyed by slide in the caller, so each slide starts on
+  // its first photo.
+  const photos = (slide?.media ?? []).filter((m) => Object.prototype.hasOwnProperty.call(story.media, m.ref));
+  const [shown, setShown] = useState(0);
+  const photo = photos[Math.min(shown, photos.length - 1)];
   const eyebrow = [slide?.date?.text, slide?.place?.name].filter(Boolean).join(" · ");
   return (
     <>
@@ -136,6 +170,22 @@ function SlideContent({ slide, story, resolveMedia, colors }: {
           colors={colors}
         />
       )}
+      {photos.length > 1 && (
+        <div style={{ display: "flex", gap: 6, flexWrap: "wrap", justifyContent: "center" }}>
+          {photos.map((m, i) => (
+            <PhotoThumb
+              key={`${i}:${m.ref}`}
+              mediaKey={m.ref}
+              item={story.media[m.ref]}
+              label={strings.photoOf(i + 1, photos.length)}
+              selected={photo === m}
+              onSelect={() => setShown(i)}
+              resolveMedia={resolveMedia}
+              colors={colors}
+            />
+          ))}
+        </div>
+      )}
       <div style={{ display: "flex", flexDirection: "column", gap: 4, alignItems: "center", maxWidth: 640, textAlign: "center" }}>
         {eyebrow && <div dir="auto" style={{ fontSize: 14, color: colors.muted }}>{eyebrow}</div>}
         {slide?.title && <div dir="auto" style={{ fontSize: 20, fontWeight: 700, color: colors.text }}>{slide.title}</div>}
@@ -326,7 +376,9 @@ export function StoryPlayer({
     return item ? resolveMedia(key, item) : Promise.resolve(null);
   }, [story, resolveMedia]);
 
-  const content = <SlideContent slide={slide} story={story} resolveMedia={resolveMedia} colors={colors} />;
+  const content = (
+    <SlideContent key={slide?.id ?? index} slide={slide} story={story} resolveMedia={resolveMedia} colors={colors} strings={strings} />
+  );
   const timeline = showTimeline && (
     <TimelineStrip points={datedSlides} currentIndex={index} onSelect={setIndex} colors={colors} />
   );

package/src/player/strings.ts

@@ -15,6 +15,8 @@ export interface PlayerStrings {
   historicalMapYear: (year: number) => string;
   noDateStandardMap: string;
   historicalYear: string;
+  /** A photo's thumbnail button, on a slide with several. */
+  photoOf: (n: number, total: number) => string;
 }
 
 export const ENGLISH: PlayerStrings = {
@@ -28,6 +30,7 @@ export const ENGLISH: PlayerStrings = {
   historicalMapYear: (year) => `Historical map, ${year}`,
   noDateStandardMap: "No date here — standard map",
   historicalYear: "Historical map year",
+  photoOf: (n, total) => `Photo ${n} of ${total}`,
 };
 
 const TABLE: Record<string, PlayerStrings> = {
@@ -43,6 +46,7 @@ const TABLE: Record<string, PlayerStrings> = {
     historicalMapYear: (year) => `Historische Karte, ${year}`,
     noDateStandardMap: "Kein Datum hier — Standardkarte",
     historicalYear: "Jahr der historischen Karte",
+    photoOf: (n, total) => `Foto ${n} von ${total}`,
   },
   es: {
     previous: "Anterior",
@@ -55,6 +59,7 @@ const TABLE: Record<string, PlayerStrings> = {
     historicalMapYear: (year) => `Mapa histórico, ${year}`,
     noDateStandardMap: "Sin fecha aquí — mapa estándar",
     historicalYear: "Año del mapa histórico",
+    photoOf: (n, total) => `Foto ${n} de ${total}`,
   },
   fr: {
     previous: "Précédent",
@@ -67,6 +72,7 @@ const TABLE: Record<string, PlayerStrings> = {
     historicalMapYear: (year) => `Carte historique, ${year}`,
     noDateStandardMap: "Pas de date ici — carte standard",
     historicalYear: "Année de la carte historique",
+    photoOf: (n, total) => `Photo ${n} sur ${total}`,
   },
   nl: {
     previous: "Vorige",
@@ -79,6 +85,7 @@ const TABLE: Record<string, PlayerStrings> = {
     historicalMapYear: (year) => `Historische kaart, ${year}`,
     noDateStandardMap: "Geen datum hier — standaardkaart",
     historicalYear: "Jaar van de historische kaart",
+    photoOf: (n, total) => `Foto ${n} van ${total}`,
   },
 };