fix(#2684): fix calculate duration for match from scout

src/features/MatchPage/components/FinishedMatch/hooks/index.tsx

@@ -3,6 +3,7 @@ import { useToggle } from 'hooks/useToggle'
 import type { Settings } from 'features/MatchPopup'
 import { useMatchPopupStore } from 'features/MatchPopup'
 
+import { useEffect } from 'react'
 import { usePlayerLogger } from './usePlayerLogger'
 import { useEpisodes } from './useEpisodes'
 import { useChapters } from './useChapters'
@@ -12,6 +13,7 @@ export const useFinishedMatch = () => {
     handlePlaylistClick,
     matchPlaylists,
     selectedPlaylist,
+    setChapters,
     setSettings,
   } = useMatchPopupStore()
   const {
@@ -35,8 +37,14 @@ export const useFinishedMatch = () => {
     }
     handlePlaylistClick(playlist, e)
   }
+  const { chapters } = useChapters({ episodes, selectedPlaylist })
+
+  useEffect(() => {
+    setChapters(chapters)
+  }, [chapters, setChapters])
 
   return {
+    chapters,
     closeSettingsPopup,
     isSettingsPopupOpen,
     onPlayingChange,
@@ -45,9 +53,5 @@ export const useFinishedMatch = () => {
     playlists: matchPlaylists,
     selectedPlaylist,
     setEpisodesSettings,
-    ...useChapters({
-      episodes,
-      selectedPlaylist,
-    }),
   }
 }

src/features/MatchPopup/store/hooks/index.tsx

@@ -15,6 +15,8 @@ import { useToggle } from 'hooks'
 
 import { buildPlaylists } from 'features/MatchPage/helpers/buildPlaylists'
 import { Playlists } from 'features/MatchPage/types'
+import { Chapters } from 'features/MultiSourcePlayer/types'
+import { useDuration } from 'features/MultiSourcePlayer/hooks/useDuration'
 
 import { useSettingsState } from './useSettingsState'
 import { useSportActions } from './useSportActions'
@@ -23,8 +25,6 @@ import type { MatchData } from '../../types'
 import { PlayerPlaylistFormats } from '../../types'
 import { usePlayerClickHandler } from './usePlayerClickHandler'
 import { usePlaylistLexics } from './usePlaylistLexics'
-import { calculateDuration } from '../../../MatchPage/helpers/fullMatchDuration'
-import { useMatchPage } from '../../../MatchPage/store/hooks'
 
 type ArgsFetchMatchPlaylists = {
   id: number,
@@ -37,8 +37,7 @@ const initialPlaylists = buildPlaylists(null)
 export const useMatchPopup = () => {
   const { pathname } = useLocation()
   const [match, setMatch] = useState<MatchData>(null)
-  const { profile } = useMatchPage()
-
+  const [chapters, setChapters] = useState<Chapters>([])
   const [matchPlaylists, setMatchPlaylists] = useState<Playlists>(initialPlaylists)
   const {
     close: closePopup,
@@ -89,14 +88,14 @@ export const useMatchPopup = () => {
   useEffect(() => {
     setMatchPlaylists(initialPlaylists)
   }, [pathname])
-
+  const fullMatchDuration = useDuration(chapters) / 1000
   const fetchMatchPlaylists = useCallback(({
     id,
     sportType,
     withFullMatchDuration = true,
   }: ArgsFetchMatchPlaylists) => {
     getMatchPlaylists({
-      fullMatchDuration: calculateDuration(profile),
+      fullMatchDuration,
       matchId: id,
       selectedActions: [],
       sportType,
@@ -104,8 +103,7 @@ export const useMatchPopup = () => {
     }).then(fetchLexics)
       .then(buildPlaylists)
       .then(setMatchPlaylists)
-  }, [fetchLexics, profile])
-
+  }, [fetchLexics, fullMatchDuration])
   const openMatchPopup = (selectedMatch: MatchData) => {
     if (!selectedMatch) return
     setMatch(selectedMatch)
@@ -115,7 +113,6 @@ export const useMatchPopup = () => {
       sportType: selectedMatch.sportType,
     })
   }
-
   return {
     actions,
     closePopup,
@@ -132,5 +129,6 @@ export const useMatchPopup = () => {
     setSettings,
     settings,
     ...usePlayerClickHandler(),
+    setChapters,
   }
 }

src/features/MultiSourcePlayer/index.tsx

@@ -72,7 +72,6 @@ export const MultiSourcePlayer = (props: Props) => {
     wrapperRef,
   } = useMultiSourcePlayer(props)
   const firstPlayerActive = activePlayer === Players.PLAYER1
-
   return (
     <PlayerWrapper
       ref={wrapperRef}