| null>(null);
+
+ useEffect(() => {
+ prevOnAirRef.current = null;
+ }, [sessionId]);
+
+ useEffect(() => {
+ const eid = eventId.trim();
+ const sid = sessionId.trim();
+ if (!enabled || !eid || !sid || loading) return;
+
+ const onAir = onAirManualOrQuizMasterIds(items);
+ const onAirSet = new Set(onAir);
+ const prev = prevOnAirRef.current;
+ const current = currentQuizPollId?.trim() || null;
+
+ if (prev == null) {
+ prevOnAirRef.current = onAirSet;
+ const target = firstQuizMasterOrManualVisibleId(items);
+ if (!target) return;
+ if (current && onAirSet.has(current)) return;
+ navigate(quizPollTakePath(eid, sid, target), { replace: true });
+ return;
+ }
+
+ const newlyEntered = onAir.filter((id) => !prev.has(id));
+ prevOnAirRef.current = onAirSet;
+
+ const switchTo = newlyEntered.find((id) => id !== current) ?? newlyEntered[0];
+ if (switchTo && switchTo !== current) {
+ navigate(quizPollTakePath(eid, sid, switchTo), { replace: true });
+ return;
+ }
+
+ if (current && !onAirSet.has(current)) {
+ const fallback = firstQuizMasterOrManualVisibleId(items);
+ if (fallback && fallback !== current) {
+ navigate(quizPollTakePath(eid, sid, fallback), { replace: true });
+ }
+ }
+ }, [enabled, eventId, sessionId, loading, items, currentQuizPollId, navigate]);
+}
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 0d3c0b5..8b59e17 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -895,6 +895,7 @@ export type PublicQuizPollPresentation = {
isLive?: boolean;
liveQuestionId?: string | null;
showCorrectAnswer?: boolean;
+ showLeaderboard?: boolean;
showResults?: boolean;
};
questions: PublicQuizPollPresentationQuestion[];
@@ -974,6 +975,31 @@ export async function getPublicQuizPollQuestionStats(
return (body as { data: PublicQuizPollQuestionStats }).data;
}
+export type PublicQuizPollLeaderboardEntry = {
+ rank: number;
+ participantId: string;
+ displayName: string;
+ correctCount: number;
+ totalQuestions: number;
+ timeTakenSec: number;
+ totalScore: number;
+};
+
+export type PublicQuizPollLeaderboard = {
+ totalQuestions: number;
+ entries: PublicQuizPollLeaderboardEntry[];
+};
+
+export async function getPublicQuizPollLeaderboard(token: string): Promise
{
+ const base = getBaseUrl();
+ const url = `${base}/api/public/quiz-polls/present/${encodeURIComponent(token)}/leaderboard`;
+ const res = await fetch(url);
+ const body = await parseJson(res);
+ if (!res.ok) throw new Error(messageFromBody(body));
+ if (!body || typeof body !== "object" || !("data" in body)) throw new Error("Invalid response");
+ return (body as { data: PublicQuizPollLeaderboard }).data;
+}
+
async function postPublicPresentationControl(
token: string,
pathSuffix: string,
@@ -1006,3 +1032,413 @@ export async function setPublicLiveQuestion(
): Promise {
return postPublicPresentationControl(token, "/live-question", { questionId });
}
+
+export type PhotoWallPublicFormField = {
+ label?: string;
+ name?: string;
+ type?: string;
+ required?: boolean;
+ options?: string[];
+ placeholder?: string;
+ mapsTo?: string;
+};
+
+export type PhotoWallEventHeaderDisplay = {
+ showLogo?: boolean;
+ showBanner?: boolean;
+ showTitle?: boolean;
+ showDateRange?: boolean;
+ showEventType?: boolean;
+ showLocationType?: boolean;
+ showVenue?: boolean;
+};
+
+export type PhotoWallPublicEvent = {
+ _id?: string;
+ name: string;
+ subtitle?: string;
+ eventType?: string;
+ startDate?: string | null;
+ endDate?: string | null;
+ location?: string;
+ locationType?: string;
+ logoUrl?: string | null;
+ imageUrl?: string | null;
+};
+
+export type PhotoWallSharePlatforms = {
+ linkedin?: boolean;
+ facebook?: boolean;
+ instagram?: boolean;
+ snapchat?: boolean;
+ x?: boolean;
+ whatsapp?: boolean;
+};
+
+export type PhotoWallUploadMeta = {
+ eventId: string;
+ eventName: string;
+ event?: PhotoWallPublicEvent | null;
+ eventHeader?: PhotoWallEventHeaderDisplay | null;
+ accessMode: "open" | "login";
+ collectDetails: boolean;
+ createParticipant: boolean;
+ moderationMode: "auto" | "approval";
+ showUploaderNameOnWall?: boolean;
+ requireUploadCrop?: boolean;
+ askUploaderName?: boolean;
+ maxPhotoWidth?: number;
+ maxPhotoHeight?: number;
+ frameEnabled?: boolean;
+ allowFramedDownload?: boolean;
+ sharePlatforms?: PhotoWallSharePlatforms;
+ form: {
+ _id: string;
+ title?: string;
+ description?: string;
+ type?: string;
+ fields: PhotoWallPublicFormField[];
+ settings?: { thankYouMessage?: string; isActive?: boolean };
+ } | null;
+};
+
+export type PhotoWallPresentData = {
+ eventId: string;
+ eventName: string;
+ photosPerRow: number;
+ maxPhotoWidth: number;
+ maxPhotoHeight: number;
+ gapPx: number;
+ showUploaderNameOnWall?: boolean;
+ frameEnabled?: boolean;
+ frameCanvasWidth?: number;
+ frameCanvasHeight?: number;
+ photos: Array<{ _id: string; url: string; createdAt?: string; displayName?: string | null }>;
+};
+
+export async function getPhotoWallUploadMeta(uploadToken: string): Promise {
+ const base = getBaseUrl();
+ const url = `${base}/api/public/photo-wall/upload/${encodeURIComponent(uploadToken)}`;
+ const res = await fetch(url);
+ const body = await parseJson(res);
+ if (!res.ok) throw new Error(messageFromBody(body));
+ if (!body || typeof body !== "object" || !("data" in body)) throw new Error("Invalid response");
+ return (body as { data: PhotoWallUploadMeta }).data;
+}
+
+export async function uploadPhotoWallSelfie(
+ uploadToken: string,
+ file: File,
+ formData?: Record,
+ options?: { displayName?: string },
+): Promise<{
+ awaitingApproval: boolean;
+ previewUrl: string | null;
+ /** API proxy URL — use for download/share fetch (CORS-safe). */
+ fileUrl: string | null;
+ framed: boolean;
+ photoId: string | null;
+ photoUrl: string | null;
+ framedUrl: string | null;
+}> {
+ const base = getBaseUrl();
+ const url = `${base}/api/public/photo-wall/upload/${encodeURIComponent(uploadToken)}`;
+ const fd = new FormData();
+ fd.append("file", file, file.name);
+ if (formData && Object.keys(formData).length) {
+ fd.append("formData", JSON.stringify(formData));
+ }
+ if (options?.displayName?.trim()) {
+ fd.append("displayName", options.displayName.trim());
+ }
+ const headers: Record = {};
+ const token = getAttendeeToken();
+ if (token) headers.Authorization = `Bearer ${token}`;
+ const res = await fetch(url, { method: "POST", headers, body: fd });
+ const body = await parseJson(res);
+ if (!res.ok) throw new Error(messageFromBody(body));
+ if (!body || typeof body !== "object" || !("data" in body)) throw new Error("Invalid response");
+ const data = (
+ body as {
+ data: {
+ awaitingApproval?: boolean;
+ previewUrl?: string;
+ fileUrl?: string;
+ framed?: boolean;
+ photo?: { _id?: string; url?: string; framedUrl?: string | null };
+ };
+ }
+ ).data;
+ const photoUrl = data?.photo?.url || null;
+ const framedUrl = data?.photo?.framedUrl || null;
+ const photoId = data?.photo?._id ? String(data.photo._id) : null;
+ const fileUrlRelative = data?.fileUrl || null;
+ const fileUrl = fileUrlRelative
+ ? fileUrlRelative.startsWith("http")
+ ? fileUrlRelative
+ : `${base}${fileUrlRelative.startsWith("/") ? "" : "/"}${fileUrlRelative}`
+ : data?.previewUrl || framedUrl || photoUrl || null;
+ return {
+ awaitingApproval: Boolean(data?.awaitingApproval),
+ previewUrl: data?.previewUrl || framedUrl || photoUrl,
+ fileUrl,
+ framed: Boolean(data?.framed || framedUrl),
+ photoId,
+ photoUrl,
+ framedUrl,
+ };
+}
+
+export async function getPhotoWallPresent(presentToken: string): Promise {
+ const base = getBaseUrl();
+ const url = `${base}/api/public/photo-wall/present/${encodeURIComponent(presentToken)}`;
+ const res = await fetch(url);
+ const body = await parseJson(res);
+ if (!res.ok) throw new Error(messageFromBody(body));
+ if (!body || typeof body !== "object" || !("data" in body)) throw new Error("Invalid response");
+ return (body as { data: PhotoWallPresentData }).data;
+}
+
+export type PhotoSearchMeta = {
+ eventId: string;
+ eventName: string;
+ event?: PhotoWallPublicEvent | null;
+ eventHeader?: PhotoWallEventHeaderDisplay | null;
+ accessMode: "open" | "login";
+ allowDownload: boolean;
+ sharePlatforms?: PhotoWallSharePlatforms;
+};
+
+export type PhotoSearchMatch = {
+ _id: string;
+ event: string;
+ organization: string;
+ fileName?: string;
+ originalFileName?: string;
+ url: string;
+ fileUrl: string;
+ mimeType?: string;
+ size?: number;
+ uploadedAt?: string;
+ similarity?: number;
+};
+
+export async function getPhotoSearchMeta(searchToken: string): Promise {
+ const base = getBaseUrl();
+ const url = `${base}/api/public/photo-search/${encodeURIComponent(searchToken)}`;
+ const res = await fetch(url);
+ const body = await parseJson(res);
+ if (!res.ok) throw new Error(messageFromBody(body));
+ if (!body || typeof body !== "object" || !("data" in body)) throw new Error("Invalid response");
+ return (body as { data: PhotoSearchMeta }).data;
+}
+
+export type SocialSharePublicFrame = {
+ _id: string;
+ name: string;
+ frameImageUrl: string | null;
+ frameCanvasWidth?: number;
+ frameCanvasHeight?: number;
+ /** Photo slot size on the frame canvas — used for upload crop aspect. */
+ photoSlot?: { w: number; h: number } | null;
+};
+
+export type SocialShareMeta = {
+ eventId: string;
+ eventName: string;
+ event?: PhotoWallPublicEvent | null;
+ eventHeader?: PhotoWallEventHeaderDisplay | null;
+ accessMode: "open" | "login";
+ requireUploadCrop?: boolean;
+ maxPhotoWidth?: number;
+ maxPhotoHeight?: number;
+ allowDownload: boolean;
+ sharePlatforms?: PhotoWallSharePlatforms;
+ frames: SocialSharePublicFrame[];
+};
+
+export async function getSocialShareMeta(uploadToken: string): Promise {
+ const base = getBaseUrl();
+ const url = `${base}/api/public/social-share/${encodeURIComponent(uploadToken)}`;
+ const res = await fetch(url);
+ const body = await parseJson(res);
+ if (!res.ok) throw new Error(messageFromBody(body));
+ if (!body || typeof body !== "object" || !("data" in body)) throw new Error("Invalid response");
+ return (body as { data: SocialShareMeta }).data;
+}
+
+export async function uploadSocialSharePhoto(
+ uploadToken: string,
+ file: File,
+ frameId: string,
+): Promise<{
+ previewUrl: string | null;
+ fileUrl: string | null;
+ framed: boolean;
+ outputId: string | null;
+}> {
+ const base = getBaseUrl();
+ const url = `${base}/api/public/social-share/${encodeURIComponent(uploadToken)}`;
+ const fd = new FormData();
+ fd.append("file", file, file.name);
+ fd.append("frameId", frameId);
+ const headers: Record = {};
+ const token = getAttendeeToken();
+ if (token) headers.Authorization = `Bearer ${token}`;
+ const res = await fetch(url, { method: "POST", headers, body: fd });
+ const body = await parseJson(res);
+ if (!res.ok) throw new Error(messageFromBody(body));
+ if (!body || typeof body !== "object" || !("data" in body)) throw new Error("Invalid response");
+ const data = (
+ body as {
+ data: {
+ previewUrl?: string;
+ fileUrl?: string;
+ framed?: boolean;
+ outputId?: string;
+ };
+ }
+ ).data;
+ const fileUrlRelative = data?.fileUrl || null;
+ const fileUrl = fileUrlRelative
+ ? fileUrlRelative.startsWith("http")
+ ? fileUrlRelative
+ : `${base}${fileUrlRelative.startsWith("/") ? "" : "/"}${fileUrlRelative}`
+ : data?.previewUrl || null;
+ return {
+ previewUrl: data?.previewUrl || null,
+ fileUrl,
+ framed: Boolean(data?.framed),
+ outputId: data?.outputId ? String(data.outputId) : null,
+ };
+}
+
+export type AiAvatarPublicTemplate = {
+ _id: string;
+ name: string;
+ imageUrl: string | null;
+ /** Crop aspect for selfie (default square). */
+ photoSlot?: { w: number; h: number } | null;
+};
+
+export type AiAvatarMeta = {
+ eventId: string;
+ eventName: string;
+ event?: PhotoWallPublicEvent | null;
+ eventHeader?: PhotoWallEventHeaderDisplay | null;
+ accessMode: "open" | "login";
+ allowDownload: boolean;
+ sharePlatforms?: PhotoWallSharePlatforms;
+ avatars: AiAvatarPublicTemplate[];
+};
+
+export async function getAiAvatarMeta(uploadToken: string): Promise {
+ const base = getBaseUrl();
+ const url = `${base}/api/public/ai-avatar/${encodeURIComponent(uploadToken)}`;
+ const res = await fetch(url);
+ const body = await parseJson(res);
+ if (!res.ok) throw new Error(messageFromBody(body));
+ if (!body || typeof body !== "object" || !("data" in body)) throw new Error("Invalid response");
+ return (body as { data: AiAvatarMeta }).data;
+}
+
+export async function uploadAiAvatarPhoto(
+ uploadToken: string,
+ file: File,
+ avatarId: string,
+): Promise<{
+ previewUrl: string | null;
+ fileUrl: string | null;
+ outputId: string | null;
+}> {
+ const base = getBaseUrl();
+ const url = `${base}/api/public/ai-avatar/${encodeURIComponent(uploadToken)}`;
+ const fd = new FormData();
+ fd.append("file", file, file.name);
+ fd.append("avatarId", avatarId);
+ const headers: Record = {};
+ const token = getAttendeeToken();
+ if (token) headers.Authorization = `Bearer ${token}`;
+ const res = await fetch(url, { method: "POST", headers, body: fd });
+ const body = await parseJson(res);
+ if (!res.ok) throw new Error(messageFromBody(body));
+ if (!body || typeof body !== "object" || !("data" in body)) throw new Error("Invalid response");
+ const data = (
+ body as {
+ data: {
+ previewUrl?: string;
+ fileUrl?: string;
+ outputId?: string;
+ };
+ }
+ ).data;
+ const fileUrlRelative = data?.fileUrl || null;
+ const fileUrl = fileUrlRelative
+ ? fileUrlRelative.startsWith("http")
+ ? fileUrlRelative
+ : `${base}${fileUrlRelative.startsWith("/") ? "" : "/"}${fileUrlRelative}`
+ : data?.previewUrl || null;
+ return {
+ previewUrl: data?.previewUrl || null,
+ fileUrl,
+ outputId: data?.outputId ? String(data.outputId) : null,
+ };
+}
+
+export async function searchPhotoSearchMatches(
+ searchToken: string,
+ file: File,
+): Promise<{ collectionExists: boolean; matchCount: number; matches: PhotoSearchMatch[] }> {
+ const base = getBaseUrl();
+ const url = `${base}/api/public/photo-search/${encodeURIComponent(searchToken)}`;
+ const fd = new FormData();
+ fd.append("files", file, file.name);
+ const headers: Record = {};
+ const token = getAttendeeToken();
+ if (token) headers.Authorization = `Bearer ${token}`;
+ const res = await fetch(url, { method: "POST", headers, body: fd });
+ const body = await parseJson(res);
+ if (!res.ok) throw new Error(messageFromBody(body));
+ if (!body || typeof body !== "object" || !("data" in body)) throw new Error("Invalid response");
+ const data = (
+ body as {
+ data: {
+ collectionExists?: boolean;
+ matchCount?: number;
+ matches?: Array & { _id?: string; fileUrl?: string; url?: string }>;
+ };
+ }
+ ).data;
+
+ const matches = (data?.matches || []).map((m) => {
+ const id = m._id ? String(m._id) : "";
+ const fileUrlRelative = m.fileUrl || null;
+ const fileUrl = fileUrlRelative
+ ? fileUrlRelative.startsWith("http")
+ ? fileUrlRelative
+ : `${base}${fileUrlRelative.startsWith("/") ? "" : "/"}${fileUrlRelative}`
+ : typeof m.url === "string" && m.url.trim()
+ ? m.url.trim()
+ : "";
+ return {
+ _id: id,
+ event: String(m.event || ""),
+ organization: String(m.organization || ""),
+ fileName: m.fileName,
+ originalFileName: m.originalFileName,
+ // CDN thumb for display — do not fall back to API fileUrl
+ url: typeof m.url === "string" && m.url.trim() ? m.url.trim() : "",
+ fileUrl,
+ mimeType: m.mimeType,
+ size: m.size,
+ uploadedAt: m.uploadedAt,
+ similarity: typeof m.similarity === "number" ? m.similarity : undefined,
+ } satisfies PhotoSearchMatch;
+ });
+
+ return {
+ collectionExists: Boolean(data?.collectionExists),
+ matchCount: typeof data?.matchCount === "number" ? data.matchCount : matches.length,
+ matches,
+ };
+}
diff --git a/src/lib/cropImage.ts b/src/lib/cropImage.ts
new file mode 100644
index 0000000..d2c2eef
--- /dev/null
+++ b/src/lib/cropImage.ts
@@ -0,0 +1,64 @@
+import type { Area } from "react-easy-crop";
+
+export function loadImage(src: string): Promise {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ img.addEventListener("load", () => resolve(img));
+ img.addEventListener("error", () => reject(new Error("Failed to load image")));
+ img.src = src;
+ });
+}
+
+export async function getImageNaturalSize(file: File): Promise<{ width: number; height: number }> {
+ const url = URL.createObjectURL(file);
+ try {
+ const img = await loadImage(url);
+ return { width: img.naturalWidth, height: img.naturalHeight };
+ } finally {
+ URL.revokeObjectURL(url);
+ }
+}
+
+export function ratiosMatch(
+ imageWidth: number,
+ imageHeight: number,
+ targetWidth: number,
+ targetHeight: number,
+ tolerance = 0.02,
+): boolean {
+ if (!imageWidth || !imageHeight || !targetWidth || !targetHeight) return true;
+ const imageRatio = imageWidth / imageHeight;
+ const targetRatio = targetWidth / targetHeight;
+ return Math.abs(imageRatio - targetRatio) / targetRatio <= tolerance;
+}
+
+export async function getCroppedImageFile(
+ imageSrc: string,
+ crop: Area,
+ fileName = "photo.jpg",
+ mimeType = "image/jpeg",
+): Promise {
+ const image = await loadImage(imageSrc);
+ const canvas = document.createElement("canvas");
+ const ctx = canvas.getContext("2d");
+ if (!ctx) throw new Error("Canvas not supported");
+
+ const w = Math.max(1, Math.round(crop.width));
+ const h = Math.max(1, Math.round(crop.height));
+ canvas.width = w;
+ canvas.height = h;
+
+ ctx.drawImage(image, crop.x, crop.y, crop.width, crop.height, 0, 0, w, h);
+
+ const blob = await new Promise((resolve, reject) => {
+ canvas.toBlob(
+ (b) => (b ? resolve(b) : reject(new Error("Failed to crop image"))),
+ mimeType,
+ 0.92,
+ );
+ });
+
+ const base = fileName.replace(/\.[^.]+$/, "") || "photo";
+ const ext = mimeType === "image/png" ? "png" : "jpg";
+ return new File([blob], `${base}.${ext}`, { type: mimeType });
+}
diff --git a/src/lib/photoWallShare.ts b/src/lib/photoWallShare.ts
new file mode 100644
index 0000000..244ffa3
--- /dev/null
+++ b/src/lib/photoWallShare.ts
@@ -0,0 +1,353 @@
+/** Download + social share helpers for photo-wall visitor success screen.
+ *
+ * On phones: prefer the OS share sheet (`navigator.share`) so the user picks the app.
+ * On desktop: platform buttons open that app / web intent. Instagram / Snapchat cannot
+ * receive an image via web intent, so we save the photo, copy the caption, then open the app.
+ */
+
+export type PhotoWallSharePlatform =
+ | "linkedin"
+ | "facebook"
+ | "instagram"
+ | "snapchat"
+ | "x"
+ | "whatsapp";
+
+export type SharePhotoWallResult = "shared" | "downloaded" | "cancelled";
+
+const PLATFORM_APP_HOME: Record = {
+ linkedin: "https://www.linkedin.com/feed/",
+ facebook: "https://www.facebook.com/",
+ instagram: "instagram://app",
+ snapchat: "snapchat://",
+ x: "https://x.com/compose/post",
+ whatsapp: "https://wa.me/",
+};
+
+export function isMobileUa(): boolean {
+ if (typeof navigator === "undefined") return false;
+ const ua = navigator.userAgent || "";
+ const touchMac =
+ /\bMacintosh\b/i.test(ua) &&
+ typeof navigator.maxTouchPoints === "number" &&
+ navigator.maxTouchPoints > 1;
+ return /iPhone|iPad|iPod|Android/i.test(ua) || touchMac;
+}
+
+/** True when we should show one Share button that opens the OS share sheet. */
+export function canUseNativeShareSheet(): boolean {
+ if (typeof navigator === "undefined") return false;
+ if (!isMobileUa()) return false;
+ return typeof navigator.share === "function";
+}
+
+function friendlyFetchError(err: unknown): Error {
+ const msg = err instanceof Error ? err.message : String(err || "");
+ // Safari often surfaces network/CORS failures as "Load failed" / "Failed to fetch"
+ if (/load failed|failed to fetch|networkerror|access control/i.test(msg)) {
+ return new Error("Could not load photo for sharing. Try Download, then share from your photos.");
+ }
+ return err instanceof Error ? err : new Error("Could not load image for sharing");
+}
+
+/** Convert HEIC / unknown types to JPEG so iOS `canShare({ files })` accepts them. */
+export async function ensureShareableImageFile(file: File, filename = "photo-wall.jpg"): Promise {
+ const type = (file.type || "").toLowerCase();
+ if (type === "image/jpeg" || type === "image/png" || type === "image/webp") {
+ return file;
+ }
+ try {
+ const bitmap = await createImageBitmap(file);
+ const canvas = document.createElement("canvas");
+ canvas.width = bitmap.width;
+ canvas.height = bitmap.height;
+ const ctx = canvas.getContext("2d");
+ if (!ctx) return file;
+ ctx.drawImage(bitmap, 0, 0);
+ bitmap.close?.();
+ const blob = await new Promise((resolve) =>
+ canvas.toBlob((b) => resolve(b), "image/jpeg", 0.92),
+ );
+ if (!blob?.size) return file;
+ return new File([blob], filename.replace(/\.\w+$/, "") + ".jpg", { type: "image/jpeg" });
+ } catch {
+ return file;
+ }
+}
+
+export async function fetchImageFile(url: string, filename = "photo-wall.jpg"): Promise {
+ let res: Response;
+ try {
+ res = await fetch(url, { mode: "cors", credentials: "omit", cache: "no-store" });
+ } catch (err) {
+ throw friendlyFetchError(err);
+ }
+ if (!res.ok) throw new Error("Could not load image for sharing");
+ const blob = await res.blob();
+ if (!blob.size) throw new Error("Could not load image for sharing");
+ const type = blob.type && blob.type.startsWith("image/") ? blob.type : "image/jpeg";
+ const ext = type.includes("png") ? "png" : type.includes("webp") ? "webp" : "jpg";
+ const name = filename.replace(/\.\w+$/, "") + `.${ext}`;
+ return new File([blob], name, { type });
+}
+
+/** Read pixels from an already-displayed {
+ if (!img?.naturalWidth || !img.naturalHeight) return null;
+ try {
+ const canvas = document.createElement("canvas");
+ canvas.width = img.naturalWidth;
+ canvas.height = img.naturalHeight;
+ const ctx = canvas.getContext("2d");
+ if (!ctx) return null;
+ ctx.drawImage(img, 0, 0);
+ const blob = await new Promise((resolve) =>
+ canvas.toBlob((b) => resolve(b), "image/jpeg", 0.92),
+ );
+ if (!blob?.size) return null;
+ return new File([blob], filename.replace(/\.\w+$/, "") + ".jpg", { type: "image/jpeg" });
+ } catch {
+ return null;
+ }
+}
+
+export async function downloadImageFromUrl(url: string, filename = "photo-wall.jpg") {
+ const file = await fetchImageFile(url, filename);
+ const objectUrl = URL.createObjectURL(file);
+ const a = document.createElement("a");
+ a.href = objectUrl;
+ a.download = file.name;
+ document.body.appendChild(a);
+ a.click();
+ a.remove();
+ URL.revokeObjectURL(objectUrl);
+}
+
+async function copyText(text: string): Promise {
+ try {
+ if (navigator.clipboard?.writeText) {
+ await navigator.clipboard.writeText(text);
+ return true;
+ }
+ } catch {
+ /* fall through */
+ }
+ try {
+ const el = document.createElement("textarea");
+ el.value = text;
+ el.setAttribute("readonly", "");
+ el.style.position = "fixed";
+ el.style.left = "-9999px";
+ document.body.appendChild(el);
+ el.select();
+ const ok = document.execCommand("copy");
+ el.remove();
+ return ok;
+ } catch {
+ return false;
+ }
+}
+
+function openUrl(url: string) {
+ // Prefer same-tab navigation on mobile so deep links / app handoff work more reliably.
+ if (isMobileUa()) {
+ window.location.assign(url);
+ return;
+ }
+ window.open(url, "_blank", "noopener,noreferrer");
+}
+
+function platformShareUrl(
+ platform: PhotoWallSharePlatform,
+ imageUrl: string,
+ text: string,
+): string | null {
+ const encodedText = encodeURIComponent(text);
+ const encodedUrl = encodeURIComponent(imageUrl);
+ const textWithUrl = encodeURIComponent(`${text}\n${imageUrl}`);
+
+ switch (platform) {
+ case "whatsapp":
+ // wa.me opens the WhatsApp app on phones and WhatsApp Web on desktop
+ return `https://wa.me/?text=${textWithUrl}`;
+ case "facebook":
+ return `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`;
+ case "x":
+ return `https://twitter.com/intent/tweet?text=${encodedText}&url=${encodedUrl}`;
+ case "linkedin":
+ return `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`;
+ case "instagram":
+ case "snapchat":
+ return null;
+ default:
+ return null;
+ }
+}
+
+async function saveImageAndOpenApp(
+ platform: PhotoWallSharePlatform,
+ file: File,
+ text: string,
+): Promise {
+ const objectUrl = URL.createObjectURL(file);
+ try {
+ const a = document.createElement("a");
+ a.href = objectUrl;
+ a.download = file.name;
+ document.body.appendChild(a);
+ a.click();
+ a.remove();
+ } finally {
+ URL.revokeObjectURL(objectUrl);
+ }
+
+ await copyText(text);
+
+ // Prefer native schemes on mobile; fall back to https homes.
+ if (platform === "instagram") {
+ openUrl(isMobileUa() ? "instagram://app" : "https://www.instagram.com/");
+ } else if (platform === "snapchat") {
+ openUrl(isMobileUa() ? "snapchat://" : "https://www.snapchat.com/");
+ } else {
+ openUrl(PLATFORM_APP_HOME[platform]);
+ }
+
+ return "downloaded";
+}
+
+async function resolveShareFile(options: {
+ file?: File | null;
+ imageUrl?: string | null;
+ imgEl?: HTMLImageElement | null;
+}): Promise {
+ if (options.file && options.file.size > 0) return options.file;
+
+ if (options.imageUrl) {
+ try {
+ return await fetchImageFile(options.imageUrl, "photo-wall.jpg");
+ } catch {
+ /* try canvas next */
+ }
+ }
+
+ if (options.imgEl) {
+ const fromImg = await fileFromHtmlImage(options.imgEl);
+ if (fromImg) return fromImg;
+ }
+
+ return null;
+}
+
+/**
+ * Open the OS share sheet (iOS / Android) with the photo + caption.
+ * Falls back to text/url-only share if the image bytes cannot be loaded.
+ *
+ * Critical: do not `await` network/canvas work before the first `navigator.share`
+ * when a File is already in hand — iOS Safari drops the user gesture and fails
+ * with "Load failed".
+ */
+export async function shareViaNativeSheet(options: {
+ imageUrl?: string | null;
+ file?: File | null;
+ imgEl?: HTMLImageElement | null;
+ title?: string;
+ text?: string;
+}): Promise {
+ const title = options.title || "EventBuzz";
+ const text = options.text || `Check out my photo from ${title}!`;
+ const imageUrl = options.imageUrl || undefined;
+
+ if (typeof navigator.share !== "function") {
+ throw new Error("Sharing is not supported on this device");
+ }
+
+ const readyFile = options.file && options.file.size > 0 ? options.file : null;
+
+ const tryShareFiles = async (file: File): Promise => {
+ const payloadWithFiles: ShareData = { title, text, files: [file] };
+ try {
+ const canFiles =
+ typeof navigator.canShare !== "function" || navigator.canShare(payloadWithFiles);
+ if (!canFiles) return "skip";
+ await navigator.share(payloadWithFiles);
+ return "shared";
+ } catch (err) {
+ const name = err instanceof DOMException ? err.name : "";
+ if (name === "AbortError") return "cancelled";
+ return "skip";
+ }
+ };
+
+ // 1) Prefer already-cached bytes — no await before share (keeps iOS user gesture).
+ if (readyFile) {
+ const result = await tryShareFiles(readyFile);
+ if (result !== "skip") return result;
+ }
+
+ // 2) Text/url-only share still before any fetch (gesture-safe fallback).
+ const payloadTextOnly: ShareData = imageUrl
+ ? { title, text, url: imageUrl }
+ : { title, text };
+
+ try {
+ await navigator.share(payloadTextOnly);
+ return "shared";
+ } catch (err) {
+ const name = err instanceof DOMException ? err.name : "";
+ if (name === "AbortError") return "cancelled";
+ // Continue — try loading bytes for a second attempt (gesture may already be gone).
+ }
+
+ // 3) Last resort: fetch / canvas, then share (may only work on Android).
+ if (!readyFile) {
+ const file = await resolveShareFile({
+ file: null,
+ imageUrl,
+ imgEl: options.imgEl,
+ });
+ if (file) {
+ const result = await tryShareFiles(file);
+ if (result !== "skip") return result;
+ }
+ }
+
+ throw new Error("Could not share this photo. Try Download, then share from your photos.");
+}
+
+/**
+ * Share to a specific platform (desktop / non–share-sheet path).
+ * Does NOT use navigator.share so each button can target a different app.
+ */
+export async function sharePhotoWallImage(options: {
+ platform: PhotoWallSharePlatform;
+ imageUrl: string;
+ file?: File | null;
+ title?: string;
+ text?: string;
+}): Promise {
+ const title = options.title || "EventBuzz";
+ const text = options.text || `Check out my photo from ${title}!`;
+ const imageUrl = options.imageUrl;
+ const platform = options.platform;
+
+ const intent = imageUrl ? platformShareUrl(platform, imageUrl, text) : null;
+ if (intent) {
+ // Copy caption so users can paste if the app only receives the URL.
+ await copyText(`${text}\n${imageUrl}`);
+ openUrl(intent);
+ return "shared";
+ }
+
+ // Instagram / Snapchat (or missing public URL): save file locally, copy caption, open the app.
+ const file =
+ options.file && options.file.size > 0
+ ? options.file
+ : imageUrl
+ ? await fetchImageFile(imageUrl, "photo-wall.jpg")
+ : null;
+ if (!file) throw new Error("Could not load image for sharing");
+ return saveImageAndOpenApp(platform, file, text);
+}
diff --git a/src/lib/sessionPresentationRtdb.ts b/src/lib/sessionPresentationRtdb.ts
new file mode 100644
index 0000000..33018db
--- /dev/null
+++ b/src/lib/sessionPresentationRtdb.ts
@@ -0,0 +1,42 @@
+import { ref, onValue, type Unsubscribe } from "firebase/database";
+import { getRtdb } from "./firebaseClient";
+
+export type SessionPresentFocus = "questions" | null;
+
+export type SessionPresentationState = {
+ focus: SessionPresentFocus;
+ updatedAt: string | null;
+};
+
+function readPresentation(raw: unknown): SessionPresentationState {
+ if (!raw || typeof raw !== "object" || Array.isArray(raw)) {
+ return { focus: null, updatedAt: null };
+ }
+ const o = raw as Record;
+ const focus = o.focus === "questions" ? "questions" : null;
+ const updatedAt = o.updatedAt != null ? String(o.updatedAt) : null;
+ return { focus, updatedAt };
+}
+
+/** Subscribe to `sessions/{sessionId}/presentation` present-screen focus. */
+export function subscribeSessionPresentation(
+ sessionId: string,
+ onData: (state: SessionPresentationState) => void,
+ onError?: (e: Error) => void,
+): Unsubscribe {
+ const db = getRtdb();
+ const r = ref(db, `sessions/${sessionId}/presentation`);
+ return onValue(
+ r,
+ (snap) => {
+ try {
+ onData(readPresentation(snap.val()));
+ } catch (e) {
+ onError?.(e instanceof Error ? e : new Error(String(e)));
+ }
+ },
+ (err) => {
+ onError?.(err instanceof Error ? err : new Error(String(err)));
+ },
+ );
+}
diff --git a/src/lib/sessionQuizPollsRtdb.ts b/src/lib/sessionQuizPollsRtdb.ts
index 01c1b4a..aacf66a 100644
--- a/src/lib/sessionQuizPollsRtdb.ts
+++ b/src/lib/sessionQuizPollsRtdb.ts
@@ -18,6 +18,8 @@ export type RtdbQuizPollSettings = {
liveQuestionId?: string | null;
/** quiz_master: projector shows correct answer highlight */
showCorrectAnswer?: boolean;
+ /** quiz_master: projector switches to Leaderboard tab */
+ showLeaderboard?: boolean;
};
/** Normalize status from RTDB; legacy nodes without status are treated as active. */
@@ -49,6 +51,24 @@ export function firstQuizMasterOrManualVisibleId(
return null;
}
+/** Visible quiz_master / manual activity ids (audience on-air set). */
+export function onAirManualOrQuizMasterIds(visibleQuizPolls: RtdbQuizPollListItem[]): string[] {
+ return visibleQuizPolls
+ .filter((item) => {
+ const mode = settingsDisplayMode(item.settings);
+ return mode === "quiz_master" || mode === "manual";
+ })
+ .map((item) => item._id);
+}
+
+export function quizPollTakePath(eventId: string, sessionId: string, quizPollId: string): string {
+ return `/quiz-poll?${new URLSearchParams({
+ event_id: eventId,
+ session_id: sessionId,
+ quiz_poll_id: quizPollId,
+ }).toString()}`;
+}
+
/**
* Session list & take-page visibility (aligned with dashboard display modes).
*
@@ -140,7 +160,21 @@ function readSettings(raw: Record): RtdbQuizPollSettings {
? String(o.liveQuestionId).trim()
: null;
const showCorrectAnswer = o.showCorrectAnswer === true || o.showCorrectAnswer === "true";
- return { isLive, startTime, endTime, displayMode, status, timeRestricted, timeLimit, showResults, allowMultipleAttempts, liveQuestionId, showCorrectAnswer };
+ const showLeaderboard = o.showLeaderboard === true || o.showLeaderboard === "true";
+ return {
+ isLive,
+ startTime,
+ endTime,
+ displayMode,
+ status,
+ timeRestricted,
+ timeLimit,
+ showResults,
+ allowMultipleAttempts,
+ liveQuestionId,
+ showCorrectAnswer,
+ showLeaderboard,
+ };
}
function mapOptions(raw: unknown): RtdbQuizPollOption[] {
diff --git a/src/pages/AiAvatarPage.tsx b/src/pages/AiAvatarPage.tsx
new file mode 100644
index 0000000..eb94650
--- /dev/null
+++ b/src/pages/AiAvatarPage.tsx
@@ -0,0 +1,664 @@
+import {
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+ type ReactNode,
+} from "react";
+import {
+ Download,
+ Facebook,
+ Instagram,
+ Linkedin,
+ Loader2,
+ Share2,
+} from "lucide-react";
+import { useParams } from "react-router-dom";
+import { AuthShell } from "../components/auth/AuthShell";
+import { PhotoWallCropModal } from "../components/PhotoWallCropModal";
+import { PhotoWallEventHeader } from "../components/PhotoWallEventHeader";
+import {
+ getAiAvatarMeta,
+ getVisitorLoginPreview,
+ uploadAiAvatarPhoto,
+ type AiAvatarMeta,
+ type AiAvatarPublicTemplate,
+ type PhotoWallSharePlatforms,
+} from "../lib/api";
+import { getAttendeeParticipant, getAttendeeToken } from "../lib/attendeeAuth";
+import { getImageNaturalSize, ratiosMatch } from "../lib/cropImage";
+import {
+ canUseNativeShareSheet,
+ downloadImageFromUrl,
+ ensureShareableImageFile,
+ fetchImageFile,
+ sharePhotoWallImage,
+ shareViaNativeSheet,
+} from "../lib/photoWallShare";
+import {
+ EB_VISITOR_CONTEXT_KEY,
+ setPostAuthReturnPath,
+ type EbVisitorContext,
+} from "../types/visitorContext";
+
+function WhiteCard({ children }: { children: ReactNode }) {
+ return (
+
+ );
+}
+
+type CropSession = {
+ imageSrc: string;
+ sourceFileName: string;
+};
+
+type DoneState = {
+ previewUrl: string | null;
+ fileUrl: string | null;
+};
+
+const SHARE_LABELS: Array<{ key: keyof PhotoWallSharePlatforms; label: string }> = [
+ { key: "linkedin", label: "LinkedIn" },
+ { key: "facebook", label: "Facebook" },
+ { key: "instagram", label: "Instagram" },
+ { key: "snapchat", label: "Snapchat" },
+ { key: "x", label: "X" },
+ { key: "whatsapp", label: "WhatsApp" },
+];
+
+/** Rotating copy while WaveSpeed runs — keeps visitors engaged; not a real status feed. */
+const GENERATING_PIPELINE_MESSAGES = [
+ "Uploading your selfie…",
+ "Detecting your face…",
+ "Aligning features with the avatar…",
+ "Blending skin tones…",
+ "Matching lighting and shadows…",
+ "Applying AI head swap…",
+ "Refining facial details…",
+ "Smoothing edges…",
+ "Polishing the final look…",
+ "Almost there — finishing your avatar…",
+];
+
+function ShareIcon({ platform }: { platform: keyof PhotoWallSharePlatforms }) {
+ if (platform === "linkedin") return (null);
+ const resultImgRef = useRef(null);
+ const [meta, setMeta] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [err, setErr] = useState(null);
+ const [selectedAvatar, setSelectedAvatar] = useState(null);
+ const [file, setFile] = useState(null);
+ const [previewUrl, setPreviewUrl] = useState(null);
+ const [submitting, setSubmitting] = useState(false);
+ const [pipelineMsgIndex, setPipelineMsgIndex] = useState(0);
+ const [picking, setPicking] = useState(false);
+ const [done, setDone] = useState(null);
+ const [actionMsg, setActionMsg] = useState(null);
+ const [cropSession, setCropSession] = useState(null);
+ const [shareFile, setShareFile] = useState(null);
+
+ useEffect(() => {
+ if (!submitting) {
+ setPipelineMsgIndex(0);
+ return;
+ }
+ const id = window.setInterval(() => {
+ setPipelineMsgIndex((i) => Math.min(i + 1, GENERATING_PIPELINE_MESSAGES.length - 1));
+ }, 2800);
+ return () => window.clearInterval(id);
+ }, [submitting]);
+
+ const load = useCallback(async () => {
+ if (!uploadToken) return;
+ setLoading(true);
+ setErr(null);
+ try {
+ const data = await getAiAvatarMeta(uploadToken);
+ setMeta(data);
+ } catch (e) {
+ setMeta(null);
+ setErr(e instanceof Error ? e.message : "AI Avatar not available");
+ } finally {
+ setLoading(false);
+ }
+ }, [uploadToken]);
+
+ useEffect(() => {
+ void load();
+ }, [load]);
+
+ useEffect(() => {
+ return () => {
+ if (previewUrl) URL.revokeObjectURL(previewUrl);
+ };
+ }, [previewUrl]);
+
+ useEffect(() => {
+ return () => {
+ if (cropSession?.imageSrc) URL.revokeObjectURL(cropSession.imageSrc);
+ };
+ }, [cropSession]);
+
+ useEffect(() => {
+ if (!done?.fileUrl) return;
+ let cancelled = false;
+ void fetchImageFile(done.fileUrl, "ai-avatar.jpg")
+ .then((f) => {
+ if (!cancelled) setShareFile(f);
+ })
+ .catch(() => {
+ /* keep local */
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [done?.fileUrl]);
+
+ const loggedIn = Boolean(getAttendeeToken() && getAttendeeParticipant());
+ const enabledSharePlatforms = useMemo(
+ () => SHARE_LABELS.filter((item) => Boolean(meta?.sharePlatforms?.[item.key])),
+ [meta?.sharePlatforms],
+ );
+ const useNativeShare = useMemo(() => canUseNativeShareSheet(), []);
+ const showShare = enabledSharePlatforms.length > 0;
+ const allowDownload = meta?.allowDownload !== false;
+ const shareCaption = `Check out my AI avatar from ${meta?.eventName || "the event"}!`;
+
+ const clearSelectedPhoto = useCallback(() => {
+ setFile(null);
+ setPreviewUrl((prev) => {
+ if (prev) URL.revokeObjectURL(prev);
+ return null;
+ });
+ if (fileRef.current) fileRef.current.value = "";
+ }, []);
+
+ const applySelectedFile = useCallback((next: File) => {
+ setFile(next);
+ setPreviewUrl((prev) => {
+ if (prev) URL.revokeObjectURL(prev);
+ return URL.createObjectURL(next);
+ });
+ }, []);
+
+ // Square selfie crop for head swap (avatar photoSlot, else 1:1).
+ const cropTarget = useMemo(() => {
+ const slot = selectedAvatar?.photoSlot;
+ if (slot?.w && slot?.h) {
+ return { w: Math.max(1, slot.w), h: Math.max(1, slot.h) };
+ }
+ return { w: 1080, h: 1080 };
+ }, [selectedAvatar]);
+
+ const handleFileChange = async (selected: File | null) => {
+ if (!selected) {
+ clearSelectedPhoto();
+ return;
+ }
+ if (!selected.type.startsWith("image/")) {
+ setErr("Please choose an image file");
+ return;
+ }
+ setErr(null);
+ setPicking(true);
+ try {
+ if (!cropTarget) {
+ applySelectedFile(selected);
+ return;
+ }
+ const natural = await getImageNaturalSize(selected);
+ if (ratiosMatch(natural.width, natural.height, cropTarget.w, cropTarget.h)) {
+ applySelectedFile(selected);
+ return;
+ }
+ const src = URL.createObjectURL(selected);
+ setCropSession({ imageSrc: src, sourceFileName: selected.name || "selfie.jpg" });
+ } catch (e) {
+ setErr(e instanceof Error ? e.message : "Could not process image");
+ } finally {
+ setPicking(false);
+ if (fileRef.current) fileRef.current.value = "";
+ }
+ };
+
+ const onSubmit = async () => {
+ if (!uploadToken || !file || !meta || !selectedAvatar) return;
+ setSubmitting(true);
+ setErr(null);
+ setActionMsg(null);
+ try {
+ const result = await uploadAiAvatarPhoto(uploadToken, file, selectedAvatar._id);
+ setShareFile(null);
+ setDone({
+ previewUrl: result.previewUrl,
+ fileUrl: result.fileUrl,
+ });
+ clearSelectedPhoto();
+ if (result.fileUrl) {
+ void fetchImageFile(result.fileUrl, "ai-avatar.jpg")
+ .then((f) => setShareFile(f))
+ .catch(() => {
+ void ensureShareableImageFile(file, "ai-avatar.jpg").then(setShareFile);
+ });
+ }
+ } catch (e2) {
+ setErr(e2 instanceof Error ? e2.message : "Could not create avatar");
+ } finally {
+ setSubmitting(false);
+ }
+ };
+
+ const resetForNew = () => {
+ setDone(null);
+ setShareFile(null);
+ setActionMsg(null);
+ setErr(null);
+ setSelectedAvatar(null);
+ clearSelectedPhoto();
+ };
+
+ const onDownload = async () => {
+ setActionMsg(null);
+ try {
+ if (shareFile) {
+ const objectUrl = URL.createObjectURL(shareFile);
+ const a = document.createElement("a");
+ a.href = objectUrl;
+ a.download = shareFile.name || "ai-avatar.jpg";
+ document.body.appendChild(a);
+ a.click();
+ a.remove();
+ URL.revokeObjectURL(objectUrl);
+ setActionMsg("Download started");
+ return;
+ }
+ const src = done?.fileUrl || done?.previewUrl;
+ if (!src) return;
+ await downloadImageFromUrl(src, "ai-avatar.jpg");
+ setActionMsg("Download started");
+ } catch (e) {
+ setActionMsg(e instanceof Error ? e.message : "Download failed");
+ }
+ };
+
+ const onNativeShare = async () => {
+ const src = done?.fileUrl || done?.previewUrl;
+ setActionMsg(null);
+ try {
+ const result = await shareViaNativeSheet({
+ file: shareFile,
+ imageUrl: src,
+ imgEl: resultImgRef.current,
+ title: meta?.eventName || "AI Avatar",
+ text: shareCaption,
+ });
+ if (result === "shared") setActionMsg("Shared");
+ else setActionMsg(null);
+ } catch (e) {
+ const msg = e instanceof Error ? e.message : "Share failed";
+ setActionMsg(
+ /load failed|failed to fetch/i.test(msg)
+ ? "Could not share this photo. Try Download, then share from your photos."
+ : msg,
+ );
+ }
+ };
+
+ const onShare = async (platform: keyof PhotoWallSharePlatforms) => {
+ const src = done?.fileUrl || done?.previewUrl;
+ if (!src && !shareFile) return;
+ setActionMsg(null);
+ try {
+ const result = await sharePhotoWallImage({
+ platform,
+ imageUrl: src || "",
+ file: shareFile,
+ title: meta?.eventName || "AI Avatar",
+ text: shareCaption,
+ });
+ if (result === "shared") {
+ setActionMsg(
+ platform === "whatsapp" || platform === "facebook" || platform === "x" || platform === "linkedin"
+ ? "Opening app with your photo link"
+ : "Shared",
+ );
+ } else if (result === "cancelled") {
+ setActionMsg(null);
+ } else {
+ setActionMsg("Photo saved and caption copied — paste / attach it in the app");
+ }
+ } catch (e) {
+ setActionMsg(e instanceof Error ? e.message : "Share failed");
+ }
+ };
+
+ const goLogin = async () => {
+ if (!meta?.eventId) return;
+ try {
+ const preview = await getVisitorLoginPreview(meta.eventId);
+ const ctx: EbVisitorContext = {
+ type: "event",
+ eventId: meta.eventId,
+ event: preview,
+ fetchedAt: new Date().toISOString(),
+ };
+ localStorage.setItem(EB_VISITOR_CONTEXT_KEY, JSON.stringify(ctx));
+ setPostAuthReturnPath(`/ai-avatar/${uploadToken}`);
+ window.location.assign(`/login?type=event&id=${encodeURIComponent(meta.eventId)}`);
+ } catch {
+ setErr("Could not open login");
+ }
+ };
+
+ if (!uploadToken) {
+ return (
+
+
+ Missing link
+
+
+ );
+ }
+
+ if (loading) {
+ return (
+
+
+ Loading…
+
+
+ );
+ }
+
+ if (err && !meta) {
+ return (
+
+
+ {err}
+
+
+ );
+ }
+
+ if (submitting) {
+ const step = pipelineMsgIndex + 1;
+ const total = GENERATING_PIPELINE_MESSAGES.length;
+ const progressPct = Math.round((step / total) * 100);
+ return (
+
+
+ {meta?.event ? (
+
+ ) : null}
+
+
+
+
Creating your avatar
+
+ {GENERATING_PIPELINE_MESSAGES[pipelineMsgIndex]}
+
+
+
This can take up to a minute — hang tight
+
+
+ );
+ }
+
+ if (done) {
+ return (
+
+
+ {meta?.event ? (
+
+ ) : null}
+ Your avatar
+
+ Here’s your AI avatar. You can download or share it.
+
+ {(done.fileUrl || done.previewUrl) ? (
+
+
{
+ const img = e.currentTarget;
+ if (img.crossOrigin) {
+ img.crossOrigin = null;
+ img.src = done.previewUrl || done.fileUrl || img.src;
+ return;
+ }
+ if (done.fileUrl && img.src !== done.fileUrl) {
+ img.src = done.fileUrl;
+ }
+ }}
+ />
+
+
+ Create another
+
+ {allowDownload ? (
+ void onDownload()}
+ className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg border border-[#ddd] bg-white px-4 text-sm font-semibold text-[#333] hover:bg-[#fafafa]"
+ >
+
+ ) : null}
+
+ {showShare ? (
+
+
+ Share
+
+ {useNativeShare ? (
+
void onNativeShare()}
+ className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg border border-[#ddd] bg-white px-4 text-sm font-semibold text-[#333] hover:bg-[#fafafa]"
+ >
+
+ ) : (
+
+ {enabledSharePlatforms.map((item) => (
+ void onShare(item.key)}
+ className="inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-[#ddd] bg-white px-3 text-xs font-semibold text-[#333] hover:bg-[#fafafa]"
+ >
+
+ ))}
+
+ )}
+
{actionMsg}
: null}
+
+
+ );
+ }
+
+ return (
+
+
+ {meta?.event ? (
+
+ ) : null}
+
+ {meta?.accessMode === "login" && !loggedIn ? (
+
+
AI Avatar
+
Sign in to create your AI avatar.
+
void goLogin()}
+ className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-[#D32F2F] px-4 text-sm font-semibold text-white hover:bg-[#b71c1c]"
+ >
+ Sign in to continue
+
+
+
Choose an avatar
+
Pick an avatar, then upload your selfie.
+ {!meta?.avatars?.length ? (
+
No avatars available yet.
+ ) : (
+
+ {meta.avatars.map((avatar) => (
+
setSelectedAvatar(avatar)}
+ className="overflow-hidden rounded-lg border border-[#e5e5e5] bg-[#f8f8f8] text-left hover:border-[#D32F2F]"
+ >
+
+ {avatar.imageUrl ? (
+
+ ) : (
+
+ No preview
+
+ )}
+
+ {avatar.name}
+
+
+ ))}
+
+ )}
+ {err ?
{err}
: null}
+
+
{
+ setSelectedAvatar(null);
+ clearSelectedPhoto();
+ setErr(null);
+ }}
+ className="text-sm font-semibold text-[#D32F2F]"
+ >
+ ← Change avatar
+
+
Upload selfie
+
+ Avatar: {selectedAvatar.name}
+
+
+
void handleFileChange(e.target.files?.[0] || null)}
+ />
+ {previewUrl ? (
+
+
+
+ ) : null}
+
fileRef.current?.click()}
+ className="inline-flex h-11 w-full items-center justify-center rounded-lg border border-[#ddd] bg-white px-4 text-sm font-semibold text-[#333] hover:bg-[#fafafa] disabled:opacity-55"
+ >
+ {picking ? "Processing…" : file ? "Change selfie" : "Choose selfie"}
+
+
void onSubmit()}
+ className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-[#D32F2F] px-4 text-sm font-semibold text-white hover:bg-[#b71c1c] disabled:opacity-55"
+ >
+ {submitting ? "Creating avatar…" : "Create avatar"}
+
+ {err ?
{err}
: null}
+
+
+ {cropSession && cropTarget ? (
+ {
+ URL.revokeObjectURL(cropSession.imageSrc);
+ setCropSession(null);
+ }}
+ onConfirm={(cropped) => {
+ URL.revokeObjectURL(cropSession.imageSrc);
+ setCropSession(null);
+ applySelectedFile(cropped);
+ }}
+ />
+ ) : null}
+
+ );
+}
diff --git a/src/pages/CodeEntryPage.tsx b/src/pages/CodeEntryPage.tsx
index 9919a9a..a172966 100644
--- a/src/pages/CodeEntryPage.tsx
+++ b/src/pages/CodeEntryPage.tsx
@@ -4,7 +4,7 @@ import { AuthShell } from "../components/auth/AuthShell";
import { normalizeJoinCodeInput, resolveJoinCodeAndNavigate } from "../lib/joinCodeNavigation";
/**
- * Handles https://join.eventbuzz.live/code/{code} — same resolve flow as the homepage join strip.
+ * Handles https://join.eventbuzz.live/code/{code} — same resolve flow as the homepage join form.
*/
export function CodeEntryPage() {
const { code: codeParam } = useParams<{ code: string }>();
diff --git a/src/pages/FeedbackPage.tsx b/src/pages/FeedbackPage.tsx
index ea52b8a..783dc23 100644
--- a/src/pages/FeedbackPage.tsx
+++ b/src/pages/FeedbackPage.tsx
@@ -3,6 +3,7 @@ import { Link, useSearchParams } from "react-router-dom";
import { HeaderMobile } from "../components/HeaderMobile";
import { MobileShell } from "../components/MobileShell";
import { DynamicFeedbackForm } from "../components/DynamicFeedbackForm";
+import { useAutoNavigateToLiveQuizPoll } from "../hooks/useAutoNavigateToLiveQuizPoll";
import { useEventRegistrationSettings } from "../hooks/useEventRegistrationSettings";
import {
getVisitorFeedbackFormSchema,
@@ -21,6 +22,12 @@ export function FeedbackPage() {
const eventId = urlEventId || ctx?.eventId || "";
const sessionId = urlSessionId || ctx?.sessionId || "";
+ useAutoNavigateToLiveQuizPoll({
+ eventId,
+ sessionId,
+ enabled: Boolean(eventId && sessionId),
+ });
+
const [eventSnapshot, setEventSnapshot] = useState(
ctx?.eventId === eventId && ctx.event ? ctx.event : null,
);
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index dfa8a1d..0c07d51 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,418 +1,71 @@
-import { useCallback, useState, type ReactNode } from "react";
-import {
- BarChart3,
- CalendarClock,
- ClipboardList,
- Facebook,
- Gamepad2,
- Mail,
- MessageCircle,
- MessageCircleQuestion,
- Network,
- Phone,
- Youtube,
-} from "lucide-react";
-import { Link } from "react-router-dom";
-import aboutBanner from "../assets/about-banner.png";
-import { JoinCodeTopStrip } from "../components/marketing/JoinCodeTopStrip";
-import { MarketingFooter } from "../components/marketing/MarketingFooter";
-import { MarketingHeader } from "../components/marketing/MarketingHeader";
-import { MarketingHeroSection } from "../components/marketing/MarketingHeroSection";
-import {
- MARKETING_HEADER_SCROLL_MARGIN,
- scrollToId,
- shellX,
-} from "../components/marketing/marketingLayout";
-import { PORTAL_LOGIN_URL, PORTAL_REGISTER_URL } from "../constants/portalUrls";
+import { Ticket } from "lucide-react";
+import { AuthShell } from "../components/auth/AuthShell";
+import { useJoinEventCode } from "../hooks/useJoinEventCode";
-const featureItems = [
- {
- title: "Live Q&A",
- body: "Engage your audience with real-time questions and answers during sessions.",
- Icon: MessageCircleQuestion,
- },
- {
- title: "Quizzes",
- body: "Make learning fun with interactive quizzes.",
- Icon: ClipboardList,
- },
- {
- title: "Gamification",
- body: "Boosts event engagement by turning participation into a rewarding experience.",
- Icon: Gamepad2,
- },
- {
- title: "Interactive Polls",
- body: "Capture instant feedback with live polls and see results in real-time.",
- Icon: BarChart3,
- },
- {
- title: "Event Agenda",
- body: "Keep attendees informed with detailed session schedules and speaker info.",
- Icon: CalendarClock,
- },
- {
- title: "Multi-Track Events",
- body: "Manage complex events with multiple tracks and concurrent sessions.",
- Icon: Network,
- },
-] as const;
-
-/** Marketing homepage (default route `/`) */
+/** Join entry page (default route `/`) — enter event or session code. */
export function Home() {
- const [captcha, setCaptcha] = useState(() => randomCaptcha());
- const [captchaInput, setCaptchaInput] = useState("");
-
- const reloadCaptcha = useCallback(() => {
- setCaptcha(randomCaptcha());
- setCaptchaInput("");
- }, []);
-
- function handleContactSubmit(e: React.FormEvent) {
- e.preventDefault();
- reloadCaptcha();
- }
+ const { code, setCode, submitting, joinError, handleJoin } = useJoinEventCode();
return (
-
-
+
+
+
+
-
-
-
-
- {/* Features */}
-
-
-
-
- Everything you need to create{" "}
- engaging
- {" and "}
- interactive events
-
-
- Our platform enables real-time interaction through live Q&A sessions, instant polls,
- engaging quizzes, and much more.
-
-
-
- {featureItems.map(({ title, body, Icon }) => (
-
+
+
-
-
-
-
- {title}
-
-
- {body}
-
-
-
- ))}
-
-
-
-
- {/* About + stats */}
-
-
-
-
- About eventbuzz
-
-
- EventBuzz is a comprehensive event engagement platform designed to transform how
- organizers connect with their audience. Whether you're hosting a conference,
- workshop, training session, or corporate event, EventBuzz provides the tools you need
- to create memorable experiences.
-
-
- Our platform enables real-time interaction through live Q&A sessions, instant polls,
- engaging quizzes, and much more.
-
-
-
-
-
-
+
+
+
+
+ Join with your code
+
+
+ Enter the code provided by the event organiser — you’ll usually find it in your
+ invite, on the event screen, or on a poster at the venue.
+
+
-
- {[
- { n: "1000+", l: "Events Hosted" },
- { n: "50K+", l: "Attendees" },
- { n: "96%", l: "Satisfaction" },
- ].map((row) => (
-
-
- {row.n}
-
-
- {row.l}
-
-
- ))}
-
-
-
-
- Contact Us
-
-
- Have questions? We'd love to hear from you. Send us a message!
-
-
-
- {/* Form + Get in touch */}
-
-
- {/* Bottom CTA */}
-
-
-
-
- Ready to Engage Your Audience?
-
-
- Get started with EventBuzz today and transform your events into interactive
- experiences.
-
-
-
-
- Start free trial
-
-
scrollToId("contact")}
- className="rounded-full border border-white/60 px-[18px] py-3 text-xs font-semibold uppercase tracking-wide text-white shadow-[0_4px_4px_rgba(0,0,0,0.15)] lg:px-8 lg:py-4 lg:text-lg"
- >
- Contact us
-
-
-
-
-
-
- {label}
-
- {children}
-
- );
-}
-
-function randomCaptcha() {
- const chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
- return Array.from({ length: 4 }, () => chars[Math.floor(Math.random() * chars.length)]).join(
- " ",
- );
-}
-
-function CaptchaRow({
- captcha,
- value,
- onChange,
- onReload,
-}: {
- captcha: string;
- value: string;
- onChange: (v: string) => void;
- onReload: () => void;
-}) {
- return (
-
-
-
- {captcha}
-
-
- Reload
-
-
onChange(e.target.value)}
- placeholder="Enter Captcha"
- className="h-[51px] w-full rounded-lg border border-[rgba(116,112,112,0.3)] bg-[rgba(157,157,172,0.07)] px-4 font-inter text-sm text-[#24282f] lg:h-[59px] lg:self-end lg:rounded-xl lg:p-4"
- aria-label="Enter captcha"
- />
-
(null);
+ const [shareFile, setShareFile] = useState(null);
+ const [actionMsg, setActionMsg] = useState(null);
+ const caption = `Check out my photo from ${eventName}!`;
+ /** Grid preview uses CDN thumb (`url`) only — never the API file proxy. */
+ const previewSrc = match.url || undefined;
+ const downloadSrc = match.fileUrl || match.url || undefined;
+
+ useEffect(() => {
+ if (!match.fileUrl) return;
+ let cancelled = false;
+ void fetchImageFile(match.fileUrl, match.originalFileName || "event-photo.jpg")
+ .then((f) => {
+ if (!cancelled) setShareFile(f);
+ })
+ .catch(() => {
+ /* ignore — share can still try URL / canvas */
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [match.fileUrl, match.originalFileName]);
+
+ const onDownload = async () => {
+ setActionMsg(null);
+ try {
+ if (shareFile) {
+ const objectUrl = URL.createObjectURL(shareFile);
+ const a = document.createElement("a");
+ a.href = objectUrl;
+ a.download = shareFile.name || "event-photo.jpg";
+ document.body.appendChild(a);
+ a.click();
+ a.remove();
+ URL.revokeObjectURL(objectUrl);
+ setActionMsg("Download started");
+ return;
+ }
+ if (!downloadSrc) return;
+ await downloadImageFromUrl(downloadSrc, match.originalFileName || "event-photo.jpg");
+ setActionMsg("Download started");
+ } catch (e) {
+ setActionMsg(e instanceof Error ? e.message : "Download failed");
+ }
+ };
+
+ const onNativeShare = async () => {
+ setActionMsg(null);
+ try {
+ const result = await shareViaNativeSheet({
+ file: shareFile,
+ imageUrl: downloadSrc,
+ imgEl: imgRef.current,
+ title: eventName,
+ text: caption,
+ });
+ if (result === "shared") setActionMsg("Shared");
+ else setActionMsg(null);
+ } catch (e) {
+ const msg = e instanceof Error ? e.message : "Share failed";
+ setActionMsg(
+ /load failed|failed to fetch/i.test(msg)
+ ? "Could not share this photo. Try Download, then share from your photos."
+ : msg,
+ );
+ }
+ };
+
+ const onShare = async (platform: keyof PhotoWallSharePlatforms) => {
+ if (!downloadSrc && !shareFile) return;
+ setActionMsg(null);
+ try {
+ const result = await sharePhotoWallImage({
+ platform,
+ imageUrl: downloadSrc || "",
+ file: shareFile,
+ title: eventName,
+ text: caption,
+ });
+ if (result === "shared") {
+ setActionMsg(
+ platform === "whatsapp" || platform === "facebook" || platform === "x" || platform === "linkedin"
+ ? "Opening app with your photo link"
+ : "Shared",
+ );
+ } else if (result === "cancelled") {
+ setActionMsg(null);
+ } else {
+ setActionMsg("Photo saved and caption copied — paste / attach it in the app");
+ }
+ } catch (e) {
+ setActionMsg(e instanceof Error ? e.message : "Share failed");
+ }
+ };
+
+ return (
+
+
{
+ const img = e.currentTarget;
+ // Retry without CORS for CDN; do not switch to API file proxy for display.
+ if (img.crossOrigin) {
+ img.crossOrigin = null;
+ if (previewSrc) img.src = previewSrc;
+ }
+ }}
+ />
+
+ {allowDownload ? (
+
void onDownload()}
+ className="inline-flex h-9 w-full items-center justify-center gap-2 rounded-lg border border-[#ddd] bg-white px-3 text-xs font-semibold text-[#333] hover:bg-[#fafafa]"
+ >
+
+ ) : null}
+ {showShare ? (
+ useNativeShare ? (
+
void onNativeShare()}
+ className="inline-flex h-9 w-full items-center justify-center gap-2 rounded-lg border border-[#ddd] bg-white px-3 text-xs font-semibold text-[#333] hover:bg-[#fafafa]"
+ >
+
+ ) : (
+
+ {enabledSharePlatforms.map((item) => (
+ void onShare(item.key)}
+ className="inline-flex h-8 items-center justify-center gap-1 rounded-lg border border-[#ddd] bg-white px-2 text-[11px] font-semibold text-[#333] hover:bg-[#fafafa]"
+ >
+
+ ))}
+
+ )
+ ) : null}
+ {actionMsg ?
{actionMsg}
: null}
+
+
(null);
+ const [meta, setMeta] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [err, setErr] = useState(null);
+ const [file, setFile] = useState(null);
+ const [previewUrl, setPreviewUrl] = useState(null);
+ const [searching, setSearching] = useState(false);
+ const [matches, setMatches] = useState(null);
+ const [searched, setSearched] = useState(false);
+
+ const load = useCallback(async () => {
+ if (!searchToken) return;
+ setLoading(true);
+ setErr(null);
+ try {
+ const data = await getPhotoSearchMeta(searchToken);
+ setMeta(data);
+ } catch (e) {
+ setMeta(null);
+ setErr(e instanceof Error ? e.message : "Photo search not available");
+ } finally {
+ setLoading(false);
+ }
+ }, [searchToken]);
+
+ useEffect(() => {
+ void load();
+ }, [load]);
+
+ useEffect(() => {
+ return () => {
+ if (previewUrl) URL.revokeObjectURL(previewUrl);
+ };
+ }, [previewUrl]);
+
+ const loggedIn = Boolean(getAttendeeToken() && getAttendeeParticipant());
+ const enabledSharePlatforms = useMemo(
+ () => SHARE_LABELS.filter((item) => Boolean(meta?.sharePlatforms?.[item.key])),
+ [meta?.sharePlatforms],
+ );
+ const useNativeShare = useMemo(() => canUseNativeShareSheet(), []);
+ const showShare = enabledSharePlatforms.length > 0;
+ const allowDownload = meta?.allowDownload !== false;
+
+ const clearFile = () => {
+ setFile(null);
+ setPreviewUrl((prev) => {
+ if (prev) URL.revokeObjectURL(prev);
+ return null;
+ });
+ if (fileRef.current) fileRef.current.value = "";
+ };
+
+ const onPick = (selected: File | null) => {
+ if (!selected) {
+ clearFile();
+ return;
+ }
+ if (!selected.type.startsWith("image/")) {
+ setErr("Please choose an image file");
+ return;
+ }
+ setErr(null);
+ setMatches(null);
+ setSearched(false);
+ setFile(selected);
+ setPreviewUrl((prev) => {
+ if (prev) URL.revokeObjectURL(prev);
+ return URL.createObjectURL(selected);
+ });
+ };
+
+ const onSearch = async () => {
+ if (!searchToken || !file || !meta) return;
+ setSearching(true);
+ setErr(null);
+ try {
+ const result = await searchPhotoSearchMatches(searchToken, file);
+ setMatches(result.matches);
+ setSearched(true);
+ } catch (e) {
+ setMatches(null);
+ setSearched(false);
+ setErr(e instanceof Error ? e.message : "Search failed");
+ } finally {
+ setSearching(false);
+ }
+ };
+
+ const goLogin = async () => {
+ if (!meta?.eventId) return;
+ try {
+ const preview = await getVisitorLoginPreview(meta.eventId);
+ const ctx: EbVisitorContext = {
+ type: "event",
+ eventId: meta.eventId,
+ event: preview,
+ fetchedAt: new Date().toISOString(),
+ };
+ localStorage.setItem(EB_VISITOR_CONTEXT_KEY, JSON.stringify(ctx));
+ setPostAuthReturnPath(`/photo-search/${searchToken}`);
+ window.location.assign(`/login?type=event&id=${encodeURIComponent(meta.eventId)}`);
+ } catch {
+ setErr("Could not open login");
+ }
+ };
+
+ if (!searchToken) {
+ return (
+
+
+ Missing search link
+
+
+ );
+ }
+
+ if (loading) {
+ return (
+
+
+ Loading…
+
+
+ );
+ }
+
+ if (err && !meta) {
+ return (
+
+
+ {err}
+
+
+ );
+ }
+
+ return (
+
+ 0)}>
+ {meta?.event ? (
+
+ ) : null}
+
+ Find Photos
+
+ Upload a selfie to find photos of you from {meta?.eventName || "the event"}.
+
+
+ {meta?.accessMode === "login" && !loggedIn ? (
+
+
Sign in to search for your photos.
+
void goLogin()}
+ className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-[#D32F2F] px-4 text-sm font-semibold text-white hover:bg-[#b71c1c]"
+ >
+ Sign in to continue
+
+
+
+
onPick(e.target.files?.[0] || null)}
+ />
+ {previewUrl ? (
+
+
+
+ ) : null}
+
fileRef.current?.click()}
+ className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg border border-[#ddd] bg-white px-4 text-sm font-semibold text-[#333] hover:bg-[#fafafa]"
+ >
+ {file ? "Change photo" : "Choose photo"}
+
+
+
+
void onSearch()}
+ className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-[#D32F2F] px-4 text-sm font-semibold text-white hover:bg-[#b71c1c] disabled:opacity-55"
+ >
+
+
+ {err ?
{err}
: null}
+
+ {searched ? (
+
+
+ {matches && matches.length > 0
+ ? `${matches.length} match${matches.length === 1 ? "" : "es"}`
+ : "No matches found"}
+
+ {matches && matches.length > 0 ? (
+
+ {matches.map((m) => (
+
+ ) : null}
+
+ ) : null}
+
+
+ );
+}
diff --git a/src/pages/PhotoWallPresentPage.tsx b/src/pages/PhotoWallPresentPage.tsx
new file mode 100644
index 0000000..4930f24
--- /dev/null
+++ b/src/pages/PhotoWallPresentPage.tsx
@@ -0,0 +1,113 @@
+import { useCallback, useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { getPhotoWallPresent, type PhotoWallPresentData } from "../lib/api";
+
+const POLL_MS = 4000;
+
+export function PhotoWallPresentPage() {
+ const { presentToken } = useParams<{ presentToken: string }>();
+ const [data, setData] = useState(null);
+ const [err, setErr] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ const refresh = useCallback(async () => {
+ if (!presentToken) return;
+ try {
+ const next = await getPhotoWallPresent(presentToken);
+ setData(next);
+ setErr(null);
+ } catch (e) {
+ setErr(e instanceof Error ? e.message : "Photo wall not available");
+ setData(null);
+ } finally {
+ setLoading(false);
+ }
+ }, [presentToken]);
+
+ useEffect(() => {
+ void refresh();
+ const id = window.setInterval(() => void refresh(), POLL_MS);
+ return () => window.clearInterval(id);
+ }, [refresh]);
+
+ if (loading) {
+ return (
+
+ Loading wall…
+
+ );
+ }
+
+ if (!data) {
+ return (
+
+
Photo wall unavailable
+
{err}
+
+
+
Photo Wall
+
{data.eventName}
+
+
+ {data.photos.length === 0 ? (
+
+ Waiting for photos…
+
+ ) : (
+
+ {data.photos.map((p) => (
+
+
+ {showNames && p.displayName ? (
+
+ {p.displayName}
+
+ ) : null}
+
+ ))}
+
+ )}
+
(null);
+ const resultImgRef = useRef(null);
+ const [meta, setMeta] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [err, setErr] = useState(null);
+ const [file, setFile] = useState(null);
+ const [previewUrl, setPreviewUrl] = useState(null);
+ const [values, setValues] = useState>({});
+ const [uploaderName, setUploaderName] = useState("");
+ const [submitting, setSubmitting] = useState(false);
+ const [picking, setPicking] = useState(false);
+ const [done, setDone] = useState(null);
+ const [actionMsg, setActionMsg] = useState(null);
+ const [cropSession, setCropSession] = useState(null);
+ /** Cached bytes for share/download — avoids CORS/network fail when opening the OS sheet. */
+ const [shareFile, setShareFile] = useState(null);
+
+ const load = useCallback(async () => {
+ if (!uploadToken) return;
+ setLoading(true);
+ setErr(null);
+ try {
+ const data = await getPhotoWallUploadMeta(uploadToken);
+ setMeta(data);
+ } catch (e) {
+ setMeta(null);
+ setErr(e instanceof Error ? e.message : "Photo wall not available");
+ } finally {
+ setLoading(false);
+ }
+ }, [uploadToken]);
+
+ useEffect(() => {
+ void load();
+ }, [load]);
+
+ useEffect(() => {
+ return () => {
+ if (previewUrl) URL.revokeObjectURL(previewUrl);
+ };
+ }, [previewUrl]);
+
+ useEffect(() => {
+ return () => {
+ if (cropSession?.imageSrc) URL.revokeObjectURL(cropSession.imageSrc);
+ };
+ }, [cropSession]);
+
+ const fields = useMemo(
+ () => (meta?.form?.fields || []).filter((f) => f.label?.trim() && f.type !== "section"),
+ [meta],
+ );
+
+ const loggedIn = Boolean(getAttendeeToken() && getAttendeeParticipant());
+ const enabledSharePlatforms = useMemo(
+ () => SHARE_LABELS.filter((item) => Boolean(meta?.sharePlatforms?.[item.key])),
+ [meta?.sharePlatforms],
+ );
+ const useNativeShare = useMemo(() => canUseNativeShareSheet(), []);
+
+ const clearSelectedPhoto = useCallback(() => {
+ setFile(null);
+ setPreviewUrl((prev) => {
+ if (prev) URL.revokeObjectURL(prev);
+ return null;
+ });
+ if (fileRef.current) fileRef.current.value = "";
+ }, []);
+
+ useEffect(() => {
+ if (!done?.fileUrl) return;
+ let cancelled = false;
+ void fetchImageFile(done.fileUrl, "photo-wall.jpg")
+ .then((f) => {
+ if (!cancelled) setShareFile(f);
+ })
+ .catch(() => {
+ /* keep any local shareFile from upload */
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [done?.fileUrl]);
+
+ const resetForNewUpload = useCallback(() => {
+ setDone(null);
+ setShareFile(null);
+ setActionMsg(null);
+ setErr(null);
+ clearSelectedPhoto();
+ }, [clearSelectedPhoto]);
+
+ const applySelectedFile = useCallback((next: File) => {
+ setFile(next);
+ setPreviewUrl((prev) => {
+ if (prev) URL.revokeObjectURL(prev);
+ return URL.createObjectURL(next);
+ });
+ }, []);
+
+ const handleFileChange = async (selected: File | null) => {
+ if (!selected) {
+ clearSelectedPhoto();
+ return;
+ }
+ if (!selected.type.startsWith("image/")) {
+ setErr("Please choose an image file");
+ return;
+ }
+ setErr(null);
+ setPicking(true);
+ try {
+ const requireCrop = Boolean(meta?.requireUploadCrop);
+ if (!requireCrop) {
+ applySelectedFile(selected);
+ return;
+ }
+ const maxW = Math.max(1, Number(meta?.maxPhotoWidth) || 1080);
+ const maxH = Math.max(1, Number(meta?.maxPhotoHeight) || 1080);
+ const natural = await getImageNaturalSize(selected);
+ if (ratiosMatch(natural.width, natural.height, maxW, maxH)) {
+ applySelectedFile(selected);
+ return;
+ }
+ const src = URL.createObjectURL(selected);
+ setCropSession({ imageSrc: src, sourceFileName: selected.name || "photo.jpg" });
+ } catch (e) {
+ setErr(e instanceof Error ? e.message : "Could not process image");
+ } finally {
+ setPicking(false);
+ if (fileRef.current) fileRef.current.value = "";
+ }
+ };
+
+ const onSubmit = async (e: FormEvent) => {
+ e.preventDefault();
+ if (!uploadToken || !file || !meta) return;
+ if (meta.askUploaderName && !uploaderName.trim()) {
+ setErr("Please enter your name");
+ return;
+ }
+ setSubmitting(true);
+ setErr(null);
+ setActionMsg(null);
+ try {
+ const localFile = file;
+ const result = await uploadPhotoWallSelfie(uploadToken, file, values, {
+ displayName: meta.askUploaderName ? uploaderName.trim() : undefined,
+ });
+ // Keep local bytes immediately so Share works even if the API file proxy fails (CORS/network).
+ setShareFile(localFile);
+ setDone({
+ awaitingApproval: result.awaitingApproval,
+ previewUrl: result.previewUrl,
+ fileUrl: result.fileUrl,
+ framed: result.framed,
+ });
+ clearSelectedPhoto();
+ // Normalize HEIC/etc. in the background so iOS accepts the file in the OS share sheet.
+ void ensureShareableImageFile(localFile, "photo-wall.jpg").then((shareable) => {
+ setShareFile((prev) => {
+ // Don't clobber a framed file already prefetched from the API.
+ if (prev && prev !== localFile) return prev;
+ return shareable;
+ });
+ });
+ } catch (e2) {
+ setErr(e2 instanceof Error ? e2.message : "Upload failed");
+ } finally {
+ setSubmitting(false);
+ }
+ };
+
+ const onDownload = async () => {
+ setActionMsg(null);
+ try {
+ if (shareFile) {
+ const objectUrl = URL.createObjectURL(shareFile);
+ const a = document.createElement("a");
+ a.href = objectUrl;
+ a.download = shareFile.name || "photo-wall.jpg";
+ document.body.appendChild(a);
+ a.click();
+ a.remove();
+ URL.revokeObjectURL(objectUrl);
+ setActionMsg("Download started");
+ return;
+ }
+ const src = done?.fileUrl || done?.previewUrl;
+ if (!src) return;
+ await downloadImageFromUrl(src, "photo-wall.jpg");
+ setActionMsg("Download started");
+ } catch (e) {
+ setActionMsg(e instanceof Error ? e.message : "Download failed");
+ }
+ };
+
+ const shareCaption = `Check out my photo from ${meta?.eventName || "the event"}!`;
+
+ const onNativeShare = async () => {
+ const src = done?.fileUrl || done?.previewUrl;
+ setActionMsg(null);
+ try {
+ // Pass cached File first so share runs without a prior network await (iOS gesture).
+ const result = await shareViaNativeSheet({
+ file: shareFile,
+ imageUrl: src,
+ imgEl: resultImgRef.current,
+ title: meta?.eventName || "Photo wall",
+ text: shareCaption,
+ });
+ if (result === "shared") setActionMsg("Shared");
+ else setActionMsg(null);
+ } catch (e) {
+ const msg = e instanceof Error ? e.message : "Share failed";
+ setActionMsg(
+ /load failed|failed to fetch/i.test(msg)
+ ? "Could not share this photo. Try Download, then share from your photos."
+ : msg,
+ );
+ }
+ };
+
+ const onShare = async (platform: keyof PhotoWallSharePlatforms) => {
+ const src = done?.fileUrl || done?.previewUrl;
+ if (!src && !shareFile) return;
+ setActionMsg(null);
+ try {
+ const result = await sharePhotoWallImage({
+ platform,
+ imageUrl: src || "",
+ file: shareFile,
+ title: meta?.eventName || "Photo wall",
+ text: shareCaption,
+ });
+ if (result === "shared") {
+ setActionMsg(
+ platform === "whatsapp" || platform === "facebook" || platform === "x" || platform === "linkedin"
+ ? "Opening app with your photo link"
+ : "Shared",
+ );
+ } else if (result === "cancelled") {
+ setActionMsg(null);
+ } else {
+ setActionMsg("Photo saved and caption copied — paste / attach it in the app");
+ }
+ } catch (e) {
+ setActionMsg(e instanceof Error ? e.message : "Share failed");
+ }
+ };
+
+ const goLogin = async () => {
+ if (!meta?.eventId) return;
+ try {
+ const preview = await getVisitorLoginPreview(meta.eventId);
+ const ctx: EbVisitorContext = {
+ type: "event",
+ eventId: meta.eventId,
+ event: preview,
+ fetchedAt: new Date().toISOString(),
+ };
+ localStorage.setItem(EB_VISITOR_CONTEXT_KEY, JSON.stringify(ctx));
+ setPostAuthReturnPath(`/photo-wall/${uploadToken}`);
+ window.location.assign(`/login?type=event&id=${encodeURIComponent(meta.eventId)}`);
+ } catch {
+ setErr("Could not open login");
+ }
+ };
+
+ if (!uploadToken) {
+ return (
+
+
+ Missing upload link
+
+
+ );
+ }
+
+ if (loading) {
+ return (
+
+
+ Loading…
+
+
+ );
+ }
+
+ if (err && !meta) {
+ return (
+
+
+ {err}
+
+
+ );
+ }
+
+ if (done) {
+ const canDownload = Boolean(meta?.allowFramedDownload && (done.fileUrl || done.previewUrl));
+ const showShare = Boolean((done.fileUrl || done.previewUrl) && enabledSharePlatforms.length > 0);
+ return (
+
+
+ {meta?.event ? (
+
+ ) : null}
+
+ {done.framed ? "Your framed photo" : "Photo uploaded"}
+
+
+ {done.awaitingApproval
+ ? "Thanks! Your photo is waiting for approval."
+ : done.framed
+ ? "Here’s your generated photo. You can edit, download, or share it."
+ : "Thanks! Your photo was added to the wall."}
+
+ {(done.fileUrl || done.previewUrl) ? (
+
+
{
+ const img = e.currentTarget;
+ // Retry without CORS mode if CDN blocks anonymous reads.
+ if (img.crossOrigin) {
+ img.crossOrigin = null;
+ img.src = done.previewUrl || done.fileUrl || img.src;
+ return;
+ }
+ if (done.fileUrl && img.src !== done.fileUrl) {
+ img.src = done.fileUrl;
+ }
+ }}
+ />
+
+
+
+ {canDownload ? (
+ void onDownload()}
+ className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg border border-[#ddd] bg-white px-4 text-sm font-semibold text-[#333] hover:bg-[#fafafa]"
+ >
+
+ ) : null}
+
+ {showShare ? (
+
+
+ Share
+
+ {useNativeShare ? (
+
void onNativeShare()}
+ className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg border border-[#ddd] bg-white px-4 text-sm font-semibold text-[#333] hover:bg-[#fafafa]"
+ >
+
+ ) : (
+
+ {enabledSharePlatforms.map((item) => (
+ void onShare(item.key)}
+ className="inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-[#ddd] bg-white px-3 text-xs font-semibold text-[#333] hover:bg-[#fafafa]"
+ >
+
+ ))}
+
+ )}
+
{actionMsg}
: null}
+
+
+ );
+ }
+
+ return (
+
+
+ {meta?.event ? (
+
+ ) : null}
+ Upload your photo
+
+ {meta?.form?.description || "Add a selfie to the event photo wall."}
+
+
+ {meta?.accessMode === "login" && !loggedIn ? (
+
+
Sign in to upload your photo for this event.
+
void goLogin()}
+ className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-[#D32F2F] px-4 text-sm font-semibold text-white hover:bg-[#b71c1c]"
+ >
+ Sign in to continue
+
+
+ 
+