multi stream twitch

多流抽搐

一個 React/Redux 項目，可同時查看多個 twitch 串流！

概述

目標：建立一個帶有react + redux + immutableJS 的單頁面應用程序，允許使用者在瀏覽器中配置任意數量的視窗。

查看範例以獲取靈感

• http://kadgar.net/live/
• http://multitwitch.tv/
• https://multistre.am/

改進/功能列表

1. 按通道名稱選擇 X 數量的串流以放入可設定的網格顯示中

• 帶有刪除流視窗的響應式顯示
• 取得自動完成的頻道列表
• 可配置的視窗尺寸
  • react-grid-layout ，或嘗試使用masonry作為如何將第 3 方非 React 函式庫整合到 React 中的範例

2. 在整個頁面刷新期間保留通道（本地存儲狀態）
3. 靜音/取消靜音的按鍵綁定 -> 更快地全螢幕顯示
4. 統一聊天可在檢視中的部分串流中廣播相同的訊息

程式碼

• 為公共遊樂場設定 aws 實例

  • 演示實例

• 加入 babel-eslint

• 新增主題（選擇CSS/內嵌樣式框架）

  • 新增基本主題
  • 研究其他 css 框架的內聯樣式

• 使用 React-router v4 的基本佈局和工作流程

• 添加 Redux

  • 新增商店配置
  • 加入immutableJS商店鷹架
    • 為immutableJS記錄新增transit-js編碼
  • 持久化到本地存儲
    • localForage整合
  • 從本地存儲加載
    • redux-persist集成

• 新增獲取客戶端

  • 在 fetch 之上加入客戶端包裝器
  • 添加帶有 saga 中間件的 redux-saga
  • 新增 TWITCH API 整合以進行頻道查詢
  • 新增YOUTUBE API整合以進行頻道查詢
  • 新增 GOOGLE URL Shortener 以共享佈局配置

• 幫助對話框

  • 新增幫助對話框模式
  • 填寫幫助內容和使用說明

• 共享對話框和谷歌連結縮短器集成

  • 添加帶有輸入字段的共享對話框，該輸入字段顯示來自商店的佈局數據的縮短的 google url 鏈接
  • 新增 google url 縮短 API w/ saga

• 從連結載入共享配置

  • 新增可共享內容的登陸頁面
  • 新增載入容器，從 url 取得配置並注入到使用者的當前佈局狀態中。

• 串流佈局功能

  • 整合react-grid-layout以實現可配置的網格佈局
  • 整合 Twitch Player 和 Youtube Player 以觀看影片或直播
  • 新增空白流小工具
    • 從導覽列新增按鈕
    • 將連結或視訊串流拖放到容器中
    • 用於複製和貼上連結參考的輸入字段
  • 清除佈局中的所有小部件
  • 從佈局中刪除單個小部件
  • 更改所有串流的視頻質量
  • 對所有流靜音/取消靜音
  • 版面的隨機播放視圖
    • 將切換按鈕加入隨機播放視圖中