Ott 717 match popup changes (#310)

* fix(717): popup player settings (#308)

* Ott 717 part 2 (#309)

* fix(717): component changes

* fix(717): empty episodes

* fix(717): style fix

* refactor(717): renamed playlistData to episodes

src/config/lexics/indexLexics.tsx

@@ -17,6 +17,7 @@ const matchPopupLexics = {
   team_players: 13398,
   watch_from: 13022,
   watch_live_stream: 13020,
+  watch_players_episodes: 14052,
 }
 
 const buyMatchPopupLexics = {

src/features/Common/Button/styled.tsx

@@ -4,7 +4,7 @@ import { devices } from 'config/devices'
 
 const baseButtonStyles = css`
   width: 272px;
-  height: 48px;
+  height: 50px;
   border-width: 0.7px;
   border-style: solid;
   border-radius: 2px;
@@ -37,7 +37,8 @@ export const solidButtonStyles = css`
   color: #fff;
   font-weight: bold;
   border-color: transparent;
-  background: ${({ theme: { colors } }) => colors.primary};
+  background-color: #294FC4;
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
 
   /* TODO: удалить медиа запросы из стайледа,
     добавить специфичные юз кейсу правила

src/features/MatchPage/helpers/buildChapters.tsx

@@ -10,12 +10,15 @@ import groupBy from 'lodash/groupBy'
 
 import type {
   Videos,
-  PlaylistData,
+  Episodes,
   Episode,
 } from 'requests'
 
 import type { Chapters, Urls } from 'features/MultiSourcePlayer/types'
 
+import type { PlaylistOption } from '../types'
+import { FULL_GAME_KEY } from './buildPlaylists'
+
 const getUniquePeriods = (videos: Videos) => uniq(map(videos, ({ period }) => period))
 
 type Video = {
@@ -88,10 +91,10 @@ const getEpisodeUrls = (urls: Urls, episode: Episode) => reduce(
   {},
 )
 
-const getPlaylistChapters = (videos: Array<Video>, playlists: PlaylistData) => {
+const getPlaylistChapters = (videos: Array<Video>, episodes: Episodes) => {
   const groupedByPeriods = groupBy(videos, ({ period }) => period)
   return reduce(
-    playlists,
+    episodes,
     (acc: Chapters, episode) => {
       const video = groupedByPeriods[episode.h]?.[0]
       if (!video || episode.s >= episode.e) return acc
@@ -112,10 +115,20 @@ const getPlaylistChapters = (videos: Array<Video>, playlists: PlaylistData) => {
   )
 }
 
-export const buildChapters = (videos: Videos, playlists: PlaylistData) => {
+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 isEmpty(playlists)
+  return selectedPlaylist?.id === FULL_GAME_KEY
     ? getFullMatchChapters(highQualityVideos)
-    : getPlaylistChapters(highQualityVideos, playlists)
+    : getPlaylistChapters(highQualityVideos, episodes)
 }

src/features/MatchPage/helpers/buildPlaylists.tsx

@@ -10,17 +10,19 @@ import type {
 } from 'features/MatchPage/types'
 import { PlaylistTypes } from 'features/MatchPage/types'
 
-const matchKeys = [
+const MATCH_KEYS = [
   'full_game',
   'highlights',
   'ball_in_play',
   'goals',
 ] as const
 
+export const FULL_GAME_KEY = MATCH_KEYS[0]
+
 const getMatchPlaylists = (matchPlaylists: MatchPlaylists | null): MatchPlaylistOptions => {
   if (!matchPlaylists) return []
 
-  return map(matchKeys, (key) => {
+  return map(MATCH_KEYS, (key) => {
     const playlist = matchPlaylists[key]
     const lexic = matchPlaylists.lexics[key]
     return {

src/features/MatchPage/hooks/useChapters.tsx

@@ -4,14 +4,25 @@ import {
   useState,
 } from 'react'
 
-import type { PlaylistData, Videos } from 'requests'
+import type { Episodes, Videos } from 'requests'
 import { getVideos } from 'requests'
 
 import { usePageId, useSportNameParam } from 'hooks'
 
+import type { PlaylistOption } from '../types'
 import { buildChapters } from '../helpers/buildChapters'
 
-export const useChapters = (isFinishedMatch: boolean, playlist: PlaylistData) => {
+type Args = {
+  episodes: Episodes,
+  isFinishedMatch: boolean,
+  selectedPlaylist?: PlaylistOption,
+}
+
+export const useChapters = ({
+  episodes,
+  isFinishedMatch,
+  selectedPlaylist,
+}: Args) => {
   const [videos, setVideos] = useState<Videos>([])
   const { sportType } = useSportNameParam()
   const matchId = usePageId()
@@ -27,8 +38,16 @@ export const useChapters = (isFinishedMatch: boolean, playlist: PlaylistData) =>
   ])
 
   const chapters = useMemo(
-    () => buildChapters(videos, playlist),
-    [playlist, videos],
+    () => buildChapters({
+      episodes,
+      selectedPlaylist,
+      videos,
+    }),
+    [
+      selectedPlaylist,
+      episodes,
+      videos,
+    ],
   )
 
   return { chapters }

src/features/MatchPage/hooks/useEpisodes.tsx

@@ -4,23 +4,23 @@ import {
   useEffect,
 } from 'react'
 
-import { getPlayerPlaylists, PlaylistData } from 'requests'
+import { getPlayerPlaylists, Episodes } from 'requests'
 
 import { usePageId, useSportNameParam } from 'hooks'
 
 import { PlaylistOption, PlaylistTypes } from 'features/MatchPage/types'
 
 type Args = {
-  initialPlaylistData?: PlaylistData,
+  initialEpisodes?: Episodes,
   initialSelectedPlaylist?: PlaylistOption,
 }
 
-export const usePlaylistsData = ({ initialPlaylistData, initialSelectedPlaylist }: Args) => {
-  const [playlistData, setPlaylistData] = useState(initialPlaylistData || [])
+export const useEpisodes = ({ initialEpisodes, initialSelectedPlaylist }: Args) => {
+  const [episodes, setEpisodes] = useState(initialEpisodes || [])
   const { sportType } = useSportNameParam()
   const matchId = usePageId()
 
-  const fetchPlaylists = useCallback((selectedPlaylist: PlaylistOption) => {
+  const fetchEpisodes = useCallback((selectedPlaylist: PlaylistOption) => {
     if (!selectedPlaylist) return
 
     if (selectedPlaylist.type === PlaylistTypes.PLAYER) {
@@ -28,17 +28,17 @@ export const usePlaylistsData = ({ initialPlaylistData, initialSelectedPlaylist
         matchId,
         playerId: selectedPlaylist.id,
         sportType,
-      }).then(setPlaylistData)
+      }).then(setEpisodes)
     } else if (selectedPlaylist.type === PlaylistTypes.MATCH) {
-      setPlaylistData(selectedPlaylist.data)
+      setEpisodes(selectedPlaylist.data)
     }
   }, [matchId, sportType])
 
   useEffect(() => {
     if (initialSelectedPlaylist?.type === PlaylistTypes.MATCH) {
-      fetchPlaylists(initialSelectedPlaylist)
+      fetchEpisodes(initialSelectedPlaylist)
     }
-  }, [initialSelectedPlaylist, fetchPlaylists])
+  }, [initialSelectedPlaylist, fetchEpisodes])
 
-  return { fetchPlaylists, playlistData }
+  return { episodes, fetchEpisodes }
 }

src/features/MatchPage/hooks/useMatchPage.tsx

@@ -14,19 +14,19 @@ import { useRouteState } from './useRouteState'
 
 export const useMatchPage = () => {
   const { closePopup } = useMatchPopupStore()
-  const { initialPlaylistData, initialSelectedPlaylist } = useRouteState()
+  const { initialEpisodes, initialSelectedPlaylist } = useRouteState()
   const [isFinishedMatch, setFinishedMatch] = useState(Boolean(initialSelectedPlaylist))
   const [liveVideos, setLiveVideos] = useState<LiveVideos>([])
   const { sportType } = useSportNameParam()
   const matchId = usePageId()
 
   const {
+    episodes,
     onPlaylistSelect,
-    playlistData,
     playlists,
     selectedPlaylist,
   } = usePlaylists({
-    initialPlaylistData,
+    initialEpisodes,
     initialSelectedPlaylist,
     isFinishedMatch,
   })
@@ -53,7 +53,11 @@ export const useMatchPage = () => {
     playlists,
     selectedPlaylist,
     url: liveVideos[0] || '',
-    ...useChapters(isFinishedMatch, playlistData),
+    ...useChapters({
+      episodes,
+      isFinishedMatch,
+      selectedPlaylist,
+    }),
     ...useLastPlayPosition(),
   }
 }

src/features/MatchPage/hooks/usePlaylists.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 
 import isEmpty from 'lodash/isEmpty'
 
-import { getMatchPlaylists, PlaylistData } from 'requests'
+import { getMatchPlaylists, Episodes } from 'requests'
 
 import { usePageId, useSportNameParam } from 'hooks'
 
@@ -10,7 +10,7 @@ import type { PlaylistOption, Playlists } from 'features/MatchPage/types'
 
 import { usePlaylistLexics } from 'features/MatchPopup/store/hooks/usePlaylistLexics'
 import { buildPlaylists } from '../helpers/buildPlaylists'
-import { usePlaylistsData } from './usePlaylistData'
+import { useEpisodes } from './useEpisodes'
 
 const initialPlaylists: Playlists = {
   interview: [],
@@ -22,13 +22,13 @@ const initialPlaylists: Playlists = {
 }
 
 type Args = {
-  initialPlaylistData?: PlaylistData,
+  initialEpisodes?: Episodes,
   initialSelectedPlaylist?: PlaylistOption,
   isFinishedMatch: boolean,
 }
 
 export const usePlaylists = ({
-  initialPlaylistData,
+  initialEpisodes,
   initialSelectedPlaylist,
   isFinishedMatch,
 }: Args) => {
@@ -39,10 +39,10 @@ export const usePlaylists = ({
   const matchId = usePageId()
 
   const {
-    fetchPlaylists,
-    playlistData,
-  } = usePlaylistsData({
-    initialPlaylistData,
+    episodes,
+    fetchEpisodes,
+  } = useEpisodes({
+    initialEpisodes,
     initialSelectedPlaylist,
   })
 
@@ -72,12 +72,12 @@ export const usePlaylists = ({
   const onPlaylistSelect = (option: PlaylistOption) => {
     if (option === selectedPlaylist) return
     setSelectedPlaylist(option)
-    fetchPlaylists(option)
+    fetchEpisodes(option)
   }
 
   return {
+    episodes,
     onPlaylistSelect,
-    playlistData,
     playlists,
     selectedPlaylist,
   }

src/features/MatchPage/hooks/useRouteState.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { useHistory, useLocation } from 'react-router'
 
-import type { PlaylistData } from 'requests'
+import type { Episodes } from 'requests'
 
 import type { PlaylistOption } from 'features/MatchPage/types'
 
@@ -9,7 +9,7 @@ export type RouteState = {
   /**
    * Данные плейлиста если был выбран игрок
    */
-  playlistData?: PlaylistData,
+  episodes?: Episodes,
 
   /**
    * Выбранный плейлист на попапе матчей
@@ -31,7 +31,7 @@ export const useRouteState = () => {
   }, [history])
 
   return {
-    initialPlaylistData: state?.playlistData,
+    initialEpisodes: state?.episodes,
     initialSelectedPlaylist: state?.selectedPlaylist,
   }
 }

src/features/MatchPage/types.tsx

@@ -1,4 +1,4 @@
-import type { Lexics, PlaylistData } from 'requests'
+import type { Lexics, Episodes } from 'requests'
 
 export enum PlaylistTypes {
   MATCH,
@@ -7,7 +7,7 @@ export enum PlaylistTypes {
 }
 
 export type MatchPlaylistOption = {
-  data: PlaylistData,
+  data: Episodes,
   duration?: number,
   id: string,
   lexic: number,

src/features/MatchPopup/components/FinishedMatchPopup/index.tsx

@@ -2,13 +2,20 @@ import { Fragment } from 'react'
 
 import { Background } from 'features/Background'
 import { MediaQuery } from 'features/MediaQuery'
-import { useMatchPopupStore } from 'features/MatchPopup'
 
-import { SettingsPage } from '../../components/SettingsPage'
-import { FinishedPlaylistPage } from '../../components/FinishedPlaylistPage'
+import { useMatchPopupStore } from '../../store'
+import { MatchSettingsPage } from '../MatchSettingsPage'
+import { PlayerSettingsPage } from '../PlayerSettingsPage'
+import { FinishedPlaylistPage } from '../FinishedPlaylistPage'
 import { PopupPages } from '../../types'
 import { Modal } from './styled'
 
+const components = {
+  [PopupPages.PLAYLIST]: FinishedPlaylistPage,
+  [PopupPages.PLAYER_SETTINGS]: PlayerSettingsPage,
+  [PopupPages.MATCH_SETTINGS]: MatchSettingsPage,
+}
+
 export const FinishedMatchPopup = () => {
   const {
     closePopup,
@@ -17,11 +24,10 @@ export const FinishedMatchPopup = () => {
     page,
   } = useMatchPopupStore()
 
-  const showPopup = isOpen && Boolean(matchPlaylists)
+  if (!page) return null
 
-  const pageElement = page === PopupPages.PLAYLIST
-    ? <FinishedPlaylistPage />
-    : <SettingsPage />
+  const showPopup = isOpen && Boolean(matchPlaylists)
+  const Component = components[page]
 
   return (
     <Fragment>
@@ -31,7 +37,7 @@ export const FinishedMatchPopup = () => {
           isOpen={showPopup}
           withCloseButton={false}
         >
-          {pageElement}
+          <Component />
         </Modal>
       </MediaQuery>
 
@@ -41,7 +47,7 @@ export const FinishedMatchPopup = () => {
           withCloseButton={false}
         >
           <Background>
-            {pageElement}
+            <Component />
           </Background>
         </Modal>
       </MediaQuery>

src/features/MatchPopup/components/FinishedMatchPopup/styled.tsx

@@ -10,7 +10,6 @@ export const Modal = styled(BaseModal)`
 
   ${ModalWindow} {
     width: 1222px;
-    height: 818px;
     padding: 20px 0;
     background-color: #3F3F3F;
     border-radius: 5px;

src/features/MatchPopup/components/FinishedPlaylistPage/index.tsx

@@ -39,7 +39,7 @@ export const FinishedPlaylistPage = () => {
     && !isEmpty(matchPlaylists?.players.team2)
   )
   return (
-    <Content>
+    <Content height={778}>
       <Header>
         <MediaQuery maxDevice='mobile'>
           <HeaderActions position='left'>

src/features/MatchPopup/components/MatchSettingsPage/index.tsx

@@ -0,0 +1,38 @@
+import { MediaQuery } from 'features/MediaQuery'
+import { T9n } from 'features/T9n'
+import {
+  CloseButton,
+  Header,
+  HeaderActions,
+  HeaderTitle,
+} from 'features/PopupComponents'
+
+import { useMatchPopupStore } from '../../store'
+import { BackButton } from '../BackButton'
+import { Content } from '../../styled'
+
+export const MatchSettingsPage = () => {
+  const { closePopup } = useMatchPopupStore()
+
+  return (
+    <Content height={778}>
+      <Header>
+        <HeaderActions position='left'>
+          <BackButton />
+        </HeaderActions>
+
+        <MediaQuery maxDevice='mobile'>
+          <HeaderTitle>
+            <T9n t='match_settings' />
+          </HeaderTitle>
+        </MediaQuery>
+
+        <MediaQuery minDevice='tablet'>
+          <HeaderActions position='right'>
+            <CloseButton onClick={closePopup} />
+          </HeaderActions>
+        </MediaQuery>
+      </Header>
+    </Content>
+  )
+}

src/features/MatchPopup/components/PlayerActions/styled.tsx

@@ -44,7 +44,7 @@ export const List = styled.ul`
   display: flex;
   flex-wrap: wrap;
   margin-top: 20px;
-  height: 262px;
+  height: 264px;
   overflow-y: auto;
 
   @media ${devices.mobile} {

src/features/MatchPopup/components/PlayerSettingsPage/index.tsx

@@ -1,6 +1,7 @@
-import styled from 'styled-components/macro'
+import { MDASH } from 'config'
 
 import { MediaQuery } from 'features/MediaQuery'
+import { Name } from 'features/Name'
 import { T9n } from 'features/T9n'
 import {
   CloseButton,
@@ -14,30 +15,22 @@ import { BackButton } from '../BackButton'
 import { SettingsDesktop } from '../SettingsDesktop'
 import { SettingsMobile } from '../SettingsMobile'
 import { Content } from '../../styled'
+import { TitleWrapper, TeamNames } from './styled'
 
-const ButtonLabel = styled(T9n)`
-  display: flex;
-  align-items: center;
-  font-weight: normal;
-  font-size: 18px;
-  line-height: 21px;
-  color: rgba(255, 255, 255, 0.5);
-`
+export const PlayerSettingsPage = () => {
+  const {
+    closePopup,
+    match,
+    selectedPlayer,
+  } = useMatchPopupStore()
 
-export const SettingsPage = () => {
-  const { closePopup } = useMatchPopupStore()
+  if (!match) return null
 
   return (
-    <Content height={818}>
+    <Content>
       <Header>
-        <HeaderActions
-          position='left'
-          marginLeft={15}
-        >
+        <HeaderActions position='left'>
           <BackButton />
-          <MediaQuery minDevice='tablet'>
-            <ButtonLabel t='go_back_to_match' />
-          </MediaQuery>
         </HeaderActions>
 
         <MediaQuery maxDevice='mobile'>
@@ -50,6 +43,14 @@ export const SettingsPage = () => {
           <HeaderActions position='right'>
             <CloseButton onClick={closePopup} />
           </HeaderActions>
+          <TitleWrapper>
+            {selectedPlayer && <Name nameObj={selectedPlayer} />}
+            <TeamNames>
+              <Name nameObj={match.team1} />
+              {` ${MDASH} `}
+              <Name nameObj={match.team2} />
+            </TeamNames>
+          </TitleWrapper>
         </MediaQuery>
       </Header>
 

src/features/MatchPopup/components/PlayerSettingsPage/styled.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components/macro'
+
+import { HeaderTitle } from 'features/PopupComponents'
+
+export const TitleWrapper = styled(HeaderTitle)`
+  display: flex;
+  flex-direction: column;
+  line-height: 32px;
+`
+
+export const TeamNames = styled.span`
+  font-weight: normal;
+`

src/features/MatchPopup/components/PlayersList/index.tsx

@@ -41,7 +41,7 @@ export const PlayersList = ({
       {
         map(players, (player) => (
           <Item key={player.id} isReady={allLoaded}>
-            <Button onClick={() => handlePlayerClick(player)}>
+            <Button onClick={(e) => handlePlayerClick(player, e)}>
               <PlayerPhoto>
                 <Logo
                   id={player.id}

src/features/MatchPopup/components/SettingsButton/index.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components/macro'
 
-import { useMatchPopupStore } from 'features/MatchPopup'
+import { useMatchPopupStore, PopupPages } from 'features/MatchPopup'
 import { BaseButton } from 'features/PopupComponents'
 
 const Button = styled(BaseButton)`
@@ -8,8 +8,8 @@ const Button = styled(BaseButton)`
 `
 
 export const SettingsButton = () => {
-  const { goToSettings } = useMatchPopupStore()
+  const { goTo } = useMatchPopupStore()
   return (
-    <Button onClick={goToSettings} />
+    <Button onClick={(e) => goTo(PopupPages.MATCH_SETTINGS, e)} />
   )
 }

src/features/MatchPopup/components/SettingsDesktop/index.tsx

@@ -1,16 +1,32 @@
 import { Fragment } from 'react'
 
+import styled from 'styled-components/macro'
+
 import { useMatchPopupStore } from 'features/MatchPopup'
+import { ButtonSolid } from 'features/Common'
+import { T9n } from 'features/T9n'
 
 import { PlaylistFormats } from '../PlaylistFormats'
 import { EpisodeDurationInputs } from '../EpisodeDurationInputs'
 import { PlayerActions } from '../PlayerActions'
 import { PlayerPlaylistFormats } from '../../types'
 
+const ButtonsWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  margin: 45px 0 15px 0;
+`
+
+const WatchButton = styled(ButtonSolid)`
+  width: auto;
+  padding: 0 20px;
+`
+
 export const SettingsDesktop = () => {
   const {
     actions,
     episodeDuration,
+    handleWatchEpisodesClick,
     onActionClick,
     onDurationChange,
     onFormatSelect,
@@ -34,6 +50,12 @@ export const SettingsDesktop = () => {
           selectedActions={selectedActions}
         />
       )}
+
+      <ButtonsWrapper>
+        <WatchButton onClick={handleWatchEpisodesClick}>
+          <T9n t='watch_players_episodes' />
+        </WatchButton>
+      </ButtonsWrapper>
     </Fragment>
   )
 }

src/features/MatchPopup/index.tsx

@@ -4,6 +4,7 @@ import { FinishedMatchPopup } from './components/FinishedMatchPopup'
 import { LiveMatchPopup } from './components/LiveMatchPopup'
 
 export * from './store'
+export * from './types'
 
 export const MatchPopup = () => {
   const { match } = useMatchPopupStore()

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

@@ -1,7 +1,6 @@
 import {
   useState,
   useEffect,
-  useCallback,
 } from 'react'
 
 import isEmpty from 'lodash/isEmpty'
@@ -22,11 +21,12 @@ import { usePlaylistLexics } from './usePlaylistLexics'
 
 export const useMatchPopup = () => {
   const [match, setMatch] = useState<MatchData>(null)
+
   const [matchPlaylists, setMatchPlaylists] = useState<Playlists | null>(null)
   const {
     closePopup,
     goBack,
-    goToSettings,
+    goTo,
     isOpen,
     openPopup,
     page,
@@ -49,17 +49,16 @@ export const useMatchPopup = () => {
 
   const { fetchLexics } = usePlaylistLexics()
 
-  const onFormatSelect = useCallback((format: PlayerPlaylistFormats) => {
-    setSelectedPlaylistFormat(format)
-    if (format === PlayerPlaylistFormats.SELECTED_ACTIONS) {
+  useEffect(() => {
+    if (selectedPlaylistFormat === PlayerPlaylistFormats.SELECTED_ACTIONS) {
       fetchSportActions()
     } else {
       setSelectedActions([])
     }
   }, [
+    selectedPlaylistFormat,
     fetchSportActions,
     setSelectedActions,
-    setSelectedPlaylistFormat,
   ])
 
   useEffect(() => {
@@ -78,50 +77,45 @@ export const useMatchPopup = () => {
       setSelectedPlaylistFormat(PlayerPlaylistFormats.ALL_MATCH_TIME)
     }
   }, [
-    actions,
     selectedActions,
     selectedPlaylistFormat,
-    match,
     page,
-    fetchSportActions,
     setSelectedPlaylistFormat,
   ])
 
   useEffect(() => {
-    if (!match || !isOpen || page !== PopupPages.PLAYLIST) return
+    if (!match) return
 
     getMatchPlaylists({
       matchId: match.id,
-      selectedActions,
+      selectedActions: [],
       sportType: match.sportType,
     }).then(fetchLexics)
       .then(buildPlaylists)
       .then(setMatchPlaylists)
-  }, [
-    isOpen,
-    match,
-    page,
-    selectedActions,
-    fetchLexics,
-  ])
+  }, [match, fetchLexics])
 
   return {
     actions,
     closePopup,
     episodeDuration,
     goBack,
-    goToSettings,
+    goTo,
     isOpen,
     match,
     matchPlaylists,
     onActionClick: setSelectedActions,
     onDurationChange: setEpisodeDuration,
-    onFormatSelect,
+    onFormatSelect: setSelectedPlaylistFormat,
     openPopup,
     page,
     selectedActions,
     selectedPlaylistFormat,
     setMatch,
-    ...usePlayerClickHandler(match, settings),
+    ...usePlayerClickHandler({
+      goTo,
+      match,
+      settings,
+    }),
   }
 }

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

@@ -1,4 +1,5 @@
-import { useCallback } from 'react'
+import type { MouseEvent } from 'react'
+import { useCallback, useState } from 'react'
 import { useHistory } from 'react-router'
 
 import { ProfileTypes } from 'config'
@@ -7,15 +8,33 @@ import { getPlayerPlaylists } from 'requests'
 import type { PlayerPlaylistOption } from 'features/MatchPage/types'
 import type { MatchData, Settings } from 'features/MatchPopup/types'
 import type { RouteState } from 'features/MatchPage/hooks/useRouteState'
+import { PopupPages } from 'features/MatchPopup/types'
 import { getProfileUrl } from 'features/ProfileLink/helpers'
 
-export const usePlayerClickHandler = (match: MatchData, settings: Settings) => {
+type Args = {
+  goTo: (page: PopupPages) => void,
+  match: MatchData,
+  settings: Settings,
+}
+
+export const usePlayerClickHandler = ({
+  goTo,
+  match,
+  settings,
+}: Args) => {
   const history = useHistory()
-  const handlePlayerClick = useCallback(async (player: PlayerPlaylistOption) => {
-    if (!match) return
-    const playlistData = await getPlayerPlaylists({
+  const [selectedPlayer, setSelectedPlayer] = useState<PlayerPlaylistOption | null>(null)
+  const handlePlayerClick = (player: PlayerPlaylistOption, e: MouseEvent) => {
+    e.stopPropagation()
+    setSelectedPlayer(player)
+    goTo(PopupPages.PLAYER_SETTINGS)
+  }
+
+  const handleWatchEpisodesClick = useCallback(async () => {
+    if (!match || !selectedPlayer) return
+    const episodes = await getPlayerPlaylists({
       matchId: match.id,
-      playerId: player.id,
+      playerId: selectedPlayer.id,
       settings,
       sportType: match.sportType,
     })
@@ -27,15 +46,20 @@ export const usePlayerClickHandler = (match: MatchData, settings: Settings) => {
     })
 
     const routeState: RouteState = {
-      playlistData,
-      selectedPlaylist: player,
+      episodes,
+      selectedPlaylist: selectedPlayer,
     }
     history.push(matchLink, routeState)
   }, [
     match,
+    selectedPlayer,
     settings,
     history,
   ])
 
-  return { handlePlayerClick }
+  return {
+    handlePlayerClick,
+    handleWatchEpisodesClick,
+    selectedPlayer,
+  }
 }

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

@@ -1,44 +1,46 @@
 import type { MouseEvent } from 'react'
 import { useState, useCallback } from 'react'
 
-import { useToggle } from 'hooks'
+import last from 'lodash/last'
 
 import { PopupPages } from '../../types'
 
 export const usePopupNavigation = () => {
-  const {
-    close,
-    isOpen,
-    open,
-  } = useToggle()
+  const [pages, setPages] = useState<Array<PopupPages>>([])
 
-  const [page, setPage] = useState<PopupPages>(PopupPages.PLAYLIST)
+  const goTo = useCallback(
+    (step: PopupPages, e?: MouseEvent<HTMLButtonElement>) => setPages((state) => {
+      e?.stopPropagation()
+      return [...state, step]
+    }),
+    [],
+  )
 
-  const closePopup = useCallback(() => {
-    close()
-    setPage(PopupPages.PLAYLIST)
-  }, [close])
-
-  const goBack = useCallback((e?: MouseEvent<HTMLElement>) => {
+  const goBack = useCallback((e?: MouseEvent) => {
     e?.stopPropagation()
-    if (page === PopupPages.PLAYLIST) {
-      closePopup()
-    } else {
-      setPage(PopupPages.PLAYLIST)
-    }
-  }, [page, closePopup])
-
-  const goToSettings = useCallback((e: MouseEvent<HTMLElement>) => {
-    e.stopPropagation()
-    setPage(PopupPages.SETTINGS)
+    setPages((state) => {
+      const newState = [...state]
+      newState.pop()
+      return newState
+    })
+  }, [])
+
+  const openPopup = () => {
+    setPages([PopupPages.PLAYLIST])
+  }
+
+  const closePopup = useCallback(() => {
+    setPages([])
   }, [])
 
+  const page = last(pages)
+
   return {
     closePopup,
     goBack,
-    goToSettings,
-    isOpen,
-    openPopup: open,
+    goTo,
+    isOpen: Boolean(page),
+    openPopup,
     page,
   }
 }

src/features/MatchPopup/types.tsx

@@ -12,8 +12,9 @@ export type MatchData = Pick<Match, (
 )> | null
 
 export enum PopupPages {
-  PLAYLIST,
-  SETTINGS,
+  MATCH_SETTINGS = 'MATCH_SETTINGS',
+  PLAYER_SETTINGS = 'PLAYER_SETTINGS',
+  PLAYLIST = 'PLAYLIST',
 }
 
 export enum PlayerPlaylistFormats {

src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx

@@ -63,7 +63,7 @@ export const PlayersPlaylists = ({
       (player) => isEqual(player, selectedMathPlaylist),
     )
     if (found) {
-      listRef.current?.scrollIntoView()
+      listRef.current?.scrollIntoView({ behavior: 'smooth' })
     }
   }, [players, selectedMathPlaylist])
 

src/features/PopupComponents/Header/index.tsx

@@ -21,7 +21,6 @@ export const Header = styled.div<HeaderProps>`
 `
 
 type HeaderActionsProps = {
-  marginLeft?: number,
   position: 'left' | 'right',
 }
 
@@ -29,9 +28,8 @@ export const HeaderActions = styled.div<HeaderActionsProps>`
   position: absolute;
   display: flex;
 
-  ${({ marginLeft = 0, position }) => css`
+  ${({ position }) => css`
     ${position}: 20px;
-    margin-left: ${marginLeft}px;
   `}
 
   @media ${devices.mobile} {

src/requests/getMatchPlaylists.tsx

@@ -28,10 +28,10 @@ export type Episode = {
   s: number,
 }
 
-export type PlaylistData = Array<Episode>
+export type Episodes = Array<Episode>
 
 type PlaylistWithDuration = {
-  data?: PlaylistData,
+  data?: Episodes,
   dur?: number,
 }
 

src/requests/getPlayerPlaylists.tsx

@@ -11,7 +11,7 @@ import { callApi, getSportLexic } from 'helpers'
 import type { Settings } from 'features/MatchPopup/types'
 import { defaultSettings } from 'features/MatchPopup/types'
 
-import type { PlaylistData } from './getMatchPlaylists'
+import type { Episodes } from './getMatchPlaylists'
 
 const proc = PROCEDURES.ott_match_popup_player_playlist
 
@@ -23,7 +23,7 @@ type Args = {
 }
 
 type Response = {
-  data?: PlaylistData,
+  data?: Episodes,
 }
 
 export const getPlayerPlaylists = async ({