Ott 1637 live match playlists block (#508)

* fix(1637): increased hls player buffer

* fix(1637): added events and playlists

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) => {

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

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

@@ -50,15 +50,13 @@ export const FinishedMatch = (props: Props) => {
         )}
       </Container>
 
-      {playlists && (
-        <MatchSidePlaylists
-          events={events}
-          playlists={playlists}
-          selectedPlaylist={selectedPlaylist}
-          onSelect={onPlaylistSelect}
-          profile={profile}
-        />
-      )}
+      <MatchSidePlaylists
+        events={events}
+        playlists={playlists}
+        selectedPlaylist={selectedPlaylist}
+        onSelect={onPlaylistSelect}
+        profile={profile}
+      />
     </Fragment>
   )
 }

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

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 (
     <Fragment>
@@ -24,7 +34,14 @@ export const LiveMatch = () => {
           resumeFrom={resume}
         />
       </Container>
-      <LiveMatchSidePlaylists />
+
+      <MatchSidePlaylists
+        events={events}
+        playlists={matchPlaylists}
+        selectedPlaylist={selectedPlaylist}
+        onSelect={onPlaylistSelect}
+        profile={profile}
+      />
     </Fragment>
   )
 }

src/features/MatchPage/config.tsx

@@ -0,0 +1 @@
+export const MATCH_UPDATE_INTERVAL = 20000

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<MatchInfo>(null)
@@ -27,7 +27,7 @@ export const useMatchProfile = () => {
 
   const { start, stop } = useInterval({
     callback: fetchMatchProfile,
-    intervalDuration: INTERVAL_20_SEC,
+    intervalDuration: MATCH_UPDATE_INTERVAL,
     startImmediate: false,
   })
 

src/features/MatchPage/index.tsx

@@ -27,7 +27,7 @@ const MatchPage = () => {
       <Main>
         <UserFavorites />
         <Wrapper>
-          {playFromOTT && <LiveMatch />}
+          {playFromOTT && <LiveMatch profile={profile} />}
           {playFromScout && <FinishedMatch profile={profile} />}
         </Wrapper>
       </Main>

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<MatchData>(null)
 
-  const [matchPlaylists, setMatchPlaylists] = useState<Playlists | null>(null)
+  const [matchPlaylists, setMatchPlaylists] = useState<Playlists>(initialPlaylists)
   const {
     close: closePopup,
     isOpen,

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 (
     <Wrapper>

src/features/StreamPlayer/config.tsx

@@ -2,8 +2,7 @@ import Hls from 'hls.js'
 
 export const streamConfig: Partial<Hls.Config> = {
   liveSyncDuration: 10,
-  maxBufferLength: 10,
-  maxBufferSize: 0,
+  maxBufferLength: 15,
   xhrSetup: (xhr) => {
     // eslint-disable-next-line no-param-reassign
     xhr.withCredentials = true