fix(#2922): fix play next episide for live match

package.json

@@ -69,7 +69,7 @@
     "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.15",
     "commitizen": "^4.2.4",
-    "eslint": "^7.14.0",
+    "eslint": "^7.0.1",
     "eslint-config-airbnb": "18.2.1",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.22.1",

src/features/MatchPage/store/hooks/index.tsx

@@ -148,7 +148,16 @@ export const useMatchPage = () => {
   }
   const playEpisodes = () => {
     setIsPlayinFiltersEpisodes(true)
-    playNextEpisode(0)
+
+    if (matchProfile?.live) {
+      handlePlaylistClick({
+        episodes: episodesToPlay.map((el) => el.episodes[0]),
+        id: 1,
+        type: episodesToPlay[0].type,
+      })
+    } else {
+      playNextEpisode(0)
+    }
   }
 
   const disablePlayingEpisodes = () => {

src/features/MatchSidePlaylists/hooks.tsx

@@ -15,7 +15,6 @@ export const useMatchSidePlaylists = () => {
     closePopup,
     events,
     matchPlaylists: playlists,
-    profile,
     tournamentData,
   } = useMatchPageStore()
   const [selectedTab, setSelectedTab] = useState<Tabs>(Tabs.WATCH)
@@ -58,10 +57,6 @@ export const useMatchSidePlaylists = () => {
     if (selectedTab !== Tabs.EVENTS) closePopup()
   }, [selectedTab, closePopup])
 
-  useEffect(() => {
-    isWatchTabVisible && setSelectedTab(Tabs.WATCH)
-  }, [profile, isWatchTabVisible])
-
   return {
     isEventTabVisible,
     isVideoTabVisible,

src/features/StreamPlayer/components/ProgressBar/hooks.tsx

@@ -33,7 +33,7 @@ export const useProgressBar = ({
       chapters,
       loadedProgress,
       playedProgress,
-      videoDuration: duration,
+      videoDuration: chapters[activeChapterIndex].duration || duration,
     }),
     [
       activeChapterIndex,

src/features/StreamPlayer/components/ProgressBar/index.tsx

@@ -18,7 +18,7 @@ export const ProgressBar = (props: Props) => {
   return (
     <ProgressBarList ref={progressBarRef}>
       <Chapters chapters={calculatedChapters} />
-      {isScrubberVisible === false ? null : (
+      {isScrubberVisible && (
         <ScrubberContainer>
           <Scrubber style={{ left: `${playedProgressInPercent}%` }}>
             <TimeTooltip time={time} />

src/features/StreamPlayer/hooks/index.tsx

@@ -269,7 +269,10 @@ export const useVideoPlayer = ({
   }, [duration, isLiveTime])
 
   useEffect(() => {
-    if (duration && isPausedTime && chapters[0]?.isFullMatchChapter) {
+    if (duration
+        && isPausedTime
+        && chapters[0]?.isFullMatchChapter
+    ) {
       backToPausedTime()
     }
     // eslint-disable-next-line
@@ -326,7 +329,7 @@ export const useVideoPlayer = ({
 
     const { duration: chapterDuration } = getActiveChapter()
     if (playedProgress >= chapterDuration && !seeking) {
-      if (isLive) {
+      if (isLive && isLastChapterPlaying) {
         backToPausedTime()
       } else {
         playNextChapter()

src/features/StreamPlayer/index.tsx

@@ -35,6 +35,7 @@ export const StreamPlayer = (props: Props) => {
 
   const {
     activeChapterIndex,
+    allPlayedProgress,
     backToLive,
     buffering,
     centerControlsVisible,
@@ -153,7 +154,7 @@ export const StreamPlayer = (props: Props) => {
       )}
 
       <Controls
-        allPlayedProgress={playedProgress}
+        allPlayedProgress={allPlayedProgress}
         backToLive={backToLive}
         controlsVisible={mainControlsVisible}
         duration={duration}