マルチストリームトゥイッチ
複数の Twitch ストリームを同時に表示するための React/Redux プロジェクト!
概要
目標: ユーザーがブラウザーで任意の数のウィンドウを構成できるようにする、react + redux + immutableJS を使用したシングル ページ アプリを作成します。
インスピレーションを得るためにチェックすべき例
- http://kadgar.net/live/
- http://マルチツイッチ.tv/
- https://multistre.am/
改善点・機能一覧
- 構成可能なグリッド表示に入れるストリームの X 個をチャンネル名ごとに選択します
- ストリーム削除ウィンドウを備えたレスポンシブ表示
- オートコンプリート用のチャネルのリストを取得する
- 設定可能なウィンドウの寸法
- または、サードパーティの非
react-grid-layoutライブラリを反応に統合する方法の例としてmasonryを試してください。
- ページ全体を更新してもチャネルを保持する (ローカル ストレージ状態)
- ミュート/ミュート解除のキーバインディング -> 全画面表示が速くなります
- ビュー内のストリームのサブセット全体に同じメッセージをブロードキャストする統合チャット
コーデズ
パブリックプレイグラウンド用にAWSインスタンスをセットアップする
バベルエスリントを追加
テーマの追加 (CSS/インライン スタイル フレームワークを選択)
基本テーマを追加する- インライン スタイル用の他の CSS フレームワークを検討する
React-router v4 を使用した基本的なレイアウトとワークフロー
リダックスを追加する
ストア構成を追加するimmutableJS ストア スキャフォールディングを追加するimmutableJS レコードに transit-js エンコーディングを追加する
ローカルストレージに永続化するローカルストレージからロードする
フェッチクライアントの追加
フェッチの上にクライアント ラッパーを追加しますredux-saga と saga ミドルウェアを追加チャンネルクエリのための TWITCH API 統合を追加チャンネルクエリのための YOUTUBE API 統合を追加レイアウト構成を共有するために GOOGLE URL Shortener を追加する
ヘルプダイアログ
ヘルプダイアログモーダルを追加- ヘルプコンテンツと使用方法を入力します
共有ダイアログと Google リンク短縮機能の統合
ストアからのレイアウト データの短縮された Google URL リンクを表示する入力フィールド付きの共有ダイアログを追加しますsaga を使用して Google URL 短縮 API を追加
リンクから共有設定をロードする
共有可能なコンテンツのランディング ページを追加するURL から設定を取得し、ユーザーの現在のレイアウト状態に挿入するロード コンテナーを追加します。
ストリームレイアウト機能
構成可能なグリッド レイアウトのために、 react-grid-layoutを統合します。 Twitch Player と Youtube Player を統合してビデオやライブ ストリームを表示します- 空のストリーム ウィジェットを追加する
ナビゲーションバーからボタンを追加リンクまたはビデオ ストリームをコンテナにドラッグ アンド ドロップします。- リンク参照をコピーして貼り付ける入力フィールド
レイアウト内のすべてのウィジェットをクリアしますレイアウトから個々のウィジェットを削除する- すべてのストリームのビデオ品質を変更する
- すべてのストリームでミュート/ミュート解除
- レイアウトのシャッフル ビュー
