diff --git a/src/lib/api.ts b/src/lib/api.ts index ddc0afa..9d29014 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -1040,6 +1040,7 @@ export type PhotoWallPresentData = { presentMarginTopPx?: number; presentMarginLeftPx?: number; presentMarginRightPx?: number; + presentPhotoShape?: "rect" | "rounded" | "circle"; showUploaderNameOnWall?: boolean; frameEnabled?: boolean; frameCanvasWidth?: number; diff --git a/src/pages/PhotoWallPresentPage.tsx b/src/pages/PhotoWallPresentPage.tsx index cc6b05f..c5099c4 100644 --- a/src/pages/PhotoWallPresentPage.tsx +++ b/src/pages/PhotoWallPresentPage.tsx @@ -5,6 +5,25 @@ import { PhotoWallPresentChrome } from "../components/PhotoWallPresentChrome"; const POLL_MS = 4000; +function presentShapeStyles( + shape: PhotoWallPresentData["presentPhotoShape"], + maxW: number, + maxH: number, + frameEnabled: boolean, + frameW: number, + frameH: number, +) { + const normalized = shape === "rect" || shape === "circle" || shape === "rounded" ? shape : "rounded"; + const borderRadius = normalized === "rect" ? 0 : normalized === "circle" ? "50%" : 16; + const aspectRatio = + normalized === "circle" + ? "1 / 1" + : frameEnabled + ? `${frameW} / ${frameH}` + : `${maxW} / ${maxH}`; + return { borderRadius, aspectRatio, shape: normalized }; +} + export function PhotoWallPresentPage() { const { presentToken } = useParams<{ presentToken: string }>(); const [data, setData] = useState(null); @@ -59,7 +78,14 @@ export function PhotoWallPresentPage() { const frameEnabled = Boolean(data.frameEnabled); const frameW = data.frameCanvasWidth || 1080; const frameH = data.frameCanvasHeight || 1080; - const aspectRatio = frameEnabled ? `${frameW} / ${frameH}` : `${maxW} / ${maxH}`; + const { borderRadius, aspectRatio } = presentShapeStyles( + data.presentPhotoShape, + maxW, + maxH, + frameEnabled, + frameW, + frameH, + ); return (
@@ -90,20 +116,25 @@ export function PhotoWallPresentPage() { {data.photos.map((p) => (
- {p.displayName + > + {p.displayName +
{showNames && p.displayName ? (