You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
spa_instat_tv/src/features/MatchPage/store/hooks/useStatsTab.tsx

144 lines
4.1 KiB

import { useState, useEffect } from 'react'
import map from 'lodash/map'
import isEqual from 'lodash/isEqual'
import type {
Episode,
Episodes,
Events,
MatchInfo,
} from 'requests'
import type { EventPlaylistOption, PlaylistOption } from 'features/MatchPage/types'
import type { TCircleAnimation } from 'features/CircleAnimationBar'
import { initialCircleAnimation } from 'features/CircleAnimationBar'
import { PlaylistTypes } from 'features/MatchPage/types'
import { StatsType } from 'features/MatchSidePlaylists/components/TabStats/config'
type UseStatsTabArgs = {
disablePlayingEpisodes: () => void,
handlePlaylistClick: (playlist: PlaylistOption) => void,
matchProfile: MatchInfo,
selectedPlaylist?: PlaylistOption,
}
type PlayNextEpisodeArgs = {
episodesToPlay?: Array<EventPlaylistOption>,
order?: number,
}
const EPISODE_TIMESTAMP_OFFSET = 0.001
const addOffset = ({
e,
h,
s,
}: Episode) => ({
e: e + EPISODE_TIMESTAMP_OFFSET,
h,
s: s + EPISODE_TIMESTAMP_OFFSET,
})
export const useStatsTab = ({
disablePlayingEpisodes,
handlePlaylistClick,
matchProfile,
selectedPlaylist,
}: UseStatsTabArgs) => {
const [statsType, setStatsType] = useState<StatsType>(StatsType.FINAL_STATS)
const [isPlayersStatsFetching, setIsPlayersStatsFetching] = useState(false)
const [isTeamsStatsFetching, setIsTeamsStatsFetching] = useState(false)
const [stateEpisodesToPlay, setEpisodesToPlay] = useState<Array<EventPlaylistOption>>([])
const [filteredEvents, setFilteredEvents] = useState<Events>([])
const [plaingOrder, setPlaingOrder] = useState(0)
const [isPlayFilterEpisodes, setIsPlayingFiltersEpisodes] = useState(false)
const [watchAllEpisodesTimer, setWatchAllEpisodesTimer] = useState(false)
const [circleAnimation, setCircleAnimation] = useState<TCircleAnimation>(initialCircleAnimation)
const isFinalStatsType = statsType === StatsType.FINAL_STATS
const toggleStatsType = () => {
const newStatsType = isFinalStatsType ? StatsType.CURRENT_STATS : StatsType.FINAL_STATS
setStatsType(newStatsType)
setIsTeamsStatsFetching(true)
setIsPlayersStatsFetching(true)
}
const getEpisodesToPlay = (episodes: Episodes) => map(episodes, (episode, i) => ({
episodes: [
/** При проигрывании нового эпизода с такими же e и s, как у текущего
воспроизведение начинается не с начала, чтобы пофиксить это добавляем
небольшой оффсет
*/
isEqual(episode, selectedPlaylist?.episodes[0])
? addOffset(episode)
: episode,
],
id: i,
type: PlaylistTypes.EVENT,
})) as Array<EventPlaylistOption>
const playNextEpisode = ({
order,
episodesToPlay = stateEpisodesToPlay,
}: PlayNextEpisodeArgs = {}) => {
const currentOrder = order === 0 ? order : plaingOrder
const isLastEpisode = currentOrder === episodesToPlay.length
if (isLastEpisode) {
setPlaingOrder(0)
setIsPlayingFiltersEpisodes(false)
return
}
if (currentOrder !== 0) {
handlePlaylistClick(episodesToPlay[currentOrder])
}
setPlaingOrder(currentOrder + 1)
}
const playEpisodes = (episodes: Episodes) => {
disablePlayingEpisodes()
const episodesToPlay = getEpisodesToPlay(episodes)
setEpisodesToPlay(episodesToPlay)
setFilteredEvents(episodes as Events)
setWatchAllEpisodesTimer(true)
setIsPlayingFiltersEpisodes(true)
handlePlaylistClick(episodesToPlay[0])
playNextEpisode({ episodesToPlay, order: 0 })
}
useEffect(() => {
if (matchProfile?.live) {
setStatsType(StatsType.CURRENT_STATS)
}
}, [matchProfile?.live])
return {
circleAnimation,
filteredEvents,
isPlayFilterEpisodes,
isPlayersStatsFetching,
isTeamsStatsFetching,
plaingOrder,
playEpisodes,
playNextEpisode,
setCircleAnimation,
setIsPlayersStatsFetching,
setIsPlayingFiltersEpisodes,
setIsTeamsStatsFetching,
setPlaingOrder,
setWatchAllEpisodesTimer,
statsType,
toggleStatsType,
watchAllEpisodesTimer,
}
}