fix(ott-2790): added live button on full game

src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx

@@ -42,9 +42,13 @@ export const MatchPlaylists = ({
   playlists,
   selectedMathPlaylist,
 }: Props) => {
+  // console.log('🚀 ~ file: index.tsx ~ line 45 ~ live', live)
+  // console.log('🚀 ~ file: index.tsx ~ line 45 ~ playlists', playlists)
   const filteredPlayListByDuration = useMemo(() => (
-    filter(playlists, (playlist) => !!playlist.duration)
-  ), [playlists])
+    filter(playlists, (playlist) => (live
+      ? !!playlist.duration || (playlist.id === 'full_game')
+      : !!playlist.duration))
+  ), [playlists, live])
 
   return (
     <List>
@@ -54,6 +58,7 @@ export const MatchPlaylists = ({
             <PlayButton
               duration={playlist.duration}
               active={isEqual(playlist, selectedMathPlaylist)}
+              live={live}
               disabled={playlist.id !== FULL_GAME_KEY && isEmpty(playlist.episodes)}
               onClick={() => onSelect?.(playlist)}
             >

src/features/MatchSidePlaylists/components/PlayButton/index.tsx

@@ -5,6 +5,8 @@ import styled from 'styled-components/macro'
 import isUndefined from 'lodash/isUndefined'
 
 import { secondsToHms } from 'helpers'
+import { T9n } from 'features/T9n'
+import { LiveBtn as LiveBtnBase } from 'features/StreamPlayer/styled'
 
 import { Button, Title } from '../../styled'
 
@@ -23,6 +25,10 @@ const Duration = styled(Title)`
   font-weight: normal;
 `
 
+export const LiveBtn = styled(LiveBtnBase)`
+  margin-left: 10px;
+`
+
 export const PlayButton = ({
   active,
   children,
@@ -41,6 +47,14 @@ export const PlayButton = ({
     <Title>
       {children}
     </Title>
-    {!isUndefined(duration) && !live && <Duration>{secondsToHms(duration)}</Duration>}
+    {!isUndefined(duration) && (
+      (live && !duration)
+        ? (
+          <LiveBtn>
+            <T9n t='live' />
+          </LiveBtn>
+        )
+        : <Duration>{secondsToHms(duration)}</Duration>
+    )}
   </Button>
 )