From 283f76240f1a771f0e39bae2937aba97e17649f1 Mon Sep 17 00:00:00 2001
From: yoshnopa <40072150+yoshnopa@users.noreply.github.com>
Date: Thu, 5 Sep 2024 03:43:31 +0200
Subject: [PATCH] Make Scrubbers touchscreen capable (#5183)

---
 .../src/components/Shared/HoverScrubber.tsx   | 51 +++++++++++++++----
 1 file changed, 42 insertions(+), 9 deletions(-)

diff --git a/ui/v2.5/src/components/Shared/HoverScrubber.tsx b/ui/v2.5/src/components/Shared/HoverScrubber.tsx
index f658e1fa2..d42f06ae7 100644
--- a/ui/v2.5/src/components/Shared/HoverScrubber.tsx
+++ b/ui/v2.5/src/components/Shared/HoverScrubber.tsx
@@ -14,9 +14,21 @@ export const HoverScrubber: React.FC<IHoverScrubber> = ({
   setActiveIndex,
   onClick,
 }) => {
-  function getActiveIndex(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+  function getActiveIndex(
+    e:
+      | React.MouseEvent<HTMLDivElement, MouseEvent>
+      | React.TouchEvent<HTMLDivElement>
+  ) {
     const { width } = e.currentTarget.getBoundingClientRect();
-    const x = e.nativeEvent.offsetX;
+
+    let x = 0;
+    if (e.nativeEvent instanceof MouseEvent) {
+      x = e.nativeEvent.offsetX;
+    } else if (e.nativeEvent instanceof TouchEvent) {
+      x =
+        e.nativeEvent.touches[0].clientX -
+        e.currentTarget.getBoundingClientRect().x;
+    }
 
     const i = Math.round((x / width) * (totalSprites - 1));
 
@@ -26,24 +38,42 @@ export const HoverScrubber: React.FC<IHoverScrubber> = ({
     return i;
   }
 
-  function onMouseMove(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+  function onMove(
+    e:
+      | React.MouseEvent<HTMLDivElement, MouseEvent>
+      | React.TouchEvent<HTMLDivElement>
+  ) {
     const relatedTarget = e.currentTarget;
 
-    if (relatedTarget !== e.target) return;
+    if (
+      (e instanceof MouseEvent && relatedTarget !== e.target) ||
+      (e instanceof TouchEvent &&
+        document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY))
+    )
+      return;
 
     setActiveIndex(getActiveIndex(e));
   }
 
-  function onMouseLeave() {
+  function onLeave() {
     setActiveIndex(undefined);
   }
 
-  function onScrubberClick(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+  function onScrubberClick(
+    e:
+      | React.MouseEvent<HTMLDivElement, MouseEvent>
+      | React.TouchEvent<HTMLDivElement>
+  ) {
     if (!onClick) return;
 
     const relatedTarget = e.currentTarget;
 
-    if (relatedTarget !== e.target) return;
+    if (
+      (e instanceof MouseEvent && relatedTarget !== e.target) ||
+      (e instanceof TouchEvent &&
+        document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY))
+    )
+      return;
 
     e.preventDefault();
     onClick();
@@ -67,9 +97,12 @@ export const HoverScrubber: React.FC<IHoverScrubber> = ({
     >
       <div
         className="hover-scrubber-area"
-        onMouseMove={onMouseMove}
-        onMouseLeave={onMouseLeave}
+        onMouseMove={onMove}
+        onTouchMove={onMove}
+        onMouseLeave={onLeave}
+        onTouchEnd={onLeave}
         onClick={onScrubberClick}
+        onTouchStart={onScrubberClick}
       />
       <div className="hover-scrubber-indicator">
         {activeIndex !== undefined && (