Multi-Stream-Twitch
Ein React/Redux-Projekt zum gleichzeitigen Anzeigen mehrerer Twitch-Streams!
Überblick
Ziel: Erstellen Sie eine Einzelseiten-App mit React + Redux + ImmutableJS, die es einem Benutzer ermöglicht, eine beliebige Anzahl von Fenstern im Browser zu konfigurieren.
Beispiele zur Inspiration
- http://kadgar.net/live/
- http://multitwitch.tv/
- https://multistre.am/
Verbesserungen/Funktionsliste
- Wählen Sie X Streams nach Kanalnamen aus, um sie in einer konfigurierbaren Rasteranzeige anzuzeigen
- Responsive Anzeige mit Stream-Löschfenster
- Rufen Sie eine Liste der Kanäle für die automatische Vervollständigung ab
- Konfigurierbare Fensterabmessungen
-
react-grid-layout oder probieren Sie masonry als Beispiel für die Integration von Nicht-React-Bibliotheken von Drittanbietern in React aus
- Kanäle über ganze Seitenaktualisierungen hinweg beibehalten (lokaler Speicherstatus)
- Tastenkombinationen zum Stummschalten/Aufheben der Stummschaltung -> schnellerer Vollbildmodus
- Einheitlicher Chat, um dieselbe Nachricht über eine Teilmenge der angezeigten Streams zu senden
Codez
Richten Sie eine AWS-Instanz für einen öffentlichen Spielplatz ein
babel-eslint hinzufügen
Thema hinzufügen (CSS/Inline-Stil-Framework auswählen)
Basisthema hinzufügen- Schauen Sie sich andere CSS-Frameworks für Inline-Stile an
Grundlegendes Layout und Workflow mit React-Router v4
Redux hinzufügen
Fügen Sie die Store-Konfiguration hinzu Fügen Sie ein immutableJS-Store-Gerüst hinzu Fügen Sie die Transit-JS-Codierung für unveränderliche JS-Datensätze hinzu
Im lokalen Speicher beibehalten Aus lokalem Speicher laden redux-persist Integration
Fetch-Client hinzufügen
Fügen Sie einen Client-Wrapper über dem Abruf hinzu Redux-Saga mit Saga-Middleware hinzufügen Fügen Sie die TWITCH-API-Integration für Kanalabfragen hinzu Fügen Sie die YOUTUBE-API-Integration für Kanalabfragen hinzu Fügen Sie den GOOGLE URL Shortener zum Teilen einer Layoutkonfiguration hinzu
Hilfedialog
Hilfedialog modal hinzufügen- Füllen Sie Hilfeinhalte und Gebrauchsanweisungen aus
Teilen-Dialog und Google-Link-Shortner-Integration
Fügen Sie einen Freigabedialog mit einem Eingabefeld hinzu, das einen verkürzten Google-URL-Link der Layoutdaten aus dem Store anzeigt Fügen Sie die Google URL Shortener API mit Saga hinzu
Gemeinsame Konfiguration über Link laden
Fügen Sie eine Zielseite für die gemeinsam nutzbaren Inhalte hinzu Fügen Sie einen Ladecontainer hinzu, der eine Konfiguration aus der URL übernimmt und in den aktuellen Layoutstatus für den Benutzer einfügt.
Stream-Layout-Funktionen
Integrieren Sie react-grid-layout für ein konfigurierbares Grid-Layout Integrieren Sie Twitch Player und Youtube Player, um Videos oder Live-Streams anzusehen- Fügen Sie ein leeres Stream-Widget hinzu
Schaltfläche „Hinzufügen“ aus der Navigationsleiste Ziehen Sie den Link oder den Videostream per Drag-and-Drop in den Container- Eingabefeld zum Kopieren und Einfügen der Linkreferenz
Alle Widgets im Layout löschen Löschen Sie ein einzelnes Widget aus dem Layout- Ändern Sie die Videoqualität für alle Streams
- Alle Streams stummschalten/Stummschaltung aufheben
- Mischansicht für Layouts
- Umschalttaste zur Zufallsansicht hinzufügen
