diff --git a/src/features/MatchPage/components/LiveMatch/hooks/index.tsx b/src/features/MatchPage/components/LiveMatch/hooks/index.tsx index d6b63df5..d2dc0c41 100644 --- a/src/features/MatchPage/components/LiveMatch/hooks/index.tsx +++ b/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]) diff --git a/src/features/StreamPlayer/hooks/index.tsx b/src/features/StreamPlayer/hooks/index.tsx index abe8ae2f..63b3eddf 100644 --- a/src/features/StreamPlayer/hooks/index.tsx +++ b/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) - ? fullMatchDuration - getActiveChapter().startOffsetMs + const duration = useMemo(() => (( + 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 - && isLive - && playedProgress > duration - BUFFERING_TIME * 1.5 + const isLiveTime = useMemo(() => { + const matchDuration = duration === 0 && Number.isFinite(videoRefDurationMs) + ? 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) - // eslint-disable-next-line react-hooks/exhaustive-deps + if (liveProgressMs > 0 && isLiveTime) setIsLivePlaying(false) + // 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 } - - const liveProgressMs = Math.max(duration - BUFFERING_TIME, 0) - - setPlayerState({ playedProgress: pausedProgress.current, seek: pausedProgress.current / 1000 }) - if (liveProgressMs > 0) setIsPausedTime(false) - // eslint-disable-next-line + setIsPausedTime(false) + // eslint-disable-next-line }, [ duration, - onPlaylistSelect, selectedPlaylist, - setPlayerState, - matchPlaylists.match, + restartVideo, ]) 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,