From 52e09f43c364296fbe029908255999fbecd29b8d Mon Sep 17 00:00:00 2001
From: Andrei Dekterev <avdekterev@gmail.com>
Date: Fri, 14 Oct 2022 13:38:18 +0600
Subject: [PATCH] style(#2855): change width for chapterlist and size scrubber
 for ios

---
 .../components/ProgressBar/index.tsx           | 11 +++++++++--
 .../components/ProgressBar/styled.tsx          |  8 +++++++-
 .../components/ProgressBar/index.tsx           | 12 ++++++++++--
 .../components/ProgressBar/styled.tsx          | 18 ++++++++++++++++--
 4 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/features/MultiSourcePlayer/components/ProgressBar/index.tsx b/src/features/MultiSourcePlayer/components/ProgressBar/index.tsx
index ff74c422..20bd3624 100644
--- a/src/features/MultiSourcePlayer/components/ProgressBar/index.tsx
+++ b/src/features/MultiSourcePlayer/components/ProgressBar/index.tsx
@@ -6,6 +6,7 @@ import { Chapters } from 'features/StreamPlayer/components/Chapters'
 import type { Props } from './hooks'
 import { useProgressBar } from './hooks'
 import { ProgressBarList } from './styled'
+import { isIOS } from '../../../../config/userAgent'
 
 export interface ProgressBarProps extends Props {
   isScrubberVisible?: boolean,
@@ -32,11 +33,17 @@ export const ProgressBar = (props: ProgressBarProps) => {
   } = useProgressBar(props)
 
   return (
-    <ProgressBarList ref={progressBarRef}>
+    <ProgressBarList
+      ref={progressBarRef}
+      isIOS={isIOS}
+    >
       <Chapters chapters={calculatedChapters} />
       {isScrubberVisible && (
         <ScrubberContainer>
-          <Scrubber style={{ left: `${playedProgressInPercent}%` }}>
+          <Scrubber
+            isIOS={isIOS}
+            style={{ left: `${playedProgressInPercent}%` }}
+          >
             <TimeTooltip time={time} />
           </Scrubber>
         </ScrubberContainer>
diff --git a/src/features/MultiSourcePlayer/components/ProgressBar/styled.tsx b/src/features/MultiSourcePlayer/components/ProgressBar/styled.tsx
index 8a0a9c0e..9d5529d5 100644
--- a/src/features/MultiSourcePlayer/components/ProgressBar/styled.tsx
+++ b/src/features/MultiSourcePlayer/components/ProgressBar/styled.tsx
@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components/macro'
 import { isMobileDevice } from 'config/userAgent'
 
-export const ProgressBarList = styled.div`
+export const ProgressBarList = styled.div<{isIOS?: boolean}>`
   flex-grow: 1;
   height: 4px;
   position: relative;
@@ -11,4 +11,10 @@ export const ProgressBarList = styled.div`
       height: 1px;
     `
     : ''}
+  
+  ${({ isIOS }) => (isIOS && isMobileDevice
+    && css`
+        height: 3px;
+        margin: 0 24px;
+    `)}
 `
diff --git a/src/features/StreamPlayer/components/ProgressBar/index.tsx b/src/features/StreamPlayer/components/ProgressBar/index.tsx
index 2d7b7ae1..e124ab41 100644
--- a/src/features/StreamPlayer/components/ProgressBar/index.tsx
+++ b/src/features/StreamPlayer/components/ProgressBar/index.tsx
@@ -2,6 +2,8 @@ import { useSlider } from 'features/StreamPlayer/hooks/useSlider'
 import { TimeTooltip } from 'features/StreamPlayer/components/TimeTooltip'
 import { Scrubber, ScrubberContainer } from 'features/StreamPlayer/components/ProgressBar/styled'
 
+import { isIOS } from 'config/userAgent'
+
 import { Chapters } from '../Chapters'
 import type { Props } from './hooks'
 import { useProgressBar } from './hooks'
@@ -16,11 +18,17 @@ export const ProgressBar = (props: Props) => {
     time,
   } = useProgressBar(props)
   return (
-    <ProgressBarList ref={progressBarRef}>
+    <ProgressBarList
+      ref={progressBarRef}
+      isIOS={isIOS}
+    >
       <Chapters chapters={calculatedChapters} />
       {isScrubberVisible && (
         <ScrubberContainer>
-          <Scrubber style={{ left: `${playedProgressInPercent}%` }}>
+          <Scrubber
+            isIOS={isIOS}
+            style={{ left: `${playedProgressInPercent}%` }}
+          >
             <TimeTooltip time={time} />
           </Scrubber>
         </ScrubberContainer>
diff --git a/src/features/StreamPlayer/components/ProgressBar/styled.tsx b/src/features/StreamPlayer/components/ProgressBar/styled.tsx
index e3fa149c..c3af6e4b 100644
--- a/src/features/StreamPlayer/components/ProgressBar/styled.tsx
+++ b/src/features/StreamPlayer/components/ProgressBar/styled.tsx
@@ -4,7 +4,7 @@ import { isMobileDevice } from 'config/userAgent'
 
 import { Wrapper } from '../TimeTooltip/styled'
 
-export const ProgressBarList = styled.div`
+export const ProgressBarList = styled.div<{isIOS?: boolean}>`
   flex-grow: 1;
   height: 4px;
   position: relative;
@@ -16,6 +16,12 @@ export const ProgressBarList = styled.div`
       height: 1px;
     `
     : ''}
+
+  ${({ isIOS }) => (isIOS && isMobileDevice
+      && css`
+        height: 3px;
+        margin: 0 24px;
+    `)}
 `
 export const ScrubberContainer = styled.div`
   ${isMobileDevice
@@ -27,7 +33,7 @@ export const ScrubberContainer = styled.div`
   
 `
 
-export const Scrubber = styled.div`
+export const Scrubber = styled.div<{isIOS?: boolean}>`
   border: none;
   outline: none;
   position: absolute;
@@ -52,4 +58,12 @@ export const Scrubber = styled.div`
       transform: translate(-50%, -48%);
     `
     : ''}
+
+  ${({ isIOS }) => (isIOS && isMobileDevice
+    ? css`
+      width: 30px;
+      height: 30px;
+      transform: translate(-50%, -53%);
+    `
+    : '')}
 `