+
+ );
+}
+
+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
+
+ {children}
+ Missing link
+Loading…
+{err}
+
+
+ ) : null}
+
+
+
+
+ Creating your avatar
++ {GENERATING_PIPELINE_MESSAGES[pipelineMsgIndex]} +
+
+
+
+ This can take up to a minute — hang tight
+
+
+ ) : 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;
+ }
+ }}
+ />
+
+ ) : null}
+
+
+ {allowDownload ? (
+
+ ) : null}
+
+ {showShare ? (
+
+
+ ) : null}
+ {actionMsg ? + Share +
+ {useNativeShare ? ( + + ) : ( +
+ {enabledSharePlatforms.map((item) => (
+
+ ))}
+
+ )}
+ {actionMsg}
: null} +
+
+ ) : null}
+
+ {meta?.accessMode === "login" && !loggedIn ? (
+
+
+ ) : !selectedAvatar ? (
+ AI Avatar
+Sign in to create your AI avatar.
+ +
+
+ ) : (
+ Choose an avatar
+Pick an avatar, then upload your selfie.
+ {!meta?.avatars?.length ? ( +No avatars available yet.
+ ) : ( +
+ {meta.avatars.map((avatar) => (
+
+ ))}
+
+ )}
+ {err ? {err}
: null} +
+
+
+ )}
+ Upload selfie
++ Avatar: {selectedAvatar.name} +
+ + void handleFileChange(e.target.files?.[0] || null)} + /> + {previewUrl ? ( +
+ 
+
+ ) : null}
+
+
+ {err ? {err}
: 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" },
+];
+
+function ShareIcon({ platform }: { platform: keyof PhotoWallSharePlatforms }) {
+ if (platform === "linkedin") return
+
+ {children}
+
+ 
{
+ 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;
+ }
+ }}
+ />
+
+ );
+}
+
+export function PhotoSearchPage() {
+ const { searchToken } = useParams<{ searchToken: string }>();
+ const fileRef = useRef
+ {allowDownload ? (
+
+ ) : null}
+ {showShare ? (
+ useNativeShare ? (
+
+ ) : (
+
+
+ {enabledSharePlatforms.map((item) => (
+
+ ))}
+
+ )
+ ) : null}
+ {actionMsg ? {actionMsg}
: null} +Missing search link
+Loading…
+{err}
+
+
+ ) : 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.
+ +
+
+ )}
+
+ onPick(e.target.files?.[0] || null)}
+ />
+ {previewUrl ? (
+
+
+
+
+ {err ?
+
+
+ ) : null}
+
+ {err}
: null} + + {searched ? ( +
+
+ ) : null}
+ + {matches && matches.length > 0 + ? `${matches.length} match${matches.length === 1 ? "" : "es"}` + : "No matches found"} +
+ {matches && matches.length > 0 ? ( +
+ {matches.map((m) => (
+
+ ) : null}
+ Share
-
- {enabledSharePlatforms.map((item) => (
-
- ))}
-
+ {useNativeShare ? (
+
+ ) : (
+
+ {enabledSharePlatforms.map((item) => (
+
+ ))}
+
+ )}
{actionMsg}
: null} diff --git a/src/pages/SocialSharePage.tsx b/src/pages/SocialSharePage.tsx new file mode 100644 index 0000000..23d5259 --- /dev/null +++ b/src/pages/SocialSharePage.tsx @@ -0,0 +1,604 @@ +import { + useCallback, + useEffect, + useMemo, + useRef, + useState, + type ReactNode, +} from "react"; +import { + Download, + Facebook, + Instagram, + Linkedin, + 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 { + getSocialShareMeta, + getVisitorLoginPreview, + uploadSocialSharePhoto, + type PhotoWallSharePlatforms, + type SocialShareMeta, + type SocialSharePublicFrame, +} 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" },
+];
+
+function ShareIcon({ platform }: { platform: keyof PhotoWallSharePlatforms }) {
+ if (platform === "linkedin") return
+
+ {children}
+ Missing link
+Loading…
+{err}
+
+
+ ) : null}
+ Your photo
++ Here’s your framed photo. 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;
+ }
+ }}
+ />
+
+ ) : null}
+
+
+ {allowDownload ? (
+
+ ) : null}
+
+ {showShare ? (
+
+
+ ) : null}
+ {actionMsg ? + Share +
+ {useNativeShare ? ( + + ) : ( +
+ {enabledSharePlatforms.map((item) => (
+
+ ))}
+
+ )}
+ {actionMsg}
: null} +
+
+ ) : null}
+
+ {meta?.accessMode === "login" && !loggedIn ? (
+
+
+ ) : !selectedFrame ? (
+ Social Share
+Sign in to create and share your photo.
+ +
+
+ ) : (
+ Choose a frame
+Pick a frame, then upload your photo.
+ {!meta?.frames?.length ? ( +No frames available yet.
+ ) : ( +
+ {meta.frames.map((frame) => (
+
+ ))}
+
+ )}
+ {err ? {err}
: null} +
+
+
+ )}
+ Upload photo
++ Frame: {selectedFrame.name} +
+ + void handleFileChange(e.target.files?.[0] || null)} + /> + {previewUrl ? ( +
+
+
+ ) : null}
+
+
+ {err ? {err}
: null} +