diff --git a/src/features/CircleAnimationBar/index.tsx b/src/features/CircleAnimationBar/index.tsx
index 4228993f..fcd7827f 100644
--- a/src/features/CircleAnimationBar/index.tsx
+++ b/src/features/CircleAnimationBar/index.tsx
@@ -10,16 +10,16 @@ import { fullEpisodesDuration } from './helpers'
import { Svg, Circle } from './styled'
export type TCircleAnimation = {
- plaingOrder: number,
playedProgress: number,
playing: boolean,
+ playingOrder: number,
ready: boolean,
}
export const initialCircleAnimation: TCircleAnimation = {
- plaingOrder: 0,
playedProgress: 0,
playing: false,
+ playingOrder: 0,
ready: false,
}
@@ -43,14 +43,14 @@ export const CircleAnimationBar = ({
} = useMatchPageStore()
const {
- plaingOrder,
playedProgress,
playing,
+ playingOrder,
ready,
} = circleAnimation
const timeOfAllEpisodes = fullEpisodesDuration(filteredEvents)
- const remainingEvents = filteredEvents.slice(plaingOrder && plaingOrder - 1)
+ const remainingEvents = filteredEvents.slice(playingOrder && playingOrder - 1)
const fullTimeOfRemainingEpisodes = !isEmpty(remainingEvents)
? fullEpisodesDuration(remainingEvents)
: 0
@@ -62,13 +62,13 @@ export const CircleAnimationBar = ({
const strokeDashOffset = svgSize * Math.PI
useEffect(() => {
- if (currentEpisodesPercent >= 100 && (plaingOrder === size(filteredEvents))) {
+ if (currentEpisodesPercent >= 100 && (playingOrder === size(filteredEvents))) {
setWatchAllEpisodesTimer(false)
}
}, [
currentEpisodesPercent,
filteredEvents,
- plaingOrder,
+ playingOrder,
setWatchAllEpisodesTimer,
])
diff --git a/src/features/MatchPage/components/FinishedMatch/hooks/index.tsx b/src/features/MatchPage/components/FinishedMatch/hooks/index.tsx
index 0ab3450e..b9db5dc2 100644
--- a/src/features/MatchPage/components/FinishedMatch/hooks/index.tsx
+++ b/src/features/MatchPage/components/FinishedMatch/hooks/index.tsx
@@ -41,11 +41,12 @@ export const useFinishedMatch = () => {
setSettings(newSettings)
closeSettingsPopup()
}
-
+ // @ts-expect-error
const onPlaylistSelect: typeof handlePlaylistClick = (playlist, e) => {
if (selectedPlaylist) {
logPlaylistChange(selectedPlaylist)
}
+ // @ts-expect-error
handlePlaylistClick(playlist, e)
}
const { chapters } = useChapters({ episodes, selectedPlaylist })
diff --git a/src/features/MatchPage/components/FinishedMatch/hooks/useEpisodes.tsx b/src/features/MatchPage/components/FinishedMatch/hooks/useEpisodes.tsx
index 93b7dc40..a104b35c 100644
--- a/src/features/MatchPage/components/FinishedMatch/hooks/useEpisodes.tsx
+++ b/src/features/MatchPage/components/FinishedMatch/hooks/useEpisodes.tsx
@@ -49,7 +49,7 @@ export const useEpisodes = () => {
useEffect(() => {
if (!selectedPlaylist && playlists && !isEmpty(playlists.match)) {
- handlePlaylistClick(playlists.match[0])
+ // handlePlaylistClick(playlists.match[0])
}
}, [
selectedPlaylist,
diff --git a/src/features/MatchPage/components/FinishedMatch/index.tsx b/src/features/MatchPage/components/FinishedMatch/index.tsx
index 926bcc6f..21467f16 100644
--- a/src/features/MatchPage/components/FinishedMatch/index.tsx
+++ b/src/features/MatchPage/components/FinishedMatch/index.tsx
@@ -66,6 +66,7 @@ export const FinishedMatch = () => {
diff --git a/src/features/MatchPage/components/LiveMatch/hooks/index.tsx b/src/features/MatchPage/components/LiveMatch/hooks/index.tsx
index 1f3a5919..d6b63df5 100644
--- a/src/features/MatchPage/components/LiveMatch/hooks/index.tsx
+++ b/src/features/MatchPage/components/LiveMatch/hooks/index.tsx
@@ -1,3 +1,4 @@
+import type { MouseEvent } from 'react'
import { useMemo } from 'react'
import { API_ROOT } from 'config'
@@ -6,6 +7,7 @@ import { readToken } from 'helpers/token'
import { usePageParams } from 'hooks'
+import type { PlaylistOption } from 'features/MatchPage/types'
import { useMatchPageStore } from 'features/MatchPage/store'
import { MatchSecondType, usePlayerProgressReporter } from './usePlayerProgressReporter'
@@ -18,6 +20,7 @@ export const useLiveMatch = () => {
handlePlaylistClick,
profile,
selectedPlaylist,
+ selectedTab,
setFullMatchPlaylistDuration,
} = useMatchPageStore()
const { profileId: matchId, sportType } = usePageParams()
@@ -59,11 +62,15 @@ export const useLiveMatch = () => {
notifyProgressLogger(playing)
}
- const onPlaylistSelect: typeof handlePlaylistClick = (playlist, e) => {
+ const onPlaylistSelect = (playlist: PlaylistOption, e?: MouseEvent) => {
if (selectedPlaylist) {
logPlaylistChange(selectedPlaylist)
}
- handlePlaylistClick(playlist, e)
+ handlePlaylistClick({
+ e,
+ playlist,
+ tab: selectedTab,
+ })
}
return {
chapters,
diff --git a/src/features/MatchPage/store/hooks/index.tsx b/src/features/MatchPage/store/hooks/index.tsx
index 25ccab08..bfa04fa5 100644
--- a/src/features/MatchPage/store/hooks/index.tsx
+++ b/src/features/MatchPage/store/hooks/index.tsx
@@ -17,6 +17,7 @@ import { initialCircleAnimation } from 'features/CircleAnimationBar'
import type { TCircleAnimation } from 'features/CircleAnimationBar'
import { StatsType } from 'features/MatchSidePlaylists/components/TabStats/config'
import { PlaylistTypes } from 'features/MatchPage/types'
+import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
import type { MatchInfo } from 'requests/getMatchInfo'
import { getMatchInfo } from 'requests/getMatchInfo'
@@ -48,9 +49,9 @@ type PlayingData = {
}
type EpisodeInfo = {
- paramName: string,
- paramValue?: number,
- playerOrTeamName: string,
+ episodesCount?: number,
+ paramName?: string,
+ playerOrTeamName?: string,
}
const initPlayingData: PlayingData = {
@@ -72,18 +73,16 @@ export const useMatchPage = () => {
const [access, setAccess] = useState(true)
const [playingProgress, setPlayingProgress] = useState(0)
const [playingData, setPlayingData] = useState(initPlayingData)
- const [plaingOrder, setPlaingOrder] = useState(0)
+ const [playingOrder, setPlaingOrder] = useState(0)
const [isPlayFilterEpisodes, setIsPlayingFiltersEpisodes] = useState(false)
const [selectedTab, setSelectedTab] = useState(Tabs.WATCH)
const [circleAnimation, setCircleAnimation] = useState(initialCircleAnimation)
const [episodeInfo, setEpisodeInfo] = useState({
+ episodesCount: 0,
paramName: '',
- paramValue: 0,
playerOrTeamName: '',
})
- const isStatsTab = selectedTab === Tabs.STATS
-
const { profileId: matchId, sportType } = usePageParams()
useEffect(() => {
@@ -112,13 +111,13 @@ export const useMatchPage = () => {
matchPlaylists,
selectedPlaylist,
setFullMatchPlaylistDuration,
- } = useMatchData({ matchProfile, selectedTab })
+ } = useMatchData({ matchProfile })
const profile = matchProfile
- const isPlayingEpisode = selectedPlaylist.type === PlaylistTypes.EVENT
- && selectedPlaylist.tab === Tabs.STATS
- && selectedTab === Tabs.STATS
+ const isPlayingEpisode = selectedPlaylist.id !== FULL_GAME_KEY
+
+ const isStatsPlaylist = selectedPlaylist.tab === Tabs.STATS
const {
activeEvents,
@@ -245,7 +244,7 @@ export const useMatchPage = () => {
}
const disablePlayingEpisodes = () => {
- isStatsTab ? disablePlayingStatsEpisodes() : disablePlayingPlaysEpisodes()
+ isStatsPlaylist ? disablePlayingStatsEpisodes() : disablePlayingPlaysEpisodes()
}
useEffect(() => {
@@ -253,7 +252,7 @@ export const useMatchPage = () => {
disablePlayingStatsEpisodes()
disablePlayingPlaysEpisodes()
} else {
- selectedTab === Tabs.EVENTS ? disablePlayingStatsEpisodes() : disablePlayingPlaysEpisodes()
+ !isStatsPlaylist ? disablePlayingStatsEpisodes() : disablePlayingPlaysEpisodes()
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedPlaylist])
@@ -265,8 +264,8 @@ export const useMatchPage = () => {
isPlayersStatsFetching,
isPlayFilterEpisodes: isStatsPlayFilterEpisodes,
isTeamsStatsFetching,
- plaingOrder: statsPlaingOrder,
playEpisodes: playStatsEpisodes,
+ playingOrder: statsPlaingOrder,
playNextEpisode: playStatsNextEpisode,
reduceTable,
selectedStatsTable,
@@ -357,16 +356,19 @@ export const useMatchPage = () => {
} = useTabEvents({ events: filteredEvents, profile })
const playNextEpisode = (order?: number) => {
- const isLastEpisode = plaingOrder === episodesToPlay.length
+ const isLastEpisode = playingOrder === episodesToPlay.length
- const currentOrder = order === 0 ? order : plaingOrder
+ const currentOrder = order === 0 ? order : playingOrder
if (isLastEpisode) {
setIsPlayingFiltersEpisodes(false)
setPlaingOrder(0)
return
}
- handlePlaylistClick(episodesToPlay[currentOrder])
+ handlePlaylistClick({
+ playlist: episodesToPlay[currentOrder],
+ tab: Tabs.EVENTS,
+ })
setPlaingOrder(currentOrder + 1)
}
const playEpisodes = () => {
@@ -383,9 +385,12 @@ export const useMatchPage = () => {
if (matchProfile?.live) {
handlePlaylistClick({
- episodes: episodesToPlay.map((el) => el.episodes[0]),
- id: 1,
- type: episodesToPlay[0].type,
+ playlist: {
+ episodes: episodesToPlay.map((el) => el.episodes[0]),
+ id: 1,
+ type: episodesToPlay[0].type,
+ },
+ tab: Tabs.EVENTS,
})
} else {
playNextEpisode(0)
@@ -402,13 +407,13 @@ export const useMatchPage = () => {
allPlayersToggle,
applyFilters,
beforeCloseTourCallback,
- circleAnimation: isStatsTab ? statsCircleAnimation : circleAnimation,
+ circleAnimation: isStatsPlaylist ? statsCircleAnimation : circleAnimation,
closePopup,
countOfFilters,
disablePlayingEpisodes,
episodeInfo,
events,
- filteredEvents: isStatsTab ? statsFilteredEvents : filteredEvents,
+ filteredEvents: isStatsPlaylist ? statsFilteredEvents : filteredEvents,
getFirstClickableParam,
getParams,
handlePlaylistClick,
@@ -421,7 +426,7 @@ export const useMatchPage = () => {
isFirstTeamPlayersChecked,
isLiveMatch,
isOpenFiltersPopup,
- isPlayFilterEpisodes: isStatsTab ? isStatsPlayFilterEpisodes : isPlayFilterEpisodes,
+ isPlayFilterEpisodes: isStatsPlaylist ? isStatsPlayFilterEpisodes : isPlayFilterEpisodes,
isPlayersStatsFetching,
isPlayingEpisode,
isSecondTeamPlayersChecked,
@@ -430,13 +435,13 @@ export const useMatchPage = () => {
likeImage,
likeToggle,
matchPlaylists,
- plaingOrder: isStatsTab ? statsPlaingOrder : plaingOrder,
playEpisodes,
- playNextEpisode: isStatsTab ? playStatsNextEpisode : playNextEpisode,
+ playNextEpisode: isStatsPlaylist ? playStatsNextEpisode : playNextEpisode,
playStatsEpisodes,
playersData,
playersStats,
playingData,
+ playingOrder: isStatsPlaylist ? statsPlaingOrder : playingOrder,
playingProgress,
profile,
profileCardShown,
@@ -445,13 +450,13 @@ export const useMatchPage = () => {
selectedPlaylist,
selectedStatsTable,
selectedTab,
- setCircleAnimation: isStatsTab ? setStatsCircleAnimation : setCircleAnimation,
+ setCircleAnimation: isStatsPlaylist ? setStatsCircleAnimation : setCircleAnimation,
setEpisodeInfo,
setFullMatchPlaylistDuration,
- setIsPlayingFiltersEpisodes: isStatsTab
+ setIsPlayingFiltersEpisodes: isStatsPlaylist
? setStatsIsPlayinFiltersEpisodes
: setIsPlayersStatsFetching,
- setPlaingOrder: isStatsTab ? setStatsPlaingOrder : setPlaingOrder,
+ setPlaingOrder: isStatsPlaylist ? setStatsPlaingOrder : setPlaingOrder,
setPlayingData,
setPlayingProgress,
setReversed,
@@ -459,9 +464,10 @@ export const useMatchPage = () => {
setSelectedTab,
setStatsType,
setUnreversed,
- setWatchAllEpisodesTimer: isStatsTab ? setStatsWatchAllEpisodesTimer : setWatchAllEpisodesTimer,
+ setWatchAllEpisodesTimer: isStatsPlaylist
+ ? setStatsWatchAllEpisodesTimer
+ : setWatchAllEpisodesTimer,
showProfileCard,
- statsPlaingOrder,
statsType,
teamsStats,
toggleActiveEvents,
@@ -472,6 +478,6 @@ export const useMatchPage = () => {
tournamentData,
uniqEvents,
user,
- watchAllEpisodesTimer: isStatsTab ? statsWatchAllEpisodesTimer : watchAllEpisodesTimer,
+ watchAllEpisodesTimer: isStatsPlaylist ? statsWatchAllEpisodesTimer : watchAllEpisodesTimer,
}
}
diff --git a/src/features/MatchPage/store/hooks/useMatchData.tsx b/src/features/MatchPage/store/hooks/useMatchData.tsx
index 6310fe94..e36bdf13 100644
--- a/src/features/MatchPage/store/hooks/useMatchData.tsx
+++ b/src/features/MatchPage/store/hooks/useMatchData.tsx
@@ -11,7 +11,6 @@ import { usePageParams, useInterval } from 'hooks'
import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
import { useDuration } from 'features/MultiSourcePlayer/hooks/useDuration'
import { useMatchPopupStore } from 'features/MatchPopup'
-import { Tabs } from 'features/MatchSidePlaylists/config'
import { useMatchPlaylists } from './useMatchPlaylists'
import { useEvents } from './useEvents'
@@ -21,10 +20,9 @@ const MATCH_DATA_POLL_INTERVAL = 5000
type UseMatchDataArgs = {
matchProfile: MatchInfo,
- selectedTab: Tabs,
}
-export const useMatchData = ({ matchProfile: profile, selectedTab }: UseMatchDataArgs) => {
+export const useMatchData = ({ matchProfile: profile }: UseMatchDataArgs) => {
const { profileId: matchId, sportType } = usePageParams()
const { chapters } = useMatchPopupStore()
const [matchDuration, setMatchDuration] = useState(0)
@@ -35,7 +33,7 @@ export const useMatchData = ({ matchProfile: profile, selectedTab }: UseMatchDat
selectedPlaylist,
setFullMatchPlaylistDuration,
setSelectedPlaylist,
- } = useMatchPlaylists({ matchProfile: profile, selectedTab })
+ } = useMatchPlaylists({ matchProfile: profile })
const { events, fetchMatchEvents } = useEvents()
diff --git a/src/features/MatchPage/store/hooks/useMatchPlaylists.tsx b/src/features/MatchPage/store/hooks/useMatchPlaylists.tsx
index b5475f7d..f6b35156 100644
--- a/src/features/MatchPage/store/hooks/useMatchPlaylists.tsx
+++ b/src/features/MatchPage/store/hooks/useMatchPlaylists.tsx
@@ -13,7 +13,6 @@ import { usePageParams } from 'hooks/usePageParams'
import type { Playlists } from 'features/MatchPage/types'
import { buildPlaylists, FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
-import { Tabs } from 'features/MatchSidePlaylists/config'
import { usePlaylistLexics } from './usePlaylistLexics'
import { initialPlaylist, useSelectedPlaylist } from './useSelectedPlaylist'
@@ -26,14 +25,12 @@ type ArgsFetchMatchPlaylists = {
type UseMatchPlaylistsArgs = {
matchProfile: MatchInfo,
- selectedTab: Tabs,
}
const initialPlaylists = buildPlaylists(null)
export const useMatchPlaylists = ({
matchProfile: profile,
- selectedTab,
}: UseMatchPlaylistsArgs) => {
const [matchPlaylists, setMatchPlaylists] = useState(initialPlaylists)
@@ -43,7 +40,7 @@ export const useMatchPlaylists = ({
handlePlaylistClick,
selectedPlaylist,
setSelectedPlaylist,
- } = useSelectedPlaylist({ selectedTab })
+ } = useSelectedPlaylist()
const setInitialSeletedPlaylist = useCallback((playlists: Playlists) => {
setSelectedPlaylist((playlist) => {
diff --git a/src/features/MatchPage/store/hooks/useSelectedPlaylist.tsx b/src/features/MatchPage/store/hooks/useSelectedPlaylist.tsx
index a4e8caa8..96f0697d 100644
--- a/src/features/MatchPage/store/hooks/useSelectedPlaylist.tsx
+++ b/src/features/MatchPage/store/hooks/useSelectedPlaylist.tsx
@@ -21,14 +21,17 @@ export const initialPlaylist = {
episodes: [],
id: FULL_GAME_KEY,
lexic: indexLexics.full_game,
+ tab: Tabs.WATCH,
type: 0,
}
-type UseSelectedPlaylistArgs = {
- selectedTab: Tabs,
+type HandlePlaylistClickArgs = {
+ e?: MouseEvent,
+ playlist: PlaylistOption,
+ tab: Tabs,
}
-export const useSelectedPlaylist = ({ selectedTab }: UseSelectedPlaylistArgs) => {
+export const useSelectedPlaylist = () => {
const { profileId: matchId, sportType } = usePageParams()
const [selectedPlaylist, setSelectedPlaylist] = useState(initialPlaylist)
@@ -41,7 +44,11 @@ export const useSelectedPlaylist = ({ selectedTab }: UseSelectedPlaylistArgs) =>
})
), [matchId, sportType])
- const handlePlaylistClick = useCallback((playlist: PlaylistOption, e?: MouseEvent) => {
+ const handlePlaylistClick = useCallback(({
+ e,
+ playlist,
+ tab,
+ }: HandlePlaylistClickArgs) => {
e?.stopPropagation()
if (playlist === selectedPlaylist) return
@@ -50,16 +57,16 @@ export const useSelectedPlaylist = ({ selectedTab }: UseSelectedPlaylistArgs) =>
setSelectedPlaylist({
...playlist,
episodes,
+ tab,
})
})
} else {
setSelectedPlaylist({
...playlist,
- // @ts-expect-error
- tab: selectedTab,
+ tab,
})
}
- }, [fetchPlayerEpisodes, selectedPlaylist, selectedTab])
+ }, [fetchPlayerEpisodes, selectedPlaylist])
return {
handlePlaylistClick,
diff --git a/src/features/MatchPage/store/hooks/useStatsTab.tsx b/src/features/MatchPage/store/hooks/useStatsTab.tsx
index 86a35e4e..b2658dbd 100644
--- a/src/features/MatchPage/store/hooks/useStatsTab.tsx
+++ b/src/features/MatchPage/store/hooks/useStatsTab.tsx
@@ -14,12 +14,19 @@ import type { EventPlaylistOption, PlaylistOption } from 'features/MatchPage/typ
import type { TCircleAnimation } from 'features/CircleAnimationBar'
import { initialCircleAnimation } from 'features/CircleAnimationBar'
import { PlaylistTypes } from 'features/MatchPage/types'
-import { StatsType, Tabs } from 'features/MatchSidePlaylists/components/TabStats/config'
+import { StatsType, Tabs as StatsTabs } from 'features/MatchSidePlaylists/components/TabStats/config'
+import { Tabs } from 'features/MatchSidePlaylists/config'
+
import { useToggle } from 'hooks'
+type HandlePlaylistClickArgs = {
+ playlist: PlaylistOption,
+ tab: Tabs,
+}
+
type UseStatsTabArgs = {
disablePlayingEpisodes: () => void,
- handlePlaylistClick: (playlist: PlaylistOption) => void,
+ handlePlaylistClick: (args: HandlePlaylistClickArgs) => void,
matchProfile: MatchInfo,
selectedPlaylist?: PlaylistOption,
}
@@ -52,11 +59,11 @@ export const useStatsTab = ({
const [isTeamsStatsFetching, setIsTeamsStatsFetching] = useState(false)
const [stateEpisodesToPlay, setEpisodesToPlay] = useState>([])
const [filteredEvents, setFilteredEvents] = useState([])
- const [plaingOrder, setPlaingOrder] = useState(0)
+ const [playingOrder, setPlaingOrder] = useState(0)
const [isPlayFilterEpisodes, setIsPlayingFiltersEpisodes] = useState(false)
const [watchAllEpisodesTimer, setWatchAllEpisodesTimer] = useState(false)
const [circleAnimation, setCircleAnimation] = useState(initialCircleAnimation)
- const [selectedStatsTable, setSelectedStatsTable] = useState(Tabs.TEAMS)
+ const [selectedStatsTable, setSelectedStatsTable] = useState(StatsTabs.TEAMS)
const {
close: reduceTable,
@@ -92,7 +99,7 @@ export const useStatsTab = ({
episodesToPlay = stateEpisodesToPlay,
order,
}: PlayNextEpisodeArgs = {}) => {
- const currentOrder = order === 0 ? order : plaingOrder
+ const currentOrder = order === 0 ? order : playingOrder
const isLastEpisode = currentOrder === episodesToPlay.length
if (isLastEpisode) {
@@ -103,7 +110,10 @@ export const useStatsTab = ({
}
if (currentOrder !== 0) {
- handlePlaylistClick(episodesToPlay[currentOrder])
+ handlePlaylistClick({
+ playlist: episodesToPlay[currentOrder],
+ tab: Tabs.STATS,
+ })
}
setPlaingOrder(currentOrder + 1)
@@ -120,7 +130,10 @@ export const useStatsTab = ({
setWatchAllEpisodesTimer(true)
setIsPlayingFiltersEpisodes(true)
- handlePlaylistClick(episodesToPlay[0])
+ handlePlaylistClick({
+ playlist: episodesToPlay[0],
+ tab: Tabs.STATS,
+ })
playNextEpisode({ episodesToPlay, order: 0 })
}
@@ -137,9 +150,9 @@ export const useStatsTab = ({
isPlayFilterEpisodes,
isPlayersStatsFetching,
isTeamsStatsFetching,
- plaingOrder,
playEpisodes,
playNextEpisode,
+ playingOrder,
reduceTable,
selectedStatsTable,
setCircleAnimation,
diff --git a/src/features/MatchPage/types.tsx b/src/features/MatchPage/types.tsx
index b034eb36..d39d9805 100644
--- a/src/features/MatchPage/types.tsx
+++ b/src/features/MatchPage/types.tsx
@@ -17,6 +17,7 @@ export type MatchPlaylistOption = {
episodes: Episodes,
id: MatchPlaylistIds,
lexic: number | string,
+ tab?: Tabs,
type: PlaylistTypes.MATCH,
}
@@ -29,6 +30,7 @@ export type PlayerPlaylistOption = {
name_rus: string,
num: string,
start?: boolean,
+ tab?: Tabs,
type: PlaylistTypes.PLAYER,
}
@@ -37,6 +39,7 @@ export type InterviewPlaylistOption = {
id: number,
name_eng: string,
name_rus: string,
+ tab?: Tabs,
type: PlaylistTypes.INTERVIEW,
}
diff --git a/src/features/MatchSidePlaylists/components/EventsList/index.tsx b/src/features/MatchSidePlaylists/components/EventsList/index.tsx
index ca5daed4..6bbbfaca 100644
--- a/src/features/MatchSidePlaylists/components/EventsList/index.tsx
+++ b/src/features/MatchSidePlaylists/components/EventsList/index.tsx
@@ -1,5 +1,7 @@
+import { useEffect } from 'react'
+
import map from 'lodash/map'
-// import find from 'lodash/find'
+import find from 'lodash/find'
import type { Events, MatchInfo } from 'requests'
@@ -12,9 +14,9 @@ import type {
} from 'features/MatchPage/types'
import { PlaylistTypes } from 'features/MatchPage/types'
-// import { useMatchPageStore } from 'features/MatchPage/store'
-// import { useLexicsStore } from 'features/LexicsStore'
-// import { Tabs } from 'features/MatchSidePlaylists/config'
+import { useMatchPageStore } from 'features/MatchPage/store'
+import { useLexicsStore } from 'features/LexicsStore'
+import { Tabs } from 'features/MatchSidePlaylists/config'
import { isEqual } from '../../helpers'
import { EventButton } from '../EventButton'
@@ -41,68 +43,100 @@ export const EventsList = ({
profile,
selectedPlaylist,
setWatchAllEpisodesTimer,
-}: Props) => (
-
- {map(events, (event) => {
- if (!event.t && !event.pl) {
- return (
-
-
-
-
-
- )
+}: Props) => {
+ const {
+ filteredEvents,
+ isPlayingEpisode,
+ selectedTab,
+ setEpisodeInfo,
+ } = useMatchPageStore()
+ const { suffix, translate } = useLexicsStore()
+
+ useEffect(() => {
+ if (selectedPlaylist?.tab === Tabs.EVENTS && isPlayingEpisode) {
+ const {
+ e,
+ h,
+ s,
+ } = selectedPlaylist.episodes[0]
+
+ const event = find(events, {
+ e,
+ h,
+ s,
+ })
+
+ if (event) {
+ const playerName = event.pl?.[`name_${suffix}`]
+ const teamName = event.t === profile?.team1.id
+ ? profile?.team1[`name_${suffix}`]
+ : profile?.team2[`name_${suffix}`]
+
+ setEpisodeInfo({
+ episodesCount: filteredEvents.length,
+ paramName: translate(event.l),
+ playerOrTeamName: playerName || teamName || '',
+ })
}
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isPlayingEpisode, selectedPlaylist, suffix])
- const repeatedEpisodes = event.rep || []
- const eventPlaylist = {
- episodes: [{
- e: event.e,
- h: event.h,
- s: event.s,
- },
- ...repeatedEpisodes,
- ],
- id: event.n,
- type: PlaylistTypes.EVENT,
- } as EventPlaylistOption
-
- const isHomeTeam = event.t === profile?.team1.id
- const team = isHomeTeam
- ? profile?.team1
- : profile?.team2
- const eventWithoutClick = isLffClient && profile?.live
-
- const eventClick = () => {
- setWatchAllEpisodesTimer(false)
- !eventWithoutClick && onSelect(eventPlaylist)
- if (disablePlayingEpisodes) {
- disablePlayingEpisodes()
+ return (
+
+ {map(events, (event) => {
+ if (!event.t && !event.pl) {
+ return (
+
+
+
+
+
+ )
}
- // const playerName = event.pl?.[`name_${suffix}`]
- // const teamName = event.t === profile?.team1.id
- // ? profile?.team1[`name_${suffix}`]
- // : profile?.team2[`name_${suffix}`]
+ const repeatedEpisodes = event.rep || []
+ const eventPlaylist = {
+ episodes: [{
+ e: event.e,
+ h: event.h,
+ s: event.s,
+ },
+ ...repeatedEpisodes,
+ ],
+ id: event.n,
+ type: PlaylistTypes.EVENT,
+ } as EventPlaylistOption
- // setEpisodeInfo({
- // paramName: translate(event.l),
- // paramValue: filteredEvents.length,
- // playerOrTeamName: playerName || teamName || '',
- // })
- }
+ const isHomeTeam = event.t === profile?.team1.id
+ const team = isHomeTeam
+ ? profile?.team1
+ : profile?.team2
+ const eventWithoutClick = isLffClient && profile?.live
+
+ const eventClick = () => {
+ setWatchAllEpisodesTimer(false)
+ !eventWithoutClick && onSelect(eventPlaylist)
+ if (disablePlayingEpisodes) {
+ disablePlayingEpisodes()
+ }
+ }
+
+ const active = isEqual(eventPlaylist, selectedPlaylist)
+ && selectedPlaylist?.tab === selectedTab
- return (
-
-
-
- )
- })}
-
-)
+ return (
+
+
+
+ )
+ })}
+
+ )
+}
diff --git a/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx b/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx
index f742507f..fcb98356 100644
--- a/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx
+++ b/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx
@@ -6,12 +6,18 @@ import styled, { css } from 'styled-components/macro'
import isEmpty from 'lodash/isEmpty'
import map from 'lodash/map'
-import { isMobileDevice } from 'config/userAgent'
+import { isMobileDevice } from 'config'
-import type { MatchPlaylistOptions, PlaylistOption } from 'features/MatchPage/types'
+import type {
+ MatchPlaylistOption,
+ MatchPlaylistOptions,
+ PlaylistOption,
+} from 'features/MatchPage/types'
import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
import { isEqual } from 'features/MatchSidePlaylists/helpers'
import { T9n } from 'features/T9n'
+import { useMatchPageStore } from 'features/MatchPage/store'
+import { useLexicsStore } from 'features/LexicsStore'
import { PlayButton } from '../PlayButton'
@@ -54,26 +60,41 @@ export const MatchPlaylists = forwardRef(
selectedMathPlaylist,
}: Props,
ref: ForwardedRef,
- ) => (
-
- {
- map(playlists, (playlist) => (
- -
- onSelect?.(playlist)}
+ ) => {
+ const { setEpisodeInfo } = useMatchPageStore()
+ const { translate } = useLexicsStore()
+
+ const handleButtonClick = (playlist: MatchPlaylistOption) => {
+ onSelect?.(playlist)
+
+ if (playlist.id === FULL_GAME_KEY) return
+
+ setEpisodeInfo({
+ paramName: translate(playlist.lexic),
+ })
+ }
+
+ return (
+
+ {
+ map(playlists, (playlist) => (
+ -
-
-
-
- ))
- }
-
- ),
+ handleButtonClick(playlist)}
+ >
+
+
+
+ ))
+ }
+
+ )
+ },
)
diff --git a/src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx b/src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx
index 38dcd4db..e6bd8b3c 100644
--- a/src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx
+++ b/src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx
@@ -15,6 +15,8 @@ import type {
} from 'features/MatchPage/types'
import { Name } from 'features/Name'
+import { useMatchPageStore } from 'features/MatchPage/store'
+import { useLexicsStore } from 'features/LexicsStore'
import { isEqual } from '../../helpers'
@@ -52,6 +54,15 @@ export const PlayersPlaylists = ({
}: Props) => {
const { sportType } = usePageParams()
const [selectedTeam, setSelectedTeam] = useState(Teams.TEAM1)
+ const { setEpisodeInfo } = useMatchPageStore()
+ const { suffix } = useLexicsStore()
+
+ const handleButtonClick = (player: PlayerPlaylistOption) => {
+ onSelect(player)
+ setEpisodeInfo({
+ playerOrTeamName: player[`name_${suffix}`],
+ })
+ }
if (!profile) return null
@@ -80,7 +91,7 @@ export const PlayersPlaylists = ({
onSelect(player)}
+ onClick={() => handleButtonClick(player)}
leftContent={(
{
paramId: null,
})
- const { plaingOrder, setCircleAnimation } = useMatchPageStore()
+ const { playingOrder, setCircleAnimation } = useMatchPageStore()
const {
getPlayerName,
@@ -47,9 +47,9 @@ export const usePlayersTable = ({ teamId }: PlayersTableProps) => {
useEffect(() => {
setCircleAnimation((state) => ({
...state,
- plaingOrder,
+ playingOrder,
}))
- }, [setCircleAnimation, plaingOrder])
+ }, [setCircleAnimation, playingOrder])
return {
containerRef,
diff --git a/src/features/MatchSidePlaylists/components/PlayersTable/hooks/useTable.tsx b/src/features/MatchSidePlaylists/components/PlayersTable/hooks/useTable.tsx
index 5b154ae9..e9b1e60d 100644
--- a/src/features/MatchSidePlaylists/components/PlayersTable/hooks/useTable.tsx
+++ b/src/features/MatchSidePlaylists/components/PlayersTable/hooks/useTable.tsx
@@ -197,8 +197,8 @@ export const useTable = ({
playStatsEpisodes(events)
setEpisodeInfo({
+ episodesCount: param.val!,
paramName: translate(param.lexic),
- paramValue: param.val!,
playerOrTeamName: getPlayerName(player),
})
// eslint-disable-next-line no-empty
diff --git a/src/features/MatchSidePlaylists/components/TabEvents/index.tsx b/src/features/MatchSidePlaylists/components/TabEvents/index.tsx
index 5b30a82a..c8a97fdf 100644
--- a/src/features/MatchSidePlaylists/components/TabEvents/index.tsx
+++ b/src/features/MatchSidePlaylists/components/TabEvents/index.tsx
@@ -47,8 +47,8 @@ export const TabEvents = ({
isLiveMatch,
likeImage,
likeToggle,
- plaingOrder,
playEpisodes,
+ playingOrder,
reversedGroupEvents,
setCircleAnimation,
setReversed,
@@ -61,9 +61,9 @@ export const TabEvents = ({
useEffect(() => {
setCircleAnimation((state) => ({
...state,
- plaingOrder,
+ playingOrder,
}))
- }, [setCircleAnimation, plaingOrder])
+ }, [setCircleAnimation, playingOrder])
if (!profile) return null
diff --git a/src/features/MatchSidePlaylists/components/TeamsStatsTable/Cell.tsx b/src/features/MatchSidePlaylists/components/TeamsStatsTable/Cell.tsx
index a6ca0868..9b29e6fd 100644
--- a/src/features/MatchSidePlaylists/components/TeamsStatsTable/Cell.tsx
+++ b/src/features/MatchSidePlaylists/components/TeamsStatsTable/Cell.tsx
@@ -102,8 +102,8 @@ export const Cell = ({
playStatsEpisodes(events)
setEpisodeInfo({
+ episodesCount: param.val!,
paramName,
- paramValue: param.val!,
playerOrTeamName: teamId === profile?.team1.id
? profile.team1[`name_${suffix}`]
: profile?.team2[`name_${suffix}`] || '',
diff --git a/src/features/MatchSidePlaylists/components/TeamsStatsTable/hooks.tsx b/src/features/MatchSidePlaylists/components/TeamsStatsTable/hooks.tsx
index 257b8ca2..c3f1bf7d 100644
--- a/src/features/MatchSidePlaylists/components/TeamsStatsTable/hooks.tsx
+++ b/src/features/MatchSidePlaylists/components/TeamsStatsTable/hooks.tsx
@@ -7,7 +7,7 @@ import { useMatchPageStore } from 'features/MatchPage/store'
export const useTeamsStatsTable = () => {
const {
getFirstClickableParam,
- plaingOrder,
+ playingOrder,
profile,
setCircleAnimation,
teamsStats,
@@ -22,9 +22,9 @@ export const useTeamsStatsTable = () => {
useEffect(() => {
setCircleAnimation((state) => ({
...state,
- plaingOrder,
+ playingOrder,
}))
- }, [setCircleAnimation, plaingOrder])
+ }, [setCircleAnimation, playingOrder])
return {
firstClickableParam: getFirstClickableParam(teamsStats),
diff --git a/src/features/MultiSourcePlayer/hooks/index.tsx b/src/features/MultiSourcePlayer/hooks/index.tsx
index 8851448b..27951bda 100644
--- a/src/features/MultiSourcePlayer/hooks/index.tsx
+++ b/src/features/MultiSourcePlayer/hooks/index.tsx
@@ -91,7 +91,7 @@ export const useMultiSourcePlayer = ({
isPlayFilterEpisodes,
isPlayingEpisode,
matchPlaylists,
- plaingOrder,
+ playingOrder,
playingProgress,
playNextEpisode,
selectedPlaylist,
@@ -245,6 +245,7 @@ export const useMultiSourcePlayer = ({
const backToPausedTime = useCallback(() => {
if (selectedPlaylist?.id !== FULL_GAME_KEY) {
+ // @ts-expect-error
handlePlaylistClick(matchPlaylists.match[0])
}
@@ -273,9 +274,24 @@ export const useMultiSourcePlayer = ({
setPlayerState({ playing: false })
}
+ const restartVideo = () => {
+ // @ts-expect-error
+ handlePlaylistClick(matchPlaylists.match[0])
+ }
+
const stopPlayingEpisodes = () => {
disablePlayingEpisodes()
- backToPausedTime()
+ restartVideo()
+ setTimeout(() => {
+ setPlayerState((state) => ({
+ activeChapterIndex: pausedData.activeChapterIndex,
+ playedProgress: pausedData.playedProgress,
+ seek: {
+ ...state.seek,
+ [pausedData.activePlayer]: pausedData.playedProgress / 1000,
+ },
+ }))
+ }, 1000)
}
useEffect(() => {
@@ -414,18 +430,18 @@ export const useMultiSourcePlayer = ({
elem[1] + 1,
))
- if (index !== -1 && ordersObj.current[plaingOrder] !== index) {
+ if (index !== -1 && ordersObj.current[playingOrder] !== index) {
ordersObj.current = {
...ordersObj.current,
- [plaingOrder]: index,
+ [playingOrder]: index,
}
}
- return plaingOrder + sum(values(ordersObj.current))
+ return playingOrder + sum(values(ordersObj.current))
}
setCurrentPlayingOrder(getCurrentPlayingOrder())
- }, [getActiveChapter, isPlayingEpisode, plaingOrder, playingProgress])
+ }, [getActiveChapter, isPlayingEpisode, playingOrder, playingProgress])
useEffect(() => {
if (!isPlayingEpisode) {
diff --git a/src/features/MultiSourcePlayer/index.tsx b/src/features/MultiSourcePlayer/index.tsx
index 8922cc80..135e4ea1 100644
--- a/src/features/MultiSourcePlayer/index.tsx
+++ b/src/features/MultiSourcePlayer/index.tsx
@@ -117,16 +117,18 @@ export const MultiSourcePlayer = (props: Props) => {
{isMobileDevice
? (
- {episodeInfo.playerOrTeamName}
{episodeInfo.paramName}
+ {episodeInfo.playerOrTeamName}
+ {episodeInfo.playerOrTeamName &&
}
+ {episodeInfo.paramName}
)
- : `${episodeInfo.playerOrTeamName}${episodeInfo.playerOrTeamName ? ' - ' : ''}${episodeInfo.paramName}`}
+ : `${episodeInfo.playerOrTeamName || ''}${episodeInfo.paramName && episodeInfo.playerOrTeamName ? ' - ' : ''}${episodeInfo.paramName || ''}`}
{currentPlayingOrder > 0 && (
{currentPlayingOrder}
/
- {episodeInfo.paramValue}
+ {episodeInfo.episodesCount}
)}
diff --git a/src/features/StreamPlayer/hooks/index.tsx b/src/features/StreamPlayer/hooks/index.tsx
index 22277802..abe8ae2f 100644
--- a/src/features/StreamPlayer/hooks/index.tsx
+++ b/src/features/StreamPlayer/hooks/index.tsx
@@ -109,12 +109,12 @@ export const useVideoPlayer = ({
isPlayFilterEpisodes,
isPlayingEpisode,
matchPlaylists,
+ playingOrder,
playingProgress,
playNextEpisode,
selectedPlaylist,
setCircleAnimation,
setPlayingProgress,
- statsPlaingOrder,
} = useMatchPageStore()
const { isOpen } = useTour()
@@ -142,7 +142,7 @@ export const useVideoPlayer = ({
// временно закоментил, если ничего не сломается, удалю
// const [isLivePlaying, setIsLivePlaying] = useState(false)
const [isPausedTime, setIsPausedTime] = useState(false)
- const [pausedProgress, setPausedProgress] = useState(0)
+ const pausedProgress = useRef(0)
const getActiveChapter = useCallback(
(index: number = activeChapterIndex) => chapters[index],
@@ -173,18 +173,18 @@ export const useVideoPlayer = ({
elem[1] + 1,
))
- if (index !== -1 && ordersObj.current[statsPlaingOrder] !== index) {
+ if (index !== -1 && ordersObj.current[playingOrder] !== index) {
ordersObj.current = {
...ordersObj.current,
- [statsPlaingOrder]: index,
+ [playingOrder]: index,
}
}
- return statsPlaingOrder + sum(values(ordersObj.current))
+ return playingOrder + sum(values(ordersObj.current))
}
setCurrentPlayingOrder(getCurrentPlayingOrder())
- }, [getActiveChapter, isPlayingEpisode, statsPlaingOrder, playingProgress])
+ }, [getActiveChapter, isPlayingEpisode, playingOrder, playingProgress])
useEffect(() => {
if (!isPlayingEpisode) {
@@ -342,7 +342,8 @@ export const useVideoPlayer = ({
}
const liveProgressMs = Math.max(duration - BUFFERING_TIME, 0)
- setPlayerState({ playedProgress: pausedProgress, seek: pausedProgress / 1000 })
+
+ setPlayerState({ playedProgress: pausedProgress.current, seek: pausedProgress.current / 1000 })
if (liveProgressMs > 0) setIsPausedTime(false)
// eslint-disable-next-line
}, [
@@ -355,12 +356,18 @@ export const useVideoPlayer = ({
const stopPlayingEpisodes = () => {
disablePlayingEpisodes()
- backToPausedTime()
+ restartVideo()
+ setTimeout(() => {
+ setPlayerState({
+ playedProgress: pausedProgress.current,
+ seek: pausedProgress.current / 1000,
+ })
+ }, 100)
}
useEffect(() => {
if (chapters[0]?.isFullMatchChapter) {
- setPausedProgress(playedProgress + chapters[0].startOffsetMs)
+ pausedProgress.current = playedProgress + chapters[0].startOffsetMs
}
// eslint-disable-next-line
}, [selectedPlaylist])
diff --git a/src/features/StreamPlayer/index.tsx b/src/features/StreamPlayer/index.tsx
index 5d4bfd41..e81c6261 100644
--- a/src/features/StreamPlayer/index.tsx
+++ b/src/features/StreamPlayer/index.tsx
@@ -126,16 +126,18 @@ export const StreamPlayer = (props: Props) => {
{isMobileDevice
? (
- {episodeInfo.playerOrTeamName}
{episodeInfo.paramName}
+ {episodeInfo.playerOrTeamName}
+ {episodeInfo.playerOrTeamName &&
}
+ {episodeInfo.paramName}
)
- : `${episodeInfo.playerOrTeamName}${episodeInfo.playerOrTeamName ? ' - ' : ''}${episodeInfo.paramName}`}
+ : `${episodeInfo.playerOrTeamName || ''}${episodeInfo.paramName && episodeInfo.playerOrTeamName ? ' - ' : ''}${episodeInfo.paramName || ''}`}
{currentPlayingOrder > 0 && (
{currentPlayingOrder}
- {episodeInfo.paramValue}
+ {episodeInfo.episodesCount}
)}
diff --git a/src/features/StreamPlayer/styled.tsx b/src/features/StreamPlayer/styled.tsx
index f12002d5..7e8a36f6 100644
--- a/src/features/StreamPlayer/styled.tsx
+++ b/src/features/StreamPlayer/styled.tsx
@@ -406,7 +406,7 @@ export const Next = styled(Prev)`
export const TeamsDetailsWrapper = styled.div`
position: absolute;
- top: 20px;
+ top: 40px;
left: 15px;
font-size: 16px;
color: #FFFFFF;
@@ -434,8 +434,10 @@ export const EpisodeInfo = styled.div`
display: flex;
align-items: center;
gap: max(0.755rem, 12px);
+ padding: 2px;
font-weight: 600;
color: ${({ theme }) => theme.colors.white};
+ background-color: rgba(0, 0, 0, 0.3);
z-index: 1;
`