feat(in-254): add player number

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})`}
           </Title>
           <SubTitle>
+            {nameObj && 'num' in nameObj && (
+              <PlayerNum>
+                {(nameObj as Event['pl'])!.num}
+              </PlayerNum>
+            )}{' '}
             {(playerId || teamId) && nameObj && <Name nameObj={nameObj} />}
           </SubTitle>
         </EventDesc>

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 (
     <Fragment>
-      {playListFilter > 0 && <Title t='other_games' />}
+      <Title t='other_games' />
       <MatchesWrapper
         ref={ref}
         hasScroll={overflow}

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}

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>

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%;
+  }
+`

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;

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}
       />

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,
   }
 }

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>

src/requests/getMatchEvents.tsx

@@ -18,6 +18,7 @@ type Args = {
 type PlayerNames = {
   name_eng: string,
   name_rus: string,
+  num?: number,
 }
 
 export type Event = Episode & {