Criando um Video Chain Player Compartilhável por URL com Vite + React (Sincronização de Estado / i18n / Deploy na AWS)

O Que É Isso?

Criei o Video Chain Player, um app web que permite "encadear apenas os segmentos necessários de vídeos e reproduzi-los/compartilhá-los como uma única experiência."

🔗 Experimente agora: https://video-chain-player.sloth255.com/

• Recorte um vídeo especificando horários de início e fim
• Encadeie (fila) múltiplos clipes para reprodução contínua
• Codifique o estado da cadeia em uma URL e compartilhe com um único link

Perfeito para criar experiências de "mostre apenas esta parte", como fluxos de treino, destaques de aulas ou compilações.

O Que os Usuários Podem Fazer

• Criar clipes: Adicionar vídeos inserindo URL/ID e horários de início/fim
• Reordenar: Ajustar a sequência com arrastar e soltar
• Pré-visualizar: Reproduzir no momento para verificar o timing
• Compartilhar: Copiar a URL e enviar (destinatários abrem a mesma cadeia)
• Multilíngue: Trocar idiomas via URL (ex.: ?lang=ja)

Stack Tecnológica

Arquitetura e Destaques de Implementação

1) Sincronizar Estado do Zustand com URL para Compartilhamento Instantâneo

Para minimizar o atrito no compartilhamento, projetei o app para codificar as informações essenciais da cadeia na URL.

• Sem armazenamento no servidor (sem necessidade de conta)
• Destinatários podem reproduzir o mesmo estado simplesmente abrindo o link

Para evitar o inchaço da URL (o que dificulta o compartilhamento), minimizei as informações codificadas na URL.

• Codificar apenas id do vídeo e horários start/end
• Complementar títulos e miniaturas depois para exibição (evita inchaço da URL)

Exemplo de codificação mínima:

// Codificar apenas informações essenciais (id/start/end) na URL
const minimalSegments = segments.map(({ id, start, end }) => ({ id, start, end }));

Além disso, links compartilhados não incluem a posição de reprodução (qual clipe está tocando), garantindo que "abrir o link começa do início."

2) Carregamento de i18n em Tempo de Execução via HTTP Backend (Independente de Build)

Inicialmente, considerei importar os JSONs de tradução em tempo de build, mas para melhor compatibilidade com hospedagem estática e CI, optei por buscar via HTTP de /public/locales/{{lng}}/translation.json.

• Fácil de manter — basta adicionar arquivos de idioma
• O processo de build não depende de importações de tradução

3) Tratar Variações de URL de Forma Robusta (watch / Shorts / embed)

Suportar "apenas URLs padrão" seria inconveniente, então expandi os padrões de entrada:

• URLs watch padrão
• Shorts
• URLs embed

Como resultado, a taxa de sucesso de "colar e pronto" aumentou, tornando o cadastro em lote muito mais fácil.

4) Deploy: S3 + CloudFront, CI: GitHub Actions (OIDC)

Por ser um site estático, o deploy é simples:

• S3 (hospedagem estática)
• CloudFront (CDN)

O CI/CD é automatizado via GitHub Actions: build → sync com S3 → invalidação de cache do CloudFront.

O ponto-chave é o OIDC, permitindo deploy sem armazenar chaves de longa duração (minimizando Secrets enquanto mantém controle por ambiente).

Mesmo para sites estáticos, colocar o CloudFront na frente oferece:

• Carregamento rápido via cache
• Fácil assistência ao roteamento SPA (ex.: fallback para /)

Resumo

O Video Chain Player foca em "clipes × reprodução contínua × compartilhamento por URL", com ênfase em:

• Codificar estado em URLs para minimizar o atrito no compartilhamento
• i18n + sincronização de idioma por URL para que destinatários vejam o mesmo idioma
• Torná-lo "pronto para produção" incluindo deploy e analytics

Tecnicamente, consegui combinar:

• Desenvolvimento rápido com Vite
• Sincronização do estado do Zustand com URLs para melhor compartilhamento
• Gerenciamento leve de traduções com o backend HTTP do i18next
• Deploy seguro com OIDC

Construir todo esse "stack operacional completo" de uma vez foi o ponto alto.