Ott 1442 videoplayer fix (#452)

* style(#1442): video player iphone SE styles fix

* style(#1442): style fixes

* style(#1442): players styles fix

* style(#1442): tabs font size fix

* style(#1442): stylelint fixes

* style(#1442): another iphone videoplayer fix

Co-authored-by: Farber Denis <denis.farber@instatsport.com>

src/features/BuyMatchPopup/components/SubscriptionsList/styled.tsx

@@ -15,7 +15,7 @@ export const List = styled.ul`
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-  margin-top: 25px;
+  margin-top: 15px;
   padding: 0 40px;
 
   ${popupScrollbarStyles}

src/features/BuyMatchPopup/styled.tsx

@@ -83,8 +83,7 @@ export const Wrapper = styled.div<WrapperProps>`
   position: relative;
   height: ${({ height }) => (height ? `${height}px` : 'auto')};
   width: ${({ width }) => (width ? `${width}px` : '830px')};
-  padding: 40px 0 41px;
+  padding: 20px 0 20px;
-
 
   ${isMobileDevice
     ? css`
@@ -97,6 +96,7 @@ export const Wrapper = styled.div<WrapperProps>`
       @media (max-width: 1370px) {
        max-width: 743px;
        max-height: 650px;
+  
       }
       @media (max-width: 650px){
         width: 100%;
@@ -146,7 +146,7 @@ export const Footer = styled.div<FooterProps>`
   margin-top: 40px;
 
   @media (max-width: 1370px) {
-    margin-top: 15px;
+    margin-top: 0px;
   }
   ${isMobileDevice
     ? css`

src/features/Combobox/components/Arrow/index.tsx

@@ -1,4 +1,5 @@
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
+import { isMobileDevice } from 'config/userAgent'
 
 type Props = {
   isExpanded: boolean,
@@ -23,6 +24,12 @@ const Wrapper = styled.div<{ isExpanded: boolean }>`
   :hover {
     cursor: pointer;
   }
+
+  ${isMobileDevice
+    ? css`
+      right: 11px;
+    `
+    : ''};
 `
 
 export const Arrow = ({ isExpanded, toggle }: Props) => (

src/features/Common/Input/styled.tsx

@@ -200,6 +200,7 @@ export const Icon = styled.div<{ image: string }>`
     ? css`
       width: 18px;
       height: 18px;
+      right: 11px; 
     `
     : ''}
 `

src/features/Common/NewInput/styled.tsx

@@ -64,7 +64,6 @@ export const InputStyled = styled.input`
     width: 100%;
     color: ${({ theme }) => theme.colors.text100};
     font-style: normal;
-    font-weight: normal;
     font-size: 0.755rem;
     letter-spacing: 0.1px;
     ${isMobileDevice

src/features/Common/Tabs/index.tsx

@@ -57,6 +57,9 @@ export const Tab = styled.button.attrs(({ selected }: TabProps) => ({
   ${isMobileDevice
     ? css`
       font-size: 10px;
+      @media (orientation: landscape){
+        font-size: 9px;
+      }
     `
     : ''};
 `

src/features/MatchCard/styled.tsx

@@ -18,7 +18,6 @@ export const CardWrapperOuter = styled.li.attrs({
       height: 90px;
       margin-bottom: 10px;
    
-
       @media screen and (orientation: landscape){
         width: 49%;
         :nth-child(odd){
@@ -32,7 +31,6 @@ export const CardWrapperOuter = styled.li.attrs({
 export const CardWrapper = styled.li.attrs({
   tabIndex: 0,
 })`
-  position: absolute;
   position: absolute;
   top: 0;
   left: 0;

src/features/MatchPage/styled.tsx

@@ -25,6 +25,7 @@ export const Wrapper = styled.div`
         justify-content: space-between;
         margin-left: 10px;
         margin-top: 55px;
+        width: 100vw;
       }
     `
     : ''};
@@ -47,8 +48,13 @@ export const Container = styled.div`
       max-width: 100%;
       margin-right: 0;
       padding: 0;
+      margin-bottom: 15px;
+      min-height: 32vh;
+      
       @media screen and (orientation: landscape){
-      flex: 2;
+        display: block;
+        width: 100%;
+        margin-bottom: 0;
       }
     `
     : ''};

src/features/MatchSidePlaylists/styled.tsx

@@ -5,7 +5,18 @@ import { isMobileDevice } from 'config/userAgent'
 
 import { customScrollbar } from 'features/Common'
 
-export const Wrapper = styled.div``
+export const Wrapper = styled.div`
+${isMobileDevice
+    ? css`
+      @media (orientation: landscape){
+        min-width: 250px;
+      }
+      @media (max-width: 569px) and (orientation: landscape){
+        min-width: 200px;
+      }
+    `
+    : ''};
+`
 
 export const TabsWrapper = styled.div`
   padding-left: 14px;
@@ -31,6 +42,9 @@ export const Container = styled.div`
       @media (max-width: 750px){
         width: 100%;
       }
+      @media (orientation: landscape){
+        width: 100%;
+      }
     `
     : ''};
 `

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

@@ -10,9 +10,10 @@ export const SettingsButton = styled(ButtonBase)`
 
   ${isMobileDevice
     ? css`
-      width: 17px;
+      width: 20px;
-      height: 15px;
+      height: 18px;
       margin-left: 8px;
+      cursor: pointer;
     `
     : ''};
 `

src/features/MultiSourcePlayer/index.tsx

@@ -17,6 +17,7 @@ import { VideoPlayer } from 'features/VideoPlayer'
 
 import { secondsToHms } from 'helpers'
 
+import { isMobileDevice } from 'config/userAgent'
 import { HOUR_IN_MILLISECONDS, REWIND_SECONDS } from './config'
 
 import { ProgressBar } from './components/ProgressBar'
@@ -172,12 +173,23 @@ export const MultiSourcePlayer = (props: Props) => {
               {' / '}
               {secondsToHms(duration / 1000)}
             </PlaybackTime>
-            <Backward onClick={rewindBackward}>{REWIND_SECONDS}</Backward>
+            <Backward
-            <Forward onClick={rewindForward}>{REWIND_SECONDS}</Forward>
+              onClick={rewindBackward}
+              isHidden={isMobileDevice}
+            >{REWIND_SECONDS}
+            </Backward>
+            <Forward
+              onClick={rewindForward}
+              isHidden={isMobileDevice}
+            >{REWIND_SECONDS}
+            </Forward>
           </ControlsGroup>
 
           <ControlsGroup>
-            <Fullscreen onClick={onFullscreenClick} isFullscreen={isFullscreen} />
+            <Fullscreen
+              onClick={onFullscreenClick}
+              isFullscreen={isFullscreen}
+            />
             <Settings
               onSelect={onQualitySelect}
               selectedQuality={selectedQuality}

src/features/MultiSourcePlayer/styled.tsx

@@ -13,7 +13,7 @@ export const ChaptersText = styled.span`
   ${isMobileDevice
     ? css`
       margin: 0 5px;
-      font-size: 10px;
+      font-size: 12px;
       width: 15%;
     `
     : ''};
@@ -36,13 +36,13 @@ export const Prev = styled(ButtonBase)<PrevProps>`
  
   ${isMobileDevice
     ? css`
-      width: 11px;
+      width: 20px;
-      height: 11px;
+      height: 20px;
     `
     : ''};
 `
 
 export const Next = styled(Prev)`
-  margin-right: 24px;
+  margin-right: 10px;
   transform: rotate(180deg);
 `

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

@@ -15,7 +15,7 @@ export const ProgressBarList = styled.div`
 export const LoadedProgress = styled.div`
   position: absolute;
   z-index: 1;
-  background-color: rgba(255, 255, 255, 0.6);;
+  background-color: rgba(255, 255, 255, 0.6);
   height: 100%;
 `
 

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

@@ -38,7 +38,7 @@ export const VolumeButton = styled.button<VolumeButtonProps>`
 
   ${isMobileDevice
     ? css`
-      width: 15px;
+      width: 20px;
       background-size: contain;
       margin-right: 3px;
     `
@@ -55,6 +55,9 @@ export const VolumeProgressList = styled.div`
   ${isMobileDevice
     ? css`
       display: none;
+      @media (orientation: landscape){
+        display: block;
+      }
     `
     : ''};
 `
@@ -74,7 +77,7 @@ export const Scrubber = styled.button<VolumeProgressProps>`
   outline: none;
   width: 13px;
   height: 13px;
-  left: ${({ value }) => value}%;;
+  left: ${({ value }) => value}%;
   position: absolute;
   border-radius: 50%;
   background-color: #fff;

src/features/StreamPlayer/index.tsx

@@ -122,7 +122,10 @@ export const StreamPlayer = (props: Props) => {
             </PlaybackTime>
           </ControlsGroup>
           <ControlsGroup>
-            <Fullscreen onClick={onFullscreenClick} isFullscreen={isFullscreen} />
+            <Fullscreen
+              onClick={onFullscreenClick}
+              isFullscreen={isFullscreen}
+            />
             <Settings
               onSelect={onQualitySelect}
               selectedQuality={selectedQuality}

src/features/StreamPlayer/styled.tsx

@@ -1,6 +1,5 @@
 import styled, { css } from 'styled-components/macro'
 
-import { devices } from 'config/devices'
 import { isMobileDevice } from 'config/userAgent'
 
 import { VideoPlayer as VideoPlayerBase } from 'features/VideoPlayer'
@@ -20,10 +19,17 @@ export const Controls = styled.div`
   align-items: center;
   transition: opacity 0.3s ease-in-out;
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
-  @media ${devices.mobile} {
+  
+  ${isMobileDevice
+    ? css`
       bottom: 0;
+      @media (orientation: landscape){
+        width: 100%;
+        left: 50%;
+        transform: translateX(-50%);
       }
-
+    `
+    : ''};
 `
 
 export const ControlsRow = styled.div`
@@ -92,16 +98,6 @@ export const PlayerWrapper = styled.div<PlayStopProps>`
       : '1'
   )};
   }
-  ${isMobileDevice
-    ? css`
-      padding-top: 0; 
-      margin-bottom: 17px;
-      min-height: 32vh;
-      height: 100%;
-      background: transparent;
-      width: 100%;
-    `
-    : ''};
 `
 
 export const LoaderWrapper = styled.div`
@@ -151,14 +147,12 @@ export const PlayStop = styled(ButtonBase)<PlayStopProps>`
     `
   )};
 
-  @media ${devices.mobile} {
-   
-  }
   ${isMobileDevice
     ? css`
-      width: 10%;
+      width: 20%;
-      height: 40%;
+      height: 60%;
-      margin-right: 5px;
+      margin-right: 0;
+      padding: 0;
     `
     : ''};
 `
@@ -186,14 +180,15 @@ export const Fullscreen = styled(ButtonBase)<FullscreenProps>`
 
   ${isMobileDevice
     ? css`
-     width: 17px;
+      width: 20px;
-     height: 15px;
+      height: 18px;
       margin-left: 0;
     `
     : ''};
 `
 
 type ButtonProps = {
+  isHidden?: boolean,
   size?: 'sm' | 'lg',
 }
 
@@ -222,12 +217,14 @@ export const Backward = styled(ButtonBase)<ButtonProps>`
       font-size: ${rewindButtonSizes.fontSizes[size]}px;
     `
   )}
+  display: ${({ isHidden }) => (isHidden ? 'none' : 'block')};
 
   ${isMobileDevice
     ? css`
-      width: 10%;
+      width: 20%;
       height: 40%;
-      font-size: 10px;
+      font-size: 14px;
+      margin-right: 0;
     `
     : ''};
 `
@@ -249,6 +246,7 @@ export const PlaybackTime = styled.span<PlaybackTimeProps>`
   ${isMobileDevice
     ? css`
       font-size: 10px;
+      width: 130px;
     `
     : ''};
 `

src/features/UserAccount/components/BankCard/styled.tsx

@@ -1,6 +1,7 @@
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
 
 import { devices } from 'config/devices'
+import { isMobileDevice } from 'config/userAgent'
 
 import { Label } from 'features/Common/Radio/styled'
 import { RadioSvg } from 'features/Common/Radio/Icon'
@@ -23,6 +24,12 @@ export const CardNumberWrapper = styled.div`
   :hover ${InlineButton} {
     transform: translateX(0);
   }
+
+  ${isMobileDevice
+    ? css`
+     height: 39px;
+    `
+    : ''};
 `
 
 export const CustomRadio = styled(Radio)`

src/features/UserAccount/components/PageBankCards/styled.tsx

@@ -1,12 +1,18 @@
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
 
 import { devices } from 'config'
+import { isMobileDevice } from 'config/userAgent'
 
 import { Modal as ModalBase } from 'features/Modal'
 import { ModalWindow } from 'features/Modal/styled'
 
 export const Wrapper = styled.div`
   margin-top: 28px;
+  ${isMobileDevice
+    ? css`
+      width: 100%;
+    `
+    : ''};
 `
 
 export const FormWrapper = styled.div`
@@ -16,6 +22,12 @@ export const FormWrapper = styled.div`
   @media ${devices.tablet} {
     max-width: auto;
   }
+  ${isMobileDevice
+    ? css`
+      width: 100%;
+      margin: 20px 0;
+    `
+    : ''};
 `
 
 export const PaymentInfoText = styled.span`
@@ -25,6 +37,11 @@ export const PaymentInfoText = styled.span`
   font-size: 16px;
   line-height: 24px;
   color: rgba(255, 255, 255, 0.3);
+  ${isMobileDevice
+    ? css`
+      font-size: 10px;
+    `
+    : ''};
 `
 
 export const Modal = styled(ModalBase)`

src/features/UserAccount/components/PagePaymentsHistory/styled.tsx

@@ -1,6 +1,7 @@
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
 
 import { devices } from 'config'
+import { isMobileDevice } from 'config/userAgent'
 
 export const Wrapper = styled.div`
   margin-top: 26px;
@@ -46,6 +47,15 @@ export const Th = styled.th`
       width: 150px;
     }
   }
+  ${isMobileDevice
+    ? css`
+      font-size: 12px;
+      vertical-align: baseline;
+      :not(:nth-child(1)){
+        padding-right: 5px;
+      }
+    `
+    : ''}
 `
 
 export const TBody = styled.tbody``
@@ -59,4 +69,14 @@ export const Td = styled.td`
   line-height: 22px;
   text-align: start;
   color: #FFFFFF;
+  ${isMobileDevice
+    ? css`
+      font-size: 12px;
+      line-height: 17px;
+      vertical-align: baseline;
+      :not(:nth-child(1)){
+        padding-right: 5px;
+      }
+    `
+    : ''}
 `

src/features/UserAccount/components/PageSubscriptions/styled.tsx

@@ -1,5 +1,7 @@
 import styled, { css } from 'styled-components/macro'
 
+import { isMobileDevice } from 'config/userAgent'
+
 import { popupScrollbarStyles } from 'features/PopupComponents'
 
 export const Wrapper = styled.div`
@@ -18,6 +20,11 @@ export const SubscriptionsWrapper = styled.div`
 export const Tabs = styled.div`
   display: flex;
   margin-bottom: 40px;
+  ${isMobileDevice
+    ? css`
+      margin-top: 15px;
+    `
+    : ''}
 `
 
 type TabProps = {
@@ -52,4 +59,15 @@ export const Tab = styled.button<TabProps>`
         }
       `
       : '')}
+
+  ${isMobileDevice
+    ? css`
+      font-size: 14px;
+      line-height: 14px;
+      ::after {
+        bottom: -15px;
+        height: 2px;
+      }
+    `
+    : ''}
 `

src/features/UserAccount/components/ScoreSwitch/index.tsx

@@ -8,8 +8,13 @@ import {
   Title as TitleBase,
 } from 'features/MatchSwitches/styled'
 
-const Wrapper = styled.div`
+type TWrapper = {
+  isHidden?: boolean,
+}
+
+const Wrapper = styled.div<TWrapper>`
   margin-top: 90px;
+  display: ${({ isHidden }) => (isHidden ? 'none' : 'block')};
   ${isMobileDevice
     ? css`
       margin-top: 0;
@@ -33,7 +38,10 @@ export const ScoreSwitch = ({ className }: Props) => {
   const { isScoreHidden, toggleScore } = useMatchSwitchesStore()
 
   return (
-    <Wrapper className={className}>
+    <Wrapper
+      className={className}
+      isHidden={isMobileDevice}
+    >
       <Switch
         role='switch'
         onClick={toggleScore}

src/features/UserAccount/components/UserSubscriptionsList/styled.tsx

@@ -1,4 +1,6 @@
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
+
+import { isMobileDevice } from 'config/userAgent'
 
 import { SportName as SportNameBase } from 'features/Common/SportName'
 import { Price as BasePrice } from 'features/Price'
@@ -18,6 +20,11 @@ export const SportName = styled(SportNameBase)`
   font-size: 18px;
   line-height: 22px;
   color: rgba(255, 255, 255, 0.6);
+  ${isMobileDevice
+    ? css`
+      font-size: 14px;
+    `
+    : ''}
 `
 
 export const List = styled.ul`
@@ -27,6 +34,12 @@ export const List = styled.ul`
 export const Item = styled.li`
   display: flex;
   align-items: center;
+
+  ${isMobileDevice
+    ? css`
+      display: block;
+    `
+    : ''}
 `
 
 export const Price = styled(BasePrice)`
@@ -36,12 +49,22 @@ export const Price = styled(BasePrice)`
     font-size: 24px;
     line-height: 24px;
     font-weight: normal;
+    ${isMobileDevice
+    ? css`
+      font-size: 14px;
+    `
+    : ''}
   }
 
   ${PriceDetails} {
     font-weight: 500;
     font-size: 12px;
     line-height: 18px;
+    ${isMobileDevice
+    ? css`
+      font-size: 7px;
+    `
+    : ''}
   }
 `
 
@@ -71,6 +94,12 @@ export const Subscription = styled.div.attrs(
       transform: translateX(0);
     }
   }
+  ${isMobileDevice
+    ? css`
+      height: 86px;
+      width: 100%;
+    `
+    : ''}
 `
 
 export const InfoWrapper = styled.div`
@@ -79,6 +108,11 @@ export const InfoWrapper = styled.div`
   padding: 14px 0 14px 20px;
   flex-direction: column;
   color: #fff;
+  ${isMobileDevice
+    ? css`
+      padding: 10px 0 10px 15px;
+    `
+    : ''}
 `
 
 export const Header = styled.span`
@@ -87,6 +121,12 @@ export const Header = styled.span`
   font-size: 16px;
   line-height: 23px;
   text-transform: uppercase;
+  ${isMobileDevice
+    ? css`
+      font-size: 14px;
+      line-height: 20px;
+    `
+    : ''}
 `
 
 export const Description = styled.p`
@@ -95,6 +135,12 @@ export const Description = styled.p`
   font-size: 16px;
   line-height: 20px;
   text-transform: capitalize;
+  ${isMobileDevice
+    ? css`
+      font-size: 10px;
+      line-height: 12px;
+    `
+    : ''}
 `
 
 export const SubscriptionEnd = styled.span`
@@ -104,4 +150,10 @@ export const SubscriptionEnd = styled.span`
   font-size: 16px;
   line-height: 24px;
   color: rgba(255, 255, 255, 0.3);
+  ${isMobileDevice
+    ? css`
+      font-size: 10px;
+      margin-left: 0;
+    `
+    : ''}
 `

src/features/UserAccount/styled.tsx

@@ -23,6 +23,13 @@ export const SolidButton = styled(ButtonSolid)`
   @media ${devices.mobile} {
     width: 100%;
   }
+  ${isMobileDevice
+    ? css`
+      height: 35px;
+      display: flex;
+      justify-content: center;
+    `
+    : ''};
 `
 
 export const OutlineButton = styled(ButtonOutline)`
@@ -41,6 +48,12 @@ export const OutlineButton = styled(ButtonOutline)`
   @media ${devices.mobile} {
     width: 100%;
   }
+  ${isMobileDevice
+    ? css`
+      height: 39px;
+      font-size: 14px;
+    `
+    : ''};
 `
 
 type IconProps = {
@@ -66,6 +79,12 @@ export const ContentWrapper = styled.div`
     padding-top: 0;
     padding-left: 0;
   }
+
+  ${isMobileDevice
+    ? css`
+      margin-top: 10px;
+    `
+    : ''};
 `
 
 export const UserAccountWrapper = styled.div`
@@ -100,6 +119,11 @@ export const Body = styled.div`
 export const Aside = styled.aside`
   position: relative;
   height: 100%;
+  ${isMobileDevice
+    ? css`
+      height: auto;
+    `
+    : ''};
 `
 
 export const Navigations = styled.nav`