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) => (
+
+
+ {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,