feat(in-130): watch all bug fix

src/features/MatchPage/components/LiveMatch/hooks/index.tsx

@@ -16,6 +16,8 @@ import { usePlaylistLogger } from './usePlaylistLogger'
 export const useLiveMatch = () => {
   const {
     handlePlaylistClick,
+    isPlayFilterEpisodes,
+    playNextEpisode,
     profile,
     selectedPlaylist,
     setFullMatchPlaylistDuration,
@@ -66,10 +68,12 @@ export const useLiveMatch = () => {
 
   return {
     chapters,
+    isPlayFilterEpisodes,
     onDurationChange,
     onPlayerProgressChange,
     onPlayingChange,
     onPlaylistSelect,
+    playNextEpisode,
     resume: resume ?? fromStartIfStreamPaused,
     selectedPlaylist,
     streamUrl: `${API_ROOT}/video/stream/${sportType}/${matchId}.m3u8`,

src/features/MatchPage/components/LiveMatch/index.tsx

@@ -1,7 +1,9 @@
-import { Fragment } from 'react'
+import { Fragment, useState } from 'react'
 
 import isEmpty from 'lodash/isEmpty'
 
+import type { TCircleAnimation } from 'features/CircleAnimationBar'
+import { initialCircleAnimation } from 'features/CircleAnimationBar'
 import { useMatchPageStore } from 'features/MatchPage/store'
 import { StreamPlayer } from 'features/StreamPlayer'
 import { YoutubePlayer } from 'features/StreamPlayer/components/YoutubePlayer'
@@ -13,6 +15,8 @@ import { useLiveMatch } from './hooks'
 import { MatchDescription } from '../MatchDescription'
 
 export const LiveMatch = () => {
+  const [circleAnimation, setCircleAnimation] = useState<TCircleAnimation>(initialCircleAnimation)
+
   const {
     profile,
     selectedPlaylist,
@@ -39,10 +43,12 @@ export const LiveMatch = () => {
             onProgressChange={onPlayerProgressChange}
             resumeFrom={resume}
             url={streamUrl}
+            setCircleAnimation={setCircleAnimation}
           />
         ) : (
           !isEmpty(chapters) && (
             <StreamPlayer
+              setCircleAnimation={setCircleAnimation}
               onDurationChange={onDurationChange}
               onPlayingChange={onPlayingChange}
               onProgressChange={onPlayerProgressChange}
@@ -56,6 +62,8 @@ export const LiveMatch = () => {
       </Container>
 
       <MatchSidePlaylists
+        setCircleAnimation={setCircleAnimation}
+        circleAnimation={circleAnimation}
         onSelect={onPlaylistSelect}
         selectedPlaylist={selectedPlaylist}
       />

src/features/StreamPlayer/hooks/index.tsx

@@ -14,13 +14,13 @@ import { isIOS } from 'config/userAgent'
 import { useObjectState } from 'hooks/useObjectState'
 import { useEventListener } from 'hooks/useEventListener'
 
+import type { TSetCircleAnimation } from 'features/CircleAnimationBar'
+import type { Chapters } from 'features/StreamPlayer/types'
 import { useVolume } from 'features/VideoPlayer/hooks/useVolume'
 import { useNoNetworkPopupStore } from 'features/NoNetworkPopup'
 import { useLiveMatch } from 'features/MatchPage/components/LiveMatch/hooks'
-
-import type { Chapters } from 'features/StreamPlayer/types'
-
 import { useLexicsStore } from 'features/LexicsStore'
+
 import { REWIND_SECONDS } from '../config'
 import { useHlsPlayer } from './useHlsPlayer'
 import { useFullscreen } from './useFullscreen'
@@ -54,6 +54,7 @@ export type Props = {
   onPlayingChange: (playing: boolean) => void,
   onProgressChange: (seconds: number) => void,
   resumeFrom?: number,
+  setCircleAnimation: TSetCircleAnimation,
   url?: string,
 }
 
@@ -64,6 +65,7 @@ export const useVideoPlayer = ({
   onPlayingChange,
   onProgressChange: progressChangeCallback,
   resumeFrom,
+  setCircleAnimation,
 }: Props) => {
   const [{
     activeChapterIndex,
@@ -78,7 +80,12 @@ export const useVideoPlayer = ({
     seeking,
   }, setPlayerState] = useObjectState({ ...initialState, chapters: chaptersProps })
 
-  const { onPlaylistSelect, selectedPlaylist } = useLiveMatch()
+  const {
+    isPlayFilterEpisodes,
+    onPlaylistSelect,
+    playNextEpisode,
+    selectedPlaylist,
+  } = useLiveMatch()
 
   const { lang } = useLexicsStore()
 
@@ -326,13 +333,17 @@ export const useVideoPlayer = ({
     if ((isLive && chapters[0]?.isFullMatchChapter) || isEmpty(chapters)) return
 
     const { duration: chapterDuration } = getActiveChapter()
-    if (playedProgress >= chapterDuration && !seeking) {
+    if (playedProgress >= chapterDuration && !seeking && !isPlayFilterEpisodes) {
       if (isLive && isLastChapterPlaying) {
         backToPausedTime()
       } else {
         playNextChapter()
       }
     }
+    if (playedProgress >= chapterDuration && !seeking && isPlayFilterEpisodes) {
+      setPlayerState({ playedProgress: 0 })
+      playNextEpisode()
+    }
     // eslint-disable-next-line
   }, [
     isLive,
@@ -342,6 +353,8 @@ export const useVideoPlayer = ({
     playedProgress,
     seeking,
     playNextChapter,
+    playNextEpisode,
+    isPlayFilterEpisodes,
   ])
 
   const { isOnline } = useNoNetworkPopupStore()
@@ -385,6 +398,21 @@ export const useVideoPlayer = ({
     }
   }, [ready, videoRef])
 
+  useEffect(() => {
+    if (!setCircleAnimation) return
+    setCircleAnimation((state) => ({
+      ...state,
+      playedProgress,
+      playing,
+      ready,
+    }))
+  }, [
+    playedProgress,
+    playing,
+    ready,
+    setCircleAnimation,
+  ])
+
   const warningText = lang === 'es'
     ? 'La transmisión en vivo no está disponible temporalmente en dispositivos iOS'
     : 'Live streaming is temporarily unavailable on iOS devices'