diff --git a/docs/plans/reels-biblioteca-ui-design.html b/docs/plans/reels-biblioteca-ui-design.html new file mode 100644 index 00000000..3eed3601 --- /dev/null +++ b/docs/plans/reels-biblioteca-ui-design.html @@ -0,0 +1,1009 @@ + + + + + + + Design — C194 · Biblioteca privada de reels + + + + +
+
+
+ C194 · gate hi-fi + Campanha · Comunicação · privado +
+

O reel certo, pronto para baixar

+

+ A assessoria varre capas verticais, confere o reel e baixa o vídeo sem áudio sem disputar + atenção com arquivos auxiliares. A biblioteca organiza; não edita nem publica em rede + social. +

+ +
+ + +
+
+
+

CENA 01 · DESKTOP ~1280

+

+ Lista visual, sem toolbar prematura +

+
+ +
+
+
+ +
+
+ +

Reels

+
+
+
+
+
+
+
+

Reels publicados

+

+ Abra um reel para assistir e baixar os arquivos. +

+
+ 4 reels +
+
+
+
+ Publicado +
+

NEEDS ASSET · capa

+

Crie seu card de apoio

+
+
+
+

Como criar seu card de apoio

+

Cards · 00:28

+

Publicado hoje

+ Abrir reel +
+
+
+
+ Publicado +
+

NEEDS ASSET · capa

+

Escolha uma moldura

+
+
+
+

+ Moldura para foto: passo a passo +

+

Cards · 00:34

+

Publicado em —

+ Abrir reel +
+
+
+
+ Publicado +
+

NEEDS ASSET · capa

+

Baixe e compartilhe

+
+
+
+

Baixe seu card no celular

+

Cards · 00:21

+

Publicado em —

+ Abrir reel +
+
+
+
+ Publicado +
+

NEEDS ASSET · capa

+

Tutorial do site

+
+
+
+

Título do reel

+

Funcionalidade · 00:30

+

Publicado em —

+ Abrir reel +
+
+
+
+
+
+
+
+ + +
+
+
+

CENA 02 · DESKTOP ~1280

+

+ Detalhe: assistir, baixar, consultar +

+
+ +
+
+
+ +

Como criar seu card de apoio

+
+
+
+ + Voltar aos reels +
+
+
+ PublicadoCards · 00:28 · publicado hoje +
+

Como criar seu card de apoio

+
+
+
+
+
+
+ +
+
+ 00:00 +
+
+
+ 00:28 +
+ NEEDS ASSET · MP4 +
+
+
+
+
+
+

Downloads

+

+ Arquivos deste reel para finalizar e publicar fora do Teqo. +

+
+ + + + + +
+ + + + Baixar vídeo sem áudio + +
+
+
+

Transcrição / roteiro

+ +
+
+

+ [Abertura] Quer mostrar que está com Solla? +

+

+ [Passo 1] Entre no site e vá até a seção de + cards. +

+

+ [Passo 2] Escolha um modelo, coloque seu nome + ou sua foto e crie seu card. +

+

+ [Fechamento] Baixe e compartilhe com sua + gente. +

+
+
+
+ +
+
+
+
+ + +
+
+

CENAS 03–04 · MOBILE ~390

+

+ Assessoria no celular +

+

+ Lista escaneável e detalhe em uma coluna; CTA primário aparece logo após o player. +

+
+
+
+

03 · Lista

+
+
+

Reels

+
+
+
+
+
+

Reels publicados

+

Toque para abrir e baixar.

+
+ 4 +
+
+
+
+ Publicado +
+

NEEDS ASSET

+

Crie seu card

+
+
+
+

Como criar seu card de apoio

+

Cards · 00:28

+
+
+
+
+ Publicado +
+

NEEDS ASSET

+

Escolha a moldura

+
+
+
+

Moldura para foto

+

Cards · 00:34

+
+
+
+
+
+

Baixe seu card

+

Cards · 00:21

+
+
+
+
+
+

Título do reel

+

Funcionalidade · 00:30

+
+
+
+
+ +
+
+
+

+ 04 · Detalhe — ação principal sem rolagem excessiva +

+
+
+ + + +

Como criar seu card

+
+
+
+ PublicadoCards · 00:28 +
+

Como criar seu card de apoio

+
+ NEEDS ASSET +
+ + + + Baixar vídeo sem áudio +
+

Outros arquivos

+
+
+ Vídeo com áudioBaixar +
+
+ Narração · MP3Baixar +
+
+ Legendas · .srtBaixar +
+
+ Transcrição / roteiroAbrir ↓ +
+
+
+
+
+

Transcrição / roteiro

+ +
+

+ [Abertura] Quer mostrar que está com Solla? +

+

+ [Passo 1] Entre no site e vá até a seção de + cards. +

+

+ [Passo 2] Escolha um modelo, coloque seu nome + ou sua foto e crie seu card. +

+
+
+

+ Publicação na biblioteca +

+
+ Publicado +
+

+ Despublicar tira este reel da lista, sem apagar os arquivos. +

+ +
+

+ Nada é publicado no Instagram por esta tela. +

+
+ +
+
+
+
+ + +
+
+

CENAS 05–07 · ESTADOS CRÍTICOS

+

+ Sem becos sem saída +

+
+
+
+
+

05 · Lista vazia

+
+
+
+
+ + + + +
+

Nenhum reel produzido ainda

+

+ Quando um reel for aprovado e publicado na biblioteca, ele aparece aqui para a + assessoria. +

+

+ Sem CTA: a produção acontece fora desta tela. +

+
+
+
+
+
+

06 · Só vídeo mudo

+
+
+
+ PublicadoCards · 00:28 +
+

Como criar seu card de apoio

+ Baixar vídeo sem áudio +
+
+
+

Vídeo com áudio

+

Ainda não disponível

+
+ Indisponível +
+
+
+

Narração · MP3

+

A narração será adicionada depois.

+
+ Indisponível +
+
+
+

Legendas · .srt

+

A legenda ainda não foi gerada.

+
+ Indisponível +
+
+
+
+
+
+

07 · Reel despublicado

+
+
+
+ DespublicadoAcesso interno preservado +
+

Como criar seu card de apoio

+
+

Fora da lista

+

+ Este reel não aparece na biblioteca, mas os arquivos continuam guardados e + acessíveis por este link interno. +

+
+
+

Publicação na biblioteca

+

+ Republicar devolve o reel à lista. Nenhum arquivo será recriado. +

+ +
+
+
+
+
+ + +
+ + diff --git a/docs/plans/reels-biblioteca.md b/docs/plans/reels-biblioteca.md new file mode 100644 index 00000000..a0ed8e7a --- /dev/null +++ b/docs/plans/reels-biblioteca.md @@ -0,0 +1,106 @@ +# Biblioteca de reels na vertical Comunicação + +Status: rascunho +Atualizado em: 2026-09-18 +Issue: #1153 +Priority: P2 +Impeccable: C — fluxo novo em /campanha/comunicacao/reels (lista + detalhe), encaixe na vertical Comunicação +Design UI: docs/plans/reels-biblioteca-ui-design.html (a produzir pelo `designer`) + assets +Appetite: ~1–2 dias eng; um outcome verificável +Responsável: — + +## Intenção + +A produção de Reels do mandato (tutoriais das funcionalidades do site, começando pelos cards da home) acontece fora do site, mas a assessoria não tem onde se servir do material pronto. Hoje cada reel vive solto em pastas e conversas. Queremos uma biblioteca interna e privada dentro de `/campanha/comunicacao/reels`: a pessoa abre o reel, vê a capa e o título, assiste em 9:16 e baixa o que precisa — vídeo sem áudio (primário), vídeo com áudio rascunho, mp3 da narração, `.srt` e transcrição/roteiro. Nada é publicado no Instagram por aqui; a assessoria publica nos canais. Um kill switch permite despublicar (tirar da biblioteca) sem apagar. + +## Persona e fluxo + +- **Persona / contexto:** assessoria de comunicação do mandato (role `communicator`), com coordinator e candidate enxergando o mesmo acervo; trabalha fora do site, em ferramentas de edição, e precisa da mídia bruta organizada. +- **Job principal:** encontrar o reel certo, conferir o resultado, baixar os arquivos e regravar/acrescentar áudio quando necessário. +- **Fluxo desejado:** entra na vertical Comunicação → Reels → varre a lista por capa/título → abre o detalhe → assiste em 9:16 → baixa o arquivo que precisa → (staff) despublica/republica quando o reel sai de linha. +- **Anti-goals de produto:** não é editor de vídeo, não publica em rede social, não é galeria pública, não substitui a skill de produção (a mídia é gerada fora), não cria um novo modelo de mídia paralelo ao que o C193 definir. + +### Esboço de fluxo (C) + +```text +[início: /campanha/comunicacao/reels] + → lista (capas + títulos, só reels publicados) + → detalhe /campanha/comunicacao/reels/[id] + → player 9:16 + painel de downloads (sem áudio · com áudio · mp3 · .srt · transcrição) + → baixa e trabalha a mídia fora do site + → (kill switch no detalhe: despublica → some da lista, arquivo preservado) +[outcome: assessoria servida sem pedir arquivo a ninguém] +``` + +### Design UI (C) + +- Design UI (gate): `docs/plans/reels-biblioteca-ui-design.html` — lista com capa/título e detalhe com player 9:16 + painel de downloads, na linguagem visual do /campanha. + +## Objetivo e aceite + +- A assessoria abre `/campanha/comunicacao/reels`, encontra os reels publicados e assiste cada um em 9:16 sem sair do site. +- No detalhe, todos os arquivos disponíveis do reel são baixáveis: vídeo sem áudio (primário), vídeo com áudio (quando existir), mp3 (quando existir), `.srt` e transcrição/roteiro em texto. +- Despublicar tira o reel da lista imediatamente e não apaga nada; republicar o reativa. +- Acesso restrito a `communicator`, `coordinator` e `candidate`; qualquer outro role é negado (fail-closed). +- Guardrails: nada de publicação em redes sociais; nada de edição de vídeo na UI; nenhum reel some por acidente (kill switch reversível). + +## Dados (intenção) + +- **Vou apresentar dados?** Não — esta entrega é biblioteca de mídia, não análise. Sem métricas, sem gráficos. +- **Decisões desbloqueadas:** qual reel está pronto para trabalhar; o que já tem narração/legenda pronta; o que foi despublicado (inventário operacional, não analítico). +- **Forma:** adiada ao plano de implementação (o C193 define o modelo e a privacidade do arquivo). + +## Dados da decisão (literais) + +- Rota da biblioteca: `/campanha/comunicacao/reels` (lista) + `/campanha/comunicacao/reels/[id]` (detalhe). +- 3º sub-item de navegação da vertical Comunicação, depois de "Acervo de falas" e "Biblioteca de cortes". +- Downloads oferecidos no detalhe: vídeo **sem áudio** (primário), vídeo **com áudio** (rascunho, quando existir), **mp3** da narração (quando existir), **`.srt`** e **transcrição/roteiro** em texto. +- Kill switch: despublicar tira da biblioteca sem apagar; republicar reativa. +- Acesso: só `communicator`, `coordinator`, `candidate`. +- Nada de publicação em redes sociais por este item; nada de edição do vídeo na UI (a mídia é produzida fora, pela skill). + +## Direção no codebase (hipótese) + +- **Áreas prováveis:** rota nova em `src/app/(campaign)/campanha/(app)/comunicacao/reels/` (lista e detalhe, espelhando `acervo/cortes/`); componentes em `src/components/campaign/reels/` ou equivalentes; caminhos em `src/lib/campaignPaths.ts`; nav em `src/components/campaign/shell/nav.ts`; chrome em `src/lib/campaignPageChrome.ts`; gate em `src/utilities/campaignPageActor.ts`; RBAC reusando `src/lib/campaignRoles.ts` / `src/utilities/access/`. +- **Precedente a olhar:** `acervo/cortes/` de ponta a ponta — `SpeechCutLibraryList/Card/Filters/StatusBadge/Player/PublicationPanel`, `speechCutPageData.ts`, `speechCutListUrl.ts`, handlers JSON `cortes/[id]/{publicacao,apagar,retry,texto}/route.ts`, teste e2e `campaignSpeechCut.e2e.spec.ts` e int `speechCut.int.spec.ts`. Reels é o mesmo formato (lista + detalhe + kill switch) com player 9:16 e painel de downloads. +- **Risco de acoplamento:** (1) o cookie de sessão `campaign-token` (`path=/campanha`) não autentica `