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 <boyvanov.sergey@gmail.com>

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 ''
+  }
+}

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 <Wrapper />
 
   const {
+    live,
     team1,
     team2,
   } = profile
 
   return (
     <Wrapper>
-      <Team position='left'>
+      <Team>
         <StyledLink
           id={team1.id}
           profileType={ProfileTypes.TEAMS}
@@ -57,8 +67,15 @@ export const MatchProfileCard = ({ profile }: Props) => {
               </Score>
             )
         }
+        {live && (
+          <MatchStatus>
+            {isEmpty(events) || !lastEvent
+              ? <T9n t='live' />
+              : getMatchStatus(sportType, lastEvent)}
+          </MatchStatus>
+        )}
       </ScoreWrapper>
-      <Team position='right'>
+      <Team>
         <StyledLink
           id={team2.id}
           profileType={ProfileTypes.TEAMS}

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

@@ -21,15 +21,9 @@ export const Wrapper = styled.div`
     : ''};
 `
 
-type TeamProps = {
+export const Team = styled.div`
-  position?: 'left' | 'right',
-}
-
-export const Team = styled.div<TeamProps>`
   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;

src/features/MatchPage/index.tsx

@@ -24,7 +24,7 @@ const MatchPage = () => {
   return (
     <PageWrapper>
       <ProfileHeader color='rgb(0,0,0)' height={4.5}>
-        <MatchProfileCard profile={profile} />
+        <MatchProfileCard events={events} profile={profile} />
       </ProfileHeader>
       <Main>
         <UserFavorites />

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,

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) => {
             <Forward onClick={rewindForward}>{REWIND_SECONDS}</Forward>
           </ControlsGroup>
           <ControlsGroup>
+            <LiveBtn onClick={backToLive}>
+              <T9n t='live' />
+            </LiveBtn>
             <Fullscreen
               onClick={onFullscreenClick}
               isFullscreen={isFullscreen}

src/features/StreamPlayer/styled.tsx

@@ -285,3 +285,15 @@ export const CenterControls = styled.div<CenterControlsProps>`
     `
     : ''};
 `
+
+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;
+`