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