MultiStream 🎥

Um visualizador de múltiplas streams simultâneas para YouTube, Twitch e Kick, com recursos avançados de controle e personalização.

📸 Screenshot

✨ Funcionalidades

🎬 Suporte Multi-plataforma

• YouTube: Vídeos, streams ao vivo e canais
• Twitch: Streams ao vivo via Twitch Embed SDK
• Kick: Streams ao vivo

🎛️ Controles Avançados

• Overlay Interativo: Controles de reprodução com fade automático (300ms) e delay (1.5s)
• Volume Dinâmico: Controle individual de volume com slider animado (transição ease-out de 300ms)
• Audio on Hover: Sistema inteligente de controle de áudio baseado em hover
  • YouTube/Twitch: 0% (não-hover), 20% (principal), 80% (hover)
  • Kick: 0%/100% (apenas mute/unmute)
• Chat Integrado: Visualização de chat (apenas para streams ao vivo)

📐 Sistema de Layout Flexível

• Resize Manual: Arraste as bordas direita (largura) e inferior (altura)
• Auto-ajuste Inteligente:
  • Linha 1: Mantém altura manual
  • Linhas 2+: Ajustam automaticamente ao espaço restante do viewport
• Grid Customizável: Configure colunas de 0 a 6 (0 = automático)
• Redistribuição Automática: Equalize larguras com um clique

🔴 Detecção de Live

• YouTube: Detecção via crescimento de duração (3+ aumentos consecutivos)
• Botão "Ao Vivo": Pule para o momento atual da transmissão
• Chat Condicional: Chat aparece apenas em streams ao vivo, não em vídeos

⌨️ Atalhos de Teclado

Tecla	Ação
Espaço	Play/Pause (stream com hover)
← / →	Retroceder/Avançar 5s
↑ / ↓	Aumentar/Diminuir volume
M	Mute/Unmute
C	Toggle Chat
S	Toggle stream principal
+ / -	Ajustar zoom
F	Toggle fullscreen
H	Toggle Audio on Hover
0-6	Definir colunas do grid
E	Equalizar larguras
? + Shift	Mostrar atalhos

🎨 Interface

• Tema Dark: Interface moderna com Tailwind CSS
• Cores Accent: Cyan (190 95% 45%) para destaques
• Animações Suaves: Transições em todos os elementos
• Indicadores Visuais: Feedback durante resize e operações
• Drag & Drop: Reordene streams arrastando

💾 Persistência

• LocalStorage: Todas as configurações e streams são salvas
• Migração Automática: Suporte para versões antigas dos dados
• Estado Completo: Volume, largura, altura, chat, stream principal

🚀 Tecnologias

• Framework: React 18.3 com TypeScript 5.8
• Build Tool: Vite 5.4
• Styling: Tailwind CSS + shadcn/ui
• State: React Hooks + LocalStorage
• APIs:
  • YouTube IFrame Player API
  • Twitch Embed SDK v1.js
  • Kick iframe embeds
• Router: React Router DOM 6.30

📦 Instalação e Uso

Pré-requisitos

• Node.js 16+ e npm
• Navegador moderno com suporte a ES6+

Instalação

# Clone o repositório
git clone https://github.com/ALEXFSX/multi-canvas-watch.git

# Entre no diretório
cd multi-canvas-watch

# Instale as dependências
npm install

# Inicie o servidor de desenvolvimento
npm run dev

O app estará disponível em http://localhost:8080

Build para Produção

# Gerar build otimizado
npm run build

# Preview do build
npm run preview

O build estará na pasta dist/

🎯 Como Usar

Adicionar uma Stream

1. Clique no botão "Adicionar Stream"
2. Selecione a plataforma (YouTube, Twitch ou Kick)
3. Cole o ID do canal/vídeo/stream
4. Opcional: Defina um título personalizado
5. Clique em "Adicionar"

Exemplos de IDs

• YouTube: UCX6OQ3DkcsbYNE6H8uQQuVA (canal) ou dQw4w9WgXcQ (vídeo)
• Twitch: shroud (canal)
• Kick: xqc (canal)

Configurar Layout

1. Largura: Arraste a borda direita de qualquer stream
2. Altura: Arraste a borda inferior dos streams da linha 1
   • Streams das linhas 2+ ajustam automaticamente
3. Equalizar: Clique no ícone de settings → Redistribuir Larguras
4. Grid: Settings → Colunas (0-6)

Audio on Hover

1. Ative em Settings → Toggle Audio on Hover
2. Defina uma stream como Principal (ícone de estrela)
3. Passe o mouse sobre outras streams para ouvir em 80%
4. Stream principal sempre em 20% quando há hover em outra

🧪 Testes

# Executar testes
npm test

# Executar testes em modo watch
npm run test:watch

📁 Estrutura do Projeto

multi-canvas-watch/
├── src/
│   ├── components/       # Componentes React
│   │   ├── ui/          # Componentes shadcn/ui
│   │   ├── StreamPanel.tsx
│   │   ├── AddStreamDialog.tsx
│   │   └── ...
│   ├── hooks/           # Custom hooks
│   │   └── useStreams.ts
│   ├── lib/             # Utilitários
│   ├── pages/           # Páginas da aplicação
│   ├── types/           # Definições TypeScript
│   └── main.tsx         # Entry point
├── public/              # Arquivos estáticos
├── dist/               # Build de produção
└── package.json

🤝 Contribuindo

Contribuições são bem-vindas! Sinta-se à vontade para:

1. Fork o projeto
2. Crie uma branch para sua feature (git checkout -b feature/MinhaFeature)
3. Commit suas mudanças (git commit -m 'Adiciona MinhaFeature')
4. Push para a branch (git push origin feature/MinhaFeature)
5. Abra um Pull Request

📝 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

👨‍💻 Créditos

Desenvolvido por Alex Silva

• GitHub: @ALEXFSX

---

⭐ Se você gostou do projeto, considere dar uma estrela no GitHub!