Ott 2103 add description for match

public/images/views-icon.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 4.00043C9.80119 -0.866446 5.22826 -1.78095 0 4.00043C5.22826 9.78181 9.80119 8.8649 14 4.00043ZM4.3537 1.95427C4.3537 2.05079 4.34655 2.1473 4.34655 2.24141C4.34655 4.0873 5.54281 5.59297 7.01549 5.59297C8.48102 5.59297 9.67728 4.0873 9.67728 2.24141C9.67728 2.15937 9.67728 2.07974 9.67013 1.9977C10.5 2.44444 11.4758 3.11111 12.25 3.77778C9.4357 6.62021 5.41889 7.82492 1.96119 4.00043C2.7857 3.09076 3.57923 2.41996 4.3537 1.95427Z" fill="white" fill-opacity="0.5"/>
+</svg>

src/config/lexics/indexLexics.tsx

@@ -26,10 +26,14 @@ const matchPopupLexics = {
   sec_after: 13412,
   sec_before: 13411,
   selected_player_actions: 13413,
+  started_streaming_at: 16042,
+  streamed_live_on: 16043,
+  views: 13440,
   watch: 818,
   watch_from: 13022,
   watch_live_stream: 13020,
   watch_players_episodes: 14052,
+  watching_now: 16041,
 }
 
 const buyMatchPopupLexics = {

src/features/MatchPage/components/FinishedMatch/index.tsx

@@ -9,6 +9,7 @@ import { MatchSidePlaylists } from 'features/MatchSidePlaylists'
 import { MultiSourcePlayer } from 'features/MultiSourcePlayer'
 
 import { SettingsPopup } from '../SettingsPopup'
+import { MatchDescription } from '../MatchDescription'
 
 import { useFinishedMatch } from './hooks'
 import { Container } from '../../styled'
@@ -53,6 +54,7 @@ export const FinishedMatch = ({ events, profile }: Props) => {
             onPlayingChange={onPlayingChange}
           />
         )}
+        <MatchDescription profile={profile} />
       </Container>
 
       <MatchSidePlaylists

src/features/MatchPage/components/LiveMatch/index.tsx

@@ -7,6 +7,7 @@ import { StreamPlayer } from 'features/StreamPlayer'
 import { MatchSidePlaylists } from 'features/MatchSidePlaylists'
 
 import { Container } from '../../styled'
+import { MatchDescription } from '../MatchDescription'
 
 import { useLiveMatch } from './hooks'
 
@@ -36,6 +37,7 @@ export const LiveMatch = ({ events, profile }: Props) => {
           resumeFrom={resume}
           url={streamUrl}
         />
+        <MatchDescription profile={profile} />
       </Container>
 
       <MatchSidePlaylists

src/features/MatchPage/components/MatchDescription/index.tsx

@@ -0,0 +1,87 @@
+import { format } from 'date-fns'
+
+import type { MatchInfo } from 'requests/getMatchInfo'
+
+import { Name } from 'features/Name'
+import { SportIcon } from 'features/SportIcon'
+import { T9n } from 'features/T9n'
+
+import { parseDate } from 'helpers/parseDate'
+
+import { ProfileTypes } from 'config'
+
+import { usePageParams } from 'hooks/usePageParams'
+import {
+  CountryFlag,
+  Description,
+  MatchDate,
+  StyledLink,
+  Title,
+  Tournament,
+  Views,
+} from './styled'
+
+type Props = {
+  profile: MatchInfo,
+}
+
+export const MatchDescription = ({ profile }: Props) => {
+  const { sportType } = usePageParams()
+
+  if (!profile) return <Description />
+
+  const {
+    country_id,
+    date,
+    live,
+    team1,
+    team2,
+    tournament,
+  } = profile
+
+  const localDate = format(parseDate(date), live ? 'HH:mm' : 'd.MM.Y')
+
+  return (
+    <Description>
+      <Title>
+        <StyledLink
+          id={team1.id}
+          profileType={ProfileTypes.TEAMS}
+          sportType={sportType}
+        >
+          <Name nameObj={team1} />
+        </StyledLink>
+        &nbsp;—&nbsp;
+        <StyledLink
+          id={team2.id}
+          profileType={ProfileTypes.TEAMS}
+          sportType={sportType}
+        >
+          <Name nameObj={team2} />
+        </StyledLink>
+        {live ? '\u00a0|\u00a0LIVE STREAM' : ''}
+      </Title>
+      <Tournament>
+        <SportIcon sport={sportType} />
+        <CountryFlag
+          src={`https://instatscout.com/images/flags/48/${country_id}.png`}
+        />
+        <StyledLink
+          id={tournament.id}
+          profileType={ProfileTypes.TOURNAMENTS}
+          sportType={sportType}
+        >
+          <Name nameObj={tournament} />
+        </StyledLink>
+      </Tournament>
+      <Views>
+        {
+          live
+            ? <T9n t='started_streaming_at' />
+            : <T9n t='streamed_live_on' />
+        }
+        <MatchDate>{localDate}</MatchDate>
+      </Views>
+    </Description>
+  )
+}

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

@@ -0,0 +1,63 @@
+import styled, { css } from 'styled-components/macro'
+import { isMobileDevice } from 'config/userAgent'
+
+import { ProfileLink } from 'features/ProfileLink'
+
+export const Description = styled.div`
+  margin: 20px 0;
+
+  ${isMobileDevice
+    ? css`
+        @media (orientation: portrait) {
+          padding-left: 14px;
+        }
+      `
+    : ''};
+`
+
+export const StyledLink = styled(ProfileLink)`
+  display: flex;
+  align-items: center;
+  color: rgba(255, 255, 255, 0.7);
+
+  &:hover {
+    color: white;
+    text-decoration: underline;
+  }
+`
+
+export const Title = styled.div`
+  display: flex;
+  flex-direction: row;
+  color: #ffffff;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 24px;
+  margin-bottom: 10px;
+  > * {
+    color: #ffffff;
+  }
+`
+
+export const Tournament = styled.span`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 14px;
+  line-height: 16px;
+  color: rgba(255, 255, 255, 0.7);
+  margin-bottom: 5px;
+`
+
+export const CountryFlag = styled.img`
+  height: 12px;
+  margin: 0 6px;
+`
+
+export const Views = styled(Tournament)`
+  > * {
+    margin-right: 5px;
+  }
+`
+
+export const MatchDate = styled.span``

src/features/MatchPage/styled.tsx

@@ -17,17 +17,17 @@ export const Wrapper = styled.div`
 
   ${isMobileDevice
     ? css`
-      @media (max-width: 750px){
+        @media (max-width: 750px) {
-        margin-top: 50px;
+          margin-top: 50px;
-      }
+        }
-      @media screen and (orientation: landscape){
+        @media screen and (orientation: landscape) {
-        flex-direction: row;
+          flex-direction: row;
-        justify-content: space-between;
+          justify-content: space-between;
-        margin-left: 10px;
+          margin-left: 10px;
-        margin-top: 55px;
+          margin-top: 55px;
-        width: 100vw;
+          width: 100vw;
-      }
+        }
-    `
+      `
     : ''};
 `
 
@@ -45,17 +45,17 @@ export const Container = styled.div`
 
   ${isMobileDevice
     ? css`
-      width: 100%;
+        width: 100%;
-      max-width: 100%;
+        max-width: 100%;
-      margin-right: 0;
+        margin-right: 0;
-      padding: 0;
+        padding: 0;
-      margin-bottom: 15px;
+        margin-bottom: 15px;
-      min-height: 32vh;
+
-
+        @media screen and (orientation: landscape) {
-      @media screen and (orientation: landscape){
+          display: block;
-        display: block;
+          margin-bottom: 0;
-        margin-bottom: 0;
+          overflow-y: auto;
-      }
+        }
-    `
+      `
     : ''};
 `

src/features/MatchSidePlaylists/styled.tsx

@@ -34,7 +34,7 @@ export const Container = styled.div`
 
   @media ${devices.tablet} {
     max-height: calc(100vh - 40px);
-    margin-top: 15px;
+    margin: 15px auto 0 auto;
   }
 
   ${isMobileDevice

src/features/MatchSwitches/styled.tsx

@@ -76,7 +76,7 @@ export const Wrapper = styled.div`
   ${isMobileDevice
     ? css`
      position: absolute;
-     bottom: -113px;
+     bottom: -130px;
      right: -10px;
      width: 95vw;
         @media (max-width: 450px){

src/features/StreamPlayer/styled.tsx

@@ -300,7 +300,6 @@ export const LiveBtn = styled(ButtonBase)`
 
   ${isMobileDevice
     ? css`
-    @media (max-width: 650px){
       margin-right: 7px;
     }
     `

src/requests/getMatchInfo.tsx

@@ -18,6 +18,7 @@ export type Team = {
 
 export type MatchInfo = {
   calc: boolean,
+  country_id: number,
   date: string,
   has_video: boolean,
   live: boolean,