diff --git a/src/features/MatchPage/components/MatchProfileCard/helpers.tsx b/src/features/MatchPage/components/MatchProfileCard/helpers.tsx
new file mode 100644
index 00000000..7980a686
--- /dev/null
+++ b/src/features/MatchPage/components/MatchProfileCard/helpers.tsx
@@ -0,0 +1,23 @@
+import { SportTypes } from 'config'
+
+import type { Event } from 'requests'
+
+// Здесь в дальнейшем будет расширена логика получения статуса матча
+// для каждого вида спорта, как только решат как это сделать на бэке
+
+const getBasketballStatus = (event: Event) => `Q${event.h} ${event.c}`
+const getFootballStatus = (event: Event) => `H${event.h} ${event.c}`
+const getHockeyStatus = (event: Event) => `P${event.h} ${event.c}`
+
+export const getMatchStatus = (sportType: SportTypes, lastEvent: Event) => {
+ switch (sportType) {
+ case SportTypes.BASKETBALL:
+ return getBasketballStatus(lastEvent)
+ case SportTypes.FOOTBALL:
+ return getFootballStatus(lastEvent)
+ case SportTypes.HOCKEY:
+ return getHockeyStatus(lastEvent)
+ default:
+ return ''
+ }
+}
diff --git a/src/features/MatchPage/components/MatchProfileCard/index.tsx b/src/features/MatchPage/components/MatchProfileCard/index.tsx
index a9bea42c..8a0a2848 100644
--- a/src/features/MatchPage/components/MatchProfileCard/index.tsx
+++ b/src/features/MatchPage/components/MatchProfileCard/index.tsx
@@ -1,12 +1,18 @@
-import type { MatchInfo } from 'requests'
+import isEmpty from 'lodash/isEmpty'
+import last from 'lodash/last'
+
+import type { Events } from 'requests/getMatchEvents'
+import type { MatchInfo } from 'requests/getMatchInfo'
import { ProfileTypes } from 'config'
import { useMatchSwitchesStore } from 'features/MatchSwitches'
import { Name } from 'features/Name'
+import { T9n } from 'features/T9n'
import { usePageParams } from 'hooks/usePageParams'
+import { getMatchStatus } from './helpers'
import {
Wrapper,
Team,
@@ -14,26 +20,30 @@ import {
StyledLink,
ScoreWrapper,
Logo,
+ MatchStatus,
} from './styled'
type Props = {
+ events: Events,
profile: MatchInfo,
}
-export const MatchProfileCard = ({ profile }: Props) => {
+export const MatchProfileCard = ({ events, profile }: Props) => {
const { sportType } = usePageParams()
const { isScoreHidden } = useMatchSwitchesStore()
+ const lastEvent = last(events)
if (!profile) return
const {
+ live,
team1,
team2,
} = profile
return (
-
+
{
)
}
+ {live && (
+
+ {isEmpty(events) || !lastEvent
+ ?
+ : getMatchStatus(sportType, lastEvent)}
+
+ )}
-
+
`
+export const Team = styled.div`
font-size: 21px;
- position: absolute;
- ${({ position }) => (position === 'left' ? 'right: 54%' : 'left: 54%')};
${isMobileDevice
? css`
font-size: 16px;
@@ -49,10 +43,12 @@ export const StyledLink = styled(ProfileLink)`
export const ScoreWrapper = styled.div`
margin: 0 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
`
export const Score = styled.span`
- width: 80px;
font-size: 23px;
line-height: 18px;
text-align: center;
@@ -63,6 +59,19 @@ export const Score = styled.span`
: ''};
`
+export const MatchStatus = styled.span`
+ text-align: center;
+ background-color: #CC0000;
+ border-radius: 1.3px;
+ font-weight: 600;
+ font-size: 13px;
+ line-height: 16px;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ padding: 2.5px 14px;
+ margin-top: 6px;
+`
+
export const Logo = styled(ProfileLogo)`
width: 41px;
height: 41px;
diff --git a/src/features/MatchPage/index.tsx b/src/features/MatchPage/index.tsx
index e1293043..50139bb2 100644
--- a/src/features/MatchPage/index.tsx
+++ b/src/features/MatchPage/index.tsx
@@ -24,7 +24,7 @@ const MatchPage = () => {
return (
-
+
diff --git a/src/features/StreamPlayer/hooks/index.tsx b/src/features/StreamPlayer/hooks/index.tsx
index 55bb6dfc..14b9a21a 100644
--- a/src/features/StreamPlayer/hooks/index.tsx
+++ b/src/features/StreamPlayer/hooks/index.tsx
@@ -96,7 +96,13 @@ export const useVideoPlayer = ({
progressChangeCallback(playedMs / 1000)
}
+ const backToLive = useCallback(() => {
+ const liveProgressMs = duration - 10000
+ setPlayerState({ playedProgress: liveProgressMs, seek: liveProgressMs / 1000 })
+ }, [duration, setPlayerState])
+
return {
+ backToLive,
duration,
loadedProgress,
onDuration,
diff --git a/src/features/StreamPlayer/index.tsx b/src/features/StreamPlayer/index.tsx
index f55a48a2..4da75837 100644
--- a/src/features/StreamPlayer/index.tsx
+++ b/src/features/StreamPlayer/index.tsx
@@ -3,6 +3,7 @@ import { secondsToHms } from 'helpers'
import { Loader } from 'features/Loader'
import { Settings } from 'features/MultiSourcePlayer/components/Settings'
import { REWIND_SECONDS } from 'features/MultiSourcePlayer/config'
+import { T9n } from 'features/T9n'
import type { Props } from './hooks'
import { useVideoPlayer } from './hooks'
@@ -22,11 +23,13 @@ import {
Forward,
PlaybackTime,
ControlsGradient,
+ LiveBtn,
} from './styled'
export const StreamPlayer = (props: Props) => {
const { url } = props
const {
+ backToLive,
duration,
isFullscreen,
loadedProgress,
@@ -125,6 +128,9 @@ export const StreamPlayer = (props: Props) => {
{REWIND_SECONDS}
+
+
+
`
`
: ''};
`
+
+export const LiveBtn = styled(ButtonBase)`
+ height: auto;
+ font-weight: bold;
+ font-size: 10px;
+ line-height: 12px;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ padding: 4.5px 8px;
+ background-color: #CC0000;
+ border-radius: 1.3px;
+`