멀티 스트림 트위치
동시에 여러 트위치 스트림을 볼 수 있는 반응/리덕스 프로젝트!
개요
목표: 사용자가 브라우저에서 원하는 만큼의 창을 구성할 수 있도록 하는 반응 + redux + immutableJS를 사용하여 단일 페이지 앱을 만듭니다.
영감을 얻기 위해 확인해 볼 수 있는 예
- http://kadgar.net/live/
- http://multitwitch.tv/
- https://multistre.am/
개선사항/기능 목록
- 구성 가능한 그리드 디스플레이에 넣을 채널 이름으로 X 양의 스트림을 선택하세요.
- 스트림 삭제 창을 포함한 반응형 디스플레이
- 자동 완성을 위한 채널 목록 가져오기
- 구성 가능한 창 크기
-
react-grid-layout 또는 타사 비반응 라이브러리를 반응에 통합하는 방법의 예로 masonry 사용해 보세요.
- 전체 페이지 새로 고침 시 채널 유지(로컬 스토리지 상태)
- 음소거/음소거 해제를 위한 키 바인딩 -> 더 빠르게 전체 화면으로 전환
- 보기에 있는 스트림의 하위 집합에 걸쳐 동일한 메시지를 브로드캐스트하는 통합 채팅
코덱스
공개 놀이터용 AWS 인스턴스 설정
바벨-에슬린트 추가
테마 추가(CSS/인라인 스타일 프레임워크 선택)
기본 테마 추가- 인라인 스타일을 위한 다른 CSS 프레임워크를 살펴보세요.
반응 라우터 v4를 사용한 기본 레이아웃 및 작업 흐름
Redux 추가
매장 구성에 추가 immutableJS 저장소 스캐폴딩에 추가 immutableJS 레코드에 대한 transit-js 인코딩 추가
로컬 저장소에 유지 로컬 저장소에서 로드
가져오기 클라이언트 추가
가져오기 위에 클라이언트 래퍼 추가 saga 미들웨어가 포함된 redux-saga 추가 채널 쿼리를 위한 TWITCH API 통합 추가 채널 쿼리를 위한 YOUTUBE API 통합 추가 레이아웃 구성 공유를 위해 GOOGLE URL Shortener 추가
도움말 대화상자
도움말 대화 상자 모달 추가- 도움말 내용과 사용법을 작성하세요.
공유 대화상자 및 Google 링크 단축기 통합
스토어의 레이아웃 데이터에 대한 단축된 Google URL 링크를 표시하는 입력 필드가 있는 공유 대화 상자 추가 Saga를 사용하여 Google URL 단축 API 추가
링크에서 공유 구성 로드
공유 가능한 항목에 대한 랜딩 페이지 추가 URL에서 구성을 가져와 사용자의 현재 레이아웃 상태에 삽입하는 로드 컨테이너를 추가합니다.
스트림 레이아웃 기능
구성 가능한 그리드 레이아웃을 위해 react-grid-layout 통합 Twitch Player와 Youtube Player를 통합하여 비디오 또는 라이브 스트림 보기- 빈 스트림 위젯 추가
Navbar에서 버튼 추가 링크 또는 비디오 스트림을 컨테이너로 드래그 앤 드롭- 링크 참조를 복사하여 붙여넣기 위한 입력 필드
레이아웃의 모든 위젯 지우기 레이아웃에서 개별 위젯 삭제- 모든 스트림에서 비디오 품질 변경
- 모든 스트림에서 음소거/음소거 해제
- 레이아웃의 셔플 보기
