diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx
index 302e01e9..87ffa181 100644
--- a/src/features/MatchCard/CardFrontside/index.tsx
+++ b/src/features/MatchCard/CardFrontside/index.tsx
@@ -94,8 +94,9 @@ export const CardFrontside = ({
-
+
{previewImage && (
@@ -107,7 +108,7 @@ export const CardFrontside = ({
{access === MatchAccess.NoCountryAccess
?
: (
-
+
-
-
+
+
@@ -154,11 +155,13 @@ export const CardFrontside = ({
{showScore && {team2.score}}
-
+ {!isMatchPage && (
+
+ )}
diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx
index 3a00b256..42963a85 100644
--- a/src/features/MatchCard/styled.tsx
+++ b/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%;
+})`
+ 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`
+ 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`
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`
+ 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`
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;
`
diff --git a/src/features/MatchPage/components/LiveMatch/index.tsx b/src/features/MatchPage/components/LiveMatch/index.tsx
index a005f20c..cc65f5ba 100644
--- a/src/features/MatchPage/components/LiveMatch/index.tsx
+++ b/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 ? : null}
+ {isMobileDevice
+ ? : (
+ )}
@@ -69,9 +65,13 @@ export const MatchDescription = ({
>
- {!isScoreHidden && {team1.score}}
- -
- {!isScoreHidden && {team2.score}}
+
+ {
+ isScoreHidden || !team1.score || !team2.score
+ ? '-'
+ : `${team1.score} - ${team2.score}`
+ }
+
- {live ? '\u00a0|\u00a0LIVE STREAM' : ''}
@@ -96,11 +95,7 @@ export const MatchDescription = ({
- {
- live
- ?
- :
- }
+
{localDate}
diff --git a/src/features/MatchPage/components/MatchDescription/styled.tsx b/src/features/MatchPage/components/MatchDescription/styled.tsx
index d29c2153..3045b861 100644
--- a/src/features/MatchPage/components/MatchDescription/styled.tsx
+++ b/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`
diff --git a/src/features/StreamPlayer/hooks/index.tsx b/src/features/StreamPlayer/hooks/index.tsx
index 2b4c0ad5..6eb9f291 100644
--- a/src/features/StreamPlayer/hooks/index.tsx
+++ b/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,