|
|
|
@ -81,11 +81,11 @@ export const useVideoPlayer = ({ |
|
|
|
}, setPlayerState] = useObjectState({ ...initialState, chapters: chaptersProps }) |
|
|
|
}, setPlayerState] = useObjectState({ ...initialState, chapters: chaptersProps }) |
|
|
|
|
|
|
|
|
|
|
|
const { onPlaylistSelect, selectedPlaylist } = useLiveMatch() |
|
|
|
const { onPlaylistSelect, selectedPlaylist } = useLiveMatch() |
|
|
|
const [pauseTime, setPauseTime] = useState(0) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { url } = chapters[0] ?? { url: '' } |
|
|
|
const { url } = chapters[0] ?? { url: '' } |
|
|
|
const numberOfChapters = size(chapters) |
|
|
|
const numberOfChapters = size(chapters) |
|
|
|
const { hls, videoRef } = useHlsPlayer(url, resumeFrom) |
|
|
|
const { hls, videoRef } = useHlsPlayer(url, resumeFrom) |
|
|
|
|
|
|
|
const [isLiveTime, setIsLiveTime] = useState(false) |
|
|
|
|
|
|
|
|
|
|
|
const chaptersDuration = useDuration(chapters) |
|
|
|
const chaptersDuration = useDuration(chapters) |
|
|
|
|
|
|
|
|
|
|
|
@ -100,7 +100,6 @@ export const useVideoPlayer = ({ |
|
|
|
stopPlaying, |
|
|
|
stopPlaying, |
|
|
|
togglePlaying, |
|
|
|
togglePlaying, |
|
|
|
} = usePlayingHandlers(setPlayerState, chapters) |
|
|
|
} = usePlayingHandlers(setPlayerState, chapters) |
|
|
|
console.log('playedProgress', playedProgress, '|', 'chapters =', chapters) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const getActiveChapter = useCallback( |
|
|
|
const getActiveChapter = useCallback( |
|
|
|
(index: number = activeChapterIndex) => chapters[index], |
|
|
|
(index: number = activeChapterIndex) => chapters[index], |
|
|
|
@ -205,10 +204,35 @@ export const useVideoPlayer = ({ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const backToLive = useCallback(() => { |
|
|
|
const backToLive = useCallback(() => { |
|
|
|
const liveProgressMs = Math.max(duration - 30000, 0) |
|
|
|
if (!duration) return |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (selectedPlaylist?.id !== 'full_game') { |
|
|
|
|
|
|
|
onPlaylistSelect({ |
|
|
|
|
|
|
|
duration: 0, |
|
|
|
|
|
|
|
episodes: [], |
|
|
|
|
|
|
|
id: 'full_game', |
|
|
|
|
|
|
|
lexic: 13028, |
|
|
|
|
|
|
|
type: 0, |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
setIsLiveTime(true) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const liveProgressMs = Math.max(duration - 30000, 0) |
|
|
|
setPlayerState({ playedProgress: liveProgressMs, seek: liveProgressMs / 1000 }) |
|
|
|
setPlayerState({ playedProgress: liveProgressMs, seek: liveProgressMs / 1000 }) |
|
|
|
}, [duration, setPlayerState]) |
|
|
|
if (liveProgressMs > 0) setIsLiveTime(false) |
|
|
|
|
|
|
|
}, [ |
|
|
|
|
|
|
|
duration, |
|
|
|
|
|
|
|
onPlaylistSelect, |
|
|
|
|
|
|
|
selectedPlaylist, |
|
|
|
|
|
|
|
setPlayerState, |
|
|
|
|
|
|
|
]) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
if (duration && isLiveTime && chapters[0]?.isFullMatchChapter) { |
|
|
|
|
|
|
|
backToLive() |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// eslint-disable-next-line
|
|
|
|
|
|
|
|
}, [duration, isLiveTime]) |
|
|
|
|
|
|
|
|
|
|
|
useEventListener({ |
|
|
|
useEventListener({ |
|
|
|
callback: (e: KeyboardEvent) => { |
|
|
|
callback: (e: KeyboardEvent) => { |
|
|
|
@ -237,50 +261,27 @@ export const useVideoPlayer = ({ |
|
|
|
...initialState, |
|
|
|
...initialState, |
|
|
|
chapters: chaptersProps, |
|
|
|
chapters: chaptersProps, |
|
|
|
playing: true, |
|
|
|
playing: true, |
|
|
|
seek: (pauseTime || chaptersProps[0].startOffsetMs) / 1000, |
|
|
|
seek: chaptersProps[0].startOffsetMs / 1000, |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, [ |
|
|
|
}, [ |
|
|
|
chapters, |
|
|
|
chapters, |
|
|
|
chaptersProps, |
|
|
|
chaptersProps, |
|
|
|
isLive, |
|
|
|
isLive, |
|
|
|
setPlayerState, |
|
|
|
setPlayerState, |
|
|
|
pauseTime, |
|
|
|
|
|
|
|
]) |
|
|
|
]) |
|
|
|
console.log('pauseTime', pauseTime, '\n', 'chapters', chapters, '\n', 'playedProgress', playedProgress, '\n', 'selectedPlaylist', selectedPlaylist) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
if (!isLive) return |
|
|
|
|
|
|
|
if (isLive && selectedPlaylist?.id !== 'full_game') { |
|
|
|
|
|
|
|
// setPauseTime(playedProgress)
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, [selectedPlaylist]) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if ((isLive && chapters[0]?.isFullMatchChapter) || isEmpty(chapters)) return |
|
|
|
if ((isLive && chapters[0]?.isFullMatchChapter) || isEmpty(chapters)) return |
|
|
|
|
|
|
|
|
|
|
|
const { duration: chapterDuration } = getActiveChapter() |
|
|
|
const { duration: chapterDuration } = getActiveChapter() |
|
|
|
if (playedProgress >= chapterDuration && !seeking && !isLive) { |
|
|
|
if (playedProgress >= chapterDuration && !seeking) { |
|
|
|
playNextChapter() |
|
|
|
playNextChapter() |
|
|
|
} else if (playedProgress >= chapterDuration && !seeking && isLive) { |
|
|
|
|
|
|
|
onPlaylistSelect({ |
|
|
|
|
|
|
|
duration: 0, |
|
|
|
|
|
|
|
episodes: [], |
|
|
|
|
|
|
|
id: 'full_game', |
|
|
|
|
|
|
|
lexic: 13028, |
|
|
|
|
|
|
|
type: 0, |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
console.log('newChapters', chapters) |
|
|
|
|
|
|
|
seekTo(pauseTime) |
|
|
|
|
|
|
|
// setPlayerState({
|
|
|
|
|
|
|
|
// ...initialState,
|
|
|
|
|
|
|
|
// chapters: chaptersProps,
|
|
|
|
|
|
|
|
// seek: pauseTime / 1000,
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}, [ |
|
|
|
}, [ |
|
|
|
isLive, |
|
|
|
isLive, |
|
|
|
chapters, |
|
|
|
chapters, |
|
|
|
getActiveChapter, |
|
|
|
getActiveChapter, |
|
|
|
|
|
|
|
onPlaylistSelect, |
|
|
|
playedProgress, |
|
|
|
playedProgress, |
|
|
|
seeking, |
|
|
|
seeking, |
|
|
|
playNextChapter, |
|
|
|
playNextChapter, |
|
|
|
|