feat: 🎸 OTT-783 (#291)

* 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

@@ -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

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]

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'
+import { getNextPlayer } from '../helpers'
-
-const getNextPlayer = (player: Players): Players => (player + 1) % 2
 
 export const usePlayingHandlers = (
   setPlayerState: SetPartialState<PlayerState>,