fix(ott-1804): fixed live button showing on non-live matches (#543)

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

@@ -6,9 +6,10 @@ import type { MatchInfo } from 'requests/getMatchInfo'
 import { StreamPlayer } from 'features/StreamPlayer'
 import { MatchSidePlaylists } from 'features/MatchSidePlaylists'
 
-import { useLiveMatch } from './hooks'
 import { Container } from '../../styled'
 
+import { useLiveMatch } from './hooks'
+
 type Props = {
   events: Events,
   profile: MatchInfo,
@@ -29,19 +30,20 @@ export const LiveMatch = ({ events, profile }: Props) => {
     <Fragment>
       <Container>
         <StreamPlayer
-          url={streamUrl}
           onPlayingChange={onPlayingChange}
           onProgressChange={onPlayerProgressChange}
+          profile={profile}
           resumeFrom={resume}
+          url={streamUrl}
         />
       </Container>
 
       <MatchSidePlaylists
         events={events}
-        playlists={matchPlaylists}
-        selectedPlaylist={selectedPlaylist}
         onSelect={onPlaylistSelect}
+        playlists={matchPlaylists}
         profile={profile}
+        selectedPlaylist={selectedPlaylist}
       />
     </Fragment>
   )

src/features/Matches/helpers/getMatchClickAction/__tests__/index.tsx

@@ -20,6 +20,7 @@ it('equals to no country access type', () => {
     access: false,
     sub: false,
   })
+
   expect(getMatchAccess(match)).toBe(MatchAccess.CanBuyMatch)
 })
 
@@ -30,6 +31,7 @@ it('equals to  redirect type', () => {
     has_video: true,
     sub: true,
   })
+
   expect(getMatchAccess(match)).toBe(MatchAccess.RedirectToProfile)
 })
 
@@ -38,6 +40,7 @@ it('equals to  can buy type', () => {
     access: true,
     sub: false,
   })
+
   expect(getMatchAccess(match)).toBe(MatchAccess.CanBuyMatch)
 })
 
@@ -47,6 +50,7 @@ it('equals to view match popup type', () => {
     live: true,
     sub: true,
   })
+
   expect(getMatchAccess(match)).toBe(MatchAccess.ViewMatchPopup)
 
   match = createMatch({
@@ -56,7 +60,8 @@ it('equals to view match popup type', () => {
     live: false,
     sub: true,
   })
-  expect(getMatchAccess(match)).toBe(MatchAccess.ViewMatchPopup)
+
+  expect(getMatchAccess(match)).toBe(MatchAccess.RedirectToProfile)
 
   match = createMatch({
     access: true,
@@ -66,5 +71,6 @@ it('equals to view match popup type', () => {
     storage: true,
     sub: true,
   })
-  expect(getMatchAccess(match)).toBe(MatchAccess.ViewMatchPopup)
+
+  expect(getMatchAccess(match)).toBe(MatchAccess.RedirectToProfile)
 })

src/features/StreamPlayer/hooks/index.tsx

@@ -3,14 +3,16 @@ import { useCallback, useMemo } from 'react'
 
 import once from 'lodash/once'
 
+import { useVolume } from 'features/VideoPlayer/hooks/useVolume'
+import { REWIND_SECONDS } from 'features/MultiSourcePlayer/config'
+
 import { useObjectState } from 'hooks'
 
-import { useVolume } from 'features/VideoPlayer/hooks/useVolume'
+import type { MatchInfo } from 'requests/getMatchInfo'
 
-import { REWIND_SECONDS } from 'features/MultiSourcePlayer/config'
 import { useHlsPlayer } from './useHlsPlayer'
-import { useVideoQuality } from './useVideoQuality'
 import { useFullscreen } from './useFullscreen'
+import { useVideoQuality } from './useVideoQuality'
 import { useControlsVisibility } from './useControlsVisibility'
 
 const toMilliSeconds = (seconds: number) => seconds * 1000
@@ -27,6 +29,7 @@ const initialState = {
 export type Props = {
   onPlayingChange: (playing: boolean) => void,
   onProgressChange: (seconds: number) => void,
+  profile: MatchInfo,
   resumeFrom?: number,
   url: string,
 }
@@ -38,6 +41,7 @@ export const useVideoPlayer = ({
   url,
 }: Props) => {
   const { hls, videoRef } = useHlsPlayer(url, resumeFrom)
+
   const [{
     duration,
     loadedProgress,

src/features/StreamPlayer/index.tsx

@@ -1,14 +1,13 @@
-import { secondsToHms } from 'helpers'
-
+import { T9n } from 'features/T9n'
 import { Loader } from 'features/Loader'
-import { Settings } from 'features/MultiSourcePlayer/components/Settings'
 import { REWIND_SECONDS } from 'features/MultiSourcePlayer/config'
-import { T9n } from 'features/T9n'
+import { Settings } from 'features/MultiSourcePlayer/components/Settings'
+
+import { secondsToHms } from 'helpers'
 
-import type { Props } from './hooks'
-import { useVideoPlayer } from './hooks'
-import { ProgressBar } from './components/ProgressBar'
 import { VolumeBar } from './components/VolumeBar'
+import { ProgressBar } from './components/ProgressBar'
+
 import {
   PlayerWrapper,
   VideoPlayer,
@@ -25,9 +24,12 @@ import {
   ControlsGradient,
   LiveBtn,
 } from './styled'
+import type { Props } from './hooks'
+import { useVideoPlayer } from './hooks'
 
 export const StreamPlayer = (props: Props) => {
-  const { url } = props
+  const { profile, url } = props
+
   const {
     backToLive,
     controlsVisible,
@@ -102,18 +104,26 @@ export const StreamPlayer = (props: Props) => {
         onError={onError}
         crossOrigin='use-credentials'
       />
-      {ready && (
-        <CenterControls playing={playing}>
-          <Backward size='lg' onClick={rewindBackward}>{REWIND_SECONDS}</Backward>
-          <PlayStop
-            size='lg'
-            marginRight={0}
-            playing={playing}
-            onClick={togglePlaying}
-          />
-          <Forward size='lg' onClick={rewindForward}>{REWIND_SECONDS}</Forward>
-        </CenterControls>
-      )}
+
+      {
+        ready && (
+          <CenterControls playing={playing}>
+            <Backward size='lg' onClick={rewindBackward}>
+              {REWIND_SECONDS}
+            </Backward>
+            <PlayStop
+              size='lg'
+              marginRight={0}
+              playing={playing}
+              onClick={togglePlaying}
+            />
+            <Forward size='lg' onClick={rewindForward}>
+              {REWIND_SECONDS}
+            </Forward>
+          </CenterControls>
+        )
+      }
+
       <Controls visible={controlsVisible}>
         <ControlsRow>
           <ProgressBar
@@ -139,9 +149,14 @@ export const StreamPlayer = (props: Props) => {
             <Forward onClick={rewindForward}>{REWIND_SECONDS}</Forward>
           </ControlsGroup>
           <ControlsGroup>
-            <LiveBtn onClick={backToLive}>
-              <T9n t='live' />
-            </LiveBtn>
+            {
+              profile?.live && (
+                <LiveBtn onClick={backToLive}>
+                  <T9n t='live' />
+                </LiveBtn>
+              )
+            }
+
             <Fullscreen
               onClick={onFullscreenClick}
               isFullscreen={isFullscreen}