fix(#1701): merge with new controls

src/features/MatchPage/index.tsx

@@ -65,7 +65,6 @@ const MatchPageComponent = () => {
 
   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/MultiSourcePlayer/components/ProgressBar/styled.tsx

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components/macro'
-import { isMobileDevice } from '../../../../config/userAgent'
+import { isMobileDevice } from 'config/userAgent'
 
 export const ProgressBarList = styled.div`
   flex-grow: 1;

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/MultiSourcePlayer/index.tsx

@@ -22,7 +22,6 @@ import { REWIND_SECONDS } from './config'
 
 export const MultiSourcePlayer = (props: Props) => {
   const { profile } = props
-
   const {
     activeChapterIndex,
     activePlayer,

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

@@ -84,7 +84,6 @@ export const Controls = (props: ControlsProps) => {
     isLive,
     isStorage,
   ])
-
   const progressBarElement = useMemo(() => {
     if (isLive || isStorage) {
     //   return (

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

@@ -15,7 +15,6 @@ export const ProgressBar = (props: Props) => {
     playedProgressInPercent,
     time,
   } = useProgressBar(props)
-
   return (
     <ProgressBarList ref={progressBarRef}>
       <Chapters chapters={calculatedChapters} />

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

@@ -1,40 +1,13 @@
 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`
@@ -42,23 +15,24 @@ export const Scrubber = styled.div`
   outline: none;
   position: absolute;
   top: 0;
-  transform: translate(-50%, -38%);
+  transform: translate(-50%, -43%);
   z-index: 3;
   width: 18px;
   height: 18px;
   background-color: #CC0000;
   border-radius: 50%;
   cursor: pointer;
-  
+
   :hover ${Wrapper} {
     visibility: visible;
   }
 
   ${isMobileDevice
     ? css`
-      width: 14px;
-      height: 14px;
-      background-color: #FFFFFF;
+      width: 30px;
+    height: 30px;
+    background-clip: padding-box;
+    border: 10px solid transparent;
     `
     : ''}
 `

src/features/StreamPlayer/styled.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
 
@@ -9,14 +9,6 @@ export const ControlsGradient = styled.div<{ isVisible?: boolean }>`
   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 = {
@@ -108,11 +100,9 @@ export const PlayerWrapper = styled.div<PlayStopProps>`
   position: relative;
   background-color: #000;
   min-height: 100%;
-
   :fullscreen {
     padding-top: 0;
   }
-
   ${supportsAspectRatio
     ? css`aspect-ratio: 16 / 9;`
     : css`
@@ -139,12 +129,7 @@ export const LoaderWrapper = styled.div<LoaderWrapperProps>`
   transform: translate(-50%, -50%);
   z-index: 1;
   transition: opacity 0.3s ease-in-out;
-
-  opacity: ${({ buffering }) => (
-    buffering
-      ? 1
-      : 0
-  )};
+  opacity: ${({ buffering }) => (buffering ? 1 : 0)};
 `
 
 export const ButtonBase = styled.button`
@@ -161,7 +146,7 @@ export const ButtonBase = styled.button`
 
 const sizes = {
   lg: 92,
-  sm: 29,
+  sm: 24,
 }
 
 type PlayStopProps = {
@@ -179,18 +164,17 @@ export const PlayStop = styled(ButtonBase)<PlayStopProps>`
   )};
   ${({ size = 'sm' }) => (
     css`
-      width: ${sizes[size]}px;
-      height: ${sizes[size]}px;
-    `
+        width: ${sizes[size]}px;
+        height: ${sizes[size]}px;
+      `
   )};
-
   ${isMobileDevice
     ? css`
-      width: ${sizes.sm}px;
-      height: ${sizes.sm}px;
-      margin-right: 0;
-      padding: 0;
-    `
+        width: 20%;
+        height: 60%;
+        margin-right: 0;
+        padding: 0;
+      `
     : ''};
 `
 
@@ -214,13 +198,12 @@ export const Fullscreen = styled(ButtonBase)<FullscreenProps>`
       ? 'url(/images/player-fullscreen-off.svg)'
       : 'url(/images/player-fullscreen-on.svg)'
   )};
-
   ${isMobileDevice
     ? css`
-      width: 20px;
-      height: 18px;
-      margin-left: 15px;
-    `
+        width: 20px;
+        height: 18px;
+        margin-left: 15px;
+      `
     : ''};
 `
 
@@ -249,26 +232,23 @@ export const Backward = styled(ButtonBase)<ButtonProps>`
   font-weight: normal;
   ${({ size = 'sm' }) => (
     css`
-      width: ${rewindButtonSizes.sides[size]}px;
-      height: ${rewindButtonSizes.sides[size]}px;
-      font-size: ${rewindButtonSizes.fontSizes[size]}px;
-    `
+        width: ${rewindButtonSizes.sides[size]}px;
+        height: ${rewindButtonSizes.sides[size]}px;
+        font-size: ${rewindButtonSizes.fontSizes[size]}px;
+      `
   )}
   display: ${({ isHidden }) => (isHidden ? 'none' : 'block')};
-
   ${isMobileDevice
     ? css`
-      width: ${rewindButtonSizes.sides.sm}px;
-      height: ${rewindButtonSizes.sides.sm}px;
-      font-size: ${rewindButtonSizes.fontSizes.sm}px;
-    `
+        width: 15%;
+        font-size: 14px;
+        margin-right: 6px;
+      `
     : ''};
 `
 
 export const Forward = styled(Backward)`
   background-image: url(/images/player-forward.svg);
-  margin-left: 10px;
-  margin-right: 0;
 `
 
 type PlaybackTimeProps = {
@@ -280,14 +260,13 @@ export const PlaybackTime = styled.span<PlaybackTimeProps>`
   font-weight: 600;
   font-size: 16px;
   color: #fff;
-
   ${isMobileDevice
     ? css`
-      margin-left: 5px;
-      font-size: 10px;
-      width: 100px;
-      white-space: nowrap;
-    `
+        margin-left: 5px;
+        font-size: 10px;
+        width: 100px;
+        white-space: nowrap;
+      `
     : ''};
 `
 
@@ -306,13 +285,12 @@ export const CenterControls = styled.div<CenterControlsProps>`
   justify-content: space-between;
   align-items: center;
   transition: opacity 0.3s ease-in-out;
-
   opacity: ${({ playing }) => (playing ? 0 : 1)};
   pointer-events: ${({ playing }) => (playing ? 'none' : 'auto')};
   ${isMobileDevice
     ? css`
-      width: 135px;
-    `
+        width: 70%;
+      `
     : ''};
 `
 
@@ -326,15 +304,10 @@ export const LiveBtn = styled(ButtonBase)`
   padding: 4.5px 8px;
   background-color: #CC0000;
   border-radius: 1.3px;
-`
-
-export const TeamsDetailsWrapper = styled.div`
-  position: absolute;
-  top: 20px;
-  left: 15px;
-  font-size: 16px;
-  color: #FFFFFF;
-  z-index: 50;
+  ${isMobileDevice
+    ? css`
+    `
+    : ''};
 `
 
 export const ChaptersText = styled.span`
@@ -343,7 +316,6 @@ export const ChaptersText = styled.span`
   font-size: 16px;
   color: #fff;
   text-align: center;
-
   ${isMobileDevice
     ? css`
       margin: 0 5px;
@@ -361,18 +333,16 @@ export const Prev = styled(ButtonBase)<PrevProps>`
   width: 29px;
   height: 28px;
   background-image: url(/images/player-prev.svg);
-
   ${({ disabled }) => (
     disabled
       ? 'opacity: 0.5;'
       : ''
   )}
-
   ${isMobileDevice
     ? css`
-      width: 20px;
-      height: 20px;
-    `
+        width: 20px;
+        height: 20px;
+      `
     : ''};
 `
 
@@ -380,3 +350,12 @@ export const Next = styled(Prev)`
   margin-right: 10px;
   transform: rotate(180deg);
 `
+
+export const TeamsDetailsWrapper = styled.div`
+  position: absolute;
+  top: 20px;
+  left: 15px;
+  font-size: 16px;
+  color: #FFFFFF;
+  z-index: 50;
+`