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

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

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

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)

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,
     }
   })

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,

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>
   )

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;

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

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;

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

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>

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'

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>

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,

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

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,

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}

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 />

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
 }

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