fix(ott-2258): add touch events to progress bar

src/features/MultiSourcePlayer/components/ProgressBar/hooks.tsx

@@ -12,6 +12,8 @@ export type Props = {
   duration: number,
   loadedProgress: number,
   onPlayedProgressChange: (progress: number, seeking: boolean) => void,
+  onTouchEnd?: () => any,
+  onTouchStart?: () => any,
   playedProgress: number,
 }
 

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

@@ -8,8 +8,18 @@ import { useProgressBar } from './hooks'
 import { ProgressBarList } from './styled'
 
 export const ProgressBar = (props: Props) => {
-  const { onPlayedProgressChange } = props
-  const progressBarRef = useSlider({ onChange: onPlayedProgressChange })
+  const {
+    onPlayedProgressChange,
+    onTouchEnd,
+    onTouchStart,
+  } = props
+
+  const progressBarRef = useSlider({
+    onChange: onPlayedProgressChange,
+    onTouchEnd,
+    onTouchStart,
+  })
+
   const {
     calculatedChapters,
     playedProgressInPercent,

src/features/MultiSourcePlayer/index.tsx

@@ -155,6 +155,8 @@ export const MultiSourcePlayer = (props: Props) => {
             allPlayedProgress={allPlayedProgress}
             duration={duration}
             chapters={chapters}
+            onTouchEnd={onTouchEnd}
+            onTouchStart={onTouchStart}
             onPlayedProgressChange={onProgressChange}
             playedProgress={playedProgress}
             loadedProgress={loadedProgress}

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

@@ -45,6 +45,6 @@ export const Scrubber = styled.button`
 
   @media ${devices.mobile} {
     width: 14px;
-    height: 13px;
+    height: 14px;
   }
 `

src/features/StreamPlayer/hooks/useSlider.tsx

@@ -10,9 +10,12 @@ const getNormalizedProgress = (fraction: number) => {
 
 type Args = {
   onChange: (progress: number, seeking: boolean) => void,
+  onTouchEnd?: () => any,
+  onTouchStart?: () => any,
 }
 
-export const useSlider = ({ onChange }: Args) => {
+export const useSlider = (props: Args) => {
+  const { onChange } = props
   const ref = useRef<HTMLDivElement>(null)
   const lastProgress = useRef(0)
   const {
@@ -31,39 +34,68 @@ export const useSlider = ({ onChange }: Args) => {
     onChange(progress, seeking)
   }
 
-  const mouseDownListener = ({ clientX, target }: MouseEvent) => {
-    const track = ref.current
-    if (target === track || track?.contains(target as Node)) {
-      setMouseDown()
-      handleProgress(clientX, !isMouseUp)
-    }
-  }
-
-  const mouseUpListener = () => {
-    if (!isMouseUp) {
-      onChange(lastProgress.current, false)
-      setMouseUp()
-      lastProgress.current = 0
-    }
-  }
-
-  const mouseMoveListener = (e: MouseEvent) => {
-    if (isMouseUp) return
-    handleProgress(e.clientX, !isMouseUp)
-  }
-
   useEventListener({
-    callback: mouseDownListener,
+    callback: ({ clientX, target }: MouseEvent) => {
+      const track = ref.current
+      if (target === track || track?.contains(target as Node)) {
+        setMouseDown()
+        handleProgress(clientX, !isMouseUp)
+      }
+    },
     event: 'mousedown',
   })
+
+  useEventListener({
+    callback: ({ target, targetTouches }: TouchEvent) => {
+      const track = ref.current
+      if (props.onTouchStart) props.onTouchStart()
+      if (target === track || track?.contains(target as Node)) {
+        setMouseDown()
+        handleProgress(targetTouches[0].clientX, !isMouseUp)
+      }
+    },
+    event: 'touchstart',
+  })
+
   useEventListener({
-    callback: mouseUpListener,
+    callback: () => {
+      if (!isMouseUp) {
+        onChange(lastProgress.current, false)
+        setMouseUp()
+        lastProgress.current = 0
+      }
+    },
     event: 'mouseup',
   })
+
   useEventListener({
-    callback: mouseMoveListener,
+    callback: () => {
+      if (props.onTouchEnd) props.onTouchEnd()
+      if (!isMouseUp) {
+        onChange(lastProgress.current, false)
+        setMouseUp()
+        lastProgress.current = 0
+      }
+    },
+    event: 'touchend',
+  })
+
+  useEventListener({
+    callback: (e: MouseEvent) => {
+      if (isMouseUp) return
+      handleProgress(e.clientX, !isMouseUp)
+    },
     event: 'mousemove',
   })
 
+  useEventListener({
+    callback: (e: TouchEvent) => {
+      if (isMouseUp) return
+      if (props.onTouchStart) props.onTouchStart()
+      handleProgress(e.targetTouches[0].clientX, !isMouseUp)
+    },
+    event: 'touchmove',
+  })
+
   return ref
 }