From f6fe9d217b2899f71ce6300565bd9db71be352b9 Mon Sep 17 00:00:00 2001 From: Zoia <43918051+zizi62@users.noreply.github.com> Date: Wed, 30 Dec 2020 07:58:47 -0500 Subject: [PATCH] Ott 693 popup live mathes copy (#269) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 🎸 OTT-693 add popup * feat: 🎸 OTT-693 fix style * feat: 🎸 OTT-693 fix style * feat: 🎸 OTT-693 some fix Co-authored-by: Zoia --- src/config/lexics/indexLexics.tsx | 2 + .../index.tsx | 2 +- .../components/FinishedMatchPopup/index.tsx | 52 +++++++++++ .../components/FinishedMatchPopup/styled.tsx | 25 ++++++ .../index.tsx | 6 +- .../components/LiveMatchPlaylist/index.tsx | 73 +++++++++++++++ .../components/LiveMatchPopup/index.tsx | 41 +++++++++ .../components/LiveMatchPopup/styled.tsx | 25 ++++++ .../components/LivePlaylistPage/index.tsx | 39 ++++++++ .../components/LivePlaylistPage/styled.tsx | 39 ++++++++ .../components/SimplePlaylistButton/index.tsx | 88 +++++++++++++++++++ src/features/MatchPopup/index.tsx | 48 +--------- src/features/MatchPopup/styled.tsx | 20 ----- src/features/MatchPopup/types.tsx | 1 + .../Matches/helpers/prepareMatches.tsx | 2 + 15 files changed, 395 insertions(+), 68 deletions(-) rename src/features/MatchPopup/components/{MatchPlaylist => FinishedMatchPlaylist}/index.tsx (96%) create mode 100644 src/features/MatchPopup/components/FinishedMatchPopup/index.tsx create mode 100644 src/features/MatchPopup/components/FinishedMatchPopup/styled.tsx rename src/features/MatchPopup/components/{PlaylistPage => FinishedPlaylistPage}/index.tsx (92%) create mode 100644 src/features/MatchPopup/components/LiveMatchPlaylist/index.tsx create mode 100644 src/features/MatchPopup/components/LiveMatchPopup/index.tsx create mode 100644 src/features/MatchPopup/components/LiveMatchPopup/styled.tsx create mode 100644 src/features/MatchPopup/components/LivePlaylistPage/index.tsx create mode 100644 src/features/MatchPopup/components/LivePlaylistPage/styled.tsx create mode 100644 src/features/MatchPopup/components/SimplePlaylistButton/index.tsx diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx index 0ea341ab..dc4f5704 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/src/config/lexics/indexLexics.tsx @@ -14,6 +14,8 @@ const matchPopupLexics = { sec_before: 13411, selected_player_actions: 13413, team_players: 13398, + watch_from: 13022, + watch_live_stream: 13020, } export const indexLexics = { diff --git a/src/features/MatchPopup/components/MatchPlaylist/index.tsx b/src/features/MatchPopup/components/FinishedMatchPlaylist/index.tsx similarity index 96% rename from src/features/MatchPopup/components/MatchPlaylist/index.tsx rename to src/features/MatchPopup/components/FinishedMatchPlaylist/index.tsx index bde4e7c6..453b1d0b 100644 --- a/src/features/MatchPopup/components/MatchPlaylist/index.tsx +++ b/src/features/MatchPopup/components/FinishedMatchPlaylist/index.tsx @@ -39,7 +39,7 @@ const Item = styled.li` } ` -export const MatchPlaylist = () => { +export const FinishedMatchPlaylist = () => { const { match, matchPlaylists } = useMatchPopupStore() if (!match || !matchPlaylists) return null diff --git a/src/features/MatchPopup/components/FinishedMatchPopup/index.tsx b/src/features/MatchPopup/components/FinishedMatchPopup/index.tsx new file mode 100644 index 00000000..7033211f --- /dev/null +++ b/src/features/MatchPopup/components/FinishedMatchPopup/index.tsx @@ -0,0 +1,52 @@ +import { Fragment } from 'react' + +import { Background } from 'features/Background' +import { MediaQuery } from 'features/MediaQuery' +import { useMatchPopupStore } from 'features/MatchPopup' + +import { SettingsPage } from '../../components/SettingsPage' +import { FinishedPlaylistPage } from '../../components/FinishedPlaylistPage' +import { PopupPages } from '../../types' +import { Modal } from './styled' + +export * from '../../store' + +export const FinishedMatchPopup = () => { + const { + closePopup, + isOpen, + matchPlaylists, + page, + } = useMatchPopupStore() + + const showPopup = isOpen && Boolean(matchPlaylists) + + const pageElement = page === PopupPages.PLAYLIST + ? + : + + return ( + + + + {pageElement} + + + + + + + {pageElement} + + + + + ) +} diff --git a/src/features/MatchPopup/components/FinishedMatchPopup/styled.tsx b/src/features/MatchPopup/components/FinishedMatchPopup/styled.tsx new file mode 100644 index 00000000..2cdde308 --- /dev/null +++ b/src/features/MatchPopup/components/FinishedMatchPopup/styled.tsx @@ -0,0 +1,25 @@ +import styled from 'styled-components/macro' + +import { devices } from 'config' + +import { Modal as BaseModal } from 'features/Modal' +import { ModalWindow } from 'features/Modal/styled' + +export const Modal = styled(BaseModal)` + background-color: rgba(0, 0, 0, 0.7); + + ${ModalWindow} { + width: 1222px; + height: 818px; + padding: 20px 0; + background-color: #3F3F3F; + border-radius: 5px; + + @media ${devices.mobile} { + width: 100vw; + height: 100vh; + padding: 0; + background-color: transparent; + } + } +` diff --git a/src/features/MatchPopup/components/PlaylistPage/index.tsx b/src/features/MatchPopup/components/FinishedPlaylistPage/index.tsx similarity index 92% rename from src/features/MatchPopup/components/PlaylistPage/index.tsx rename to src/features/MatchPopup/components/FinishedPlaylistPage/index.tsx index 11df43c5..295e7e98 100644 --- a/src/features/MatchPopup/components/PlaylistPage/index.tsx +++ b/src/features/MatchPopup/components/FinishedPlaylistPage/index.tsx @@ -9,7 +9,7 @@ import { useMatchPopupStore } from 'features/MatchPopup' import { SettingsButton } from '../SettingsButton' import { CloseButton } from '../CloseButton' import { BackButton } from '../BackButton' -import { MatchPlaylist } from '../MatchPlaylist' +import { FinishedMatchPlaylist } from '../FinishedMatchPlaylist' import { PlayersListDesktop } from '../PlayersListDesktop' import { PlayersListMobile } from '../PlayersListMobile' import { @@ -19,7 +19,7 @@ import { HeaderTitle, } from '../../styled' -export const PlaylistPage = () => { +export const FinishedPlaylistPage = () => { const { match, matchPlaylists } = useMatchPopupStore() if (!match) return null @@ -52,7 +52,7 @@ export const PlaylistPage = () => { - + { hasPlayers && ( diff --git a/src/features/MatchPopup/components/LiveMatchPlaylist/index.tsx b/src/features/MatchPopup/components/LiveMatchPlaylist/index.tsx new file mode 100644 index 00000000..2d7b3c23 --- /dev/null +++ b/src/features/MatchPopup/components/LiveMatchPlaylist/index.tsx @@ -0,0 +1,73 @@ +import { useState, useEffect } from 'react' + +import styled from 'styled-components/macro' + +import { devices, PAGES } from 'config' +import { getSportLexic } from 'helpers' +import { getMatchLastWatchSeconds, LastPlayPosition } from 'requests' + +import { useMatchPopupStore } from 'features/MatchPopup/store' + +import { SimplePlaylistButton } from '../SimplePlaylistButton' + +const List = styled.ul` + margin: 40px auto 0px auto; + width: 100%; + + @media ${devices.mobile} { + margin: 12px auto; + padding: 0 12px; + } +` +const Item = styled.li` + margin-bottom: 15px; + width: 100%; + height: 50px; + + @media ${devices.mobile} { + height: 36px; + margin-bottom: 12px; + } +` +export const LiveMatchPlaylist = () => { + const [lastPlayPosition, setLastPlayPosition] = useState(null) + const { match, matchPlaylists } = useMatchPopupStore() + + useEffect(() => { + if (match) { + getMatchLastWatchSeconds(match?.sportType, match?.id) + .then((lastPlayPositionSecond) => setLastPlayPosition(lastPlayPositionSecond)) + } + }, [match]) + + if (!match || !matchPlaylists) return null + + const sport = getSportLexic(match.sportType) + return ( + + + + + + + + {lastPlayPosition?.second + ? ( + + + + ) + : null} + + ) +} diff --git a/src/features/MatchPopup/components/LiveMatchPopup/index.tsx b/src/features/MatchPopup/components/LiveMatchPopup/index.tsx new file mode 100644 index 00000000..d7757ef6 --- /dev/null +++ b/src/features/MatchPopup/components/LiveMatchPopup/index.tsx @@ -0,0 +1,41 @@ +import { Fragment } from 'react' + +import { Background } from 'features/Background' +import { MediaQuery } from 'features/MediaQuery' +import { useMatchPopupStore } from 'features/MatchPopup' + +import { LivePlaylistPage } from '../LivePlaylistPage' + +import { Modal } from './styled' + +export const LiveMatchPopup = () => { + const { + closePopup, + isOpen, + } = useMatchPopupStore() + + return ( + + + + + + + + + + + + + + + + ) +} diff --git a/src/features/MatchPopup/components/LiveMatchPopup/styled.tsx b/src/features/MatchPopup/components/LiveMatchPopup/styled.tsx new file mode 100644 index 00000000..408a12fc --- /dev/null +++ b/src/features/MatchPopup/components/LiveMatchPopup/styled.tsx @@ -0,0 +1,25 @@ +import styled from 'styled-components/macro' + +import { devices } from 'config' + +import { Modal as BaseModal } from 'features/Modal' +import { ModalWindow } from 'features/Modal/styled' + +export const Modal = styled(BaseModal)` + background-color: rgba(0, 0, 0, 0.7); + + ${ModalWindow} { + width: 565px; + min-height: 310px; + padding: 20px 35px; + background-color: #3F3F3F; + border-radius: 5px; + + @media ${devices.mobile} { + width: 100vw; + height: 100vh; + padding: 0; + background-color: transparent; + } + } +` diff --git a/src/features/MatchPopup/components/LivePlaylistPage/index.tsx b/src/features/MatchPopup/components/LivePlaylistPage/index.tsx new file mode 100644 index 00000000..c35ff9cf --- /dev/null +++ b/src/features/MatchPopup/components/LivePlaylistPage/index.tsx @@ -0,0 +1,39 @@ +import { Name } from 'features/Name' +import { useMatchPopupStore } from 'features/MatchPopup' + +import { CloseButton } from '../CloseButton' +import { LiveMatchPlaylist } from '../LiveMatchPlaylist' + +import { + Content, + Header, + HeaderActions, + HeaderTitle, +} from './styled' + +export const LivePlaylistPage = () => { + const { match, matchPlaylists } = useMatchPopupStore() + if (!match) return null + + const { team1, team2 } = match + + return ( + +
+ + + {' '} — {' '} + + + + + + +
+ + { + matchPlaylists && + } + + ) +} diff --git a/src/features/MatchPopup/components/LivePlaylistPage/styled.tsx b/src/features/MatchPopup/components/LivePlaylistPage/styled.tsx new file mode 100644 index 00000000..99d32fa9 --- /dev/null +++ b/src/features/MatchPopup/components/LivePlaylistPage/styled.tsx @@ -0,0 +1,39 @@ +import styled from 'styled-components/macro' + +import { customScrollbar } from 'features/Common' + +export const Content = styled.div` + width: 495px; + height: 100%; + overflow-y: auto; + ${customScrollbar} +` + +export const Header = styled.div` + display: flex; + align-items: center; +` + +export const HeaderActions = styled.div` + position: absolute; + display: flex; + top: 20px; + right: 20px; +` + +export const HeaderTitle = styled.h2` + margin: 0 auto; + width: 70%; + font-weight: 600; + font-size: 24px; + line-height: 42px; + color: #FFFFFF; + text-align: center; +` + +export const BlockTitle = styled.h3` + font-weight: normal; + font-size: 24px; + line-height: 50px; + text-transform: capitalize; +` diff --git a/src/features/MatchPopup/components/SimplePlaylistButton/index.tsx b/src/features/MatchPopup/components/SimplePlaylistButton/index.tsx new file mode 100644 index 00000000..6c9c7800 --- /dev/null +++ b/src/features/MatchPopup/components/SimplePlaylistButton/index.tsx @@ -0,0 +1,88 @@ +import type { MouseEvent } from 'react' +import { Link } from 'react-router-dom' + +import styled from 'styled-components/macro' + +import { devices } from 'config' +import { secondsToHms } from 'helpers' + +import { T9n } from 'features/T9n' + +const StyledLink = styled(Link)` + border: none; + cursor: pointer; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + width: 100%; + height: 100%; + padding: 0 25px; + background: linear-gradient( + 180deg, + rgba(255, 255, 255, 0.1) 0%, + rgba(255, 255, 255, 0) 100% + ), + #5c5c5c; + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); + border-radius: 2px; + + :hover { + background-color: #555555; + } + + @media ${devices.mobile} { + justify-content: center; + border-radius: 5px; + } +` + +const Title = styled.span` + font-weight: 500; + font-size: 20px; + line-height: 50px; + letter-spacing: 0.03em; + color: #ffffff; + + @media ${devices.mobile} { + font-size: 17px; + line-height: 16px; + margin-right: 16px; + text-transform: none; + } +` + +const Duration = styled(Title)` + font-weight: 300; + font-size: 24px; + letter-spacing: 0.05em; + + @media ${devices.mobile} { + font-size: 17px; + line-height: 16px; + text-transform: none; + } +` + +const stopPropagation = (e: MouseEvent) => e.stopPropagation() + +type Props = { + duration?: number, + startWatch?: number, + title: string, + to: string, +} + +export const SimplePlaylistButton = ({ + duration, + startWatch, + title, + to, +}: Props) => ( + + + <T9n t={title} /> {startWatch && secondsToHms(startWatch)} + + {duration && {secondsToHms(duration)}} + +) diff --git a/src/features/MatchPopup/index.tsx b/src/features/MatchPopup/index.tsx index 4b54d2c9..13c7434a 100644 --- a/src/features/MatchPopup/index.tsx +++ b/src/features/MatchPopup/index.tsx @@ -1,52 +1,12 @@ -import { Fragment } from 'react' - -import { Background } from 'features/Background' -import { MediaQuery } from 'features/MediaQuery' import { useMatchPopupStore } from 'features/MatchPopup' -import { SettingsPage } from './components/SettingsPage' -import { PlaylistPage } from './components/PlaylistPage' -import { PopupPages } from './types' -import { Modal } from './styled' +import { FinishedMatchPopup } from './components/FinishedMatchPopup' +import { LiveMatchPopup } from './components/LiveMatchPopup' export * from './store' export const MatchPopup = () => { - const { - closePopup, - isOpen, - matchPlaylists, - page, - } = useMatchPopupStore() - - const showPopup = isOpen && Boolean(matchPlaylists) - - const pageElement = page === PopupPages.PLAYLIST - ? - : - - return ( - - - - {pageElement} - - + const { match } = useMatchPopupStore() - - - - {pageElement} - - - - - ) + return match?.live ? : } diff --git a/src/features/MatchPopup/styled.tsx b/src/features/MatchPopup/styled.tsx index 048f04af..74abdd11 100644 --- a/src/features/MatchPopup/styled.tsx +++ b/src/features/MatchPopup/styled.tsx @@ -2,28 +2,8 @@ import styled, { css } from 'styled-components/macro' import { devices } from 'config' -import { Modal as BaseModal } from 'features/Modal' -import { ModalWindow } from 'features/Modal/styled' import { customScrollbar } from 'features/Common' -export const Modal = styled(BaseModal)` - background-color: rgba(0, 0, 0, 0.7); - - ${ModalWindow} { - width: 1222px; - padding: 20px 0; - background-color: #3F3F3F; - border-radius: 5px; - - @media ${devices.mobile} { - width: 100vw; - height: 100vh; - padding: 0; - background-color: transparent; - } - } -` - export const BaseButton = styled.button` padding: 0; border: none; diff --git a/src/features/MatchPopup/types.tsx b/src/features/MatchPopup/types.tsx index 90a80037..37103301 100644 --- a/src/features/MatchPopup/types.tsx +++ b/src/features/MatchPopup/types.tsx @@ -7,6 +7,7 @@ export type MatchData = Pick | null export enum PopupPages { diff --git a/src/features/Matches/helpers/prepareMatches.tsx b/src/features/Matches/helpers/prepareMatches.tsx index f2c25234..bd169be8 100644 --- a/src/features/Matches/helpers/prepareMatches.tsx +++ b/src/features/Matches/helpers/prepareMatches.tsx @@ -10,6 +10,7 @@ const prepareMatch = ({ date, has_video, id, + live, preview, sport, storage, @@ -27,6 +28,7 @@ const prepareMatch = ({ has_video || storage )), + live, preview, sportName: getSportLexic(sport), sportType: sport,