style(#2855): change width for chapterlist and size scrubber for ios

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>

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;
+    `)}
 `

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>

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%);
+    `
+    : '')}
 `