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 以观看视频或直播
  • 添加空白流小部件
    • 从导航栏添加按钮
    • 将链接或视频流拖放到容器中
    • 用于复制和粘贴链接参考的输入字段
  • 清除布局中的所有小部件
  • 从布局中删除单个小部件
  • 更改所有流的视频质量
  • 对所有流静音/取消静音
  • 布局的随机播放视图
    • 将切换按钮添加到随机播放视图中