diff --git a/src/features/MatchCard/CardFinished/index.tsx b/src/features/MatchCard/CardFinished/index.tsx
index 3a0dc32c..d6a4b0fd 100644
--- a/src/features/MatchCard/CardFinished/index.tsx
+++ b/src/features/MatchCard/CardFinished/index.tsx
@@ -1,23 +1,10 @@
import React from 'react'
import type { Match } from 'features/Matches'
-import { SportName } from 'features/Common'
import { useCard } from '../hooks'
+import { MatchInfoCard } from '../MatchInfoCard'
import { CardFinishedHover } from '../CardFinishedHover'
-import {
- CardWrapper,
- Info,
- MatchDate,
- Preview,
- PreviewWrapper,
- Score,
- Team,
- TeamName,
- Teams,
- Time,
- TournamentName,
-} from '../styled'
type CardFinishedProps = {
match: Match,
@@ -25,73 +12,31 @@ type CardFinishedProps = {
}
export const CardFinished = ({
- match: {
- date,
- id,
- preview,
- sportName,
- sportType,
- team1,
- team2,
- time,
- tournamentName,
- },
+ match,
showSportName,
}: CardFinishedProps) => {
const {
close,
+ flipCard,
isOpen,
onKeyPress,
- open,
- showScore,
- } = useCard()
+ } = useCard(match.hasVideo)
if (isOpen) {
return (
)
}
return (
-
-
- {date}
-
-
-
-
-
-
- {showSportName && }
- {tournamentName && (
-
- {tournamentName}
-
- )}
-
-
- {team1.name}
- {showScore && {team1.score}}
-
-
- {team2.name}
- {showScore && {team2.score}}
-
-
-
-
+ />
)
}
diff --git a/src/features/MatchCard/CardFinishedHover/index.tsx b/src/features/MatchCard/CardFinishedHover/index.tsx
index cbcb8c1c..40a2e59d 100644
--- a/src/features/MatchCard/CardFinishedHover/index.tsx
+++ b/src/features/MatchCard/CardFinishedHover/index.tsx
@@ -3,6 +3,7 @@ import React from 'react'
import { Link } from 'react-router-dom'
+import type { Match } from 'features/Matches'
import { OutsideClick } from 'features/OutsideClick'
import {
@@ -15,9 +16,8 @@ import {
} from '../styled'
type CardFinishedHoverProps = {
- id: number,
+ match: Match,
onClose: () => void,
- sportName: string,
}
const stopProp = (e: MouseEvent) => {
@@ -25,9 +25,12 @@ const stopProp = (e: MouseEvent) => {
}
export const CardFinishedHover = ({
- id,
+ match: {
+ hasVideo,
+ id,
+ sportName,
+ },
onClose,
- sportName,
}: CardFinishedHoverProps) => (
diff --git a/src/features/MatchCard/CardLive/index.tsx b/src/features/MatchCard/CardLive/index.tsx
index c8354a0a..241f4348 100644
--- a/src/features/MatchCard/CardLive/index.tsx
+++ b/src/features/MatchCard/CardLive/index.tsx
@@ -1,22 +1,9 @@
import React from 'react'
import type { Match } from 'features/Matches'
-import { SportName } from 'features/Common'
import { useCard } from '../hooks'
-import {
- CardWrapper,
- Info,
- MatchDate,
- Preview,
- PreviewWrapper,
- Score,
- Team,
- TeamName,
- Teams,
- Time,
- TournamentName,
-} from '../styled'
+import { MatchInfoCard } from '../MatchInfoCard'
import { CardLiveHover } from '../CardLiveHover'
type CardLiveProps = {
@@ -25,73 +12,31 @@ type CardLiveProps = {
}
export const CardLive = ({
- match: {
- date,
- id,
- preview,
- sportName,
- sportType,
- team1,
- team2,
- time,
- tournamentName,
- },
+ match,
showSportName,
}: CardLiveProps) => {
const {
close,
+ flipCard,
isOpen,
onKeyPress,
- open,
- showScore,
- } = useCard()
+ } = useCard(match.hasVideo)
if (isOpen) {
return (
)
}
return (
-
-
- {date}
-
-
-
-
-
-
- {showSportName && }
- {tournamentName && (
-
- {tournamentName}
-
- )}
-
-
- {team1.name}
- {showScore && {team1.score}}
-
-
- {team2.name}
- {showScore && {team2.score}}
-
-
-
-
+ />
)
}
diff --git a/src/features/MatchCard/CardLiveHover/index.tsx b/src/features/MatchCard/CardLiveHover/index.tsx
index 62a4ad11..b5c1b3fe 100644
--- a/src/features/MatchCard/CardLiveHover/index.tsx
+++ b/src/features/MatchCard/CardLiveHover/index.tsx
@@ -3,6 +3,7 @@ import React from 'react'
import { Link } from 'react-router-dom'
+import type { Match } from 'features/Matches'
import { RESUME_KEY } from 'features/MatchPage/hooks/useLastPlayPosition'
import { OutsideClick } from 'features/OutsideClick'
@@ -16,9 +17,8 @@ import {
} from '../styled'
type CardLiveHoverProps = {
- id: number,
+ match: Match,
onClose: () => void,
- sportName: string,
}
const stopProp = (e: MouseEvent) => {
@@ -26,9 +26,11 @@ const stopProp = (e: MouseEvent) => {
}
export const CardLiveHover = ({
- id,
+ match: {
+ id,
+ sportName,
+ },
onClose,
- sportName,
}: CardLiveHoverProps) => (
diff --git a/src/features/MatchCard/CardSoon/index.tsx b/src/features/MatchCard/CardSoon/index.tsx
index 6dc10eb0..54c7e00a 100644
--- a/src/features/MatchCard/CardSoon/index.tsx
+++ b/src/features/MatchCard/CardSoon/index.tsx
@@ -2,11 +2,10 @@ import React from 'react'
import styled from 'styled-components/macro'
-import { ProfileTypes, devices } from 'config'
+import { ProfileTypes } from 'config'
import type { Match } from 'features/Matches'
import { SportName } from 'features/Common'
-import { ProfileLogo } from 'features/ProfileLogo'
import {
MatchDate,
@@ -18,35 +17,14 @@ import {
TeamName as CommonTeamName,
Teams,
TournamentName,
+ TeamLogos,
+ TeamLogo,
} from '../styled'
const CardWrapper = styled(CommonCardWrapper)`
cursor: pointer;
`
-const TeamLogos = styled.div`
- display: flex;
- padding-left: 24px;
-
- @media ${devices.mobile} {
- justify-content: space-between;
- padding-right: 20px;
- }
-`
-
-const TeamLogo = styled(ProfileLogo)`
- width: 60px;
-
- :last-child {
- margin-left: 8px;
- }
-
- @media ${devices.mobile} {
- width: 134px;
- }
-
-`
-
const TeamName = styled(CommonTeamName)`
max-width: none;
`
diff --git a/src/features/MatchCard/MatchInfoCard/index.tsx b/src/features/MatchCard/MatchInfoCard/index.tsx
new file mode 100644
index 00000000..5080fd30
--- /dev/null
+++ b/src/features/MatchCard/MatchInfoCard/index.tsx
@@ -0,0 +1,111 @@
+import type { KeyboardEvent } from 'react'
+import React from 'react'
+
+import { ProfileTypes } from 'config'
+
+import type { Match } from 'features/Matches'
+import { SportName } from 'features/Common'
+import { useScoreStore } from 'features/ToggleScore'
+
+import {
+ CardWrapper,
+ Info,
+ MatchDate,
+ Preview,
+ PreviewWrapper,
+ Score,
+ Team,
+ TeamName,
+ Teams,
+ Time,
+ TournamentName,
+ TeamLogos,
+ TeamLogo,
+} from '../styled'
+
+type Props = {
+ match: Match,
+ onClick: () => void,
+ onKeyPress: (e: KeyboardEvent) => void,
+ showSportName?: boolean,
+}
+
+export const MatchInfoCard = ({
+ match: {
+ date,
+ hasVideo,
+ preview,
+ sportType,
+ team1,
+ team2,
+ time,
+ tournamentName,
+ },
+ onClick,
+ onKeyPress,
+ showSportName,
+}: Props) => {
+ const { isHidden } = useScoreStore()
+
+ return (
+
+
+ {date}
+
+
+
+ {
+ hasVideo
+ ? (
+
+ )
+ : (
+
+
+
+
+ )
+ }
+
+
+ {showSportName && }
+ {tournamentName && (
+
+ {tournamentName}
+
+ )}
+
+
+ {team1.name}
+ {!isHidden && {team1.score}}
+
+
+ {team2.name}
+ {!isHidden && {team2.score}}
+
+
+
+
+ )
+}
diff --git a/src/features/MatchCard/hooks.tsx b/src/features/MatchCard/hooks.tsx
index bf27e769..4a5ce790 100644
--- a/src/features/MatchCard/hooks.tsx
+++ b/src/features/MatchCard/hooks.tsx
@@ -2,27 +2,30 @@ import type { KeyboardEvent } from 'react'
import { useCallback } from 'react'
import { useToggle } from 'hooks'
-import { useScoreStore } from 'features/ToggleScore'
-export const useCard = () => {
+export const useCard = (hasVideo: boolean) => {
const {
close,
isOpen,
open,
} = useToggle()
- const { isHidden } = useScoreStore()
const onKeyPress = useCallback((e: KeyboardEvent) => {
- if (e.key === 'Enter') {
+ if (e.key === 'Enter' && hasVideo) {
open()
}
- }, [open])
+ }, [hasVideo, open])
+
+ const flipCard = () => {
+ if (hasVideo) {
+ open()
+ }
+ }
return {
close,
+ flipCard,
isOpen,
onKeyPress,
- open,
- showScore: !isHidden,
}
}
diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx
index 3bc34a93..dfb0f197 100644
--- a/src/features/MatchCard/styled.tsx
+++ b/src/features/MatchCard/styled.tsx
@@ -1,7 +1,10 @@
import styled from 'styled-components/macro'
import { devices } from 'config/devices'
+
import { T9n } from 'features/T9n'
+import { ProfileLogo } from 'features/ProfileLogo'
+
import { MATCH_CARD_WIDTH } from './config'
export const CardWrapper = styled.li.attrs({
@@ -152,8 +155,8 @@ export const MoreVideo = styled(T9n)`
text-align: center;
color: rgba(255, 255, 255, 0.5);
background: linear-gradient(
- 180deg,
- rgba(255, 255, 255, 0.1) 0%,
+ 180deg,
+ rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0) 100%
),
#5C5C5C;
@@ -191,3 +194,24 @@ export const CardHoverTitle = styled(T9n)`
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
`
+
+export const TeamLogos = styled.div`
+ display: flex;
+ padding-left: 24px;
+
+ @media ${devices.mobile} {
+ justify-content: space-between;
+ padding-right: 20px;
+ }
+`
+export const TeamLogo = styled(ProfileLogo)`
+ width: 60px;
+
+ :last-child {
+ margin-left: 8px;
+ }
+
+ @media ${devices.mobile} {
+ width: 134px;
+ }
+`
diff --git a/src/features/Matches/helpers/prepareMatches.tsx b/src/features/Matches/helpers/prepareMatches.tsx
index adbe183d..715c199b 100644
--- a/src/features/Matches/helpers/prepareMatches.tsx
+++ b/src/features/Matches/helpers/prepareMatches.tsx
@@ -14,6 +14,7 @@ const prepareTeam = (team: Team, suffix: string) => ({
const prepareMatch = ({
date,
+ has_video,
id,
sport,
stream_status,
@@ -22,6 +23,7 @@ const prepareMatch = ({
tournament,
}: Match, suffix: string) => ({
date: format(new Date(date), 'dd.MM.yy'),
+ hasVideo: has_video,
id,
preview: '/images/preview.png',
sportName: getSportLexic(sport),