From 439ebd07911fbb218a319fc148c24071acbc2469 Mon Sep 17 00:00:00 2001
From: nevainero <nevainero@gmail.com>
Date: Fri, 8 Apr 2022 12:13:11 +0300
Subject: [PATCH] fix(ott-2258): add touch events to progress bar

---
 .../components/ProgressBar/hooks.tsx          |  2 +
 .../components/ProgressBar/index.tsx          | 14 +++-
 src/features/MultiSourcePlayer/index.tsx      |  2 +
 .../components/ProgressBar/styled.tsx         |  2 +-
 src/features/StreamPlayer/hooks/useSlider.tsx | 82 +++++++++++++------
 5 files changed, 74 insertions(+), 28 deletions(-)

diff --git a/src/features/MultiSourcePlayer/components/ProgressBar/hooks.tsx b/src/features/MultiSourcePlayer/components/ProgressBar/hooks.tsx
index 2eb366b6..b080af87 100644
--- a/src/features/MultiSourcePlayer/components/ProgressBar/hooks.tsx
+++ b/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,
 }
 
diff --git a/src/features/MultiSourcePlayer/components/ProgressBar/index.tsx b/src/features/MultiSourcePlayer/components/ProgressBar/index.tsx
index 741f09ea..ddf48cd7 100644
--- a/src/features/MultiSourcePlayer/components/ProgressBar/index.tsx
+++ b/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,
diff --git a/src/features/MultiSourcePlayer/index.tsx b/src/features/MultiSourcePlayer/index.tsx
index ee6a8b02..d5bf6006 100644
--- a/src/features/MultiSourcePlayer/index.tsx
+++ b/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}
diff --git a/src/features/StreamPlayer/components/ProgressBar/styled.tsx b/src/features/StreamPlayer/components/ProgressBar/styled.tsx
index 980dfa0c..10a6fb05 100644
--- a/src/features/StreamPlayer/components/ProgressBar/styled.tsx
+++ b/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;
   }
 `
diff --git a/src/features/StreamPlayer/hooks/useSlider.tsx b/src/features/StreamPlayer/hooks/useSlider.tsx
index 7ab1a706..8c3971e9 100644
--- a/src/features/StreamPlayer/hooks/useSlider.tsx
+++ b/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
 }