feat(in-570): episodes playback changes

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,
   ])
 

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 })

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,

src/features/MatchPage/components/FinishedMatch/index.tsx

@@ -66,6 +66,7 @@ export const FinishedMatch = () => {
 
       <MatchSidePlaylists
         selectedPlaylist={selectedPlaylist}
+        // @ts-expect-error
         onSelect={onPlaylistSelect}
       />
     </Fragment>

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,

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<PlayingData>(initPlayingData)
-  const [plaingOrder, setPlaingOrder] = useState(0)
+  const [playingOrder, setPlaingOrder] = useState(0)
   const [isPlayFilterEpisodes, setIsPlayingFiltersEpisodes] = useState(false)
   const [selectedTab, setSelectedTab] = useState<Tabs>(Tabs.WATCH)
   const [circleAnimation, setCircleAnimation] = useState<TCircleAnimation>(initialCircleAnimation)
   const [episodeInfo, setEpisodeInfo] = useState<EpisodeInfo>({
+    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,
   }
 }

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()
 

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<Playlists>(initialPlaylists)
 
@@ -43,7 +40,7 @@ export const useMatchPlaylists = ({
     handlePlaylistClick,
     selectedPlaylist,
     setSelectedPlaylist,
-  } = useSelectedPlaylist({ selectedTab })
+  } = useSelectedPlaylist()
 
   const setInitialSeletedPlaylist = useCallback((playlists: Playlists) => {
     setSelectedPlaylist((playlist) => {

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<PlaylistOption>(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,

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<Array<EventPlaylistOption>>([])
   const [filteredEvents, setFilteredEvents] = useState<Events>([])
-  const [plaingOrder, setPlaingOrder] = useState(0)
+  const [playingOrder, setPlaingOrder] = useState(0)
   const [isPlayFilterEpisodes, setIsPlayingFiltersEpisodes] = useState(false)
   const [watchAllEpisodesTimer, setWatchAllEpisodesTimer] = useState(false)
   const [circleAnimation, setCircleAnimation] = useState<TCircleAnimation>(initialCircleAnimation)
-  const [selectedStatsTable, setSelectedStatsTable] = useState<Tabs>(Tabs.TEAMS)
+  const [selectedStatsTable, setSelectedStatsTable] = useState<StatsTabs>(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,

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,
 }
 

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) => (
-  <List>
-    {map(events, (event) => {
-      if (!event.t && !event.pl) {
-        return (
-          <TextEvent key={event.n}>
-            <BlockTitle>
-              <T9n t={event.l} />
-            </BlockTitle>
-          </TextEvent>
-        )
+}: 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 (
+    <List>
+      {map(events, (event) => {
+        if (!event.t && !event.pl) {
+          return (
+            <TextEvent key={event.n}>
+              <BlockTitle>
+                <T9n t={event.l} />
+              </BlockTitle>
+            </TextEvent>
+          )
         }
 
-        // 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 (
-        <Event key={event.n}>
-          <EventButton
-            active={isEqual(eventPlaylist, selectedPlaylist)}
-            event={event}
-            isHomeTeam={isHomeTeam}
-            onClick={eventClick}
-            team={team}
-          />
-        </Event>
-      )
-    })}
-  </List>
-)
+        return (
+          <Event key={event.n}>
+            <EventButton
+              active={active}
+              event={event}
+              isHomeTeam={isHomeTeam}
+              onClick={eventClick}
+              team={team}
+            />
+          </Event>
+        )
+      })}
+    </List>
+  )
+}

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<HTMLUListElement>,
-  ) => (
-    <List ref={ref}>
-      {
-        map(playlists, (playlist) => (
-          <Item
-            key={playlist.id}
-            id={`match_watch_${playlist.id}${live ? '_live' : ''}`}
-          >
-            <PlayButton
-              duration={playlist.duration}
-              active={isEqual(playlist, selectedMathPlaylist)}
-              live={live}
-              disabled={playlist.id !== FULL_GAME_KEY && isEmpty(playlist.episodes)}
-              onClick={() => 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 (
+      <List ref={ref}>
+        {
+          map(playlists, (playlist) => (
+            <Item
+              key={playlist.id}
+              id={`match_watch_${playlist.id}${live ? '_live' : ''}`}
             >
-              <T9n t={playlist.lexic} />
-            </PlayButton>
-          </Item>
-        ))
-      }
-    </List>
-  ),
+              <PlayButton
+                duration={playlist.duration}
+                active={isEqual(playlist, selectedMathPlaylist)}
+                live={live}
+                disabled={playlist.id !== FULL_GAME_KEY && isEmpty(playlist.episodes)}
+                onClick={() => handleButtonClick(playlist)}
+              >
+                <T9n t={playlist.lexic} />
+              </PlayButton>
+            </Item>
+          ))
+        }
+      </List>
+    )
+  },
 )

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 = ({
               <PlayButton
                 active={isEqual(player, selectedMathPlaylist)}
                 duration={player.dur}
-                onClick={() => onSelect(player)}
+                onClick={() => handleButtonClick(player)}
                 leftContent={(
                   <PlayerAvatar
                     id={player.id}

src/features/MatchSidePlaylists/components/PlayersTable/hooks/index.tsx

@@ -13,7 +13,7 @@ export const usePlayersTable = ({ teamId }: PlayersTableProps) => {
     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,

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

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
 

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}`] || '',

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),

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) {

src/features/MultiSourcePlayer/index.tsx

@@ -117,16 +117,18 @@ export const MultiSourcePlayer = (props: Props) => {
             {isMobileDevice
               ? (
                 <Fragment>
-                  {episodeInfo.playerOrTeamName} <br /> {episodeInfo.paramName}
+                  {episodeInfo.playerOrTeamName}
+                  {episodeInfo.playerOrTeamName && <br />}
+                  {episodeInfo.paramName}
                 </Fragment>
               )
-              : `${episodeInfo.playerOrTeamName}${episodeInfo.playerOrTeamName ? ' - ' : ''}${episodeInfo.paramName}`}
+              : `${episodeInfo.playerOrTeamName || ''}${episodeInfo.paramName && episodeInfo.playerOrTeamName ? ' - ' : ''}${episodeInfo.paramName || ''}`}
           </EpisodeInfoName>
           {currentPlayingOrder > 0 && (
             <EpisodeInfoOrder>
               {currentPlayingOrder}
               <EpisodeInfoDivider>/</EpisodeInfoDivider>
-              {episodeInfo.paramValue}
+              {episodeInfo.episodesCount}
             </EpisodeInfoOrder>
           )}
           <CloseButton onClick={stopPlayingEpisodes} />

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])

src/features/StreamPlayer/index.tsx

@@ -126,16 +126,18 @@ export const StreamPlayer = (props: Props) => {
             {isMobileDevice
               ? (
                 <Fragment>
-                  {episodeInfo.playerOrTeamName} <br /> {episodeInfo.paramName}
+                  {episodeInfo.playerOrTeamName}
+                  {episodeInfo.playerOrTeamName && <br />}
+                  {episodeInfo.paramName}
                 </Fragment>
               )
-              : `${episodeInfo.playerOrTeamName}${episodeInfo.playerOrTeamName ? ' - ' : ''}${episodeInfo.paramName}`}
+              : `${episodeInfo.playerOrTeamName || ''}${episodeInfo.paramName && episodeInfo.playerOrTeamName ? ' - ' : ''}${episodeInfo.paramName || ''}`}
           </EpisodeInfoName>
           {currentPlayingOrder > 0 && (
             <EpisodeInfoOrder>
               {currentPlayingOrder}
               <EpisodeInfoDivider />
-              {episodeInfo.paramValue}
+              {episodeInfo.episodesCount}
             </EpisodeInfoOrder>
           )}
           <CloseButton onClick={stopPlayingEpisodes} />

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;
 `