contração multi-stream
Um projeto react/redux para visualizar vários streams do Twitch ao mesmo tempo!
Visão geral
Objetivo: Criar um aplicativo de página única com react + redux + immutableJS que permite ao usuário configurar qualquer quantidade de janelas no navegador.
Exemplos para verificar em busca de inspiração
- http://kadgar.net/live/
- http://multitwitch.tv/
- https://multistre.am/
Lista de melhorias/recursos
- Selecione uma quantidade X de streams por nome do canal para colocar em uma exibição de grade configurável
- Tela responsiva com janela de exclusão de stream
- Obtenha uma lista de canais para preenchimento automático
- Dimensões de janela configuráveis
-
react-grid-layout , ou tente masonry como um exemplo de como integrar bibliotecas não reactivas de terceiros no react
- Persistir canais em atualizações de página inteira (estado de armazenamento local)
- Atalhos de teclado para ativar/desativar o som -> ir para tela cheia mais rápido
- Bate-papo unificado para transmitir a mesma mensagem em um subconjunto de streams em visualização
Código
Configurar instância aws para playground público
- Instância de demonstração
Adicionar babel-eslint
Adicionar tema (escolha estrutura de estilo css/inline)
Adicionar tema base- Procure outras estruturas CSS para estilos embutidos
Layout básico e fluxo de trabalho com react-router v4
Adicionar Redux
Adicionar configuração na loja Adicionar andaimes de loja immutableJS Adicionar codificação transit-js para registros JS imutáveis
Persistir no armazenamento local Carregar do armazenamento local
Adicionar cliente Fetch
Adicione o wrapper do cliente por cima da busca Adicionar redux-saga com middleware saga Adicione integração da API TWITCH para consulta de canal Adicione integração da API do YOUTUBE para consulta de canais Adicione o GOOGLE URL Shortener para compartilhar uma configuração de layout
Caixa de diálogo de ajuda
Adicionar modal de diálogo de ajuda- Preencha o conteúdo de ajuda e instruções de uso
Compartilhe diálogo e integração do Google Link Shortner
Adicionar caixa de diálogo de compartilhamento com campo de entrada que exibe o link abreviado do URL do Google dos dados de layout da loja Adicionar API de encurtador de URL do Google com saga
Carregar configuração compartilhada do link
Adicione uma página de destino para o material compartilhável Adicione um contêiner de carregamento que pega uma configuração do URL e injeta no estado de layout atual do usuário.
Recursos de layout de fluxo
Integre react-grid-layout para layout de grade configurável Integre Twitch Player e Youtube Player para visualizar vídeos ou transmissões ao vivo- Adicionar widget de stream em branco
Adicionar botão da barra de navegação Arraste e solte link ou stream de vídeo no contêiner- Campo de entrada para copiar e colar a referência do link
Limpe todos os widgets no layout Excluir um widget individual do layout- Altere a qualidade do vídeo em todos os streams
- Ativar/desativar som em todos os streams
- Visualização aleatória para layouts
- Adicionar botão de alternância na visualização aleatória
