src/features/MatchSidePlaylists/components/EventButton/index.tsx

@@ -1,11 +1,18 @@
-import { ProfileTypes } from 'config'
+import { createPortal } from 'react-dom'
+
+import { isMobileDevice, ProfileTypes } from 'config'
 
 import type { Event, Team } from 'requests'
 
-import { usePageParams } from 'hooks/usePageParams'
+import {
+  useTooltip,
+  usePageParams,
+  useModalRoot,
+} from 'hooks'
 
 import { Name } from 'features/Name'
 import { T9n } from 'features/T9n'
+import { useLexicsStore } from 'features/LexicsStore'
 
 import {
   Avatar,
@@ -17,6 +24,7 @@ import {
   EventTime,
   EventLike,
 } from '../TabEvents/styled'
+import { Tooltip } from '../TabStats/styled'
 
 type Props = {
   active?: boolean,
@@ -36,6 +44,16 @@ export const EventButton = ({
   team,
 }: Props) => {
   const { sportType } = usePageParams()
+  const {
+    isTooltipShown,
+    onMouseLeave,
+    onMouseOver,
+    tooltipStyle,
+    tooltipText,
+  } = useTooltip()
+  const modalRoot = useModalRoot()
+  const { suffix } = useLexicsStore()
+
   const {
     c: clearTime,
     l: lexica,
@@ -81,11 +99,28 @@ export const EventButton = ({
             <T9n t={lexica} />
             {(score1 || score2) && ` (${score1}-${score2})`}
           </Title>
-          <SubTitle>
+          <SubTitle
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...!isMobileDevice && {
+              onMouseLeave,
+              onMouseOver: onMouseOver({
+                horizontalPosition: 'right',
+                indent: 15,
+                tooltipText: nameObj?.[`name_${suffix}`] || '',
+              }),
+            }}
+          >
+            {playerName?.num}{' '}
             {(playerId || teamId) && nameObj && <Name nameObj={nameObj} />}
           </SubTitle>
         </EventDesc>
       </EventInfo>
+      {isTooltipShown && modalRoot.current && createPortal(
+        <Tooltip style={tooltipStyle}>
+          {tooltipText}
+        </Tooltip>,
+        modalRoot.current,
+      )}
     </Button>
   )
 }

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,24 @@ 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;
+  padding-right: 10px;
+
+  ${Duration} {
+    margin-left: auto;
+  }
+
+  ${Title} {
+    max-width: 75%;
+  }
+`

src/features/MatchSidePlaylists/components/PlayersTable/Cell.tsx

@@ -10,7 +10,8 @@ import {
   useTooltip,
 } from 'hooks'
 
-import { Tooltip, CellContainer } from './styled'
+import { Tooltip } from '../TabStats/styled'
+import { CellContainer } from './styled'
 
 type CellProps = {
   anchorId?: string,

src/features/MatchSidePlaylists/components/PlayersTable/styled.tsx

@@ -5,7 +5,6 @@ import styled, { css } from 'styled-components/macro'
 import { isIOS, isMobileDevice } from 'config'
 
 import { customScrollbar } from 'features/Common'
-import { TooltipWrapper } from 'features/Tooltip'
 import {
   ArrowButton as ArrowButtonBase,
   Arrow as ArrowBase,
@@ -76,21 +75,6 @@ export const Table = styled.table`
   table-layout: fixed;
 `
 
-export const Tooltip = styled(TooltipWrapper)`
-  display: block;
-  padding: 2px 10px;
-  border-radius: 6px;
-  transform: none;
-  font-size: 11px;
-  line-height: 1;
-  color: ${({ theme }) => theme.colors.black};
-  z-index: 999;
-
-  ::before {
-    display: none;
-  }
-`
-
 type ParamShortTitleProps = {
   showLeftArrow?: boolean,
   sortDirection: 'asc' | 'desc',

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,6 +119,10 @@ export const SubTitle = styled(Title)`
   font-weight: normal;
   color: rgba(255, 255, 255, 0.7);
   margin-top: 2px;
+
+  ${NameStyled} {
+    font-weight: 700;
+  }
 `
 
 export const EventLike = styled.img`
@@ -211,10 +216,6 @@ export const Button = styled(ButtonBase) <ButtonProps>`
       background-size: cover;
     ` : ''
   )}
-  
-  &:hover ${EventDesc} {
-    overflow: visible;
-  }
 
   ${({ isHomeTeam }) => (
     isHomeTeam

src/features/MatchSidePlaylists/components/TabStats/styled.tsx

@@ -16,14 +16,16 @@ export const TabList = styled.div.attrs({ role: 'tablist' })`
 `
 
 export const Tooltip = styled(TooltipWrapper)`
-  display: block;
-  padding: 2px 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 17px;
+  padding: 0 10px;
   border-radius: 6px;
   transform: none;
   font-size: 11px;
   line-height: 1;
   color: ${({ theme }) => theme.colors.black};
-  z-index: 999;
 
   ::before {
     display: none;

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/hooks/useTooltip.tsx

@@ -56,6 +56,7 @@ export const useTooltip = () => {
       position: 'fixed',
       right: !isUndefined(coords.right) ? `${window.screen.width - coords.right}px` : 'auto',
       top: `${coords.top}px`,
+      zIndex: 999,
 
       ...(horizontalPosition === 'center' && { transform: 'translateX: (-50%)' }),
       ...(verticalPosition === 'top' && { transform: 'translateY: (-50%)' }),

src/requests/getMatchEvents.tsx

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