diff --git a/src/features/MatchPage/components/LiveMatch/hooks/index.tsx b/src/features/MatchPage/components/LiveMatch/hooks/index.tsx index 11cd8287..eeda07dc 100644 --- a/src/features/MatchPage/components/LiveMatch/hooks/index.tsx +++ b/src/features/MatchPage/components/LiveMatch/hooks/index.tsx @@ -46,7 +46,7 @@ export const useLiveMatch = () => { } = usePlayerProgressReporter() const onDurationChange = (duration: number) => { - if (profile?.live) return + if (profile?.live || profile?.video_bounds) return setFullMatchPlaylistDuration(duration) } diff --git a/src/features/MatchPage/helpers/fullMatchDuration.tsx b/src/features/MatchPage/helpers/fullMatchDuration.tsx new file mode 100644 index 00000000..f31b20b2 --- /dev/null +++ b/src/features/MatchPage/helpers/fullMatchDuration.tsx @@ -0,0 +1,11 @@ +import find from 'lodash/find' + +import type { MatchInfo } from 'requests/getMatchInfo' + +import { FULL_MATCH_BOUNDARY } from 'features/MatchPage/components/LiveMatch/helpers' + +export const calculateDuration = (profile: MatchInfo) => { + const bound = find(profile?.video_bounds, { h: FULL_MATCH_BOUNDARY }) + if (!bound) return 0 + return Number(bound.e) - Number(bound.s) +} diff --git a/src/features/MatchPage/store/hooks/index.tsx b/src/features/MatchPage/store/hooks/index.tsx index 20ab2710..b0eefa19 100644 --- a/src/features/MatchPage/store/hooks/index.tsx +++ b/src/features/MatchPage/store/hooks/index.tsx @@ -58,7 +58,7 @@ export const useMatchPage = () => { matchPlaylists, selectedPlaylist, setFullMatchPlaylistDuration, - } = useMatchData(matchProfile?.live) + } = useMatchData(matchProfile) const profile = useMemo( () => addScoresFromPlaylists(matchProfile, matchPlaylists), diff --git a/src/features/MatchPage/store/hooks/useMatchData.tsx b/src/features/MatchPage/store/hooks/useMatchData.tsx index 016f24e7..4696407a 100644 --- a/src/features/MatchPage/store/hooks/useMatchData.tsx +++ b/src/features/MatchPage/store/hooks/useMatchData.tsx @@ -2,16 +2,19 @@ import { useEffect, useMemo } from 'react' import debounce from 'lodash/debounce' +import { MatchInfo } from 'requests/getMatchInfo' + import { usePageParams } from 'hooks/usePageParams' import { useInterval } from 'hooks/useInterval' +import { calculateDuration } from '../../helpers/fullMatchDuration' import { useMatchPlaylists } from './useMatchPlaylists' import { useEvents } from './useEvents' const MATCH_DATA_POLL_INTERVAL = 60000 const MATCH_PLAYLISTS_DELAY = 5000 -export const useMatchData = (live: boolean = false) => { +export const useMatchData = (profile: MatchInfo) => { const { profileId: matchId, sportType } = usePageParams() const { fetchMatchPlaylists, @@ -27,13 +30,19 @@ export const useMatchData = (live: boolean = false) => { [fetchMatchPlaylists], ) + const fullMatchDuration = useMemo(() => calculateDuration(profile), [profile]) + useEffect(() => { + if (!profile) return fetchMatchPlaylists({ + fullMatchDuration, id: matchId, sportType, }) fetchMatchEvents() }, [ + profile, + fullMatchDuration, matchId, sportType, fetchMatchPlaylists, @@ -42,6 +51,7 @@ export const useMatchData = (live: boolean = false) => { const intervalCallback = () => { fetchPlaylistsDebounced({ + fullMatchDuration, id: matchId, sportType, }) @@ -55,12 +65,12 @@ export const useMatchData = (live: boolean = false) => { }) useEffect(() => { - if (live) { + if (profile?.live) { start() } else { stop() } - }, [live, start, stop]) + }, [profile?.live, start, stop]) return { events, diff --git a/src/features/MatchPage/store/hooks/useMatchPlaylists.tsx b/src/features/MatchPage/store/hooks/useMatchPlaylists.tsx index a8773b69..5667b8e2 100644 --- a/src/features/MatchPage/store/hooks/useMatchPlaylists.tsx +++ b/src/features/MatchPage/store/hooks/useMatchPlaylists.tsx @@ -16,6 +16,7 @@ import { usePlaylistLexics } from './usePlaylistLexics' import { useSelectedPlaylist } from './useSelectedPlaylist' type ArgsFetchMatchPlaylists = { + fullMatchDuration: number, id: number, sportType: SportTypes, } @@ -43,10 +44,12 @@ export const useMatchPlaylists = () => { }, [setSelectedPlaylist]) const fetchMatchPlaylists = useCallback(({ + fullMatchDuration, id, sportType, }: ArgsFetchMatchPlaylists) => { getMatchPlaylists({ + fullMatchDuration, matchId: id, selectedActions: [], sportType, diff --git a/src/requests/getMatchPlaylists.tsx b/src/requests/getMatchPlaylists.tsx index 937d9de3..2221c1c5 100644 --- a/src/requests/getMatchPlaylists.tsx +++ b/src/requests/getMatchPlaylists.tsx @@ -12,6 +12,7 @@ import { getFullMatchDuration } from './getFullMatchDuration' const proc = PROCEDURES.ott_match_popup type Args = { + fullMatchDuration: number, matchId: number, selectedActions: Array, sportType: SportTypes, @@ -75,6 +76,7 @@ type Response = { } export const getMatchPlaylists = async ({ + fullMatchDuration, matchId, selectedActions, sportType,