diff --git a/src/features/MatchPage/components/FinishedMatch/hooks/index.tsx b/src/features/MatchPage/components/FinishedMatch/hooks/index.tsx
index 41992140..bbc65f83 100644
--- a/src/features/MatchPage/components/FinishedMatch/hooks/index.tsx
+++ b/src/features/MatchPage/components/FinishedMatch/hooks/index.tsx
@@ -38,7 +38,7 @@ export const useFinishedMatch = ({ profile }: Props) => {
} = useToggle()
const { episodes } = useEpisodes()
- const { events } = useEvents()
+ const { events, fetchMatchEvents } = useEvents()
const { logPlaylistChange, onPlayingChange } = usePlayerLogger()
@@ -54,6 +54,7 @@ export const useFinishedMatch = ({ profile }: Props) => {
}
setMatch(match)
fetchMatchPlaylists(match)
+ fetchMatchEvents()
}
}, [
matchId,
@@ -61,6 +62,7 @@ export const useFinishedMatch = ({ profile }: Props) => {
setMatch,
sportType,
fetchMatchPlaylists,
+ fetchMatchEvents,
])
const setEpisodesSettings = (newSettings: Settings) => {
diff --git a/src/features/MatchPage/components/FinishedMatch/hooks/useEvents.tsx b/src/features/MatchPage/components/FinishedMatch/hooks/useEvents.tsx
index e1eb74f9..14f7095c 100644
--- a/src/features/MatchPage/components/FinishedMatch/hooks/useEvents.tsx
+++ b/src/features/MatchPage/components/FinishedMatch/hooks/useEvents.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useState } from 'react'
import type { Events } from 'requests'
import { getMatchEvents } from 'requests'
@@ -12,7 +12,7 @@ export const useEvents = () => {
const { fetchLexics } = useEventsLexics()
const { profileId: matchId, sportType } = usePageParams()
- useEffect(() => {
+ const fetchMatchEvents = useCallback(() => {
getMatchEvents({
matchId,
sportType,
@@ -24,5 +24,5 @@ export const useEvents = () => {
sportType,
])
- return { events }
+ return { events, fetchMatchEvents }
}
diff --git a/src/features/MatchPage/components/FinishedMatch/index.tsx b/src/features/MatchPage/components/FinishedMatch/index.tsx
index 1fd98b91..b0d2e5a1 100644
--- a/src/features/MatchPage/components/FinishedMatch/index.tsx
+++ b/src/features/MatchPage/components/FinishedMatch/index.tsx
@@ -50,15 +50,13 @@ export const FinishedMatch = (props: Props) => {
)}
- {playlists && (
-
- )}
+
)
}
diff --git a/src/features/MatchPage/components/LiveMatch/hooks/index.tsx b/src/features/MatchPage/components/LiveMatch/hooks/index.tsx
index 73ed9062..31621421 100644
--- a/src/features/MatchPage/components/LiveMatch/hooks/index.tsx
+++ b/src/features/MatchPage/components/LiveMatch/hooks/index.tsx
@@ -1,21 +1,65 @@
-import {
- useSportNameParam,
- usePageId,
-} from 'hooks'
+import { useCallback, useEffect } from 'react'
import { API_ROOT } from 'config'
+import type { MatchInfo } from 'requests/getMatchInfo'
+
+import { usePageParams } from 'hooks/usePageParams'
+import { useInterval } from 'hooks/useInterval'
+
import { usePlayerProgressReporter } from 'features/MatchPage/hooks/usePlayerProgressReporter'
import { useLastPlayPosition } from 'features/MatchPage/hooks/useLastPlayPosition'
import { useUrlParam } from 'features/MatchPage/hooks/useUrlParam'
+import { MATCH_UPDATE_INTERVAL } from 'features/MatchPage/config'
+import { useMatchPopupStore } from 'features/MatchPopup'
+
+import { useEvents } from '../../FinishedMatch/hooks/useEvents'
+
+export const useLiveMatch = (profile: MatchInfo) => {
+ const {
+ fetchMatchPlaylists,
+ handlePlaylistClick,
+ matchPlaylists,
+ selectedPlaylist,
+ } = useMatchPopupStore()
-export const useLiveMatch = () => {
- const { sportType } = useSportNameParam()
- const matchId = usePageId()
+ const { events, fetchMatchEvents } = useEvents()
+
+ const { profileId: matchId, sportType } = usePageParams()
const resume = useUrlParam()
+ const fetchMatchData = useCallback(() => {
+ if (profile) {
+ const match = {
+ ...profile,
+ id: matchId,
+ sportType,
+ team1: profile.team1,
+ team2: profile.team2,
+ }
+ fetchMatchPlaylists(match)
+ fetchMatchEvents()
+ }
+ }, [
+ matchId,
+ profile,
+ sportType,
+ fetchMatchPlaylists,
+ fetchMatchEvents,
+ ])
+
+ useEffect(fetchMatchData, [fetchMatchData])
+ useInterval({
+ callback: fetchMatchData,
+ intervalDuration: MATCH_UPDATE_INTERVAL,
+ })
+
return {
+ events,
+ matchPlaylists,
+ onPlaylistSelect: handlePlaylistClick,
resume,
+ selectedPlaylist,
streamUrl: `${API_ROOT}/video/stream/${sportType}/${matchId}.m3u8`,
...usePlayerProgressReporter(),
...useLastPlayPosition(),
diff --git a/src/features/MatchPage/components/LiveMatch/index.tsx b/src/features/MatchPage/components/LiveMatch/index.tsx
index 129acbb8..704132d6 100644
--- a/src/features/MatchPage/components/LiveMatch/index.tsx
+++ b/src/features/MatchPage/components/LiveMatch/index.tsx
@@ -1,18 +1,28 @@
import { Fragment } from 'react'
+import type { MatchInfo } from 'requests/getMatchInfo'
+
import { StreamPlayer } from 'features/StreamPlayer'
+import { MatchSidePlaylists } from 'features/MatchSidePlaylists'
import { useLiveMatch } from './hooks'
-import { LiveMatchSidePlaylists } from '../LiveMatchSidePlaylists'
import { Container } from '../../styled'
-export const LiveMatch = () => {
+type Props = {
+ profile: MatchInfo,
+}
+
+export const LiveMatch = ({ profile }: Props) => {
const {
+ events,
+ matchPlaylists,
onPlayerProgressChange,
onPlayingChange,
+ onPlaylistSelect,
resume,
+ selectedPlaylist,
streamUrl,
- } = useLiveMatch()
+ } = useLiveMatch(profile)
return (
@@ -24,7 +34,14 @@ export const LiveMatch = () => {
resumeFrom={resume}
/>
-
+
+
)
}
diff --git a/src/features/MatchPage/config.tsx b/src/features/MatchPage/config.tsx
new file mode 100644
index 00000000..b4d7b6d5
--- /dev/null
+++ b/src/features/MatchPage/config.tsx
@@ -0,0 +1 @@
+export const MATCH_UPDATE_INTERVAL = 20000
diff --git a/src/features/MatchPage/hooks/useMatchProfile.tsx b/src/features/MatchPage/hooks/useMatchProfile.tsx
index 8ca10dc2..e94abd55 100644
--- a/src/features/MatchPage/hooks/useMatchProfile.tsx
+++ b/src/features/MatchPage/hooks/useMatchProfile.tsx
@@ -13,7 +13,7 @@ import {
usePageId,
} from 'hooks'
-const INTERVAL_20_SEC = 20000
+import { MATCH_UPDATE_INTERVAL } from '../config'
export const useMatchProfile = () => {
const [matchProfile, setMatchProfile] = useState(null)
@@ -27,7 +27,7 @@ export const useMatchProfile = () => {
const { start, stop } = useInterval({
callback: fetchMatchProfile,
- intervalDuration: INTERVAL_20_SEC,
+ intervalDuration: MATCH_UPDATE_INTERVAL,
startImmediate: false,
})
diff --git a/src/features/MatchPage/index.tsx b/src/features/MatchPage/index.tsx
index 467ed033..9af0d25c 100644
--- a/src/features/MatchPage/index.tsx
+++ b/src/features/MatchPage/index.tsx
@@ -27,7 +27,7 @@ const MatchPage = () => {
- {playFromOTT && }
+ {playFromOTT && }
{playFromScout && }
diff --git a/src/features/MatchPopup/store/hooks/index.tsx b/src/features/MatchPopup/store/hooks/index.tsx
index d802b8ba..38f8072d 100644
--- a/src/features/MatchPopup/store/hooks/index.tsx
+++ b/src/features/MatchPopup/store/hooks/index.tsx
@@ -21,10 +21,12 @@ import { PlayerPlaylistFormats } from '../../types'
import { usePlayerClickHandler } from './usePlayerClickHandler'
import { usePlaylistLexics } from './usePlaylistLexics'
+const initialPlaylists = buildPlaylists(null)
+
export const useMatchPopup = () => {
const [match, setMatch] = useState(null)
- const [matchPlaylists, setMatchPlaylists] = useState(null)
+ const [matchPlaylists, setMatchPlaylists] = useState(initialPlaylists)
const {
close: closePopup,
isOpen,
diff --git a/src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx b/src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx
index dd218304..d05ac36e 100644
--- a/src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx
+++ b/src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx
@@ -54,7 +54,7 @@ export const PlayersPlaylists = ({
const { sportType } = usePageParams()
const [selectedTeam, setSelectedTeam] = useState(Teams.TEAM1)
- if (!selectedMathPlaylist || !profile) return null
+ if (!profile) return null
return (
diff --git a/src/features/StreamPlayer/config.tsx b/src/features/StreamPlayer/config.tsx
index f2699604..ec64dce8 100644
--- a/src/features/StreamPlayer/config.tsx
+++ b/src/features/StreamPlayer/config.tsx
@@ -2,8 +2,7 @@ import Hls from 'hls.js'
export const streamConfig: Partial = {
liveSyncDuration: 10,
- maxBufferLength: 10,
- maxBufferSize: 0,
+ maxBufferLength: 15,
xhrSetup: (xhr) => {
// eslint-disable-next-line no-param-reassign
xhr.withCredentials = true