From bc277fa65d0a9cd4ec19ad7bb9076ac5b6afc546 Mon Sep 17 00:00:00 2001
From: Mirlan <m.maksitaliev@gmail.com>
Date: Wed, 30 Dec 2020 15:07:53 +0600
Subject: [PATCH] Ott 697 popup imprv (#268)

* Ott 697 part 1 (#266)

* fix(591): request lexics

* fix(591): style and bug fixes

* fix(591): match page style and bug fixes (#267)
---
 src/config/lexics/indexLexics.tsx             |  4 --
 src/features/Common/Checkbox/Icon.tsx         |  3 ++
 .../MatchPage/helpers/buildChapters.tsx       |  2 +-
 .../MatchPage/helpers/buildPlaylists.tsx      |  8 ++--
 src/features/MatchPage/hooks/useMatchPage.tsx |  7 +++
 src/features/MatchPage/index.tsx              |  2 +
 src/features/MatchPage/styled.tsx             |  2 +-
 src/features/MatchPage/types.tsx              |  2 +-
 .../components/MatchPlaylist/index.tsx        |  4 ++
 .../components/PlaylistButton/index.tsx       | 20 +++++++-
 .../components/PlaylistPage/index.tsx         | 12 +++--
 .../components/SettingsPage/index.tsx         |  2 +-
 src/features/MatchPopup/index.tsx             |  7 ++-
 src/features/MatchPopup/store/hooks/index.tsx | 48 ++++++++++++-------
 .../store/hooks/usePlaylistLexics.tsx         | 21 ++++++++
 .../store/hooks/useSettingsState.tsx          |  5 --
 src/features/MatchPopup/styled.tsx            | 13 +++--
 src/features/MatchSidePlaylists/index.tsx     | 12 +++++
 src/requests/getMatchPlaylists.tsx            | 24 +++++++---
 src/requests/getPlayerPlaylists.tsx           |  7 ++-
 20 files changed, 155 insertions(+), 50 deletions(-)
 create mode 100644 src/features/MatchPopup/store/hooks/usePlaylistLexics.tsx
 create mode 100644 src/features/MatchSidePlaylists/index.tsx

diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx
index 1aef1460..0ea341ab 100644
--- a/src/config/lexics/indexLexics.tsx
+++ b/src/config/lexics/indexLexics.tsx
@@ -5,10 +5,6 @@ const matchPopupLexics = {
   episode_duration: 13410,
   go_back_to_match: 13405,
   match_interviews: 13031,
-  match_playlist_ball_in_play: 2489,
-  match_playlist_full_match: 13028,
-  match_playlist_goals: 3559,
-  match_playlist_highlights: 13033,
   match_settings: 13490,
   playlist_format: 13406,
   playlist_format_all_actions: 13408,
diff --git a/src/features/Common/Checkbox/Icon.tsx b/src/features/Common/Checkbox/Icon.tsx
index 40632c80..c0dde2a0 100644
--- a/src/features/Common/Checkbox/Icon.tsx
+++ b/src/features/Common/Checkbox/Icon.tsx
@@ -15,7 +15,10 @@ export const svgColorStyles = css<SvgColorStylesProps>`
 `
 
 export const CheckboxSvg = styled.svg`
+  min-width: 24px;
+  min-height: 24px;
   margin-right: 22px;
+  align-self: flex-start;
 
   ${svgColorStyles}
 `
diff --git a/src/features/MatchPage/helpers/buildChapters.tsx b/src/features/MatchPage/helpers/buildChapters.tsx
index 091d7b0d..5c71354f 100644
--- a/src/features/MatchPage/helpers/buildChapters.tsx
+++ b/src/features/MatchPage/helpers/buildChapters.tsx
@@ -112,7 +112,7 @@ const getPlaylistChapters = (videos: Array<Video>, playlists: PlaylistData) => {
   )
 }
 
-export const buildChapters = (videos: Videos, playlists: PlaylistData = []) => {
+export const buildChapters = (videos: Videos, playlists: PlaylistData) => {
   const periods = getUniquePeriods(videos)
   const highQualityVideos = getVideoByPeriods(videos, periods)
   return isEmpty(playlists)
diff --git a/src/features/MatchPage/helpers/buildPlaylists.tsx b/src/features/MatchPage/helpers/buildPlaylists.tsx
index 5fefa7be..d1d2e310 100644
--- a/src/features/MatchPage/helpers/buildPlaylists.tsx
+++ b/src/features/MatchPage/helpers/buildPlaylists.tsx
@@ -1,4 +1,5 @@
 import map from 'lodash/map'
+import sortBy from 'lodash/sortBy'
 
 import type { MatchPlaylists, Players } from 'requests'
 
@@ -10,7 +11,7 @@ import type {
 import { PlaylistTypes } from 'features/MatchPage/types'
 
 const matchKeys = [
-  'full_match',
+  'full_game',
   'highlights',
   'ball_in_play',
   'goals',
@@ -21,11 +22,12 @@ const getMatchPlaylists = (matchPlaylists: MatchPlaylists | null): MatchPlaylist
 
   return map(matchKeys, (key) => {
     const playlist = matchPlaylists[key]
+    const lexic = matchPlaylists.lexics[key]
     return {
-      data: playlist.data,
+      data: sortBy(playlist.data, ['h', 's']),
       duration: playlist.dur,
       id: key,
-      lexic: `match_playlist_${key}`,
+      lexic,
       type: PlaylistTypes.MATCH,
     }
   })
diff --git a/src/features/MatchPage/hooks/useMatchPage.tsx b/src/features/MatchPage/hooks/useMatchPage.tsx
index 4dd98452..b7cac190 100644
--- a/src/features/MatchPage/hooks/useMatchPage.tsx
+++ b/src/features/MatchPage/hooks/useMatchPage.tsx
@@ -5,12 +5,15 @@ import { getLiveVideos } from 'requests'
 
 import { useSportNameParam, usePageId } from 'hooks'
 
+import { useMatchPopupStore } from 'features/MatchPopup'
+
 import { useLastPlayPosition } from './useLastPlayPosition'
 import { usePlaylists } from './usePlaylists'
 import { useChapters } from './useChapters'
 import { useRouteState } from './useRouteState'
 
 export const useMatchPage = () => {
+  const { closePopup } = useMatchPopupStore()
   const { initialSelectedPlaylist } = useRouteState()
   const [isFinishedMatch, setFinishedMatch] = useState(Boolean(initialSelectedPlaylist))
   const [liveVideos, setLiveVideos] = useState<LiveVideos>([])
@@ -37,6 +40,10 @@ export const useMatchPage = () => {
     matchId,
   ])
 
+  useEffect(() => {
+    closePopup()
+  }, [closePopup])
+
   return {
     isFinishedMatch,
     onPlaylistSelect,
diff --git a/src/features/MatchPage/index.tsx b/src/features/MatchPage/index.tsx
index 48c85f61..dfb47eb5 100644
--- a/src/features/MatchPage/index.tsx
+++ b/src/features/MatchPage/index.tsx
@@ -4,6 +4,7 @@ import { ProfileHeader } from 'features/ProfileHeader'
 import { MainWrapper } from 'features/MainWrapper'
 import { UserFavorites } from 'features/UserFavorites'
 import { MediaQuery } from 'features/MediaQuery'
+import { MatchSidePlaylists } from 'features/MatchSidePlaylists'
 import { MultiSourcePlayer } from 'features/MultiSourcePlayer'
 import { StreamPlayer } from 'features/StreamPlayer'
 
@@ -60,6 +61,7 @@ export const MatchPage = () => {
             )
           }
         </Container>
+        <MatchSidePlaylists />
       </Wrapper>
     </MainWrapper>
   )
diff --git a/src/features/MatchPage/styled.tsx b/src/features/MatchPage/styled.tsx
index 1df46b35..0347af2f 100644
--- a/src/features/MatchPage/styled.tsx
+++ b/src/features/MatchPage/styled.tsx
@@ -17,7 +17,7 @@ export const MainWrapper = styled.div`
 `
 
 export const Container = styled.div`
-  max-width: 2360px;
+  max-width: 2090px;
   max-height: 896px;
   display: flex;
   flex-direction: column;
diff --git a/src/features/MatchPage/types.tsx b/src/features/MatchPage/types.tsx
index 452e48ae..c5ad23ca 100644
--- a/src/features/MatchPage/types.tsx
+++ b/src/features/MatchPage/types.tsx
@@ -10,7 +10,7 @@ export type MatchPlaylistOption = {
   data: PlaylistData,
   duration?: number,
   id: string,
-  lexic: string,
+  lexic: number,
   type: PlaylistTypes.MATCH,
 }
 
diff --git a/src/features/MatchPopup/components/MatchPlaylist/index.tsx b/src/features/MatchPopup/components/MatchPlaylist/index.tsx
index c2a6385b..bde4e7c6 100644
--- a/src/features/MatchPopup/components/MatchPlaylist/index.tsx
+++ b/src/features/MatchPopup/components/MatchPlaylist/index.tsx
@@ -16,6 +16,10 @@ const List = styled.ul`
   justify-content: space-between;
   flex-wrap: wrap;
 
+  :last-child {
+    margin-bottom: 0;
+  }
+
   @media ${devices.mobile} {
     width: 100%;
     margin: 12px auto;
diff --git a/src/features/MatchPopup/components/PlaylistButton/index.tsx b/src/features/MatchPopup/components/PlaylistButton/index.tsx
index e3201599..853cc761 100644
--- a/src/features/MatchPopup/components/PlaylistButton/index.tsx
+++ b/src/features/MatchPopup/components/PlaylistButton/index.tsx
@@ -9,10 +9,13 @@ import { secondsToHms } from 'helpers'
 import { T9n } from 'features/T9n'
 import { MatchPlaylistOption } from 'features/MatchPage/types'
 
-export const buttonStyles = css`
+type ButtonsStypesProps = {
+  disabled?: boolean,
+}
+
+export const buttonStyles = css<ButtonsStypesProps>`
   border: none;
 
-  cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -28,6 +31,17 @@ export const buttonStyles = css`
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
   border-radius: 2px;
 
+  ${({ disabled }) => (
+    disabled
+      ? css`
+          pointer-events: none;
+          opacity: 0.5;
+        `
+      : css`
+          cursor: pointer;
+        `
+  )}
+
   :hover {
     background-color: #555555;
   }
@@ -91,6 +105,8 @@ export const PlaylistButton = ({
       state: { selectedPlaylist: playlist },
     }}
     onClick={stopPropagation}
+    disabled={!playlist.duration}
+    tabIndex={!playlist.duration ? -1 : 0}
   >
     <Title>
       <T9n t={playlist.lexic} />
diff --git a/src/features/MatchPopup/components/PlaylistPage/index.tsx b/src/features/MatchPopup/components/PlaylistPage/index.tsx
index d12f6138..11df43c5 100644
--- a/src/features/MatchPopup/components/PlaylistPage/index.tsx
+++ b/src/features/MatchPopup/components/PlaylistPage/index.tsx
@@ -1,5 +1,7 @@
 import { Fragment } from 'react'
 
+import isEmpty from 'lodash/isEmpty'
+
 import { Name } from 'features/Name'
 import { MediaQuery } from 'features/MediaQuery'
 import { useMatchPopupStore } from 'features/MatchPopup'
@@ -23,6 +25,10 @@ export const PlaylistPage = () => {
 
   const { team1, team2 } = match
   const score = ` ${team1.score}:${team2.score} `
+  const hasPlayers = (
+    !isEmpty(matchPlaylists?.players.team1)
+    && !isEmpty(matchPlaylists?.players.team2)
+  )
   return (
     <Content>
       <Header>
@@ -46,11 +52,11 @@ export const PlaylistPage = () => {
         </HeaderActions>
       </Header>
 
+      <MatchPlaylist />
+
       {
-        matchPlaylists && (
+        hasPlayers && (
           <Fragment>
-            <MatchPlaylist />
-
             <MediaQuery maxDevice='mobile'>
               <PlayersListMobile />
             </MediaQuery>
diff --git a/src/features/MatchPopup/components/SettingsPage/index.tsx b/src/features/MatchPopup/components/SettingsPage/index.tsx
index 6d84dd49..514da38b 100644
--- a/src/features/MatchPopup/components/SettingsPage/index.tsx
+++ b/src/features/MatchPopup/components/SettingsPage/index.tsx
@@ -24,7 +24,7 @@ const ButtonLabel = styled(T9n)`
 `
 
 export const SettingsPage = () => (
-  <Content>
+  <Content height={818}>
     <Header>
       <HeaderActions
         position='left'
diff --git a/src/features/MatchPopup/index.tsx b/src/features/MatchPopup/index.tsx
index 91d55b75..4b54d2c9 100644
--- a/src/features/MatchPopup/index.tsx
+++ b/src/features/MatchPopup/index.tsx
@@ -15,9 +15,12 @@ export const MatchPopup = () => {
   const {
     closePopup,
     isOpen,
+    matchPlaylists,
     page,
   } = useMatchPopupStore()
 
+  const showPopup = isOpen && Boolean(matchPlaylists)
+
   const pageElement = page === PopupPages.PLAYLIST
     ? <PlaylistPage />
     : <SettingsPage />
@@ -27,7 +30,7 @@ export const MatchPopup = () => {
       <MediaQuery minDevice='tablet'>
         <Modal
           close={closePopup}
-          isOpen={isOpen}
+          isOpen={showPopup}
           withCloseButton={false}
         >
           {pageElement}
@@ -36,7 +39,7 @@ export const MatchPopup = () => {
 
       <MediaQuery maxDevice='mobile'>
         <Modal
-          isOpen={isOpen}
+          isOpen={showPopup}
           withCloseButton={false}
         >
           <Background>
diff --git a/src/features/MatchPopup/store/hooks/index.tsx b/src/features/MatchPopup/store/hooks/index.tsx
index 1c98205e..3fb9039a 100644
--- a/src/features/MatchPopup/store/hooks/index.tsx
+++ b/src/features/MatchPopup/store/hooks/index.tsx
@@ -1,4 +1,8 @@
-import { useState, useEffect } from 'react'
+import {
+  useState,
+  useEffect,
+  useCallback,
+} from 'react'
 
 import isEmpty from 'lodash/isEmpty'
 
@@ -14,6 +18,7 @@ import { usePopupNavigation } from './usePopupNavigation'
 import type { MatchData } from '../../types'
 import { PopupPages, PlayerPlaylistFormats } from '../../types'
 import { usePlayerClickHandler } from './usePlayerClickHandler'
+import { usePlaylistLexics } from './usePlaylistLexics'
 
 export const useMatchPopup = () => {
   const [match, setMatch] = useState<MatchData>(null)
@@ -28,7 +33,6 @@ export const useMatchPopup = () => {
   } = usePopupNavigation()
 
   const {
-    resetSelectedActions,
     setEpisodeDuration,
     setSelectedActions,
     setSelectedPlaylistFormat,
@@ -43,6 +47,21 @@ export const useMatchPopup = () => {
 
   const { actions, fetchSportActions } = useSportActions(match?.sportType)
 
+  const { fetchLexics } = usePlaylistLexics()
+
+  const onFormatSelect = useCallback((format: PlayerPlaylistFormats) => {
+    setSelectedPlaylistFormat(format)
+    if (format === PlayerPlaylistFormats.SELECTED_ACTIONS) {
+      fetchSportActions()
+    } else {
+      setSelectedActions([])
+    }
+  }, [
+    fetchSportActions,
+    setSelectedActions,
+    setSelectedPlaylistFormat,
+  ])
+
   useEffect(() => {
     if (!isOpen) {
       setMatch(null)
@@ -51,25 +70,21 @@ export const useMatchPopup = () => {
   }, [isOpen])
 
   useEffect(() => {
-    if (selectedPlaylistFormat !== PlayerPlaylistFormats.SELECTED_ACTIONS) {
-      resetSelectedActions()
-    }
-  }, [selectedPlaylistFormat, resetSelectedActions])
-
-  useEffect(() => {
-    const isSettingsPage = page === PopupPages.SETTINGS
+    const isPlaylistPage = page === PopupPages.PLAYLIST
     const actionsFormatSelected = (
       selectedPlaylistFormat === PlayerPlaylistFormats.SELECTED_ACTIONS
     )
-    if (isSettingsPage && actionsFormatSelected) {
-      fetchSportActions()
+    if (isPlaylistPage && actionsFormatSelected && isEmpty(selectedActions)) {
+      setSelectedPlaylistFormat(PlayerPlaylistFormats.ALL_MATCH_TIME)
     }
   }, [
+    actions,
+    selectedActions,
     selectedPlaylistFormat,
     match,
     page,
     fetchSportActions,
-    resetSelectedActions,
+    setSelectedPlaylistFormat,
   ])
 
   useEffect(() => {
@@ -77,16 +92,17 @@ export const useMatchPopup = () => {
 
     getMatchPlaylists({
       matchId: match.id,
-      // запрос с экшнами [1, 2, 3] временный
-      selectedActions: isEmpty(selectedActions) ? [1, 2, 3] : selectedActions,
+      selectedActions,
       sportType: match.sportType,
-    }).then(buildPlaylists)
+    }).then(fetchLexics)
+      .then(buildPlaylists)
       .then(setMatchPlaylists)
   }, [
     isOpen,
     match,
     page,
     selectedActions,
+    fetchLexics,
   ])
 
   return {
@@ -100,7 +116,7 @@ export const useMatchPopup = () => {
     matchPlaylists,
     onActionClick: setSelectedActions,
     onDurationChange: setEpisodeDuration,
-    onFormatSelect: setSelectedPlaylistFormat,
+    onFormatSelect,
     openPopup,
     page,
     selectedActions,
diff --git a/src/features/MatchPopup/store/hooks/usePlaylistLexics.tsx b/src/features/MatchPopup/store/hooks/usePlaylistLexics.tsx
new file mode 100644
index 00000000..82c6f79a
--- /dev/null
+++ b/src/features/MatchPopup/store/hooks/usePlaylistLexics.tsx
@@ -0,0 +1,21 @@
+import { useCallback } from 'react'
+
+import isEmpty from 'lodash/isEmpty'
+import values from 'lodash/values'
+
+import type { MatchPlaylists } from 'requests'
+
+import { useLexicsStore } from 'features/LexicsStore'
+
+export const usePlaylistLexics = () => {
+  const { addLexicsConfig } = useLexicsStore()
+  const fetchLexics = useCallback((playlist: MatchPlaylists | null) => {
+    const lexics = values(playlist?.lexics)
+    if (!isEmpty(lexics)) {
+      addLexicsConfig(lexics)
+    }
+    return playlist
+  }, [addLexicsConfig])
+
+  return { fetchLexics }
+}
diff --git a/src/features/MatchPopup/store/hooks/useSettingsState.tsx b/src/features/MatchPopup/store/hooks/useSettingsState.tsx
index 6cc363a2..060db25d 100644
--- a/src/features/MatchPopup/store/hooks/useSettingsState.tsx
+++ b/src/features/MatchPopup/store/hooks/useSettingsState.tsx
@@ -60,14 +60,9 @@ export const useSettingsState = (sportType?: SportTypes) => {
     [setSettings],
   )
 
-  const resetSelectedActions = useCallback(() => {
-    setSelectedActions([])
-  }, [setSelectedActions])
-
   const settings = useMemo(getSettings, [getSettings])
 
   return {
-    resetSelectedActions,
     setEpisodeDuration,
     setSelectedActions,
     setSelectedPlaylistFormat,
diff --git a/src/features/MatchPopup/styled.tsx b/src/features/MatchPopup/styled.tsx
index 156742c4..048f04af 100644
--- a/src/features/MatchPopup/styled.tsx
+++ b/src/features/MatchPopup/styled.tsx
@@ -11,7 +11,6 @@ export const Modal = styled(BaseModal)`
 
   ${ModalWindow} {
     width: 1222px;
-    height: 818px;
     padding: 20px 0;
     background-color: #3F3F3F;
     border-radius: 5px;
@@ -51,9 +50,17 @@ export const BaseButton = styled.button`
   }
 `
 
-export const Content = styled.div`
+type ContentProps = {
+  height?: number,
+}
+
+export const Content = styled.div<ContentProps>`
   width: 100%;
-  height: 100%;
+  height: ${({ height }) => (
+    height
+      ? `${height}px`
+      : 'auto'
+  )};
   overflow-y: auto;
 
   ${customScrollbar}
diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx
new file mode 100644
index 00000000..a5b2fdcb
--- /dev/null
+++ b/src/features/MatchSidePlaylists/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+import styled from 'styled-components/macro'
+
+const Wrapper = styled.div`
+  width: 288px;
+  height: 100px;
+  margin-top: 42px;
+  margin-left: 14px;
+`
+
+export const MatchSidePlaylists = () => <Wrapper />
diff --git a/src/requests/getMatchPlaylists.tsx b/src/requests/getMatchPlaylists.tsx
index a54d1776..a23d98b3 100644
--- a/src/requests/getMatchPlaylists.tsx
+++ b/src/requests/getMatchPlaylists.tsx
@@ -1,3 +1,5 @@
+import isEmpty from 'lodash/isEmpty'
+
 import {
   DATA_URL,
   PROCEDURES,
@@ -29,8 +31,8 @@ export type Episode = {
 export type PlaylistData = Array<Episode>
 
 type PlaylistWithDuration = {
-  data: PlaylistData,
-  dur: number,
+  data?: PlaylistData,
+  dur?: number,
 }
 
 type Player = {
@@ -42,11 +44,19 @@ type Player = {
 
 export type Players = Array<Player>
 
+type Lexics = {
+  ball_in_play: number,
+  full_game: number,
+  goals: number,
+  highlights: number,
+}
+
 export type MatchPlaylists = {
   ball_in_play: PlaylistWithDuration,
-  full_match: PlaylistWithDuration,
+  full_game: PlaylistWithDuration,
   goals: PlaylistWithDuration,
   highlights: PlaylistWithDuration,
+  lexics: Lexics,
   players1: Players,
   players2: Players,
 }
@@ -60,10 +70,12 @@ export const getMatchPlaylists = async ({
   selectedActions,
   sportType,
 }: Args) => {
+  const actions = isEmpty(selectedActions) ? null : selectedActions
+
   const config = {
     body: {
       params: {
-        _p_actions: selectedActions,
+        _p_actions: actions,
         _p_match_id: matchId,
       },
       proc,
@@ -81,12 +93,12 @@ export const getMatchPlaylists = async ({
     [playlistPromise, matchDurationPromise],
   )
 
-  const full_match: PlaylistWithDuration = {
+  const full_game: PlaylistWithDuration = {
     data: [],
     dur: fullMatchDuration,
   }
 
   return playlist.data
-    ? { ...playlist.data, full_match }
+    ? { ...playlist.data, full_game }
     : null
 }
diff --git a/src/requests/getPlayerPlaylists.tsx b/src/requests/getPlayerPlaylists.tsx
index 22467237..b15adf5d 100644
--- a/src/requests/getPlayerPlaylists.tsx
+++ b/src/requests/getPlayerPlaylists.tsx
@@ -1,3 +1,5 @@
+import isEmpty from 'lodash/isEmpty'
+
 import {
   DATA_URL,
   PROCEDURES,
@@ -30,13 +32,14 @@ export const getPlayerPlaylists = async ({
   settings = defaultSettings,
   sportType,
 }: Args) => {
+  const actions = isEmpty(settings.selectedActions) ? null : settings.selectedActions
   const config = {
     body: {
       params: {
-        _p_actions: settings.selectedActions,
+        _p_actions: actions,
         _p_match_id: matchId,
         _p_offset_end: settings.episodeDuration.after,
-        _p_offset_start: settings.episodeDuration.before,
+        _p_offset_start: -settings.episodeDuration.before,
         _p_player_id: playerId,
         _p_type: settings.selectedFormat,
       },