diff --git a/public/images/views-icon.svg b/public/images/views-icon.svg
new file mode 100644
index 00000000..36eecc13
--- /dev/null
+++ b/public/images/views-icon.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx
index 7dad88ce..41e1c26e 100644
--- a/src/config/lexics/indexLexics.tsx
+++ b/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 = {
diff --git a/src/features/MatchPage/components/FinishedMatch/index.tsx b/src/features/MatchPage/components/FinishedMatch/index.tsx
index 2fae92ce..264d3d6f 100644
--- a/src/features/MatchPage/components/FinishedMatch/index.tsx
+++ b/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}
/>
)}
+
{
resumeFrom={resume}
url={streamUrl}
/>
+
{
+ const { sportType } = usePageParams()
+
+ if (!profile) return
+
+ const {
+ country_id,
+ date,
+ live,
+ team1,
+ team2,
+ tournament,
+ } = profile
+
+ const localDate = format(parseDate(date), live ? 'HH:mm' : 'd.MM.Y')
+
+ return (
+
+
+
+
+
+ —
+
+
+
+ {live ? '\u00a0|\u00a0LIVE STREAM' : ''}
+
+
+
+
+
+
+
+
+
+ {
+ live
+ ?
+ :
+ }
+ {localDate}
+
+
+ )
+}
diff --git a/src/features/MatchPage/components/MatchDescription/styled.tsx b/src/features/MatchPage/components/MatchDescription/styled.tsx
new file mode 100644
index 00000000..e43da144
--- /dev/null
+++ b/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``
diff --git a/src/features/MatchPage/styled.tsx b/src/features/MatchPage/styled.tsx
index c0534a4c..29b0ab36 100644
--- a/src/features/MatchPage/styled.tsx
+++ b/src/features/MatchPage/styled.tsx
@@ -17,17 +17,17 @@ export const Wrapper = styled.div`
${isMobileDevice
? css`
- @media (max-width: 750px){
- margin-top: 50px;
- }
- @media screen and (orientation: landscape){
- flex-direction: row;
- justify-content: space-between;
- margin-left: 10px;
- margin-top: 55px;
- width: 100vw;
- }
- `
+ @media (max-width: 750px) {
+ margin-top: 50px;
+ }
+ @media screen and (orientation: landscape) {
+ flex-direction: row;
+ justify-content: space-between;
+ margin-left: 10px;
+ margin-top: 55px;
+ width: 100vw;
+ }
+ `
: ''};
`
@@ -45,17 +45,17 @@ export const Container = styled.div`
${isMobileDevice
? css`
- width: 100%;
- max-width: 100%;
- margin-right: 0;
- padding: 0;
- margin-bottom: 15px;
- min-height: 32vh;
-
- @media screen and (orientation: landscape){
- display: block;
- margin-bottom: 0;
- }
- `
+ width: 100%;
+ max-width: 100%;
+ margin-right: 0;
+ padding: 0;
+ margin-bottom: 15px;
+
+ @media screen and (orientation: landscape) {
+ display: block;
+ margin-bottom: 0;
+ overflow-y: auto;
+ }
+ `
: ''};
`
diff --git a/src/features/MatchSidePlaylists/styled.tsx b/src/features/MatchSidePlaylists/styled.tsx
index db186ccd..0ef5b9be 100644
--- a/src/features/MatchSidePlaylists/styled.tsx
+++ b/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
diff --git a/src/features/MatchSwitches/styled.tsx b/src/features/MatchSwitches/styled.tsx
index 75dccadf..4c25bd3f 100644
--- a/src/features/MatchSwitches/styled.tsx
+++ b/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){
diff --git a/src/features/StreamPlayer/styled.tsx b/src/features/StreamPlayer/styled.tsx
index 19b2f970..83033810 100644
--- a/src/features/StreamPlayer/styled.tsx
+++ b/src/features/StreamPlayer/styled.tsx
@@ -300,7 +300,6 @@ export const LiveBtn = styled(ButtonBase)`
${isMobileDevice
? css`
- @media (max-width: 650px){
margin-right: 7px;
}
`
diff --git a/src/requests/getMatchInfo.tsx b/src/requests/getMatchInfo.tsx
index 74c42b42..dcaa45ac 100644
--- a/src/requests/getMatchInfo.tsx
+++ b/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,