fix(#1701): stop back to start video after episodes

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

@@ -1,3 +1,5 @@
+import { RefObject } from 'react'
+
 import map from 'lodash/map'
 
 import type { Chapter } from '../../types'
@@ -16,24 +18,25 @@ type ChapterWithStyles = Chapter & {
 
 type Props = {
   chapters: Array<ChapterWithStyles>,
+  videoRef?: RefObject<HTMLVideoElement>,
 }
 
-export const Chapters = ({ chapters }: Props) => (
-  <ChapterList>
-    {
-      map(
-        chapters,
-        ({
-          loaded,
-          played,
-          width,
-        }, index) => (
-          <ChapterContainer key={index} style={{ width: `${width}%` }}>
-            <LoadedProgress style={{ width: `${loaded}%` }} />
-            <PlayedProgress style={{ width: `${played}%` }} />
-          </ChapterContainer>
-        ),
-      )
-    }
-  </ChapterList>
-)
+export const Chapters = ({ chapters, videoRef }: Props) => {
+  const maxWidthProgressBar = videoRef?.current?.offsetWidth
+  return (
+    <ChapterList>
+      {map(chapters, ({
+        loaded,
+        played,
+        width,
+      }, index) => (
+        <ChapterContainer key={index} style={{ width: `${width}%` }}>
+          <LoadedProgress style={{ width: `${loaded}%` }} />
+          <PlayedProgress
+            style={{ maxWidth: `${maxWidthProgressBar ? `${maxWidthProgressBar - 30}px` : '100%'}`, width: `${played}%` }}
+          />
+        </ChapterContainer>
+      ))}
+    </ChapterList>
+  )
+}

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

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useMemo, RefObject } from 'react'
 
 import { secondsToHms } from 'helpers'
 
@@ -15,6 +15,7 @@ export type Props = {
   onTouchEnd?: () => any,
   onTouchStart?: () => any,
   playedProgress: number,
+  videoRef?: RefObject<HTMLVideoElement>,
 }
 
 export const useProgressBar = ({

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

@@ -8,7 +8,7 @@ import { useProgressBar } from './hooks'
 import { ProgressBarList } from './styled'
 
 export const ProgressBar = (props: Props) => {
-  const { onPlayedProgressChange } = props
+  const { onPlayedProgressChange, videoRef } = props
   const progressBarRef = useSlider({ onChange: onPlayedProgressChange })
   const {
     calculatedChapters,
@@ -18,7 +18,7 @@ export const ProgressBar = (props: Props) => {
 
   return (
     <ProgressBarList ref={progressBarRef}>
-      <Chapters chapters={calculatedChapters} />
+      <Chapters chapters={calculatedChapters} videoRef={videoRef} />
       <Scrubber style={{ left: `${playedProgressInPercent}%` }}>
         <TimeTooltip time={time} />
       </Scrubber>

src/features/StreamPlayer/hooks/index.tsx

@@ -298,6 +298,11 @@ export const useVideoPlayer = ({
   }, [playing, onPlayingChange])
 
   useEffect(() => {
+    if ((isLive
+      && chapters[0]?.isFullMatchChapter
+      && chaptersProps[0]?.isFullMatchChapter)
+      || isEmpty(chapters)) return
+
     setPlayerState({
       ...initialState,
       chapters: chaptersProps,

src/features/StreamPlayer/index.tsx

@@ -153,6 +153,7 @@ export const StreamPlayer = (props: Props) => {
             onPlayedProgressChange={onProgressChange}
             playedProgress={playedProgress}
             loadedProgress={loadedProgress}
+            videoRef={videoRef}
           />
         </ControlsRow>
         <ControlsRow>