diff --git a/public/images/matchTabs/bets.svg b/public/images/matchTabs/bets.svg deleted file mode 100644 index d112cddb..00000000 --- a/public/images/matchTabs/bets.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/matchTabs/chat.svg b/public/images/matchTabs/chat.svg deleted file mode 100644 index 02d75c4b..00000000 --- a/public/images/matchTabs/chat.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/matchTabs/players.svg b/public/images/matchTabs/players.svg deleted file mode 100644 index ffa6cb02..00000000 --- a/public/images/matchTabs/players.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/public/images/matchTabs/plays.svg b/public/images/matchTabs/plays.svg deleted file mode 100644 index 0850a8e7..00000000 --- a/public/images/matchTabs/plays.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/public/images/matchTabs/stats.svg b/public/images/matchTabs/stats.svg deleted file mode 100644 index 12afb401..00000000 --- a/public/images/matchTabs/stats.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/public/images/matchTabs/watch.svg b/public/images/matchTabs/watch.svg deleted file mode 100644 index fdb9114f..00000000 --- a/public/images/matchTabs/watch.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx index e44e4d09..5d6e1344 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/src/config/lexics/indexLexics.tsx @@ -22,7 +22,6 @@ const matchPopupLexics = { match_interviews: 13031, match_settings: 13490, no_data: 15397, - others: 19902, players_episodes: 13398, playlist_format: 13406, playlist_format_all_actions: 13408, @@ -32,7 +31,6 @@ const matchPopupLexics = { sec_before: 13411, selected_player_actions: 13413, started_streaming_at: 16042, - stats: 18179, streamed_live_on: 16043, video: 1017, views: 13440, diff --git a/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx b/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx index 619eba54..5ab9e064 100644 --- a/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx +++ b/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx @@ -6,6 +6,7 @@ export const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; + margin-top: 25px; ` export const List = styled.ul` diff --git a/src/features/MatchSidePlaylists/components/PlayersTable/index.tsx b/src/features/MatchSidePlaylists/components/PlayersTable/index.tsx deleted file mode 100644 index 46520e1b..00000000 --- a/src/features/MatchSidePlaylists/components/PlayersTable/index.tsx +++ /dev/null @@ -1,243 +0,0 @@ -import { - Table, - Thead, - Th, - Tbody, - Tr, - Td, - PlayerNum, - ParamShortTitle, -} from './styled' - -export const PlayersTable = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - Min - - Pt - - Reb - - Ass - - To -
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
-) diff --git a/src/features/MatchSidePlaylists/components/PlayersTable/styled.tsx b/src/features/MatchSidePlaylists/components/PlayersTable/styled.tsx deleted file mode 100644 index 3d88c1f6..00000000 --- a/src/features/MatchSidePlaylists/components/PlayersTable/styled.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import styled, { css } from 'styled-components/macro' - -import { customScrollbar } from 'features/Common' - -export const Table = styled.table` - width: 100%; - border-radius: 5px; - border-collapse: collapse; - letter-spacing: -0.078px; - background-color: #333333; - table-layout: fixed; - - ${customScrollbar} -` - -export const Thead = styled.thead` - height: 45px; - border-bottom: 0.5px solid rgba(255, 255, 255, 0.5); -` - -type ThProps = { - sorted?: boolean, -} - -export const Th = styled.th` - font-size: 11px; - color: ${({ theme }) => theme.colors.white}; - text-transform: uppercase; - - :first-child { - width: 115px; - } - - ${({ sorted }) => (sorted - ? '' - : css` - opacity: 0.5; - `)} -` - -export const ParamShortTitle = styled.span`` - -export const Tbody = styled.tbody`` - -export const Tr = styled.tr` - height: 45px; - border-bottom: 0.5px solid rgba(255, 255, 255, 0.5); - - :last-child { - border-bottom: none; - } -` - -type TdProps = { - clickable?: boolean, - sorted?: boolean, -} - -export const Td = styled.td` - font-size: 11px; - text-align: center; - color: ${({ clickable, theme }) => (clickable ? '#5EB2FF' : theme.colors.white)}; - - :first-child { - padding-left: 13px; - text-align: left; - color: ${({ theme }) => theme.colors.white}; - } - - - ${({ sorted }) => (sorted - ? css` - font-weight: bold; - ` - : '')} - - ${({ clickable }) => (clickable - ? css` - cursor: pointer; - ` - : '')} -` - -export const PlayerNum = styled.span` - color: rgba(255, 255, 255, 0.5); -` diff --git a/src/features/MatchSidePlaylists/components/TabPlayers/index.tsx b/src/features/MatchSidePlaylists/components/TabPlayers/index.tsx deleted file mode 100644 index bd8244ac..00000000 --- a/src/features/MatchSidePlaylists/components/TabPlayers/index.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import isEmpty from 'lodash/isEmpty' - -import type { Playlists, PlaylistOption } from 'features/MatchPage/types' -import type { MatchInfo } from 'requests' - -import { PlayersPlaylists } from '../PlayersPlaylists' - -type Props = { - onSelect: (option: PlaylistOption) => void, - playlists: Playlists, - profile: MatchInfo, - selectedPlaylist?: PlaylistOption, -} - -export const TabPlayers = ({ - onSelect, - playlists, - profile, - selectedPlaylist, -}: Props) => { - if (isEmpty(playlists.players.team1)) return null - - return ( - - ) -} diff --git a/src/features/MatchSidePlaylists/components/TabStats/config.tsx b/src/features/MatchSidePlaylists/components/TabStats/config.tsx deleted file mode 100644 index 099a117f..00000000 --- a/src/features/MatchSidePlaylists/components/TabStats/config.tsx +++ /dev/null @@ -1,5 +0,0 @@ -export enum Tabs { - TEAMS, - TEAM1, - TEAM2, -} diff --git a/src/features/MatchSidePlaylists/components/TabStats/index.tsx b/src/features/MatchSidePlaylists/components/TabStats/index.tsx deleted file mode 100644 index c43592bb..00000000 --- a/src/features/MatchSidePlaylists/components/TabStats/index.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Tooltip } from 'features/Tooltip' - -import { PlayersTable } from '../PlayersTable' -import { TeamsStats } from '../TeamsStats' - -import { - Container, - Header, - TabList, - Tab, - Switch, - SwitchTitle, - SwitchButton, -} from './styled' - -export const TabStats = () => ( - -
- - Teams - DIN - SPA - - - Final Stats - - - - -
- - {/* */} - -) diff --git a/src/features/MatchSidePlaylists/components/TabStats/styled.tsx b/src/features/MatchSidePlaylists/components/TabStats/styled.tsx deleted file mode 100644 index f2f58203..00000000 --- a/src/features/MatchSidePlaylists/components/TabStats/styled.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import styled, { css } from 'styled-components/macro' - -import { TooltipWrapper } from 'features/Tooltip' - -export const Container = styled.div`` - -export const Header = styled.div` - display: flex; - justify-content: space-between; - margin-bottom: 23px; -` - -export const TabList = styled.div.attrs({ role: 'tablist' })` - display: flex; -` - -type TabProps = { - selected?: boolean, -} - -export const Tab = styled.div.attrs(({ selected }: TabProps) => ({ - 'aria-pressed': selected, - role: 'tab', -}))` - display: flex; - justify-content: space-between; - align-items: center; - padding: 0 15px 10px; - font-size: 12px; - color: ${({ theme }) => theme.colors.white}; - opacity: ${({ selected }) => (selected ? '1' : '0.4')}; - cursor: pointer; - border-bottom: 2px solid transparent; - - - ${({ selected, theme }) => (selected - ? css` - border-color: ${theme.colors.white}; - ` - : '')} -` - -export const Switch = styled.div` - display: flex; -` - -export const SwitchTitle = styled.span` - font-size: 12px; - color: ${({ theme }) => theme.colors.white}; -` - -export const SwitchButton = styled.button` - position: relative; - width: 20px; - height: 7px; - margin-left: 5px; - margin-top: 5px; - border-radius: 2px; - border: none; - border: 1px solid ${({ theme }) => theme.colors.white}; - cursor: pointer; - - ${TooltipWrapper} { - left: auto; - right: 0; - padding: 2px 10px; - border-radius: 6px; - transform: none; - - ::before { - display: none; - } - } - - :hover { - ${TooltipWrapper} { - display: block; - } - } - - ${({ theme }) => (true // Позже будет добавлен пропс - ? css` - background-image: linear-gradient( - to right, - ${theme.colors.white} 33.333%, - ${theme.colors.black} 33.333%, - ${theme.colors.black} 66.666%, - ${theme.colors.white} 66.666%, - ${theme.colors.white} 72%, - ${theme.colors.black} 72%, - ${theme.colors.black} 100%) - ` - : css` - border-color: transparent; - background-image: linear-gradient( - to right, - ${theme.colors.white} 33.333%, - ${theme.colors.black} 33.333%, - ${theme.colors.black} 38%, - ${theme.colors.white} 38%, - ${theme.colors.white} 66.666%, - ${theme.colors.black} 66.666%, - ${theme.colors.black} 72%, - ${theme.colors.white} 72%, - ${theme.colors.white} 100%) - ` - )} -` diff --git a/src/features/MatchSidePlaylists/components/TabVideo/index.tsx b/src/features/MatchSidePlaylists/components/TabVideo/index.tsx index 2a8740d6..83d165dc 100644 --- a/src/features/MatchSidePlaylists/components/TabVideo/index.tsx +++ b/src/features/MatchSidePlaylists/components/TabVideo/index.tsx @@ -77,8 +77,6 @@ export const TabVideo = ({ setOverflow(hasScroll) }, [ref, selectedDate]) - if (tournamentData.matches.length <= 1) return null - return ( void, playlists: Playlists, profile: MatchInfo, selectedPlaylist?: PlaylistOption, - tournamentData: TournamentData, } export const TabWatch = ({ @@ -27,7 +23,6 @@ export const TabWatch = ({ playlists, profile, selectedPlaylist, - tournamentData, }: Props) => ( - + {!isEmpty(playlists.players.team1) && ( + + )} ) diff --git a/src/features/MatchSidePlaylists/components/TeamsStats/index.tsx b/src/features/MatchSidePlaylists/components/TeamsStats/index.tsx deleted file mode 100644 index 17a1dad5..00000000 --- a/src/features/MatchSidePlaylists/components/TeamsStats/index.tsx +++ /dev/null @@ -1,276 +0,0 @@ -import { - Container, - Row, - TeamShortName, - ParamValueContainer, - ParamValue, - ParamTitle, -} from './styled' - -export const TeamsStats = () => ( - - - DIN - SPA - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - - - 90 - - Points - 123 - - -) diff --git a/src/features/MatchSidePlaylists/components/TeamsStats/styled.tsx b/src/features/MatchSidePlaylists/components/TeamsStats/styled.tsx deleted file mode 100644 index 222b9918..00000000 --- a/src/features/MatchSidePlaylists/components/TeamsStats/styled.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import styled, { css } from 'styled-components/macro' - -import { customScrollbar } from 'features/Common' - -export const Container = styled.div` - width: 100%; - font-size: 11px; - background-color: #333333; - - ${customScrollbar} -` - -export const TeamShortName = styled.span` - color: ${({ theme }) => theme.colors.white}; - letter-spacing: -0.078px; - text-transform: uppercase; - font-weight: 600; - opacity: 0.5; -` - -export const Row = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - height: 45px; - padding: 0 12px; - border-bottom: 0.5px solid rgba(255, 255, 255, 0.5); - - :last-child { - border-bottom: none; - } -` - -export const ParamValueContainer = styled.div`` - -type TParamValue = { - clickable?: boolean, -} - -export const ParamValue = styled.span` - color: ${({ clickable, theme }) => (clickable ? '#5EB2FF' : theme.colors.white)}; - - ${({ clickable }) => (clickable - ? css` - cursor: pointer; - ` - : '')} -` - -export const ParamTitle = styled.span` - color: ${({ theme }) => theme.colors.white}; - letter-spacing: -0.078px; - text-transform: uppercase; - font-weight: 600; - opacity: 0.5; -` diff --git a/src/features/MatchSidePlaylists/config.tsx b/src/features/MatchSidePlaylists/config.tsx index fc7219fd..9ab22db3 100644 --- a/src/features/MatchSidePlaylists/config.tsx +++ b/src/features/MatchSidePlaylists/config.tsx @@ -1,6 +1,5 @@ export enum Tabs { WATCH, EVENTS, - STATS, - PLAYERS, + VIDEO } diff --git a/src/features/MatchSidePlaylists/hooks.tsx b/src/features/MatchSidePlaylists/hooks.tsx index 689c6fe5..a953144c 100644 --- a/src/features/MatchSidePlaylists/hooks.tsx +++ b/src/features/MatchSidePlaylists/hooks.tsx @@ -15,6 +15,7 @@ export const useMatchSidePlaylists = () => { closePopup, events, matchPlaylists: playlists, + tournamentData, } = useMatchPageStore() const [selectedTab, setSelectedTab] = useState(Tabs.WATCH) const isWatchTabVisible = useMemo(() => { @@ -34,6 +35,10 @@ export const useMatchSidePlaylists = () => { events.length > 0 ), [events]) + const isVideoTabVisible = useMemo(() => ( + tournamentData.matches.length > 1 + ), [tournamentData]) + useEffect(() => { switch (true) { case isWatchTabVisible: @@ -42,8 +47,11 @@ export const useMatchSidePlaylists = () => { case isEventTabVisible: setSelectedTab(Tabs.EVENTS) break + case isVideoTabVisible: + setSelectedTab(Tabs.VIDEO) + break } - }, [isEventTabVisible, isWatchTabVisible]) + }, [isEventTabVisible, isVideoTabVisible, isWatchTabVisible]) useEffect(() => { if (selectedTab !== Tabs.EVENTS) closePopup() @@ -51,7 +59,7 @@ export const useMatchSidePlaylists = () => { return { isEventTabVisible, - isStatsTabVisible: true, + isVideoTabVisible, isWatchTabVisible, onTabClick: setSelectedTab, selectedTab, diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx index 25b08a12..b3a0edc9 100644 --- a/src/features/MatchSidePlaylists/index.tsx +++ b/src/features/MatchSidePlaylists/index.tsx @@ -6,6 +6,8 @@ import { import type { TCircleAnimation, TSetCircleAnimation } from 'features/CircleAnimationBar' import type { PlaylistOption } from 'features/MatchPage/types' +import { Tab, TabsGroup } from 'features/Common' +import { T9n } from 'features/T9n' import { useMatchPageStore } from 'features/MatchPage/store' import { useEventListener } from 'hooks' @@ -15,24 +17,18 @@ import { isIOS } from 'config/userAgent' import { Tabs } from './config' import { TabEvents } from './components/TabEvents' import { TabWatch } from './components/TabWatch' -import { TabPlayers } from './components/TabPlayers' -import { TabStats } from './components/TabStats' +import { TabVideo } from './components/TabVideo' import { useMatchSidePlaylists } from './hooks' import { Wrapper, TabsWrapper, - TabsGroup, - Tab, - TabIcon, - TabTitle, Container, } from './styled' const tabPanes = { [Tabs.WATCH]: TabWatch, [Tabs.EVENTS]: TabEvents, - [Tabs.STATS]: TabStats, - [Tabs.PLAYERS]: TabPlayers, + [Tabs.VIDEO]: TabVideo, } type Props = { @@ -42,8 +38,6 @@ type Props = { setCircleAnimation?: TSetCircleAnimation, } -const hasLessThanFourTabs = false - export const MatchSidePlaylists = ({ circleAnimation, onSelect, @@ -60,7 +54,7 @@ export const MatchSidePlaylists = ({ const { isEventTabVisible, - isStatsTabVisible, + isVideoTabVisible, isWatchTabVisible, onTabClick, selectedTab, @@ -105,14 +99,13 @@ export const MatchSidePlaylists = ({ return ( - + {isWatchTabVisible ? ( onTabClick(Tabs.WATCH)} > - - + ) : null} {isEventTabVisible ? ( @@ -120,26 +113,15 @@ export const MatchSidePlaylists = ({ selected={selectedTab === Tabs.EVENTS} onClick={() => onTabClick(Tabs.EVENTS)} > - - - - ) : null} - {isStatsTabVisible ? ( - onTabClick(Tabs.PLAYERS)} - > - - + ) : null} - {isStatsTabVisible ? ( + {isVideoTabVisible ? ( onTabClick(Tabs.STATS)} + selected={selectedTab === Tabs.VIDEO} + onClick={() => onTabClick(Tabs.VIDEO)} > - - + ) : null} @@ -148,6 +130,7 @@ export const MatchSidePlaylists = ({ ` - display: flex; - height: 45px; - padding-top: 10px; - - ${({ hasLessThanFourTabs }) => (hasLessThanFourTabs - ? css` - height: 40px; - - ${Tab} { - justify-content: initial; - flex-direction: row; - gap: 5px; - } - ` - : '')} - - ${isMobileDevice - ? css` - ` - : ''}; -` - -type TabProps = { - selected?: boolean, -} - -export const Tab = styled.div.attrs(({ selected }: TabProps) => ({ - 'aria-pressed': selected, - role: 'tab', -}))` - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - flex: 1; - opacity: ${({ selected }) => (selected ? '1' : '0.4')}; - cursor: pointer; - - :hover { - opacity: 1; - } -` - -type TabIconProps = { - icon: 'watch' | 'plays' | 'players' | 'stats', -} - -export const TabIcon = styled.div` - width: 20px; - height: 20px; - background-image: url(/images/matchTabs/${({ icon }) => `${icon}.svg`}); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - - ${({ icon }) => (icon === 'players' - ? css` - background-size: 23px; - ` - : '')} -` - -export const TabTitle = styled(T9n)` - font-size: 8px; - text-transform: uppercase; - color: ${({ theme }) => theme.colors.white}; -` - type TContainer = { + forVideoTab?: boolean, hasScroll: boolean, } export const Container = styled.div` width: 320px; - margin-top: 23px; + margin-top: 14px; max-height: calc(100vh - 130px); overflow-y: ${({ forVideoTab }) => (forVideoTab ? 'hidden' : 'auto')}; padding-right: ${({ forVideoTab }) => (forVideoTab ? '0' : '')}; diff --git a/src/features/Tooltip/index.tsx b/src/features/Tooltip/index.tsx index a436eb2d..b0683b49 100644 --- a/src/features/Tooltip/index.tsx +++ b/src/features/Tooltip/index.tsx @@ -25,7 +25,7 @@ export const TooltipWrapper = styled(TooltipBlockWrapper)` ` type Props = { - children?: ReactNode, + children: ReactNode, lexic: string, }