From 9f8ff426a64bfef127a6cd9c2ae445dee5a21bdb Mon Sep 17 00:00:00 2001
From: Zoia <43918051+zizi62@users.noreply.github.com>
Date: Thu, 4 Feb 2021 10:30:52 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20OTT-783=20(#291)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 🎸 OTT-783

added restore state when chapters changed

* feat: 🎸 OTT-783

fix comments

Co-authored-by: Zoia <zizi2405@yandex.ru>
---
 src/features/MultiSourcePlayer/helpers/index.tsx    |  4 +++-
 src/features/MultiSourcePlayer/hooks/index.tsx      | 13 ++++++++++++-
 .../MultiSourcePlayer/hooks/usePlayingHandlers.tsx  |  4 +---
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/features/MultiSourcePlayer/helpers/index.tsx b/src/features/MultiSourcePlayer/helpers/index.tsx
index 062dd10c..41316ee0 100644
--- a/src/features/MultiSourcePlayer/helpers/index.tsx
+++ b/src/features/MultiSourcePlayer/helpers/index.tsx
@@ -2,7 +2,7 @@ import { RefObject } from 'react'
 
 import findIndex from 'lodash/findIndex'
 
-import type { Chapters } from '../types'
+import type { Chapters, Players } from '../types'
 
 type Args = {
   from?: number,
@@ -31,3 +31,5 @@ export const findChapterByProgress = (chapters: Chapters, progressMs: number) =>
     startMs <= progressMs && progressMs <= endMs
   ))
 )
+
+export const getNextPlayer = (player: Players): Players => (player + 1) % 2
diff --git a/src/features/MultiSourcePlayer/hooks/index.tsx b/src/features/MultiSourcePlayer/hooks/index.tsx
index f4c57d24..2f813487 100644
--- a/src/features/MultiSourcePlayer/hooks/index.tsx
+++ b/src/features/MultiSourcePlayer/hooks/index.tsx
@@ -20,6 +20,7 @@ import { useVideoQuality } from './useVideoQuality'
 import { useDuration } from './useDuration'
 import type { Chapters } from '../types'
 import { Players } from '../types'
+import { getNextPlayer } from '../helpers'
 
 export type PlayerState = {
   activeChapterIndex: number,
@@ -64,7 +65,7 @@ export const useMultiSourcePlayer = ({
   const numberOfChapters = size(chapters)
   const [
     {
-      activeChapterIndex,
+      activeChapterIndex: chapterIndex,
       activePlayer,
       loadedProgress,
       playedProgress,
@@ -77,6 +78,7 @@ export const useMultiSourcePlayer = ({
   ] = useObjectState({ ...initialState, activeChapterIndex: resumeFrom.half })
   const video1Ref = useRef<HTMLVideoElement>(null)
   const video2Ref = useRef<HTMLVideoElement>(null)
+  const activeChapterIndex = numberOfChapters >= chapterIndex ? chapterIndex : 0
   const {
     onReady,
     playNextChapter,
@@ -145,6 +147,15 @@ export const useMultiSourcePlayer = ({
     onPlayingChange(playing)
   }, [playing, onPlayingChange])
 
+  useEffect(() => {
+    setPlayerState((state) => ({
+      ...initialState,
+      activePlayer: getNextPlayer(state.activePlayer),
+      playing: state.playing,
+      ready: state.ready,
+    }))
+  }, [chapters, setPlayerState])
+
   useEffect(() => {
     const progressSeconds = playedProgress / 1000
     const { period } = chapters[activeChapterIndex]
diff --git a/src/features/MultiSourcePlayer/hooks/usePlayingHandlers.tsx b/src/features/MultiSourcePlayer/hooks/usePlayingHandlers.tsx
index ef5cf692..4d165f00 100644
--- a/src/features/MultiSourcePlayer/hooks/usePlayingHandlers.tsx
+++ b/src/features/MultiSourcePlayer/hooks/usePlayingHandlers.tsx
@@ -3,9 +3,7 @@ import { useCallback } from 'react'
 import { SetPartialState } from 'hooks'
 
 import type { PlayerState } from '.'
-import { Players } from '../types'
-
-const getNextPlayer = (player: Players): Players => (player + 1) % 2
+import { getNextPlayer } from '../helpers'
 
 export const usePlayingHandlers = (
   setPlayerState: SetPartialState<PlayerState>,