fix: slider touch end event

IEduStu · Apr 22, 2024 · e4cba7a · e4cba7a
1 parent 584acb8
commit e4cba7a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/src/common/Slider/Slider.js b/src/common/Slider/Slider.js
@@ -31,8 +31,8 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl
     const retainThumb = React.useCallback(() => {
         window.addEventListener('blur', onBlur);
         window.addEventListener('mouseup', onMouseUp);
-        window.addEventListener('touchend', releaseThumb);
-        window.addEventListener('touchcancel', releaseThumb);
+        window.addEventListener('touchend', onTouchEnd);
+        window.addEventListener('touchcancel', onTouchEnd);
         window.addEventListener('mousemove', onMouseMove);
         window.addEventListener('touchmove', onTouchMove);
         document.documentElement.className = classnames(document.documentElement.className, styles['active-slider-within']);
@@ -41,8 +41,8 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl
         cancelThumbAnimation();
         window.removeEventListener('blur', onBlur);
         window.removeEventListener('mouseup', onMouseUp);
-        window.removeEventListener('touchend', releaseThumb);
-        window.removeEventListener('touchcancel', releaseThumb);
+        window.removeEventListener('touchend', onTouchEnd);
+        window.removeEventListener('touchcancel', onTouchEnd);
         window.removeEventListener('mousemove', onMouseMove);
         window.removeEventListener('touchmove', onTouchMove);
         const classList = document.documentElement.className.split(' ');
@@ -111,6 +111,16 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl
 
         retainThumb();
     }, []);
+    const onTouchEnd = React.useCallback((event) => {
+        if (typeof onCompleteRef.current === 'function') {
+            if (event && event.touches && event.touches[0] && event.touches[0].clientX !== undefined)
+                onCompleteRef.current(event.touches[0].clientX);
+            else
+                onCompleteRef.current(valueRef.current);
+        }
+
+        releaseThumb();
+    }, []);
     React.useLayoutEffect(() => {
         if (!routeFocused || disabled) {
             releaseThumb();

diff --git a/src/routes/Player/Video/MobileControlOverlay/styles.less b/src/routes/Player/Video/MobileControlOverlay/styles.less
@@ -10,6 +10,7 @@
     opacity: 0;
     display: flex;
     flex-direction: column;
+    justify-content: center;
     background-color: rgba(0, 0, 0, 0.4);
 
     transition: opacity ease-in-out 150ms;
@@ -26,7 +27,7 @@
     }
 
     .buttons {
-        flex: 1;
+        flex-shrink: 0;
         display: flex;
         flex-direction: row;
         align-items: center;