contracción de transmisión múltiple
¡Un proyecto de reacción/redux para ver múltiples transmisiones de Twitch al mismo tiempo!
Descripción general
Objetivo: crear una aplicación de una sola página con reaccionar + redux + immutableJS que permita al usuario configurar cualquier cantidad de ventanas en el navegador.
Ejemplos que puedes consultar en busca de inspiración
- http://kadgar.net/live/
- http://multitwitch.tv/
- https://multistre.am/
Mejoras/lista de características
- Seleccione X cantidad de transmisiones por nombre de canal para colocarlas en una visualización de cuadrícula configurable
- Pantalla responsiva con ventana de eliminación de flujo
- Obtenga una lista de canales para autocompletar
- Dimensiones de ventana configurables
-
react-grid-layout , o pruebe masonry como ejemplo de cómo integrar bibliotecas de terceros que no son de reacción en reaccionar
- Conservar canales durante las actualizaciones de página completa (estado de almacenamiento local)
- Combinaciones de teclas para silenciar/activar el silencio -> ir a pantalla completa más rápido
- Chat unificado para transmitir el mismo mensaje en un subconjunto de transmisiones a la vista
Códice
Configurar instancia de AWS para un patio de juegos público
- Instancia de demostración
Añadir babel-eslint
Agregar tema (elija css/marco de estilo en línea)
Agregar tema base- Busque otros marcos CSS para estilos en línea
Diseño básico y flujo de trabajo con reaccionar-router v4
Agregar redux
Agregar configuración de tienda Agregue el andamio de la tienda immutableJS Agregue codificación transit-js para registros immutableJS
Persistir en el almacenamiento local Cargar desde el almacenamiento local integración redux-persist
Agregar cliente de recuperación
Agregar contenedor de cliente encima de la búsqueda Agregue redux-saga con middleware saga Agregue integración de TWITCH API para consultas de canales Agregue integración API de YOUTUBE para consultas de canales Agregue el acortador de URL de GOOGLE para compartir una configuración de diseño
Diálogo de ayuda
Agregar modal de diálogo de ayuda- Complete el contenido de ayuda y las instrucciones de uso
Compartir diálogo e integración de enlaces de Google más cortos
Agregue un cuadro de diálogo para compartir con un campo de entrada que muestre un enlace URL abreviado de Google de los datos de diseño de la tienda. Agregue la API de acortador de URL de Google con saga
Cargar configuración compartida desde el enlace
Agregar una página de destino para el material que se puede compartir Agregue un contenedor de carga que toma una configuración de la URL y la inyecta en el estado de diseño actual para el usuario.
Funciones de diseño de transmisión
Integre react-grid-layout para un diseño de cuadrícula configurable Integre Twitch Player y Youtube Player para ver videos o transmisiones en vivo- Agregar widget de transmisión en blanco
Agregar botón desde la barra de navegación Arrastre y suelte un enlace o una transmisión de vídeo en el contenedor- Campo de entrada para copiar y pegar la referencia del enlace
Borrar todos los widgets en el diseño Eliminar un widget individual del diseño- Cambiar la calidad del video en todas las transmisiones
- Silenciar/Activar silencio en todas las transmisiones
- Vista aleatoria para diseños
- Agregar botón de alternancia a la vista aleatoria
