"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; import ClientPortalFavoriteButton from "@/components/ClientPortalFavoriteButton"; import { ArrowRight, ChevronLeft, ChevronRight, Pause, Play, Volume2, VolumeX, X } from "lucide-react"; import { useVisaoDaLoja } from "@/components/VisaoDaLojaContext"; import { precoDoCartao } from "@/lib/widgets-da-home"; import { miniatura } from "@/lib/foto"; import { fotoDoProduto, type BoutiqueProduto } from "./BoutiqueCardDoProduto"; import { useArrastoComMouse, useJanela } from "./ganchos-da-home"; /* "Compre pelo vídeo" da Boutique (referência, seção 9.2). O carrossel: cards verticais 2:3 (200 × 300, raio 15) em fila, arrastáveis com o mouse e com o dedo, sem setas. Os cards que estão na tela tocam sozinhos, MUDOS e em loop (IntersectionObserver; os que saem pausam; nada é baixado antes de aparecer: preload none). Por cima, o play central pulsando; embaixo, o cartãozinho branco do produto, que leva à página dele. O player: abre por cima de tudo, fundo escuro, vídeo 9:16 no meio no computador e a tela inteira no celular, COM SOM (o clique libera o áudio; se o navegador recusar, começa mudo e o botão de som avisa). Quando o vídeo acaba vai para o próximo; uma barrinha por vídeo no topo mostra o andamento. Pausa, som e fechar no canto; setas laterais no computador; na lateral direita, embaixo, o coração do favorito (o MESMO do card do produto) e o WhatsApp, que compartilha o link do produto (wa.me: a pessoa escolhe para quem manda); toque (lados = anterior/próximo, meio = pausa) e deslize no celular (para o lado troca, para baixo fecha). O cartão do produto escurecido leva à página do produto (e pausa o vídeo). Fecha com X, Esc e clique fora; trava a rolagem do fundo e prende o foco dentro dele. Os dados vêm do vídeo do produto que a loja já cadastra (servidor: videos-da-boutique.server.ts). O preço obedece às regras da loja. */ export type BoutiqueVideoDaVitrine = { produto: BoutiqueProduto; endereco: string }; function usePrecoDoVideo() { const visao = useVisaoDaLoja(); return useCallback( (produto: BoutiqueProduto) => { if (!visao.mostrarPreco) return visao.textoNoLugarDoPreco || ""; return precoDoCartao(produto, visao.textoNoLugarDoPreco).texto; }, [visao.mostrarPreco, visao.textoNoLugarDoPreco] ); } function CardDoVideo({ video, indice, aoAbrir, pausarTodos, slug, }: { video: BoutiqueVideoDaVitrine; indice: number; aoAbrir: (indice: number) => void; pausarTodos: boolean; slug: string; }) { const elemento = useRef(null); const [naTela, setNaTela] = useState(false); const preco = usePrecoDoVideo(); const foto = fotoDoProduto(video.produto); useEffect(() => { const alvo = elemento.current; if (!alvo || typeof IntersectionObserver === "undefined") return; const observador = new IntersectionObserver(([entrada]) => setNaTela(Boolean(entrada?.isIntersecting)), { threshold: 0.6 }); observador.observe(alvo); return () => observador.disconnect(); }, []); useEffect(() => { const alvo = elemento.current; if (!alvo) return; const calmo = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches; if (naTela && !pausarTodos && !calmo) { alvo.muted = true; void alvo.play().catch(() => {}); } else { alvo.pause(); } }, [naTela, pausarTodos]); const texto = preco(video.produto); return ( /* O tamanho acompanha a tela como na referência: 200 × 300 no celular e até 300 × 450 numa tela de 1920 (--bq-video-l, theme.css). */

{/* O cartãozinho do produto leva direto à página do produto, sem passar pelo vídeo. O nome na fonte de revista (Georgia) e o preço na fonte do texto (Montserrat), as duas do tema. */} {foto ? ( /* eslint-disable-next-line @next/next/no-img-element */

) : null} {video.produto.name} {texto ? ( {texto} ) : null}

); } /* ------------------------------------------------------------- player */ /* O logotipo do WhatsApp (o lucide não tem). */ function IconeDoWhatsApp({ className }: { className?: string }) { return ( ); } /* O link do WhatsApp que compartilha o produto: só o texto, sem número (a pessoa escolhe a conversa). O endereço é o da página do produto nesta loja. */ function linkParaCompartilhar(nome: string, slug: string, produtoId: string) { const origem = typeof window !== "undefined" ? window.location.origin : ""; const endereco = `${origem}/${slug}/p/${encodeURIComponent(produtoId)}`; return `https://wa.me/?text=${encodeURIComponent(`${nome}\n${endereco}`)}`; } function PlayerDosVideos({ videos, inicio, slug, aoFechar, clienteId, favoritos, corDaMarca, }: { videos: BoutiqueVideoDaVitrine[]; inicio: number; slug: string; aoFechar: () => void; clienteId?: string | null; favoritos?: string[] | null; corDaMarca?: string; }) { const router = useRouter(); const [indice, setIndice] = useState(inicio); const [pausado, setPausado] = useState(false); const [mudo, setMudo] = useState(false); const [andamento, setAndamento] = useState(0); const elemento = useRef(null); const caixa = useRef(null); const botaoFechar = useRef(null); const toque = useRef<{ x: number; y: number; t: number } | null>(null); const preco = usePrecoDoVideo(); const total = videos.length; const atual = videos[Math.min(indice, total - 1)]; useJanela(true, aoFechar, caixa, botaoFechar); const ir = useCallback( (passo: number) => { setIndice((i) => { const proximo = i + passo; if (proximo < 0 || proximo >= total) return i; return proximo; }); }, [total] ); /* Troca de vídeo: começa do zero, com som (o clique de quem abriu libera o áudio). O navegador que não deixar começa mudo. */ useEffect(() => { const alvo = elemento.current; if (!alvo) return; setAndamento(0); setPausado(false); alvo.currentTime = 0; alvo.muted = mudo; alvo.play().catch(() => { alvo.muted = true; setMudo(true); void alvo.play().catch(() => setPausado(true)); }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [indice]); /* A barrinha anda lisa (a cada quadro), não aos pulos do timeupdate. */ useEffect(() => { let quadro = 0; const passo = () => { const alvo = elemento.current; if (alvo && alvo.duration > 0) setAndamento(Math.min(1, alvo.currentTime / alvo.duration)); quadro = window.requestAnimationFrame(passo); }; quadro = window.requestAnimationFrame(passo); return () => window.cancelAnimationFrame(quadro); }, []); useEffect(() => { const aoTeclar = (e: KeyboardEvent) => { if (e.key === "ArrowRight") ir(1); else if (e.key === "ArrowLeft") ir(-1); }; document.addEventListener("keydown", aoTeclar); return () => document.removeEventListener("keydown", aoTeclar); }, [ir]); const alternarPausa = () => { const alvo = elemento.current; if (!alvo) return; if (alvo.paused) { void alvo.play().catch(() => {}); setPausado(false); } else { alvo.pause(); setPausado(true); } }; const alternarSom = () => { const alvo = elemento.current; const novo = !mudo; setMudo(novo); if (alvo) { alvo.muted = novo; if (!novo && alvo.paused) void alvo.play().catch(() => {}); } }; const aoAcabar = () => { if (indice < total - 1) ir(1); else { setPausado(true); setAndamento(1); } }; if (!atual) return null; const foto = fotoDoProduto(atual.produto); const texto = preco(atual.produto); return (

{ if (e.target === e.currentTarget) aoFechar(); }} >

); } /* ---------------------------------------------------------- o bloco */ export function BoutiqueComprePeloVideo({ videos, slug, clienteId, favoritos, corDaMarca, }: { videos?: BoutiqueVideoDaVitrine[] | null; slug: string; /* O favorito do player é o mesmo do card: quem entrou marca; quem não entrou vai para o login. */ clienteId?: string | null; favoritos?: string[] | null; corDaMarca?: string; }) { const lista = (videos || []).filter((v) => v?.produto?.id && v.endereco); const trilho = useRef(null); const [aberto, setAberto] = useState(null); useArrastoComMouse(trilho); const fechar = useCallback(() => setAberto(null), []); if (!lista.length) return null; return (

{/* pb-8: o trilho rola na horizontal e por isso corta o que passa da borda de baixo; sem esse respiro, a sombra do cartão do produto (0 6px 20px) era comida e o card parecia cortado. */}

{lista.map((video, i) => ( ))}

{aberto !== null ? ( ) : null}

); }