@gramps-connect/story 0.1.0 → 0.1.1

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";