# VideoTestimonialCarousel

> Componentes / Campanha (marketing) · Estado: **Em andamento** — Implementado e utilizável, mas ainda sem a validação completa de acessibilidade.

Seção escura "O que nossos Alunos Dizem.": cartões com a capa do vídeo em cima e, embaixo, cinco estrelas, nome, curso e citação. O play fica no próprio cartão — o clique troca a capa pelo player do YouTube ou do Vimeo ali mesmo, na proporção do vídeo, vertical ou horizontal (E132). Todos os cartões têm a mesma altura (E160): a moldura da capa é uma só por seção. Não é carrossel. Os depoimentos vêm por `depoimentos` (E75).

- Função: Campanha (marketing)
- Também chamado de: depoimentos em vídeo, vídeos de alunos, histórias de sucesso, shorts, reels
- Mora em: `app/components/organisms/marketing/VideoTestimonialCarousel.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/VideoTestimonialCarousel](https://phorte-design-system.vercel.app/styleguide/peca/VideoTestimonialCarousel)
- Ficha no Storybook: [marketing-videotestimonialcarousel](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/marketing-videotestimonialcarousel--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/VideoTestimonialCarousel/0](https://phorte-design-system.vercel.app/previa/VideoTestimonialCarousel/0)
- Todas as peças: [https://phorte-design-system.vercel.app/llms.txt](https://phorte-design-system.vercel.app/llms.txt)

## Como usar no código

```tsx
import { VideoTestimonialCarousel } from '@/app/components/organisms/marketing/VideoTestimonialCarousel';

<VideoTestimonialCarousel />
```

## Uso

### Variantes na ficha

1. [Padrao](https://phorte-design-system.vercel.app/previa/VideoTestimonialCarousel/0)
2. [Horizontais](https://phorte-design-system.vercel.app/previa/VideoTestimonialCarousel/1)
3. [Sem vídeo](https://phorte-design-system.vercel.app/previa/VideoTestimonialCarousel/2)
4. [Teste: a mesma altura no celular, linha a linha](https://phorte-design-system.vercel.app/previa/VideoTestimonialCarousel/3)

Em página de campanha, com depoimentos gravados em vídeo — inclusive os verticais, feitos para o celular.

### Quando não usar

Para um vídeo só, grande, use o VideoPlayer. Para depoimentos em texto, o TestimonialCarousel.

### Faça

- Passe `depoimentos`, com `videoUrl` do YouTube ou do Vimeo em quem tiver vídeo: só esses ganham o play.
- Marque `formato: "vertical"` no vídeo vertical do Vimeo e no do YouTube que não esteja num endereço `/shorts/` — o Vimeo não diz a proporção pelo endereço.
- Use capas (`thumbnail`) que aguentem o recorte em 9:16 quando a seção mistura vídeo vertical e horizontal: a moldura é a da seção, e a capa é recortada para caber.

### Evite

- Publicar com os depoimentos de exemplo (os que vêm sem prop).
- Endereço de outro lugar em `videoUrl`: não há player para incorporar, e o play vira um link em nova aba.

### Anatomia

1. **Chapéu e título** — "Histórias Reais de Sucesso" (com o ícone de vídeo só quando há vídeo, E75) e o `h2`.
2. **Capa** — A imagem decorativa (`alt=""`) sob um degradê de `--ink`, num CardMedia na moldura da seção (E160): 9:16 se algum depoimento for vertical, 16:9 se todos forem horizontais.
3. **Play** — A capa inteira é o botão "Assistir depoimento de <nome>"; o círculo de 80px em `--primary` é o desenho. O anel de foco claro fica no círculo.
4. **Player** — Depois do clique: o `iframe` do YouTube (`youtube-nocookie.com`) ou do Vimeo (`dnt=1`), titulado "Depoimento de <nome>", ocupando a área da capa.
5. **Informações** — Embaixo da capa, no fluxo: cinco estrelas, nome (`h3`), curso (Badge) e a citação — o vídeo tocando não cobre nada.

### Estados

| Estado | O que muda |
| --- | --- |
| Padrão | Uma coluna no celular, duas a partir de 768px, três a partir de 1024px. |
| Vertical | O player em 9:16, ocupando a moldura: o YouTube Shorts pelo endereço, o resto por `formato` — testado na ficha. |
| Horizontal | 16:9, o padrão; numa moldura vertical, o player fica centrado em 16:9, com faixa escura em volta — testado na ficha. |
| Formatos misturados | A mesma altura em todos (E160, revisão 4): uma moldura por seção, os cartões esticam até a linha, e as linhas da grade têm a mesma altura (`auto-rows-fr`) — no tablet e no celular também. Testado na ficha, com citações de tamanhos bem diferentes. |
| Tocando | O player no lugar da capa, com o foco; os outros cartões continuam com o botão — testado na ficha. |
| Endereço não reconhecido | O play vira link: "Assistir depoimento de <nome> (abre em nova aba)" — testado na ficha. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Play | Troca a capa pelo player, que já começa a tocar, e leva o foco para ele — até a revisão 3, abria o vídeo numa aba nova (E132). |
| Endereços | YouTube: `watch?v=`, `youtu.be/`, `embed/` e `shorts/`. Vimeo: `vimeo.com/<id>`, com o hash de vídeo não listado, e `player.vimeo.com/video/<id>` — testado na ficha. |
| Privacidade | Nada do YouTube nem do Vimeo carrega antes do clique; depois, o YouTube sem cookie de rastreamento e o Vimeo com "não rastrear". |

### Relacionados

- [VideoPlayer](https://phorte-design-system.vercel.app/styleguide/md/VideoPlayer.md) — Um vídeo só, grande (hoje só do YouTube).
- [TestimonialCarousel](https://phorte-design-system.vercel.app/styleguide/md/TestimonialCarousel.md) — Depoimentos em texto.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `depoimentos` | `DepoimentoEmVideoDeCampanha[]` | `DEPOIMENTOS_PADRAO` | não | Os depoimentos por prop (E75): eram fixos no arquivo. |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--foreground` | #1A1A1A | `bg-ink`, `from-ink/70`, `to-ink/10`, `via-ink/20` |
| `--primary` | #D42B2B | `bg-primary`, `bg-primary/20`, `fill-primary`, `text-primary` |
| `--ink-inverse` | #FAFAFA | `text-ink-inverse` |
| `--ink-inverse-muted` | #C7C7C7 | `text-ink-inverse-muted` |
| `--primary-foreground` | #FFFFFF | `text-primary-foreground` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | O play de cada depoimento com vídeo; sem vídeo, nada recebe foco. |
| Enter / Espaço | Toca o vídeo no cartão e leva o foco para o player. |

### Leitor de tela

- O player abre com as legendas em português ligadas quando o vídeo as tem — YouTube por `cc_load_policy`, Vimeo por `texttrack=pt-BR` (E145, SC 1.2.2). A legenda em si é do vídeo: sem ela, o depoimento com fala não pode ir ao ar.
- A nota chega a quem ouve como "Nota 5 de 5"; as estrelas são `aria-hidden`.
- O botão sai do DOM ao tocar: o foco vai para o player, e não para o `<body>`, como no VideoPlayer (E52).
- Cada player tem título próprio ("Depoimento de <nome>").

### O que sustenta o estado

Usa os padrões: estatico. Falta ouvir com leitor de tela: estatico.

### Achados abertos

- **O nome promete um carrossel.** É uma grade parada.

## Status e recursos

| Tipo | Recurso | Status |
| --- | --- | --- |
| Código | `app/components/organisms/marketing/VideoTestimonialCarousel.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/marketing-videotestimonialcarousel--docs | Disponível |
| Teste de acessibilidade | axe em `npm run test` | No gate de todo commit |
| Leitor de tela | Passada da E33 | Falta ouvir |
| Design | Figma | Desativado até a Fase 2 |

### Histórico

- `f14e77c` 2026-10-01 — E160: VideoTestimonialCarousel — todos os cartões com a mesma altura
- `251416b` 2026-10-01 — E159: Testimonials — o vídeo toca dentro do cartão, YouTube e Vimeo
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/organisms/marketing/VideoTestimonialCarousel.tsx