многопотоковое подергивание
Проект React/Redux для одновременного просмотра нескольких потоков Twitch!
Обзор
Цель: создать одностраничное приложение с помощью React + Redux + ImmutableJS, которое позволит пользователю настраивать любое количество окон в браузере.
Примеры для вдохновения
- http://kadgar.net/live/
- http://multitwitch.tv/
- https://multistre.am/
Улучшения/Список функций
- Выберите количество потоков X по имени канала, чтобы поместить их в настраиваемую сетку.
- Адаптивный дисплей с окном удаления потока
- Получить список каналов для автозаполнения
- Настраиваемые размеры окна
-
react-grid-layout или попробуйте masonry в качестве примера того, как интегрировать сторонние библиотеки, не реагирующие на реакцию, в реакцию.
- Сохранять каналы при полном обновлении страницы (состояние локального хранилища)
- Сочетания клавиш для отключения/включения звука -> быстрее переходить в полноэкранный режим
- Единый чат для трансляции одного и того же сообщения в подмножестве видимых потоков.
Кодез
Настройка экземпляра aws для общедоступной игровой площадки
Добавить бабель-эслинт
Добавить тему (выберите CSS/встроенный стиль)
Добавить базовую тему- Посмотрите другие CSS-фреймворки для встроенных стилей.
Базовый макет и рабочий процесс с React-Router v4
Добавить Редукс
Добавить конфигурацию магазина Добавьте в хранилище immutableJS леса Добавьте кодировку transit-js для записей immutableJS.
Сохранять в локальном хранилище Загрузка из локального хранилища
Добавить клиент Fetch
Добавить клиентскую оболочку поверх выборки Добавить redux-saga с промежуточным программным обеспечением Saga. Добавьте интеграцию TWITCH API для запроса каналов. Добавьте интеграцию API YOUTUBE для запроса каналов. Добавьте GOOGLE URL Shortener для обмена конфигурацией макета.
Диалоговое окно справки
Добавить модальное диалоговое окно справки- Заполните справочную информацию и инструкции по использованию.
Диалоговое окно «Поделиться» и интеграция средства сокращения ссылок Google
Добавить диалоговое окно общего доступа с полем ввода, в котором отображается сокращенная ссылка URL-адреса Google на данные макета из магазина. Добавить API сокращения URL-адресов Google с сагой
Загрузить общую конфигурацию по ссылке
Добавьте целевую страницу для материалов, которыми можно поделиться Добавьте загрузочный контейнер, который берет конфигурацию из URL-адреса и внедряет ее в текущее состояние макета для пользователя.
Особенности макета потока
Интегрируйте react-grid-layout для настраиваемого макета сетки. Интегрируйте Twitch Player и Youtube Player для просмотра видео или прямых трансляций.- Добавить пустой виджет потока
Добавить кнопку из Navbar Перетащите ссылку или видеопоток в контейнер.- Поле ввода для копирования и вставки ссылки на ссылку
Очистить все виджеты в макете Удаление отдельного виджета из макета- Изменение качества видео во всех потоках
- Отключить/включить звук во всех потоках
- Просмотр в случайном порядке для макетов
- Добавить кнопку переключения в случайном порядке
