Revert "feat(in-142): match stats tab"

This reverts commit 269ddad403.

src/config/lexics/indexLexics.tsx

@@ -9,12 +9,8 @@ const matchPopupLexics = {
   apply: 13491,
   choose_fav_team: 19776,
   commentators: 15424,
-  current_stats: 19592,
-  display_all_stats: 19932,
-  display_stats_according_to_video: 19931,
   episode_duration: 13410,
   events: 1020,
-  final_stats: 19591,
   from_end_match: 15396,
   from_price: 3992,
   from_start_match: 15395,
@@ -164,7 +160,6 @@ export const indexLexics = {
   no_match_access_body: 13419,
   no_match_access_title: 13418,
   player: 14975,
-  players: 164,
   players_video: 13032,
   privacy_policy_and_statement: 15404,
   round_highilights: 13050,

src/features/MatchPage/components/FinishedMatch/index.tsx

@@ -17,11 +17,7 @@ import { useMatchPageStore } from '../../store'
 
 export const FinishedMatch = () => {
   const [circleAnimation, setCircleAnimation] = useState<TCircleAnimation>(initialCircleAnimation)
-  const {
+  const { isOpenPopup, profile } = useMatchPageStore()
-    isOpenFiltersPopup,
-    profile,
-    setPlayingProgress,
-  } = useMatchPageStore()
   const {
     chapters,
     closeSettingsPopup,
@@ -52,10 +48,9 @@ export const FinishedMatch = () => {
           <Fragment>
             <MultiSourcePlayer
               setCircleAnimation={setCircleAnimation}
-              isOpenPopup={isOpenFiltersPopup}
+              isOpenPopup={isOpenPopup}
               chapters={chapters}
               onPlayingChange={onPlayingChange}
-              onPlayerProgressChange={setPlayingProgress}
               profile={profile}
             />
             <MatchDescription />

src/features/MatchPage/components/LiveMatch/hooks/index.tsx

@@ -21,7 +21,6 @@ export const useLiveMatch = () => {
     profile,
     selectedPlaylist,
     setFullMatchPlaylistDuration,
-    setPlayingProgress,
   } = useMatchPageStore()
   const { profileId: matchId, sportType } = usePageParams()
   const resume = useResumeUrlParam()
@@ -46,7 +45,7 @@ export const useLiveMatch = () => {
   } = usePlaylistLogger()
 
   const {
-    onPlayerProgressChange: playerProgressChange,
+    onPlayerProgressChange,
     onPlayingChange: notifyProgressLogger,
   } = usePlayerProgressReporter()
 
@@ -67,11 +66,6 @@ export const useLiveMatch = () => {
     handlePlaylistClick(playlist, e)
   }
 
-  const onPlayerProgressChange = (seconds: number, period = 0) => {
-    playerProgressChange(seconds, period)
-    setPlayingProgress(seconds * 1000)
-  }
-
   return {
     chapters,
     isPlayFilterEpisodes,

src/features/MatchPage/store/hooks/index.tsx

@@ -42,7 +42,7 @@ export const useMatchPage = () => {
     countOfFilters,
     filters,
     isEmptyFilters,
-    isOpen: isOpenFiltersPopup,
+    isOpen: isOpenPopup,
     resetEvents,
     resetPlayers,
     toggle: togglePopup,
@@ -78,16 +78,9 @@ export const useMatchPage = () => {
   const {
     events,
     handlePlaylistClick,
-    isEmptyPlayersStats,
     matchPlaylists,
-    playersData,
-    playersStats,
     selectedPlaylist,
     setFullMatchPlaylistDuration,
-    setPlayingProgress,
-    setStatsType,
-    statsType,
-    teamsStats,
   } = useMatchData(matchProfile)
 
   const profile = matchProfile
@@ -179,9 +172,8 @@ export const useMatchPage = () => {
     handlePlaylistClick,
     hideProfileCard,
     isEmptyFilters,
-    isEmptyPlayersStats,
     isLiveMatch,
-    isOpenFiltersPopup,
+    isOpenPopup,
     isPlayFilterEpisodes,
     isStarted,
     likeImage,
@@ -190,8 +182,6 @@ export const useMatchPage = () => {
     plaingOrder,
     playEpisodes,
     playNextEpisode,
-    playersData,
-    playersStats,
     profile,
     profileCardShown,
     resetEvents,
@@ -201,14 +191,10 @@ export const useMatchPage = () => {
     setFullMatchPlaylistDuration,
     setIsPlayinFiltersEpisodes,
     setPlaingOrder,
-    setPlayingProgress,
     setReversed,
-    setStatsType,
     setUnreversed,
     setWatchAllEpisodesTimer,
     showProfileCard,
-    statsType,
-    teamsStats,
     toggleActiveEvents,
     toggleActivePlayers,
     togglePopup,

src/features/MatchPage/store/hooks/useMatchData.tsx

@@ -6,7 +6,7 @@ import {
 
 import debounce from 'lodash/debounce'
 
-import type { MatchInfo } from 'requests/getMatchInfo'
+import { MatchInfo } from 'requests/getMatchInfo'
 
 import { usePageParams } from 'hooks/usePageParams'
 import { useInterval } from 'hooks/useInterval'
@@ -16,9 +16,6 @@ import { useMatchPopupStore } from 'features/MatchPopup'
 
 import { useMatchPlaylists } from './useMatchPlaylists'
 import { useEvents } from './useEvents'
-import { useTeamsStats } from './useTeamsStats'
-import { useStatsTab } from './useStatsTab'
-import { usePlayersStats } from './usePlayersStats'
 
 const MATCH_DATA_POLL_INTERVAL = 60000
 const MATCH_PLAYLISTS_DELAY = 5000
@@ -27,7 +24,6 @@ export const useMatchData = (profile: MatchInfo) => {
   const { profileId: matchId, sportType } = usePageParams()
   const { chapters } = useMatchPopupStore()
   const [matchDuration, setMatchDuration] = useState(0)
-  const [playingProgress, setPlayingProgress] = useState(0)
   const {
     fetchMatchPlaylists,
     handlePlaylistClick,
@@ -37,21 +33,6 @@ export const useMatchData = (profile: MatchInfo) => {
     setSelectedPlaylist,
   } = useMatchPlaylists(profile)
   const { events, fetchMatchEvents } = useEvents()
-  const { setStatsType, statsType } = useStatsTab()
-  const { teamsStats } = useTeamsStats({
-    matchProfile: profile,
-    playingProgress,
-    statsType,
-  })
-  const {
-    isEmptyPlayersStats,
-    playersData,
-    playersStats,
-  } = usePlayersStats({
-    matchProfile: profile,
-    playingProgress,
-    statsType,
-  })
 
   const fetchPlaylistsDebounced = useMemo(
     () => debounce(fetchMatchPlaylists, MATCH_PLAYLISTS_DELAY),
@@ -112,15 +93,8 @@ export const useMatchData = (profile: MatchInfo) => {
   return {
     events,
     handlePlaylistClick,
-    isEmptyPlayersStats,
     matchPlaylists,
-    playersData,
-    playersStats,
     selectedPlaylist,
     setFullMatchPlaylistDuration,
-    setPlayingProgress,
-    setStatsType,
-    statsType,
-    teamsStats,
   }
 }

src/features/MatchPage/store/hooks/usePlayersStats.tsx

@@ -1,159 +0,0 @@
-import {
-  useMemo,
-  useEffect,
-  useState,
-} from 'react'
-
-import throttle from 'lodash/throttle'
-import isEmpty from 'lodash/isEmpty'
-import every from 'lodash/every'
-import find from 'lodash/find'
-
-import type {
-  MatchInfo,
-  PlayersStats,
-  Player,
-} from 'requests'
-import { getPlayersStats, getMatchParticipants } from 'requests'
-
-import { useObjectState, usePageParams } from 'hooks'
-
-import { StatsType } from 'features/MatchSidePlaylists/components/TabStats/config'
-
-const REQUEST_DELAY = 3000
-const STATS_POLL_INTERVAL = 30000
-
-type UsePlayersStatsArgs = {
-  matchProfile: MatchInfo,
-  playingProgress: number,
-  statsType: StatsType,
-}
-
-type PlayersData = {
-  team1: Array<Player>,
-  team2: Array<Player>,
-}
-
-export const usePlayersStats = ({
-  matchProfile,
-  playingProgress,
-  statsType,
-}: UsePlayersStatsArgs) => {
-  const [playersStats, setPlayersStats] = useObjectState<Record<string, PlayersStats>>({})
-  const [playersData, setPlayersData] = useState<PlayersData>({ team1: [], team2: [] })
-
-  const {
-    profileId: matchId,
-    sportName,
-    sportType,
-  } = usePageParams()
-
-  const isCurrentStats = statsType === StatsType.CURRENT_STATS
-
-  const progressSec = Math.floor(playingProgress / 1000)
-
-  const isEmptyPlayersStats = (teamId: number) => (
-    isEmpty(playersStats[teamId])
-      || every(playersStats[teamId], isEmpty)
-      || isEmpty(playersData[matchProfile?.team1.id === teamId ? 'team1' : 'team2'])
-  )
-
-  const fetchPlayers = useMemo(() => throttle((second?: number) => {
-    if (!matchProfile?.team1.id || !matchProfile?.team1.id) return
-
-    try {
-      getMatchParticipants({
-        matchId,
-        second,
-        sportType,
-      }).then((data) => {
-        const team1Players = find(data, { team_id: matchProfile.team1.id })?.players || []
-        const team2Players = find(data, { team_id: matchProfile.team2.id })?.players || []
-
-        setPlayersData({
-          team1: team1Players,
-          team2: team2Players,
-        })
-      })
-
-    // eslint-disable-next-line no-empty
-    } catch (e) {}
-  }, REQUEST_DELAY), [
-    matchId,
-    matchProfile?.team1.id,
-    matchProfile?.team2.id,
-    sportType,
-  ])
-
-  const fetchPlayersStats = useMemo(() => throttle((second?: number) => {
-    if (!sportName || !matchProfile?.team1.id || !matchProfile?.team2.id) return
-
-    try {
-      getPlayersStats({
-        matchId,
-        second,
-        sportName,
-        teamId: matchProfile.team1.id,
-      }).then((data) => setPlayersStats({ [matchProfile.team1.id]: data }))
-
-      getPlayersStats({
-        matchId,
-        second,
-        sportName,
-        teamId: matchProfile.team2.id,
-      }).then((data) => setPlayersStats({ [matchProfile?.team2.id]: data }))
-    // eslint-disable-next-line no-empty
-    } catch (e) {}
-  }, REQUEST_DELAY), [
-    matchId,
-    matchProfile?.team1.id,
-    matchProfile?.team2.id,
-    setPlayersStats,
-    sportName,
-  ])
-
-  useEffect(() => {
-    let interval: NodeJS.Timeout
-
-    fetchPlayers()
-
-    if (!isCurrentStats) {
-      fetchPlayersStats()
-    }
-
-    if (matchProfile?.live) {
-      interval = setInterval(() => {
-        if (isCurrentStats) return
-
-        fetchPlayersStats()
-        fetchPlayers()
-      }, STATS_POLL_INTERVAL)
-    }
-
-    return () => clearInterval(interval)
-  }, [
-    fetchPlayersStats,
-    fetchPlayers,
-    isCurrentStats,
-    matchProfile?.live,
-  ])
-
-  useEffect(() => {
-    if (isCurrentStats) {
-      fetchPlayersStats(progressSec)
-      fetchPlayers(progressSec)
-    }
-  }, [
-    fetchPlayersStats,
-    fetchPlayers,
-    progressSec,
-    isCurrentStats,
-    matchProfile?.live,
-  ])
-
-  return {
-    isEmptyPlayersStats,
-    playersData,
-    playersStats,
-  }
-}

src/features/MatchPage/store/hooks/useStatsTab.tsx

@@ -1,12 +0,0 @@
-import { useState } from 'react'
-
-import { StatsType } from 'features/MatchSidePlaylists/components/TabStats/config'
-
-export const useStatsTab = () => {
-  const [statsType, setStatsType] = useState<StatsType>(StatsType.FINAL_STATS)
-
-  return {
-    setStatsType,
-    statsType,
-  }
-}

src/features/MatchPage/store/hooks/useTeamsStats.tsx

@@ -1,78 +0,0 @@
-import {
-  useEffect,
-  useState,
-  useMemo,
-} from 'react'
-
-import throttle from 'lodash/throttle'
-
-import type { MatchInfo } from 'requests'
-import { getTeamsStats, TeamStatItem } from 'requests'
-
-import { usePageParams } from 'hooks/usePageParams'
-
-import { StatsType } from 'features/MatchSidePlaylists/components/TabStats/config'
-
-const REQUEST_DELAY = 3000
-const STATS_POLL_INTERVAL = 30000
-
-type UseTeamsStatsArgs = {
-  matchProfile: MatchInfo,
-  playingProgress: number,
-  statsType: StatsType,
-}
-
-export const useTeamsStats = ({
-  matchProfile,
-  playingProgress,
-  statsType,
-}: UseTeamsStatsArgs) => {
-  const [teamsStats, setTeamsStats] = useState<{
-    [teamId: string]: Array<TeamStatItem>,
-  }>({})
-
-  const { profileId: matchId, sportName } = usePageParams()
-
-  const progressSec = Math.floor(playingProgress / 1000)
-
-  const isCurrentStats = statsType === StatsType.CURRENT_STATS
-
-  const fetchTeamsStats = useMemo(() => throttle((second?: number) => {
-    if (!sportName) return
-
-    getTeamsStats({
-      matchId,
-      second,
-      sportName,
-    }).then(setTeamsStats)
-  }, REQUEST_DELAY), [matchId, sportName])
-
-  useEffect(() => {
-    let timer: ReturnType<typeof setInterval>
-
-    if (!isCurrentStats) {
-      fetchTeamsStats()
-    }
-
-    if (matchProfile?.live) {
-      timer = setInterval(() => {
-        if (isCurrentStats) return
-
-        fetchTeamsStats()
-      }, STATS_POLL_INTERVAL)
-    }
-
-    return () => clearInterval(timer)
-  }, [fetchTeamsStats, matchProfile?.live, isCurrentStats])
-
-  useEffect(() => {
-    if (isCurrentStats) {
-      fetchTeamsStats(progressSec)
-    }
-  }, [fetchTeamsStats, progressSec, isCurrentStats])
-
-  return {
-    statsType,
-    teamsStats,
-  }
-}

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

@@ -1,8 +1,8 @@
-import type { ForwardedRef } from 'react'
+import { useMemo } from 'react'
-import { forwardRef } from 'react'
 
 import styled, { css } from 'styled-components/macro'
 
+import filter from 'lodash/filter'
 import isEmpty from 'lodash/isEmpty'
 import map from 'lodash/map'
 
@@ -15,8 +15,6 @@ import { T9n } from 'features/T9n'
 
 import { PlayButton } from '../PlayButton'
 
-export const LIST_ITEM_INDENT = 12
-
 type Props = {
   live?: boolean,
   onSelect?: (selectedMathPlaylist: PlaylistOption) => void,
@@ -27,7 +25,7 @@ type Props = {
 const List = styled.ul``
 
 const Item = styled.li`
-  margin-bottom: ${LIST_ITEM_INDENT}px;
+  margin-bottom: 12px;
   width: 100%;
   height: 36px;
   ${isMobileDevice
@@ -38,17 +36,24 @@ const Item = styled.li`
     : ''};
 `
 
-export const MatchPlaylists = forwardRef(
+export const MatchPlaylists = ({
-  ({
+  live,
-    live,
+  onSelect,
-    onSelect,
+  playlists,
-    playlists,
+  selectedMathPlaylist,
-    selectedMathPlaylist,
+}: Props) => {
-  }: Props,
+  const filteredPlayListByDuration = useMemo(() => (
-  ref: ForwardedRef<HTMLUListElement>) => (
+    filter(playlists, (playlist) => (
-    <List ref={ref}>
+      live
+        ? Boolean(playlist.duration) || (playlist.id === 'full_game')
+        : Boolean(playlist.duration)
+    ))
+  ), [playlists, live])
+
+  return (
+    <List>
       {
-        map(playlists, (playlist) => (
+        map(filteredPlayListByDuration, (playlist) => (
           <Item key={playlist.id}>
             <PlayButton
               duration={playlist.duration}
@@ -63,5 +68,5 @@ export const MatchPlaylists = forwardRef(
         ))
       }
     </List>
-  ),
+  )
-)
+}

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

@@ -15,10 +15,12 @@ import type {
 } from 'features/MatchPage/types'
 
 import { Name } from 'features/Name'
+import { T9n } from 'features/T9n'
 
 import { isEqual } from '../../helpers'
 
 import { PlayButton } from '../PlayButton'
+import { BlockTitle } from '../../styled'
 import {
   Wrapper,
   List,
@@ -56,6 +58,9 @@ export const PlayersPlaylists = ({
 
   return (
     <Wrapper>
+      <BlockTitle>
+        <T9n t='players_episodes' />
+      </BlockTitle>
       <Tabs>
         <Tab
           active={selectedTeam === Teams.TEAM1}

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

@@ -28,8 +28,9 @@ export const PlayerAvatar = styled(ProfileLogo)`
 `
 
 export const Tabs = styled.div`
-  margin-top: -10px;
+  display: flex;
-  margin-bottom: 6px;
+  margin-top: 4px;
+  margin-bottom: 8px;
 `
 
 type TabProps = {

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

@@ -1,6 +0,0 @@
-export const PARAM_COLUMN_WIDTH = 50
-export const REQUEST_DELAY = 3000
-export const STATS_POLL_INTERVAL = 30000
-export const DISPLAYED_PARAMS_COLUMNS = 4
-export const FIRST_COLUMN_WIDTH_DEFAULT = 100
-export const SCROLLBAR_WIDTH = 8

src/features/MatchSidePlaylists/components/PlayersTable/hooks/index.tsx

@@ -1,58 +0,0 @@
-import { useState } from 'react'
-
-import type { SortCondition, PlayersTableProps } from '../types'
-import { usePlayers } from './usePlayers'
-import { useTable } from './useTable'
-
-export const usePlayersTable = ({ teamId }: PlayersTableProps) => {
-  const [sortCondition, setSortCondition] = useState<SortCondition>({ dir: 'asc', paramId: null })
-
-  const {
-    getFullName,
-    getPlayerParams,
-    players,
-  } = usePlayers({ sortCondition, teamId })
-
-  const {
-    containerRef,
-    firstColumnWidth,
-    getDisplayedValue,
-    handleScroll,
-    handleSortClick,
-    isExpanded,
-    paramColumnWidth,
-    params,
-    showExpandButton,
-    showLeftArrow,
-    showRightArrow,
-    slideLeft,
-    slideRight,
-    tableWrapperRef,
-    toggleIsExpanded,
-  } = useTable({
-    setSortCondition,
-    teamId,
-  })
-
-  return {
-    containerRef,
-    firstColumnWidth,
-    getDisplayedValue,
-    getFullName,
-    getPlayerParams,
-    handleScroll,
-    handleSortClick,
-    isExpanded,
-    paramColumnWidth,
-    params,
-    players,
-    showExpandButton,
-    showLeftArrow,
-    showRightArrow,
-    slideLeft,
-    slideRight,
-    sortCondition,
-    tableWrapperRef,
-    toggleIsExpanded,
-  }
-}

src/features/MatchSidePlaylists/components/PlayersTable/hooks/usePlayers.tsx

@@ -1,83 +0,0 @@
-import { useMemo, useCallback } from 'react'
-
-import orderBy from 'lodash/orderBy'
-import isNil from 'lodash/isNil'
-import trim from 'lodash/trim'
-
-import type { Player, PlayerParam } from 'requests'
-
-import { useToggle } from 'hooks'
-
-import { useMatchPageStore } from 'features/MatchPage/store'
-import { useLexicsStore } from 'features/LexicsStore'
-
-import type { SortCondition } from '../types'
-
-type UsePlayersArgs = {
-  sortCondition: SortCondition,
-  teamId: number,
-}
-
-export const usePlayers = ({ sortCondition, teamId }: UsePlayersArgs) => {
-  const { isOpen: isExpanded, toggle: toggleIsExpanded } = useToggle()
-  const {
-    playersData,
-    playersStats,
-    profile: matchProfile,
-  } = useMatchPageStore()
-  const { suffix } = useLexicsStore()
-
-  const getPlayerParams = useCallback(
-    (playerId: number) => playersStats[teamId][playerId] || {},
-    [playersStats, teamId],
-  )
-
-  const getDisplayedValue = ({ val }: PlayerParam) => (isNil(val) ? '-' : val)
-
-  const getFullName = useCallback((player: Player) => (
-    trim(`${player[`firstname_${suffix}`]} ${player[`lastname_${suffix}`]}`)
-  ), [suffix])
-
-  const getParamValue = useCallback((playerId: number, paramId: number) => {
-    const playerParams = getPlayerParams(playerId)
-    const { val } = playerParams[paramId] || {}
-
-    return val
-  }, [getPlayerParams])
-
-  const sortedPlayers = useMemo(() => {
-    const players = playersData[matchProfile?.team1.id === teamId ? 'team1' : 'team2']
-
-    return isNil(sortCondition.paramId)
-      ? orderBy(players, getFullName)
-      : orderBy(
-        players,
-        [
-          (player) => {
-            const paramValue = getParamValue(player.id, sortCondition.paramId!)
-
-            return isNil(paramValue) ? -1 : paramValue
-          },
-          getFullName,
-        ],
-        sortCondition.dir,
-      )
-  }, [
-    getFullName,
-    getParamValue,
-    playersData,
-    matchProfile?.team1.id,
-    sortCondition.dir,
-    sortCondition.paramId,
-    teamId,
-  ])
-
-  return {
-    getDisplayedValue,
-    getFullName,
-    getPlayerParams,
-    isExpanded,
-    players: sortedPlayers,
-    toggleIsExpanded,
-  }
-}

src/features/MatchSidePlaylists/components/PlayersTable/hooks/useTable.tsx

@@ -1,171 +0,0 @@
-import type {
-  SyntheticEvent,
-  Dispatch,
-  SetStateAction,
-} from 'react'
-import {
-  useRef,
-  useState,
-  useEffect,
-  useMemo,
-} from 'react'
-
-import size from 'lodash/size'
-import isNil from 'lodash/isNil'
-import reduce from 'lodash/reduce'
-import forEach from 'lodash/forEach'
-import values from 'lodash/values'
-import round from 'lodash/round'
-import map from 'lodash/map'
-
-import { isMobileDevice } from 'config'
-
-import type { PlayerParam, PlayersStats } from 'requests'
-
-import { useToggle } from 'hooks'
-
-import { useMatchPageStore } from 'features/MatchPage/store'
-import { useLexicsConfig } from 'features/LexicsStore'
-
-import type { SortCondition } from '../types'
-import {
-  PARAM_COLUMN_WIDTH,
-  DISPLAYED_PARAMS_COLUMNS,
-  FIRST_COLUMN_WIDTH_DEFAULT,
-  SCROLLBAR_WIDTH,
-} from '../config'
-
-type UseTableArgs = {
-  setSortCondition: Dispatch<SetStateAction<SortCondition>>,
-  teamId: number,
-}
-
-type HeaderParam = Pick<PlayerParam, 'id' | 'lexica_short' | 'lexic'>
-
-export const useTable = ({
-  setSortCondition,
-  teamId,
-}: UseTableArgs) => {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const tableWrapperRef = useRef<HTMLDivElement>(null)
-
-  const [showLeftArrow, setShowLeftArrow] = useState(false)
-  const [showRightArrow, setShowRightArrow] = useState(false)
-
-  const { isOpen: isExpanded, toggle: toggleIsExpanded } = useToggle()
-  const { playersStats } = useMatchPageStore()
-
-  const params = useMemo(() => (
-    reduce<PlayersStats, Record<string, HeaderParam>>(
-      playersStats[teamId],
-      (acc, curr) => {
-        forEach(values(curr), ({
-          id,
-          lexic,
-          lexica_short,
-        }) => {
-          acc[id] = acc[id] || {
-            id,
-            lexic,
-            lexica_short,
-          }
-        })
-
-        return acc
-      },
-      {},
-    )
-  ), [playersStats, teamId])
-
-  const lexics = useMemo(() => (
-    reduce<HeaderParam, Array<number>>(
-      values(params),
-      (acc, { lexic, lexica_short }) => {
-        if (lexic) acc.push(lexic)
-        if (lexica_short) acc.push(lexica_short)
-
-        return acc
-      },
-      [],
-    )
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  ), [map(params, 'id').sort().join('')])
-
-  useLexicsConfig(lexics)
-
-  const paramsCount = size(params)
-
-  const getParamColumnWidth = () => {
-    const rest = (
-      (containerRef.current?.clientWidth || 0) - FIRST_COLUMN_WIDTH_DEFAULT - SCROLLBAR_WIDTH
-    )
-    const desktopWith = PARAM_COLUMN_WIDTH
-    const mobileWidth = paramsCount < DISPLAYED_PARAMS_COLUMNS ? 0 : rest / DISPLAYED_PARAMS_COLUMNS
-
-    return isMobileDevice ? mobileWidth : desktopWith
-  }
-
-  const getFirstColumnWidth = () => {
-    if (isExpanded) return 0
-
-    return paramsCount < DISPLAYED_PARAMS_COLUMNS ? 0 : FIRST_COLUMN_WIDTH_DEFAULT
-  }
-
-  const paramColumnWidth = getParamColumnWidth()
-  const firstColumnWidth = getFirstColumnWidth()
-
-  const slideLeft = () => tableWrapperRef.current?.scrollBy(-paramColumnWidth, 0)
-  const slideRight = () => tableWrapperRef.current?.scrollBy(paramColumnWidth, 0)
-
-  const getDisplayedValue = ({ val }: PlayerParam) => (isNil(val) ? '-' : round(val, 2))
-
-  const handleScroll = (e: SyntheticEvent<HTMLDivElement>) => {
-    const {
-      clientWidth,
-      scrollLeft,
-      scrollWidth,
-    } = e.currentTarget
-
-    const scrollRight = scrollWidth - (scrollLeft + clientWidth)
-
-    setShowLeftArrow(scrollLeft > 0)
-    setShowRightArrow(scrollRight > 0)
-  }
-
-  const handleSortClick = (paramId: number) => () => {
-    setSortCondition((curr) => ({
-      dir: curr.dir === 'asc' || curr.paramId !== paramId ? 'desc' : 'asc',
-      paramId,
-    }))
-  }
-
-  useEffect(() => {
-    const {
-      clientWidth = 0,
-      scrollLeft = 0,
-      scrollWidth = 0,
-    } = tableWrapperRef.current || {}
-
-    const scrollRight = scrollWidth - (scrollLeft + clientWidth)
-
-    setShowRightArrow(scrollRight > 0)
-  }, [isExpanded])
-
-  return {
-    containerRef,
-    firstColumnWidth,
-    getDisplayedValue,
-    handleScroll,
-    handleSortClick,
-    isExpanded,
-    paramColumnWidth,
-    params,
-    showExpandButton: !isMobileDevice && paramsCount > DISPLAYED_PARAMS_COLUMNS,
-    showLeftArrow,
-    showRightArrow,
-    slideLeft,
-    slideRight,
-    tableWrapperRef,
-    toggleIsExpanded,
-  }
-}

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

@@ -1,166 +1,243 @@
-import { Fragment } from 'react'
-
-import map from 'lodash/map'
-import includes from 'lodash/includes'
-
-import { PlayerParam } from 'requests'
-
-import { T9n } from 'features/T9n'
-
-import type { PlayersTableProps } from './types'
-import { usePlayersTable } from './hooks'
 import {
-  Container,
-  TableWrapper,
   Table,
-  FirstColumn,
+  Thead,
-  Cell,
+  Th,
-  Row,
+  Tbody,
+  Tr,
+  Td,
   PlayerNum,
-  PlayerNameWrapper,
-  PlayerName,
   ParamShortTitle,
-  ArrowButtonRight,
-  ArrowButtonLeft,
-  Arrow,
-  ExpandButton,
-  Tooltip,
 } from './styled'
 
-export const PlayersTable = (props: PlayersTableProps) => {
+export const PlayersTable = () => (
-  const {
+  <Table>
-    containerRef,
+    <Thead>
-    firstColumnWidth,
+      <Th />
-    getDisplayedValue,
+      <Th>
-    getFullName,
+        <ParamShortTitle>Min</ParamShortTitle>
-    getPlayerParams,
+      </Th>
-    handleScroll,
+      <Th sorted>
-    handleSortClick,
+        <ParamShortTitle>Pt</ParamShortTitle>
-    isExpanded,
+      </Th>
-    paramColumnWidth,
+      <Th>
-    params,
+        <ParamShortTitle>Reb</ParamShortTitle>
-    players,
+      </Th>
-    showExpandButton,
+      <Th>
-    showLeftArrow,
+        <ParamShortTitle>Ass</ParamShortTitle>
-    showRightArrow,
+      </Th>
-    slideLeft,
+      <Th>
-    slideRight,
+        <ParamShortTitle>To</ParamShortTitle>
-    sortCondition,
+      </Th>
-    tableWrapperRef,
+    </Thead>
-    toggleIsExpanded,
+    <Tbody>
-  } = usePlayersTable(props)
+      <Tr>
-
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
-  return (
+        <Td clickable>97</Td>
-    <Container
+        <Td sorted>12</Td>
-      ref={containerRef}
+        <Td>2</Td>
-      isExpanded={isExpanded}
+        <Td>1</Td>
-    >
+        <Td>4</Td>
-      <TableWrapper
+      </Tr>
-        ref={tableWrapperRef}
+      <Tr>
-        isExpanded={isExpanded}
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
-        onScroll={handleScroll}
+        <Td clickable>97</Td>
-      >
+        <Td sorted>12</Td>
-        {!isExpanded && (
+        <Td>2</Td>
-          <Fragment>
+        <Td>1</Td>
-            {showLeftArrow && (
+        <Td>4</Td>
-              <ArrowButtonLeft
+      </Tr>
-                aria-label='Scroll to left'
+      <Tr>
-                onClick={slideLeft}
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
-              >
+        <Td clickable>97</Td>
-                <Arrow direction='left' />
+        <Td sorted>12</Td>
-              </ArrowButtonLeft>
+        <Td>2</Td>
-            )}
+        <Td>1</Td>
-            {showRightArrow && (
+        <Td>4</Td>
-              <ArrowButtonRight
+      </Tr>
-                aria-label='Scroll to right'
+      <Tr>
-                onClick={slideRight}
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
-              >
+        <Td clickable>97</Td>
-                <Arrow direction='right' />
+        <Td sorted>12</Td>
-              </ArrowButtonRight>
+        <Td>2</Td>
-            )}
+        <Td>1</Td>
-          </Fragment>
+        <Td>4</Td>
-        )}
+      </Tr>
-        <FirstColumn columnWidth={firstColumnWidth}>
+      <Tr>
-          <Row>
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
-            <Cell>
+        <Td clickable>97</Td>
-              {showExpandButton && (
+        <Td sorted>12</Td>
-                <ExpandButton
+        <Td>2</Td>
-                  aria-label={isExpanded ? 'Reduce' : 'Expand'}
+        <Td>1</Td>
-                  onClick={toggleIsExpanded}
+        <Td>4</Td>
-                >
+      </Tr>
-                  <Arrow direction={isExpanded ? 'right' : 'left'} />
+      <Tr>
-                  <Arrow direction={isExpanded ? 'right' : 'left'} />
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
-                </ExpandButton>
+        <Td clickable>97</Td>
-              )}
+        <Td sorted>12</Td>
-            </Cell>
+        <Td>2</Td>
-          </Row>
+        <Td>1</Td>
-          {map(players, (player) => {
+        <Td>4</Td>
-            const fullName = getFullName(player)
+      </Tr>
-
+      <Tr>
-            return (
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
-              <Row key={player.id}>
+        <Td clickable>97</Td>
-                <Cell>
+        <Td sorted>12</Td>
-                  <PlayerNum>
+        <Td>2</Td>
-                    {player.club_shirt_num}
+        <Td>1</Td>
-                  </PlayerNum>{' '}
+        <Td>4</Td>
-                  <PlayerNameWrapper>
+      </Tr>
-                    <PlayerName columnWidth={firstColumnWidth}>
+      <Tr>
-                      {fullName}
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
-                    </PlayerName>
+        <Td clickable>97</Td>
-                    <Tooltip>
+        <Td sorted>12</Td>
-                      <PlayerName>{fullName}</PlayerName>
+        <Td>2</Td>
-                    </Tooltip>
+        <Td>1</Td>
-                  </PlayerNameWrapper>
+        <Td>4</Td>
-                </Cell>
+      </Tr>
-              </Row>
+      <Tr>
-            )
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
-          })}
+        <Td clickable>97</Td>
-        </FirstColumn>
+        <Td sorted>12</Td>
-        <Table>
+        <Td>2</Td>
-          <Row>
+        <Td>1</Td>
-            {map(params, ({
+        <Td>4</Td>
-              id,
+      </Tr>
-              lexic,
+      <Tr>
-              lexica_short,
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
-            }) => (
+        <Td clickable>97</Td>
-              <Cell
+        <Td sorted>12</Td>
-                key={id}
+        <Td>2</Td>
-                columnWidth={paramColumnWidth}
+        <Td>1</Td>
-                onClick={handleSortClick(id)}
+        <Td>4</Td>
-                sorted={sortCondition.paramId === id}
+      </Tr>
-                headerCell
+      <Tr>
-              >
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
-                <ParamShortTitle t={lexica_short || ''} />
+        <Td clickable>97</Td>
-                <Tooltip>
+        <Td sorted>12</Td>
-                  <T9n t={lexic} />
+        <Td>2</Td>
-                </Tooltip>
+        <Td>1</Td>
-              </Cell>
+        <Td>4</Td>
-            ))}
+      </Tr>
-          </Row>
+      <Tr>
-
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
-          {map(players, (player) => (
+        <Td clickable>97</Td>
-            <Row key={player.id}>
+        <Td sorted>12</Td>
-              {map(params, ({ id }) => {
+        <Td>2</Td>
-                const playerParam = getPlayerParams(player.id)[id] as PlayerParam | undefined
+        <Td>1</Td>
-                const value = playerParam ? getDisplayedValue(playerParam) : '-'
+        <Td>4</Td>
-                const clickable = Boolean(playerParam?.clickable) && !includes([0, '-'], value)
+      </Tr>
-                const sorted = sortCondition.paramId === id
+      <Tr>
-
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
-                return (
+        <Td clickable>97</Td>
-                  <Cell
+        <Td sorted>12</Td>
-                    columnWidth={paramColumnWidth}
+        <Td>2</Td>
-                    key={id}
+        <Td>1</Td>
-                    clickable={clickable}
+        <Td>4</Td>
-                    sorted={sorted}
+      </Tr>
-                  >
+      <Tr>
-                    {value}
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
-                  </Cell>
+        <Td clickable>97</Td>
-                )
+        <Td sorted>12</Td>
-              })}
+        <Td>2</Td>
-            </Row>
+        <Td>1</Td>
-          ))}
+        <Td>4</Td>
-        </Table>
+      </Tr>
-      </TableWrapper>
+      <Tr>
-    </Container>
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
-  )
+        <Td clickable>97</Td>
-}
+        <Td sorted>12</Td>
+        <Td>2</Td>
+        <Td>1</Td>
+        <Td>4</Td>
+      </Tr>
+      <Tr>
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
+        <Td clickable>97</Td>
+        <Td sorted>12</Td>
+        <Td>2</Td>
+        <Td>1</Td>
+        <Td>4</Td>
+      </Tr>
+      <Tr>
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
+        <Td clickable>97</Td>
+        <Td sorted>12</Td>
+        <Td>2</Td>
+        <Td>1</Td>
+        <Td>4</Td>
+      </Tr>
+      <Tr>
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
+        <Td clickable>97</Td>
+        <Td sorted>12</Td>
+        <Td>2</Td>
+        <Td>1</Td>
+        <Td>4</Td>
+      </Tr>
+      <Tr>
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
+        <Td clickable>97</Td>
+        <Td sorted>12</Td>
+        <Td>2</Td>
+        <Td>1</Td>
+        <Td>4</Td>
+      </Tr>
+      <Tr>
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
+        <Td clickable>97</Td>
+        <Td sorted>12</Td>
+        <Td>2</Td>
+        <Td>1</Td>
+        <Td>4</Td>
+      </Tr>
+      <Tr>
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
+        <Td clickable>97</Td>
+        <Td sorted>12</Td>
+        <Td>2</Td>
+        <Td>1</Td>
+        <Td>4</Td>
+      </Tr>
+      <Tr>
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
+        <Td clickable>97</Td>
+        <Td sorted>12</Td>
+        <Td>2</Td>
+        <Td>1</Td>
+        <Td>4</Td>
+      </Tr>
+      <Tr>
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
+        <Td clickable>97</Td>
+        <Td sorted>12</Td>
+        <Td>2</Td>
+        <Td>1</Td>
+        <Td>4</Td>
+      </Tr>
+      <Tr>
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
+        <Td clickable>97</Td>
+        <Td sorted>12</Td>
+        <Td>2</Td>
+        <Td>1</Td>
+        <Td>4</Td>
+      </Tr>
+      <Tr>
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
+        <Td clickable>97</Td>
+        <Td sorted>12</Td>
+        <Td>2</Td>
+        <Td>1</Td>
+        <Td>4</Td>
+      </Tr>
+      <Tr>
+        <Td><PlayerNum>57</PlayerNum> Selikhov</Td>
+        <Td clickable>97</Td>
+        <Td sorted>12</Td>
+        <Td>2</Td>
+        <Td>1</Td>
+        <Td>4</Td>
+      </Tr>
+    </Tbody>
+  </Table>
+)

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

@@ -1,133 +1,72 @@
 import styled, { css } from 'styled-components/macro'
 
-import { isMobileDevice } from 'config'
-
 import { customScrollbar } from 'features/Common'
-import { TooltipWrapper } from 'features/Tooltip'
-import {
-  ArrowButton as ArrowButtonBase,
-  Arrow as ArrowBase,
-} from 'features/HeaderFilters/components/DateFilter/styled'
-import { T9n } from 'features/T9n'
-
-type ContainerProps = {
-  isExpanded?: boolean,
-}
-
-export const Container = styled.div<ContainerProps>`
-  ${({ isExpanded }) => (isExpanded
-    ? ''
-    : css`
-        position: relative;
-    `)}
-`
 
-type TableWrapperProps = {
+export const Table = styled.table`
-  isExpanded?: boolean,
+  width: 100%;
-}
-
-export const TableWrapper = styled.div<TableWrapperProps>`
-  display: flex;
-  max-width: 100%;
-  max-height: calc(100vh - 235px);
   border-radius: 5px;
-  overflow-x: auto;
+  border-collapse: collapse; 
-  scroll-behavior: smooth;
+  letter-spacing: -0.078px;
   background-color: #333333;
-  z-index: 50;
+  table-layout: fixed;
-  ${customScrollbar}
 
-  ${({ isExpanded }) => (isExpanded
+  ${customScrollbar}
-    ? css`
-        position: absolute;
-        right: 14px;
-      `
-    : '')}
 `
 
-export const Table = styled.div`
+export const Thead = styled.thead`
-  flex-grow: 1;
+  height: 45px;
-  border-radius: 5px;
+  border-bottom: 0.5px solid rgba(255, 255, 255, 0.5);
-  border-collapse: collapse; 
-  letter-spacing: -0.078px;
 `
 
-export const Tooltip = styled(TooltipWrapper)`
+type ThProps = {
-  left: auto;
+  sorted?: boolean,
-  padding: 2px 10px;
+}
-  border-radius: 6px;
+
-  transform: none;
+export const Th = styled.th<ThProps>`
   font-size: 11px;
-  line-height: 1;
+  color: ${({ theme }) => theme.colors.white};
-  color: ${({ theme }) => theme.colors.black};
+  text-transform: uppercase;
 
-  ::before {
+  :first-child {
-    display: none;
+    width: 115px;
   }
-`
 
-export const ParamShortTitle = styled(T9n)`
+  ${({ sorted }) => (sorted
-  text-transform: uppercase;
+    ? ''
+    : css`
+         opacity: 0.5;
+      `)}
 `
 
-export const Row = styled.div`
+export const ParamShortTitle = styled.span``
-  display: flex;
+
-  width: 100%;
+export const Tbody = styled.tbody``
+
+export const Tr = styled.tr`
   height: 45px;
   border-bottom: 0.5px solid rgba(255, 255, 255, 0.5);
 
-  :first-child {
+  :last-child {
-    position: sticky;
+    border-bottom: none;
-    left: 0;
-    top: 0;
-    z-index: 1;
   }
 `
 
 type TdProps = {
   clickable?: boolean,
-  columnWidth?: number,
-  headerCell?: boolean,
   sorted?: boolean,
 }
 
-export const Cell = styled.div.attrs(({ clickable }: TdProps) => ({
+export const Td = styled.td<TdProps>`
-  ...clickable && { tabIndex: 0 },
-}))<TdProps>`
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  width: ${({ columnWidth }) => (columnWidth ? `${columnWidth}px` : 'auto')};
   font-size: 11px;
-  color: ${({
+  text-align: center;
-    clickable,
+  color: ${({ clickable, theme }) => (clickable ? '#5EB2FF' : theme.colors.white)};
-    headerCell,
-    theme,
-  }) => (clickable && !headerCell ? '#5EB2FF' : theme.colors.white)};
-  white-space: nowrap;
-  background-color: #333333;
 
-  ${Tooltip} {
+  :first-child {
-    top: 35px;
+    padding-left: 13px;
+    text-align: left;
+    color: ${({ theme }) => theme.colors.white};
   }
 
-  :hover {
-    ${Tooltip} {
-      display: block;
-    }
-  }
-
-  ${({ headerCell }) => (headerCell
-    ? ''
-    : css`
-      :first-child {
-        justify-content: unset;
-        padding-left: 13px;
-        color: ${({ theme }) => theme.colors.white};
-      }
-    `)}
 
   ${({ sorted }) => (sorted
     ? css`
@@ -135,107 +74,13 @@ export const Cell = styled.div.attrs(({ clickable }: TdProps) => ({
       `
     : '')}
 
-  ${({ clickable, headerCell }) => (clickable || headerCell
+  ${({ clickable }) => (clickable
     ? css`
          cursor: pointer;
       `
     : '')}
 `
 
-type FirstColumnProps = {
-  columnWidth?: number,
-}
-
-export const FirstColumn = styled.div<FirstColumnProps>`
-  position: sticky;
-  left: 0;
-  width: ${({ columnWidth }) => (columnWidth ? `${columnWidth}px` : 'auto')};
-`
-
 export const PlayerNum = styled.span`
-  display: inline-block;
-  width: 20px;
-  flex-shrink: 0;
-  text-align: center;
   color: rgba(255, 255, 255, 0.5);
 `
-
-type PlayerNameProps = {
-  columnWidth?: number,
-}
-
-export const PlayerName = styled.span<PlayerNameProps>`
-  display: inline-block;
-  margin-top: 2px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-
-  ${({ columnWidth }) => (columnWidth
-    ? css`
-         max-width: calc(${columnWidth}px - 31px);
-      `
-    : css`
-         max-width: 110px;
-      `)}
-`
-
-export const PlayerNameWrapper = styled.span`
-  position: relative;
-
-  ${Tooltip} {
-    top: 15px;
-  }
-
-  :hover {
-    ${Tooltip} {
-      display: block;
-    }
-  }
-`
-
-const ArrowButton = styled(ArrowButtonBase)`
-  position: absolute;
-  width: 17px;
-  margin-top: 2px;
-  background-color: #333333;
-  z-index: 3;
-
-  ${isMobileDevice
-    ? css`
-      height: 45px;
-      margin-top: 0;
-    `
-    : ''};
-`
-
-export const ArrowButtonRight = styled(ArrowButton)`
-  right: 0;
-`
-
-export const ArrowButtonLeft = styled(ArrowButton)`
-  left: 75px;
-`
-
-export const Arrow = styled(ArrowBase)`
-  width: 10px;
-  height: 10px;
-
-  ${isMobileDevice
-    ? css`
-      border-color: ${({ theme }) => theme.colors.white};
-    `
-    : ''};  
-`
-
-export const ExpandButton = styled(ArrowButton)`
-  left: 20px;
-  top: 0;
-
-  ${Arrow} {
-    left: 0;
-    
-    :last-child {
-      margin-left: 7px;
-    }
-  }
-`

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

@@ -1,8 +0,0 @@
-export type PlayersTableProps = {
-  teamId: number,
-}
-
-export type SortCondition = {
-  dir: 'asc' | 'desc',
-  paramId: number | null,
-}

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

@@ -3,8 +3,3 @@ export enum Tabs {
   TEAM1,
   TEAM2,
 }
-
-export enum StatsType {
-  FINAL_STATS,
-  CURRENT_STATS,
-}

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

@@ -1,68 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import isEmpty from 'lodash/isEmpty'
-
-import { useMatchPageStore } from 'features/MatchPage/store'
-
-import { StatsType, Tabs } from './config'
-
-export const useTabStats = () => {
-  const [selectedTab, setSelectedTab] = useState<Tabs>(Tabs.TEAMS)
-
-  const {
-    isEmptyPlayersStats,
-    profile: matchProfile,
-    setStatsType,
-    statsType,
-    teamsStats,
-  } = useMatchPageStore()
-
-  const isFinalStatsType = statsType === StatsType.FINAL_STATS
-
-  const switchTitleLexic = isFinalStatsType ? 'final_stats' : 'current_stats'
-  const tooltipLexic = isFinalStatsType ? 'display_all_stats' : 'display_stats_according_to_video'
-
-  const isVisibleTeamsTab = !isEmpty(teamsStats)
-  const isVisibleTeam1PlayersTab = Boolean(
-    matchProfile && !isEmptyPlayersStats(matchProfile.team1.id),
-  )
-  const isVisibleTeam2PlayersTab = Boolean(
-    matchProfile && !isEmptyPlayersStats(matchProfile.team2.id),
-  )
-
-  const toggleStatsType = () => {
-    const newStatsType = isFinalStatsType ? StatsType.CURRENT_STATS : StatsType.FINAL_STATS
-
-    setStatsType(newStatsType)
-  }
-
-  useEffect(() => {
-    switch (true) {
-      case isVisibleTeamsTab:
-        setSelectedTab(Tabs.TEAMS)
-        break
-
-      case isVisibleTeam1PlayersTab:
-        setSelectedTab(Tabs.TEAM1)
-        break
-
-      case isVisibleTeam2PlayersTab:
-        setSelectedTab(Tabs.TEAM2)
-        break
-
-      default:
-    }
-  }, [isVisibleTeam1PlayersTab, isVisibleTeam2PlayersTab, isVisibleTeamsTab])
-
-  return {
-    isFinalStatsType,
-    isVisibleTeam1PlayersTab,
-    isVisibleTeam2PlayersTab,
-    isVisibleTeamsTab,
-    selectedTab,
-    setSelectedTab,
-    switchTitleLexic,
-    toggleStatsType,
-    tooltipLexic,
-  }
-}

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

@@ -1,16 +1,7 @@
-import { isMobileDevice } from 'config/userAgent'
-
-import { getTeamAbbr } from 'helpers'
-
 import { Tooltip } from 'features/Tooltip'
-import { T9n } from 'features/T9n'
-import { useMatchPageStore } from 'features/MatchPage/store'
-import { Name } from 'features/Name'
 
-import { Tabs } from './config'
-import { useTabStats } from './hooks'
 import { PlayersTable } from '../PlayersTable'
-import { TeamsStatsTable } from '../TeamsStatsTable'
+import { TeamsStats } from '../TeamsStats'
 
 import {
   Container,
@@ -22,82 +13,22 @@ import {
   SwitchButton,
 } from './styled'
 
-const tabPanes = {
+export const TabStats = () => (
-  [Tabs.TEAMS]: TeamsStatsTable,
+  <Container>
-  [Tabs.TEAM1]: PlayersTable,
+    <Header>
-  [Tabs.TEAM2]: PlayersTable,
+      <TabList>
-}
+        <Tab selected>Teams</Tab>
-
+        <Tab>DIN</Tab>
-export const TabStats = () => {
+        <Tab>SPA</Tab>
-  const {
+      </TabList>
-    isFinalStatsType,
+      <Switch>
-    isVisibleTeam1PlayersTab,
+        <SwitchTitle>Final Stats</SwitchTitle>
-    isVisibleTeam2PlayersTab,
+        <SwitchButton>
-    isVisibleTeamsTab,
+          <Tooltip lexic='others' />
-    selectedTab,
+        </SwitchButton>
-    setSelectedTab,
+      </Switch>
-    switchTitleLexic,
+    </Header>
-    toggleStatsType,
+    <PlayersTable />
-    tooltipLexic,
+    {/* <TeamsStats /> */}
-  } = useTabStats()
+  </Container>
-  const { profile: matchProfile } = useMatchPageStore()
+)
-
-  const TabPane = tabPanes[selectedTab]
-
-  if (!matchProfile) return null
-
-  const { team1, team2 } = matchProfile
-
-  return (
-    <Container>
-      <Header>
-        <TabList>
-          {isVisibleTeamsTab && (
-            <Tab
-              aria-pressed={selectedTab === Tabs.TEAMS}
-              onClick={() => setSelectedTab(Tabs.TEAMS)}
-            >
-              <T9n t='team' />
-            </Tab>
-          )}
-          {isVisibleTeam1PlayersTab && (
-            <Tab
-              aria-pressed={selectedTab === Tabs.TEAM1}
-              onClick={() => setSelectedTab(Tabs.TEAM1)}
-            >
-              <Name nameObj={{
-                name_eng: team1.abbrev_eng || getTeamAbbr(team1.name_eng),
-                name_rus: team1.abbrev_rus || getTeamAbbr(team1.name_rus),
-              }}
-              />
-            </Tab>
-          )}
-          {isVisibleTeam2PlayersTab && (
-            <Tab
-              aria-pressed={selectedTab === Tabs.TEAM2}
-              onClick={() => setSelectedTab(Tabs.TEAM2)}
-            >
-              <Name nameObj={{
-                name_eng: team2.abbrev_eng || getTeamAbbr(team2.name_eng),
-                name_rus: team2.abbrev_rus || getTeamAbbr(team2.name_rus),
-              }}
-              />
-            </Tab>
-          )}
-        </TabList>
-        <Switch>
-          <SwitchTitle t={switchTitleLexic} />
-          <SwitchButton
-            isFinalStatsType={isFinalStatsType}
-            onClick={toggleStatsType}
-          >
-            {!isMobileDevice && <Tooltip lexic={tooltipLexic} />}
-          </SwitchButton>
-        </Switch>
-      </Header>
-      <TabPane
-        teamId={selectedTab === Tabs.TEAM1 ? team1.id : team2.id}
-      />
-    </Container>
-  )
-}

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

@@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components/macro'
 
 import { TooltipWrapper } from 'features/Tooltip'
-import { T9n } from 'features/T9n'
 
 export const Container = styled.div``
 
@@ -15,40 +14,42 @@ export const TabList = styled.div.attrs({ role: 'tablist' })`
   display: flex;
 `
 
-export const Tab = styled.button.attrs({ role: 'tab' })`
+type TabProps = {
+  selected?: boolean,
+}
+
+export const Tab = styled.div.attrs(({ selected }: TabProps) => ({
+  'aria-pressed': selected,
+  role: 'tab',
+}))<TabProps>`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 10px 10px;
+  padding: 0 15px 10px;
   font-size: 12px;
   color: ${({ theme }) => theme.colors.white};
-  opacity: 0.4;
+  opacity: ${({ selected }) => (selected ? '1' : '0.4')};
   cursor: pointer;
-  border: none;
-  background: none;
   border-bottom: 2px solid transparent;
 
-  &[aria-pressed="true"] {
+
-    opacity: 1;
+  ${({ selected, theme }) => (selected
-    border-color: currentColor;
+    ? css`
-  }
+         border-color: ${theme.colors.white};
+      `
+    : '')}
 `
 
 export const Switch = styled.div`
   display: flex;
 `
 
-export const SwitchTitle = styled(T9n)`
+export const SwitchTitle = styled.span`
   font-size: 12px;
   color: ${({ theme }) => theme.colors.white};
-  white-space: nowrap;
 `
 
-type SwitchButtonProps = {
+export const SwitchButton = styled.button`
-  isFinalStatsType: boolean,
-}
-
-export const SwitchButton = styled.button<SwitchButtonProps>`
   position: relative;
   width: 20px;
   height: 7px;
@@ -62,12 +63,9 @@ export const SwitchButton = styled.button<SwitchButtonProps>`
   ${TooltipWrapper} {
     left: auto;
     right: 0;
-    top: 15px;
     padding: 2px 10px;
     border-radius: 6px;
     transform: none;
-    font-size: 11px;
-    line-height: 1;
 
     ::before {
       display: none;
@@ -80,7 +78,7 @@ export const SwitchButton = styled.button<SwitchButtonProps>`
     }
   }
 
-  ${({ isFinalStatsType, theme }) => (!isFinalStatsType
+  ${({ theme }) => (true // Позже будет добавлен пропс
     ? css`
         background-image: linear-gradient(
           to right,

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

@@ -23,15 +23,13 @@ import { VideoDate } from './components/VideoDate'
 import { MatchesWrapper } from './styled'
 
 type Props = {
-  additionalScrollHeight: number,
   profile: MatchInfo,
   tournamentData: TournamentData,
 }
 
 const formatDate = (date: Date) => format(date, 'yyyy-MM-dd')
 
-export const Matches = ({
+export const TabVideo = ({
-  additionalScrollHeight,
   profile,
   tournamentData,
 }: Props) => {
@@ -77,7 +75,7 @@ export const Matches = ({
     const hasScroll = scrollHeight > clientHeight
 
     setOverflow(hasScroll)
-  }, [ref.current?.clientHeight, selectedDate])
+  }, [ref, selectedDate])
 
   if (tournamentData.matches.length <= 1) return null
 
@@ -90,11 +88,7 @@ export const Matches = ({
         profileDate={profileDate}
         onDateClick={setSelectedDate}
       />
-      <MatchesWrapper
+      <MatchesWrapper ref={ref} hasScroll={overflow}>
-        ref={ref}
-        hasScroll={overflow}
-        additionalScrollHeight={additionalScrollHeight}
-      >
         {
           map(sortBy(matches, ({ live }) => !live), (match) => (
             <MatchCard

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

@@ -2,14 +2,9 @@ import styled, { css } from 'styled-components/macro'
 import { customScrollbar } from 'features/Common'
 import { isMobileDevice } from '../../../../config/userAgent'
 
-type MatchesWrapperProps = {
+export const MatchesWrapper = styled.div<{hasScroll?: boolean}>`
-  additionalScrollHeight: number,
-  hasScroll?: boolean,
-}
-
-export const MatchesWrapper = styled.div<MatchesWrapperProps>`
   overflow-y: auto;
-  max-height: calc(100vh - 165px - ${({ additionalScrollHeight }) => additionalScrollHeight}px);
+  max-height: calc(100vh - 170px);
   padding-right: ${({ hasScroll }) => (hasScroll ? '10px' : '')};
 
   > * {

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

@@ -1,11 +1,6 @@
-import {
+import { Fragment } from 'react'
-  Fragment,
-  useMemo,
-  useRef,
-} from 'react'
 
 import size from 'lodash/size'
-import filter from 'lodash/filter'
 
 import type {
   PlaylistOption,
@@ -15,13 +10,12 @@ import type {
 import type { MatchInfo } from 'requests'
 
 import { DropdownSection } from '../DropdownSection'
-import { MatchPlaylists, LIST_ITEM_INDENT } from '../MatchPlaylists'
+import { MatchPlaylists } from '../MatchPlaylists'
 import { SideInterviews } from '../SideInterviews'
-import { Matches } from '../Matches'
+import { TabVideo } from '../../components/TabVideo'
 
 type Props = {
   onSelect: (option: PlaylistOption) => void,
-  playListFilter: number,
   playlists: Playlists,
   profile: MatchInfo,
   selectedPlaylist?: PlaylistOption,
@@ -30,50 +24,31 @@ type Props = {
 
 export const TabWatch = ({
   onSelect,
-  playListFilter,
   playlists,
   profile,
   selectedPlaylist,
   tournamentData,
-}: Props) => {
+}: Props) => (
-  const matchPlaylistsRef = useRef<HTMLUListElement>(null)
+  <Fragment>
-
+    <MatchPlaylists
-  const additionalScrollHeight = (matchPlaylistsRef.current?.clientHeight || 0) + LIST_ITEM_INDENT
+      playlists={playlists.match}
-
+      selectedMathPlaylist={selectedPlaylist}
-  const filteredPlayListByDuration = useMemo(() => (
+      onSelect={onSelect}
-    filter(playlists.match, (playlist) => (
+      live={profile?.live}
-      profile?.live
+    />
-        ? Boolean(playlist.duration) || (playlist.id === 'full_game')
+    <DropdownSection
-        : Boolean(playlist.duration)
+      itemsCount={size(playlists.interview)}
-    ))
+      title={playlists.lexics?.interview}
-  ), [playlists.match, profile?.live])
+    >
-
+      <SideInterviews
-  return (
+        interviews={playlists.interview}
-    <Fragment>
+        selectedMathPlaylist={selectedPlaylist}
-      {playListFilter > 1 && (
+        onSelect={onSelect}
-        <MatchPlaylists
-          ref={matchPlaylistsRef}
-          playlists={filteredPlayListByDuration}
-          selectedMathPlaylist={selectedPlaylist}
-          onSelect={onSelect}
-          live={profile?.live}
-        />
-      )}
-      <DropdownSection
-        itemsCount={size(playlists.interview)}
-        title={playlists.lexics?.interview}
-      >
-        <SideInterviews
-          interviews={playlists.interview}
-          selectedMathPlaylist={selectedPlaylist}
-          onSelect={onSelect}
-        />
-      </DropdownSection>
-      <Matches
-        profile={profile}
-        tournamentData={tournamentData}
-        additionalScrollHeight={additionalScrollHeight}
       />
-    </Fragment>
+    </DropdownSection>
-  )
+    <TabVideo
-}
+      profile={profile}
+      tournamentData={tournamentData}
+    />
+  </Fragment>
+)

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

@@ -0,0 +1,276 @@
+import {
+  Container,
+  Row,
+  TeamShortName,
+  ParamValueContainer,
+  ParamValue,
+  ParamTitle,
+} from './styled'
+
+export const TeamsStats = () => (
+  <Container>
+    <Row>
+      <TeamShortName>DIN</TeamShortName>
+      <TeamShortName>SPA</TeamShortName>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue clickable>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue clickable>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+    <Row>
+      <ParamValueContainer>
+        <ParamValue>90</ParamValue>
+      </ParamValueContainer>
+      <ParamTitle>Points</ParamTitle>
+      <ParamValue>123</ParamValue>
+    </Row>
+  </Container>
+)

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

@@ -1,16 +1,16 @@
 import styled, { css } from 'styled-components/macro'
 
-import { Name } from 'features/Name'
+import { customScrollbar } from 'features/Common'
 
 export const Container = styled.div`
   width: 100%;
   font-size: 11px;
-  overflow: hidden;
-  border-radius: 5px;
   background-color: #333333;
+
+  ${customScrollbar}
 `
 
-export const TeamShortName = styled(Name)`
+export const TeamShortName = styled.span`
   color: ${({ theme }) => theme.colors.white};
   letter-spacing: -0.078px;
   text-transform: uppercase;
@@ -37,10 +37,7 @@ type TParamValue = {
   clickable?: boolean,
 }
 
-export const ParamValue = styled.span.attrs(({ clickable }: TParamValue) => ({
+export const ParamValue = styled.span<TParamValue>`
-  ...clickable && { tabIndex: 0 },
-}))<TParamValue>`
-  font-weight: 600;
   color: ${({ clickable, theme }) => (clickable ? '#5EB2FF' : theme.colors.white)};
 
   ${({ clickable }) => (clickable
@@ -50,16 +47,10 @@ export const ParamValue = styled.span.attrs(({ clickable }: TParamValue) => ({
     : '')}
 `
 
-export const StatItemTitle = styled.span`
+export const ParamTitle = styled.span`
   color: ${({ theme }) => theme.colors.white};
   letter-spacing: -0.078px;
   text-transform: uppercase;
   font-weight: 600;
   opacity: 0.5;
 `
-
-export const Divider = styled.span`
-  color: ${({ theme }) => theme.colors.white};
-  opacity: 0.5;
-  font-weight: 600;
-`

src/features/MatchSidePlaylists/components/TeamsStatsTable/hooks.tsx

@@ -1,31 +0,0 @@
-import isNumber from 'lodash/isNumber'
-import find from 'lodash/find'
-import round from 'lodash/round'
-
-import type { Param } from 'requests'
-
-import { useMatchPageStore } from 'features/MatchPage/store'
-
-export const useTeamsStatsTable = () => {
-  const { profile, teamsStats } = useMatchPageStore()
-
-  const getDisplayedValue = (val: any) => (
-    isNumber(val) ? round(val, 2) : '-'
-  )
-
-  const getStatItemById = (paramId: number) => {
-    if (!profile) return null
-
-    return find(teamsStats[profile?.team2.id], ({ param1 }) => param1.id === paramId) || null
-  }
-
-  const isClickable = (param: Param) => (
-    Boolean(param.val) && param.clickable
-  )
-
-  return {
-    getDisplayedValue,
-    getStatItemById,
-    isClickable,
-  }
-}

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

@@ -1,93 +0,0 @@
-import { Fragment } from 'react'
-
-import map from 'lodash/map'
-
-import { useMatchPageStore } from 'features/MatchPage/store'
-import { useLexicsStore } from 'features/LexicsStore'
-
-import { useTeamsStatsTable } from './hooks'
-import {
-  Container,
-  Row,
-  TeamShortName,
-  ParamValueContainer,
-  ParamValue,
-  StatItemTitle,
-  Divider,
-} from './styled'
-
-export const TeamsStatsTable = () => {
-  const { profile, teamsStats } = useMatchPageStore()
-  const {
-    getDisplayedValue,
-    getStatItemById,
-    isClickable,
-  } = useTeamsStatsTable()
-  const { lang } = useLexicsStore()
-
-  if (!profile) return null
-
-  return (
-    <Container>
-      <Row>
-        <TeamShortName
-          nameObj={profile.team1}
-          prefix='abbrev_'
-        />
-        <TeamShortName
-          nameObj={profile.team2}
-          prefix='abbrev_'
-        />
-      </Row>
-
-      {map(teamsStats[profile.team1.id], (team1StatItem) => {
-        const team2StatItem = getStatItemById(team1StatItem.param1.id)
-        const statItemTitle = team1StatItem[`name_${lang === 'ru' ? 'ru' : 'en'}`]
-
-        return (
-          <Row key={team1StatItem.param1.id}>
-            <ParamValueContainer>
-              <ParamValue
-                clickable={isClickable(team1StatItem.param1)}
-              >
-                {getDisplayedValue(team1StatItem.param1.val)}
-              </ParamValue>
-              {team1StatItem.param2 && (
-                <Fragment>
-                  <Divider>/</Divider>
-                  <ParamValue
-                    clickable={isClickable(team1StatItem.param2)}
-                  >
-                    {getDisplayedValue(team1StatItem.param2.val)}
-                  </ParamValue>
-                </Fragment>
-              )}
-            </ParamValueContainer>
-
-            <StatItemTitle>{statItemTitle}</StatItemTitle>
-
-            {team2StatItem && (
-              <ParamValueContainer>
-                <ParamValue
-                  clickable={isClickable(team2StatItem.param1)}
-                >
-                  {getDisplayedValue(team2StatItem.param1.val)}
-                </ParamValue>
-                {team2StatItem.param2 && (
-                  <Fragment>
-                    <Divider>/</Divider>
-                    <ParamValue
-                      clickable={isClickable(team2StatItem.param2)}
-                    >
-                      {getDisplayedValue(team2StatItem.param2.val)}
-                    </ParamValue>
-                  </Fragment>
-                )}
-              </ParamValueContainer>
-            )}
-          </Row>
-        )
-      })}
-    </Container>
-  )
-}

src/features/MatchSidePlaylists/hooks.tsx

@@ -5,8 +5,6 @@ import {
 } from 'react'
 
 import reduce from 'lodash/reduce'
-import isEmpty from 'lodash/isEmpty'
-import compact from 'lodash/compact'
 
 import { useMatchPageStore } from 'features/MatchPage/store'
 
@@ -16,54 +14,26 @@ export const useMatchSidePlaylists = () => {
   const {
     closePopup,
     events,
-    isEmptyPlayersStats,
     matchPlaylists: playlists,
-    profile: matchProfile,
-    teamsStats,
-    tournamentData,
   } = useMatchPageStore()
   const [selectedTab, setSelectedTab] = useState<Tabs>(Tabs.WATCH)
-
+  const isWatchTabVisible = useMemo(() => {
-  const playListFilter = useMemo(() => reduce(
+    const playListFilter = reduce(
-    playlists.match,
+      playlists.match,
-    (acc, item) => {
+      (acc, item) => {
-      let result = acc
+        let result = acc
-      if (item.duration) result++
+        if (item.duration) result++
-      return result
+        return result
-    },
+      },
-    0,
+      0,
-  ), [playlists.match])
+    )
-
+    return playListFilter > 1
-  const isWatchTabVisible = useMemo(() => (
+  }, [playlists])
-    playListFilter > 1 || tournamentData.matchDates.length > 1
-  ), [playListFilter, tournamentData.matchDates.length])
 
   const isEventTabVisible = useMemo(() => (
     events.length > 0
   ), [events])
 
-  const isPlayersTabVisible = useMemo(() => (
-    !isEmpty(playlists.players.team1)
-  ), [playlists.players.team1])
-
-  const isStatsTabVisible = useMemo(() => (
-    !isEmpty(teamsStats)
-      || (matchProfile?.team1.id && !isEmptyPlayersStats(matchProfile.team1.id))
-      || (matchProfile?.team2.id && !isEmptyPlayersStats(matchProfile.team2.id))
-  ), [
-    isEmptyPlayersStats,
-    matchProfile?.team1.id,
-    matchProfile?.team2.id,
-    teamsStats,
-  ])
-
-  const hasLessThanFourTabs = compact([
-    isWatchTabVisible,
-    isEventTabVisible,
-    isPlayersTabVisible,
-    // isStatsTabVisible,
-  ]).length < 4
-
   useEffect(() => {
     switch (true) {
       case isWatchTabVisible:
@@ -72,32 +42,18 @@ export const useMatchSidePlaylists = () => {
       case isEventTabVisible:
         setSelectedTab(Tabs.EVENTS)
         break
-      case isPlayersTabVisible:
-        setSelectedTab(Tabs.PLAYERS)
-        break
-      // case isStatsTabVisible:
-      //   setSelectedTab(Tabs.STATS)
-      //   break
     }
-  }, [
+  }, [isEventTabVisible, isWatchTabVisible])
-    isEventTabVisible,
-    isPlayersTabVisible,
-    // isStatsTabVisible,
-    isWatchTabVisible,
-  ])
 
   useEffect(() => {
     if (selectedTab !== Tabs.EVENTS) closePopup()
   }, [selectedTab, closePopup])
 
   return {
-    hasLessThanFourTabs,
     isEventTabVisible,
-    isPlayersTabVisible,
+    isStatsTabVisible: true,
-    isStatsTabVisible,
     isWatchTabVisible,
     onTabClick: setSelectedTab,
-    playListFilter,
     selectedTab,
   }
 }

src/features/MatchSidePlaylists/index.tsx

@@ -42,6 +42,8 @@ type Props = {
   setCircleAnimation?: TSetCircleAnimation,
 }
 
+const hasLessThanFourTabs = false
+
 export const MatchSidePlaylists = ({
   circleAnimation,
   onSelect,
@@ -57,13 +59,10 @@ export const MatchSidePlaylists = ({
   } = useMatchPageStore()
 
   const {
-    hasLessThanFourTabs,
     isEventTabVisible,
-    isPlayersTabVisible,
+    isStatsTabVisible,
-    // isStatsTabVisible,
     isWatchTabVisible,
     onTabClick,
-    playListFilter,
     selectedTab,
   } = useMatchSidePlaylists()
 
@@ -109,7 +108,7 @@ export const MatchSidePlaylists = ({
         <TabsGroup hasLessThanFourTabs={hasLessThanFourTabs}>
           {isWatchTabVisible ? (
             <Tab
-              aria-pressed={selectedTab === Tabs.WATCH}
+              selected={selectedTab === Tabs.WATCH}
               onClick={() => onTabClick(Tabs.WATCH)}
             >
               <TabIcon icon='watch' />
@@ -118,38 +117,37 @@ export const MatchSidePlaylists = ({
           ) : null}
           {isEventTabVisible ? (
             <Tab
-              aria-pressed={selectedTab === Tabs.EVENTS}
+              selected={selectedTab === Tabs.EVENTS}
               onClick={() => onTabClick(Tabs.EVENTS)}
             >
               <TabIcon icon='plays' />
               <TabTitle t='actions' />
             </Tab>
           ) : null}
-          {isPlayersTabVisible ? (
+          {isStatsTabVisible ? (
             <Tab
-              aria-pressed={selectedTab === Tabs.PLAYERS}
+              selected={selectedTab === Tabs.PLAYERS}
               onClick={() => onTabClick(Tabs.PLAYERS)}
             >
               <TabIcon icon='players' />
-              <TabTitle t='players' />
+              <TabTitle t='stats' />
             </Tab>
           ) : null}
-          {/* {isStatsTabVisible ? (
+          {isStatsTabVisible ? (
             <Tab
-              aria-pressed={selectedTab === Tabs.STATS}
+              selected={selectedTab === Tabs.STATS}
               onClick={() => onTabClick(Tabs.STATS)}
             >
               <TabIcon icon='stats' />
               <TabTitle t='stats' />
             </Tab>
-          ) : null} */}
+          ) : null}
         </TabsGroup>
 
       </TabsWrapper>
       <Container
         hasScroll={hasTabPaneScroll}
         ref={tabPaneContainerRef}
-        forWatchTab={selectedTab === Tabs.WATCH}
       >
         <TabPane
           setCircleAnimation={setCircleAnimation}
@@ -159,7 +157,6 @@ export const MatchSidePlaylists = ({
           playlists={playlists}
           profile={profile}
           selectedPlaylist={selectedPlaylist}
-          playListFilter={playListFilter}
         />
       </Container>
     </Wrapper>

src/features/MatchSidePlaylists/styled.tsx

@@ -43,7 +43,7 @@ export const TabsGroup = styled.div.attrs({ role: 'tablist' })<TabsGroupProps>`
       height: 40px;
         
       ${Tab} {
-          justify-content: center;
+          justify-content: initial;
           flex-direction: row;
           gap: 5px;
         }
@@ -56,30 +56,24 @@ export const TabsGroup = styled.div.attrs({ role: 'tablist' })<TabsGroupProps>`
     : ''};
 `
 
-export const TabTitle = styled(T9n)`
+type TabProps = {
-  font-size: 10px;
+  selected?: boolean,
-  font-weight: 500;
+}
-  text-transform: uppercase;
-  color: ${({ theme }) => theme.colors.white};
-`
 
-export const Tab = styled.button.attrs({ role: 'tab' })`
+export const Tab = styled.div.attrs(({ selected }: TabProps) => ({
+  'aria-pressed': selected,
+  role: 'tab',
+}))<TabProps>`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   flex: 1;
-  opacity: 0.4;
+  opacity: ${({ selected }) => (selected ? '1' : '0.4')};
   cursor: pointer;
-  border: none;
-  background: none;
 
-  &[aria-pressed="true"], :hover {
+  :hover {
     opacity: 1;
-
-    ${TabTitle} {
-      font-weight: 600;
-    }
   }
 `
 
@@ -88,8 +82,8 @@ type TabIconProps = {
 }
 
 export const TabIcon = styled.div<TabIconProps>`
-  width: 22px;
+  width: 20px;
-  height: 22px;
+  height: 20px;
   background-image: url(/images/matchTabs/${({ icon }) => `${icon}.svg`});
   background-repeat: no-repeat;
   background-position: center;
@@ -102,22 +96,28 @@ export const TabIcon = styled.div<TabIconProps>`
     : '')}
 `
 
+export const TabTitle = styled(T9n)`
+  font-size: 8px;
+  text-transform: uppercase;
+  color: ${({ theme }) => theme.colors.white};
+`
+
 type TContainer = {
-  forWatchTab?: boolean,
   hasScroll: boolean,
 }
 
 export const Container = styled.div<TContainer>`
   width: 320px;
-  margin-top: 14px;
+  margin-top: 23px;
   max-height: calc(100vh - 130px);
-  overflow-y: ${({ forWatchTab }) => (forWatchTab ? 'hidden' : 'auto')};
+  overflow-y: ${({ forVideoTab }) => (forVideoTab ? 'hidden' : 'auto')};
-  padding-right: ${({ forWatchTab }) => (forWatchTab ? '0' : '')};
+  padding-right: ${({ forVideoTab }) => (forVideoTab ? '0' : '')};
   padding-left: 14px;
   padding-right: ${({ hasScroll }) => (hasScroll ? '10px' : '')};
 
   ${customScrollbar}
 
+
   @media ${devices.tablet} {
     margin-top: 15px;
   }

src/features/MultiSourcePlayer/hooks/index.tsx

@@ -56,7 +56,6 @@ export type Props = {
   chapters: Chapters,
   isOpenPopup?: boolean,
   onError?: () => void,
-  onPlayerProgressChange?: (ms: number) => void,
   onPlayingChange: (playing: boolean) => void,
   profile: MatchInfo,
   setCircleAnimation: TSetCircleAnimation,
@@ -65,7 +64,6 @@ export type Props = {
 export const useMultiSourcePlayer = ({
   chapters,
   onError,
-  onPlayerProgressChange,
   onPlayingChange,
   setCircleAnimation,
 }: Props) => {
@@ -203,7 +201,6 @@ export const useMultiSourcePlayer = ({
     timeForStatistics.current = (value + chapter.startMs) / 1000
 
     setPlayerState({ playedProgress: value })
-    onPlayerProgressChange?.(playedMs + chapter.startMs)
   }
 
   const onEnded = () => {

src/features/StreamPlayer/components/YoutubePlayer/index.tsx

@@ -7,7 +7,7 @@ import { PlayerWrapper } from '../../styled'
 import { useVideoPlayer, Props } from '../../hooks'
 
 export const YoutubePlayer = (props: Props) => {
-  const { isOpenFiltersPopup, profile } = useMatchPageStore()
+  const { isOpenPopup, profile } = useMatchPageStore()
 
   const {
     onMouseMove,
@@ -34,7 +34,7 @@ export const YoutubePlayer = (props: Props) => {
       onTouchStart={onTouchStart}
       onTouchEnd={onTouchEnd}
     >
-      {isOpenFiltersPopup && <FiltersPopup />}
+      {isOpenPopup && <FiltersPopup />}
       <YouTube
         videoId={key}
         opts={{

src/features/StreamPlayer/index.tsx

@@ -30,7 +30,7 @@ import RewindMobile from './components/RewindMobile'
  * HLS плеер, применяется на лайв и завершенных матчах
  */
 export const StreamPlayer = (props: Props) => {
-  const { isOpenFiltersPopup, profile } = useMatchPageStore()
+  const { isOpenPopup, profile } = useMatchPageStore()
   const { user } = useAuthStore()
 
   const {
@@ -96,7 +96,7 @@ export const StreamPlayer = (props: Props) => {
       onTouchStart={onTouchStart}
       onTouchEnd={onTouchEnd}
     >
-      {isOpenFiltersPopup && <FiltersPopup />}
+      {isOpenPopup && <FiltersPopup />}
       <LoaderWrapper buffering={buffering}>
         <Loader color='#515151' />
       </LoaderWrapper>

src/helpers/getTeamAbbr/index.tsx

@@ -1,25 +0,0 @@
-import toUpper from 'lodash/toUpper'
-import split from 'lodash/split'
-import size from 'lodash/size'
-
-import pipe from 'lodash/fp/pipe'
-import take from 'lodash/fp/take'
-import join from 'lodash/fp/join'
-import map from 'lodash/fp/map'
-
-export const getTeamAbbr = (teamName: string) => {
-  const nameParts = split(teamName, ' ')
-
-  return size(nameParts) > 1
-    ? pipe(
-      map(take(1)),
-      join(''),
-      toUpper,
-    )(nameParts)
-
-    : pipe(
-      take(3),
-      join(''),
-      toUpper,
-    )(nameParts[0])
-}

src/helpers/index.tsx

@@ -8,4 +8,3 @@ export * from './secondsToHms'
 export * from './redirectToUrl'
 export * from './getRandomString'
 export * from './selectedApi'
-export * from './getTeamAbbr'

src/hooks/usePageParams.tsx

@@ -22,7 +22,6 @@ export const usePageParams = () => {
   return {
     profileId: Number(pageId),
     profileType: ProfileTypes[toUpper(profileName) as keyof typeof ProfileTypes],
-    sportName,
     sportType: SportTypes[toUpper(sportName) as keyof typeof SportTypes],
   }
 }

src/requests/getMatchParticipants.tsx

@@ -1,65 +0,0 @@
-import isUndefined from 'lodash/isUndefined'
-
-import { SportTypes } from 'config'
-
-import { callApi } from 'helpers'
-
-export type Player = {
-  birthday: string | null,
-  c_country: number,
-  c_gender: number,
-  club_f_team: number,
-  club_shirt_num: number,
-  firstname_eng: string,
-  firstname_national: string | null,
-  firstname_rus: string,
-  height: number | null,
-  id: number,
-  is_gk: boolean,
-  lastname_eng: string,
-  lastname_national: string | null,
-  lastname_rus: string,
-  national_f_team: number | null,
-  national_shirt_num: number,
-  nickname_eng: string | null,
-  nickname_rus: string | null,
-  weight: number | null,
-}
-
-type DataItem = {
-  players: Array<Player>,
-  team_id: number,
-}
-
-type Response = {
-  data?: Array<DataItem>,
-  error?: {
-    code: string,
-    message: string,
-  },
-}
-
-type GetMatchParticipantsArgs = {
-  matchId: number,
-  second?: number,
-  sportType: SportTypes,
-}
-
-export const getMatchParticipants = async ({
-  matchId,
-  second,
-  sportType,
-}: GetMatchParticipantsArgs) => {
-  const config = {
-    method: 'GET',
-  }
-
-  const response: Response = await callApi({
-    config,
-    url: `http://136.243.17.103:8888/ask/participants?sport_id=${sportType}&match_id=${matchId}${isUndefined(second) ? '' : `&second=${second}`}`,
-  })
-
-  if (response.error) Promise.reject(response)
-
-  return Promise.resolve(response.data || [])
-}

src/requests/getPlayersStats.tsx

@@ -1,54 +0,0 @@
-import isUndefined from 'lodash/isUndefined'
-
-import { callApi } from 'helpers'
-
-export type PlayerParam = {
-  clickable: boolean,
-  data_type: string,
-  id: number,
-  lexic: number,
-  lexica_short: number | null,
-  markers: Array<number> | null,
-  name_en: string,
-  name_ru: string,
-  val: number | null,
-}
-
-export type PlayersStats = {
-  [playerId: string]: {
-    [paramId: string]: PlayerParam,
-  },
-}
-
-type Response = {
-  data?: PlayersStats,
-  error?: string,
-  message?: string,
-}
-
-type GetPlayersStatsArgs = {
-  matchId: number,
-  second?: number,
-  sportName: string,
-  teamId: number,
-}
-
-export const getPlayersStats = async ({
-  matchId,
-  second,
-  sportName,
-  teamId,
-}: GetPlayersStatsArgs) => {
-  const config = {
-    method: 'GET',
-  }
-
-  const response: Response = await callApi({
-    config,
-    url: `http://136.243.17.103:8888/${sportName}/matches/${matchId}/teams/${teamId}/players/stats${isUndefined(second) ? '' : `?second=${second}`}`,
-  })
-
-  if (response.error) Promise.reject(response)
-
-  return Promise.resolve(response.data || {})
-}

src/requests/getTeamsStats.tsx

@@ -1,56 +0,0 @@
-import isUndefined from 'lodash/isUndefined'
-
-import { callApi } from 'helpers'
-
-export type Param = {
-  clickable: boolean,
-  data_type: string,
-  id: number,
-  lexic: number,
-  markers: Array<number>,
-  name_en: string,
-  name_ru: string,
-  val: number | null,
-}
-
-export type TeamStatItem = {
-  lexic: number,
-  name_en: string,
-  name_ru: string,
-  order: number,
-  param1: Param,
-  param2: Param | null,
-}
-
-type Response = {
-  data?: {
-    [teamId: string]: Array<TeamStatItem>,
-  },
-  error?: string,
-  message?: string,
-}
-
-type GetTeamsStatsArgs = {
-  matchId: number,
-  second?: number,
-  sportName: string,
-}
-
-export const getTeamsStats = async ({
-  matchId,
-  second,
-  sportName,
-}: GetTeamsStatsArgs) => {
-  const config = {
-    method: 'GET',
-  }
-
-  const response: Response = await callApi({
-    config,
-    url: `http://136.243.17.103:8888/${sportName}/matches/${matchId}/teams/stats?group_num=0${isUndefined(second) ? '' : `&second=${second}`}`,
-  })
-
-  if (response.error) Promise.reject(response)
-
-  return Promise.resolve(response.data || {})
-}

src/requests/index.tsx

@@ -25,6 +25,3 @@ export * from './getPlayerPlaylists'
 export * from './getSubscriptions'
 export * from './buySubscription'
 export * from './saveMatchStats'
-export * from './getTeamsStats'
-export * from './getPlayersStats'
-export * from './getMatchParticipants'