diff --git a/src/features/MatchCard/CardFinishedHover/index.tsx b/src/features/MatchCard/CardBackSide/index.tsx similarity index 90% rename from src/features/MatchCard/CardFinishedHover/index.tsx rename to src/features/MatchCard/CardBackSide/index.tsx index cec2ec69..a8ccfb1a 100644 --- a/src/features/MatchCard/CardFinishedHover/index.tsx +++ b/src/features/MatchCard/CardBackSide/index.tsx @@ -14,7 +14,7 @@ import { Rows, } from '../styled' -type CardFinishedHoverProps = { +type Props = { match: Match, onClose: () => void, } @@ -23,14 +23,13 @@ const stopProp = (e: MouseEvent) => { e.stopPropagation() } -export const CardFinishedHover = ({ +export const CardBackside = ({ match: { - hasVideo, id, sportName, }, onClose, -}: CardFinishedHoverProps) => ( +}: Props) => ( diff --git a/src/features/MatchCard/CardFinished/index.tsx b/src/features/MatchCard/CardFinished/index.tsx deleted file mode 100644 index b1dae93a..00000000 --- a/src/features/MatchCard/CardFinished/index.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import type { Match } from 'features/Matches' - -import { useCard } from '../hooks' -import { MatchInfoCard } from '../MatchInfoCard' -import { CardFinishedHover } from '../CardFinishedHover' - -type CardFinishedProps = { - match: Match, - showSportName?: boolean, -} - -export const CardFinished = ({ - match, - showSportName, -}: CardFinishedProps) => { - const { - close, - flipCard, - isOpen, - onKeyPress, - } = useCard(match) - - if (isOpen) { - return ( - - ) - } - - return ( - - ) -} diff --git a/src/features/MatchCard/MatchInfoCard/index.tsx b/src/features/MatchCard/CardFrontSide/index.tsx similarity index 92% rename from src/features/MatchCard/MatchInfoCard/index.tsx rename to src/features/MatchCard/CardFrontSide/index.tsx index 19589635..38a43ccd 100644 --- a/src/features/MatchCard/MatchInfoCard/index.tsx +++ b/src/features/MatchCard/CardFrontSide/index.tsx @@ -32,12 +32,11 @@ type Props = { showSportName?: boolean, } -export const MatchInfoCard = ({ +export const CardFrontside = ({ match: { accessibleBySubscription, accessibleInUsersCountry, date, - hasVideo, preview, sportType, team1, @@ -59,7 +58,7 @@ export const MatchInfoCard = ({ > { - hasVideo + preview ? ( - {!isScoreHidden && {team1.score}} + {(!isScoreHidden && team1.score) && {team1.score}} - {!isScoreHidden && {team2.score}} + {(!isScoreHidden && team2.score) && {team2.score}} diff --git a/src/features/MatchCard/CardLive/index.tsx b/src/features/MatchCard/CardLive/index.tsx deleted file mode 100644 index 29f4449d..00000000 --- a/src/features/MatchCard/CardLive/index.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import type { Match } from 'features/Matches' - -import { useCard } from '../hooks' -import { MatchInfoCard } from '../MatchInfoCard' -import { CardLiveHover } from '../CardLiveHover' - -type CardLiveProps = { - match: Match, - showSportName?: boolean, -} - -export const CardLive = ({ - match, - showSportName, -}: CardLiveProps) => { - const { - close, - flipCard, - isOpen, - onKeyPress, - } = useCard(match) - - if (isOpen) { - return ( - - ) - } - - return ( - - ) -} diff --git a/src/features/MatchCard/CardLiveHover/index.tsx b/src/features/MatchCard/CardLiveHover/index.tsx deleted file mode 100644 index 518f528e..00000000 --- a/src/features/MatchCard/CardLiveHover/index.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import type { MouseEvent } 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' - -import { - CardHoverInner, - CardHoverTitle, - CardHoverWrapper, - MoreVideo, - Row, - Rows, -} from '../styled' - -type CardLiveHoverProps = { - match: Match, - onClose: () => void, -} - -const stopProp = (e: MouseEvent) => { - e.stopPropagation() -} - -export const CardLiveHover = ({ - match: { - id, - sportName, - }, - onClose, -}: CardLiveHoverProps) => ( - - - - - - - - - - - - - - - - - - - - - - - -) diff --git a/src/features/MatchCard/CardSoon/index.tsx b/src/features/MatchCard/CardSoon/index.tsx deleted file mode 100644 index 0bc9972b..00000000 --- a/src/features/MatchCard/CardSoon/index.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import styled from 'styled-components/macro' - -import { ProfileTypes } from 'config' - -import type { Match } from 'features/Matches' -import { SportName } from 'features/Common' -import { useName } from 'features/Name' - -import { NoAccessMessage } from '../NoAccessMessage' -import { - MatchDate, - CardWrapper as CommonCardWrapper, - Time, - Info, - PreviewWrapper, - Team, - TeamName as CommonTeamName, - Teams, - TournamentName, - TeamLogos, - TeamLogo, - BuyMatchButton, -} from '../styled' - -const CardWrapper = styled(CommonCardWrapper)` - cursor: pointer; -` - -const TeamName = styled(CommonTeamName)` - max-width: none; -` - -type CardSoonProps = { - match: Match, - showSportName?: boolean, -} - -export const CardSoon = ({ - match: { - accessibleBySubscription, - accessibleInUsersCountry, - date, - sportType, - team1, - team2, - time, - tournament, - }, - showSportName, -}: CardSoonProps) => { - const tournamentName = useName(tournament) - return ( - - - - - - - {!accessibleBySubscription && } - {(accessibleBySubscription && !accessibleInUsersCountry) - ? - : ( - - {date} - - - )} - - - {showSportName && } - {tournamentName && ( - - {tournamentName} - - )} - - - - - - - - - - - ) -} diff --git a/src/features/MatchCard/hooks.tsx b/src/features/MatchCard/hooks.tsx index 17ca2837..f3c1a49c 100644 --- a/src/features/MatchCard/hooks.tsx +++ b/src/features/MatchCard/hooks.tsx @@ -5,28 +5,18 @@ import { useToggle } from 'hooks' import type { Match } from 'features/Matches' -export const useCard = ({ - accessibleBySubscription, - accessibleInUsersCountry, - hasVideo, -}: Match) => { +export const useCard = (match: Match) => { const { close, isOpen, open, } = useToggle() - const isClickable = ( - hasVideo - && accessibleInUsersCountry - && accessibleBySubscription - ) - const flipCard = useCallback(() => { - if (isClickable) { + if (match.isClickable) { open() } - }, [isClickable, open]) + }, [match, open]) const onKeyPress = useCallback((e: KeyboardEvent) => { if (e.key === 'Enter') { diff --git a/src/features/MatchCard/index.tsx b/src/features/MatchCard/index.tsx index 44ee2e1f..9846122f 100644 --- a/src/features/MatchCard/index.tsx +++ b/src/features/MatchCard/index.tsx @@ -3,29 +3,39 @@ import { useRouteMatch } from 'react-router' import { PAGES } from 'config' import type { Match } from 'features/Matches' -import { MatchStatuses } from 'features/HeaderFilters' -import { CardLive } from './CardLive' -import { CardFinished } from './CardFinished' -import { CardSoon } from './CardSoon' +import { CardFrontside } from './CardFrontside' +import { CardBackside } from './CardBackside' +import { useCard } from './hooks' -type MatchCardProps = { +type Props = { match: Match, } -const cards = { - [MatchStatuses.Finished]: CardFinished, - [MatchStatuses.Live]: CardLive, - [MatchStatuses.Soon]: CardSoon, -} - -export const MatchCard = ({ match }: MatchCardProps) => { +export const MatchCard = ({ match }: Props) => { const isHomePage = useRouteMatch(PAGES.home)?.isExact - const Card = cards[match.streamStatus] + const { + close, + flipCard, + isOpen, + onKeyPress, + } = useCard(match) + + if (isOpen) { + return ( + + ) + } + return ( - ) } diff --git a/src/features/Matches/helpers/prepareMatches.tsx b/src/features/Matches/helpers/prepareMatches.tsx index 3a609681..42a245a3 100644 --- a/src/features/Matches/helpers/prepareMatches.tsx +++ b/src/features/Matches/helpers/prepareMatches.tsx @@ -10,9 +10,10 @@ const prepareMatch = ({ date, has_video, id, + live, preview, sport, - stream_status, + storage, sub, team1, team2, @@ -23,10 +24,14 @@ const prepareMatch = ({ date: format(new Date(date), 'dd.MM.yy'), hasVideo: has_video, id, + isClickable: (sub && access && ( + has_video + || live + || storage + )), preview, sportName: getSportLexic(sport), sportType: sport, - streamStatus: stream_status, team1, team2, time: format(new Date(date), 'HH:mm'), diff --git a/src/requests/getMatches/getPreviews.tsx b/src/requests/getMatches/getPreviews.tsx index 5befda65..ddf4a375 100644 --- a/src/requests/getMatches/getPreviews.tsx +++ b/src/requests/getMatches/getPreviews.tsx @@ -6,8 +6,6 @@ import map from 'lodash/map' import type { PreviewsData, Previews } from 'requests' import { getMatchesPreviewImages } from 'requests' -import { MatchStatuses } from 'features/HeaderFilters' - import type { MatchesBySection, Matches } from './types' const combinePreviews = (matches: Matches, previews: Previews) => ( @@ -30,9 +28,8 @@ const getPreviews = async (matches: Matches) => { has_video, id, sport, - stream_status, }) => { - if (has_video && stream_status === MatchStatuses.Finished) { + if (has_video) { acc.push({ match_id: id, sport_id: sport, diff --git a/src/requests/getMatches/types.tsx b/src/requests/getMatches/types.tsx index 0675957a..a324a628 100644 --- a/src/requests/getMatches/types.tsx +++ b/src/requests/getMatches/types.tsx @@ -1,7 +1,5 @@ import { SportTypes } from 'config' -import { MatchStatuses } from 'features/HeaderFilters' - type Tournament = { id: number, name_eng: string, @@ -18,12 +16,16 @@ export type Team = { export type Match = { access: boolean, date: string, + /** наличие mp4 видео */ has_video: boolean, id: number, + /** наличие hls стрима */ + live: boolean, preview?: string, round_id: number | null, sport: SportTypes, - stream_status: MatchStatuses, + /** наличие завершенного hls стрима */ + storage: boolean, sub: boolean, team1: Team, team2: Team,