fix(#1701): fix conflicts

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

@@ -1,137 +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,
-        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 = {
-        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)
-}

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

@@ -1,53 +0,0 @@
-import { useToggle } from 'hooks/useToggle'
-
-import type { Settings } from 'features/MatchPopup'
-import { useMatchPopupStore } from 'features/MatchPopup'
-
-import { usePlayerLogger } from './usePlayerLogger'
-import { useEpisodes } from './useEpisodes'
-import { useChapters } from './useChapters'
-
-export const useFinishedMatch = () => {
-  const {
-    handlePlaylistClick,
-    matchPlaylists,
-    selectedPlaylist,
-    setSettings,
-  } = useMatchPopupStore()
-  const {
-    close: closeSettingsPopup,
-    isOpen: isSettingsPopupOpen,
-    open: openSettingsPopup,
-  } = useToggle()
-
-  const { episodes } = useEpisodes()
-
-  const { logPlaylistChange, onPlayingChange } = usePlayerLogger()
-
-  const setEpisodesSettings = (newSettings: Settings) => {
-    setSettings(newSettings)
-    closeSettingsPopup()
-  }
-
-  const onPlaylistSelect: typeof handlePlaylistClick = (playlist, e) => {
-    if (selectedPlaylist) {
-      logPlaylistChange(selectedPlaylist)
-    }
-    handlePlaylistClick(playlist, e)
-  }
-
-  return {
-    closeSettingsPopup,
-    isSettingsPopupOpen,
-    onPlayingChange,
-    onPlaylistSelect,
-    openSettingsPopup,
-    playlists: matchPlaylists,
-    selectedPlaylist,
-    setEpisodesSettings,
-    ...useChapters({
-      episodes,
-      selectedPlaylist,
-    }),
-  }
-}

src/features/MatchPage/components/FinishedMatch/hooks/useChapters.tsx

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

src/features/MatchPage/components/FinishedMatch/hooks/useEpisodes.tsx

@@ -1,69 +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 {
-  defaultSettings,
-  Settings,
-  useMatchPopupStore,
-} from 'features/MatchPopup'
-
-export const useEpisodes = () => {
-  const {
-    handlePlaylistClick,
-    matchPlaylists: playlists,
-    selectedPlaylist,
-    settings,
-  } = useMatchPopupStore()
-  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 }
-}

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

@@ -1,27 +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;
-    background-color: #3F3F3F;
-    border-radius: 5px;
-
-    @media ${devices.tablet} {
-      width: 100vw;
-    }
-
-    @media ${devices.mobile} {
-      height: 100vh;
-      padding: 0;
-      background-color: transparent;
-    }
-  }
-`

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

@@ -45,6 +45,7 @@ export const LiveMatch = ({
       <Container>
         {profile?.youtube_link ? (
           <YoutubePlayer
+            chapters={chapters}
             onPlayingChange={onPlayingChange}
             onProgressChange={onPlayerProgressChange}
             profile={profile}

src/features/MatchPage/index.tsx

@@ -19,7 +19,6 @@ import { MatchPageStore } from './store'
 import { SubscriptionGuard } from './components/SubscriptionGuard'
 import { MatchProfileCard } from './components/MatchProfileCard'
 import { LiveMatch } from './components/LiveMatch'
-import { FinishedMatch } from './components/FinishedMatch'
 import { useMatchProfile } from './hooks/useMatchProfile'
 import { Wrapper } from './styled'
 
@@ -29,7 +28,6 @@ const MatchPageComponent = () => {
   const { addRemoveFavorite, userFavorites } = useUserFavoritesStore()
 
   const {
-    events,
     isStarted,
     profile,
     tournamentData,
@@ -61,9 +59,6 @@ const MatchPageComponent = () => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [profile, profileType])
 
-  const playFromScout = profile?.has_video && !profile?.live
-  const playFromOTT = !profile?.has_video && (profile?.live || profile?.storage)
-
   // TODO Добавить попап 'Данный матч ещё не начался'
   if (!isStarted && profile?.live === false) {
     const sportName = history.location.pathname.split('/')[1]

src/features/MatchPopup/store/hooks/usePlayerClickHandler.tsx

@@ -0,0 +1,25 @@
+import type { MouseEvent } from 'react'
+import { useState, useEffect } from 'react'
+import { useLocation } from 'react-router'
+
+import type { PlaylistOption } from 'features/MatchPage/types'
+
+export const usePlayerClickHandler = () => {
+  const { pathname } = useLocation()
+  const [selectedPlaylist, setSelectedPlaylist] = useState<PlaylistOption>()
+  const handlePlaylistClick = (playlist: PlaylistOption, e?: MouseEvent) => {
+    e?.stopPropagation()
+    if (playlist !== selectedPlaylist) {
+      setSelectedPlaylist(playlist)
+    }
+  }
+
+  useEffect(() => {
+    setSelectedPlaylist(undefined)
+  }, [pathname])
+
+  return {
+    handlePlaylistClick,
+    selectedPlaylist,
+  }
+}

src/features/StreamPlayer/hooks/index.tsx

@@ -19,6 +19,8 @@ import { useNoNetworkPopupStore } from 'features/NoNetworkPopup'
 
 import type { Chapters } from 'features/StreamPlayer/types'
 
+import { MatchInfo } from 'requests/getMatchInfo'
+
 import { REWIND_SECONDS } from '../config'
 import { useHlsPlayer } from './useHlsPlayer'
 import { useFullscreen } from './useFullscreen'
@@ -51,7 +53,9 @@ export type Props = {
   onDurationChange?: (duration: number) => void,
   onPlayingChange: (playing: boolean) => void,
   onProgressChange: (seconds: number) => void,
+  profile?: MatchInfo,
   resumeFrom?: number,
+  url?: string,
 }
 
 export const useVideoPlayer = ({
@@ -101,6 +105,7 @@ export const useVideoPlayer = ({
     onFullscreenClick,
     wrapperRef,
   } = useFullscreen()
+
   const [sizeOptions, setSizeOptions] = useState({
     height: wrapperRef.current?.clientHeight,
     width: wrapperRef.current?.clientWidth,
@@ -190,7 +195,7 @@ export const useVideoPlayer = ({
   const onPlayedProgress = (playedMs: number) => {
     const chapter = getActiveChapter()
     const value = Math.max(playedMs - chapter.startOffsetMs, 0)
-    setPlayerState({ buffering: false, playedProgress: value })
+    setPlayerState({ playedProgress: value })
 
     progressChangeCallback(value / 1000)
   }
@@ -308,7 +313,6 @@ export const useVideoPlayer = ({
     rewindForward,
     seek,
     sizeOptions,
-    startPlaying,
     togglePlaying,
     url,
     videoRef,

src/features/TournamentsPopup/index.tsx

@@ -31,7 +31,7 @@ export const TournamentsPopup = () => {
       <Wrapper>
         <ScBody>{
           isFetching ? (
-            <LoaderWrapper>
+            <LoaderWrapper buffering={false}>
               <Loader color='#515151' />
             </LoaderWrapper>
           ) : (

src/requests/getMatchPlaylists.tsx

@@ -7,12 +7,10 @@ import {
 } from 'config'
 import { callApi, getSportLexic } from 'helpers'
 
-import { getFullMatchDuration } from './getFullMatchDuration'
-
 const proc = PROCEDURES.ott_match_popup
 
 type Args = {
-  fullMatchDuration: number,
+  fullMatchDuration?: number,
   matchId: number,
   selectedActions: Array<number>,
   sportType: SportTypes,
@@ -80,7 +78,6 @@ export const getMatchPlaylists = async ({
   matchId,
   selectedActions,
   sportType,
-  withFullMatchDuration,
 }: Args): Promise<MatchPlaylists> => {
   const actions = isEmpty(selectedActions) ? null : selectedActions
 
@@ -94,19 +91,11 @@ export const getMatchPlaylists = async ({
     },
   }
 
-  const playlistPromise: Promise<Response> = callApi({
+  const playlist: Response = await callApi({
     config,
     url: `${DATA_URL}/${getSportLexic(sportType)}`,
   })
 
-  const matchDurationPromise = withFullMatchDuration
-    ? getFullMatchDuration(sportType, matchId)
-    : Promise.resolve(undefined)
-
-  const [playlist, fullMatchDuration] = await Promise.all(
-    [playlistPromise, matchDurationPromise],
-  )
-
   const full_game: PlaylistWithDuration = {
     data: [],
     dur: fullMatchDuration,

src/requests/index.tsx

@@ -13,7 +13,6 @@ export * from './getUserInfo'
 export * from './getMatchInfo'
 export * from './getUnauthenticatedMatch'
 export * from './reportPlayerProgress'
-export * from './getVideos'
 export * from './saveUserInfo'
 export * from './getPlayerInfo'
 export * from './getMatchLastWatchSeconds'