fix(#1701): add changes from another tasks

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

@@ -2,6 +2,8 @@ import { Fragment } from 'react'
 
 import isEmpty from 'lodash/isEmpty'
 
+import { isMobileDevice } from 'config/userAgent'
+
 import type { Events } from 'requests/getMatchEvents'
 import type { MatchInfo } from 'requests/getMatchInfo'
 

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

@@ -7,10 +7,13 @@ import { StreamPlayer } from 'features/StreamPlayer'
 import { YoutubePlayer } from 'features/StreamPlayer/components/YoutubePlayer'
 import { MatchSidePlaylists } from 'features/MatchSidePlaylists'
 
+import { isMobileDevice } from 'config/userAgent'
+
 import { Container } from '../../styled'
 
 import { useLiveMatch } from './hooks'
 import { TournamentData } from '../../types'
+import { MatchProfileCardMobile } from '../MatchProfileCardMobile'
 
 type Props = {
   // events: Events,
@@ -64,6 +67,7 @@ export const LiveMatch = ({
             />
           )
         )}
+        {isMobileDevice ? <MatchProfileCardMobile profile={profile} /> : null}
       </Container>
 
       <MatchSidePlaylists

src/features/MatchPage/index.tsx

@@ -10,6 +10,8 @@ import {
 } from 'features/PageLayout'
 
 import { FavoritesActions } from 'requests'
+
+import { isMobileDevice } from 'config/userAgent'
 import { ProfileTypes } from 'config'
 
 import { usePageLogger } from 'hooks/usePageLogger'
@@ -73,7 +75,7 @@ const MatchPageComponent = () => {
   return (
     <PageWrapper>
       <ProfileHeader color='#2B2A28' height={4.5}>
-        <MatchProfileCard profile={profile} />
+        {isMobileDevice ? null : <MatchProfileCard profile={profile} />}
       </ProfileHeader>
       <Main>
         <UserFavorites />

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

@@ -3,6 +3,7 @@ import {
   useState,
   useMemo,
 } from 'react'
+import { useToggle } from 'hooks'
 
 import type { MatchInfo } from 'requests/getMatchInfo'
 import { getMatchInfo } from 'requests/getMatchInfo'
@@ -37,6 +38,11 @@ const addScoresFromPlaylists = (
 export const useMatchPage = () => {
   const [matchProfile, setMatchProfile] = useState<MatchInfo>(null)
   const { profileId: matchId, sportType } = usePageParams()
+  const {
+    close: hideProfileCard,
+    isOpen: profileCardShown,
+    open: showProfileCard,
+  } = useToggle(true)
 
   useEffect(() => {
     getMatchInfo(sportType, matchId).then(setMatchProfile)
@@ -74,10 +80,13 @@ export const useMatchPage = () => {
   return {
     events,
     handlePlaylistClick,
+    hideProfileCard,
     isStarted,
     matchPlaylists,
     profile,
+    profileCardShown,
     selectedPlaylist,
     setFullMatchPlaylistDuration,
+    showProfileCard,
   }
 }

src/features/MatchSidePlaylists/components/TabVideo/styled.tsx

@@ -9,5 +9,6 @@ export const MatchesWrapper = styled.div`
     margin-bottom: 15px;
   }
 
+
   ${customScrollbar}
 `

src/features/MatchSidePlaylists/styled.tsx

@@ -138,7 +138,6 @@ export const BlockTitle = styled.span`
   color: rgba(255, 255, 255, 0.5);
   text-transform: uppercase;
 `
-
 export const BackToTopBtn = styled.div`
   position: absolute;
   left: 50%;

src/features/Menu/styled.tsx

@@ -58,7 +58,7 @@ export const Icon = styled.div<IconProps>`
       }
     `
     : ''};
-
+    
   &:hover {
     opacity: 1;
   }

src/features/MultiSourcePlayer/components/ProgressBar/index.tsx

@@ -1,8 +1,8 @@
 import { useSlider } from 'features/StreamPlayer/hooks/useSlider'
 import { TimeTooltip } from 'features/StreamPlayer/components/TimeTooltip'
 import { Scrubber } from 'features/StreamPlayer/components/ProgressBar/styled'
-import { Chapters } from 'features/StreamPlayer/components/Chapters'
 
+import { Chapters } from 'features/StreamPlayer/components/Chapters'
 import type { Props } from './hooks'
 import { useProgressBar } from './hooks'
 import { ProgressBarList } from './styled'

src/features/MultiSourcePlayer/hooks/index.tsx

@@ -13,6 +13,7 @@ import { useVolume } from 'features/VideoPlayer/hooks/useVolume'
 import { useNoNetworkPopupStore } from 'features/NoNetworkPopup'
 
 import { useEventListener, useObjectState } from 'hooks'
+import { MatchInfo } from 'requests'
 
 import { MatchInfo } from 'requests'
 

src/features/StreamPlayer/components/Controls/index.tsx

@@ -11,7 +11,7 @@ import { Chapters } from 'features/MultiSourcePlayer/types'
 
 import { ControlsMobile } from './Components/ControlsMobile'
 import { ControlsWeb } from './Components/ControlsWeb'
-import { ProgressBar } from '../ProgressBar'
+// import { ProgressBar } from '../ProgressBar'
 
 export type ControlsProps = {
   activeChapterIndex?: number,
@@ -65,7 +65,7 @@ export const Controls = (props: ControlsProps) => {
     isStorage,
     loadedProgress,
     onProgressChange,
-    onProgressChangeLive,
+    // onProgressChangeLive,
     onTouchEnd,
     onTouchStart,
     playedProgress,
@@ -87,15 +87,15 @@ export const Controls = (props: ControlsProps) => {
 
   const progressBarElement = useMemo(() => {
     if (isLive || isStorage) {
-      return (
-        <ProgressBar
-          duration={duration}
-          isScrubberVisible={controlsVisible}
-          onPlayedProgressChange={onProgressChangeLive!}
-          playedProgress={playedProgress}
-          loadedProgress={loadedProgress}
-        />
-      )
+    //   return (
+    //     <ProgressBar
+    //       duration={duration}
+    //       isScrubberVisible={controlsVisible}
+    //       onPlayedProgressChange={onProgressChangeLive!}
+    //       playedProgress={playedProgress}
+    //       loadedProgress={loadedProgress}
+    //     />
+    //   )
     }
     return (
       <ProgressBarMultiSource
@@ -121,7 +121,7 @@ export const Controls = (props: ControlsProps) => {
     isStorage,
     loadedProgress,
     onProgressChange,
-    onProgressChangeLive,
+    // onProgressChangeLive,
     onTouchEnd,
     onTouchStart,
     playedProgress,

src/features/StreamPlayer/components/ProgressBar/hooks.tsx

@@ -10,6 +10,7 @@ export type Props = {
   allPlayedProgress: number,
   chapters: Chapters,
   duration: number,
+  isScrubberVisible?: boolean,
   loadedProgress: number,
   onPlayedProgressChange: (progress: number, seeking: boolean) => void,
   onTouchEnd?: () => any,

src/features/StreamPlayer/components/ProgressBar/styled.tsx

@@ -1,13 +1,40 @@
 import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
-
 import { Wrapper } from '../TimeTooltip/styled'
 
 export const ProgressBarList = styled.div`
   flex-grow: 1;
   height: 4px;
   position: relative;
+  background-color: rgba(255, 255, 255, 0.3);
+  cursor: pointer;
+
+  ${isMobileDevice
+    ? css`
+      height: 1px;
+    `
+    : ''}
+`
+
+export const LoadedProgress = styled.div`
+  position: absolute;
+  z-index: 1;
+  background-color: rgba(255, 255, 255, 0.6);
+  height: 100%;
+`
+
+export const PlayedProgress = styled.div`
+  position: absolute;
+  z-index: 2;
+  background-color: #CC0000;
+  height: 100%;
+
+  ${isMobileDevice
+    ? css`
+      background-color: #FFFFFF;
+    `
+    : ''}
 `
 
 export const Scrubber = styled.div`
@@ -15,7 +42,7 @@ export const Scrubber = styled.div`
   outline: none;
   position: absolute;
   top: 0;
-  transform: translate(-50%, -43%);
+  transform: translate(-50%, -38%);
   z-index: 3;
   width: 18px;
   height: 18px;
@@ -26,13 +53,12 @@ export const Scrubber = styled.div`
   :hover ${Wrapper} {
     visibility: visible;
   }
-  
+
   ${isMobileDevice
     ? css`
-      width: 30px;
-    height: 30px;
-    background-clip: padding-box;
-    border: 10px solid transparent;
+      width: 14px;
+      height: 14px;
+      background-color: #FFFFFF;
     `
     : ''}
 `

src/features/StreamPlayer/styled.tsx

@@ -1,22 +1,29 @@
-import styled, { css } from 'styled-components/macro'
+import styled, { css } from 'styled-components'
 
 import { isMobileDevice } from 'config/userAgent'
-import { devices } from 'config'
 
-export const ControlsGradient = styled.div`
+export const ControlsGradient = styled.div<{ isVisible?: boolean }>`
   background-image: url(/images/player-controls-gradient.png);
   bottom: 0;
   position: absolute;
   width: 100%;
   pointer-events: none;
   height: 145px;
+  
+  ${({ isVisible }) => (isMobileDevice
+    ? css`
+      height: 100%;
+      background: ${(isVisible
+      ? 'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 75%, rgba(0,0,0,0.7) 100%)'
+      : 'initial')}
+    ` : '')}
 `
 
 type HoverStylesProps = {
   visible: boolean,
 }
 
-const hoverStyles = css<HoverStylesProps>`
+export const hoverStyles = css<HoverStylesProps>`
   transition: opacity 0.3s ease-in-out;
   ${({ visible }) => (visible
     ? css`opacity: 1;`
@@ -113,9 +120,12 @@ export const PlayerWrapper = styled.div<PlayStopProps>`
         padding-top: 56.25%;
       `}
 
-  ${devices.laptop} {
-    min-height: auto;
-  }
+  ${isMobileDevice
+    ? css`
+        min-height: auto;
+        margin-bottom: 15px;
+    `
+    : ''};
 `
 
 type LoaderWrapperProps = {
@@ -151,7 +161,7 @@ export const ButtonBase = styled.button`
 
 const sizes = {
   lg: 92,
-  sm: 24,
+  sm: 29,
 }
 
 type PlayStopProps = {
@@ -176,8 +186,8 @@ export const PlayStop = styled(ButtonBase)<PlayStopProps>`
 
   ${isMobileDevice
     ? css`
-      width: 20%;
-      height: 60%;
+      width: ${sizes.sm}px;
+      height: ${sizes.sm}px;
       margin-right: 0;
       padding: 0;
     `
@@ -248,15 +258,17 @@ export const Backward = styled(ButtonBase)<ButtonProps>`
 
   ${isMobileDevice
     ? css`
-      width: 15%;
-      font-size: 14px;
-      margin-right: 6px;
+      width: ${rewindButtonSizes.sides.sm}px;
+      height: ${rewindButtonSizes.sides.sm}px;
+      font-size: ${rewindButtonSizes.fontSizes.sm}px;
     `
     : ''};
 `
 
 export const Forward = styled(Backward)`
   background-image: url(/images/player-forward.svg);
+  margin-left: 10px;
+  margin-right: 0;
 `
 
 type PlaybackTimeProps = {
@@ -299,7 +311,7 @@ export const CenterControls = styled.div<CenterControlsProps>`
   pointer-events: ${({ playing }) => (playing ? 'none' : 'auto')};
   ${isMobileDevice
     ? css`
-      width: 70%;
+      width: 135px;
     `
     : ''};
 `
@@ -314,11 +326,15 @@ export const LiveBtn = styled(ButtonBase)`
   padding: 4.5px 8px;
   background-color: #CC0000;
   border-radius: 1.3px;
+`
 
-  ${isMobileDevice
-    ? css`
-    `
-    : ''};
+export const TeamsDetailsWrapper = styled.div`
+  position: absolute;
+  top: 20px;
+  left: 15px;
+  font-size: 16px;
+  color: #FFFFFF;
+  z-index: 50;
 `
 
 export const ChaptersText = styled.span`