|
|
|
@ -1,5 +1,6 @@ |
|
|
|
import type { MouseEvent } from 'react' |
|
|
|
|
|
|
|
import { |
|
|
|
import { |
|
|
|
|
|
|
|
MouseEvent, |
|
|
|
|
|
|
|
useMemo, |
|
|
|
useRef, |
|
|
|
useRef, |
|
|
|
useCallback, |
|
|
|
useCallback, |
|
|
|
useEffect, |
|
|
|
useEffect, |
|
|
|
@ -11,6 +12,7 @@ import { useTour } from '@reactour/tour' |
|
|
|
import size from 'lodash/size' |
|
|
|
import size from 'lodash/size' |
|
|
|
import isNumber from 'lodash/isNumber' |
|
|
|
import isNumber from 'lodash/isNumber' |
|
|
|
import isEmpty from 'lodash/isEmpty' |
|
|
|
import isEmpty from 'lodash/isEmpty' |
|
|
|
|
|
|
|
import isUndefined from 'lodash/isUndefined' |
|
|
|
|
|
|
|
|
|
|
|
import Hls from 'hls.js' |
|
|
|
import Hls from 'hls.js' |
|
|
|
|
|
|
|
|
|
|
|
@ -111,14 +113,23 @@ export const useVideoPlayer = ({ |
|
|
|
/** время для сохранения статистики просмотра матча */ |
|
|
|
/** время для сохранения статистики просмотра матча */ |
|
|
|
const timeForStatistics = useRef(0) |
|
|
|
const timeForStatistics = useRef(0) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const resumeTimeWithOffset = useMemo(() => { |
|
|
|
|
|
|
|
const chapterWithOffset = chapters[0].startOffsetMs / 1000 |
|
|
|
|
|
|
|
return !isUndefined(resumeFrom) && isLive && chapters[0].isFullMatchChapter |
|
|
|
|
|
|
|
? resumeFrom + chapterWithOffset |
|
|
|
|
|
|
|
: resumeFrom |
|
|
|
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
|
|
|
|
|
}, [resumeFrom]) |
|
|
|
|
|
|
|
|
|
|
|
const { url } = chapters[0] ?? { url: '' } |
|
|
|
const { url } = chapters[0] ?? { url: '' } |
|
|
|
const numberOfChapters = size(chapters) |
|
|
|
const numberOfChapters = size(chapters) |
|
|
|
const { hls, videoRef } = useHlsPlayer({ |
|
|
|
const { hls, videoRef } = useHlsPlayer({ |
|
|
|
isLive, |
|
|
|
isLive, |
|
|
|
resumeFrom, |
|
|
|
resumeFrom: resumeTimeWithOffset, |
|
|
|
src: url, |
|
|
|
src: url, |
|
|
|
}) |
|
|
|
}) |
|
|
|
const [isLivePlaying, setIsLivePlaying] = useState(false) |
|
|
|
// временно закоментил, если ничего не сломается, удалю
|
|
|
|
|
|
|
|
// const [isLivePlaying, setIsLivePlaying] = useState(false)
|
|
|
|
const [isPausedTime, setIsPausedTime] = useState(false) |
|
|
|
const [isPausedTime, setIsPausedTime] = useState(false) |
|
|
|
const [pausedProgress, setPausedProgress] = useState(0) |
|
|
|
const [pausedProgress, setPausedProgress] = useState(0) |
|
|
|
|
|
|
|
|
|
|
|
@ -253,12 +264,12 @@ export const useVideoPlayer = ({ |
|
|
|
|
|
|
|
|
|
|
|
if (selectedPlaylist?.id !== FULL_GAME_KEY) { |
|
|
|
if (selectedPlaylist?.id !== FULL_GAME_KEY) { |
|
|
|
restartVideo() |
|
|
|
restartVideo() |
|
|
|
setIsLivePlaying(true) |
|
|
|
// setIsLivePlaying(true)
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const liveProgressMs = Math.max(fullMatchDuration - BUFFERING_TIME, 0) |
|
|
|
const liveProgressMs = Math.max(fullMatchDuration - BUFFERING_TIME, 0) |
|
|
|
setPlayerState({ playedProgress: liveProgressMs, seek: liveProgressMs / 1000 }) |
|
|
|
setPlayerState({ playedProgress: liveProgressMs, seek: liveProgressMs / 1000 }) |
|
|
|
if (liveProgressMs > 0) setIsLivePlaying(false) |
|
|
|
// if (liveProgressMs > 0) setIsLivePlaying(false)
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
|
}, [ |
|
|
|
}, [ |
|
|
|
duration, |
|
|
|
duration, |
|
|
|
@ -296,11 +307,11 @@ export const useVideoPlayer = ({ |
|
|
|
}, [selectedPlaylist]) |
|
|
|
}, [selectedPlaylist]) |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (duration && isLivePlaying && chapters[0]?.isFullMatchChapter) { |
|
|
|
if (duration && isUndefined(resumeFrom) && chaptersProps[0]?.isFullMatchChapter) { |
|
|
|
backToLive() |
|
|
|
backToLive() |
|
|
|
} |
|
|
|
} |
|
|
|
// eslint-disable-next-line
|
|
|
|
// eslint-disable-next-line
|
|
|
|
}, [duration, isLivePlaying]) |
|
|
|
}, []) |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (duration |
|
|
|
if (duration |
|
|
|
@ -328,12 +339,16 @@ export const useVideoPlayer = ({ |
|
|
|
}, [seek, setPlayerState]) |
|
|
|
}, [seek, setPlayerState]) |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
onPlayingChange(playing) |
|
|
|
onPlayingChange(selectedPlaylist?.id === FULL_GAME_KEY ? playing : false) |
|
|
|
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
|
|
|
|
|
}, [playing, selectedPlaylist]) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (playing) { |
|
|
|
if (playing) { |
|
|
|
setPlayerState({ buffering: false }) |
|
|
|
setPlayerState({ buffering: false }) |
|
|
|
} |
|
|
|
} |
|
|
|
// eslint-disable-next-line
|
|
|
|
// eslint-disable-next-line
|
|
|
|
}, [playing, onPlayingChange]) |
|
|
|
}, [playing]) |
|
|
|
|
|
|
|
|
|
|
|
const regURL = /\d{6,20}/gi |
|
|
|
const regURL = /\d{6,20}/gi |
|
|
|
|
|
|
|
|
|
|
|
@ -353,6 +368,16 @@ export const useVideoPlayer = ({ |
|
|
|
&& chapters[0]?.url.match(regURL)?.[0] === chaptersProps[0]?.url.match(regURL)?.[0]) |
|
|
|
&& chapters[0]?.url.match(regURL)?.[0] === chaptersProps[0]?.url.match(regURL)?.[0]) |
|
|
|
|| (isEmpty(chapters) || isEmpty(chaptersProps))) return |
|
|
|
|| (isEmpty(chapters) || isEmpty(chaptersProps))) return |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (!isUndefined(resumeFrom) && chaptersProps[0].isFullMatchChapter) { |
|
|
|
|
|
|
|
setPlayerState({ |
|
|
|
|
|
|
|
...initialState, |
|
|
|
|
|
|
|
chapters: chaptersProps, |
|
|
|
|
|
|
|
playing: true, |
|
|
|
|
|
|
|
seek: resumeFrom + chaptersProps[0].startOffsetMs / 1000, |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
return |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setPlayerState({ |
|
|
|
setPlayerState({ |
|
|
|
...initialState, |
|
|
|
...initialState, |
|
|
|
chapters: chaptersProps, |
|
|
|
chapters: chaptersProps, |
|
|
|
|
