feat(ott-1590): adding autoplay

src/features/MultiSourcePlayer/hooks/index.tsx

@@ -9,6 +9,7 @@ import size from 'lodash/size'
 
 import { useFullscreen } from 'features/StreamPlayer/hooks/useFullscreen'
 import { useVolume } from 'features/VideoPlayer/hooks/useVolume'
+import { useMatchPopupStore } from 'features/MatchPopup'
 
 import { useObjectState } from 'hooks'
 
@@ -70,7 +71,6 @@ export const useMultiSourcePlayer = ({
     playNextChapter,
     playPrevChapter,
     startPlaying,
-    stopPlaying,
     togglePlaying,
   } = usePlayingHandlers(setPlayerState, numberOfChapters)
 
@@ -83,9 +83,8 @@ export const useMultiSourcePlayer = ({
   const duration = useDuration(chapters)
 
   const handleError = useCallback(() => {
-    stopPlaying()
     onError?.()
-  }, [onError, stopPlaying])
+  }, [onError])
 
   const getActiveChapter = useCallback(
     (index: number = activeChapterIndex) => chapters[index],
@@ -171,10 +170,6 @@ export const useMultiSourcePlayer = ({
     playNextChapter()
   }
 
-  const onPause = () => {
-    setPlayerState({ playing: false })
-  }
-
   useEffect(() => {
     onPlayingChange(playing)
   }, [playing, onPlayingChange])
@@ -200,6 +195,14 @@ export const useMultiSourcePlayer = ({
     playNextChapter,
   ])
 
+  const { selectedPlaylist } = useMatchPopupStore()
+
+  useEffect(() => {
+    if (selectedPlaylist) {
+      startPlaying()
+    }
+  }, [selectedPlaylist, startPlaying])
+
   return {
     activeChapterIndex,
     activePlayer,
@@ -215,7 +218,6 @@ export const useMultiSourcePlayer = ({
     onEnded,
     onError: handleError,
     onLoadedProgress,
-    onPause,
     onPlayedProgress,
     onPlayerClick,
     onProgressChange,
@@ -230,7 +232,6 @@ export const useMultiSourcePlayer = ({
     rewindForward,
     seek,
     selectedQuality,
-    startPlaying,
     togglePlaying,
     video1Ref,
     video2Ref,

src/features/MultiSourcePlayer/index.tsx

@@ -52,7 +52,6 @@ export const MultiSourcePlayer = (props: Props) => {
     onError,
     onFullscreenClick,
     onLoadedProgress,
-    onPause,
     onPlayedProgress,
     onPlayerClick,
     onProgressChange,
@@ -105,7 +104,6 @@ export const MultiSourcePlayer = (props: Props) => {
         onLoadedProgress={firstPlayerActive ? onLoadedProgress : undefined}
         onPlayedProgress={firstPlayerActive ? onPlayedProgress : undefined}
         onEnded={onEnded}
-        onPause={onPause}
         onError={onError}
         onReady={onReady}
       />
@@ -121,7 +119,6 @@ export const MultiSourcePlayer = (props: Props) => {
         onLoadedProgress={!firstPlayerActive ? onLoadedProgress : undefined}
         onPlayedProgress={!firstPlayerActive ? onPlayedProgress : undefined}
         onEnded={onEnded}
-        onPause={onPause}
         onError={onError}
         onReady={onReady}
       />