From 49403a674655c0f8892eb77ed9514fb359e0de83 Mon Sep 17 00:00:00 2001 From: Ruslan Khayrullin Date: Thu, 17 Nov 2022 15:16:48 +0500 Subject: [PATCH] feat(in-142): match stats tab --- .../components/FinishedMatch/index.tsx | 7 +- .../components/LiveMatch/hooks/index.tsx | 8 +- src/features/MatchPage/store/hooks/index.tsx | 8 + .../MatchPage/store/hooks/useMatchData.tsx | 12 +- .../MatchPage/store/hooks/useTeamsStats.tsx | 57 ++-- .../components/MatchPlaylists/index.tsx | 39 ++- .../components/VideoDate/index.tsx | 0 .../components/VideoDate/styled.tsx | 0 .../{TabVideo => Matches}/index.tsx | 12 +- .../{TabVideo => Matches}/styled.tsx | 9 +- .../components/PlayersPlaylists/styled.tsx | 2 + .../components/TabStats/hooks.tsx | 3 +- .../components/TabStats/index.tsx | 4 +- .../components/TabWatch/index.tsx | 77 +++-- .../components/TeamsStats/index.tsx | 276 ------------------ .../components/TeamsStatsTable/hooks.tsx | 30 ++ .../components/TeamsStatsTable/index.tsx | 93 ++++++ .../styled.tsx | 17 +- src/features/MatchSidePlaylists/hooks.tsx | 28 +- src/features/MatchSidePlaylists/index.tsx | 3 + src/features/MatchSidePlaylists/styled.tsx | 6 +- .../MultiSourcePlayer/hooks/index.tsx | 3 + src/requests/getTeamsStats.tsx | 4 +- 23 files changed, 320 insertions(+), 378 deletions(-) rename src/features/MatchSidePlaylists/components/{TabVideo => Matches}/components/VideoDate/index.tsx (100%) rename src/features/MatchSidePlaylists/components/{TabVideo => Matches}/components/VideoDate/styled.tsx (100%) rename src/features/MatchSidePlaylists/components/{TabVideo => Matches}/index.tsx (90%) rename src/features/MatchSidePlaylists/components/{TabVideo => Matches}/styled.tsx (63%) delete mode 100644 src/features/MatchSidePlaylists/components/TeamsStats/index.tsx create mode 100644 src/features/MatchSidePlaylists/components/TeamsStatsTable/hooks.tsx create mode 100644 src/features/MatchSidePlaylists/components/TeamsStatsTable/index.tsx rename src/features/MatchSidePlaylists/components/{TeamsStats => TeamsStatsTable}/styled.tsx (70%) diff --git a/src/features/MatchPage/components/FinishedMatch/index.tsx b/src/features/MatchPage/components/FinishedMatch/index.tsx index d10f60d0..eabc0ea3 100644 --- a/src/features/MatchPage/components/FinishedMatch/index.tsx +++ b/src/features/MatchPage/components/FinishedMatch/index.tsx @@ -17,7 +17,11 @@ import { useMatchPageStore } from '../../store' export const FinishedMatch = () => { const [circleAnimation, setCircleAnimation] = useState(initialCircleAnimation) - const { isOpenPopup, profile } = useMatchPageStore() + const { + isOpenPopup, + profile, + setPlayingProgress, + } = useMatchPageStore() const { chapters, closeSettingsPopup, @@ -51,6 +55,7 @@ export const FinishedMatch = () => { isOpenPopup={isOpenPopup} chapters={chapters} onPlayingChange={onPlayingChange} + onPlayerProgressChange={setPlayingProgress} profile={profile} /> diff --git a/src/features/MatchPage/components/LiveMatch/hooks/index.tsx b/src/features/MatchPage/components/LiveMatch/hooks/index.tsx index e4240ad0..eab6f4b1 100644 --- a/src/features/MatchPage/components/LiveMatch/hooks/index.tsx +++ b/src/features/MatchPage/components/LiveMatch/hooks/index.tsx @@ -21,6 +21,7 @@ export const useLiveMatch = () => { profile, selectedPlaylist, setFullMatchPlaylistDuration, + setPlayingProgress, } = useMatchPageStore() const { profileId: matchId, sportType } = usePageParams() const resume = useResumeUrlParam() @@ -45,7 +46,7 @@ export const useLiveMatch = () => { } = usePlaylistLogger() const { - onPlayerProgressChange, + onPlayerProgressChange: playerProgressChange, onPlayingChange: notifyProgressLogger, } = usePlayerProgressReporter() @@ -66,6 +67,11 @@ export const useLiveMatch = () => { handlePlaylistClick(playlist, e) } + const onPlayerProgressChange = (seconds: number, period = 0) => { + playerProgressChange(seconds, period) + setPlayingProgress(seconds * 1000) + } + return { chapters, isPlayFilterEpisodes, diff --git a/src/features/MatchPage/store/hooks/index.tsx b/src/features/MatchPage/store/hooks/index.tsx index 8320833d..748c0b7c 100644 --- a/src/features/MatchPage/store/hooks/index.tsx +++ b/src/features/MatchPage/store/hooks/index.tsx @@ -68,8 +68,12 @@ export const useMatchPage = () => { fetchTeamsStats, handlePlaylistClick, matchPlaylists, + playingProgress, selectedPlaylist, setFullMatchPlaylistDuration, + setPlayingProgress, + setStatsType, + statsType, teamsStats, } = useMatchData(matchProfile) @@ -173,6 +177,7 @@ export const useMatchPage = () => { plaingOrder, playEpisodes, playNextEpisode, + playingProgress, profile, profileCardShown, resetEvents, @@ -182,10 +187,13 @@ export const useMatchPage = () => { setFullMatchPlaylistDuration, setIsPlayinFiltersEpisodes, setPlaingOrder, + setPlayingProgress, setReversed, + setStatsType, setUnreversed, setWatchAllEpisodesTimer, showProfileCard, + statsType, teamsStats, toggleActiveEvents, toggleActivePlayers, diff --git a/src/features/MatchPage/store/hooks/useMatchData.tsx b/src/features/MatchPage/store/hooks/useMatchData.tsx index 3f732f7c..3aa9f0fe 100644 --- a/src/features/MatchPage/store/hooks/useMatchData.tsx +++ b/src/features/MatchPage/store/hooks/useMatchData.tsx @@ -25,6 +25,7 @@ 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, @@ -34,7 +35,12 @@ export const useMatchData = (profile: MatchInfo) => { setSelectedPlaylist, } = useMatchPlaylists(profile) const { events, fetchMatchEvents } = useEvents() - const { fetchTeamsStats, teamsStats } = useTeamsStats(profile) + const { + fetchTeamsStats, + setStatsType, + statsType, + teamsStats, + } = useTeamsStats(profile, playingProgress) const fetchPlaylistsDebounced = useMemo( () => debounce(fetchMatchPlaylists, MATCH_PLAYLISTS_DELAY), @@ -97,8 +103,12 @@ export const useMatchData = (profile: MatchInfo) => { fetchTeamsStats, handlePlaylistClick, matchPlaylists, + playingProgress, selectedPlaylist, setFullMatchPlaylistDuration, + setPlayingProgress, + setStatsType, + statsType, teamsStats, } } diff --git a/src/features/MatchPage/store/hooks/useTeamsStats.tsx b/src/features/MatchPage/store/hooks/useTeamsStats.tsx index dd4a979a..b7a6d000 100644 --- a/src/features/MatchPage/store/hooks/useTeamsStats.tsx +++ b/src/features/MatchPage/store/hooks/useTeamsStats.tsx @@ -2,42 +2,33 @@ import { useEffect, useState, useMemo, - useCallback, } from 'react' -import flatMap from 'lodash/flatMap' -import reduce from 'lodash/reduce' -import includes from 'lodash/includes' +import throttle from 'lodash/throttle' import type { MatchInfo } from 'requests' import { getTeamsStats, TeamStatItem } from 'requests' import { usePageParams } from 'hooks/usePageParams' -import { useLexicsConfig } from 'features/LexicsStore' +import { StatsType } from 'features/MatchSidePlaylists/components/TabStats/config' -export const useTeamsStats = (matchProfile: MatchInfo) => { +const REQUEST_DELAY = 3000 +const STATS_POLL_INTERVAL = 30000 + +export const useTeamsStats = (matchProfile: MatchInfo, playingProgress: number) => { + const [statsType, setStatsType] = useState(StatsType.FINAL_STATS) const [teamsStats, setTeamsStats] = useState<{ [teamId: string]: Array, }>({}) const { profileId: matchId, sportName } = usePageParams() - const lexics = useMemo(() => reduce>( - flatMap(teamsStats), - (acc, curr) => { - if (curr.param1?.lexic && !includes(acc, curr.param1.lexic)) { - acc.push(curr.param1.lexic) - } - - return acc - }, - [], - ), [teamsStats]) + const progressSec = Math.floor(playingProgress / 1000) - useLexicsConfig(lexics) + const isCurrentStats = statsType === StatsType.CURRENT_STATS - const fetchTeamsStats = useCallback((second?: number) => { + const fetchTeamsStats = useMemo(() => throttle((second?: number) => { if (!sportName) return getTeamsStats({ @@ -45,14 +36,36 @@ export const useTeamsStats = (matchProfile: MatchInfo) => { second, sportName, }).then(setTeamsStats) - }, [matchId, sportName]) + }, REQUEST_DELAY), [matchId, sportName]) + + useEffect(() => { + let timer: ReturnType + + if (!isCurrentStats) { + fetchTeamsStats() + } + + if (matchProfile?.live) { + timer = setInterval(() => { + if (isCurrentStats) return + + fetchTeamsStats() + }, STATS_POLL_INTERVAL) + } + + return () => clearInterval(timer) + }, [fetchTeamsStats, matchProfile?.live, isCurrentStats]) useEffect(() => { - fetchTeamsStats() - }, [fetchTeamsStats]) + if (isCurrentStats) { + fetchTeamsStats(progressSec) + } + }, [fetchTeamsStats, progressSec, isCurrentStats]) return { fetchTeamsStats, + setStatsType, + statsType, teamsStats, } } diff --git a/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx b/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx index e0e49fb9..a0245220 100644 --- a/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx +++ b/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx @@ -1,8 +1,8 @@ -import { useMemo } from 'react' +import type { ForwardedRef } 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,6 +15,8 @@ import { T9n } from 'features/T9n' import { PlayButton } from '../PlayButton' +export const LIST_ITEM_INDENT = 12 + type Props = { live?: boolean, onSelect?: (selectedMathPlaylist: PlaylistOption) => void, @@ -25,7 +27,7 @@ type Props = { const List = styled.ul`` const Item = styled.li` - margin-bottom: 12px; + margin-bottom: ${LIST_ITEM_INDENT}px; width: 100%; height: 36px; ${isMobileDevice @@ -36,24 +38,17 @@ const Item = styled.li` : ''}; ` -export const MatchPlaylists = ({ - live, - onSelect, - playlists, - selectedMathPlaylist, -}: Props) => { - const filteredPlayListByDuration = useMemo(() => ( - filter(playlists, (playlist) => ( - live - ? Boolean(playlist.duration) || (playlist.id === 'full_game') - : Boolean(playlist.duration) - )) - ), [playlists, live]) - - return ( - +export const MatchPlaylists = forwardRef( + ({ + live, + onSelect, + playlists, + selectedMathPlaylist, + }: Props, + ref: ForwardedRef) => ( + { - map(filteredPlayListByDuration, (playlist) => ( + map(playlists, (playlist) => ( - ) -} + ), +) diff --git a/src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/index.tsx b/src/features/MatchSidePlaylists/components/Matches/components/VideoDate/index.tsx similarity index 100% rename from src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/index.tsx rename to src/features/MatchSidePlaylists/components/Matches/components/VideoDate/index.tsx diff --git a/src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/styled.tsx b/src/features/MatchSidePlaylists/components/Matches/components/VideoDate/styled.tsx similarity index 100% rename from src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/styled.tsx rename to src/features/MatchSidePlaylists/components/Matches/components/VideoDate/styled.tsx diff --git a/src/features/MatchSidePlaylists/components/TabVideo/index.tsx b/src/features/MatchSidePlaylists/components/Matches/index.tsx similarity index 90% rename from src/features/MatchSidePlaylists/components/TabVideo/index.tsx rename to src/features/MatchSidePlaylists/components/Matches/index.tsx index 2a8740d6..11d9d7de 100644 --- a/src/features/MatchSidePlaylists/components/TabVideo/index.tsx +++ b/src/features/MatchSidePlaylists/components/Matches/index.tsx @@ -23,13 +23,15 @@ 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 TabVideo = ({ +export const Matches = ({ + additionalScrollHeight, profile, tournamentData, }: Props) => { @@ -75,7 +77,7 @@ export const TabVideo = ({ const hasScroll = scrollHeight > clientHeight setOverflow(hasScroll) - }, [ref, selectedDate]) + }, [ref.current?.clientHeight, selectedDate]) if (tournamentData.matches.length <= 1) return null @@ -88,7 +90,11 @@ export const TabVideo = ({ profileDate={profileDate} onDateClick={setSelectedDate} /> - + { map(sortBy(matches, ({ live }) => !live), (match) => ( ` +type MatchesWrapperProps = { + additionalScrollHeight: number, + hasScroll?: boolean, +} + +export const MatchesWrapper = styled.div` overflow-y: auto; - max-height: calc(100vh - 170px); + max-height: calc(100vh - 165px - ${({ additionalScrollHeight }) => additionalScrollHeight}px); padding-right: ${({ hasScroll }) => (hasScroll ? '10px' : '')}; > * { diff --git a/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx b/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx index 119cec6f..c250bfbb 100644 --- a/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx +++ b/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx @@ -28,6 +28,7 @@ export const PlayerAvatar = styled(ProfileLogo)` ` export const Tabs = styled.div` + margin-top: -10px; margin-bottom: 23px; ` @@ -38,6 +39,7 @@ type TabProps = { export const Tab = styled.button` position: relative; border: none; + height: 34px; padding: 0; background-color: transparent; font-size: 12px; diff --git a/src/features/MatchSidePlaylists/components/TabStats/hooks.tsx b/src/features/MatchSidePlaylists/components/TabStats/hooks.tsx index f481f1ec..935f81b5 100644 --- a/src/features/MatchSidePlaylists/components/TabStats/hooks.tsx +++ b/src/features/MatchSidePlaylists/components/TabStats/hooks.tsx @@ -5,10 +5,9 @@ import { useMatchPageStore } from 'features/MatchPage/store' import { StatsType, Tabs } from './config' export const useTabStats = () => { - const [statsType, setStatsType] = useState(StatsType.FINAL_STATS) const [selectedTab, setSelectedTab] = useState(Tabs.TEAMS) - const { fetchTeamsStats, teamsStats } = useMatchPageStore() + const { setStatsType, statsType } = useMatchPageStore() const isFinalStatsType = statsType === StatsType.FINAL_STATS diff --git a/src/features/MatchSidePlaylists/components/TabStats/index.tsx b/src/features/MatchSidePlaylists/components/TabStats/index.tsx index 1487e01f..6320ab53 100644 --- a/src/features/MatchSidePlaylists/components/TabStats/index.tsx +++ b/src/features/MatchSidePlaylists/components/TabStats/index.tsx @@ -4,7 +4,7 @@ import { T9n } from 'features/T9n' import { Tabs } from './config' import { useTabStats } from './hooks' import { PlayersTable } from '../PlayersTable' -import { TeamsStats } from '../TeamsStats' +import { TeamsStatsTable } from '../TeamsStatsTable' import { Container, @@ -17,7 +17,7 @@ import { } from './styled' const tabPanes = { - [Tabs.TEAMS]: TeamsStats, + [Tabs.TEAMS]: TeamsStatsTable, [Tabs.TEAM1]: PlayersTable, [Tabs.TEAM2]: PlayersTable, } diff --git a/src/features/MatchSidePlaylists/components/TabWatch/index.tsx b/src/features/MatchSidePlaylists/components/TabWatch/index.tsx index 3c1acf33..368e957e 100644 --- a/src/features/MatchSidePlaylists/components/TabWatch/index.tsx +++ b/src/features/MatchSidePlaylists/components/TabWatch/index.tsx @@ -1,6 +1,11 @@ -import { Fragment } from 'react' +import { + Fragment, + useMemo, + useRef, +} from 'react' import size from 'lodash/size' +import filter from 'lodash/filter' import type { PlaylistOption, @@ -10,12 +15,13 @@ import type { import type { MatchInfo } from 'requests' import { DropdownSection } from '../DropdownSection' -import { MatchPlaylists } from '../MatchPlaylists' +import { MatchPlaylists, LIST_ITEM_INDENT } from '../MatchPlaylists' import { SideInterviews } from '../SideInterviews' -import { TabVideo } from '../../components/TabVideo' +import { Matches } from '../Matches' type Props = { onSelect: (option: PlaylistOption) => void, + playListFilter: number, playlists: Playlists, profile: MatchInfo, selectedPlaylist?: PlaylistOption, @@ -24,31 +30,50 @@ type Props = { export const TabWatch = ({ onSelect, + playListFilter, playlists, profile, selectedPlaylist, tournamentData, -}: Props) => ( - - - - { + const matchPlaylistsRef = useRef(null) + + const additionalScrollHeight = (matchPlaylistsRef.current?.clientHeight || 0) + LIST_ITEM_INDENT + + const filteredPlayListByDuration = useMemo(() => ( + filter(playlists.match, (playlist) => ( + profile?.live + ? Boolean(playlist.duration) || (playlist.id === 'full_game') + : Boolean(playlist.duration) + )) + ), [playlists.match, profile?.live]) + + return ( + + {playListFilter > 1 && ( + + )} + + + + - - - -) + + ) +} 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/TeamsStatsTable/hooks.tsx b/src/features/MatchSidePlaylists/components/TeamsStatsTable/hooks.tsx new file mode 100644 index 00000000..800a83de --- /dev/null +++ b/src/features/MatchSidePlaylists/components/TeamsStatsTable/hooks.tsx @@ -0,0 +1,30 @@ +import isNumber from 'lodash/isNumber' +import find from 'lodash/find' + +import type { Param } from 'requests' + +import { useMatchPageStore } from 'features/MatchPage/store' + +export const useTeamsStatsTable = () => { + const { profile, teamsStats } = useMatchPageStore() + + const getDisplayedValue = (val: any) => ( + isNumber(val) ? val : '-' + ) + + const getStatItemById = (paramId: number) => { + if (!profile) return null + + return find(teamsStats[profile?.team2.id], ({ param1 }) => param1.id === paramId) || null + } + + const isClickable = (param: Param) => ( + isNumber(param.val) && param.clickable + ) + + return { + getDisplayedValue, + getStatItemById, + isClickable, + } +} diff --git a/src/features/MatchSidePlaylists/components/TeamsStatsTable/index.tsx b/src/features/MatchSidePlaylists/components/TeamsStatsTable/index.tsx new file mode 100644 index 00000000..610d2c8c --- /dev/null +++ b/src/features/MatchSidePlaylists/components/TeamsStatsTable/index.tsx @@ -0,0 +1,93 @@ +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 ( + + + + + + + {map(teamsStats[profile.team1.id], (team1StatItem) => { + const team2StatItem = getStatItemById(team1StatItem.param1.id) + const statItemTitle = team1StatItem[`name_${lang === 'ru' ? 'ru' : 'en'}`] + + return ( + + + + {getDisplayedValue(team1StatItem.param1.val)} + + {team1StatItem.param2 && ( + + / + + {getDisplayedValue(team1StatItem.param2.val)} + + + )} + + + {statItemTitle} + + {team2StatItem && ( + + + {getDisplayedValue(team2StatItem.param1.val)} + + {team2StatItem.param2 && ( + + / + + {getDisplayedValue(team2StatItem.param2.val)} + + + )} + + )} + + ) + })} + + ) +} diff --git a/src/features/MatchSidePlaylists/components/TeamsStats/styled.tsx b/src/features/MatchSidePlaylists/components/TeamsStatsTable/styled.tsx similarity index 70% rename from src/features/MatchSidePlaylists/components/TeamsStats/styled.tsx rename to src/features/MatchSidePlaylists/components/TeamsStatsTable/styled.tsx index 166f5c2f..0eb38886 100644 --- a/src/features/MatchSidePlaylists/components/TeamsStats/styled.tsx +++ b/src/features/MatchSidePlaylists/components/TeamsStatsTable/styled.tsx @@ -1,11 +1,13 @@ import styled, { css } from 'styled-components/macro' +import { Name } from 'features/Name' + export const Container = styled.div` width: 100%; font-size: 11px; ` -export const TeamShortName = styled.span` +export const TeamShortName = styled(Name)` color: ${({ theme }) => theme.colors.white}; letter-spacing: -0.078px; text-transform: uppercase; @@ -33,7 +35,10 @@ type TParamValue = { clickable?: boolean, } -export const ParamValue = styled.span` +export const ParamValue = styled.span.attrs(({ clickable }: TParamValue) => ({ + ...clickable && { tabIndex: 0 }, +}))` + font-weight: 600; color: ${({ clickable, theme }) => (clickable ? '#5EB2FF' : theme.colors.white)}; ${({ clickable }) => (clickable @@ -43,10 +48,16 @@ export const ParamValue = styled.span` : '')} ` -export const ParamTitle = styled.span` +export const StatItemTitle = 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; +` diff --git a/src/features/MatchSidePlaylists/hooks.tsx b/src/features/MatchSidePlaylists/hooks.tsx index 6a4b303c..1fbf40d4 100644 --- a/src/features/MatchSidePlaylists/hooks.tsx +++ b/src/features/MatchSidePlaylists/hooks.tsx @@ -18,20 +18,23 @@ export const useMatchSidePlaylists = () => { events, matchPlaylists: playlists, teamsStats, + tournamentData, } = useMatchPageStore() const [selectedTab, setSelectedTab] = useState(Tabs.WATCH) - const isWatchTabVisible = useMemo(() => { - const playListFilter = reduce( - playlists.match, - (acc, item) => { - let result = acc - if (item.duration) result++ - return result - }, - 0, - ) - return playListFilter > 1 - }, [playlists]) + + const playListFilter = useMemo(() => reduce( + playlists.match, + (acc, item) => { + let result = acc + if (item.duration) result++ + return result + }, + 0, + ), [playlists.match]) + + const isWatchTabVisible = useMemo(() => ( + playListFilter > 1 || tournamentData.matchDates.length > 1 + ), [playListFilter, tournamentData.matchDates.length]) const isEventTabVisible = useMemo(() => ( events.length > 0 @@ -85,6 +88,7 @@ export const useMatchSidePlaylists = () => { isStatsTabVisible, isWatchTabVisible, onTabClick: setSelectedTab, + playListFilter, selectedTab, } } diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx index b3ae4097..a7baaa77 100644 --- a/src/features/MatchSidePlaylists/index.tsx +++ b/src/features/MatchSidePlaylists/index.tsx @@ -63,6 +63,7 @@ export const MatchSidePlaylists = ({ isStatsTabVisible, isWatchTabVisible, onTabClick, + playListFilter, selectedTab, } = useMatchSidePlaylists() @@ -148,6 +149,7 @@ export const MatchSidePlaylists = ({ diff --git a/src/features/MatchSidePlaylists/styled.tsx b/src/features/MatchSidePlaylists/styled.tsx index eec58e2d..ab6ec05f 100644 --- a/src/features/MatchSidePlaylists/styled.tsx +++ b/src/features/MatchSidePlaylists/styled.tsx @@ -98,7 +98,7 @@ export const TabTitle = styled(T9n)` ` type TContainer = { - forVideoTab?: boolean, + forWatchTab?: boolean, hasScroll: boolean, } @@ -106,8 +106,8 @@ export const Container = styled.div` width: 320px; margin-top: 23px; max-height: calc(100vh - 130px); - overflow-y: ${({ forVideoTab }) => (forVideoTab ? 'hidden' : 'auto')}; - padding-right: ${({ forVideoTab }) => (forVideoTab ? '0' : '')}; + overflow-y: ${({ forWatchTab }) => (forWatchTab ? 'hidden' : 'auto')}; + padding-right: ${({ forWatchTab }) => (forWatchTab ? '0' : '')}; padding-left: 14px; padding-right: ${({ hasScroll }) => (hasScroll ? '10px' : '')}; diff --git a/src/features/MultiSourcePlayer/hooks/index.tsx b/src/features/MultiSourcePlayer/hooks/index.tsx index 22022292..c4e596f8 100644 --- a/src/features/MultiSourcePlayer/hooks/index.tsx +++ b/src/features/MultiSourcePlayer/hooks/index.tsx @@ -56,6 +56,7 @@ export type Props = { chapters: Chapters, isOpenPopup?: boolean, onError?: () => void, + onPlayerProgressChange?: (ms: number) => void, onPlayingChange: (playing: boolean) => void, profile: MatchInfo, setCircleAnimation: TSetCircleAnimation, @@ -64,6 +65,7 @@ export type Props = { export const useMultiSourcePlayer = ({ chapters, onError, + onPlayerProgressChange, onPlayingChange, setCircleAnimation, }: Props) => { @@ -201,6 +203,7 @@ export const useMultiSourcePlayer = ({ timeForStatistics.current = (value + chapter.startMs) / 1000 setPlayerState({ playedProgress: value }) + onPlayerProgressChange?.(playedMs + chapter.startMs) } const onEnded = () => { diff --git a/src/requests/getTeamsStats.tsx b/src/requests/getTeamsStats.tsx index 027598ff..bfaf4c61 100644 --- a/src/requests/getTeamsStats.tsx +++ b/src/requests/getTeamsStats.tsx @@ -2,7 +2,7 @@ import isUndefined from 'lodash/isUndefined' import { callApi } from 'helpers' -type Param = { +export type Param = { clickable: boolean, data_type: string, id: number, @@ -10,7 +10,7 @@ type Param = { markers: Array, name_en: string, name_ru: string, - val: number, + val: number | null, } export type TeamStatItem = {