feat(#2638): add scroll to live match and change cardfrontside in tab video

src/features/MatchCard/CardFrontside/index.tsx

@@ -94,8 +94,9 @@ export const CardFrontside = ({
     <CardWrapperOuter
       onClick={onClick}
       onKeyPress={onKeyPress}
+      isMatchPage={isMatchPage}
     >
-      <CardWrapper>
+      <CardWrapper isMatchPage={isMatchPage}>
         <HoverFrame />
         <PreviewWrapper>
           {previewImage && (
@@ -107,7 +108,7 @@ export const CardFrontside = ({
           {access === MatchAccess.NoCountryAccess
             ? <NoAccessMessage />
             : (
-              <TeamLogos>
+              <TeamLogos isMatchPage={isMatchPage}>
                 <TeamLogo
                   id={team1.id}
                   nameAsTitle
@@ -137,8 +138,8 @@ export const CardFrontside = ({
             )}
           </MatchTimeInfo>
         </PreviewWrapper>
-        <Info>
-          <Teams>
+        <Info isMatchPage={isMatchPage}>
+          <Teams isMatchPage={isMatchPage}>
             <Team>
               <NameSignWrapper>
                 <TeamName nameObj={team1} />
@@ -154,11 +155,13 @@ export const CardFrontside = ({
               {showScore && <Score>{team2.score}</Score>}
             </Team>
           </Teams>
-          <TournamentSubtitle
-            sportType={sportType}
-            countryId={countryId}
-            tournament={tournament}
-          />
+          {!isMatchPage && (
+            <TournamentSubtitle
+              sportType={sportType}
+              countryId={countryId}
+              tournament={tournament}
+            />
+          )}
         </Info>
       </CardWrapper>
     </CardWrapperOuter>

src/features/MatchCard/styled.tsx

@@ -6,11 +6,16 @@ import { isMobileDevice } from 'config/userAgent'
 import { Name } from 'features/Name'
 import { ProfileLogo } from 'features/ProfileLogo'
 
+type CardProps = {
+  isMatchPage?: boolean,
+}
+
 export const CardWrapperOuter = styled.li.attrs({
   tabIndex: 0,
-})`
-  padding-top: 100%;
+})<CardProps>`
+  padding-top: ${({ isMatchPage }) => (isMatchPage ? 0 : '100%')};
   position: relative;
+
   ${isMobileDevice
     ? css`
       width: 100%;
@@ -28,13 +33,13 @@ export const CardWrapperOuter = styled.li.attrs({
     : ''};
 `
 
-export const CardWrapper = styled.div`
-  position: absolute;
+export const CardWrapper = styled.div<CardProps>`
+  position: ${({ isMatchPage }) => (isMatchPage ? 'relative' : 'absolute')};
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
-  padding-bottom: 0.75rem;
+  padding-bottom: ${({ isMatchPage }) => (isMatchPage ? '0' : '0.75rem')};
   border-radius: 2px;
   background-color: #3F3F3F;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
@@ -133,10 +138,10 @@ export const Time = styled.span`
   margin: 0 0.2rem;
 `
 
-export const Info = styled.div`
+export const Info = styled.div<CardProps>`
   display: flex;
   flex-direction: column;
-  padding: 0.85rem 0.472rem 0 0.519rem;
+  padding: ${({ isMatchPage }) => (isMatchPage ? '1.2rem 0.472rem 1.2rem 0.519rem' : '0.85rem 0.472rem 0 0.519rem')};
   color: #fff;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -178,8 +183,8 @@ const nameStyles = css`
   overflow: hidden;
 `
 
-export const Teams = styled.div`
-  margin-bottom: 0.567rem;
+export const Teams = styled.div<CardProps>`
+  margin-bottom: ${({ isMatchPage }) => (isMatchPage ? '0' : '0.567rem')};
   ${isMobileDevice
     ? css`
       margin-bottom: 15px;
@@ -215,11 +220,11 @@ export const TeamName = styled(Name)`
 
 export const Score = styled.div``
 
-export const TeamLogos = styled.div`
+export const TeamLogos = styled.div<CardProps>`
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 0.71rem auto 0 auto;
+  margin: ${({ isMatchPage }) => (isMatchPage ? '1.5rem auto 1rem auto' : '0.71rem auto 0 auto')};
   z-index: 1;
 `
 

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

@@ -13,6 +13,7 @@ import { Container } from '../../styled'
 
 import { useLiveMatch } from './hooks'
 import { TournamentData } from '../../types'
+import { MatchDescription } from '../MatchDescription'
 import { MatchProfileCardMobile } from '../MatchProfileCardMobile'
 
 type Props = {
@@ -67,7 +68,9 @@ export const LiveMatch = ({
             />
           )
         )}
-        {isMobileDevice ? <MatchProfileCardMobile profile={profile} /> : null}
+        {isMobileDevice
+          ? <MatchProfileCardMobile profile={profile} /> : (
+            <MatchDescription profile={profile} />)}
       </Container>
 
       <MatchSidePlaylists

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

@@ -6,7 +6,6 @@ import type { MatchInfo } from 'requests/getMatchInfo'
 
 import { Name } from 'features/Name'
 import { SportIcon } from 'components/SportIcon/SportIcon'
-import { T9n } from 'features/T9n'
 import { useAuthStore } from 'features/AuthStore'
 import { useMatchSwitchesStore } from 'features/MatchSwitches'
 
@@ -21,7 +20,6 @@ import {
   Description,
   DescriptionInnerBlock,
   MatchDate,
-  StyledDash,
   StyledLink,
   Score,
   Title,
@@ -46,17 +44,15 @@ export const MatchDescription = ({
   const {
     country_id,
     date,
-    live,
     team1,
     team2,
     tournament,
   } = profile
 
   const isChangedTimeFormat = includes(['US', 'CA'], user?.profile.country_code)
-  const localDate = format(parseDate(date),
-    live ? 'HH:mm' : 'MMMM d, y')
+  const localDate = format(parseDate(date), 'MMMM d, y')
   const changedTimeFormat = format(parseDate(date),
-    isChangedTimeFormat ? 'hh:mm aaa' : 'HH:mm')
+    isChangedTimeFormat ? 'h:mm aaa' : 'HH:mm')
 
   return (
     <Description>
@@ -69,9 +65,13 @@ export const MatchDescription = ({
           >
             <Name nameObj={team1} />
           </StyledLink>
-          {!isScoreHidden && <Score>{team1.score}</Score>}
-          <StyledDash isScoreHidden={isScoreHidden}>-</StyledDash>
-          {!isScoreHidden && <Score>{team2.score}</Score>}
+          <Score>
+            {
+              isScoreHidden || !team1.score || !team2.score
+                ? '-'
+                : `${team1.score} - ${team2.score}`
+            }
+          </Score>
           <StyledLink
             id={team2.id}
             profileType={ProfileTypes.TEAMS}
@@ -79,7 +79,6 @@ export const MatchDescription = ({
           >
             <Name nameObj={team2} />
           </StyledLink>
-          {live ? '\u00a0|\u00a0LIVE STREAM' : ''}
         </Title>
         <Tournament>
           <SportIcon sport={sportType} />
@@ -96,11 +95,7 @@ export const MatchDescription = ({
         </Tournament>
       </DescriptionInnerBlock>
       <Views>
-        {
-          live
-            ? <T9n t='started_streaming_at' />
-            : <Time>{changedTimeFormat}</Time>
-        }
+        <Time>{changedTimeFormat}</Time>
         <MatchDate>{localDate}</MatchDate>
       </Views>
     </Description>

src/features/MatchPage/components/MatchDescription/styled.tsx

@@ -35,11 +35,6 @@ export const StyledLink = styled(ProfileLink)`
   }
 `
 
-export const StyledDash = styled.span<{isScoreHidden?: boolean}>`
-  color: #fff;
-  margin: ${({ isScoreHidden }) => (isScoreHidden ? '0 10px' : '0')};
-`
-
 export const Title = styled.div`
   display: flex;
   flex-direction: row;
@@ -56,11 +51,6 @@ export const Title = styled.div`
     opacity: 0.7;
     pointer-events: none;
   }
-
-  &:hover > ${StyledDash}:not(:hover){
-    opacity: 0.7;
-    pointer-events: none;
-  }
 `
 
 export const Tournament = styled.span`

src/features/StreamPlayer/hooks/index.tsx

@@ -368,6 +368,15 @@ export const useVideoPlayer = ({
     }
   }, [setPlayerState])
 
+  useEffect(() => {
+    if (ready && videoRef) {
+      videoRef.current?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      })
+    }
+  }, [ready, videoRef])
+
   return {
     activeChapterIndex,
     allPlayedProgress: playedProgress + getActiveChapter().startMs,