@gramps-connect/story 0.1.0 → 0.1.2

package/dist/types/player/brand.d.ts

@@ -0,0 +1,16 @@
+export declare const VIEWER_NAME = "Gramps Connect Story Viewer";
+export declare const VIEWER_URL = "https://dsblank.github.io/gramps-connect-stories/";
+/** The Gramps Connect icon (app/public/favicon.svg): a three-box pedigree
+ * on a blue tile, which holds up on light and dark headers alike. */
+export declare function ViewerIcon({ size }: {
+    size?: number;
+}): import("react").JSX.Element;
+export interface ViewerBrandProps {
+    /** Where the link goes; the viewer site by default. */
+    href?: string;
+    /** "_blank" (the default) opens it beside the story, not in its place. */
+    target?: string;
+    size?: number;
+}
+/** The icon, as a link to the viewer. */
+export declare function ViewerBrand({ href, target, size }: ViewerBrandProps): import("react").JSX.Element;

package/dist/types/player/index.d.ts

@@ -1,4 +1,5 @@
 export { StoryPlayer, type StoryPlayerProps } from "./StoryPlayer";
+export { VIEWER_NAME, VIEWER_URL, ViewerBrand, ViewerIcon, type ViewerBrandProps } from "./brand";
 export { MapModeControl, type MapMode, type MapModeControlProps } from "./MapModeControl";
 export { defaultColors, PIN_PATH_D, type PlayerColors } from "./theme";
 export { ENGLISH, PLAYER_LANGUAGES, stringsFor, type PlayerStrings } from "./strings";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gramps-connect/story",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Read, write, validate and present .story.zip files: portable, versioned family-history stories.",
   "license": "AGPL-3.0-or-later",
   "type": "module",

package/src/embed/index.tsx

@@ -7,6 +7,8 @@
 //   src    URL of a .story.zip (needs CORS if on another site)
 //   slide  slide to open on: an index, or a slide id like "s3"
 //   theme  "light", "dark", or "auto" (the default: the viewer's setting)
+//   brand  present: the Story Viewer's icon before the title, linking to
+//          it (for a page that is just the story, e.g. one a program wrote)
 //
 // It renders into a shadow root, so the page's CSS and the player's can't
 // collide, and is 480px tall unless the page styles it otherwise.
@@ -16,7 +18,7 @@ import * as maplibregl from "maplibre-gl";
 // Text, not a side effect: it has to go inside the shadow root.
 import maplibreCss from "maplibre-gl/dist/maplibre-gl.css";
 import { mediaBlob, readStoryZip, type StoryPackage } from "../index";
-import { StoryPlayer } from "../player";
+import { StoryPlayer, ViewerBrand } from "../player";
 
 /** maplibre's worker sits next to this script. Same origin: use it as is.
  * Another origin (the usual case, a CDN): a page can't start a worker from
@@ -41,7 +43,7 @@ ${maplibreCss}
 `;
 
 class GrampsConnectStoryElement extends HTMLElement {
-  static observedAttributes = ["src", "slide", "theme"];
+  static observedAttributes = ["src", "slide", "theme", "brand"];
 
   private frame: HTMLDivElement | null = null;
   private reactRoot: Root | null = null;
@@ -141,6 +143,7 @@ class GrampsConnectStoryElement extends HTMLElement {
       // One of maybe several on the page: arrow keys only once focused.
       keyboard: "focus",
       initialSlide: this.initialSlide(),
+      brand: this.hasAttribute("brand") ? createElement(ViewerBrand) : undefined,
     }));
   }
 }

package/src/player/MapBackground.tsx

@@ -31,6 +31,25 @@ export interface MapSlide {
   place: Place | undefined;
 }
 
+/** Frame the place's shape or overlays (usually a field, a route or an old
+ * map, far tighter than a town-level zoom), else fly to its point. */
+function moveCamera(map: MapLibreMap, place: Place | undefined, duration: number) {
+  const bounds = placeBounds(place);
+  if (bounds) {
+    map.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]], { maxZoom: 17, duration });
+    return;
+  }
+  const center = placeCenter(place);
+  if (center) map.flyTo({ center, zoom: 9, essential: true, duration });
+}
+
+/** The pin on the place; held where it was, dimmed, for a slide with none. */
+function placeMarker(marker: MapLibreMarker | null, center: [number, number] | null) {
+  if (!marker) return;
+  if (center) marker.setLngLat(center);
+  marker.getElement().style.opacity = center ? "1" : "0.4";
+}
+
 export function MapBackground({ initialCenter, current, dark, colors, panelFraction, ohmYear, resolveMedia }: {
   initialCenter: [number, number];
   current: MapSlide;
@@ -64,6 +83,8 @@ export function MapBackground({ initialCenter, current, dark, colors, panelFract
   // What the map was built or last swapped with, so a re-render with the
   // same effective style never triggers a reload.
   const appliedStyleKeyRef = useRef(mapStyleKey(dark, ohmYear));
+  const currentRef = useRef(current);
+  currentRef.current = current;
 
   useEffect(() => {
     if (!containerEl) return;
@@ -81,7 +102,13 @@ export function MapBackground({ initialCenter, current, dark, colors, panelFract
     map.on("style.load", () => setReady(true));
     // Center points in the part of the map the slide panel doesn't cover.
     map.setPadding({ top: 0, bottom: 0, left: 0, right: containerEl.clientWidth * panelFraction });
-    map.jumpTo({ center: initialCenter });
+    // Straight to the opening slide's place, unanimated. The camera effect
+    // below ran for it before this map existed (the container arrives a
+    // render late), so a story opened partway through starts there too.
+    const start = currentRef.current.place;
+    const startCenter = placeCenter(start);
+    map.jumpTo({ center: startCenter ?? initialCenter });
+    if (startCenter) moveCamera(map, start, 0);
     map.on("load", () => {
       const c = colorsRef.current;
       const el = document.createElement("div");
@@ -93,6 +120,7 @@ export function MapBackground({ initialCenter, current, dark, colors, panelFract
         + `</svg>`;
       // The pin's tip, not its middle, sits on the coordinate.
       markerRef.current = new maplibregl.Marker({ element: el, anchor: "bottom" }).setLngLat(initialCenter).addTo(map);
+      placeMarker(markerRef.current, placeCenter(currentRef.current.place));
     });
     return () => {
       markerRef.current?.remove();
@@ -171,29 +199,16 @@ export function MapBackground({ initialCenter, current, dark, colors, panelFract
     source?.setData((place?.geometry as GeoJSON | undefined) ?? EMPTY);
   }, [ready, current.key, place]);
 
-  // Camera: once per slide. A shape or overlay is framed (it's usually a
-  // field, a route or an old map, far tighter than a town-level zoom);
-  // otherwise fly to the point. Keyed to the slide, not to `ready`, so a
+  // Camera: once per slide (see moveCamera). Keyed to the slide, not to `ready`, so a
   // map-mode switch never yanks the view back from wherever the viewer
   // has since panned.
   useEffect(() => {
     const map = mapRef.current;
     if (!map) return;
     const center = placeCenter(place);
-    const marker = markerRef.current;
-    if (!center) {
-      // No place: the camera stays put and the marker dims.
-      if (marker) marker.getElement().style.opacity = "0.4";
-      return;
-    }
-    marker?.setLngLat(center);
-    if (marker) marker.getElement().style.opacity = "1";
-    const bounds = placeBounds(place);
-    if (bounds) {
-      map.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]], { maxZoom: 17, duration: 900 });
-    } else {
-      map.flyTo({ center, zoom: 9, essential: true, duration: 900 });
-    }
+    placeMarker(markerRef.current, center);
+    // No place: the camera stays put.
+    if (center) moveCamera(map, place, 900);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [current.key]);
 

package/src/player/StoryPlayer.tsx

@@ -42,6 +42,8 @@ export interface StoryPlayerProps {
   /** Replaces the built-in map-mode control, e.g. with one from the host's
    * own UI kit. */
   renderMapModeControl?: (props: MapModeControlProps) => ReactNode;
+  /** Shown before the title, e.g. ViewerBrand on a standalone page. */
+  brand?: ReactNode;
   initialSlide?: number;
 }
 
@@ -199,7 +201,7 @@ function NavArrows({ index, total, onPrev, onNext, variant, strings, colors }: {
 
 export function StoryPlayer({
   story, resolveMedia, dark = false, colors: colorOverrides, strings: stringOverrides, onClose,
-  keyboard = true, onSlideChange, renderMapModeControl, initialSlide = 0,
+  keyboard = true, onSlideChange, renderMapModeControl, brand, initialSlide = 0,
 }: StoryPlayerProps) {
   const colors = useMemo(() => ({ ...defaultColors(dark), ...colorOverrides }), [dark, colorOverrides]);
   const strings = useMemo(
@@ -341,9 +343,10 @@ export function StoryPlayer({
         dir="auto"
         style={{
           position: "absolute", top: 0, left: 20, height: BAR_HEIGHT, maxWidth: "26%", zIndex: 3,
-          display: "flex", alignItems: "center", fontWeight: 600,
+          display: "flex", alignItems: "center", gap: 10, fontWeight: 600,
         }}
       >
+        {brand && <span style={{ flex: "none", display: "flex" }}>{brand}</span>}
         <span style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{story.title}</span>
       </div>
       {/* Centered on the whole bar, as a toolbar for the presentation; the

package/src/player/brand.tsx

@@ -0,0 +1,51 @@
+// The Gramps Connect Story Viewer's mark, linking to the viewer: for
+// StoryPlayer's `brand` slot on standalone pages (the viewer site, a page
+// a program writes around a story), so whoever is watching can find where
+// it came from.
+import type { CSSProperties } from "react";
+
+export const VIEWER_NAME = "Gramps Connect Story Viewer";
+export const VIEWER_URL = "https://dsblank.github.io/gramps-connect-stories/";
+
+/** The Gramps Connect icon (app/public/favicon.svg): a three-box pedigree
+ * on a blue tile, which holds up on light and dark headers alike. */
+export function ViewerIcon({ size = 24 }: { size?: number }) {
+  return (
+    <svg viewBox="0 0 64 64" width={size} height={size} aria-hidden="true" focusable="false">
+      <rect width="64" height="64" rx="15" fill="#1866ba" />
+      <g transform="translate(9.6 9.6) scale(0.7)">
+        <path d="M25 32h7M32 15v34M32 15h7M32 49h7" fill="none" stroke="#fff" strokeWidth="5" strokeLinecap="round" />
+        <g fill="#fff">
+          <rect x="1" y="24" width="24" height="16" rx="4" />
+          <rect x="39" y="7" width="24" height="16" rx="4" />
+          <rect x="39" y="41" width="24" height="16" rx="4" />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export interface ViewerBrandProps {
+  /** Where the link goes; the viewer site by default. */
+  href?: string;
+  /** "_blank" (the default) opens it beside the story, not in its place. */
+  target?: string;
+  size?: number;
+}
+
+/** The icon, as a link to the viewer. */
+export function ViewerBrand({ href = VIEWER_URL, target = "_blank", size = 24 }: ViewerBrandProps) {
+  const style: CSSProperties = { display: "flex", lineHeight: 0, borderRadius: 6 };
+  return (
+    <a
+      href={href}
+      target={target}
+      rel={target === "_blank" ? "noopener" : undefined}
+      title={VIEWER_NAME}
+      aria-label={VIEWER_NAME}
+      style={style}
+    >
+      <ViewerIcon size={size} />
+    </a>
+  );
+}

package/src/player/index.ts

@@ -1,4 +1,5 @@
 export { StoryPlayer, type StoryPlayerProps } from "./StoryPlayer";
+export { VIEWER_NAME, VIEWER_URL, ViewerBrand, ViewerIcon, type ViewerBrandProps } from "./brand";
 export { MapModeControl, type MapMode, type MapModeControlProps } from "./MapModeControl";
 export { defaultColors, PIN_PATH_D, type PlayerColors } from "./theme";
 export { ENGLISH, PLAYER_LANGUAGES, stringsFor, type PlayerStrings } from "./strings";