From dcabd96b105a2d174cbb244c29ab8a6be8c841ec Mon Sep 17 00:00:00 2001 From: Zoia <43918051+zizi62@users.noreply.github.com> Date: Mon, 5 Apr 2021 10:26:20 +0300 Subject: [PATCH] Ott 902 livematch start watch from (#348) * feat(ott-902): add resume and changed config * feat(ott-902): fix line --- .../components/LiveMatch/hooks/index.tsx | 3 ++ .../MatchPage/components/LiveMatch/index.tsx | 4 +-- .../MatchPage/hooks/useLastPlayPosition.tsx | 28 ++----------------- src/features/MatchPage/hooks/useUrlParam.tsx | 23 +++++++++++++++ .../components/LiveMatchPlaylist/index.tsx | 6 ++-- src/features/QueryParamsStorage/index.tsx | 5 ++++ src/features/StreamPlayer/hooks/index.tsx | 8 +++--- .../StreamPlayer/hooks/useHlsPlayer.tsx | 12 ++++++-- 8 files changed, 52 insertions(+), 37 deletions(-) create mode 100644 src/features/MatchPage/hooks/useUrlParam.tsx diff --git a/src/features/MatchPage/components/LiveMatch/hooks/index.tsx b/src/features/MatchPage/components/LiveMatch/hooks/index.tsx index bb6f48f4..39e1cfdd 100644 --- a/src/features/MatchPage/components/LiveMatch/hooks/index.tsx +++ b/src/features/MatchPage/components/LiveMatch/hooks/index.tsx @@ -10,10 +10,12 @@ import { import { usePlayerProgressReporter } from 'features/MatchPage/hooks/usePlayerProgressReporter' import { useLastPlayPosition } from 'features/MatchPage/hooks/useLastPlayPosition' +import { useUrlParam } from 'features/MatchPage/hooks/useUrlParam' export const useLiveMatch = () => { const { sportType } = useSportNameParam() const matchId = usePageId() + const resume = useUrlParam() const [liveVideos, setLiveVideos] = useState([]) @@ -24,6 +26,7 @@ export const useLiveMatch = () => { return { matchUrl: liveVideos[0] || '', + resume, ...usePlayerProgressReporter(), ...useLastPlayPosition(), } diff --git a/src/features/MatchPage/components/LiveMatch/index.tsx b/src/features/MatchPage/components/LiveMatch/index.tsx index b686b11a..ad865cd8 100644 --- a/src/features/MatchPage/components/LiveMatch/index.tsx +++ b/src/features/MatchPage/components/LiveMatch/index.tsx @@ -15,10 +15,10 @@ type Props = { export const LiveMatch = ({ profile }: Props) => { const { - lastPlayPosition, matchUrl, onPlayerProgressChange, onPlayingChange, + resume, } = useLiveMatch() return ( @@ -29,7 +29,7 @@ export const LiveMatch = ({ profile }: Props) => { url={matchUrl} onPlayingChange={onPlayingChange} onProgressChange={onPlayerProgressChange} - resumeFrom={lastPlayPosition.second} + resumeFrom={resume} /> diff --git a/src/features/MatchPage/hooks/useLastPlayPosition.tsx b/src/features/MatchPage/hooks/useLastPlayPosition.tsx index ebebf0fa..5e09f32b 100644 --- a/src/features/MatchPage/hooks/useLastPlayPosition.tsx +++ b/src/features/MatchPage/hooks/useLastPlayPosition.tsx @@ -1,11 +1,4 @@ -import { - useEffect, - useState, - useMemo, -} from 'react' -import { useLocation } from 'react-router' - -import isBoolean from 'lodash/isBoolean' +import { useEffect, useState } from 'react' import type { LastPlayPosition } from 'requests' import { getMatchLastWatchSeconds } from 'requests' @@ -16,24 +9,12 @@ import { useRequest, } from 'hooks' -export const RESUME_KEY = 'resume' - -const readResumeParam = (search: string) => { - const params = new URLSearchParams(search) - const rawValue = params.get(RESUME_KEY) - if (!rawValue) return false - - const value = JSON.parse(rawValue) - return isBoolean(value) && Boolean(value) -} - const initialPosition = { half: 0, second: 0, } export const useLastPlayPosition = () => { - const { search } = useLocation() const { sportType } = useSportNameParam() const matchId = usePageId() const [ @@ -45,16 +26,11 @@ export const useLastPlayPosition = () => { request: requestLastPlayPosition, } = useRequest(getMatchLastWatchSeconds) - const resume = useMemo(() => readResumeParam(search), [search]) - useEffect(() => { - if (resume) { - requestLastPlayPosition(sportType, matchId).then(setPosition) - } + requestLastPlayPosition(sportType, matchId).then(setPosition) }, [ sportType, matchId, - resume, requestLastPlayPosition, ]) diff --git a/src/features/MatchPage/hooks/useUrlParam.tsx b/src/features/MatchPage/hooks/useUrlParam.tsx new file mode 100644 index 00000000..158b1fba --- /dev/null +++ b/src/features/MatchPage/hooks/useUrlParam.tsx @@ -0,0 +1,23 @@ +import { useMemo } from 'react' +import { useLocation } from 'react-router' + +import isNumber from 'lodash/isNumber' + +export const RESUME_KEY = 'resume' + +const readResumeParam = (search: string) => { + const params = new URLSearchParams(search) + const rawValue = params.get(RESUME_KEY) + if (!rawValue) return undefined + + const value = JSON.parse(rawValue) + return isNumber(value) ? value : 0 +} + +export const useUrlParam = () => { + const { search } = useLocation() + + const resume = useMemo(() => readResumeParam(search), [search]) + + return resume +} diff --git a/src/features/MatchPopup/components/LiveMatchPlaylist/index.tsx b/src/features/MatchPopup/components/LiveMatchPlaylist/index.tsx index 2d7b3c23..ad2b1d6e 100644 --- a/src/features/MatchPopup/components/LiveMatchPlaylist/index.tsx +++ b/src/features/MatchPopup/components/LiveMatchPlaylist/index.tsx @@ -47,13 +47,13 @@ export const LiveMatchPlaylist = () => { @@ -61,7 +61,7 @@ export const LiveMatchPlaylist = () => { ? ( diff --git a/src/features/QueryParamsStorage/index.tsx b/src/features/QueryParamsStorage/index.tsx index 285eed52..031f27b7 100644 --- a/src/features/QueryParamsStorage/index.tsx +++ b/src/features/QueryParamsStorage/index.tsx @@ -22,6 +22,11 @@ class QueryParamStorage implements Storage { constructor(historyArg: History) { this.history = historyArg this.urlParams = new URLSearchParams(this.history.location.search) + this.history.listen((location, action) => { + if (action !== 'REPLACE') { + this.urlParams = new URLSearchParams(location.search) + } + }) } get entries() { diff --git a/src/features/StreamPlayer/hooks/index.tsx b/src/features/StreamPlayer/hooks/index.tsx index 138e0eeb..55bb6dfc 100644 --- a/src/features/StreamPlayer/hooks/index.tsx +++ b/src/features/StreamPlayer/hooks/index.tsx @@ -26,7 +26,7 @@ const initialState = { export type Props = { onPlayingChange: (playing: boolean) => void, onProgressChange: (seconds: number) => void, - resumeFrom: number, + resumeFrom?: number, url: string, } @@ -36,7 +36,7 @@ export const useVideoPlayer = ({ resumeFrom, url, }: Props) => { - const { hls, videoRef } = useHlsPlayer(url) + const { hls, videoRef } = useHlsPlayer(url, resumeFrom) const [{ duration, loadedProgress, @@ -46,8 +46,8 @@ export const useVideoPlayer = ({ seek, }, setPlayerState] = useObjectState({ ...initialState, - playedProgress: toMilliSeconds(resumeFrom), - seek: resumeFrom, + playedProgress: toMilliSeconds(resumeFrom || 0), + seek: resumeFrom || 0, }) const startPlaying = useMemo(() => once(() => { diff --git a/src/features/StreamPlayer/hooks/useHlsPlayer.tsx b/src/features/StreamPlayer/hooks/useHlsPlayer.tsx index d962023a..53304bf0 100644 --- a/src/features/StreamPlayer/hooks/useHlsPlayer.tsx +++ b/src/features/StreamPlayer/hooks/useHlsPlayer.tsx @@ -5,10 +5,18 @@ import { } from 'react' import Hls from 'hls.js' +import isNumber from 'lodash/isNumber' + import { streamConfig } from '../config' -export const useHlsPlayer = (src: string) => { - const hls = useMemo(() => new Hls(streamConfig), []) +export const useHlsPlayer = (src: string, resumeFrom?: number) => { + const hls = useMemo(() => { + const newStreamConfig = { ...streamConfig } + if (isNumber(resumeFrom)) { + newStreamConfig.startPosition = resumeFrom + } + return new Hls(newStreamConfig) + }, [resumeFrom]) const videoRef = useRef(null) useEffect(() => {