From e83c4032a9c55209476f02fd287caebe38fe5698 Mon Sep 17 00:00:00 2001
From: Ruslan Khayrullin <ruslfm08@gmail.com>
Date: Fri, 14 Apr 2023 17:05:07 +0500
Subject: [PATCH] feat(in-428): episodes playback changes

---
 .gitignore                                    |  3 +
 Makefile                                      |  4 +
 package.json                                  |  2 +-
 .../components/FinishedMatch/helpers.tsx      |  1 +
 .../components/LiveMatch/helpers.tsx          |  1 +
 src/features/MatchPage/store/hooks/index.tsx  | 47 +++++++++++-
 .../MatchPage/store/hooks/useMatchData.tsx    | 13 +++-
 .../store/hooks/useMatchPlaylists.tsx         | 13 +++-
 .../MatchPage/store/hooks/usePlayersStats.tsx |  4 +-
 .../store/hooks/useSelectedPlaylist.tsx       | 15 +++-
 src/features/MatchPage/types.tsx              |  2 +
 .../components/CircleAnimationBar/index.tsx   |  7 +-
 .../components/EventsList/index.tsx           | 16 ++++
 .../components/PlayersTable/hooks/index.tsx   |  1 +
 .../PlayersTable/hooks/useTable.tsx           | 38 ++++++----
 .../components/PlayersTable/index.tsx         |  4 +-
 .../components/TeamsStatsTable/Cell.tsx       | 31 +++++---
 .../MultiSourcePlayer/hooks/index.tsx         | 66 ++++++++++++++++-
 src/features/MultiSourcePlayer/index.tsx      | 33 +++++++++
 src/features/MultiSourcePlayer/types.tsx      |  1 +
 .../PopupComponents/CloseButton/index.tsx     |  3 +
 .../components/Chapters/styled.tsx            |  6 --
 .../components/ProgressBar/styled.tsx         |  7 +-
 src/features/StreamPlayer/hooks/index.tsx     | 65 ++++++++++++++++-
 src/features/StreamPlayer/index.tsx           | 37 +++++++++-
 src/features/StreamPlayer/styled.tsx          | 73 ++++++++++++++++++-
 src/features/StreamPlayer/types.tsx           |  4 +
 src/requests/getMatchPlaylists.tsx            |  3 +
 28 files changed, 439 insertions(+), 61 deletions(-)

diff --git a/.gitignore b/.gitignore
index 8dd351c6..a511bb85 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,3 +34,6 @@ yarn.lock
 # IntelliJ IDEA products
 .idea
 .eslintcache
+
+# ssl keys
+*.pem
diff --git a/Makefile b/Makefile
index 04944847..e663d6c5 100644
--- a/Makefile
+++ b/Makefile
@@ -201,3 +201,7 @@ test:
 	npm test
 
 .PHONY: test
+
+generate-ssl-keys:
+	openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365
+	
\ No newline at end of file
diff --git a/package.json b/package.json
index 6804ff7f..106c62f6 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "start": "react-scripts start",
-    "start-https": "export HTTPS=true&&SSL_CRT_FILE=cert.pem&&SSL_KEY_FILE=key.pem react-scripts start",
+    "start-https": "export PORT=443 HTTPS=true&&SSL_CRT_FILE=cert.pem&&SSL_KEY_FILE=key.pem react-scripts start",
     "build": "GENERATE_SOURCEMAP=false react-scripts build && gzipper --verbose ./build",
     "test": "react-scripts test --testMatch '**/__tests__/*' --passWithNoTests --watchAll=false",
     "test:watch": "react-scripts test --testMatch '**/__tests__/*'",
diff --git a/src/features/MatchPage/components/FinishedMatch/helpers.tsx b/src/features/MatchPage/components/FinishedMatch/helpers.tsx
index 46c5663d..f99f3fb0 100644
--- a/src/features/MatchPage/components/FinishedMatch/helpers.tsx
+++ b/src/features/MatchPage/components/FinishedMatch/helpers.tsx
@@ -105,6 +105,7 @@ const getPlaylistChapters = (videos: Array<Video>, episodes: Episodes) => {
       const episodeDuration = (episode.e - episode.s) * 1000
       const prevVideoEndMs = last(acc)?.endMs || 0
       const nextChapter = {
+        count: episode.c,
         duration: episodeDuration,
         endMs: prevVideoEndMs + episodeDuration,
         endOffsetMs: episode.e * 1000,
diff --git a/src/features/MatchPage/components/LiveMatch/helpers.tsx b/src/features/MatchPage/components/LiveMatch/helpers.tsx
index 165601ab..cb7ec25a 100644
--- a/src/features/MatchPage/components/LiveMatch/helpers.tsx
+++ b/src/features/MatchPage/components/LiveMatch/helpers.tsx
@@ -86,6 +86,7 @@ const getPlaylistChapters = ({
     const prevVideoEndMs = last(acc)?.endMs ?? 0
 
     const nextChapter: Chapter = {
+      count: episode.c,
       duration: episodeDuration,
       endMs: prevVideoEndMs + episodeDuration,
       endOffsetMs: (boundStart + episode.e) * 1000,
diff --git a/src/features/MatchPage/store/hooks/index.tsx b/src/features/MatchPage/store/hooks/index.tsx
index f748a7c2..25ccab08 100644
--- a/src/features/MatchPage/store/hooks/index.tsx
+++ b/src/features/MatchPage/store/hooks/index.tsx
@@ -16,6 +16,7 @@ import { Tabs } from 'features/MatchSidePlaylists/config'
 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 type { MatchInfo } from 'requests/getMatchInfo'
 import { getMatchInfo } from 'requests/getMatchInfo'
@@ -46,6 +47,12 @@ type PlayingData = {
   },
 }
 
+type EpisodeInfo = {
+  paramName: string,
+  paramValue?: number,
+  playerOrTeamName: string,
+}
+
 const initPlayingData: PlayingData = {
   player: {
     id: null,
@@ -69,6 +76,11 @@ export const useMatchPage = () => {
   const [isPlayFilterEpisodes, setIsPlayingFiltersEpisodes] = useState(false)
   const [selectedTab, setSelectedTab] = useState<Tabs>(Tabs.WATCH)
   const [circleAnimation, setCircleAnimation] = useState<TCircleAnimation>(initialCircleAnimation)
+  const [episodeInfo, setEpisodeInfo] = useState<EpisodeInfo>({
+    paramName: '',
+    paramValue: 0,
+    playerOrTeamName: '',
+  })
 
   const isStatsTab = selectedTab === Tabs.STATS
 
@@ -100,10 +112,14 @@ export const useMatchPage = () => {
     matchPlaylists,
     selectedPlaylist,
     setFullMatchPlaylistDuration,
-  } = useMatchData(matchProfile)
+  } = useMatchData({ matchProfile, selectedTab })
 
   const profile = matchProfile
 
+  const isPlayingEpisode = selectedPlaylist.type === PlaylistTypes.EVENT
+    && selectedPlaylist.tab === Tabs.STATS
+    && selectedTab === Tabs.STATS
+
   const {
     activeEvents,
     activeFirstTeamPlayers,
@@ -214,12 +230,34 @@ export const useMatchPage = () => {
     userInfo,
   ])
 
-  const disablePlayingEpisodes = () => {
+  const disablePlayingStatsEpisodes = () => {
+    setStatsIsPlayinFiltersEpisodes(false)
+    setStatsWatchAllEpisodesTimer(false)
+    setStatsCircleAnimation(initialCircleAnimation)
+    setStatsPlaingOrder(0)
+  }
+
+  const disablePlayingPlaysEpisodes = () => {
     setIsPlayingFiltersEpisodes(false)
     setWatchAllEpisodesTimer(false)
     setCircleAnimation(initialCircleAnimation)
+    setPlaingOrder(0)
+  }
+
+  const disablePlayingEpisodes = () => {
+    isStatsTab ? disablePlayingStatsEpisodes() : disablePlayingPlaysEpisodes()
   }
 
+  useEffect(() => {
+    if (selectedPlaylist.type !== PlaylistTypes.EVENT) {
+      disablePlayingStatsEpisodes()
+      disablePlayingPlaysEpisodes()
+    } else {
+      selectedTab === Tabs.EVENTS ? disablePlayingStatsEpisodes() : disablePlayingPlaysEpisodes()
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedPlaylist])
+
   const {
     circleAnimation: statsCircleAnimation,
     filteredEvents: statsFilteredEvents,
@@ -324,6 +362,7 @@ export const useMatchPage = () => {
     const currentOrder = order === 0 ? order : plaingOrder
     if (isLastEpisode) {
       setIsPlayingFiltersEpisodes(false)
+      setPlaingOrder(0)
 
       return
     }
@@ -367,6 +406,7 @@ export const useMatchPage = () => {
     closePopup,
     countOfFilters,
     disablePlayingEpisodes,
+    episodeInfo,
     events,
     filteredEvents: isStatsTab ? statsFilteredEvents : filteredEvents,
     getFirstClickableParam,
@@ -383,6 +423,7 @@ export const useMatchPage = () => {
     isOpenFiltersPopup,
     isPlayFilterEpisodes: isStatsTab ? isStatsPlayFilterEpisodes : isPlayFilterEpisodes,
     isPlayersStatsFetching,
+    isPlayingEpisode,
     isSecondTeamPlayersChecked,
     isStarted,
     isTeamsStatsFetching,
@@ -405,6 +446,7 @@ export const useMatchPage = () => {
     selectedStatsTable,
     selectedTab,
     setCircleAnimation: isStatsTab ? setStatsCircleAnimation : setCircleAnimation,
+    setEpisodeInfo,
     setFullMatchPlaylistDuration,
     setIsPlayingFiltersEpisodes: isStatsTab
       ? setStatsIsPlayinFiltersEpisodes
@@ -419,6 +461,7 @@ export const useMatchPage = () => {
     setUnreversed,
     setWatchAllEpisodesTimer: isStatsTab ? setStatsWatchAllEpisodesTimer : setWatchAllEpisodesTimer,
     showProfileCard,
+    statsPlaingOrder,
     statsType,
     teamsStats,
     toggleActiveEvents,
diff --git a/src/features/MatchPage/store/hooks/useMatchData.tsx b/src/features/MatchPage/store/hooks/useMatchData.tsx
index 3ec80e74..8a3255cd 100644
--- a/src/features/MatchPage/store/hooks/useMatchData.tsx
+++ b/src/features/MatchPage/store/hooks/useMatchData.tsx
@@ -8,12 +8,12 @@ import debounce from 'lodash/debounce'
 
 import type { MatchInfo } from 'requests/getMatchInfo'
 
-import { usePageParams } from 'hooks/usePageParams'
-import { useInterval } from 'hooks/useInterval'
+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'
@@ -22,7 +22,12 @@ import { initialPlaylist } from './useSelectedPlaylist'
 const MATCH_DATA_POLL_INTERVAL = 60000
 const MATCH_PLAYLISTS_DELAY = 5000
 
-export const useMatchData = (profile: MatchInfo) => {
+type UseMatchDataArgs = {
+  matchProfile: MatchInfo,
+  selectedTab: Tabs,
+}
+
+export const useMatchData = ({ matchProfile: profile, selectedTab }: UseMatchDataArgs) => {
   const { profileId: matchId, sportType } = usePageParams()
   const { chapters } = useMatchPopupStore()
   const [matchDuration, setMatchDuration] = useState(0)
@@ -33,7 +38,7 @@ export const useMatchData = (profile: MatchInfo) => {
     selectedPlaylist,
     setFullMatchPlaylistDuration,
     setSelectedPlaylist,
-  } = useMatchPlaylists(profile)
+  } = useMatchPlaylists({ matchProfile: profile, selectedTab })
 
   const { events, fetchMatchEvents } = useEvents()
 
diff --git a/src/features/MatchPage/store/hooks/useMatchPlaylists.tsx b/src/features/MatchPage/store/hooks/useMatchPlaylists.tsx
index 2144ae4d..21a05785 100644
--- a/src/features/MatchPage/store/hooks/useMatchPlaylists.tsx
+++ b/src/features/MatchPage/store/hooks/useMatchPlaylists.tsx
@@ -13,6 +13,7 @@ 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'
@@ -23,9 +24,17 @@ type ArgsFetchMatchPlaylists = {
   sportType: number,
 }
 
+type UseMatchPlaylistsArgs = {
+  matchProfile: MatchInfo,
+  selectedTab: Tabs,
+}
+
 const initialPlaylists = buildPlaylists(null)
 
-export const useMatchPlaylists = (profile: MatchInfo) => {
+export const useMatchPlaylists = ({
+  matchProfile: profile,
+  selectedTab,
+}: UseMatchPlaylistsArgs) => {
   const [matchPlaylists, setMatchPlaylists] = useState<Playlists>(initialPlaylists)
 
   const { fetchLexics } = usePlaylistLexics()
@@ -34,7 +43,7 @@ export const useMatchPlaylists = (profile: MatchInfo) => {
     handlePlaylistClick,
     selectedPlaylist,
     setSelectedPlaylist,
-  } = useSelectedPlaylist()
+  } = useSelectedPlaylist({ selectedTab })
 
   const setInitialSeletedPlaylist = useCallback((playlists: Playlists) => {
     setSelectedPlaylist((playlist) => {
diff --git a/src/features/MatchPage/store/hooks/usePlayersStats.tsx b/src/features/MatchPage/store/hooks/usePlayersStats.tsx
index f8505e5b..c0c75771 100644
--- a/src/features/MatchPage/store/hooks/usePlayersStats.tsx
+++ b/src/features/MatchPage/store/hooks/usePlayersStats.tsx
@@ -41,8 +41,6 @@ import { TOUR_COMPLETED_STORAGE_KEY } from 'features/MatchTour'
 import { DISPLAYED_PARAMS_COLUMNS } from 'features/MatchSidePlaylists/components/PlayersTable/config'
 import { useFakeData } from './useFakeData'
 
-type HeaderParam = Pick<PlayerParam, 'id' | 'lexica_short' | 'lexic'>
-
 const REQUEST_DELAY = 3000
 const STATS_POLL_INTERVAL = 30000
 
@@ -90,7 +88,7 @@ export const usePlayersStats = ({
   )
 
   const getParams = useCallback((stats: PlayersStats) => (
-    uniqBy(flatMapDepth(stats, values), 'id') as unknown as Record<string, HeaderParam>
+    uniqBy(flatMapDepth(stats, values), 'id') as Array<PlayerParam>
   ), [])
 
   const fetchPlayers = useMemo(() => throttle(async (second?: number) => {
diff --git a/src/features/MatchPage/store/hooks/useSelectedPlaylist.tsx b/src/features/MatchPage/store/hooks/useSelectedPlaylist.tsx
index 5c8f8827..a4e8caa8 100644
--- a/src/features/MatchPage/store/hooks/useSelectedPlaylist.tsx
+++ b/src/features/MatchPage/store/hooks/useSelectedPlaylist.tsx
@@ -14,6 +14,7 @@ import {
 } from 'features/MatchPage/types'
 import { defaultSettings } from 'features/MatchPopup/types'
 import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
+import { Tabs } from 'features/MatchSidePlaylists/config'
 
 export const initialPlaylist = {
   duration: 0,
@@ -23,7 +24,11 @@ export const initialPlaylist = {
   type: 0,
 }
 
-export const useSelectedPlaylist = () => {
+type UseSelectedPlaylistArgs = {
+  selectedTab: Tabs,
+}
+
+export const useSelectedPlaylist = ({ selectedTab }: UseSelectedPlaylistArgs) => {
   const { profileId: matchId, sportType } = usePageParams()
   const [selectedPlaylist, setSelectedPlaylist] = useState<PlaylistOption>(initialPlaylist)
 
@@ -48,9 +53,13 @@ export const useSelectedPlaylist = () => {
         })
       })
     } else {
-      setSelectedPlaylist(playlist)
+      setSelectedPlaylist({
+        ...playlist,
+        // @ts-expect-error
+        tab: selectedTab,
+      })
     }
-  }, [fetchPlayerEpisodes, selectedPlaylist])
+  }, [fetchPlayerEpisodes, selectedPlaylist, selectedTab])
 
   return {
     handlePlaylistClick,
diff --git a/src/features/MatchPage/types.tsx b/src/features/MatchPage/types.tsx
index 8d19fd04..b034eb36 100644
--- a/src/features/MatchPage/types.tsx
+++ b/src/features/MatchPage/types.tsx
@@ -1,6 +1,7 @@
 import type { Lexics, Episodes } from 'requests'
 
 import type { Match } from 'features/Matches'
+import { Tabs } from 'features/MatchSidePlaylists/config'
 
 import type { MatchPlaylistIds } from './helpers/buildPlaylists'
 
@@ -42,6 +43,7 @@ export type InterviewPlaylistOption = {
 export type EventPlaylistOption = {
   episodes: Episodes,
   id: number,
+  tab?: Tabs,
   type: PlaylistTypes.EVENT,
 }
 
diff --git a/src/features/MatchSidePlaylists/components/CircleAnimationBar/index.tsx b/src/features/MatchSidePlaylists/components/CircleAnimationBar/index.tsx
index d6032627..e5b9523b 100644
--- a/src/features/MatchSidePlaylists/components/CircleAnimationBar/index.tsx
+++ b/src/features/MatchSidePlaylists/components/CircleAnimationBar/index.tsx
@@ -7,12 +7,15 @@ export const CircleAnimationBar = styled(CircleAnimationBarBase)`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  background-color: ${({ theme }) => theme.colors.white};
   
   circle {
-    stroke: #4086C6;
+    stroke: #5EB2FF;
+    stroke-width: 3.5;
   }
 
   text {
-    fill: ${({ theme }) => theme.colors.white};
+    fill: #5EB2FF;
+    font-weight: 700;
   }
 `
diff --git a/src/features/MatchSidePlaylists/components/EventsList/index.tsx b/src/features/MatchSidePlaylists/components/EventsList/index.tsx
index d3af823e..ca5daed4 100644
--- a/src/features/MatchSidePlaylists/components/EventsList/index.tsx
+++ b/src/features/MatchSidePlaylists/components/EventsList/index.tsx
@@ -1,4 +1,5 @@
 import map from 'lodash/map'
+// import find from 'lodash/find'
 
 import type { Events, MatchInfo } from 'requests'
 
@@ -11,6 +12,10 @@ 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 { isEqual } from '../../helpers'
 import { EventButton } from '../EventButton'
 import {
@@ -74,6 +79,17 @@ export const EventsList = ({
         if (disablePlayingEpisodes) {
           disablePlayingEpisodes()
         }
+
+        // const playerName = event.pl?.[`name_${suffix}`]
+        // const teamName = event.t === profile?.team1.id
+        //   ? profile?.team1[`name_${suffix}`]
+        //   : profile?.team2[`name_${suffix}`]
+
+        // setEpisodeInfo({
+        //   paramName: translate(event.l),
+        //   paramValue: filteredEvents.length,
+        //   playerOrTeamName: playerName || teamName || '',
+        // })
       }
 
       return (
diff --git a/src/features/MatchSidePlaylists/components/PlayersTable/hooks/index.tsx b/src/features/MatchSidePlaylists/components/PlayersTable/hooks/index.tsx
index 0380d6da..43f69c58 100644
--- a/src/features/MatchSidePlaylists/components/PlayersTable/hooks/index.tsx
+++ b/src/features/MatchSidePlaylists/components/PlayersTable/hooks/index.tsx
@@ -39,6 +39,7 @@ export const usePlayersTable = ({ teamId }: PlayersTableProps) => {
     tableWrapperRef,
     toggleIsExpanded,
   } = useTable({
+    getPlayerName,
     setSortCondition,
     teamId,
   })
diff --git a/src/features/MatchSidePlaylists/components/PlayersTable/hooks/useTable.tsx b/src/features/MatchSidePlaylists/components/PlayersTable/hooks/useTable.tsx
index 5db4b71b..5b154ae9 100644
--- a/src/features/MatchSidePlaylists/components/PlayersTable/hooks/useTable.tsx
+++ b/src/features/MatchSidePlaylists/components/PlayersTable/hooks/useTable.tsx
@@ -21,13 +21,17 @@ import map from 'lodash/map'
 
 import { isMobileDevice, querieKeys } from 'config'
 
-import type { PlayerParam, MatchScore } from 'requests'
+import type {
+  PlayerParam,
+  MatchScore,
+  Player,
+} from 'requests'
 import { getStatsEvents } from 'requests'
 
 import { usePageParams } from 'hooks'
 
 import { useMatchPageStore } from 'features/MatchPage/store'
-import { useLexicsConfig } from 'features/LexicsStore'
+import { useLexicsConfig, useLexicsStore } from 'features/LexicsStore'
 import { getHalfTime } from 'features/MatchPage/helpers/getHalfTime'
 
 import type { SortCondition } from '../types'
@@ -40,13 +44,13 @@ import {
 import { StatsType } from '../../TabStats/config'
 
 type UseTableArgs = {
+  getPlayerName: (player: Player) => string,
   setSortCondition: Dispatch<SetStateAction<SortCondition>>,
   teamId: number,
 }
 
-type HeaderParam = Pick<PlayerParam, 'id' | 'lexica_short' | 'lexic'>
-
 export const useTable = ({
+  getPlayerName,
   setSortCondition,
   teamId,
 }: UseTableArgs) => {
@@ -58,6 +62,7 @@ export const useTable = ({
   const [paramColumnWidth, setParamColumnWidth] = useState(PARAM_COLUMN_WIDTH_DEFAULT)
 
   const {
+    disablePlayingEpisodes,
     getParams,
     isExpanded,
     playersStats,
@@ -65,13 +70,14 @@ export const useTable = ({
     playStatsEpisodes,
     profile,
     reduceTable,
-    setIsPlayingFiltersEpisodes,
+    setEpisodeInfo,
     setPlayingData,
-    setWatchAllEpisodesTimer,
     statsType,
     toggleIsExpanded,
   } = useMatchPageStore()
 
+  const { translate } = useLexicsStore()
+
   const { profileId, sportType } = usePageParams()
 
   const client = useQueryClient()
@@ -81,7 +87,7 @@ export const useTable = ({
   const params = useMemo(() => getParams(playersStats[teamId]), [getParams, playersStats, teamId])
 
   const lexics = useMemo(() => (
-    reduce<HeaderParam, Array<number>>(
+    reduce<PlayerParam, Array<number>>(
       values(params),
       (acc, { lexic, lexica_short }) => {
         if (lexic) acc.push(lexic)
@@ -161,16 +167,15 @@ export const useTable = ({
     })
   }
 
-  const handleParamClick = async (paramId: number, playerId: number) => {
-    setWatchAllEpisodesTimer(false)
-    setIsPlayingFiltersEpisodes(false)
+  const handleParamClick = async (param: PlayerParam, player: Player) => {
+    disablePlayingEpisodes()
 
     const videoBounds = matchScore?.video_bounds || profile?.video_bounds
 
     setPlayingData({
       player: {
-        id: playerId,
-        paramId,
+        id: player.id,
+        paramId: param.id,
       },
       team: {
         id: null,
@@ -181,8 +186,8 @@ export const useTable = ({
     try {
       const events = await getStatsEvents({
         matchId: profileId,
-        paramId,
-        playerId,
+        paramId: param.id,
+        playerId: player.id,
         sportType,
         teamId,
         ...(statsType === StatsType.CURRENT_STATS && videoBounds && (
@@ -191,6 +196,11 @@ export const useTable = ({
       })
 
       playStatsEpisodes(events)
+      setEpisodeInfo({
+        paramName: translate(param.lexic),
+        paramValue: param.val!,
+        playerOrTeamName: getPlayerName(player),
+      })
     // eslint-disable-next-line no-empty
     } catch (e) {}
   }
diff --git a/src/features/MatchSidePlaylists/components/PlayersTable/index.tsx b/src/features/MatchSidePlaylists/components/PlayersTable/index.tsx
index 43508351..52773783 100644
--- a/src/features/MatchSidePlaylists/components/PlayersTable/index.tsx
+++ b/src/features/MatchSidePlaylists/components/PlayersTable/index.tsx
@@ -180,7 +180,7 @@ export const PlayersTable = (props: PlayersTableProps) => {
                         const clickable = Boolean(playerParam?.clickable) && !includes([0, '-'], value)
                         const sorted = sortCondition.paramId === param.id
                         const onClick = () => {
-                          clickable && handleParamClick(param.id, player.id)
+                          clickable && playerParam && handleParamClick(playerParam, player)
                         }
 
                         return (
@@ -198,7 +198,7 @@ export const PlayersTable = (props: PlayersTableProps) => {
                               ? (
                                 <CircleAnimationBar
                                   text={value}
-                                  size={20}
+                                  size={22}
                                 />
                               )
                               : value}
diff --git a/src/features/MatchSidePlaylists/components/TeamsStatsTable/Cell.tsx b/src/features/MatchSidePlaylists/components/TeamsStatsTable/Cell.tsx
index 83975631..a6ca0868 100644
--- a/src/features/MatchSidePlaylists/components/TeamsStatsTable/Cell.tsx
+++ b/src/features/MatchSidePlaylists/components/TeamsStatsTable/Cell.tsx
@@ -18,6 +18,7 @@ import { usePageParams, useEventListener } from 'hooks'
 
 import { getHalfTime } from 'features/MatchPage/helpers/getHalfTime'
 import { useMatchPageStore } from 'features/MatchPage/store'
+import { useLexicsStore } from 'features/LexicsStore'
 import { Spotlight, Steps } from 'features/MatchTour'
 
 import { StatsType } from '../TabStats/config'
@@ -46,18 +47,20 @@ export const Cell = ({
   const { profileId, sportType } = usePageParams()
 
   const {
+    disablePlayingEpisodes,
     isClickable,
     playingData,
     playingProgress,
     playStatsEpisodes,
     profile,
-    setIsPlayingFiltersEpisodes,
+    setEpisodeInfo,
     setPlayingData,
-    setWatchAllEpisodesTimer,
     statsType,
     watchAllEpisodesTimer,
   } = useMatchPageStore()
 
+  const { shortSuffix, suffix } = useLexicsStore()
+
   const { currentStep, isOpen } = useTour()
 
   const client = useQueryClient()
@@ -68,13 +71,12 @@ export const Cell = ({
     isNumber(val) ? String(val) : '-'
   )
 
-  const onParamClick = async (param: Param) => {
+  const onParamClick = async (param: Param, paramName: string) => {
     if (!isClickable(param)) return
 
-    const videoBounds = matchScore?.video_bounds || profile?.video_bounds
+    disablePlayingEpisodes()
 
-    setWatchAllEpisodesTimer(false)
-    setIsPlayingFiltersEpisodes(false)
+    const videoBounds = matchScore?.video_bounds || profile?.video_bounds
 
     setPlayingData({
       player: {
@@ -99,6 +101,13 @@ export const Cell = ({
       })
 
       playStatsEpisodes(events)
+      setEpisodeInfo({
+        paramName,
+        paramValue: param.val!,
+        playerOrTeamName: teamId === profile?.team1.id
+          ? profile.team1[`name_${suffix}`]
+          : profile?.team2[`name_${suffix}`] || '',
+      })
     // eslint-disable-next-line no-empty
     } catch (e) {}
   }
@@ -113,7 +122,7 @@ export const Cell = ({
         ? teamStatItem.param1
         : teamStatItem.param2)
 
-      param && onParamClick(param)
+      param && onParamClick(param, teamStatItem[`name_${shortSuffix}`])
     },
     event: 'keydown',
     target: paramValueContainerRef,
@@ -131,14 +140,14 @@ export const Cell = ({
             <ParamValue>
               <CircleAnimationBar
                 text={getDisplayedValue(teamStatItem.param1.val)}
-                size={20}
+                size={22}
               />
             </ParamValue>
           )
           : (
             <ParamValue
               clickable={isClickable(teamStatItem.param1)}
-              onClick={() => onParamClick(teamStatItem.param1)}
+              onClick={() => onParamClick(teamStatItem.param1, teamStatItem[`name_${shortSuffix}`])}
               data-param-id={teamStatItem.param1.id}
               hasValue={Boolean(teamStatItem.param1.val)}
               // eslint-disable-next-line react/jsx-props-no-spreading
@@ -162,7 +171,7 @@ export const Cell = ({
                 <ParamValue>
                   <CircleAnimationBar
                     text={getDisplayedValue(teamStatItem.param2.val)}
-                    size={20}
+                    size={22}
                   />
                 </ParamValue>
               )
@@ -171,7 +180,7 @@ export const Cell = ({
                   <Divider>/</Divider>
                   <ParamValue
                     clickable={isClickable(teamStatItem.param2)}
-                    onClick={() => onParamClick(teamStatItem.param2!)}
+                    onClick={() => onParamClick(teamStatItem.param2!, teamStatItem[`name_${shortSuffix}`])}
                     data-param-id={teamStatItem.param2.id}
                     hasValue={Boolean(teamStatItem.param2.val)}
                     // eslint-disable-next-line react/jsx-props-no-spreading
diff --git a/src/features/MultiSourcePlayer/hooks/index.tsx b/src/features/MultiSourcePlayer/hooks/index.tsx
index 08ac5a6d..8851448b 100644
--- a/src/features/MultiSourcePlayer/hooks/index.tsx
+++ b/src/features/MultiSourcePlayer/hooks/index.tsx
@@ -3,11 +3,16 @@ import {
   useCallback,
   useEffect,
   useRef,
+  useState,
 } from 'react'
 
 import { useTour } from '@reactour/tour'
 
 import size from 'lodash/size'
+import findIndex from 'lodash/findIndex'
+import inRange from 'lodash/inRange'
+import sum from 'lodash/sum'
+import values from 'lodash/values'
 
 import { KEYBOARD_KEYS } from 'config'
 
@@ -77,10 +82,17 @@ export const useMultiSourcePlayer = ({
   pausedData,
   setPausedData,
 }: Props) => {
+  const [currentPlayingOrder, setCurrentPlayingOrder] = useState(0)
+  const ordersObj = useRef<Record<string, number>>({})
+
   const {
+    disablePlayingEpisodes,
     handlePlaylistClick,
     isPlayFilterEpisodes,
+    isPlayingEpisode,
     matchPlaylists,
+    plaingOrder,
+    playingProgress,
     playNextEpisode,
     selectedPlaylist,
     setCircleAnimation,
@@ -261,6 +273,11 @@ export const useMultiSourcePlayer = ({
     setPlayerState({ playing: false })
   }
 
+  const stopPlayingEpisodes = () => {
+    disablePlayingEpisodes()
+    backToPausedTime()
+  }
+
   useEffect(() => {
     onPlayingChange(playing)
   }, [playing, onPlayingChange])
@@ -337,13 +354,13 @@ export const useMultiSourcePlayer = ({
   ])
 
   useEffect(() => {
-    if (ready && videoRef) {
+    if (ready && videoRef && !isPlayingEpisode) {
       videoRef.current?.scrollIntoView({
         behavior: 'smooth',
         block: 'start',
       })
     }
-  }, [ready, videoRef])
+  }, [ready, videoRef, isPlayingEpisode])
 
   // ведем статистику просмотра матча
   const { start: startCollectingStats, stop: stopCollectingStats } = useInterval({
@@ -373,12 +390,56 @@ export const useMultiSourcePlayer = ({
     profileId,
   ])
 
+  useEffect(() => {
+    const splitEpisodeDuration = (n: number, m: number) => {
+      const result: Array<[number, number]> = []
+
+      for (let i = 0; i < n; i += m) {
+        const start = i
+        const end = Math.min(i + m, n)
+        result.push([start, end])
+      }
+
+      return result
+    }
+
+    const getCurrentPlayingOrder = () => {
+      const { count, duration: dur } = getActiveChapter()
+
+      const arr = splitEpisodeDuration(dur, dur / count!)
+
+      const index = findIndex(arr, (elem) => inRange(
+        playingProgress * 1000,
+        elem[0],
+        elem[1] + 1,
+      ))
+
+      if (index !== -1 && ordersObj.current[plaingOrder] !== index) {
+        ordersObj.current = {
+          ...ordersObj.current,
+          [plaingOrder]: index,
+        }
+      }
+
+      return plaingOrder + sum(values(ordersObj.current))
+    }
+
+    setCurrentPlayingOrder(getCurrentPlayingOrder())
+  }, [getActiveChapter, isPlayingEpisode, plaingOrder, playingProgress])
+
+  useEffect(() => {
+    if (!isPlayingEpisode) {
+      ordersObj.current = {}
+    }
+  }, [isPlayingEpisode])
+
   return {
     activeChapterIndex,
     activePlayer,
     activeSrc: getChapterUrl(activeChapterIndex),
     allPlayedProgress: playedProgress + getActiveChapter().startMs,
     chapters,
+    currentPlayingOrder,
     duration,
     isFirstChapterPlaying,
     isFullscreen,
@@ -405,6 +466,7 @@ export const useMultiSourcePlayer = ({
     rewindForward,
     seek,
     selectedQuality,
+    stopPlayingEpisodes,
     togglePlaying,
     video1Ref,
     video2Ref,
diff --git a/src/features/MultiSourcePlayer/index.tsx b/src/features/MultiSourcePlayer/index.tsx
index f75e1ada..8922cc80 100644
--- a/src/features/MultiSourcePlayer/index.tsx
+++ b/src/features/MultiSourcePlayer/index.tsx
@@ -1,3 +1,5 @@
+import { Fragment } from 'react'
+
 import { Loader } from 'features/Loader'
 import {
   PlayerWrapper,
@@ -8,6 +10,11 @@ import {
   Forward,
   ControlsGradient,
   TeamsDetailsWrapper,
+  EpisodeInfo,
+  EpisodeInfoName,
+  EpisodeInfoOrder,
+  EpisodeInfoDivider,
+  CloseButton,
 } from 'features/StreamPlayer/styled'
 import { VideoPlayer } from 'features/VideoPlayer'
 import { Controls } from 'features/StreamPlayer/components/Controls'
@@ -15,6 +22,7 @@ import { Name } from 'features/Name'
 import RewindMobile from 'features/StreamPlayer/components/RewindMobile'
 import { FiltersPopup } from 'features/MatchSidePlaylists/components/FiltersPopup'
 import { useAuthStore } from 'features/AuthStore'
+import { useMatchPageStore } from 'features/MatchPage/store'
 
 import { isMobileDevice } from 'config/userAgent'
 
@@ -39,6 +47,7 @@ export const MultiSourcePlayer = (props: Props) => {
     allPlayedProgress,
     centerControlsVisible,
     chapters,
+    currentPlayingOrder,
     duration,
     hideCenterControls,
     isFirstChapterPlaying,
@@ -76,6 +85,7 @@ export const MultiSourcePlayer = (props: Props) => {
     seek,
     selectedQuality,
     showCenterControls,
+    stopPlayingEpisodes,
     togglePlaying,
     video1Ref,
     video2Ref,
@@ -84,6 +94,8 @@ export const MultiSourcePlayer = (props: Props) => {
     volumeInPercent,
     wrapperRef,
   } = useMultiSourcePlayer(props)
+  const { episodeInfo, isPlayingEpisode } = useMatchPageStore()
+
   const firstPlayerActive = activePlayer === Players.PLAYER1
   const currentVideo = firstPlayerActive ? video1Ref : video2Ref
   const { user } = useAuthStore()
@@ -99,6 +111,27 @@ export const MultiSourcePlayer = (props: Props) => {
       onTouchStart={onTouchStart}
       onTouchEnd={onTouchEnd}
     >
+      {isPlayingEpisode && (
+        <EpisodeInfo>
+          <EpisodeInfoName>
+            {isMobileDevice
+              ? (
+                <Fragment>
+                  {episodeInfo.playerOrTeamName} <br /> {episodeInfo.paramName}
+                </Fragment>
+              )
+              : `${episodeInfo.playerOrTeamName}${episodeInfo.playerOrTeamName ? ' - ' : ''}${episodeInfo.paramName}`}
+          </EpisodeInfoName>
+          {currentPlayingOrder > 0 && (
+            <EpisodeInfoOrder>
+              {currentPlayingOrder}
+              <EpisodeInfoDivider>/</EpisodeInfoDivider>
+              {episodeInfo.paramValue}
+            </EpisodeInfoOrder>
+          )}
+          <CloseButton onClick={stopPlayingEpisodes} />
+        </EpisodeInfo>
+      )}
       {
         !ready && (
           <LoaderWrapper buffering>
diff --git a/src/features/MultiSourcePlayer/types.tsx b/src/features/MultiSourcePlayer/types.tsx
index e1efe5dd..0459df11 100644
--- a/src/features/MultiSourcePlayer/types.tsx
+++ b/src/features/MultiSourcePlayer/types.tsx
@@ -1,6 +1,7 @@
 export type Urls = { [quality: string]: string }
 
 export type Chapter = {
+  count?: number,
   duration: number,
   endMs: number,
   endOffsetMs: number,
diff --git a/src/features/PopupComponents/CloseButton/index.tsx b/src/features/PopupComponents/CloseButton/index.tsx
index 059788d3..480d5739 100644
--- a/src/features/PopupComponents/CloseButton/index.tsx
+++ b/src/features/PopupComponents/CloseButton/index.tsx
@@ -5,15 +5,18 @@ import { Close } from '../../../libs/objects/Close'
 import { BaseButton } from '../BaseButton'
 
 type Props = {
+  className?: string,
   onClick: (e: MouseEvent<HTMLButtonElement>) => void,
   size?: number,
 }
 
 export const CloseButton = ({
+  className,
   onClick,
   size,
 }: Props) => (
   <BaseButton
+    className={className}
     width={1.35}
     height={1.35}
     padding={8}
diff --git a/src/features/StreamPlayer/components/Chapters/styled.tsx b/src/features/StreamPlayer/components/Chapters/styled.tsx
index 729b8132..1cd4dbc5 100644
--- a/src/features/StreamPlayer/components/Chapters/styled.tsx
+++ b/src/features/StreamPlayer/components/Chapters/styled.tsx
@@ -39,10 +39,4 @@ export const PlayedProgress = styled.div`
   background-color: #CC0000;
   height: 100%;
   max-width: 100%;
-
-  ${isMobileDevice
-    ? css`
-      background-color: rgba(255, 255, 255, 1);
-    `
-    : ''}
 `
diff --git a/src/features/StreamPlayer/components/ProgressBar/styled.tsx b/src/features/StreamPlayer/components/ProgressBar/styled.tsx
index da04f648..20b471aa 100644
--- a/src/features/StreamPlayer/components/ProgressBar/styled.tsx
+++ b/src/features/StreamPlayer/components/ProgressBar/styled.tsx
@@ -13,8 +13,8 @@ export const ProgressBarList = styled.div`
 
   ${isMobileDevice
     ? css`
-      height: 3px;
-      margin: 0 15px;
+      height: 6px;
+      margin: 0 15px 12px;
     `
     : ''}
 `
@@ -49,10 +49,9 @@ export const Scrubber = styled.div`
 
   ${isMobileDevice
     ? css`
-      background-color: #FFFFFF;
       width: 27px;
       height: 27px;
-      transform: translate(-50%, -53%);
+      transform: translate(-50%, -65%);
     `
     : ''}
 `
diff --git a/src/features/StreamPlayer/hooks/index.tsx b/src/features/StreamPlayer/hooks/index.tsx
index 21945a0a..22277802 100644
--- a/src/features/StreamPlayer/hooks/index.tsx
+++ b/src/features/StreamPlayer/hooks/index.tsx
@@ -13,6 +13,10 @@ import size from 'lodash/size'
 import isNumber from 'lodash/isNumber'
 import isEmpty from 'lodash/isEmpty'
 import isUndefined from 'lodash/isUndefined'
+import findIndex from 'lodash/findIndex'
+import inRange from 'lodash/inRange'
+import sum from 'lodash/sum'
+import values from 'lodash/values'
 
 import Hls from 'hls.js'
 
@@ -81,6 +85,9 @@ export const useVideoPlayer = ({
   onProgressChange: progressChangeCallback,
   resumeFrom,
 }: Props) => {
+  const [currentPlayingOrder, setCurrentPlayingOrder] = useState(0)
+  const ordersObj = useRef<Record<string, number>>({})
+
   const [{
     activeChapterIndex,
     buffering,
@@ -98,12 +105,16 @@ export const useVideoPlayer = ({
   const { lang } = useLexicsStore()
   const { profileId, sportType } = usePageParams()
   const {
+    disablePlayingEpisodes,
     isPlayFilterEpisodes,
+    isPlayingEpisode,
     matchPlaylists,
+    playingProgress,
     playNextEpisode,
     selectedPlaylist,
     setCircleAnimation,
     setPlayingProgress,
+    statsPlaingOrder,
   } = useMatchPageStore()
 
   const { isOpen } = useTour()
@@ -138,6 +149,49 @@ export const useVideoPlayer = ({
     [chapters, activeChapterIndex],
   )
 
+  useEffect(() => {
+    const splitEpisodeDuration = (duration: number, count: number) => {
+      const result: Array<[number, number]> = []
+
+      for (let i = 0; i < duration; i += count) {
+        const start = i
+        const end = Math.min(i + count, duration)
+        result.push([start, end])
+      }
+
+      return result
+    }
+
+    const getCurrentPlayingOrder = () => {
+      const { count, duration } = getActiveChapter()
+
+      const arr = splitEpisodeDuration(duration, duration / count!)
+
+      const index = findIndex(arr, (elem) => inRange(
+        playingProgress * 1000,
+        elem[0],
+        elem[1] + 1,
+      ))
+
+      if (index !== -1 && ordersObj.current[statsPlaingOrder] !== index) {
+        ordersObj.current = {
+          ...ordersObj.current,
+          [statsPlaingOrder]: index,
+        }
+      }
+
+      return statsPlaingOrder + sum(values(ordersObj.current))
+    }
+
+    setCurrentPlayingOrder(getCurrentPlayingOrder())
+  }, [getActiveChapter, isPlayingEpisode, statsPlaingOrder, playingProgress])
+
+  useEffect(() => {
+    if (!isPlayingEpisode) {
+      ordersObj.current = {}
+    }
+  }, [isPlayingEpisode])
+
   const chaptersDuration = useDuration(chapters)
 
   const duration = (isLive && chapters[0]?.isFullMatchChapter)
@@ -299,6 +353,11 @@ export const useVideoPlayer = ({
     matchPlaylists.match,
   ])
 
+  const stopPlayingEpisodes = () => {
+    disablePlayingEpisodes()
+    backToPausedTime()
+  }
+
   useEffect(() => {
     if (chapters[0]?.isFullMatchChapter) {
       setPausedProgress(playedProgress + chapters[0].startOffsetMs)
@@ -463,13 +522,13 @@ export const useVideoPlayer = ({
   }, [setPlayerState])
 
   useEffect(() => {
-    if (ready && videoRef) {
+    if (ready && videoRef && !isPlayingEpisode) {
       videoRef.current?.scrollIntoView({
         behavior: 'smooth',
         block: 'start',
       })
     }
-  }, [ready, videoRef])
+  }, [ready, videoRef, isPlayingEpisode])
 
   useEffect(() => {
     setCircleAnimation((state) => ({
@@ -523,6 +582,7 @@ export const useVideoPlayer = ({
     backToLive,
     buffering,
     chapters,
+    currentPlayingOrder,
     duration,
     isFirstChapterPlaying,
     isFullscreen,
@@ -552,6 +612,7 @@ export const useVideoPlayer = ({
     rewindForward,
     seek,
     sizeOptions,
+    stopPlayingEpisodes,
     togglePlaying,
     url,
     videoRef,
diff --git a/src/features/StreamPlayer/index.tsx b/src/features/StreamPlayer/index.tsx
index 1dd20a87..5d4bfd41 100644
--- a/src/features/StreamPlayer/index.tsx
+++ b/src/features/StreamPlayer/index.tsx
@@ -1,3 +1,7 @@
+import { Fragment } from 'react'
+
+import { isMobileDevice } from 'config'
+
 import { Loader } from 'features/Loader'
 import { VideoPlayer } from 'features/VideoPlayer'
 import { useMatchPageStore } from 'features/MatchPage/store'
@@ -7,8 +11,6 @@ import { FiltersPopup } from 'features/MatchSidePlaylists/components/FiltersPopu
 import { WaterMark } from 'components/WaterMark'
 import { AccessTimer } from 'components/AccessTimer'
 
-import { isMobileDevice } from 'config/userAgent'
-
 import { REWIND_SECONDS } from './config'
 
 import {
@@ -20,6 +22,11 @@ import {
   Forward,
   ControlsGradient,
   TeamsDetailsWrapper,
+  EpisodeInfo,
+  EpisodeInfoName,
+  EpisodeInfoOrder,
+  EpisodeInfoDivider,
+  CloseButton,
 } from './styled'
 import type { Props } from './hooks'
 import { useVideoPlayer } from './hooks'
@@ -37,7 +44,9 @@ const tournamentsWithWatermark = {
 export const StreamPlayer = (props: Props) => {
   const {
     access,
+    episodeInfo,
     isOpenFiltersPopup,
+    isPlayingEpisode,
     profile,
   } = useMatchPageStore()
   const { user } = useAuthStore()
@@ -51,6 +60,7 @@ export const StreamPlayer = (props: Props) => {
     centerControlsVisible,
     changeAudioTrack,
     chapters,
+    currentPlayingOrder,
     duration,
     hideCenterControls,
     isFullscreen,
@@ -88,6 +98,7 @@ export const StreamPlayer = (props: Props) => {
     selectedAudioTrack,
     selectedQuality,
     showCenterControls,
+    stopPlayingEpisodes,
     togglePlaying,
     url,
     videoQualities,
@@ -107,7 +118,29 @@ export const StreamPlayer = (props: Props) => {
       onMouseLeave={onMouseLeave}
       onTouchStart={onTouchStart}
       onTouchEnd={onTouchEnd}
+      isPlayingEpisode={isPlayingEpisode}
     >
+      {isPlayingEpisode && (
+        <EpisodeInfo>
+          <EpisodeInfoName>
+            {isMobileDevice
+              ? (
+                <Fragment>
+                  {episodeInfo.playerOrTeamName} <br /> {episodeInfo.paramName}
+                </Fragment>
+              )
+              : `${episodeInfo.playerOrTeamName}${episodeInfo.playerOrTeamName ? ' - ' : ''}${episodeInfo.paramName}`}
+          </EpisodeInfoName>
+          {currentPlayingOrder > 0 && (
+            <EpisodeInfoOrder>
+              {currentPlayingOrder}
+              <EpisodeInfoDivider />
+              {episodeInfo.paramValue}
+            </EpisodeInfoOrder>
+          )}
+          <CloseButton onClick={stopPlayingEpisodes} />
+        </EpisodeInfo>
+      )}
       {isOpenFiltersPopup && <FiltersPopup />}
       <LoaderWrapper buffering={buffering}>
         <Loader color='#515151' />
diff --git a/src/features/StreamPlayer/styled.tsx b/src/features/StreamPlayer/styled.tsx
index 6d190334..f12002d5 100644
--- a/src/features/StreamPlayer/styled.tsx
+++ b/src/features/StreamPlayer/styled.tsx
@@ -1,6 +1,8 @@
 import styled, { css } from 'styled-components/macro'
 
-import { isMobileDevice } from 'config/userAgent'
+import { isMobileDevice } from 'config'
+
+import { CloseButton as CloseButtonBase } from 'features/PopupComponents'
 
 export const ControlsGradient = styled.div<{ isVisible?: boolean }>`
   background-image: url(/images/player-controls-gradient.png);
@@ -111,9 +113,21 @@ export const PlayerWrapper = styled.div<PlayStopProps>`
   position: relative;
   background-color: #000;
   min-height: 100%;
+  
+  ${({ isPlayingEpisode }) => (isPlayingEpisode
+    ? css`
+        border: 6px solid #5EB2FF;
+
+        video {
+          object-fit: ${isMobileDevice ? 'cover' : 'contain'};
+        }
+    `
+    : '')}
+  
   :fullscreen {
     padding-top: 0;
   }
+  
   ${supportsAspectRatio
     ? css`aspect-ratio: 16 / 9;`
     : css`
@@ -161,6 +175,7 @@ const sizes = {
 
 type PlayStopProps = {
   fullWidth?: boolean,
+  isPlayingEpisode?: boolean,
   marginRight?: number,
   playing: boolean,
   size?: keyof typeof sizes,
@@ -411,3 +426,59 @@ export const WarningIosText = styled.span`
   text-align: center;
   font-size: 14px;
 `
+
+export const EpisodeInfo = styled.div`
+  position: absolute;
+  top: 13px;
+  right: 15px;
+  display: flex;
+  align-items: center;
+  gap: max(0.755rem, 12px);
+  font-weight: 600;
+  color: ${({ theme }) => theme.colors.white};
+  z-index: 1;
+`
+
+export const EpisodeInfoName = styled.span`
+  font-size: max(1.227rem, 10px);
+  text-align: right;
+  line-height: 1.1;
+`
+
+export const EpisodeInfoOrder = styled.span`
+  font-size: max(1.227rem, 24px);
+  font-weight: 700;
+`
+
+export const EpisodeInfoDivider = styled.div`
+  display: inline-block;
+  width: 3.5px;
+  height: max(1.25rem, 22px);
+  margin: 0 7px -2px;
+  transform: skew(-20deg, 0);
+  background-color: ${({ theme }) => theme.colors.white};
+
+  ${isMobileDevice
+    ? css`
+        margin-left: 9px;
+    `
+    : ''};
+`
+
+export const CloseButton = styled(CloseButtonBase)`
+  padding: 0;
+  background: none;
+  z-index: 1;
+  width: max(1.2rem, 23px);
+  height: max(1.2rem, 23px);
+  position: initial;
+
+  :hover {
+    background: none;
+  }
+
+  svg {
+    width: max(1.2rem, 23px);
+    height: max(1.2rem, 23px);
+  }
+`
diff --git a/src/features/StreamPlayer/types.tsx b/src/features/StreamPlayer/types.tsx
index e90a6fb1..f7f57fd3 100644
--- a/src/features/StreamPlayer/types.tsx
+++ b/src/features/StreamPlayer/types.tsx
@@ -4,6 +4,10 @@
 */
 
 export type Chapter = {
+  /** число событий */
+  count?: number,
+
+  /** длительность */
   duration: number,
 
   /**
diff --git a/src/requests/getMatchPlaylists.tsx b/src/requests/getMatchPlaylists.tsx
index cfe69192..d45eef73 100644
--- a/src/requests/getMatchPlaylists.tsx
+++ b/src/requests/getMatchPlaylists.tsx
@@ -18,6 +18,9 @@ type Args = {
 }
 
 export type Episode = {
+  /** events count */
+  c: number,
+
   /** episode end */
   e: number,