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 && } + <Title t='other_games' /> <MatchesWrapper ref={ref} hasScroll={overflow} diff --git a/src/features/MatchSidePlaylists/components/PlayButton/index.tsx b/src/features/MatchSidePlaylists/components/PlayButton/index.tsx index 63aa298c..1c04304c 100644 --- a/src/features/MatchSidePlaylists/components/PlayButton/index.tsx +++ b/src/features/MatchSidePlaylists/components/PlayButton/index.tsx @@ -13,6 +13,7 @@ import { Button, Title } from '../../styled' type Props = { active?: boolean, children: ReactNode, + className?: string, disabled?: boolean, duration?: number, leftContent?: ReactNode, @@ -24,7 +25,7 @@ type TLiveBtn = { isActive?: boolean, } -const Duration = styled(Title)` +export const Duration = styled(Title)` margin-left: 10px; font-weight: normal; ` @@ -40,6 +41,7 @@ export const LiveBtn = styled(LiveBtnBase)<TLiveBtn>` export const PlayButton = ({ active, children, + className, disabled, duration, leftContent, @@ -47,6 +49,7 @@ export const PlayButton = ({ onClick, }: Props) => ( <Button + className={className} onClick={onClick} active={active} disabled={disabled} diff --git a/src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx b/src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx index 22b69298..4b8b6dc5 100644 --- a/src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx +++ b/src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx @@ -18,7 +18,6 @@ import { Name } from 'features/Name' import { isEqual } from '../../helpers' -import { PlayButton } from '../PlayButton' import { Wrapper, List, @@ -26,6 +25,8 @@ import { PlayerAvatar, Tabs, Tab, + PlayerNum, + PlayButton, } from './styled' enum Teams { @@ -86,6 +87,7 @@ export const PlayersPlaylists = ({ /> )} > + <PlayerNum>{player.num}</PlayerNum> <Name nameObj={player} /> </PlayButton> </PlayersItem> 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<TabProps>` 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 ( <Fragment> - {playListFilter > 0 && ( - <MatchPlaylists - ref={matchPlaylistsRef} - playlists={filteredPlayListByDuration} - selectedMathPlaylist={selectedPlaylist} - onSelect={onSelect} - live={profile?.live} - /> - )} + <MatchPlaylists + ref={matchPlaylistsRef} + playlists={filteredPlayListByDuration} + selectedMathPlaylist={selectedPlaylist} + onSelect={onSelect} + live={profile?.live} + /> <DropdownSection itemsCount={size(playlists.interview)} title={playlists.lexics?.interview} @@ -71,7 +67,6 @@ export const TabWatch = ({ </DropdownSection> <Matches profile={profile} - playListFilter={playListFilter} tournamentData={tournamentData} additionalScrollHeight={additionalScrollHeight} /> 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} /> </Container> </Wrapper> 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 & {