fix(#1701): offset control panel

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

@@ -33,7 +33,7 @@ export const Chapters = ({ chapters, videoRef }: Props) => {
         <ChapterContainer key={index} style={{ width: `${width}%` }}>
           <LoadedProgress style={{ width: `${loaded}%` }} />
           <PlayedProgress
-            style={{ maxWidth: `${maxWidthProgressBar ? `${maxWidthProgressBar - 30}px` : '100%'}`, width: `${played}%` }}
+            style={{ maxWidth: `${maxWidthProgressBar ? `${maxWidthProgressBar - 20}px` : '100%'}`, width: `${played}%` }}
           />
         </ChapterContainer>
       ))}

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

@@ -12,7 +12,7 @@ export const SettingsButton = styled(ButtonBase)`
     ? css`
       width: 20px;
       height: 18px;
-      margin-left: 15px;
+      margin-left: 10px;
       cursor: pointer;
     `
     : ''};

src/features/StreamPlayer/styled.tsx

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