fix(1701): calculate full match duration from boundaries

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)
   }
 

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)
+}

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),

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,

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,

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<number>,
   sportType: SportTypes,
@@ -75,6 +76,7 @@ type Response = {
 }
 
 export const getMatchPlaylists = async ({
+  fullMatchDuration,
   matchId,
   selectedActions,
   sportType,