// app/bereal-composer.jsx — Composer photo (caméra live + fallback pellicule) // Loaded after bereal-overlays.jsx so it can use BrPhotoFrame. function BrComposer({ prompt, onClose, onPublish }) { // Étape : "capture" (caméra) | "review" (preview + caption) const [step, setStep] = React.useState("capture"); // Source : "camera" | "upload" const [source, setSource] = React.useState("camera"); // Photo capturée (base64 data URL) const [photoUrl, setPhotoUrl] = React.useState(null); // Caption + name const [caption, setCaption] = React.useState(""); const [name, setName] = React.useState(() => Store.get(BR_NAME_KEY, "")); // Caméra : refs + état const videoRef = React.useRef(null); const streamRef = React.useRef(null); const fileRef = React.useRef(null); const [cameraError, setCameraError] = React.useState(null); const [cameraReady, setCameraReady] = React.useState(false); // ─── Démarrage caméra ──────────────────────────────────────────────── React.useEffect(() => { if (step !== "capture" || source !== "camera") return; let cancelled = false; async function start() { try { if (!navigator.mediaDevices?.getUserMedia) { throw new Error("Caméra non supportée par ce navigateur"); } const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: "environment" }, width: { ideal: 1080 }, height: { ideal: 1350 } }, audio: false, }); if (cancelled) { stream.getTracks().forEach(t => t.stop()); return; } streamRef.current = stream; if (videoRef.current) { videoRef.current.srcObject = stream; await videoRef.current.play().catch(() => {}); setCameraReady(true); } } catch (e) { if (cancelled) return; setCameraError(e?.message || "Accès caméra bloqué"); setSource("upload"); // bascule auto sur l'uploader } } start(); return () => { cancelled = true; if (streamRef.current) { streamRef.current.getTracks().forEach(t => t.stop()); streamRef.current = null; } setCameraReady(false); }; }, [step, source]); // ─── Capture ───────────────────────────────────────────────────────── const capture = () => { const v = videoRef.current; if (!v || !v.videoWidth) return; const canvas = document.createElement("canvas"); // Cible 4:5 portrait, max 1080 de hauteur const targetRatio = 4 / 5; const srcRatio = v.videoWidth / v.videoHeight; let sw, sh, sx, sy; if (srcRatio > targetRatio) { sh = v.videoHeight; sw = sh * targetRatio; sx = (v.videoWidth - sw) / 2; sy = 0; } else { sw = v.videoWidth; sh = sw / targetRatio; sx = 0; sy = (v.videoHeight - sh) / 2; } const dh = Math.min(1080, sh); const dw = dh * targetRatio; canvas.width = dw; canvas.height = dh; const ctx = canvas.getContext("2d"); ctx.drawImage(v, sx, sy, sw, sh, 0, 0, dw, dh); const dataUrl = canvas.toDataURL("image/jpeg", 0.82); setPhotoUrl(dataUrl); setStep("review"); }; // ─── Upload pellicule ──────────────────────────────────────────────── const onPickFile = (e) => { const f = e.target.files?.[0]; if (!f) return; if (!f.type.startsWith("image/")) return; const reader = new FileReader(); reader.onload = () => { setPhotoUrl(reader.result); setStep("review"); }; reader.readAsDataURL(f); e.target.value = ""; }; // ─── Publier ───────────────────────────────────────────────────────── const submit = () => { if (!photoUrl) return; Store.set(BR_NAME_KEY, name); onPublish({ photo_url: photoUrl, photo_color: null, caption: caption.slice(0, 80).trim(), nom_invite: name.trim() || "Anonyme", }); }; const retake = () => { setPhotoUrl(null); setStep("capture"); setSource("camera"); setCameraError(null); }; // ─── Render ───────────────────────────────────────────────────────── return (
{/* Header */}
PROMPT N° {prompt.numero || "★"} {prompt.id === "phila-secret" && <>· PHILA}
"{prompt.question}"
{/* Body — capture ou review */}
{step === "capture" ? ( ) : ( )}
); } // ───────────────────────────────────────────────────────────────────────── // Étape 1 : capture (caméra live ou pellicule) // ───────────────────────────────────────────────────────────────────────── function CaptureStep({ source, setSource, videoRef, cameraReady, cameraError, capture, fileRef, onPickFile }) { return ( <>
{source === "camera" ? ( <>