From 0750331e6a4accab49f9231202b8997905f87dd1 Mon Sep 17 00:00:00 2001 From: Ruslan Khayrullin Date: Thu, 4 May 2023 19:02:28 +0500 Subject: [PATCH] feat(in-570): episodes playback changes --- src/features/CircleAnimationBar/index.tsx | 12 +- .../components/FinishedMatch/hooks/index.tsx | 3 +- .../FinishedMatch/hooks/useEpisodes.tsx | 2 +- .../components/FinishedMatch/index.tsx | 1 + .../components/LiveMatch/hooks/index.tsx | 11 +- src/features/MatchPage/store/hooks/index.tsx | 68 ++++---- .../MatchPage/store/hooks/useMatchData.tsx | 6 +- .../store/hooks/useMatchPlaylists.tsx | 5 +- .../store/hooks/useSelectedPlaylist.tsx | 21 ++- .../MatchPage/store/hooks/useStatsTab.tsx | 29 +++- src/features/MatchPage/types.tsx | 3 + .../components/EventsList/index.tsx | 160 +++++++++++------- .../components/MatchPlaylists/index.tsx | 67 +++++--- .../components/PlayersPlaylists/index.tsx | 13 +- .../components/PlayersTable/hooks/index.tsx | 6 +- .../PlayersTable/hooks/useTable.tsx | 2 +- .../components/TabEvents/index.tsx | 6 +- .../components/TeamsStatsTable/Cell.tsx | 2 +- .../components/TeamsStatsTable/hooks.tsx | 6 +- .../MultiSourcePlayer/hooks/index.tsx | 28 ++- src/features/MultiSourcePlayer/index.tsx | 8 +- src/features/StreamPlayer/hooks/index.tsx | 25 ++- src/features/StreamPlayer/index.tsx | 8 +- src/features/StreamPlayer/styled.tsx | 4 +- 24 files changed, 312 insertions(+), 184 deletions(-) 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; `