Twitch multi-flux
Un projet React/Redux pour visualiser plusieurs flux Twitch en même temps !
Aperçu
Objectif : créer une application d'une seule page avec React + Redux + ImmutableJS qui permet à un utilisateur de configurer n'importe quel nombre de fenêtres dans le navigateur.
Exemples à consulter pour vous inspirer
- http://kadgar.net/live/
- http://multitwitch.tv/
- https://multistre.am/
Liste des améliorations/fonctionnalités
- Sélectionnez une quantité X de flux par nom de canal à placer dans un affichage en grille configurable
- Affichage réactif avec fenêtre de suppression du flux
- Obtenir une liste de chaînes pour la saisie semi-automatique
- Dimensions de fenêtre configurables
-
react-grid-layout , ou essayez masonry comme exemple de la façon d'intégrer des bibliothèques tierces non réactives dans React
- Conserver les canaux lors des actualisations de page complète (état de stockage local)
- Combinaisons de touches pour désactiver/réactiver le son -> passer en plein écran plus rapidement
- Chat unifié pour diffuser le même message sur un sous-ensemble de flux visibles
Codez
Configurer une instance AWS pour une aire de jeux publique
- Instance de démonstration
Ajouter Babel-Eslint
Ajouter un thème (choisissez un framework de style CSS/inline)
Ajouter un thème de base- Recherchez d'autres frameworks CSS pour les styles en ligne
Disposition de base et flux de travail avec React-Router v4
Ajouter un redux
Ajouter la configuration du magasin Ajouter un échafaudage de magasin immutableJS Ajouter l'encodage transit-js pour les enregistrements immutableJS
Conserver dans le stockage local Charger depuis le stockage local intégration redux-persist
Ajouter un client de récupération
Ajouter un wrapper client par-dessus la récupération Ajouter redux-saga avec le middleware saga Ajouter l'intégration de l'API TWITCH pour les requêtes de canal Ajoutez l'intégration de l'API YOUTUBE pour les requêtes de chaînes Ajouter GOOGLE URL Shortener pour partager une configuration de mise en page
Boîte de dialogue d'aide
Ajouter une boîte de dialogue d'aide modale- Remplissez le contenu de l'aide et les instructions d'utilisation
Boîte de dialogue de partage et intégration du raccourcisseur de lien Google
Ajouter une boîte de dialogue de partage avec champ de saisie qui affiche le lien URL Google raccourci des données de mise en page du magasin Ajouter l'API de raccourcissement d'URL Google avec saga
Charger la configuration partagée à partir du lien
Ajouter une page de destination pour les éléments partageables Ajoutez un conteneur de chargement qui prend une configuration de l'URL et l'injecte dans l'état de présentation actuel pour l'utilisateur.
Fonctionnalités de mise en page du flux
Intégrer react-grid-layout pour une disposition de grille configurable Intégrez Twitch Player et Youtube Player pour visionner des vidéos ou des flux en direct- Ajouter un widget de flux vide
Ajouter un bouton depuis la barre de navigation Glissez et déposez un lien ou un flux vidéo dans le conteneur- Champ de saisie pour copier et coller la référence du lien
Effacer tous les widgets dans la mise en page Supprimer un widget individuel de la mise en page- Modifier la qualité vidéo sur tous les flux
- Désactiver/Réactiver le son sur tous les flux
- Vue aléatoire pour les mises en page
- Ajouter un bouton bascule en vue aléatoire
