From ea00f09c7e8219696ced3f481c76e124da60d18e Mon Sep 17 00:00:00 2001
From: Rakov <roman.rakov@insports.tv>
Date: Tue, 16 May 2023 13:36:31 +0300
Subject: [PATCH 1/4] fix(#578): back to live fix

---
 .../components/LiveMatch/hooks/index.tsx      |   2 +-
 src/features/StreamPlayer/hooks/index.tsx     | 148 +++++++++++++-----
 2 files changed, 111 insertions(+), 39 deletions(-)

diff --git a/src/features/MatchPage/components/LiveMatch/hooks/index.tsx b/src/features/MatchPage/components/LiveMatch/hooks/index.tsx
index d6b63df5..d2dc0c41 100644
--- a/src/features/MatchPage/components/LiveMatch/hooks/index.tsx
+++ b/src/features/MatchPage/components/LiveMatch/hooks/index.tsx
@@ -31,7 +31,7 @@ export const useLiveMatch = () => {
     const matchesLastWatchSecond: MatchSecondType | null = lastSecondLS && JSON.parse(lastSecondLS)
     // undefined означает, что юзер будет смотреть лайв
     return profile && !profile.live
-      ? matchesLastWatchSecond?.[sportType]?.[matchId]?.lastWatchSecond || 0
+      ? matchesLastWatchSecond?.[sportType]?.[matchId]?.lastWatchSecond
       : undefined
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [profile])
diff --git a/src/features/StreamPlayer/hooks/index.tsx b/src/features/StreamPlayer/hooks/index.tsx
index abe8ae2f..63b3eddf 100644
--- a/src/features/StreamPlayer/hooks/index.tsx
+++ b/src/features/StreamPlayer/hooks/index.tsx
@@ -139,8 +139,11 @@ export const useVideoPlayer = ({
     resumeFrom: resumeTimeWithOffset,
     src: url,
   })
-  // временно закоментил, если ничего не сломается, удалю
-  // const [isLivePlaying, setIsLivePlaying] = useState(false)
+
+  // eslint-disable-next-line no-unsafe-optional-chaining
+  const videoRefDurationMs = videoRef.current?.duration! * 1000
+
+  const [isLivePlaying, setIsLivePlaying] = useState(false)
   const [isPausedTime, setIsPausedTime] = useState(false)
   const pausedProgress = useRef(0)
 
@@ -194,9 +197,20 @@ export const useVideoPlayer = ({
 
   const chaptersDuration = useDuration(chapters)
 
-  const duration = (isLive && chapters[0]?.isFullMatchChapter)
-    ? fullMatchDuration - getActiveChapter().startOffsetMs
+  const duration = useMemo(() => ((
+    isLive
+    && chapters[0]?.isFullMatchChapter
+    && Number.isFinite(videoRefDurationMs)
+  )
+    ? videoRefDurationMs - getActiveChapter().startOffsetMs
     : chaptersDuration
+  ), [
+    chapters,
+    chaptersDuration,
+    getActiveChapter,
+    isLive,
+    videoRefDurationMs,
+  ])
 
   const {
     onReady,
@@ -206,9 +220,9 @@ export const useVideoPlayer = ({
     togglePlaying,
   } = usePlayingHandlers(setPlayerState, chapters)
 
-  const restartVideo = () => {
+  const restartVideo = useCallback(() => {
     onPlaylistSelect(matchPlaylists.match[0])
-  }
+  }, [matchPlaylists.match, onPlaylistSelect])
 
   const {
     isFullscreen,
@@ -282,9 +296,21 @@ export const useVideoPlayer = ({
     setPlayerState({ playing: true })
   }
 
-  const checkLive = () => chapters[0]?.isFullMatchChapter
-      && isLive
-      && playedProgress > duration - BUFFERING_TIME * 1.5
+  const isLiveTime = useMemo(() => {
+    const matchDuration = duration === 0 && Number.isFinite(videoRefDurationMs)
+      ? videoRefDurationMs
+      : duration
+
+    return chapters[0]?.isFullMatchChapter
+          && isLive
+          && playedProgress > matchDuration - BUFFERING_TIME * 1.5
+  }, [
+    chapters,
+    duration,
+    isLive,
+    playedProgress,
+    videoRefDurationMs,
+  ])
 
   const onDuration = (durationSeconds: number) => {
     setPlayerState({ duration: toMilliSeconds(durationSeconds) })
@@ -318,19 +344,26 @@ export const useVideoPlayer = ({
 
     if (selectedPlaylist?.id !== FULL_GAME_KEY) {
       restartVideo()
-      // setIsLivePlaying(true)
+      setIsLivePlaying(true)
+      return
     }
+    const matchDuration = fullMatchDuration === 0 && Number.isFinite(videoRefDurationMs)
+      ? videoRefDurationMs
+      : fullMatchDuration
 
-    const liveProgressMs = Math.max(fullMatchDuration - BUFFERING_TIME, 0)
+    const liveProgressMs = Math.max(matchDuration - BUFFERING_TIME, 0)
     setPlayerState({ playedProgress: liveProgressMs, seek: liveProgressMs / 1000 })
-    // if (liveProgressMs > 0) setIsLivePlaying(false)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (liveProgressMs > 0 && isLiveTime) setIsLivePlaying(false)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     duration,
-    onPlaylistSelect,
     selectedPlaylist,
     setPlayerState,
     matchPlaylists.match,
+    isLiveTime,
+    fullMatchDuration,
+    videoRefDurationMs,
+    restartVideo,
   ])
 
   const backToPausedTime = useCallback(() => {
@@ -339,19 +372,14 @@ export const useVideoPlayer = ({
     if (selectedPlaylist?.id !== FULL_GAME_KEY) {
       restartVideo()
       setIsPausedTime(true)
+      return
     }
-
-    const liveProgressMs = Math.max(duration - BUFFERING_TIME, 0)
-
-    setPlayerState({ playedProgress: pausedProgress.current, seek: pausedProgress.current / 1000 })
-    if (liveProgressMs > 0) setIsPausedTime(false)
-    // eslint-disable-next-line
+    setIsPausedTime(false)
+  // eslint-disable-next-line
   }, [
     duration,
-    onPlaylistSelect,
     selectedPlaylist,
-    setPlayerState,
-    matchPlaylists.match,
+    restartVideo,
   ])
 
   const stopPlayingEpisodes = () => {
@@ -373,22 +401,17 @@ export const useVideoPlayer = ({
   }, [selectedPlaylist])
 
   useEffect(() => {
-    if (duration && isUndefined(resumeFrom) && chaptersProps[0]?.isFullMatchChapter) {
+    if (
+      isLive
+      && isNumber(duration)
+      && isUndefined(resumeFrom)
+      && chaptersProps[0]?.isFullMatchChapter
+    ) {
       backToLive()
     }
     // eslint-disable-next-line
   }, [])
 
-  useEffect(() => {
-    if (duration
-        && isPausedTime
-        && chapters[0]?.isFullMatchChapter
-    ) {
-      backToPausedTime()
-    }
-    // eslint-disable-next-line
-  }, [duration, isPausedTime])
-
   useEventListener({
     callback: (e: KeyboardEvent) => {
       if (isOpen) return
@@ -434,7 +457,12 @@ export const useVideoPlayer = ({
       && chapters[0]?.url.match(regURL)?.[0] === chaptersProps[0]?.url.match(regURL)?.[0])
       || (isEmpty(chapters) || isEmpty(chaptersProps))) return
 
-    if (!isUndefined(resumeFrom) && chaptersProps[0].isFullMatchChapter) {
+    if (
+      !isUndefined(resumeFrom)
+      && chaptersProps[0].isFullMatchChapter
+      && !isLivePlaying
+      && !isPausedTime
+    ) {
       setPlayerState({
         ...initialState,
         chapters: chaptersProps,
@@ -444,6 +472,42 @@ export const useVideoPlayer = ({
       return
     }
 
+    if (
+      chaptersProps[0].isFullMatchChapter
+      && isLive
+      && selectedPlaylist.id === FULL_GAME_KEY
+      && isLivePlaying
+      && !isPausedTime
+    ) {
+      setIsLivePlaying(false)
+      setPlayerState({
+        ...initialState,
+        chapters: chaptersProps,
+        duration: videoRefDurationMs,
+        playing: true,
+        seek: Number.isFinite(videoRefDurationMs)
+          ? (videoRefDurationMs - BUFFERING_TIME) / 1000
+          : 0,
+      })
+      return
+    }
+
+    if (
+      chaptersProps[0].isFullMatchChapter
+      && selectedPlaylist.id === FULL_GAME_KEY
+      && isPausedTime
+      && !isLivePlaying
+    ) {
+      setIsPausedTime(false)
+      setPlayerState({
+        ...initialState,
+        chapters: chaptersProps,
+        duration: videoRefDurationMs,
+        playing: true,
+        seek: pausedProgress.current / 1000,
+      })
+      return
+    }
     setPlayerState({
       ...initialState,
       chapters: chaptersProps,
@@ -456,10 +520,18 @@ export const useVideoPlayer = ({
     chaptersProps,
     isLive,
     setPlayerState,
+    isPausedTime,
+    isLivePlaying,
+    videoRef,
+    selectedPlaylist,
   ])
 
   useEffect(() => {
-    if ((chapters[0]?.isFullMatchChapter) || isEmpty(chapters)) return
+    if ((
+      chapters[0]?.isFullMatchChapter)
+      || isEmpty(chapters)
+      || selectedPlaylist.id === FULL_GAME_KEY
+    ) return
 
     const { duration: chapterDuration } = getActiveChapter()
     if (playedProgress >= chapterDuration && !seeking && !isPlayFilterEpisodes) {
@@ -590,12 +662,12 @@ export const useVideoPlayer = ({
     buffering,
     chapters,
     currentPlayingOrder,
-    duration,
+    duration: duration || videoRefDurationMs,
     isFirstChapterPlaying,
     isFullscreen,
     isLastChapterPlaying,
     isLive,
-    isLiveTime: checkLive(),
+    isLiveTime,
     loadedProgress,
     numberOfChapters,
     onDuration,
-- 
2.30.2


From a56c44521b32005fd51db37cf38e987b24e3353f Mon Sep 17 00:00:00 2001
From: Ruslan Khayrullin <ruslfm08@gmail.com>
Date: Mon, 15 May 2023 18:01:56 +0500
Subject: [PATCH 2/4] feat(in-600): remove mp4 player

---
 package-lock.json                             |  62 ---
 package.json                                  |   1 -
 .../components/FinishedMatch/helpers.tsx      | 139 -----
 .../components/FinishedMatch/hooks/index.tsx  |  71 ---
 .../FinishedMatch/hooks/useChapters.tsx       |  46 --
 .../FinishedMatch/hooks/useEpisodes.tsx       |  71 ---
 .../FinishedMatch/hooks/usePlayerLogger.tsx   |  72 ---
 .../components/FinishedMatch/index.tsx        |  74 ---
 .../components/FinishedMatch/styled.tsx       |  26 -
 .../MatchPage/components/LiveMatch/index.tsx  |  23 +-
 src/features/MatchPage/index.tsx              |  11 +-
 .../MatchPage/store/hooks/useMatchData.tsx    |   7 +-
 src/features/MatchPopup/store/hooks/index.tsx |   5 +-
 .../components/Matches/index.tsx              |   4 +-
 .../__tests__/index.tsx                       |  47 --
 .../helpers/calculateChapterStyles/index.tsx  |  59 ---
 .../components/ProgressBar/hooks.tsx          |  51 --
 .../components/ProgressBar/index.tsx          |  52 --
 .../components/ProgressBar/stories.tsx        | 126 -----
 .../components/ProgressBar/styled.tsx         |  20 -
 .../components/Settings/hooks.tsx             |  27 -
 .../components/Settings/index.tsx             |  47 --
 .../components/Settings/styled.tsx            |  78 ---
 src/features/MultiSourcePlayer/config.tsx     |   5 -
 .../MultiSourcePlayer/helpers/index.tsx       |  35 --
 .../MultiSourcePlayer/hooks/index.tsx         | 494 ------------------
 .../hooks/usePlayingHandlers.tsx              | 102 ----
 .../hooks/useProgressChangeHandler.tsx        |  51 --
 .../hooks/useVideoQuality.tsx                 |  38 --
 src/features/MultiSourcePlayer/index.tsx      | 268 ----------
 src/features/MultiSourcePlayer/styled.tsx     |  48 --
 src/features/MultiSourcePlayer/types.tsx      |  20 -
 .../Components/ControlsMobile/index.tsx       |   2 +-
 .../Controls/Components/ControlsWeb/index.tsx |   6 +-
 .../components/Controls/index.tsx             |  53 +-
 .../components/Settings/index.tsx             |   2 +-
 .../components/Settings/styled.tsx            |   4 +-
 .../components/YoutubePlayer/index.tsx        |  51 --
 src/features/StreamPlayer/hooks/index.tsx     |   2 +-
 src/features/StreamPlayer/styled.tsx          |  11 +-
 src/hooks/index.tsx                           |   1 +
 .../hooks/useDuration.tsx                     |   2 +-
 42 files changed, 43 insertions(+), 2271 deletions(-)
 delete mode 100644 src/features/MatchPage/components/FinishedMatch/helpers.tsx
 delete mode 100644 src/features/MatchPage/components/FinishedMatch/hooks/index.tsx
 delete mode 100644 src/features/MatchPage/components/FinishedMatch/hooks/useChapters.tsx
 delete mode 100644 src/features/MatchPage/components/FinishedMatch/hooks/useEpisodes.tsx
 delete mode 100644 src/features/MatchPage/components/FinishedMatch/hooks/usePlayerLogger.tsx
 delete mode 100644 src/features/MatchPage/components/FinishedMatch/index.tsx
 delete mode 100644 src/features/MatchPage/components/FinishedMatch/styled.tsx
 delete mode 100644 src/features/MultiSourcePlayer/components/ProgressBar/helpers/calculateChapterStyles/__tests__/index.tsx
 delete mode 100644 src/features/MultiSourcePlayer/components/ProgressBar/helpers/calculateChapterStyles/index.tsx
 delete mode 100644 src/features/MultiSourcePlayer/components/ProgressBar/hooks.tsx
 delete mode 100644 src/features/MultiSourcePlayer/components/ProgressBar/index.tsx
 delete mode 100644 src/features/MultiSourcePlayer/components/ProgressBar/stories.tsx
 delete mode 100644 src/features/MultiSourcePlayer/components/ProgressBar/styled.tsx
 delete mode 100644 src/features/MultiSourcePlayer/components/Settings/hooks.tsx
 delete mode 100644 src/features/MultiSourcePlayer/components/Settings/index.tsx
 delete mode 100644 src/features/MultiSourcePlayer/components/Settings/styled.tsx
 delete mode 100644 src/features/MultiSourcePlayer/config.tsx
 delete mode 100644 src/features/MultiSourcePlayer/helpers/index.tsx
 delete mode 100644 src/features/MultiSourcePlayer/hooks/index.tsx
 delete mode 100644 src/features/MultiSourcePlayer/hooks/usePlayingHandlers.tsx
 delete mode 100644 src/features/MultiSourcePlayer/hooks/useProgressChangeHandler.tsx
 delete mode 100644 src/features/MultiSourcePlayer/hooks/useVideoQuality.tsx
 delete mode 100644 src/features/MultiSourcePlayer/index.tsx
 delete mode 100644 src/features/MultiSourcePlayer/styled.tsx
 delete mode 100644 src/features/MultiSourcePlayer/types.tsx
 delete mode 100644 src/features/StreamPlayer/components/YoutubePlayer/index.tsx
 rename src/{features/MultiSourcePlayer => }/hooks/useDuration.tsx (75%)

diff --git a/package-lock.json b/package-lock.json
index f57f25ae..be12c447 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17293,11 +17293,6 @@
         "wrap-ansi": "^7.0.0"
       }
     },
-    "load-script": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
-      "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA=="
-    },
     "loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -21154,33 +21149,6 @@
         "memoize-one": ">=3.1.1 <6"
       }
     },
-    "react-youtube": {
-      "version": "7.14.0",
-      "resolved": "https://registry.npmjs.org/react-youtube/-/react-youtube-7.14.0.tgz",
-      "integrity": "sha512-SUHZ4F4pd1EHmQu0CV0KSQvAs5KHOT5cfYaq4WLCcDbU8fBo1ouTXaAOIASWbrz8fHwg+G1evfoSIYpV2AwSAg==",
-      "requires": {
-        "fast-deep-equal": "3.1.3",
-        "prop-types": "15.7.2",
-        "youtube-player": "5.5.2"
-      },
-      "dependencies": {
-        "prop-types": {
-          "version": "15.7.2",
-          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-          "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-          "requires": {
-            "loose-envify": "^1.4.0",
-            "object-assign": "^4.1.1",
-            "react-is": "^16.8.1"
-          }
-        },
-        "react-is": {
-          "version": "16.13.1",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-        }
-      }
-    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -22493,11 +22461,6 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
-    "sister": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/sister/-/sister-3.0.2.tgz",
-      "integrity": "sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA=="
-    },
     "sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -26154,31 +26117,6 @@
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
     },
-    "youtube-player": {
-      "version": "5.5.2",
-      "resolved": "https://registry.npmjs.org/youtube-player/-/youtube-player-5.5.2.tgz",
-      "integrity": "sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ==",
-      "requires": {
-        "debug": "^2.6.6",
-        "load-script": "^1.0.0",
-        "sister": "^3.0.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-        }
-      }
-    },
     "zwitch": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
diff --git a/package.json b/package.json
index 48ea4a1d..8e59a5b2 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,6 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "^5.0.1",
     "react-window": "^1.8.6",
-    "react-youtube": "^7.14.0",
     "recoil": "^0.7.4",
     "screenfull": "^5.0.2",
     "styled-components": "^5.3.3",
diff --git a/src/features/MatchPage/components/FinishedMatch/helpers.tsx b/src/features/MatchPage/components/FinishedMatch/helpers.tsx
deleted file mode 100644
index f99f3fb0..00000000
--- a/src/features/MatchPage/components/FinishedMatch/helpers.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import map from 'lodash/map'
-import last from 'lodash/last'
-import uniq from 'lodash/uniq'
-import filter from 'lodash/filter'
-import reduce from 'lodash/reduce'
-import concat from 'lodash/concat'
-import orderBy from 'lodash/orderBy'
-import isEmpty from 'lodash/isEmpty'
-import groupBy from 'lodash/groupBy'
-
-import type {
-  Videos,
-  Episodes,
-  Episode,
-} from 'requests'
-
-import type { Chapters, Urls } from 'features/MultiSourcePlayer/types'
-
-import type { PlaylistOption } from '../../types'
-import { FULL_GAME_KEY } from '../../helpers/buildPlaylists'
-
-const getUniquePeriods = (videos: Videos) => uniq(map(videos, ({ period }) => period))
-
-type Video = {
-  duration: number,
-  period: number,
-  urls: Urls,
-}
-
-const getVideoByPeriod = (videos: Videos, period: number) => {
-  const videosWithSamePeriod = filter(videos, { period })
-  if (isEmpty(videosWithSamePeriod)) return null
-
-  const urls = reduce(
-    videosWithSamePeriod,
-    (acc: Urls, video) => ({
-      ...acc,
-      [video.quality]: video.url,
-    }),
-    {},
-  )
-  const [video] = videosWithSamePeriod
-  return {
-    duration: video.duration,
-    period: video.period,
-    urls,
-  }
-}
-
-const getVideoByPeriods = (videos: Videos, periods: Array<number>) => (
-  reduce(
-    periods,
-    (acc: Array<Video>, period) => {
-      const video = getVideoByPeriod(videos, period)
-      return video ? concat(acc, video) : acc
-    },
-    [],
-  )
-)
-
-const getFullMatchChapters = (videos: Array<Video>) => {
-  const sortedVideos = orderBy(videos, ({ period }) => period)
-  return reduce(
-    sortedVideos,
-    (acc: Chapters, video) => {
-      const prevVideoEndMs = last(acc)?.endMs || 0
-      const endMs = prevVideoEndMs + video.duration
-      const nextChapter = {
-        duration: video.duration,
-        endMs,
-        endOffsetMs: endMs,
-        isFullMatchChapter: true,
-        period: video.period,
-        startMs: prevVideoEndMs,
-        startOffsetMs: 0,
-        urls: video.urls,
-      }
-      return concat(acc, nextChapter)
-    },
-    [],
-  )
-}
-
-const getEpisodeUrls = (urls: Urls, episode: Episode) => reduce(
-  urls,
-  (
-    acc: Urls,
-    url,
-    qulaity,
-  ) => {
-    acc[qulaity] = `${url}#t=${episode.s},${episode.e}`
-    return acc
-  },
-  {},
-)
-
-const getPlaylistChapters = (videos: Array<Video>, episodes: Episodes) => {
-  const groupedByPeriods = groupBy(videos, ({ period }) => period)
-  return reduce(
-    episodes,
-    (acc: Chapters, episode) => {
-      const video = groupedByPeriods[episode.h]?.[0]
-      if (!video || episode.s >= episode.e) return acc
-
-      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,
-        period: video.period,
-        startMs: prevVideoEndMs,
-        startOffsetMs: episode.s * 1000,
-        urls: getEpisodeUrls(video.urls, episode),
-      }
-      return concat(acc, nextChapter)
-    },
-    [],
-  )
-}
-
-type Args = {
-  episodes: Episodes,
-  selectedPlaylist?: PlaylistOption,
-  videos: Videos,
-}
-
-export const buildChapters = ({
-  episodes,
-  selectedPlaylist,
-  videos,
-}: Args) => {
-  const periods = getUniquePeriods(videos)
-  const highQualityVideos = getVideoByPeriods(videos, periods)
-  return selectedPlaylist?.id === FULL_GAME_KEY
-    ? getFullMatchChapters(highQualityVideos)
-    : getPlaylistChapters(highQualityVideos, episodes)
-}
diff --git a/src/features/MatchPage/components/FinishedMatch/hooks/index.tsx b/src/features/MatchPage/components/FinishedMatch/hooks/index.tsx
deleted file mode 100644
index b9db5dc2..00000000
--- a/src/features/MatchPage/components/FinishedMatch/hooks/index.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useEffect } from 'react'
-
-import { useToggle, useObjectState } from 'hooks'
-
-import type { Settings } from 'features/MatchPopup'
-import { useMatchPopupStore } from 'features/MatchPopup'
-import { useMatchPageStore } from 'features/MatchPage/store'
-
-import { usePlayerLogger } from './usePlayerLogger'
-import { useEpisodes } from './useEpisodes'
-import { useChapters } from './useChapters'
-
-const initPausedData = {
-  activeChapterIndex: 0,
-  activePlayer: 0 || 1,
-  playedProgress: 0,
-}
-
-export type PausedData = typeof initPausedData
-
-export const useFinishedMatch = () => {
-  const [pausedData, setPausedData] = useObjectState<PausedData>(initPausedData)
-
-  const { setChapters, setSettings } = useMatchPopupStore()
-  const {
-    handlePlaylistClick,
-    matchPlaylists,
-    selectedPlaylist,
-  } = useMatchPageStore()
-  const {
-    close: closeSettingsPopup,
-    isOpen: isSettingsPopupOpen,
-    open: openSettingsPopup,
-  } = useToggle()
-
-  const { episodes } = useEpisodes()
-
-  const { logPlaylistChange, onPlayingChange } = usePlayerLogger()
-
-  const setEpisodesSettings = (newSettings: Settings) => {
-    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 })
-
-  useEffect(() => {
-    setChapters(chapters)
-  }, [chapters, setChapters])
-
-  return {
-    chapters,
-    closeSettingsPopup,
-    isSettingsPopupOpen,
-    onPlayingChange,
-    onPlaylistSelect,
-    openSettingsPopup,
-    pausedData,
-    playlists: matchPlaylists,
-    selectedPlaylist,
-    setEpisodesSettings,
-    setPausedData,
-  }
-}
diff --git a/src/features/MatchPage/components/FinishedMatch/hooks/useChapters.tsx b/src/features/MatchPage/components/FinishedMatch/hooks/useChapters.tsx
deleted file mode 100644
index 747bfe31..00000000
--- a/src/features/MatchPage/components/FinishedMatch/hooks/useChapters.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import {
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
-
-import type { Episodes, Videos } from 'requests'
-import { getVideos } from 'requests'
-
-import { usePageParams } from 'hooks/usePageParams'
-
-import type { PlaylistOption } from 'features/MatchPage/types'
-
-import { buildChapters } from '../helpers'
-
-type Args = {
-  episodes: Episodes,
-  selectedPlaylist?: PlaylistOption,
-}
-
-export const useChapters = ({
-  episodes,
-  selectedPlaylist,
-}: Args) => {
-  const [videos, setVideos] = useState<Videos>([])
-  const { profileId: matchId, sportType } = usePageParams()
-
-  useEffect(() => {
-    getVideos(sportType, matchId).then(setVideos)
-  }, [sportType, matchId])
-
-  const chapters = useMemo(
-    () => buildChapters({
-      episodes,
-      selectedPlaylist,
-      videos,
-    }),
-    [
-      selectedPlaylist,
-      episodes,
-      videos,
-    ],
-  )
-
-  return { chapters }
-}
diff --git a/src/features/MatchPage/components/FinishedMatch/hooks/useEpisodes.tsx b/src/features/MatchPage/components/FinishedMatch/hooks/useEpisodes.tsx
deleted file mode 100644
index a104b35c..00000000
--- a/src/features/MatchPage/components/FinishedMatch/hooks/useEpisodes.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import {
-  useCallback,
-  useEffect,
-  useState,
-} from 'react'
-
-import isEmpty from 'lodash/isEmpty'
-
-import type { Episodes } from 'requests'
-import { getPlayerPlaylists } from 'requests'
-
-import { usePageParams } from 'hooks/usePageParams'
-
-import { PlaylistOption, PlaylistTypes } from 'features/MatchPage/types'
-import { useMatchPageStore } from 'features/MatchPage/store'
-
-import {
-  defaultSettings,
-  Settings,
-  useMatchPopupStore,
-} from 'features/MatchPopup'
-
-export const useEpisodes = () => {
-  const { settings } = useMatchPopupStore()
-  const {
-    handlePlaylistClick,
-    matchPlaylists: playlists,
-    selectedPlaylist,
-  } = useMatchPageStore()
-  const [episodes, setEpisodes] = useState<Episodes>([])
-  const { profileId: matchId, sportType } = usePageParams()
-
-  const fetchEpisodes = useCallback((
-    playlistOption: PlaylistOption,
-    popupSettings: Settings = defaultSettings,
-  ) => {
-    if (playlistOption.type === PlaylistTypes.PLAYER) {
-      getPlayerPlaylists({
-        matchId,
-        playerId: playlistOption.id,
-        settings: popupSettings,
-        sportType,
-      }).then(setEpisodes)
-    } else if (playlistOption.type === PlaylistTypes.MATCH
-       || playlistOption.type === PlaylistTypes.EVENT) {
-      setEpisodes(playlistOption.episodes)
-    }
-  }, [matchId, sportType])
-
-  useEffect(() => {
-    if (!selectedPlaylist && playlists && !isEmpty(playlists.match)) {
-      // handlePlaylistClick(playlists.match[0])
-    }
-  }, [
-    selectedPlaylist,
-    playlists,
-    handlePlaylistClick,
-  ])
-
-  useEffect(() => {
-    if (selectedPlaylist) {
-      fetchEpisodes(selectedPlaylist, settings)
-    }
-  }, [
-    settings,
-    selectedPlaylist,
-    fetchEpisodes,
-  ])
-
-  return { episodes }
-}
diff --git a/src/features/MatchPage/components/FinishedMatch/hooks/usePlayerLogger.tsx b/src/features/MatchPage/components/FinishedMatch/hooks/usePlayerLogger.tsx
deleted file mode 100644
index 52c4c978..00000000
--- a/src/features/MatchPage/components/FinishedMatch/hooks/usePlayerLogger.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import {
-  useCallback,
-  useRef,
-} from 'react'
-import { useLocation } from 'react-router'
-
-import { LogActions, logUserAction } from 'requests/logUserAction'
-
-import { useInterval } from 'hooks/useInterval'
-import { usePageParams } from 'hooks/usePageParams'
-
-import { PlaylistOption, PlaylistTypes } from 'features/MatchPage/types'
-
-const playlistTypeConfig = {
-  ball_in_play: 2,
-  full_game: 1,
-  goals: 4,
-  highlights: 3,
-  players: 5,
-}
-
-const getInitialData = () => ({ dateVisit: new Date().toISOString(), seconds: 0 })
-
-export const usePlayerLogger = () => {
-  const location = useLocation()
-  const { profileId, sportType } = usePageParams()
-  const data = useRef(getInitialData())
-
-  const incrementSeconds = () => data.current.seconds++
-
-  const resetData = () => {
-    data.current = getInitialData()
-  }
-
-  const { start, stop } = useInterval({
-    callback: incrementSeconds,
-    intervalDuration: 1000,
-    startImmediate: false,
-  })
-
-  const onPlayingChange = useCallback((playing: boolean) => {
-    if (playing) {
-      start()
-    } else {
-      stop()
-    }
-  }, [start, stop])
-
-  const logPlaylistChange = (prevPlaylist: PlaylistOption) => {
-    const args = prevPlaylist.type === PlaylistTypes.MATCH
-      ? {
-        playlistType: playlistTypeConfig[prevPlaylist.id],
-      }
-      : {
-        playerId: prevPlaylist.id,
-        playlistType: playlistTypeConfig.players,
-      }
-
-    logUserAction({
-      actionType: LogActions.VideoChange,
-      dateVisit: data.current.dateVisit,
-      duration: data.current.seconds,
-      matchId: profileId,
-      sportType,
-      url: location.pathname,
-      ...args,
-    })
-    resetData()
-  }
-
-  return { logPlaylistChange, onPlayingChange }
-}
diff --git a/src/features/MatchPage/components/FinishedMatch/index.tsx b/src/features/MatchPage/components/FinishedMatch/index.tsx
deleted file mode 100644
index 21467f16..00000000
--- a/src/features/MatchPage/components/FinishedMatch/index.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Fragment } from 'react'
-
-import isEmpty from 'lodash/isEmpty'
-
-import { MatchSidePlaylists } from 'features/MatchSidePlaylists'
-import { MultiSourcePlayer } from 'features/MultiSourcePlayer'
-
-import { SettingsPopup } from '../SettingsPopup'
-
-import { useFinishedMatch } from './hooks'
-import { Container } from '../../styled'
-import { Modal } from './styled'
-import { MatchDescription } from '../MatchDescription'
-import { useMatchPageStore } from '../../store'
-
-export const FinishedMatch = () => {
-  const {
-    access,
-    isOpenFiltersPopup,
-    profile,
-    profileCardShown,
-  } = useMatchPageStore()
-  const {
-    chapters,
-    closeSettingsPopup,
-    isSettingsPopupOpen,
-    onPlayingChange,
-    onPlaylistSelect,
-    pausedData,
-    selectedPlaylist,
-    setEpisodesSettings,
-    setPausedData,
-  } = useFinishedMatch()
-
-  return (
-    <Fragment>
-      <Modal
-        close={closeSettingsPopup}
-        isOpen={isSettingsPopupOpen}
-        withCloseButton={false}
-      >
-        <SettingsPopup
-          onWatchEpisodesClick={setEpisodesSettings}
-          closePopup={closeSettingsPopup}
-          profile={profile}
-          selectedPlaylist={selectedPlaylist}
-        />
-      </Modal>
-
-      <Container isHidden={!profileCardShown}>
-        {!isEmpty(chapters) && (
-          <Fragment>
-            <MultiSourcePlayer
-              pausedData={pausedData}
-              setPausedData={setPausedData}
-              access={access}
-              isOpenPopup={isOpenFiltersPopup}
-              chapters={chapters}
-              onPlayingChange={onPlayingChange}
-              profile={profile}
-            />
-            <MatchDescription />
-          </Fragment>
-        )}
-      </Container>
-
-      <MatchSidePlaylists
-        selectedPlaylist={selectedPlaylist}
-        // @ts-expect-error
-        onSelect={onPlaylistSelect}
-      />
-    </Fragment>
-  )
-}
diff --git a/src/features/MatchPage/components/FinishedMatch/styled.tsx b/src/features/MatchPage/components/FinishedMatch/styled.tsx
deleted file mode 100644
index e7f5ba13..00000000
--- a/src/features/MatchPage/components/FinishedMatch/styled.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import styled from 'styled-components/macro'
-
-import { devices } from 'config/devices'
-
-import { Modal as BaseModal } from 'features/Modal'
-import { ModalWindow } from 'features/Modal/styled'
-
-export const Modal = styled(BaseModal)`
-  background-color: rgba(0, 0, 0, 0.7);
-
-  ${ModalWindow} {
-    width: 1222px;
-    padding: 20px 0;
-    border-radius: 5px;
-
-    @media ${devices.tablet} {
-      width: 100vw;
-    }
-
-    @media ${devices.mobile} {
-      height: 100vh;
-      padding: 0;
-      background-color: transparent;
-    }
-  }
-`
diff --git a/src/features/MatchPage/components/LiveMatch/index.tsx b/src/features/MatchPage/components/LiveMatch/index.tsx
index 6b9ba090..d7868e60 100644
--- a/src/features/MatchPage/components/LiveMatch/index.tsx
+++ b/src/features/MatchPage/components/LiveMatch/index.tsx
@@ -4,7 +4,6 @@ import isEmpty from 'lodash/isEmpty'
 
 import { useMatchPageStore } from 'features/MatchPage/store'
 import { StreamPlayer } from 'features/StreamPlayer'
-import { YoutubePlayer } from 'features/StreamPlayer/components/YoutubePlayer'
 import { MatchSidePlaylists } from 'features/MatchSidePlaylists'
 
 import { Container } from '../../styled'
@@ -26,31 +25,19 @@ export const LiveMatch = () => {
     onPlayingChange,
     onPlaylistSelect,
     resume,
-    streamUrl,
   } = useLiveMatch()
   return (
     <Fragment>
       <Container isHidden={!profileCardShown}>
-        {profile?.youtube_link ? (
-          <YoutubePlayer
-            chapters={chapters}
+        {!isEmpty(chapters) && (
+          <StreamPlayer
+            onDurationChange={onDurationChange}
             onPlayingChange={onPlayingChange}
-            isLive={profile.live}
             onProgressChange={onPlayerProgressChange}
+            isLive={!!profile?.live}
             resumeFrom={resume}
-            url={streamUrl}
+            chapters={chapters}
           />
-        ) : (
-          !isEmpty(chapters) && (
-            <StreamPlayer
-              onDurationChange={onDurationChange}
-              onPlayingChange={onPlayingChange}
-              onProgressChange={onPlayerProgressChange}
-              isLive={!!profile?.live}
-              resumeFrom={resume}
-              chapters={chapters}
-            />
-          )
         )}
         <MatchDescription />
       </Container>
diff --git a/src/features/MatchPage/index.tsx b/src/features/MatchPage/index.tsx
index bdbc7e86..4a0fb852 100644
--- a/src/features/MatchPage/index.tsx
+++ b/src/features/MatchPage/index.tsx
@@ -30,7 +30,6 @@ import { TourProvider } from 'features/MatchTour'
 import { MatchPageStore, useMatchPageStore } from './store'
 import { SubscriptionGuard } from './components/SubscriptionGuard'
 import { LiveMatch } from './components/LiveMatch'
-import { FinishedMatch } from './components/FinishedMatch'
 import { FavouriteTeamPopup } from './components/FavouriteTeam'
 import { Wrapper } from './styled'
 
@@ -90,9 +89,6 @@ const MatchPageComponent = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [profile])
 
-  const playFromScout = profile?.has_video && !profile?.live && !profile.has_hls
-  const playFromOTT = (!profile?.has_video && (profile?.live || profile?.storage))
-      || profile?.has_hls
   // TODO Добавить попап 'Данный матч ещё не начался'
   if (!isStarted && profile?.live === false) {
     const sportName = history.location.pathname.split('/')[1]
@@ -109,12 +105,7 @@ const MatchPageComponent = () => {
         <UserFavorites />
         <SubscriptionGuard>
           <Wrapper isTourOpen={Boolean(isOpen)}>
-            {playFromOTT && (
-              <LiveMatch />
-            )}
-            {playFromScout && (
-              <FinishedMatch />
-            )}
+            <LiveMatch />
           </Wrapper>
         </SubscriptionGuard>
       </Main>
diff --git a/src/features/MatchPage/store/hooks/useMatchData.tsx b/src/features/MatchPage/store/hooks/useMatchData.tsx
index e36bdf13..4e12e383 100644
--- a/src/features/MatchPage/store/hooks/useMatchData.tsx
+++ b/src/features/MatchPage/store/hooks/useMatchData.tsx
@@ -6,10 +6,13 @@ import {
 
 import type { MatchInfo } from 'requests/getMatchInfo'
 
-import { usePageParams, useInterval } from 'hooks'
+import {
+  usePageParams,
+  useInterval,
+  useDuration,
+} from 'hooks'
 
 import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
-import { useDuration } from 'features/MultiSourcePlayer/hooks/useDuration'
 import { useMatchPopupStore } from 'features/MatchPopup'
 
 import { useMatchPlaylists } from './useMatchPlaylists'
diff --git a/src/features/MatchPopup/store/hooks/index.tsx b/src/features/MatchPopup/store/hooks/index.tsx
index df39d8c2..67830e03 100644
--- a/src/features/MatchPopup/store/hooks/index.tsx
+++ b/src/features/MatchPopup/store/hooks/index.tsx
@@ -9,12 +9,11 @@ import isEmpty from 'lodash/isEmpty'
 
 import { getMatchPlaylists } from 'requests'
 
-import { useToggle } from 'hooks'
+import { useToggle, useDuration } from 'hooks'
 
 import { buildPlaylists } from 'features/MatchPage/helpers/buildPlaylists'
 import { Playlists } from 'features/MatchPage/types'
-import { Chapters } from 'features/MultiSourcePlayer/types'
-import { useDuration } from 'features/MultiSourcePlayer/hooks/useDuration'
+import type { Chapters } from 'features/StreamPlayer/types'
 
 import { useSettingsState } from './useSettingsState'
 import { useSportActions } from './useSportActions'
diff --git a/src/features/MatchSidePlaylists/components/Matches/index.tsx b/src/features/MatchSidePlaylists/components/Matches/index.tsx
index db93b4be..60172d1d 100644
--- a/src/features/MatchSidePlaylists/components/Matches/index.tsx
+++ b/src/features/MatchSidePlaylists/components/Matches/index.tsx
@@ -38,12 +38,12 @@ export const Matches = ({
   const { profileId } = usePageParams()
 
   const profileDate = useMemo(() => (
-    formatDate(parseDate(profile?.date!))
+    profile?.date && formatDate(parseDate(profile.date))
   ), [profile?.date])
 
   const matches = useMemo(() => (
     tournamentData.matches.filter((match) => (
-      formatDate(match.date) === profileDate && match.id !== profileId
+      profileDate && formatDate(match.date) === profileDate && match.id !== profileId
     ))
   ), [profileDate, profileId, tournamentData.matches])
 
diff --git a/src/features/MultiSourcePlayer/components/ProgressBar/helpers/calculateChapterStyles/__tests__/index.tsx b/src/features/MultiSourcePlayer/components/ProgressBar/helpers/calculateChapterStyles/__tests__/index.tsx
deleted file mode 100644
index 30c3c457..00000000
--- a/src/features/MultiSourcePlayer/components/ProgressBar/helpers/calculateChapterStyles/__tests__/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { calculateChapterStyles } from '..'
-
-const videoDuration = 60000
-
-it('return correct progress and width lengthes', () => {
-  let chapter = {
-    duration: 15000,
-    endMs: 20000,
-    period: 0,
-    startMs: 5000,
-    urls: {},
-  }
-  let expected = {
-    ...chapter,
-    loaded: 100,
-    played: 100,
-    width: 25,
-  }
-  expect(calculateChapterStyles({
-    activeChapterIndex: 0,
-    chapters: [chapter],
-    loadedProgress: 30000,
-    playedProgress: 30000,
-    videoDuration,
-  })).toEqual([expected])
-
-  chapter = {
-    duration: 30000,
-    endMs: 30000,
-    period: 0,
-    startMs: 0,
-    urls: {},
-  }
-  expected = {
-    ...chapter,
-    loaded: 50,
-    played: 50,
-    width: 50,
-  }
-  expect(calculateChapterStyles({
-    activeChapterIndex: 0,
-    chapters: [chapter],
-    loadedProgress: 15000,
-    playedProgress: 15000,
-    videoDuration,
-  })).toEqual([expected])
-})
diff --git a/src/features/MultiSourcePlayer/components/ProgressBar/helpers/calculateChapterStyles/index.tsx b/src/features/MultiSourcePlayer/components/ProgressBar/helpers/calculateChapterStyles/index.tsx
deleted file mode 100644
index e0bc9fe7..00000000
--- a/src/features/MultiSourcePlayer/components/ProgressBar/helpers/calculateChapterStyles/index.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import map from 'lodash/fp/map'
-import pipe from 'lodash/fp/pipe'
-import size from 'lodash/fp/size'
-import slice from 'lodash/fp/slice'
-
-import type { Chapters, Chapter } from 'features/MultiSourcePlayer/types'
-
-const calculateChapterProgress = (progress: number, chapter: Chapter) => (
-  Math.min(progress * 100 / chapter.duration, 100)
-)
-
-type Args = {
-  activeChapterIndex: number,
-  chapters: Chapters,
-  loadedProgress: number,
-  playedProgress: number,
-  videoDuration: number,
-}
-
-export const calculateChapterStyles = ({
-  activeChapterIndex,
-  chapters,
-  loadedProgress,
-  playedProgress,
-  videoDuration,
-}: Args) => {
-  const playedChapters = pipe(
-    slice(0, activeChapterIndex),
-    map((chapter: Chapter) => ({
-      ...chapter,
-      loaded: 100,
-      played: 100,
-      width: chapter.duration * 100 / videoDuration,
-    })),
-  )(chapters)
-
-  const comingChapters = pipe(
-    slice(activeChapterIndex + 1, size(chapters)),
-    map((chapter: Chapter) => ({
-      ...chapter,
-      loaded: 0,
-      played: 0,
-      width: chapter.duration * 100 / videoDuration,
-    })),
-  )(chapters)
-
-  const chapter = chapters[activeChapterIndex]
-  const activeChapter = {
-    ...chapter,
-    loaded: calculateChapterProgress(loadedProgress, chapter),
-    played: calculateChapterProgress(playedProgress, chapter),
-    width: chapter.duration * 100 / videoDuration,
-  }
-  return [
-    ...playedChapters,
-    activeChapter,
-    ...comingChapters,
-  ]
-}
diff --git a/src/features/MultiSourcePlayer/components/ProgressBar/hooks.tsx b/src/features/MultiSourcePlayer/components/ProgressBar/hooks.tsx
deleted file mode 100644
index 0a63ff12..00000000
--- a/src/features/MultiSourcePlayer/components/ProgressBar/hooks.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/* eslint-disable  @typescript-eslint/no-explicit-any */
-import { useMemo } from 'react'
-
-import { secondsToHms } from 'helpers'
-
-import type { Chapters } from '../../types'
-import { calculateChapterStyles } from './helpers/calculateChapterStyles'
-
-export type Props = {
-  activeChapterIndex: number,
-  allPlayedProgress: number,
-  chapters?: Chapters,
-  duration: number,
-  loadedProgress: number,
-  onPlayedProgressChange: (progress: number, seeking: boolean) => void,
-  onTouchEnd?: () => any,
-  onTouchStart?: () => any,
-  playedProgress: number,
-}
-
-export const useProgressBar = ({
-  activeChapterIndex,
-  allPlayedProgress,
-  chapters = [],
-  duration,
-  loadedProgress,
-  playedProgress,
-}: Props) => {
-  const calculatedChapters = useMemo(
-    () => calculateChapterStyles({
-      activeChapterIndex,
-      chapters,
-      loadedProgress,
-      playedProgress,
-      videoDuration: duration,
-    }),
-    [
-      activeChapterIndex,
-      loadedProgress,
-      playedProgress,
-      duration,
-      chapters,
-    ],
-  )
-
-  return {
-    calculatedChapters,
-    playedProgressInPercent: Math.min(allPlayedProgress * 100 / duration, 100),
-    time: secondsToHms(allPlayedProgress / 1000),
-  }
-}
diff --git a/src/features/MultiSourcePlayer/components/ProgressBar/index.tsx b/src/features/MultiSourcePlayer/components/ProgressBar/index.tsx
deleted file mode 100644
index bc41a2ed..00000000
--- a/src/features/MultiSourcePlayer/components/ProgressBar/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useSlider } from 'features/StreamPlayer/hooks/useSlider'
-import { TimeTooltip } from 'features/StreamPlayer/components/TimeTooltip'
-import { Scrubber, ScrubberContainer } from 'features/StreamPlayer/components/ProgressBar/styled'
-
-import { Chapters } from 'features/StreamPlayer/components/Chapters'
-import type { Props } from './hooks'
-import { useProgressBar } from './hooks'
-import { ProgressBarList } from './styled'
-import { isIOS } from '../../../../config/userAgent'
-
-export interface ProgressBarProps extends Props {
-  isScrubberVisible?: boolean,
-}
-
-export const ProgressBar = (props: ProgressBarProps) => {
-  const {
-    isScrubberVisible,
-    onPlayedProgressChange,
-    onTouchEnd,
-    onTouchStart,
-  } = props
-
-  const progressBarRef = useSlider({
-    onChange: onPlayedProgressChange,
-    onTouchEnd,
-    onTouchStart,
-  })
-
-  const {
-    calculatedChapters,
-    playedProgressInPercent,
-    time,
-  } = useProgressBar(props)
-
-  return (
-    <ProgressBarList
-      ref={progressBarRef}
-      isIOS={isIOS}
-    >
-      <Chapters chapters={calculatedChapters} />
-      {isScrubberVisible && (
-        <ScrubberContainer>
-          <Scrubber
-            style={{ left: `${playedProgressInPercent}%` }}
-          >
-            <TimeTooltip time={time} />
-          </Scrubber>
-        </ScrubberContainer>
-      )}
-    </ProgressBarList>
-  )
-}
diff --git a/src/features/MultiSourcePlayer/components/ProgressBar/stories.tsx b/src/features/MultiSourcePlayer/components/ProgressBar/stories.tsx
deleted file mode 100644
index 807640f6..00000000
--- a/src/features/MultiSourcePlayer/components/ProgressBar/stories.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import type { ReactElement } from 'react'
-
-import styled from 'styled-components/macro'
-
-import { VolumeBar } from 'features/StreamPlayer/components/VolumeBar'
-import {
-  Controls,
-  Fullscreen,
-  PlayStop,
-} from 'features/StreamPlayer/styled'
-
-import { ProgressBar } from '.'
-
-const Story = {
-  component: ProgressBar,
-  title: 'ProgressBarWithChapters',
-}
-
-export default Story
-
-const Wrapper = styled.div`
-  position: relative;
-  width: 95vw;
-  height: 50vh;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: #000;
-`
-
-const callback = () => {}
-
-const renderInControls = (progressBarElement: ReactElement) => (
-  <Wrapper>
-    <Controls visible>
-      <PlayStop onClick={callback} playing={false} />
-      <VolumeBar
-        value={50}
-        muted={false}
-        onChange={callback}
-        onClick={callback}
-      />
-      {progressBarElement}
-      <Fullscreen onClick={callback} isFullscreen={false} />
-    </Controls>
-  </Wrapper>
-)
-
-const duration = 70000
-
-const chapters = [
-  {
-    duration: 30000,
-    endMs: 30000,
-    endOffsetMs: 0,
-    period: 0,
-    startMs: 0,
-    startOffsetMs: 0,
-    urls: {},
-  },
-  {
-    duration: 30000,
-    endMs: 60000,
-    endOffsetMs: 0,
-    period: 0,
-    startMs: 30000,
-    startOffsetMs: 0,
-    urls: {},
-  },
-  {
-    duration: 10000,
-    endMs: 70000,
-    endOffsetMs: 0,
-    period: 0,
-    startMs: 60000,
-    startOffsetMs: 0,
-    urls: {},
-  },
-]
-
-export const Empty = () => renderInControls(
-  <ProgressBar
-    activeChapterIndex={0}
-    allPlayedProgress={0}
-    duration={duration}
-    chapters={chapters}
-    onPlayedProgressChange={callback}
-    playedProgress={0}
-    loadedProgress={0}
-  />,
-)
-
-export const HalfLoaded = () => renderInControls(
-  <ProgressBar
-    activeChapterIndex={0}
-    allPlayedProgress={0}
-    duration={duration}
-    chapters={chapters}
-    onPlayedProgressChange={callback}
-    playedProgress={0}
-    loadedProgress={30000}
-  />,
-)
-
-export const HalfPlayed = () => renderInControls(
-  <ProgressBar
-    activeChapterIndex={1}
-    allPlayedProgress={1}
-    duration={duration}
-    chapters={chapters}
-    onPlayedProgressChange={callback}
-    playedProgress={30000}
-    loadedProgress={0}
-  />,
-)
-
-export const Loaded40AndPlayed20 = () => renderInControls(
-  <ProgressBar
-    activeChapterIndex={0}
-    allPlayedProgress={0}
-    duration={duration}
-    chapters={chapters}
-    onPlayedProgressChange={callback}
-    playedProgress={20000}
-    loadedProgress={40000}
-  />,
-)
diff --git a/src/features/MultiSourcePlayer/components/ProgressBar/styled.tsx b/src/features/MultiSourcePlayer/components/ProgressBar/styled.tsx
deleted file mode 100644
index 9d5529d5..00000000
--- a/src/features/MultiSourcePlayer/components/ProgressBar/styled.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import styled, { css } from 'styled-components/macro'
-import { isMobileDevice } from 'config/userAgent'
-
-export const ProgressBarList = styled.div<{isIOS?: boolean}>`
-  flex-grow: 1;
-  height: 4px;
-  position: relative;
-
-  ${isMobileDevice
-    ? css`
-      height: 1px;
-    `
-    : ''}
-  
-  ${({ isIOS }) => (isIOS && isMobileDevice
-    && css`
-        height: 3px;
-        margin: 0 24px;
-    `)}
-`
diff --git a/src/features/MultiSourcePlayer/components/Settings/hooks.tsx b/src/features/MultiSourcePlayer/components/Settings/hooks.tsx
deleted file mode 100644
index 3f718672..00000000
--- a/src/features/MultiSourcePlayer/components/Settings/hooks.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useToggle } from 'hooks'
-
-export type Props = {
-  onSelect: (quality: string) => void,
-  selectedQuality: string,
-  videoQualities: Array<string>,
-}
-
-export const useSettings = ({ onSelect }: Props) => {
-  const {
-    close,
-    isOpen,
-    open,
-  } = useToggle()
-
-  const onItemClick = (quality: string) => {
-    onSelect(quality)
-    close()
-  }
-
-  return {
-    close,
-    isOpen,
-    onItemClick,
-    open,
-  }
-}
diff --git a/src/features/MultiSourcePlayer/components/Settings/index.tsx b/src/features/MultiSourcePlayer/components/Settings/index.tsx
deleted file mode 100644
index 48b879bd..00000000
--- a/src/features/MultiSourcePlayer/components/Settings/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Fragment } from 'react'
-
-import map from 'lodash/map'
-
-import { OutsideClick } from 'features/OutsideClick'
-
-import type { Props } from './hooks'
-import { useSettings } from './hooks'
-import {
-  SettingsButton,
-  QualitiesList,
-  QualityItem,
-} from './styled'
-
-export const Settings = (props: Props) => {
-  const { selectedQuality, videoQualities } = props
-  const {
-    close,
-    isOpen,
-    onItemClick,
-    open,
-  } = useSettings(props)
-  return (
-    <Fragment>
-      <SettingsButton onClick={open} id='match_video_quality' />
-      {
-        isOpen && (
-          <OutsideClick onClick={close}>
-            <QualitiesList>
-              {
-                map(videoQualities, (quality) => (
-                  <QualityItem
-                    key={quality}
-                    active={quality === selectedQuality}
-                    onClick={() => onItemClick(quality)}
-                  >
-                    {quality}
-                  </QualityItem>
-                ))
-              }
-            </QualitiesList>
-          </OutsideClick>
-        )
-      }
-    </Fragment>
-  )
-}
diff --git a/src/features/MultiSourcePlayer/components/Settings/styled.tsx b/src/features/MultiSourcePlayer/components/Settings/styled.tsx
deleted file mode 100644
index 86a0f378..00000000
--- a/src/features/MultiSourcePlayer/components/Settings/styled.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import styled, { css } from 'styled-components/macro'
-import { isMobileDevice } from 'config/userAgent'
-import { ButtonBase } from 'features/StreamPlayer/styled'
-
-export const SettingsButton = styled(ButtonBase)`
-  width: 22px;
-  height: 20px;
-  margin-right: 25px;
-  background-image: url(/images/settings.svg);
-
-  ${isMobileDevice
-    ? css`
-      width: 20px;
-      height: 18px;
-      margin-right: 15px;
-      cursor: pointer;
-    `
-    : ''};
-`
-
-export const QualitiesList = styled.ul`
-  position: absolute;
-  z-index: 1;
-  bottom: calc(100% + 14px);
-  right: 24px;
-  width: 52px;
-  list-style: none;
-  border-radius: 2px;
-  background-color: rgba(0, 0, 0, 0.5);
-  overflow: hidden;
-
-  ${isMobileDevice
-    ? css`
-      right: 0;
-      bottom: 35px;
-    `
-    : ''};
-`
-
-type QualityItemProps = {
-  active: boolean,
-}
-
-const activeIcon = css`
-  :before {
-    position: absolute;
-    top: 45%;
-    transform: rotate(-45deg);
-    content: '';
-    left: 8px;
-    width: 5px;
-    height: 3px;
-    border-left: 1px solid #fff;
-    border-bottom: 1px solid #fff;
-  }
-`
-
-export const QualityItem = styled.li<QualityItemProps>`
-  width: 100%;
-  padding: 5px 8px;
-  text-align: right;
-  font-style: normal;
-  font-weight: normal;
-  /* stylelint-disable-next-line */
-  font-family: Montserrat;
-  font-size: 10px;
-  line-height: 12px;
-  letter-spacing: 0.01em;
-  color: #fff;
-  cursor: pointer;
-  position: relative;
-
-  :hover, :focus {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-
-  ${({ active }) => (active ? activeIcon : '')}
-`
diff --git a/src/features/MultiSourcePlayer/config.tsx b/src/features/MultiSourcePlayer/config.tsx
deleted file mode 100644
index 02537a31..00000000
--- a/src/features/MultiSourcePlayer/config.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { isMobileDevice } from 'config/userAgent'
-
-export const REWIND_SECONDS = isMobileDevice ? 10 : 5
-
-export const HOUR_IN_MILLISECONDS = 60 * 60 * 1000
diff --git a/src/features/MultiSourcePlayer/helpers/index.tsx b/src/features/MultiSourcePlayer/helpers/index.tsx
deleted file mode 100644
index 41316ee0..00000000
--- a/src/features/MultiSourcePlayer/helpers/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { RefObject } from 'react'
-
-import findIndex from 'lodash/findIndex'
-
-import type { Chapters, Players } from '../types'
-
-type Args = {
-  from?: number,
-  url: string,
-  videoRef: RefObject<HTMLVideoElement>,
-}
-
-export const preparePlayer = ({
-  from = 0,
-  url,
-  videoRef,
-}: Args) => {
-  const video = videoRef?.current
-  if (!video) return
-
-  // eslint-disable-next-line no-param-reassign
-  video.src = url
-  if (from) {
-    video.currentTime = from
-  }
-  video.load()
-}
-
-export const findChapterByProgress = (chapters: Chapters, progressMs: number) => (
-  findIndex(chapters, ({ endMs, startMs }) => (
-    startMs <= progressMs && progressMs <= endMs
-  ))
-)
-
-export const getNextPlayer = (player: Players): Players => (player + 1) % 2
diff --git a/src/features/MultiSourcePlayer/hooks/index.tsx b/src/features/MultiSourcePlayer/hooks/index.tsx
deleted file mode 100644
index 27951bda..00000000
--- a/src/features/MultiSourcePlayer/hooks/index.tsx
+++ /dev/null
@@ -1,494 +0,0 @@
-import type { MouseEvent } from 'react'
-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'
-
-import { useControlsVisibility } from 'features/StreamPlayer/hooks/useControlsVisibility'
-import { useFullscreen } from 'features/StreamPlayer/hooks/useFullscreen'
-import { useVolume } from 'features/VideoPlayer/hooks/useVolume'
-import { useNoNetworkPopupStore } from 'features/NoNetworkPopup'
-import { useMatchPageStore } from 'features/MatchPage/store'
-import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
-
-import {
-  useEventListener,
-  useInterval,
-  useObjectState,
-  usePageParams,
-} from 'hooks'
-import type { SetPartialState } from 'hooks'
-
-import {
-  MatchInfo,
-  saveMatchStats,
-  VIEW_INTERVAL_MS,
-} from 'requests'
-
-import type { PausedData } from 'features/MatchPage/components/FinishedMatch/hooks'
-
-import { useProgressChangeHandler } from './useProgressChangeHandler'
-import { usePlayingHandlers } from './usePlayingHandlers'
-import { useVideoQuality } from './useVideoQuality'
-import { useDuration } from './useDuration'
-import type { Chapters } from '../types'
-import { Players } from '../types'
-import { getNextPlayer } from '../helpers'
-import { REWIND_SECONDS } from '../config'
-
-const initialState = {
-  activeChapterIndex: 0,
-  activePlayer: Players.PLAYER1,
-  loadedProgress: 0,
-  playedProgress: 0,
-  playing: false,
-  ready: false,
-  seek: {
-    [Players.PLAYER1]: 0,
-    [Players.PLAYER2]: 0,
-  },
-  seeking: false,
-}
-
-export type PlayerState = typeof initialState
-
-export type Props = {
-  access: boolean,
-  chapters: Chapters,
-  isOpenPopup?: boolean,
-  onError?: () => void,
-  onPlayingChange: (playing: boolean) => void,
-  pausedData: PausedData,
-  profile: MatchInfo,
-  setPausedData: SetPartialState<PausedData>,
-}
-
-export const useMultiSourcePlayer = ({
-  chapters,
-  onError,
-  onPlayingChange,
-  pausedData,
-  setPausedData,
-}: Props) => {
-  const [currentPlayingOrder, setCurrentPlayingOrder] = useState(0)
-  const ordersObj = useRef<Record<string, number>>({})
-
-  const {
-    disablePlayingEpisodes,
-    handlePlaylistClick,
-    isPlayFilterEpisodes,
-    isPlayingEpisode,
-    matchPlaylists,
-    playingOrder,
-    playingProgress,
-    playNextEpisode,
-    selectedPlaylist,
-    setCircleAnimation,
-    setPlayingProgress,
-  } = useMatchPageStore()
-
-  const { isOpen } = useTour()
-
-  const { profileId, sportType } = usePageParams()
-
-  /** время для сохранения статистики просмотра матча */
-  const timeForStatistics = useRef(0)
-
-  const numberOfChapters = size(chapters)
-  const [
-    {
-      activeChapterIndex: chapterIndex,
-      activePlayer,
-      loadedProgress,
-      playedProgress,
-      playing: statePlaying,
-      ready,
-      seek,
-      seeking,
-    },
-    setPlayerState,
-  ] = useObjectState(initialState)
-  const video1Ref = useRef<HTMLVideoElement>(null)
-  const video2Ref = useRef<HTMLVideoElement>(null)
-  const activeChapterIndex = numberOfChapters >= chapterIndex ? chapterIndex : 0
-  const {
-    onReady,
-    playNextChapter,
-    playPrevChapter,
-    stopPlaying,
-    togglePlaying,
-  } = usePlayingHandlers(setPlayerState, numberOfChapters)
-
-  const {
-    selectedQuality,
-    setSelectedQuality,
-    videoQualities,
-  } = useVideoQuality(chapters)
-
-  const duration = useDuration(chapters)
-
-  const playing = Boolean(statePlaying && !isOpen)
-
-  const handleError = useCallback(() => {
-    onError?.()
-  }, [onError])
-
-  const getActiveChapter = useCallback(
-    (index: number = activeChapterIndex) => chapters[index],
-    [chapters, activeChapterIndex],
-  )
-
-  const videoRef = [video1Ref, video2Ref][activePlayer]
-  const isFirstChapterPlaying = activeChapterIndex === 0
-  const isLastChapterPlaying = activeChapterIndex === numberOfChapters - 1
-  const setPlayerTime = (progressMs: number) => {
-    if (!videoRef.current) return
-    videoRef.current.currentTime = progressMs / 1000
-  }
-
-  const rewindForward = () => {
-    const chapter = getActiveChapter()
-    const newProgress = playedProgress + REWIND_SECONDS * 1000
-    if (newProgress <= chapter.duration) {
-      setPlayerTime(chapter.startOffsetMs + newProgress)
-    } else if (isLastChapterPlaying) {
-      playNextChapter()
-    } else {
-      const nextChapter = getActiveChapter(activeChapterIndex + 1)
-      const fromMs = newProgress - chapter.duration
-      playNextChapter(fromMs, nextChapter.startOffsetMs)
-    }
-  }
-
-  const rewindBackward = () => {
-    const chapter = getActiveChapter()
-    const newProgress = playedProgress - REWIND_SECONDS * 1000
-    if (newProgress >= 0) {
-      setPlayerTime(chapter.startOffsetMs + newProgress)
-    } else if (isFirstChapterPlaying) {
-      setPlayerTime(chapter.startOffsetMs)
-    } else {
-      const prevChapter = getActiveChapter(activeChapterIndex - 1)
-      const fromMs = prevChapter.duration + newProgress
-      playPrevChapter(fromMs, prevChapter.startOffsetMs)
-    }
-  }
-
-  const onProgressChange = useProgressChangeHandler({
-    chapters,
-    duration,
-    setPlayerState,
-  })
-
-  const {
-    isFullscreen,
-    onFullscreenClick,
-    wrapperRef,
-  } = useFullscreen(videoRef)
-
-  const getChapterUrl = useCallback((index: number, quality: string = selectedQuality) => (
-    getActiveChapter(index)?.urls[quality]
-  ), [selectedQuality, getActiveChapter])
-
-  const onQualitySelect = (quality: string) => {
-    setPlayerState((state) => ({
-      seek: {
-        ...state.seek,
-        [state.activePlayer]: videoRef.current?.currentTime ?? 0,
-      },
-    }))
-    setSelectedQuality(quality)
-  }
-
-  const onPlayerClick = (e: MouseEvent<HTMLDivElement>) => {
-    if (e.target === videoRef.current) {
-      togglePlaying()
-    }
-  }
-
-  const onLoadedProgress = (loadedMs: number) => {
-    const chapter = getActiveChapter()
-    const value = loadedMs - chapter.startOffsetMs
-
-    setPlayerState({ loadedProgress: value })
-  }
-
-  const onPlayedProgress = (playedMs: number) => {
-    const chapter = getActiveChapter()
-    const value = Math.max(playedMs - chapter.startOffsetMs, 0)
-
-    timeForStatistics.current = (value + chapter.startMs) / 1000
-
-    setPlayerState({ playedProgress: value })
-    setPlayingProgress(Math.floor(value / 1000))
-
-    if (chapter.isFullMatchChapter) {
-      setPausedData({
-        activeChapterIndex,
-        activePlayer,
-        playedProgress: value,
-      })
-    }
-  }
-
-  const backToPausedTime = useCallback(() => {
-    if (selectedPlaylist?.id !== FULL_GAME_KEY) {
-      // @ts-expect-error
-      handlePlaylistClick(matchPlaylists.match[0])
-    }
-
-    setTimeout(() => {
-      setPlayerState((state) => ({
-        activeChapterIndex: pausedData.activeChapterIndex,
-        playedProgress: pausedData.playedProgress,
-        seek: {
-          ...state.seek,
-          [pausedData.activePlayer]: pausedData.playedProgress / 1000,
-        },
-      }))
-    }, 0)
-  }, [
-    selectedPlaylist?.id,
-    pausedData,
-    handlePlaylistClick,
-    matchPlaylists.match,
-    setPlayerState,
-  ])
-
-  const onEnded = () => {
-    playNextChapter()
-  }
-  const onPause = () => {
-    setPlayerState({ playing: false })
-  }
-
-  const restartVideo = () => {
-    // @ts-expect-error
-    handlePlaylistClick(matchPlaylists.match[0])
-  }
-
-  const stopPlayingEpisodes = () => {
-    disablePlayingEpisodes()
-    restartVideo()
-    setTimeout(() => {
-      setPlayerState((state) => ({
-        activeChapterIndex: pausedData.activeChapterIndex,
-        playedProgress: pausedData.playedProgress,
-        seek: {
-          ...state.seek,
-          [pausedData.activePlayer]: pausedData.playedProgress / 1000,
-        },
-      }))
-    }, 1000)
-  }
-
-  useEffect(() => {
-    onPlayingChange(playing)
-  }, [playing, onPlayingChange])
-
-  useEffect(() => {
-    setPlayerState({ ...initialState })
-  }, [profileId, setPlayerState])
-
-  useEffect(() => {
-    setCircleAnimation((state) => ({
-      ...state,
-      playedProgress,
-      playing,
-      ready,
-    }))
-  }, [
-    playedProgress,
-    playing,
-    ready,
-    setCircleAnimation,
-  ])
-
-  useEffect(() => {
-    setPlayerState((state) => ({
-      ...initialState,
-      activePlayer: getNextPlayer(state.activePlayer),
-      playing: true,
-    }))
-  }, [chapters, setPlayerState])
-
-  useEffect(() => {
-    const { duration: chapterDuration } = getActiveChapter()
-    if (playedProgress >= chapterDuration && !seeking && isPlayFilterEpisodes) {
-      setPlayerState({ playedProgress: 0 })
-      playNextEpisode()
-    }
-    if (playedProgress >= chapterDuration && !seeking && !isPlayFilterEpisodes) {
-      if (isLastChapterPlaying) {
-        backToPausedTime()
-      } else {
-        playNextChapter()
-      }
-    }
-  }, [
-    isPlayFilterEpisodes,
-    playNextEpisode,
-    getActiveChapter,
-    playedProgress,
-    seeking,
-    playNextChapter,
-    setPlayerState,
-    isLastChapterPlaying,
-    backToPausedTime,
-  ])
-
-  useEventListener({
-    callback: (e: KeyboardEvent) => {
-      if (isOpen) return
-      if (e.code === KEYBOARD_KEYS.ArrowLeft) rewindBackward()
-      else if (e.code === KEYBOARD_KEYS.ArrowRight) rewindForward()
-    },
-    event: 'keydown',
-  })
-
-  const { isOnline } = useNoNetworkPopupStore()
-
-  useEffect(() => {
-    if (!isOnline) {
-      stopPlaying()
-    }
-  }, [
-    isOnline,
-    stopPlaying,
-  ])
-
-  useEffect(() => {
-    if (ready && videoRef && !isPlayingEpisode) {
-      videoRef.current?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'start',
-      })
-    }
-  }, [ready, videoRef, isPlayingEpisode])
-
-  // ведем статистику просмотра матча
-  const { start: startCollectingStats, stop: stopCollectingStats } = useInterval({
-    callback: () => {
-      if (timeForStatistics.current !== 0) {
-        saveMatchStats({
-          matchId: profileId,
-          matchSecond: timeForStatistics.current,
-          sportType,
-        })
-      }
-    },
-    intervalDuration: VIEW_INTERVAL_MS,
-    startImmediate: false,
-  })
-
-  useEffect(() => {
-    if (playing) {
-      startCollectingStats()
-    } else {
-      stopCollectingStats()
-    }
-  }, [
-    playing,
-    startCollectingStats,
-    stopCollectingStats,
-    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[playingOrder] !== index) {
-        ordersObj.current = {
-          ...ordersObj.current,
-          [playingOrder]: index,
-        }
-      }
-
-      return playingOrder + sum(values(ordersObj.current))
-    }
-
-    setCurrentPlayingOrder(getCurrentPlayingOrder())
-  }, [getActiveChapter, isPlayingEpisode, playingOrder, playingProgress])
-
-  useEffect(() => {
-    if (!isPlayingEpisode) {
-      ordersObj.current = {}
-    }
-  }, [isPlayingEpisode])
-
-  return {
-    activeChapterIndex,
-    activePlayer,
-    activeSrc: getChapterUrl(activeChapterIndex),
-    allPlayedProgress: playedProgress + getActiveChapter().startMs,
-    chapters,
-    currentPlayingOrder,
-    duration,
-    isFirstChapterPlaying,
-    isFullscreen,
-    isLastChapterPlaying,
-    loadedProgress,
-    nextSrc: getChapterUrl((activeChapterIndex + 1) % numberOfChapters),
-    numberOfChapters,
-    onEnded,
-    onError: handleError,
-    onFullscreenClick,
-    onLoadedProgress,
-    onPause,
-    onPlayedProgress,
-    onPlayerClick,
-    onProgressChange,
-    onQualitySelect,
-    onReady,
-    playNextChapter,
-    playPrevChapter,
-    playedProgress,
-    playing,
-    ready,
-    rewindBackward,
-    rewindForward,
-    seek,
-    selectedQuality,
-    stopPlayingEpisodes,
-    togglePlaying,
-    video1Ref,
-    video2Ref,
-    videoQualities,
-    wrapperRef,
-    ...useControlsVisibility(isFullscreen, playing),
-    ...useVolume(),
-  }
-}
diff --git a/src/features/MultiSourcePlayer/hooks/usePlayingHandlers.tsx b/src/features/MultiSourcePlayer/hooks/usePlayingHandlers.tsx
deleted file mode 100644
index edcc60cd..00000000
--- a/src/features/MultiSourcePlayer/hooks/usePlayingHandlers.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { useCallback } from 'react'
-
-import isUndefined from 'lodash/isUndefined'
-
-import type { SetPartialState } from 'hooks'
-
-import type { PlayerState } from '.'
-import { getNextPlayer } from '../helpers'
-
-export const usePlayingHandlers = (
-  setPlayerState: SetPartialState<PlayerState>,
-  numberOfChapters: number,
-) => {
-  const onReady = useCallback(() => {
-    setPlayerState((state) => (
-      state.ready
-        ? state
-        : { playing: true, ready: true }
-    ))
-  }, [setPlayerState])
-
-  const togglePlaying = useCallback(() => {
-    setPlayerState((state) => (
-      state.ready
-        ? { playing: !state.playing }
-        : state
-    ))
-  }, [setPlayerState])
-
-  const stopPlaying = useCallback(() => {
-    setPlayerState({ playing: false })
-  }, [setPlayerState])
-
-  const startPlaying = useCallback(() => {
-    setPlayerState((state) => (
-      state.ready
-        ? { playing: true }
-        : state
-    ))
-  }, [setPlayerState])
-
-  const playNextChapter = useCallback((fromMs?: number, startOffsetMs?: number) => {
-    setPlayerState((state) => {
-      if (!state.ready) return state
-
-      const isLastChapter = state.activeChapterIndex + 1 === numberOfChapters
-      if (isLastChapter || isUndefined(fromMs) || isUndefined(startOffsetMs)) {
-        return {
-          activeChapterIndex: isLastChapter ? 0 : state.activeChapterIndex + 1,
-          activePlayer: getNextPlayer(state.activePlayer),
-          loadedProgress: 0,
-          playedProgress: 0,
-          playing: isLastChapter ? false : state.playing,
-        }
-      }
-
-      return {
-        activeChapterIndex: state.activeChapterIndex + 1,
-        loadedProgress: 0,
-        playedProgress: fromMs,
-        playing: state.playing,
-        seek: {
-          ...state.seek,
-          [state.activePlayer]: (startOffsetMs + fromMs) / 1000,
-        },
-      }
-    })
-  }, [numberOfChapters, setPlayerState])
-
-  const playPrevChapter = useCallback((fromMs?: number, startOffsetMs?: number) => {
-    setPlayerState((state) => {
-      if (!state.ready || state.activeChapterIndex === 0) return state
-
-      if (isUndefined(fromMs) || isUndefined(startOffsetMs)) {
-        return {
-          activeChapterIndex: state.activeChapterIndex - 1,
-          loadedProgress: 0,
-          playedProgress: 0,
-        }
-      }
-
-      return {
-        activeChapterIndex: state.activeChapterIndex - 1,
-        loadedProgress: 0,
-        playedProgress: fromMs,
-        seek: {
-          ...state.seek,
-          [state.activePlayer]: (startOffsetMs + fromMs) / 1000,
-        },
-      }
-    })
-  }, [setPlayerState])
-
-  return {
-    onReady,
-    playNextChapter,
-    playPrevChapter,
-    startPlaying,
-    stopPlaying,
-    togglePlaying,
-  }
-}
diff --git a/src/features/MultiSourcePlayer/hooks/useProgressChangeHandler.tsx b/src/features/MultiSourcePlayer/hooks/useProgressChangeHandler.tsx
deleted file mode 100644
index ed1883d3..00000000
--- a/src/features/MultiSourcePlayer/hooks/useProgressChangeHandler.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useCallback } from 'react'
-
-import type { SetPartialState } from 'hooks'
-
-import type { Chapters } from '../types'
-import type { PlayerState } from '.'
-import { findChapterByProgress } from '../helpers'
-
-type Args = {
-  chapters: Chapters,
-  duration: number,
-  setPlayerState: SetPartialState<PlayerState>,
-}
-
-export const useProgressChangeHandler = ({
-  chapters,
-  duration,
-  setPlayerState,
-}: Args) => {
-  const onProgressChange = useCallback((progress: number, seeking: boolean) => {
-    setPlayerState((state) => {
-      // значение новой позиции ползунка в миллисекундах
-      const progressMs = progress * duration
-      const chapterIndex = findChapterByProgress(chapters, progressMs)
-      const chapter = chapters[chapterIndex]
-      const isProgressOnDifferentChapter = (
-        chapterIndex !== -1
-        && chapterIndex !== state.activeChapterIndex
-      )
-      const nextChapter = isProgressOnDifferentChapter
-        ? chapterIndex
-        : state.activeChapterIndex
-
-      // отнимаем начало главы на котором остановились от общего прогресса
-      // чтобы получить прогресс текущей главы
-      const chapterProgressMs = (progressMs - chapter.startMs)
-      const seekMs = chapterProgressMs + chapter.startOffsetMs
-      return {
-        activeChapterIndex: nextChapter,
-        playedProgress: chapterProgressMs,
-        seek: {
-          ...state.seek,
-          [state.activePlayer]: seekMs / 1000,
-        },
-        seeking,
-      }
-    })
-  }, [duration, chapters, setPlayerState])
-
-  return onProgressChange
-}
diff --git a/src/features/MultiSourcePlayer/hooks/useVideoQuality.tsx b/src/features/MultiSourcePlayer/hooks/useVideoQuality.tsx
deleted file mode 100644
index 4c810ab0..00000000
--- a/src/features/MultiSourcePlayer/hooks/useVideoQuality.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import keys from 'lodash/keys'
-import uniq from 'lodash/uniq'
-import orderBy from 'lodash/orderBy'
-import includes from 'lodash/includes'
-
-import { useLocalStore } from 'hooks'
-
-import type { Chapters } from '../types'
-
-const getVideoQualities = (chapters: Chapters) => {
-  const qualities = uniq(keys(chapters[0]?.urls))
-  return orderBy(
-    qualities,
-    Number,
-    'desc',
-  )
-}
-
-export const useVideoQuality = (chapters: Chapters) => {
-  const videoQualities = getVideoQualities(chapters)
-
-  const qualityValidator = (localStorageQuality: string) => (
-    includes(videoQualities, localStorageQuality)
-  )
-
-  const [selectedQuality, setSelectedQuality] = useLocalStore({
-    // по умолчанию наилучшее качество
-    defaultValue: videoQualities[0],
-    key: 'player_quality',
-    validator: qualityValidator,
-  })
-
-  return {
-    selectedQuality,
-    setSelectedQuality,
-    videoQualities,
-  }
-}
diff --git a/src/features/MultiSourcePlayer/index.tsx b/src/features/MultiSourcePlayer/index.tsx
deleted file mode 100644
index 135e4ea1..00000000
--- a/src/features/MultiSourcePlayer/index.tsx
+++ /dev/null
@@ -1,268 +0,0 @@
-import { Fragment } from 'react'
-
-import { Loader } from 'features/Loader'
-import {
-  PlayerWrapper,
-  CenterControls,
-  PlayStop,
-  LoaderWrapper,
-  Backward,
-  Forward,
-  ControlsGradient,
-  TeamsDetailsWrapper,
-  EpisodeInfo,
-  EpisodeInfoName,
-  EpisodeInfoOrder,
-  EpisodeInfoDivider,
-  CloseButton,
-} from 'features/StreamPlayer/styled'
-import { VideoPlayer } from 'features/VideoPlayer'
-import { Controls } from 'features/StreamPlayer/components/Controls'
-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'
-
-import { AccessTimer } from 'components/AccessTimer'
-
-import type { Props } from './hooks'
-import { useMultiSourcePlayer } from './hooks'
-import { Players } from './types'
-import { REWIND_SECONDS } from './config'
-
-export const MultiSourcePlayer = (props: Props) => {
-  const {
-    access,
-    isOpenPopup,
-    profile,
-  } = props
-
-  const {
-    activeChapterIndex,
-    activePlayer,
-    activeSrc,
-    allPlayedProgress,
-    centerControlsVisible,
-    chapters,
-    currentPlayingOrder,
-    duration,
-    hideCenterControls,
-    isFirstChapterPlaying,
-    isFullscreen,
-    isLastChapterPlaying,
-    loadedProgress,
-    mainControlsVisible,
-    muted,
-    nextSrc,
-    numberOfChapters,
-    onEnded,
-    onError,
-    onFullscreenClick,
-    onLoadedProgress,
-    onMouseEnter,
-    onMouseLeave,
-    onMouseMove,
-    onPause,
-    onPlayedProgress,
-    onPlayerClick,
-    onProgressChange,
-    onQualitySelect,
-    onReady,
-    onTouchEnd,
-    onTouchStart,
-    onVolumeChange,
-    onVolumeClick,
-    playedProgress,
-    playing,
-    playNextChapter,
-    playPrevChapter,
-    ready,
-    rewindBackward,
-    rewindForward,
-    seek,
-    selectedQuality,
-    showCenterControls,
-    stopPlayingEpisodes,
-    togglePlaying,
-    video1Ref,
-    video2Ref,
-    videoQualities,
-    volume,
-    volumeInPercent,
-    wrapperRef,
-  } = useMultiSourcePlayer(props)
-  const { episodeInfo, isPlayingEpisode } = useMatchPageStore()
-
-  const firstPlayerActive = activePlayer === Players.PLAYER1
-  const currentVideo = firstPlayerActive ? video1Ref : video2Ref
-  const { user } = useAuthStore()
-
-  return (
-    <PlayerWrapper
-      ref={wrapperRef}
-      playing={playing}
-      onClick={isMobileDevice ? showCenterControls : onPlayerClick}
-      onMouseMove={onMouseMove}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      onTouchStart={onTouchStart}
-      onTouchEnd={onTouchEnd}
-    >
-      {isPlayingEpisode && (
-        <EpisodeInfo>
-          <EpisodeInfoName>
-            {isMobileDevice
-              ? (
-                <Fragment>
-                  {episodeInfo.playerOrTeamName}
-                  {episodeInfo.playerOrTeamName && <br />}
-                  {episodeInfo.paramName}
-                </Fragment>
-              )
-              : `${episodeInfo.playerOrTeamName || ''}${episodeInfo.paramName && episodeInfo.playerOrTeamName ? ' - ' : ''}${episodeInfo.paramName || ''}`}
-          </EpisodeInfoName>
-          {currentPlayingOrder > 0 && (
-            <EpisodeInfoOrder>
-              {currentPlayingOrder}
-              <EpisodeInfoDivider>/</EpisodeInfoDivider>
-              {episodeInfo.episodesCount}
-            </EpisodeInfoOrder>
-          )}
-          <CloseButton onClick={stopPlayingEpisodes} />
-        </EpisodeInfo>
-      )}
-      {
-        !ready && (
-          <LoaderWrapper buffering>
-            <Loader color='#515151' />
-          </LoaderWrapper>
-        )
-      }
-      {isOpenPopup && <FiltersPopup />}
-      <VideoPlayer
-        src={firstPlayerActive ? activeSrc : nextSrc}
-        playing={firstPlayerActive ? playing : false}
-        hidden={!firstPlayerActive}
-        muted={muted}
-        volume={volume}
-        ref={video1Ref}
-        seek={seek[Players.PLAYER1]}
-        isFullscreen={isFullscreen}
-        onLoadedProgress={firstPlayerActive ? onLoadedProgress : undefined}
-        onPlayedProgress={firstPlayerActive ? onPlayedProgress : undefined}
-        onEnded={onEnded}
-        onPause={firstPlayerActive ? onPause : undefined}
-        onError={onError}
-        onReady={onReady}
-      />
-      <VideoPlayer
-        src={!firstPlayerActive ? activeSrc : nextSrc}
-        playing={!firstPlayerActive ? playing : false}
-        hidden={firstPlayerActive}
-        muted={muted}
-        volume={volume}
-        ref={video2Ref}
-        seek={seek[Players.PLAYER2]}
-        isFullscreen={isFullscreen}
-        onLoadedProgress={!firstPlayerActive ? onLoadedProgress : undefined}
-        onPlayedProgress={!firstPlayerActive ? onPlayedProgress : undefined}
-        onEnded={onEnded}
-        onPause={!firstPlayerActive ? onPause : undefined}
-        onError={onError}
-        onReady={onReady}
-      />
-
-      {isMobileDevice && isFullscreen && mainControlsVisible && profile && (
-        <TeamsDetailsWrapper>
-          <Name nameObj={profile.team1} />
-          {` ${profile.team1.score}-${profile.team2.score} `}
-          <Name nameObj={profile.team2} />
-        </TeamsDetailsWrapper>
-      )}
-
-      {ready && (
-        <CenterControls
-          controlsVisible={centerControlsVisible}
-          playing={!currentVideo.current?.paused}
-        >
-          {isMobileDevice && playing ? (
-            <RewindMobile isBackward rewindCallback={rewindBackward} />
-          ) : (
-            <Backward
-              size={isMobileDevice ? 'sm' : 'lg'}
-              onClick={rewindBackward}
-            >
-              {REWIND_SECONDS}
-            </Backward>
-          )}
-          <PlayStop
-            size='lg'
-            marginRight={0}
-            playing={playing}
-            onClickCapture={() => {
-              togglePlaying()
-              hideCenterControls()
-            }}
-          />
-          {isMobileDevice && playing
-            ? <RewindMobile isForward rewindCallback={rewindForward} />
-            : (
-              <Forward
-                size={isMobileDevice ? 'sm' : 'lg'}
-                onClick={rewindForward}
-              >
-                {REWIND_SECONDS}
-              </Forward>
-            )}
-        </CenterControls>
-      )}
-      <Controls
-        activeChapterIndex={activeChapterIndex}
-        activePlayer={activePlayer}
-        allPlayedProgress={allPlayedProgress}
-        multiSourceChapters={chapters}
-        controlsVisible={mainControlsVisible}
-        duration={duration}
-        isFirstChapterPlaying={isFirstChapterPlaying}
-        isFullscreen={isFullscreen}
-        isLastChapterPlaying={isLastChapterPlaying}
-        loadedProgress={loadedProgress}
-        muted={muted}
-        numberOfChapters={numberOfChapters}
-        onFullscreenClick={onFullscreenClick}
-        onProgressChange={onProgressChange}
-        onQualitySelect={onQualitySelect}
-        onTouchEnd={onTouchEnd}
-        onTouchStart={onTouchStart}
-        onVolumeChange={onVolumeChange}
-        onVolumeClick={onVolumeClick}
-        playNextChapter={playNextChapter}
-        playPrevChapter={playPrevChapter}
-        playedProgress={playedProgress}
-        playing={playing}
-        rewindBackward={rewindBackward}
-        rewindForward={rewindForward}
-        selectedQuality={selectedQuality}
-        src={firstPlayerActive ? activeSrc : nextSrc}
-        togglePlaying={togglePlaying}
-        videoQualities={videoQualities}
-        videoRef={currentVideo}
-        volume={volume}
-        volumeInPercent={volumeInPercent}
-      />
-      <ControlsGradient isVisible={mainControlsVisible} />
-      {!user && (
-        <AccessTimer
-          access={access}
-          isFullscreen={isFullscreen}
-          onFullscreenClick={onFullscreenClick}
-          playing={ready && playing && !!playedProgress}
-          videoRef={currentVideo}
-        />
-      )}
-    </PlayerWrapper>
-  )
-}
diff --git a/src/features/MultiSourcePlayer/styled.tsx b/src/features/MultiSourcePlayer/styled.tsx
deleted file mode 100644
index 44cd0de2..00000000
--- a/src/features/MultiSourcePlayer/styled.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import styled, { css } from 'styled-components/macro'
-
-import { isMobileDevice } from 'config/userAgent'
-import { ButtonBase } from 'features/StreamPlayer/styled'
-
-export const ChaptersText = styled.span`
-  margin: 0 14px;
-  font-weight: 500;
-  font-size: 16px;
-  color: #fff;
-  text-align: center;
-
-  ${isMobileDevice
-    ? css`
-      margin: 0 5px;
-      font-size: 12px;
-      width: 25%;
-    `
-    : ''};
-`
-
-type PrevProps = {
-  disabled?: boolean,
-}
-
-export const Prev = styled(ButtonBase)<PrevProps>`
-  width: 29px;
-  height: 28px;
-  background-image: url(/images/player-prev.svg);
-
-  ${({ disabled }) => (
-    disabled
-      ? 'opacity: 0.5;'
-      : ''
-  )}
-
-  ${isMobileDevice
-    ? css`
-      width: 20px;
-      height: 20px;
-    `
-    : ''};
-`
-
-export const Next = styled(Prev)`
-  margin-right: 10px;
-  transform: rotate(180deg);
-`
diff --git a/src/features/MultiSourcePlayer/types.tsx b/src/features/MultiSourcePlayer/types.tsx
deleted file mode 100644
index 0459df11..00000000
--- a/src/features/MultiSourcePlayer/types.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-export type Urls = { [quality: string]: string }
-
-export type Chapter = {
-  count?: number,
-  duration: number,
-  endMs: number,
-  endOffsetMs: number,
-  isFullMatchChapter?: boolean,
-  period: number,
-  startMs: number,
-  startOffsetMs: number,
-  urls: Urls,
-}
-
-export type Chapters = Array<Chapter>
-
-export enum Players {
-  PLAYER1 = 0,
-  PLAYER2 = 1,
-}
diff --git a/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/index.tsx b/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/index.tsx
index 7b538b68..45982564 100644
--- a/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/index.tsx
+++ b/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/index.tsx
@@ -1,5 +1,5 @@
 import { T9n } from 'features/T9n'
-import { Settings } from 'features/MultiSourcePlayer/components/Settings'
+import { Settings } from 'features/StreamPlayer/components/Settings'
 import { AirPlay } from 'features/AirPlay'
 import { ChromeCast } from 'features/ChromeCast'
 import { AudioTracks } from 'features/AudioTracks'
diff --git a/src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx b/src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx
index 37ae443e..7b4ad837 100644
--- a/src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx
+++ b/src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx
@@ -1,12 +1,12 @@
 import { Fragment } from 'react'
 
-import { REWIND_SECONDS } from 'features/MultiSourcePlayer/config'
+import { REWIND_SECONDS } from 'features/StreamPlayer/config'
 import {
   ChaptersText,
   Next,
   Prev,
-} from 'features/MultiSourcePlayer/styled'
-import { Settings } from 'features/MultiSourcePlayer/components/Settings'
+} from 'features/StreamPlayer/styled'
+import { Settings } from 'features/StreamPlayer/components/Settings'
 import { T9n } from 'features/T9n'
 import { ChromeCast } from 'features/ChromeCast'
 import { AudioTracks } from 'features/AudioTracks'
diff --git a/src/features/StreamPlayer/components/Controls/index.tsx b/src/features/StreamPlayer/components/Controls/index.tsx
index b2801a02..0e52bbf2 100644
--- a/src/features/StreamPlayer/components/Controls/index.tsx
+++ b/src/features/StreamPlayer/components/Controls/index.tsx
@@ -8,8 +8,6 @@ import { isMobileDevice } from 'config/userAgent'
 
 import { secondsToHms } from 'helpers/secondsToHms'
 
-import { ProgressBar as ProgressBarMultiSource } from 'features/MultiSourcePlayer/components/ProgressBar'
-import { Chapters as MultiSourceChapters } from 'features/MultiSourcePlayer/types'
 import { Chapters as LiveChapters } from 'features/StreamPlayer/types'
 
 import { ControlsMobile } from './Components/ControlsMobile'
@@ -33,7 +31,6 @@ export type ControlsProps = {
   isStorage?: boolean,
   liveChapters?: LiveChapters,
   loadedProgress: number,
-  multiSourceChapters?: MultiSourceChapters,
   muted: boolean,
   numberOfChapters?: number,
   onFullscreenClick: () => void,
@@ -74,10 +71,7 @@ export const Controls = ({ ...props }: ControlsProps) => {
     isStorage,
     liveChapters,
     loadedProgress,
-    multiSourceChapters,
     onProgressChange,
-    onTouchEnd,
-    onTouchStart,
     playedProgress,
   } = props
 
@@ -94,48 +88,25 @@ export const Controls = ({ ...props }: ControlsProps) => {
     isLive,
     isStorage,
   ])
-  const progressBarElement = useMemo(() => {
-    if (isLive || isStorage) {
-      return (
-        <ProgressBar
-          duration={duration}
-          isScrubberVisible={controlsVisible}
-          onPlayedProgressChange={onProgressChange}
-          playedProgress={playedProgress}
-          loadedProgress={loadedProgress}
-          activeChapterIndex={activeChapterIndex}
-          allPlayedProgress={allPlayedProgress}
-          chapters={liveChapters!}
-        />
-      )
-    }
-    return (
-      <ProgressBarMultiSource
-        activeChapterIndex={activeChapterIndex}
-        allPlayedProgress={allPlayedProgress}
-        chapters={multiSourceChapters}
-        duration={duration}
-        isScrubberVisible={controlsVisible}
-        onTouchEnd={onTouchEnd}
-        onTouchStart={onTouchStart}
-        onPlayedProgressChange={onProgressChange!}
-        playedProgress={playedProgress}
-        loadedProgress={loadedProgress}
-      />
-    )
-  }, [
+  const progressBarElement = useMemo(() => (
+    <ProgressBar
+      duration={duration}
+      isScrubberVisible={controlsVisible}
+      onPlayedProgressChange={onProgressChange}
+      playedProgress={playedProgress}
+      loadedProgress={loadedProgress}
+      activeChapterIndex={activeChapterIndex}
+      allPlayedProgress={allPlayedProgress}
+      chapters={liveChapters!}
+    />
+  ), [
     activeChapterIndex,
     allPlayedProgress,
     liveChapters,
-    multiSourceChapters,
     controlsVisible,
     duration,
-    isLive,
-    isStorage,
     loadedProgress,
     onProgressChange,
-    onTouchEnd,
-    onTouchStart,
     playedProgress,
   ])
 
diff --git a/src/features/StreamPlayer/components/Settings/index.tsx b/src/features/StreamPlayer/components/Settings/index.tsx
index d0e62e75..48b879bd 100644
--- a/src/features/StreamPlayer/components/Settings/index.tsx
+++ b/src/features/StreamPlayer/components/Settings/index.tsx
@@ -22,7 +22,7 @@ export const Settings = (props: Props) => {
   } = useSettings(props)
   return (
     <Fragment>
-      <SettingsButton onClick={open} />
+      <SettingsButton onClick={open} id='match_video_quality' />
       {
         isOpen && (
           <OutsideClick onClick={close}>
diff --git a/src/features/StreamPlayer/components/Settings/styled.tsx b/src/features/StreamPlayer/components/Settings/styled.tsx
index 1df22dad..86a0f378 100644
--- a/src/features/StreamPlayer/components/Settings/styled.tsx
+++ b/src/features/StreamPlayer/components/Settings/styled.tsx
@@ -5,14 +5,14 @@ import { ButtonBase } from 'features/StreamPlayer/styled'
 export const SettingsButton = styled(ButtonBase)`
   width: 22px;
   height: 20px;
-  margin-left: 25px;
+  margin-right: 25px;
   background-image: url(/images/settings.svg);
 
   ${isMobileDevice
     ? css`
       width: 20px;
       height: 18px;
-      margin-left: 10px;
+      margin-right: 15px;
       cursor: pointer;
     `
     : ''};
diff --git a/src/features/StreamPlayer/components/YoutubePlayer/index.tsx b/src/features/StreamPlayer/components/YoutubePlayer/index.tsx
deleted file mode 100644
index 99815ad5..00000000
--- a/src/features/StreamPlayer/components/YoutubePlayer/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import YouTube from 'react-youtube'
-
-import { useMatchPageStore } from 'features/MatchPage/store'
-import { FiltersPopup } from 'features/MatchSidePlaylists/components/FiltersPopup'
-
-import { PlayerWrapper } from '../../styled'
-import { useVideoPlayer, Props } from '../../hooks'
-
-export const YoutubePlayer = (props: Props) => {
-  const { isOpenFiltersPopup, profile } = useMatchPageStore()
-
-  const {
-    onMouseMove,
-    onPlayerClick,
-    onTouchEnd,
-    onTouchStart,
-    playing,
-    sizeOptions: {
-      height,
-      width,
-    },
-    wrapperRef,
-  } = useVideoPlayer(props)
-
-  const youtube_link = profile?.youtube_link || ''
-  const key = youtube_link.slice(32, youtube_link.length)
-
-  return (
-    <PlayerWrapper
-      ref={wrapperRef}
-      playing={playing}
-      onClick={onPlayerClick}
-      onMouseMove={onMouseMove}
-      onTouchStart={onTouchStart}
-      onTouchEnd={onTouchEnd}
-    >
-      {isOpenFiltersPopup && <FiltersPopup />}
-      <YouTube
-        videoId={key}
-        opts={{
-          height: String(height),
-          playerVars: {
-            autoplay: 1,
-            modestbranding: 1,
-          },
-          width: String(width),
-        }}
-      />
-    </PlayerWrapper>
-  )
-}
diff --git a/src/features/StreamPlayer/hooks/index.tsx b/src/features/StreamPlayer/hooks/index.tsx
index 63b3eddf..da9752e2 100644
--- a/src/features/StreamPlayer/hooks/index.tsx
+++ b/src/features/StreamPlayer/hooks/index.tsx
@@ -27,6 +27,7 @@ import {
   useEventListener,
   usePageParams,
   useInterval,
+  useDuration,
 } from 'hooks'
 
 import type { Chapters } from 'features/StreamPlayer/types'
@@ -45,7 +46,6 @@ import { useVideoQuality } from './useVideoQuality'
 import { useControlsVisibility } from './useControlsVisibility'
 import { useProgressChangeHandler } from './useProgressChangeHandler'
 import { usePlayingHandlers } from './usePlayingHandlers'
-import { useDuration } from './useDuration'
 import { useAudioTrack } from './useAudioTrack'
 import { FULL_GAME_KEY } from '../../MatchPage/helpers/buildPlaylists'
 
diff --git a/src/features/StreamPlayer/styled.tsx b/src/features/StreamPlayer/styled.tsx
index 7e8a36f6..2a183d2c 100644
--- a/src/features/StreamPlayer/styled.tsx
+++ b/src/features/StreamPlayer/styled.tsx
@@ -367,13 +367,12 @@ export const ChaptersText = styled.span`
   font-size: 16px;
   color: #fff;
   text-align: center;
-  white-space: nowrap;
 
   ${isMobileDevice
     ? css`
       margin: 0 5px;
       font-size: 12px;
-      width: 15%;
+      width: 25%;
     `
     : ''};
 `
@@ -386,16 +385,18 @@ export const Prev = styled(ButtonBase)<PrevProps>`
   width: 29px;
   height: 28px;
   background-image: url(/images/player-prev.svg);
+
   ${({ disabled }) => (
     disabled
       ? 'opacity: 0.5;'
       : ''
   )}
+
   ${isMobileDevice
     ? css`
-        width: 20px;
-        height: 20px;
-      `
+      width: 20px;
+      height: 20px;
+    `
     : ''};
 `
 
diff --git a/src/hooks/index.tsx b/src/hooks/index.tsx
index ab04bf68..ab8a1aa5 100644
--- a/src/hooks/index.tsx
+++ b/src/hooks/index.tsx
@@ -8,3 +8,4 @@ export * from './usePageParams'
 export * from './useTooltip'
 export * from './useModalRoot'
 export * from './usePageLogger'
+export * from './useDuration'
diff --git a/src/features/MultiSourcePlayer/hooks/useDuration.tsx b/src/hooks/useDuration.tsx
similarity index 75%
rename from src/features/MultiSourcePlayer/hooks/useDuration.tsx
rename to src/hooks/useDuration.tsx
index ae416a0e..12d3b855 100644
--- a/src/features/MultiSourcePlayer/hooks/useDuration.tsx
+++ b/src/hooks/useDuration.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 
 import sumBy from 'lodash/sumBy'
 
-import type { Chapters } from '../types'
+import type { Chapters } from 'features/StreamPlayer/types'
 
 export const useDuration = (chapters: Chapters) => (
   useMemo(() => sumBy(chapters, 'duration'), [chapters])
-- 
2.30.2


From 3d1d9e05cd07896f09606ca7910536beab683c7c Mon Sep 17 00:00:00 2001
From: Ruslan Khayrullin <ruslfm08@gmail.com>
Date: Tue, 16 May 2023 16:22:34 +0500
Subject: [PATCH 3/4] fix(in-601): reload page after changing filters

---
 src/features/MatchPage/store/hooks/index.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/features/MatchPage/store/hooks/index.tsx b/src/features/MatchPage/store/hooks/index.tsx
index a46421f9..832a480e 100644
--- a/src/features/MatchPage/store/hooks/index.tsx
+++ b/src/features/MatchPage/store/hooks/index.tsx
@@ -359,18 +359,22 @@ export const useMatchPage = () => {
     const isLastEpisode = playingOrder === episodesToPlay.length
 
     const currentOrder = order === 0 ? order : playingOrder
-    if (isLastEpisode) {
+
+    if (isLastEpisode || !episodesToPlay[currentOrder]) {
       setIsPlayingFiltersEpisodes(false)
       setPlaingOrder(0)
 
       return
     }
+
     handlePlaylistClick({
       playlist: episodesToPlay[currentOrder],
       tab: Tabs.EVENTS,
     })
+
     setPlaingOrder(currentOrder + 1)
   }
+
   const playEpisodes = () => {
     setPlayingData(initPlayingData)
     setStatsWatchAllEpisodesTimer(true)
-- 
2.30.2


From e202aa1d3043f0208bdc80c4636a0e5ccd80d745 Mon Sep 17 00:00:00 2001
From: Ruslan Khayrullin <ruslfm08@gmail.com>
Date: Thu, 18 May 2023 19:53:18 +0500
Subject: [PATCH 4/4] feat(in-603): send requests only for open tabs

---
 src/features/MatchPage/store/hooks/index.tsx  |   8 +-
 .../MatchPage/store/hooks/useMatchData.tsx    |  18 ++-
 .../MatchPage/store/hooks/usePlayersStats.tsx |  54 ++++---
 .../MatchPage/store/hooks/useTeamsStats.tsx   |  18 ++-
 .../components/TabStats/hooks.tsx             |  43 +-----
 .../components/TabStats/index.tsx             | 141 ++++++++----------
 src/features/MatchSidePlaylists/hooks.tsx     |  76 ++--------
 src/features/MatchSidePlaylists/index.tsx     | 118 +++++++--------
 src/features/MatchSidePlaylists/styled.tsx    |  20 +--
 src/hooks/useInterval.tsx                     |   4 +-
 src/requests/getMatchParticipants.tsx         |   2 +-
 src/requests/getMatchScore.tsx                |   4 +-
 12 files changed, 210 insertions(+), 296 deletions(-)

diff --git a/src/features/MatchPage/store/hooks/index.tsx b/src/features/MatchPage/store/hooks/index.tsx
index 832a480e..1d7ee57a 100644
--- a/src/features/MatchPage/store/hooks/index.tsx
+++ b/src/features/MatchPage/store/hooks/index.tsx
@@ -111,7 +111,7 @@ export const useMatchPage = () => {
     matchPlaylists,
     selectedPlaylist,
     setFullMatchPlaylistDuration,
-  } = useMatchData({ matchProfile })
+  } = useMatchData({ matchProfile, selectedTab })
 
   const profile = matchProfile
 
@@ -297,6 +297,8 @@ export const useMatchPage = () => {
     matchProfile,
     playingProgress,
     selectedPlaylist,
+    selectedStatsTable,
+    selectedTab,
     setIsTeamsStatsFetching,
     statsType,
   })
@@ -304,13 +306,14 @@ export const useMatchPage = () => {
   const {
     beforeCloseTourCallback: beforeCloseTourCallbackPlayers,
     getParams,
-    isEmptyPlayersStats,
     playersData,
     playersStats,
   } = usePlayersStats({
     matchProfile,
     playingProgress,
     selectedPlaylist,
+    selectedStatsTable,
+    selectedTab,
     setIsPlayersStatsFetching,
     statsType,
   })
@@ -413,7 +416,6 @@ export const useMatchPage = () => {
     isAllActionsChecked,
     isClickable,
     isEmptyFilters,
-    isEmptyPlayersStats,
     isExpanded,
     isFirstTeamPlayersChecked,
     isLiveMatch,
diff --git a/src/features/MatchPage/store/hooks/useMatchData.tsx b/src/features/MatchPage/store/hooks/useMatchData.tsx
index 4e12e383..5d6d9302 100644
--- a/src/features/MatchPage/store/hooks/useMatchData.tsx
+++ b/src/features/MatchPage/store/hooks/useMatchData.tsx
@@ -4,6 +4,8 @@ import {
   useCallback,
 } from 'react'
 
+import isEmpty from 'lodash/isEmpty'
+
 import type { MatchInfo } from 'requests/getMatchInfo'
 
 import {
@@ -14,6 +16,7 @@ import {
 
 import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
 import { useMatchPopupStore } from 'features/MatchPopup'
+import { Tabs } from 'features/MatchSidePlaylists/config'
 
 import { useMatchPlaylists } from './useMatchPlaylists'
 import { useEvents } from './useEvents'
@@ -23,9 +26,10 @@ const MATCH_DATA_POLL_INTERVAL = 5000
 
 type UseMatchDataArgs = {
   matchProfile: MatchInfo,
+  selectedTab: Tabs,
 }
 
-export const useMatchData = ({ matchProfile: profile }: UseMatchDataArgs) => {
+export const useMatchData = ({ matchProfile: profile, selectedTab }: UseMatchDataArgs) => {
   const { profileId: matchId, sportType } = usePageParams()
   const { chapters } = useMatchPopupStore()
   const [matchDuration, setMatchDuration] = useState(0)
@@ -42,41 +46,43 @@ export const useMatchData = ({ matchProfile: profile }: UseMatchDataArgs) => {
 
   const chaptersDuration = useDuration(chapters) / 1000
   const fullMatchDuration = matchDuration
+
   useEffect(() => {
     if (!profile || profile.live) return
 
-    fetchMatchPlaylists({
+    isEmpty(matchPlaylists.match) && selectedTab === Tabs.WATCH && fetchMatchPlaylists({
       fullMatchDuration,
       id: matchId,
       sportType,
     })
-    fetchMatchEvents()
+    isEmpty(events) && selectedTab === Tabs.EVENTS && fetchMatchEvents()
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     profile?.live,
     fullMatchDuration,
     matchId,
     sportType,
+    selectedTab,
   ])
 
   const intervalCallback = useCallback(() => {
-    fetchMatchPlaylists({
+    (selectedTab === Tabs.WATCH || selectedTab === Tabs.PLAYERS) && fetchMatchPlaylists({
       fullMatchDuration,
       id: matchId,
       sportType,
     })
-    fetchMatchEvents()
+    selectedTab === Tabs.EVENTS && fetchMatchEvents()
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     fullMatchDuration,
     matchId,
     sportType,
+    selectedTab,
   ])
 
   const { start, stop } = useInterval({
     callback: intervalCallback,
     intervalDuration: MATCH_DATA_POLL_INTERVAL,
-    startImmediate: false,
   })
 
   useEffect(() => {
diff --git a/src/features/MatchPage/store/hooks/usePlayersStats.tsx b/src/features/MatchPage/store/hooks/usePlayersStats.tsx
index c0c75771..f46f1c69 100644
--- a/src/features/MatchPage/store/hooks/usePlayersStats.tsx
+++ b/src/features/MatchPage/store/hooks/usePlayersStats.tsx
@@ -9,7 +9,7 @@ import { useQueryClient } from 'react-query'
 
 import throttle from 'lodash/throttle'
 import isEmpty from 'lodash/isEmpty'
-import every from 'lodash/every'
+import includes from 'lodash/includes'
 import find from 'lodash/find'
 import isUndefined from 'lodash/isUndefined'
 import flatMapDepth from 'lodash/flatMapDepth'
@@ -19,7 +19,11 @@ import size from 'lodash/size'
 
 import { querieKeys } from 'config'
 
-import type { MatchScore, PlayerParam } from 'requests'
+import type {
+  DataItem,
+  MatchScore,
+  PlayerParam,
+} from 'requests'
 import {
   MatchInfo,
   PlayersStats,
@@ -33,21 +37,24 @@ import { getLocalStorageItem } from 'helpers/getLocalStorage'
 import { useObjectState, usePageParams } from 'hooks'
 
 import type{ PlaylistOption } from 'features/MatchPage/types'
-import { StatsType } from 'features/MatchSidePlaylists/components/TabStats/config'
+import { StatsType, Tabs as StatsTabs } from 'features/MatchSidePlaylists/components/TabStats/config'
 import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
 import { getHalfTime } from 'features/MatchPage/helpers/getHalfTime'
 import { TOUR_COMPLETED_STORAGE_KEY } from 'features/MatchTour'
+import { Tabs } from 'features/MatchSidePlaylists/config'
 
 import { DISPLAYED_PARAMS_COLUMNS } from 'features/MatchSidePlaylists/components/PlayersTable/config'
 import { useFakeData } from './useFakeData'
 
-const REQUEST_DELAY = 3000
+const REQUEST_DELAY = 5000
 const STATS_POLL_INTERVAL = 30000
 
 type UsePlayersStatsArgs = {
   matchProfile: MatchInfo,
   playingProgress: number,
   selectedPlaylist?: PlaylistOption,
+  selectedStatsTable: StatsTabs,
+  selectedTab: Tabs,
   setIsPlayersStatsFetching: Dispatch<SetStateAction<boolean>>,
   statsType: StatsType,
 }
@@ -61,6 +68,8 @@ export const usePlayersStats = ({
   matchProfile,
   playingProgress,
   selectedPlaylist,
+  selectedStatsTable,
+  selectedTab,
   setIsPlayersStatsFetching,
   statsType,
 }: UsePlayersStatsArgs) => {
@@ -81,12 +90,6 @@ export const usePlayersStats = ({
 
   const isCurrentStats = statsType === StatsType.CURRENT_STATS
 
-  const isEmptyPlayersStats = (teamId: number) => (
-    isEmpty(playersStats[teamId])
-      || every(playersStats[teamId], isEmpty)
-      || isEmpty(playersData[matchProfile?.team1.id === teamId ? 'team1' : 'team2'])
-  )
-
   const getParams = useCallback((stats: PlayersStats) => (
     uniqBy(flatMapDepth(stats, values), 'id') as Array<PlayerParam>
   ), [])
@@ -141,16 +144,25 @@ export const usePlayersStats = ({
   ])
 
   const fetchData = useMemo(() => throttle(async (second?: number) => {
+    const isTeam1Selected = selectedStatsTable === StatsTabs.TEAM1
+
     if (
       selectedPlaylist?.id !== FULL_GAME_KEY
-       || (matchProfile?.live && Number(matchProfile.c_match_calc_status) <= 1)
+       || selectedTab !== Tabs.STATS
+       || !includes([StatsTabs.TEAM1, StatsTabs.TEAM2], selectedStatsTable)
+       || !matchProfile?.team1.id
+       || !matchProfile?.team2.id
+       || (!matchProfile?.live && !isCurrentStats && !isEmpty(playersStats[isTeam1Selected
+         ? matchProfile.team1.id
+         : matchProfile.team2.id]))
     ) return
 
-    const [res1, res2, res3] = await Promise.all([
+    const [res1, res2] = await Promise.all([
       fetchPlayers(second),
-      fetchPlayersStats('team1', second),
-      fetchPlayersStats('team2', second),
-    ])
+      isTeam1Selected
+        ? fetchPlayersStats('team1', second)
+        : fetchPlayersStats('team2', second),
+    ]) as [Array<DataItem> | null, PlayersStats | null]
 
     const team1Players = find(res1, { team_id: matchProfile?.team1.id })?.players || []
     const team2Players = find(res1, { team_id: matchProfile?.team2.id })?.players || []
@@ -168,19 +180,20 @@ export const usePlayersStats = ({
     })
 
     setPlayersStats({
-      ...(matchProfile?.team1.id && res2 && {
+      ...(isTeam1Selected && res2 && {
         [matchProfile.team1.id]: needUseFakeData
           ? fakeData.playersStats as unknown as PlayersStats
           : res2,
       }),
-      ...(matchProfile?.team2.id && res3 && {
+      ...(!isTeam1Selected && res2 && {
         [matchProfile.team2.id]: needUseFakeData
           ? fakeData.playersStats as unknown as PlayersStats
-          : res3,
+          : res2,
       }),
     })
 
     setIsPlayersStatsFetching(false)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, REQUEST_DELAY), [
     selectedPlaylist?.id,
     fetchPlayers,
@@ -189,10 +202,12 @@ export const usePlayersStats = ({
     matchProfile?.team1.id,
     matchProfile?.team2.id,
     matchProfile?.live,
-    matchProfile?.c_match_calc_status,
     setIsPlayersStatsFetching,
     getParams,
     fakeData,
+    selectedTab,
+    selectedStatsTable,
+    isCurrentStats,
   ])
 
   const beforeCloseTourCallback = () => {
@@ -233,7 +248,6 @@ export const usePlayersStats = ({
   return {
     beforeCloseTourCallback,
     getParams,
-    isEmptyPlayersStats,
     playersData,
     playersStats,
   }
diff --git a/src/features/MatchPage/store/hooks/useTeamsStats.tsx b/src/features/MatchPage/store/hooks/useTeamsStats.tsx
index 8017b99d..b2c0c862 100644
--- a/src/features/MatchPage/store/hooks/useTeamsStats.tsx
+++ b/src/features/MatchPage/store/hooks/useTeamsStats.tsx
@@ -26,20 +26,23 @@ import { usePageParams } from 'hooks'
 import { getLocalStorageItem } from 'helpers/getLocalStorage'
 
 import type { PlaylistOption } from 'features/MatchPage/types'
-import { StatsType } from 'features/MatchSidePlaylists/components/TabStats/config'
+import { StatsType, Tabs as StatsTab } from 'features/MatchSidePlaylists/components/TabStats/config'
 import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
 import { getHalfTime } from 'features/MatchPage/helpers/getHalfTime'
 import { TOUR_COMPLETED_STORAGE_KEY } from 'features/MatchTour'
+import { Tabs } from 'features/MatchSidePlaylists/config'
 
 import { useFakeData } from './useFakeData'
 
-const REQUEST_DELAY = 3000
+const REQUEST_DELAY = 5000
 const STATS_POLL_INTERVAL = 30000
 
 type UseTeamsStatsArgs = {
   matchProfile: MatchInfo,
   playingProgress: number,
   selectedPlaylist?: PlaylistOption,
+  selectedStatsTable: StatsTab,
+  selectedTab: Tabs,
   setIsTeamsStatsFetching: Dispatch<SetStateAction<boolean>>,
   statsType: StatsType,
 }
@@ -52,6 +55,8 @@ export const useTeamsStats = ({
   matchProfile,
   playingProgress,
   selectedPlaylist,
+  selectedStatsTable,
+  selectedTab,
   setIsTeamsStatsFetching,
   statsType,
 }: UseTeamsStatsArgs) => {
@@ -98,7 +103,9 @@ export const useTeamsStats = ({
       !sportName
       || selectedPlaylist?.id !== FULL_GAME_KEY
       || !videoBounds
-      || (matchProfile?.live && Number(matchProfile.c_match_calc_status) <= 1)
+      || selectedTab !== Tabs.STATS
+      || selectedStatsTable !== StatsTab.TEAMS
+      || (!matchProfile?.live && !isCurrentStats && !isEmpty(teamsStats))
     ) return
 
     try {
@@ -117,9 +124,9 @@ export const useTeamsStats = ({
 
     // eslint-disable-next-line no-empty
     } catch (e) {}
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, REQUEST_DELAY), [
     matchProfile?.video_bounds,
-    matchProfile?.c_match_calc_status,
     matchProfile?.live,
     matchScore?.video_bounds,
     selectedPlaylist?.id,
@@ -128,6 +135,9 @@ export const useTeamsStats = ({
     sportName,
     fakeData,
     getFirstClickableParam,
+    selectedTab,
+    selectedStatsTable,
+    isCurrentStats,
   ])
 
   const beforeCloseTourCallback = () => {
diff --git a/src/features/MatchSidePlaylists/components/TabStats/hooks.tsx b/src/features/MatchSidePlaylists/components/TabStats/hooks.tsx
index 79f8c957..0ad509df 100644
--- a/src/features/MatchSidePlaylists/components/TabStats/hooks.tsx
+++ b/src/features/MatchSidePlaylists/components/TabStats/hooks.tsx
@@ -1,21 +1,14 @@
-import { useEffect } from 'react'
-
-import isEmpty from 'lodash/isEmpty'
-
 import { useTooltip } from 'hooks'
 
 import { useMatchPageStore } from 'features/MatchPage/store'
 
-import { StatsType, Tabs } from './config'
+import { StatsType } from './config'
 
 export const useTabStats = () => {
   const {
-    isEmptyPlayersStats,
-    profile: matchProfile,
     selectedStatsTable: selectedTab,
     setSelectedStatsTable: setSelectedTab,
     statsType,
-    teamsStats,
     toggleStatsType,
   } = useMatchPageStore()
 
@@ -32,43 +25,9 @@ export const useTabStats = () => {
   const switchTitleLexic = isFinalStatsType ? 'final_stats' : 'current_stats'
   const switchButtonTooltipLexic = isFinalStatsType ? 'display_all_stats' : 'display_stats_according_to_video'
 
-  const isVisibleTeamsTab = !isEmpty(teamsStats)
-  const isVisibleTeam1PlayersTab = Boolean(
-    matchProfile && !isEmptyPlayersStats(matchProfile.team1.id),
-  )
-  const isVisibleTeam2PlayersTab = Boolean(
-    matchProfile && !isEmptyPlayersStats(matchProfile.team2.id),
-  )
-
-  useEffect(() => {
-    switch (true) {
-      case isVisibleTeamsTab:
-        setSelectedTab(Tabs.TEAMS)
-        break
-
-      case isVisibleTeam1PlayersTab:
-        setSelectedTab(Tabs.TEAM1)
-        break
-
-      case isVisibleTeam2PlayersTab:
-        setSelectedTab(Tabs.TEAM2)
-        break
-
-      default:
-    }
-  }, [
-    isVisibleTeam1PlayersTab,
-    isVisibleTeam2PlayersTab,
-    isVisibleTeamsTab,
-    setSelectedTab,
-  ])
-
   return {
     isFinalStatsType,
     isTooltipShown,
-    isVisibleTeam1PlayersTab,
-    isVisibleTeam2PlayersTab,
-    isVisibleTeamsTab,
     onMouseLeave,
     onMouseOver,
     selectedTab,
diff --git a/src/features/MatchSidePlaylists/components/TabStats/index.tsx b/src/features/MatchSidePlaylists/components/TabStats/index.tsx
index a9f343b0..d6cedeed 100644
--- a/src/features/MatchSidePlaylists/components/TabStats/index.tsx
+++ b/src/features/MatchSidePlaylists/components/TabStats/index.tsx
@@ -46,9 +46,6 @@ export const TabStats = () => {
   const {
     isFinalStatsType,
     isTooltipShown,
-    isVisibleTeam1PlayersTab,
-    isVisibleTeam2PlayersTab,
-    isVisibleTeamsTab,
     onMouseLeave,
     onMouseOver,
     selectedTab,
@@ -76,80 +73,74 @@ export const TabStats = () => {
     <Container>
       <Header>
         <TabList>
-          {isVisibleTeamsTab && (
-            <Tab
-              aria-pressed={selectedTab === Tabs.TEAMS}
-              onClick={() => setSelectedTab(Tabs.TEAMS)}
-              data-step={Steps.TeamsTab}
+          <Tab
+            aria-pressed={selectedTab === Tabs.TEAMS}
+            onClick={() => setSelectedTab(Tabs.TEAMS)}
+            data-step={Steps.TeamsTab}
+          >
+            <TabTitle>
+              <T9n t='team' />
+            </TabTitle>
+            {Boolean(currentStep === Steps.TeamsTab && isOpen) && (
+              <Spotlight />
+            )}
+          </Tab>
+          <Tab
+            aria-pressed={selectedTab === Tabs.TEAM1}
+            onClick={() => setSelectedTab(Tabs.TEAM1)}
+            data-step={Steps.PlayersTab}
+            id='match_stats_team1'
+          >
+            <TabTitle
+              teamColor={team1.shirt_color}
+              onMouseOver={isMobileDevice
+                ? undefined
+                : onMouseOver({
+                  anchorId: 'team1Tab',
+                  horizontalPosition: 'left',
+                  indent: 25,
+                  tooltipText: team1[`name_${suffix}`],
+                })}
+              onMouseLeave={isMobileDevice ? undefined : onMouseLeave}
             >
-              <TabTitle>
-                <T9n t='team' />
-              </TabTitle>
-              {Boolean(currentStep === Steps.TeamsTab && isOpen) && (
-                <Spotlight />
-              )}
-            </Tab>
-          )}
-          {isVisibleTeam1PlayersTab && (
-            <Tab
-              aria-pressed={selectedTab === Tabs.TEAM1}
-              onClick={() => setSelectedTab(Tabs.TEAM1)}
-              data-step={Steps.PlayersTab}
-              id='match_stats_team1'
-            >
-              <TabTitle
-                teamColor={team1.shirt_color}
-                onMouseOver={isMobileDevice
-                  ? undefined
-                  : onMouseOver({
-                    anchorId: 'team1Tab',
-                    horizontalPosition: 'left',
-                    indent: 25,
-                    tooltipText: team1[`name_${suffix}`],
-                  })}
-                onMouseLeave={isMobileDevice ? undefined : onMouseLeave}
-              >
-                <Name
-                  id='team1Tab'
-                  nameObj={{
-                    name_eng: team1.abbrev_eng || getTeamAbbr(team1.name_eng),
-                    name_rus: team1.abbrev_rus || getTeamAbbr(team1.name_rus),
-                  }}
-                />
-              </TabTitle>
-              {Boolean(currentStep === Steps.PlayersTab && isOpen) && (
-                <Spotlight />
-              )}
-            </Tab>
-          )}
-          {isVisibleTeam2PlayersTab && (
-            <Tab
-              aria-pressed={selectedTab === Tabs.TEAM2}
-              onClick={() => setSelectedTab(Tabs.TEAM2)}
-              id='match_stats_team2'
+              <Name
+                id='team1Tab'
+                nameObj={{
+                  name_eng: team1.abbrev_eng || getTeamAbbr(team1.name_eng),
+                  name_rus: team1.abbrev_rus || getTeamAbbr(team1.name_rus),
+                }}
+              />
+            </TabTitle>
+            {Boolean(currentStep === Steps.PlayersTab && isOpen) && (
+              <Spotlight />
+            )}
+          </Tab>
+          <Tab
+            aria-pressed={selectedTab === Tabs.TEAM2}
+            onClick={() => setSelectedTab(Tabs.TEAM2)}
+            id='match_stats_team2'
+          >
+            <TabTitle
+              teamColor={team2.shirt_color}
+              onMouseOver={isMobileDevice
+                ? undefined
+                : onMouseOver({
+                  anchorId: 'team2Tab',
+                  horizontalPosition: 'left',
+                  indent: 25,
+                  tooltipText: team2[`name_${suffix}`],
+                })}
+              onMouseLeave={isMobileDevice ? undefined : onMouseLeave}
             >
-              <TabTitle
-                teamColor={team2.shirt_color}
-                onMouseOver={isMobileDevice
-                  ? undefined
-                  : onMouseOver({
-                    anchorId: 'team2Tab',
-                    horizontalPosition: 'left',
-                    indent: 25,
-                    tooltipText: team2[`name_${suffix}`],
-                  })}
-                onMouseLeave={isMobileDevice ? undefined : onMouseLeave}
-              >
-                <Name
-                  id='team2Tab'
-                  nameObj={{
-                    name_eng: team2.abbrev_eng || getTeamAbbr(team2.name_eng),
-                    name_rus: team2.abbrev_rus || getTeamAbbr(team2.name_rus),
-                  }}
-                />
-              </TabTitle>
-            </Tab>
-          )}
+              <Name
+                id='team2Tab'
+                nameObj={{
+                  name_eng: team2.abbrev_eng || getTeamAbbr(team2.name_eng),
+                  name_rus: team2.abbrev_rus || getTeamAbbr(team2.name_rus),
+                }}
+              />
+            </TabTitle>
+          </Tab>
         </TabList>
         <Switch
           data-step={Steps.FinalStats}
diff --git a/src/features/MatchSidePlaylists/hooks.tsx b/src/features/MatchSidePlaylists/hooks.tsx
index ee556c44..8d75181a 100644
--- a/src/features/MatchSidePlaylists/hooks.tsx
+++ b/src/features/MatchSidePlaylists/hooks.tsx
@@ -1,7 +1,13 @@
-import { useEffect, useMemo } from 'react'
+import { useEffect } from 'react'
+import { useQueryClient } from 'react-query'
 
-import isEmpty from 'lodash/isEmpty'
-import compact from 'lodash/compact'
+import findIndex from 'lodash/findIndex'
+import isNil from 'lodash/isNil'
+
+import { querieKeys } from 'config'
+
+import type { MatchScore } from 'requests'
+import { MatchStatuses } from 'requests'
 
 import { useMatchPageStore } from 'features/MatchPage/store'
 
@@ -10,77 +16,27 @@ import { Tabs } from './config'
 export const useMatchSidePlaylists = () => {
   const {
     closePopup,
-    events,
-    isEmptyPlayersStats,
-    matchPlaylists: playlists,
     profile: matchProfile,
     selectedTab,
     setSelectedTab,
-    teamsStats,
   } = useMatchPageStore()
+  const client = useQueryClient()
 
-  const isWatchTabVisible = !matchProfile?.live || Number(matchProfile.c_match_calc_status) > 1
-
-  const isEventTabVisible = useMemo(() => (
-    events.length > 0
-  ), [events])
-
-  const isPlayersTabVisible = useMemo(() => (
-    !isEmpty(playlists.players.team1)
-  ), [playlists.players.team1])
+  const matchScore = client.getQueryData<MatchScore>(querieKeys.matchScore)
 
-  const isStatsTabVisible = useMemo(() => (
-    !isEmpty(teamsStats)
-      || (matchProfile?.team1.id && !isEmptyPlayersStats(matchProfile.team1.id))
-      || (matchProfile?.team2.id && !isEmptyPlayersStats(matchProfile.team2.id))
-  ), [
-    isEmptyPlayersStats,
-    matchProfile?.team1.id,
-    matchProfile?.team2.id,
-    teamsStats,
-  ])
+  const videoBounds = matchScore?.video_bounds || matchProfile?.video_bounds
+  const matchStatus = matchScore?.c_match_calc_status || matchProfile?.c_match_calc_status
 
-  const hasLessThanFourTabs = compact([
-    isWatchTabVisible,
-    isEventTabVisible,
-    isPlayersTabVisible,
-    isStatsTabVisible,
-  ]).length < 4
-
-  useEffect(() => {
-    switch (true) {
-      case isWatchTabVisible:
-        setSelectedTab(Tabs.WATCH)
-        break
-      case isEventTabVisible:
-        setSelectedTab(Tabs.EVENTS)
-        break
-      case isPlayersTabVisible:
-        setSelectedTab(Tabs.PLAYERS)
-        break
-      case isStatsTabVisible:
-        setSelectedTab(Tabs.STATS)
-        break
-    }
-  }, [
-    isEventTabVisible,
-    isPlayersTabVisible,
-    isStatsTabVisible,
-    isWatchTabVisible,
-    setSelectedTab,
-  ])
+  const showTabs = Number(matchStatus) > MatchStatuses.Upcoming
+    && findIndex(videoBounds, ({ h, s }) => h === '1' && !isNil(s)) !== -1
 
   useEffect(() => {
     if (selectedTab !== Tabs.EVENTS) closePopup()
   }, [selectedTab, closePopup])
 
   return {
-    hasLessThanFourTabs,
-    isEventTabVisible,
-    isPlayersTabVisible,
-    isStatsTabVisible,
-    isWatchTabVisible,
     onTabClick: setSelectedTab,
     selectedTab,
+    showTabs,
   }
 }
diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx
index 81cb11da..4af4749a 100644
--- a/src/features/MatchSidePlaylists/index.tsx
+++ b/src/features/MatchSidePlaylists/index.tsx
@@ -67,12 +67,8 @@ export const MatchSidePlaylists = ({
   } = useMatchPageStore()
 
   const {
-    hasLessThanFourTabs,
-    isEventTabVisible,
-    isPlayersTabVisible,
-    isStatsTabVisible,
-    isWatchTabVisible,
     onTabClick,
+    showTabs,
   } = useMatchSidePlaylists()
 
   const {
@@ -108,14 +104,14 @@ export const MatchSidePlaylists = ({
     if (
       getLocalStorageItem(TOUR_COMPLETED_STORAGE_KEY) === 'true'
         || isOpen
-        || !isStatsTabVisible
+        || !showTabs
         || Number(profile?.c_match_calc_status) < 2
     ) return undefined
 
     const timer = setTimeout(() => setIsOpen(true), 1500)
 
     return () => clearTimeout(timer)
-  }, [isStatsTabVisible, setIsOpen, profile?.c_match_calc_status, isOpen])
+  }, [showTabs, setIsOpen, profile?.c_match_calc_status, isOpen])
 
   useEventListener({
     callback: () => {
@@ -140,63 +136,57 @@ export const MatchSidePlaylists = ({
       isTourOpen={Boolean(isOpen)}
       isHidden={!profileCardShown}
     >
-      <TabsWrapper>
-        <TabsGroup hasLessThanFourTabs={hasLessThanFourTabs}>
-          {isWatchTabVisible ? (
-            <Tab
-              aria-pressed={selectedTab === Tabs.WATCH}
-              onClick={() => onTabClick(Tabs.WATCH)}
-              id='match_watch'
-            >
-              <TabButton>
-                <TabIcon icon='watch' />
-                <TabTitle t='watch' />
-              </TabButton>
-            </Tab>
-          ) : null}
-          {isEventTabVisible ? (
-            <Tab
-              aria-pressed={selectedTab === Tabs.EVENTS}
-              onClick={() => onTabClick(Tabs.EVENTS)}
-              id='match_plays'
-            >
-              <TabButton>
-                <TabIcon icon='plays' />
-                <TabTitle t='actions' />
-              </TabButton>
-            </Tab>
-          ) : null}
-          {isPlayersTabVisible ? (
-            <Tab
-              aria-pressed={selectedTab === Tabs.PLAYERS}
-              onClick={() => onTabClick(Tabs.PLAYERS)}
-              id='match_players'
-            >
-              <TabButton>
-                <TabIcon icon='players' />
-                <TabTitle t='players' />
-              </TabButton>
-            </Tab>
-          ) : null}
-          {isStatsTabVisible ? (
-            <Tab
-              aria-pressed={selectedTab === Tabs.STATS}
-              onClick={() => onTabClick(Tabs.STATS)}
-              data-step={Steps.Start}
-              id='match_stats'
-            >
-              {Boolean(currentStep === Steps.Start && isOpen) && (
-                <Spotlight />
-              )}
-              <TabButton>
-                <TabIcon icon='stats' />
-                <TabTitle t='stats' />
-              </TabButton>
-            </Tab>
-          ) : null}
-        </TabsGroup>
-
-      </TabsWrapper>
+      {showTabs
+        && (
+          <TabsWrapper>
+            <TabsGroup>
+              <Tab
+                aria-pressed={selectedTab === Tabs.WATCH}
+                onClick={() => onTabClick(Tabs.WATCH)}
+                id='match_watch'
+              >
+                <TabButton>
+                  <TabIcon icon='watch' />
+                  <TabTitle t='watch' />
+                </TabButton>
+              </Tab>
+              <Tab
+                aria-pressed={selectedTab === Tabs.EVENTS}
+                onClick={() => onTabClick(Tabs.EVENTS)}
+                id='match_plays'
+              >
+                <TabButton>
+                  <TabIcon icon='plays' />
+                  <TabTitle t='actions' />
+                </TabButton>
+              </Tab>
+              <Tab
+                aria-pressed={selectedTab === Tabs.PLAYERS}
+                onClick={() => onTabClick(Tabs.PLAYERS)}
+                id='match_players'
+              >
+                <TabButton>
+                  <TabIcon icon='players' />
+                  <TabTitle t='players' />
+                </TabButton>
+              </Tab>
+              <Tab
+                aria-pressed={selectedTab === Tabs.STATS}
+                onClick={() => onTabClick(Tabs.STATS)}
+                data-step={Steps.Start}
+                id='match_stats'
+              >
+                {Boolean(currentStep === Steps.Start && isOpen) && (
+                  <Spotlight />
+                )}
+                <TabButton>
+                  <TabIcon icon='stats' />
+                  <TabTitle t='stats' />
+                </TabButton>
+              </Tab>
+            </TabsGroup>
+          </TabsWrapper>
+        )}
       <Container
         hasScroll={hasTabPaneScroll}
         ref={tabPaneContainerRef}
diff --git a/src/features/MatchSidePlaylists/styled.tsx b/src/features/MatchSidePlaylists/styled.tsx
index 8e28ffb7..c43f595d 100644
--- a/src/features/MatchSidePlaylists/styled.tsx
+++ b/src/features/MatchSidePlaylists/styled.tsx
@@ -54,28 +54,10 @@ export const Wrapper = styled.div<WrapperProps>`
 
 export const TabsWrapper = styled.div``
 
-type TabsGroupProps = {
-  hasLessThanFourTabs?: boolean,
-}
-
-export const TabsGroup = styled.div.attrs({ role: 'tablist' })<TabsGroupProps>`
+export const TabsGroup = styled.div.attrs({ role: 'tablist' })`
   display: flex;
   justify-content: center;
   gap: ${isMobileDevice ? 30 : 20}px;
-
-  ${({ hasLessThanFourTabs }) => (hasLessThanFourTabs
-    ? css`
-      ${Tab} {
-          justify-content: center;
-          flex-direction: row;
-          gap: 5px;
-        }
-
-      ${TabIcon} {
-        margin-bottom: 0;
-      }
-      `
-    : '')}
 `
 
 export const TabTitle = styled(T9n)`
diff --git a/src/hooks/useInterval.tsx b/src/hooks/useInterval.tsx
index eaf9cd9c..468c721a 100644
--- a/src/hooks/useInterval.tsx
+++ b/src/hooks/useInterval.tsx
@@ -29,9 +29,11 @@ export const useInterval = ({
   useEffect(() => {
     if (!isRunning) return undefined
 
+    if (startImmediate) savedCallback.current()
+
     const id = setInterval(savedCallback.current, intervalDuration)
     return () => clearInterval(id)
-  }, [isRunning, intervalDuration, callback])
+  }, [isRunning, intervalDuration, callback, startImmediate])
 
   return { start, stop }
 }
diff --git a/src/requests/getMatchParticipants.tsx b/src/requests/getMatchParticipants.tsx
index 1be5bd60..0f44029c 100644
--- a/src/requests/getMatchParticipants.tsx
+++ b/src/requests/getMatchParticipants.tsx
@@ -28,7 +28,7 @@ export type Player = {
   weight: number | null,
 }
 
-type DataItem = {
+export type DataItem = {
   players: Array<Player>,
   team_id: number,
 }
diff --git a/src/requests/getMatchScore.tsx b/src/requests/getMatchScore.tsx
index 523e965a..de21d2a0 100644
--- a/src/requests/getMatchScore.tsx
+++ b/src/requests/getMatchScore.tsx
@@ -6,7 +6,8 @@ import type {
   Team,
   MatchTournament,
   VideoBounds,
-} from 'requests/getMatchInfo'
+} from './getMatchInfo'
+import { MatchStatuses } from './getMatchInfo'
 
 type Params = {
   profileId: number,
@@ -14,6 +15,7 @@ type Params = {
 }
 
 export type MatchScore = {
+  c_match_calc_status: MatchStatuses | null,
   match_date: string,
   match_date_utc: string,
   match_id: number,
-- 
2.30.2