Photo wall Presenter changes

src/lib/api.ts

@@ -1031,10 +1031,15 @@ export type PhotoWallUploadMeta = {
 export type PhotoWallPresentData = {
   eventId: string;
   eventName: string;
+  event?: PhotoWallPublicEvent | null;
+  eventHeader?: PhotoWallEventHeaderDisplay | null;
   photosPerRow: number;
   maxPhotoWidth: number;
   maxPhotoHeight: number;
   gapPx: number;
+  presentMarginTopPx?: number;
+  presentMarginLeftPx?: number;
+  presentMarginRightPx?: number;
   showUploaderNameOnWall?: boolean;
   frameEnabled?: boolean;
   frameCanvasWidth?: number;

src/pages/PhotoWallPresentPage.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { getPhotoWallPresent, type PhotoWallPresentData } from "../lib/api";
+import { PhotoWallEventHeader } from "../components/PhotoWallEventHeader";
 
 const POLL_MS = 4000;
 
@@ -51,6 +52,9 @@ export function PhotoWallPresentPage() {
   const maxW = data.maxPhotoWidth || 320;
   const maxH = data.maxPhotoHeight || 320;
   const gap = data.gapPx ?? 8;
+  const marginTop = Math.max(0, data.presentMarginTopPx ?? 0);
+  const marginLeft = Math.max(0, data.presentMarginLeftPx ?? 0);
+  const marginRight = Math.max(0, data.presentMarginRightPx ?? 0);
   const showNames = Boolean(data.showUploaderNameOnWall);
   const frameEnabled = Boolean(data.frameEnabled);
   const frameW = data.frameCanvasWidth || 1080;
@@ -59,10 +63,22 @@ export function PhotoWallPresentPage() {
 
   return (
     <div className="eb-gradient-auth min-h-dvh text-white">
-      <div className="px-4 pb-3 pt-4 text-center card-bg rounded-lg shadow-sm max-w-[400px] mx-auto mb-3">
+      {data.event ? (
-        <p className="text-xs uppercase tracking-[0.2em] text-[var(--theme-card-text-color)]/70">Photo Wall</p>
+        <div className="px-4 pb-3 pt-4">
-        <h1 className="text-xl font-semibold sm:text-2xl text-[var(--theme-card-text-color)]">{data.eventName}</h1>
+          <div className="card-bg mx-auto mb-3 max-w-[400px] rounded-lg p-4 shadow-sm [&:not(:has(header))]:hidden">
+            <PhotoWallEventHeader
+              event={data.event}
+              display={data.eventHeader || null}
+              eyebrow={data.eventHeader?.showTitle === false ? null : "Photo Wall"}
+            />
           </div>
+        </div>
+      ) : (
+        <div className="card-bg mx-auto mb-3 max-w-[400px] rounded-lg px-4 pb-3 pt-4 text-center shadow-sm">
+          <p className="text-xs uppercase tracking-[0.2em] text-[var(--theme-card-text-color)]/70">Photo Wall</p>
+          <h1 className="text-xl font-semibold text-[var(--theme-card-text-color)] sm:text-2xl">{data.eventName}</h1>
+        </div>
+      )}
 
       {data.photos.length === 0 ? (
         <div className="flex min-h-[60dvh] items-center justify-center px-6 text-center text-white/80">
@@ -70,13 +86,16 @@ export function PhotoWallPresentPage() {
         </div>
       ) : (
         <div
-          className="mx-auto w-full max-w-[100vw] px-3 pb-6"
+          className="mx-auto w-full max-w-[100vw] pb-6"
           style={{
             display: "grid",
             gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
             gap: `${gap}px`,
             justifyItems: "center",
             alignItems: "start",
+            paddingTop: `${marginTop}px`,
+            paddingLeft: `${marginLeft}px`,
+            paddingRight: `${marginRight}px`,
           }}
         >
           {data.photos.map((p) => (
@@ -98,7 +117,7 @@ export function PhotoWallPresentPage() {
               />
               {showNames && p.displayName ? (
                 <p
-                  className="mt- w-full truncate text-center text-xs font-medium text-[var(--theme-card-text-color)]/90 bg-[var(--theme-card-color)] rounded-md p-1 sm:text-sm"
+                  className="mt- w-full truncate rounded-md bg-[var(--theme-card-color)] p-1 text-center text-xs font-medium text-[var(--theme-card-text-color)]/90 sm:text-sm"
                   title={p.displayName}
                 >
                   {p.displayName}