fix(#578): back to live fix

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

@@ -31,7 +31,7 @@ export const useLiveMatch = () => {
     const matchesLastWatchSecond: MatchSecondType | null = lastSecondLS && JSON.parse(lastSecondLS)
     // undefined означает, что юзер будет смотреть лайв
     return profile && !profile.live
-      ? matchesLastWatchSecond?.[sportType]?.[matchId]?.lastWatchSecond || 0
+      ? matchesLastWatchSecond?.[sportType]?.[matchId]?.lastWatchSecond
       : undefined
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [profile])

src/features/StreamPlayer/hooks/index.tsx

@@ -139,8 +139,11 @@ export const useVideoPlayer = ({
     resumeFrom: resumeTimeWithOffset,
     src: url,
   })
-  // временно закоментил, если ничего не сломается, удалю
+
-  // const [isLivePlaying, setIsLivePlaying] = useState(false)
+  // eslint-disable-next-line no-unsafe-optional-chaining
+  const videoRefDurationMs = videoRef.current?.duration! * 1000
+
+  const [isLivePlaying, setIsLivePlaying] = useState(false)
   const [isPausedTime, setIsPausedTime] = useState(false)
   const pausedProgress = useRef(0)
 
@@ -194,9 +197,20 @@ export const useVideoPlayer = ({
 
   const chaptersDuration = useDuration(chapters)
 
-  const duration = (isLive && chapters[0]?.isFullMatchChapter)
+  const duration = useMemo(() => ((
-    ? fullMatchDuration - getActiveChapter().startOffsetMs
+    isLive
+    && chapters[0]?.isFullMatchChapter
+    && Number.isFinite(videoRefDurationMs)
+  )
+    ? videoRefDurationMs - getActiveChapter().startOffsetMs
     : chaptersDuration
+  ), [
+    chapters,
+    chaptersDuration,
+    getActiveChapter,
+    isLive,
+    videoRefDurationMs,
+  ])
 
   const {
     onReady,
@@ -206,9 +220,9 @@ export const useVideoPlayer = ({
     togglePlaying,
   } = usePlayingHandlers(setPlayerState, chapters)
 
-  const restartVideo = () => {
+  const restartVideo = useCallback(() => {
     onPlaylistSelect(matchPlaylists.match[0])
-  }
+  }, [matchPlaylists.match, onPlaylistSelect])
 
   const {
     isFullscreen,
@@ -282,9 +296,21 @@ export const useVideoPlayer = ({
     setPlayerState({ playing: true })
   }
 
-  const checkLive = () => chapters[0]?.isFullMatchChapter
+  const isLiveTime = useMemo(() => {
-      && isLive
+    const matchDuration = duration === 0 && Number.isFinite(videoRefDurationMs)
-      && playedProgress > duration - BUFFERING_TIME * 1.5
+      ? videoRefDurationMs
+      : duration
+
+    return chapters[0]?.isFullMatchChapter
+          && isLive
+          && playedProgress > matchDuration - BUFFERING_TIME * 1.5
+  }, [
+    chapters,
+    duration,
+    isLive,
+    playedProgress,
+    videoRefDurationMs,
+  ])
 
   const onDuration = (durationSeconds: number) => {
     setPlayerState({ duration: toMilliSeconds(durationSeconds) })
@@ -318,19 +344,26 @@ export const useVideoPlayer = ({
 
     if (selectedPlaylist?.id !== FULL_GAME_KEY) {
       restartVideo()
-      // setIsLivePlaying(true)
+      setIsLivePlaying(true)
+      return
     }
+    const matchDuration = fullMatchDuration === 0 && Number.isFinite(videoRefDurationMs)
+      ? videoRefDurationMs
+      : fullMatchDuration
 
-    const liveProgressMs = Math.max(fullMatchDuration - BUFFERING_TIME, 0)
+    const liveProgressMs = Math.max(matchDuration - BUFFERING_TIME, 0)
     setPlayerState({ playedProgress: liveProgressMs, seek: liveProgressMs / 1000 })
-    // if (liveProgressMs > 0) setIsLivePlaying(false)
+    if (liveProgressMs > 0 && isLiveTime) setIsLivePlaying(false)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     duration,
-    onPlaylistSelect,
     selectedPlaylist,
     setPlayerState,
     matchPlaylists.match,
+    isLiveTime,
+    fullMatchDuration,
+    videoRefDurationMs,
+    restartVideo,
   ])
 
   const backToPausedTime = useCallback(() => {
@@ -339,19 +372,14 @@ export const useVideoPlayer = ({
     if (selectedPlaylist?.id !== FULL_GAME_KEY) {
       restartVideo()
       setIsPausedTime(true)
+      return
     }
-
+    setIsPausedTime(false)
-    const liveProgressMs = Math.max(duration - BUFFERING_TIME, 0)
+  // eslint-disable-next-line
-
-    setPlayerState({ playedProgress: pausedProgress.current, seek: pausedProgress.current / 1000 })
-    if (liveProgressMs > 0) setIsPausedTime(false)
-    // eslint-disable-next-line
   }, [
     duration,
-    onPlaylistSelect,
     selectedPlaylist,
-    setPlayerState,
+    restartVideo,
-    matchPlaylists.match,
   ])
 
   const stopPlayingEpisodes = () => {
@@ -373,22 +401,17 @@ export const useVideoPlayer = ({
   }, [selectedPlaylist])
 
   useEffect(() => {
-    if (duration && isUndefined(resumeFrom) && chaptersProps[0]?.isFullMatchChapter) {
+    if (
+      isLive
+      && isNumber(duration)
+      && isUndefined(resumeFrom)
+      && chaptersProps[0]?.isFullMatchChapter
+    ) {
       backToLive()
     }
     // eslint-disable-next-line
   }, [])
 
-  useEffect(() => {
-    if (duration
-        && isPausedTime
-        && chapters[0]?.isFullMatchChapter
-    ) {
-      backToPausedTime()
-    }
-    // eslint-disable-next-line
-  }, [duration, isPausedTime])
-
   useEventListener({
     callback: (e: KeyboardEvent) => {
       if (isOpen) return
@@ -434,7 +457,12 @@ export const useVideoPlayer = ({
       && chapters[0]?.url.match(regURL)?.[0] === chaptersProps[0]?.url.match(regURL)?.[0])
       || (isEmpty(chapters) || isEmpty(chaptersProps))) return
 
-    if (!isUndefined(resumeFrom) && chaptersProps[0].isFullMatchChapter) {
+    if (
+      !isUndefined(resumeFrom)
+      && chaptersProps[0].isFullMatchChapter
+      && !isLivePlaying
+      && !isPausedTime
+    ) {
       setPlayerState({
         ...initialState,
         chapters: chaptersProps,
@@ -444,6 +472,42 @@ export const useVideoPlayer = ({
       return
     }
 
+    if (
+      chaptersProps[0].isFullMatchChapter
+      && isLive
+      && selectedPlaylist.id === FULL_GAME_KEY
+      && isLivePlaying
+      && !isPausedTime
+    ) {
+      setIsLivePlaying(false)
+      setPlayerState({
+        ...initialState,
+        chapters: chaptersProps,
+        duration: videoRefDurationMs,
+        playing: true,
+        seek: Number.isFinite(videoRefDurationMs)
+          ? (videoRefDurationMs - BUFFERING_TIME) / 1000
+          : 0,
+      })
+      return
+    }
+
+    if (
+      chaptersProps[0].isFullMatchChapter
+      && selectedPlaylist.id === FULL_GAME_KEY
+      && isPausedTime
+      && !isLivePlaying
+    ) {
+      setIsPausedTime(false)
+      setPlayerState({
+        ...initialState,
+        chapters: chaptersProps,
+        duration: videoRefDurationMs,
+        playing: true,
+        seek: pausedProgress.current / 1000,
+      })
+      return
+    }
     setPlayerState({
       ...initialState,
       chapters: chaptersProps,
@@ -456,10 +520,18 @@ export const useVideoPlayer = ({
     chaptersProps,
     isLive,
     setPlayerState,
+    isPausedTime,
+    isLivePlaying,
+    videoRef,
+    selectedPlaylist,
   ])
 
   useEffect(() => {
-    if ((chapters[0]?.isFullMatchChapter) || isEmpty(chapters)) return
+    if ((
+      chapters[0]?.isFullMatchChapter)
+      || isEmpty(chapters)
+      || selectedPlaylist.id === FULL_GAME_KEY
+    ) return
 
     const { duration: chapterDuration } = getActiveChapter()
     if (playedProgress >= chapterDuration && !seeking && !isPlayFilterEpisodes) {
@@ -590,12 +662,12 @@ export const useVideoPlayer = ({
     buffering,
     chapters,
     currentPlayingOrder,
-    duration,
+    duration: duration || videoRefDurationMs,
     isFirstChapterPlaying,
     isFullscreen,
     isLastChapterPlaying,
     isLive,
-    isLiveTime: checkLive(),
+    isLiveTime,
     loadedProgress,
     numberOfChapters,
     onDuration,