From 5d78365fcf5434a549b159a5046a50b1d1644128 Mon Sep 17 00:00:00 2001 From: boyvanov <50294488+boyvanov@users.noreply.github.com> Date: Thu, 7 Oct 2021 10:06:23 +0300 Subject: [PATCH] feat(ott-1773): add match status and live button (#523) * feat(ott-1773): add match status and live button * fix(ott-1773): pr fixes Co-authored-by: boyvanov --- .../components/MatchProfileCard/helpers.tsx | 23 +++++++++++++++++ .../components/MatchProfileCard/index.tsx | 25 ++++++++++++++++--- .../components/MatchProfileCard/styled.tsx | 25 +++++++++++++------ src/features/MatchPage/index.tsx | 2 +- src/features/StreamPlayer/hooks/index.tsx | 6 +++++ src/features/StreamPlayer/index.tsx | 6 +++++ src/features/StreamPlayer/styled.tsx | 16 ++++++++++-- 7 files changed, 88 insertions(+), 15 deletions(-) create mode 100644 src/features/MatchPage/components/MatchProfileCard/helpers.tsx diff --git a/src/features/MatchPage/components/MatchProfileCard/helpers.tsx b/src/features/MatchPage/components/MatchProfileCard/helpers.tsx new file mode 100644 index 00000000..7980a686 --- /dev/null +++ b/src/features/MatchPage/components/MatchProfileCard/helpers.tsx @@ -0,0 +1,23 @@ +import { SportTypes } from 'config' + +import type { Event } from 'requests' + +// Здесь в дальнейшем будет расширена логика получения статуса матча +// для каждого вида спорта, как только решат как это сделать на бэке + +const getBasketballStatus = (event: Event) => `Q${event.h} ${event.c}` +const getFootballStatus = (event: Event) => `H${event.h} ${event.c}` +const getHockeyStatus = (event: Event) => `P${event.h} ${event.c}` + +export const getMatchStatus = (sportType: SportTypes, lastEvent: Event) => { + switch (sportType) { + case SportTypes.BASKETBALL: + return getBasketballStatus(lastEvent) + case SportTypes.FOOTBALL: + return getFootballStatus(lastEvent) + case SportTypes.HOCKEY: + return getHockeyStatus(lastEvent) + default: + return '' + } +} diff --git a/src/features/MatchPage/components/MatchProfileCard/index.tsx b/src/features/MatchPage/components/MatchProfileCard/index.tsx index a9bea42c..8a0a2848 100644 --- a/src/features/MatchPage/components/MatchProfileCard/index.tsx +++ b/src/features/MatchPage/components/MatchProfileCard/index.tsx @@ -1,12 +1,18 @@ -import type { MatchInfo } from 'requests' +import isEmpty from 'lodash/isEmpty' +import last from 'lodash/last' + +import type { Events } from 'requests/getMatchEvents' +import type { MatchInfo } from 'requests/getMatchInfo' import { ProfileTypes } from 'config' import { useMatchSwitchesStore } from 'features/MatchSwitches' import { Name } from 'features/Name' +import { T9n } from 'features/T9n' import { usePageParams } from 'hooks/usePageParams' +import { getMatchStatus } from './helpers' import { Wrapper, Team, @@ -14,26 +20,30 @@ import { StyledLink, ScoreWrapper, Logo, + MatchStatus, } from './styled' type Props = { + events: Events, profile: MatchInfo, } -export const MatchProfileCard = ({ profile }: Props) => { +export const MatchProfileCard = ({ events, profile }: Props) => { const { sportType } = usePageParams() const { isScoreHidden } = useMatchSwitchesStore() + const lastEvent = last(events) if (!profile) return const { + live, team1, team2, } = profile return ( - + { ) } + {live && ( + + {isEmpty(events) || !lastEvent + ? + : getMatchStatus(sportType, lastEvent)} + + )} - + ` +export const Team = styled.div` font-size: 21px; - position: absolute; - ${({ position }) => (position === 'left' ? 'right: 54%' : 'left: 54%')}; ${isMobileDevice ? css` font-size: 16px; @@ -49,10 +43,12 @@ export const StyledLink = styled(ProfileLink)` export const ScoreWrapper = styled.div` margin: 0 10px; + display: flex; + flex-direction: column; + align-items: center; ` export const Score = styled.span` - width: 80px; font-size: 23px; line-height: 18px; text-align: center; @@ -63,6 +59,19 @@ export const Score = styled.span` : ''}; ` +export const MatchStatus = styled.span` + text-align: center; + background-color: #CC0000; + border-radius: 1.3px; + font-weight: 600; + font-size: 13px; + line-height: 16px; + letter-spacing: 0.05em; + text-transform: uppercase; + padding: 2.5px 14px; + margin-top: 6px; +` + export const Logo = styled(ProfileLogo)` width: 41px; height: 41px; diff --git a/src/features/MatchPage/index.tsx b/src/features/MatchPage/index.tsx index e1293043..50139bb2 100644 --- a/src/features/MatchPage/index.tsx +++ b/src/features/MatchPage/index.tsx @@ -24,7 +24,7 @@ const MatchPage = () => { return ( - +
diff --git a/src/features/StreamPlayer/hooks/index.tsx b/src/features/StreamPlayer/hooks/index.tsx index 55bb6dfc..14b9a21a 100644 --- a/src/features/StreamPlayer/hooks/index.tsx +++ b/src/features/StreamPlayer/hooks/index.tsx @@ -96,7 +96,13 @@ export const useVideoPlayer = ({ progressChangeCallback(playedMs / 1000) } + const backToLive = useCallback(() => { + const liveProgressMs = duration - 10000 + setPlayerState({ playedProgress: liveProgressMs, seek: liveProgressMs / 1000 }) + }, [duration, setPlayerState]) + return { + backToLive, duration, loadedProgress, onDuration, diff --git a/src/features/StreamPlayer/index.tsx b/src/features/StreamPlayer/index.tsx index f55a48a2..4da75837 100644 --- a/src/features/StreamPlayer/index.tsx +++ b/src/features/StreamPlayer/index.tsx @@ -3,6 +3,7 @@ import { secondsToHms } from 'helpers' import { Loader } from 'features/Loader' import { Settings } from 'features/MultiSourcePlayer/components/Settings' import { REWIND_SECONDS } from 'features/MultiSourcePlayer/config' +import { T9n } from 'features/T9n' import type { Props } from './hooks' import { useVideoPlayer } from './hooks' @@ -22,11 +23,13 @@ import { Forward, PlaybackTime, ControlsGradient, + LiveBtn, } from './styled' export const StreamPlayer = (props: Props) => { const { url } = props const { + backToLive, duration, isFullscreen, loadedProgress, @@ -125,6 +128,9 @@ export const StreamPlayer = (props: Props) => { {REWIND_SECONDS} + + + ` ` : ''}; ` + +export const LiveBtn = styled(ButtonBase)` + height: auto; + font-weight: bold; + font-size: 10px; + line-height: 12px; + letter-spacing: 0.05em; + text-transform: uppercase; + padding: 4.5px 8px; + background-color: #CC0000; + border-radius: 1.3px; +`