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 ( + + + <StyledLink + id={team1.id} + profileType={ProfileTypes.TEAMS} + sportType={sportType} + > + <Name nameObj={team1} /> + </StyledLink> +  —  + <StyledLink + id={team2.id} + profileType={ProfileTypes.TEAMS} + sportType={sportType} + > + <Name nameObj={team2} /> + </StyledLink> + {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,