setPausado(true)} onPointerUp={() => setPausado(false)} onPointerCancel={() => setPausado(false)}>

{item.midia ? (item.midia.tipo === "video" ?

); } /* ---------- Criador ---------- */ function StoryComposer({ eu, empresas, inicial, onPublicar, onFechar }) { const [fundo, setFundo] = React.useState(inicial?.fundo || "aurora"); const [filtro, setFiltro] = React.useState(inicial?.filtro || "nenhum"); const [texto, setTexto] = React.useState(inicial?.texto || ""); const [pos, setPos] = React.useState({ x: inicial?.tx ?? 50, y: inicial?.ty ?? 50 }); const [tamanho, setTamanho] = React.useState(inicial?.tamanho || "1.6rem"); const [empresa, setEmpresa] = React.useState(inicial?.empresa || ""); const [aba, setAba] = React.useState("fundo"); const [lateralAberta, setLateralAberta] = React.useState(false); const [editando, setEditando] = React.useState(false); const tela = React.useRef(null); const arr = React.useRef(null); const [buscaEmp, setBuscaEmp] = React.useState(""); const [midia, setMidia] = React.useState(inicial?.midia || null); // { tipo: "foto"|"video", src } const [gravando, setGravando] = React.useState(false); const [camAberta, setCamAberta] = React.useState(false); const [erroCam, setErroCam] = React.useState(""); const [seg, setSeg] = React.useState(0); const [zoom, setZoom] = React.useState(1); const zoomRef = React.useRef(1), zoomIni = React.useRef({ y: 0, z: 1 }); const aplicarZoom = (z) => { z = Math.max(1, Math.min(5, z)); zoomRef.current = z; setZoom(z); // zoom óptico quando a câmera suporta; senão, visual (scale) — o vídeo gravado leva o zoom óptico, a foto leva os dois const tr = stream.current && stream.current.getVideoTracks()[0]; const cap = tr && tr.getCapabilities ? tr.getCapabilities() : null; if (cap && cap.zoom) { const v = Math.min(cap.zoom.max, Math.max(cap.zoom.min, cap.zoom.min + (z - 1) * (cap.zoom.max - cap.zoom.min) / 4)); tr.applyConstraints({ advanced: [{ zoom: v }] }).catch(() => {}); } }; const video = React.useRef(null), stream = React.useRef(null), rec = React.useRef(null), pedacos = React.useRef([]), cron = React.useRef(null); const inputGaleria = React.useRef(null), inputCamFoto = React.useRef(null), inputCamVideo = React.useRef(null); const lerArquivo = (file) => { if (!file) return; fecharCam(); const tipo = file.type.startsWith("video") ? "video" : "foto"; const url = URL.createObjectURL(file); // fotos passam pelo compressor (até 1280px, WebP) antes de entrar no story — de MB para KB if (tipo === "foto") { if (window.ReinoFotos && window.ReinoFotos.comprimir) window.ReinoFotos.comprimir(file).then((r) => setMidia({ tipo, src: r.url })).catch(() => { const rd = new FileReader(); rd.onload = () => setMidia({ tipo, src: rd.result }); rd.readAsDataURL(file); }); else { const rd = new FileReader(); rd.onload = () => setMidia({ tipo, src: rd.result }); rd.readAsDataURL(file); } } else setMidia({ tipo, src: url, temporario: true }); setAba("filtro"); }; const podeCam = !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia); const celularRef = React.useRef(/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)); const [lado, setLado] = React.useState(celularRef.current ? "environment" : "user"); const ladoRef = React.useRef(lado); const virarCam = async () => { const novo = ladoRef.current === "user" ? "environment" : "user"; ladoRef.current = novo; setLado(novo); if (stream.current) { stream.current.getTracks().forEach((tr) => tr.stop()); stream.current = null; } await abrirCam(); }; const fecharCam = () => { if (stream.current) { stream.current.getTracks().forEach((tr) => tr.stop()); stream.current = null; } setCamAberta(false); setGravando(false); clearInterval(cron.current); setSeg(0); }; const abrirCam = async () => { setErroCam(""); try { const s = await navigator.mediaDevices.getUserMedia({ video: { facingMode: ladoRef.current, width: { ideal: 1080 }, height: { ideal: 1920 }, aspectRatio: { ideal: 9 / 16 } }, audio: true }); stream.current = s; setCamAberta(true); setAba("midia"); zoomRef.current = 1; setZoom(1); const tr = s.getVideoTracks()[0]; const cap = tr && tr.getCapabilities ? tr.getCapabilities() : null; if (cap && cap.zoom) tr.applyConstraints({ advanced: [{ zoom: cap.zoom.min }] }).catch(() => {}); setTimeout(() => { if (video.current) { video.current.srcObject = s; video.current.play().catch(() => {}); } }, 50); } catch (e) { setErroCam("Não foi possível abrir a câmera. Use a galeria ou a câmera do celular."); } }; const tirarFoto = () => { const v = video.current; if (!v) return; const c = document.createElement("canvas"); c.width = v.videoWidth || 720; c.height = v.videoHeight || 1280; const g = c.getContext("2d"); if (ladoRef.current === "user") { g.translate(c.width, 0); g.scale(-1, 1); } const z = zoomRef.current; const sw = c.width / z, sh = c.height / z; g.drawImage(v, (c.width - sw) / 2, (c.height - sh) / 2, sw, sh, 0, 0, c.width, c.height); setMidia({ tipo: "foto", src: c.toDataURL("image/jpeg", .86), ajuste: "cover" }); fecharCam(); setAba("filtro"); }; const gravar = () => { if (!stream.current) return; if (gravando) { rec.current && rec.current.stop(); return; } pedacos.current = []; const tipoOk = ["video/webm;codecs=vp9,opus", "video/webm", "video/mp4"].find((m) => window.MediaRecorder && MediaRecorder.isTypeSupported(m)) || ""; const r = new MediaRecorder(stream.current, tipoOk ? { mimeType: tipoOk } : undefined); r.ondataavailable = (e) => { if (e.data.size) pedacos.current.push(e.data); }; r.onstop = () => { const b = new Blob(pedacos.current, { type: r.mimeType || "video/webm" }); setMidia({ tipo: "video", src: URL.createObjectURL(b), temporario: true, ajuste: "cover" }); fecharCam(); setAba("filtro"); }; rec.current = r; r.start(); setGravando(true); setSeg(0); cron.current = setInterval(() => setSeg((s) => { if (s + 1 >= 30) { r.state === "recording" && r.stop(); } return s + 1; }), 1000); }; React.useEffect(() => { if (!inicial && podeCam) abrirCam(); return () => fecharCam(); }, []); // toque = foto · segurar = grava enquanto segura · soltar = para e mostra a prévia const segurar = React.useRef(null); const obtDown = (e) => { e.preventDefault(); if (rec.current && rec.current.state === "recording") return; zoomIni.current = { y: e.clientY, z: zoomRef.current }; e.currentTarget.setPointerCapture && e.currentTarget.setPointerCapture(e.pointerId); segurar.current = setTimeout(() => { segurar.current = null; gravar(); }, 350); }; const obtMove = (e) => { if (!(rec.current && rec.current.state === "recording")) return; const dy = zoomIni.current.y - e.clientY; aplicarZoom(zoomIni.current.z + dy / 80); }; const obtUp = () => { if (segurar.current) { clearTimeout(segurar.current); segurar.current = null; tirarFoto(); } else if (rec.current && rec.current.state === "recording") rec.current.stop(); }; const celular = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent) || (navigator.maxTouchPoints > 1 && window.innerWidth < 1100); const iniciarArrasto = (e) => { e.preventDefault(); e.stopPropagation(); arr.current = true; tela.current.setPointerCapture(e.pointerId); mover(e); }; const mover = (e) => { if (!arr.current) return; const r = tela.current.getBoundingClientRect(); setPos({ x: Math.max(8, Math.min(92, ((e.clientX - r.left) / r.width) * 100)), y: Math.max(8, Math.min(90, ((e.clientY - r.top) / r.height) * 100)) }); }; const soltar = () => { arr.current = false; }; const f = FUNDOS.find((x) => x.id === fundo), fl = FILTROS.find((x) => x.id === filtro); const publicar = () => { if (!texto.trim() && !empresa && !midia) return; fecharCam(); onPublicar({ id: "s" + Date.now(), fundo, filtro, texto: texto.trim(), tx: pos.x, ty: pos.y, tamanho, empresa, midia, quando: "agora", curtidas: 0, visto: true, repost: inicial?.repost }); }; const empresasFiltradas = empresas.filter((n) => !buscaEmp || n.toLowerCase().includes(buscaEmp.toLowerCase())).slice(0, 6); return (

{ if (!camAberta) { setAba(null); setLateralAberta(false); setEditando(false); } }}> {midia && !camAberta ? (midia.tipo === "video" ?