feat: enhance video player progress bar touch interaction by adding native touch event handling and increasing touch target area.

app/styles/video-player.css

@@ -47,6 +47,21 @@
     overflow: visible;
     user-select: none;
     -webkit-user-select: none;
+    touch-action: none;
+    /* Prevent page scrolling during drag */
+    -webkit-touch-callout: none;
+    /* Prevent iOS callout */
+}
+
+/* Increase touch target area for mobile */
+.slider-track::before {
+    content: '';
+    position: absolute;
+    top: -16px;
+    left: 0;
+    right: 0;
+    bottom: -16px;
+    z-index: 1;
 }
 
 .slider-track.h-1 {

components/player/hooks/desktop/useProgressControls.ts

@@ -108,7 +108,29 @@ export function useProgressControls({
             document.removeEventListener('touchend', handleTouchEnd);
             document.removeEventListener('touchcancel', handleTouchEnd);
         };
-    }, [duration, isDraggingProgressRef, progressBarRef, videoRef, setCurrentTime]);
+    }, [duration, isDraggingProgressRef, progressBarRef, videoRef, setCurrentTime, getEventPos]);
+
+    // Attach touchstart with passive: false to allow preventDefault (React uses passive by default)
+    useEffect(() => {
+        const progressBar = progressBarRef.current;
+        if (!progressBar) return;
+
+        const handleNativeTouchStart = (e: TouchEvent) => {
+            e.preventDefault();
+            isDraggingProgressRef.current = true;
+            if (!videoRef.current) return;
+            const rect = progressBar.getBoundingClientRect();
+            const pos = getEventPos(e, rect);
+            const newTime = pos * duration;
+            lastDragTimeRef.current = newTime;
+            setCurrentTime(newTime);
+        };
+
+        progressBar.addEventListener('touchstart', handleNativeTouchStart, { passive: false });
+        return () => {
+            progressBar.removeEventListener('touchstart', handleNativeTouchStart);
+        };
+    }, [progressBarRef, videoRef, isDraggingProgressRef, duration, setCurrentTime, getEventPos]);
 
     const progressActions = useMemo(() => ({
         handleProgressClick,