# VideoPlayer

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

Vídeo do YouTube que só carrega quando alguém pede: mostra a capa com um botão de reproduzir e, no clique, troca pelo player do `youtube-nocookie.com` já tocando, com o foco nele.

- Função: Conteúdo
- Também chamado de: vídeo, player, youtube, embed
- Mora em: `app/components/molecules/VideoPlayer.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/VideoPlayer](https://phorte-design-system.vercel.app/styleguide/peca/VideoPlayer)
- Ficha no Storybook: [components-complex-videoplayer](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-videoplayer--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/VideoPlayer/0](https://phorte-design-system.vercel.app/previa/VideoPlayer/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 { VideoPlayer } from '@/app/components/molecules/VideoPlayer';

<VideoPlayer videoId={…}>…</VideoPlayer>
```

O `…` marca as props obrigatórias — ver *Propriedades*.

## Uso

### Variantes na ficha

1. [Interativo](https://phorte-design-system.vercel.app/previa/VideoPlayer/0)
2. [Proporções](https://phorte-design-system.vercel.app/previa/VideoPlayer/1)
3. [Capa própria](https://phorte-design-system.vercel.app/previa/VideoPlayer/2)

Para um vídeo de apresentação do curso ou depoimento, no meio do conteúdo.

### Quando não usar

Para vários depoimentos em vídeo passando, use o VideoTestimonialCarousel. Para vídeo de fundo decorativo, nenhum player.

### Faça

- Passe o `title` do vídeo: ele vai para o nome do botão ("Reproduzir o vídeo: …") e do player.
- Aceite o `videoId` ou a URL inteira do YouTube — o componente extrai o id.
- Use `thumbnailUrl` quando a capa automática do YouTube não servir; sem ela, a capa grande, e a média se a grande falhar (E72).

### Evite

- Deixar o `title` no padrão ("Vídeo"): quem ouve não sabe o que vai tocar.
- Vários na mesma dobra: cada um é um player do YouTube ao ser aberto.

### Anatomia

1. **Moldura** — Na proporção do `aspectRatio`, cantos `rounded-2xl`, borda e sombra.
2. **Capa** — Imagem decorativa (`alt=""`) sob um véu escuro.
3. **Botão de reproduzir** — Círculo vermelho de 64px (80px a partir de 768px) com o ícone de play; o botão real cobre a capa inteira.
4. **Player** — O `<iframe>` do YouTube sem cookies, depois do clique.

### Estados

| Estado | O que muda |
| --- | --- |
| Capa | Imagem com véu; no hover, a imagem aproxima e o círculo cresce — só com movimento liberado (E72). |
| Foco | Anel `ring-ring` de 4px em volta da capa inteira. |
| Tocando | O player no lugar da capa, com reprodução automática e o foco. |
| Proporção | `video` 16:9 (padrão), `wide` 21:9 ou `square` 1:1. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Antes do clique | Nada do YouTube é carregado além da imagem da capa. |
| Capa grande que não existe | Troca pela média (`hqdefault`), que todo vídeo tem (E72) — conferido no teste da ficha. A cinza de antes fazia o player parecer quebrado. |
| Clique ou Enter na capa | Troca pelo player já tocando e leva o foco para ele — medido: o foco passa ao `<iframe>`. |

### Relacionados

- [VideoTestimonialCarousel](https://phorte-design-system.vercel.app/styleguide/md/VideoTestimonialCarousel.md) — Vários depoimentos em vídeo.
- [ChatWindow](https://phorte-design-system.vercel.app/styleguide/md/ChatWindow.md) — O chat ao lado de uma transmissão.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `aspectRatio` | `'video' \| 'wide' \| 'square'` | `'video'` | não | Variante do `cva`. |
| `videoId` | `string` | — | sim | ID do vídeo no YouTube, ou a URL completa. |
| `title` | `string` | `'Vídeo'` | não |  |
| `thumbnailUrl` | `string` | — | não |  |

Aceita também: `React.HTMLAttributes<HTMLDivElement>`.

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--primary` | #D42B2B | `bg-primary`, `ring-primary/40`, `shadow-primary/20`, `shadow-primary/40` |
| `--foreground` | #1A1A1A | `bg-ink/30`, `bg-ink/40` |
| `--border` | #E5E5E5 | `border-border` |
| `--muted` | #F4F6F9 | `bg-muted` |
| `--primary-foreground` | #FFFFFF | `text-primary-foreground` |
| `--ring` | var(--footer-red)), decisão da revisão 2. Se outra peça precisar
   * dele como superfície, o nome vira de papel (ex.: --surface-brand-strong). */
  --footer-red: #7D1B1B | `ring-ring` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | Leva o foco à capa, "Reproduzir o vídeo: …" — medido. |
| Enter / Espaço | Abre o player já tocando, com o foco nele — medido. Dali em diante, o teclado é o do player do YouTube. |

### Leitor de tela

- O player abre com as legendas em português ligadas quando o vídeo as tem (`cc_load_policy`, E145 — SC 1.2.2); vídeo sem legenda continua sem: publicar vídeo com fala exige a legenda no próprio YouTube, revisada por pessoa.
- O botão se chama "Reproduzir o vídeo: <título>"; o player tem o mesmo `title`.
- A capa é decorativa (`alt=""`): o nome está no botão.

### O que sustenta o estado

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

## Status e recursos

| Tipo | Recurso | Status |
| --- | --- | --- |
| Código | `app/components/molecules/VideoPlayer.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-videoplayer--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

- `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/molecules/VideoPlayer.tsx