diff --git a/src/features/MatchSidePlaylists/components/EventButton/index.tsx b/src/features/MatchSidePlaylists/components/EventButton/index.tsx
index 88791171..cd369d1f 100644
--- a/src/features/MatchSidePlaylists/components/EventButton/index.tsx
+++ b/src/features/MatchSidePlaylists/components/EventButton/index.tsx
@@ -16,6 +16,7 @@ import {
SubTitle,
EventTime,
EventLike,
+ PlayerNum,
} from '../TabEvents/styled'
type Props = {
@@ -82,6 +83,11 @@ export const EventButton = ({
{(score1 || score2) && ` (${score1}-${score2})`}
+ {nameObj && 'num' in nameObj && (
+
+ {(nameObj as Event['pl'])!.num}
+
+ )}{' '}
{(playerId || teamId) && nameObj && }
diff --git a/src/features/MatchSidePlaylists/components/Matches/index.tsx b/src/features/MatchSidePlaylists/components/Matches/index.tsx
index eab08173..db93b4be 100644
--- a/src/features/MatchSidePlaylists/components/Matches/index.tsx
+++ b/src/features/MatchSidePlaylists/components/Matches/index.tsx
@@ -24,7 +24,6 @@ import { MatchesWrapper, Title } from './styled'
type Props = {
additionalScrollHeight: number,
- playListFilter: number,
profile: MatchInfo,
tournamentData: TournamentData,
}
@@ -33,7 +32,6 @@ const formatDate = (date: Date) => format(date, 'yyyy-MM-dd')
export const Matches = ({
additionalScrollHeight,
- playListFilter,
profile,
tournamentData,
}: Props) => {
@@ -66,7 +64,7 @@ export const Matches = ({
return (
- {playListFilter > 0 && }
+
`
export const PlayButton = ({
active,
children,
+ className,
disabled,
duration,
leftContent,
@@ -47,6 +49,7 @@ export const PlayButton = ({
onClick,
}: Props) => (
)}
>
+ {player.num}
diff --git a/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx b/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx
index 0fa2373a..f96cb113 100644
--- a/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx
+++ b/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx
@@ -2,6 +2,9 @@ import styled, { css } from 'styled-components/macro'
import { ProfileLogo } from 'features/ProfileLogo'
+import { PlayButton as PlayButtonBase, Duration } from '../PlayButton'
+import { Title } from '../../styled'
+
export const Wrapper = styled.div`
display: flex;
flex-direction: column;
@@ -19,9 +22,6 @@ export const PlayersItem = styled.li`
`
export const PlayerAvatar = styled(ProfileLogo)`
- position: absolute;
- left: 5px;
- bottom: 0;
width: 28px;
height: 34px;
object-fit: cover;
@@ -68,3 +68,23 @@ export const Tab = styled.button`
margin-right: 48px;
}
`
+
+export const PlayerNum = styled.span`
+ display: inline-block;
+ width: 37px;
+ font-size: 14px;
+ font-weight: initial;
+ color: ${({ theme }) => theme.colors.white};
+`
+
+export const PlayButton = styled(PlayButtonBase)`
+ justify-content: initial;
+
+ ${Duration} {
+ margin-left: auto;
+ }
+
+ ${Title} {
+ max-width: 75%;
+ }
+`
diff --git a/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx b/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx
index 49648c8b..f7dc7afe 100644
--- a/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx
+++ b/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx
@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components/macro'
import { isMobileDevice } from 'config/userAgent'
import { ProfileLogo } from 'features/ProfileLogo'
+import { NameStyled } from 'features/Name'
import { Tabs as TabsBase } from '../PlayersPlaylists/styled'
@@ -118,8 +119,14 @@ export const SubTitle = styled(Title)`
font-weight: normal;
color: rgba(255, 255, 255, 0.7);
margin-top: 2px;
+
+ ${NameStyled} {
+ font-weight: 600;
+ }
`
+export const PlayerNum = styled.span``
+
export const EventLike = styled.img`
position: absolute;
left: -14px;
diff --git a/src/features/MatchSidePlaylists/components/TabWatch/index.tsx b/src/features/MatchSidePlaylists/components/TabWatch/index.tsx
index 657bcabe..8c7ab360 100644
--- a/src/features/MatchSidePlaylists/components/TabWatch/index.tsx
+++ b/src/features/MatchSidePlaylists/components/TabWatch/index.tsx
@@ -21,7 +21,6 @@ import { Matches } from '../Matches'
type Props = {
onSelect: (option: PlaylistOption) => void,
- playListFilter: number,
playlists: Playlists,
profile: MatchInfo,
selectedPlaylist?: PlaylistOption,
@@ -30,7 +29,6 @@ type Props = {
export const TabWatch = ({
onSelect,
- playListFilter,
playlists,
profile,
selectedPlaylist,
@@ -50,15 +48,13 @@ export const TabWatch = ({
return (
- {playListFilter > 0 && (
-
- )}
+
diff --git a/src/features/MatchSidePlaylists/hooks.tsx b/src/features/MatchSidePlaylists/hooks.tsx
index 2ee32f96..74329c73 100644
--- a/src/features/MatchSidePlaylists/hooks.tsx
+++ b/src/features/MatchSidePlaylists/hooks.tsx
@@ -1,6 +1,5 @@
import { useEffect, useMemo } from 'react'
-import reduce from 'lodash/reduce'
import isEmpty from 'lodash/isEmpty'
import compact from 'lodash/compact'
@@ -18,22 +17,9 @@ export const useMatchSidePlaylists = () => {
selectedTab,
setSelectedTab,
teamsStats,
- tournamentData,
} = useMatchPageStore()
- const playListFilter = useMemo(() => reduce(
- playlists.match,
- (acc, item) => {
- let result = acc
- if (item.duration) result++
- return result
- },
- 0,
- ), [playlists.match])
-
- const isWatchTabVisible = useMemo(() => (
- playListFilter > 0 || tournamentData.matchDates.length > 1
- ), [playListFilter, tournamentData.matchDates.length])
+ const isWatchTabVisible = true
const isEventTabVisible = useMemo(() => (
events.length > 0
@@ -95,7 +81,6 @@ export const useMatchSidePlaylists = () => {
isStatsTabVisible,
isWatchTabVisible,
onTabClick: setSelectedTab,
- playListFilter,
selectedTab,
}
}
diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx
index fb857905..bb67f45e 100644
--- a/src/features/MatchSidePlaylists/index.tsx
+++ b/src/features/MatchSidePlaylists/index.tsx
@@ -59,7 +59,6 @@ export const MatchSidePlaylists = ({
isStatsTabVisible,
isWatchTabVisible,
onTabClick,
- playListFilter,
} = useMatchSidePlaylists()
const TabPane = tabPanes[selectedTab]
@@ -152,7 +151,6 @@ export const MatchSidePlaylists = ({
playlists={playlists}
profile={profile}
selectedPlaylist={selectedPlaylist}
- playListFilter={playListFilter}
/>
diff --git a/src/requests/getMatchEvents.tsx b/src/requests/getMatchEvents.tsx
index 51af4761..f5ffea5b 100644
--- a/src/requests/getMatchEvents.tsx
+++ b/src/requests/getMatchEvents.tsx
@@ -18,6 +18,7 @@ type Args = {
type PlayerNames = {
name_eng: string,
name_rus: string,
+ num?: number,
}
export type Event = Episode & {