@therealtinhtute/baroiplayer 1.0.8 → 1.1.0

package/src/hooks/use-touch-gestures.ts

@@ -1,417 +1,461 @@
 "use client"
 
+import { useDeviceInfo, useHapticFeedback } from "@rp/ui/hooks/use-mobile"
 import * as React from "react"
-import { useDeviceInfo, useHapticFeedback } from "./use-mobile"
 
 // Gesture types
-export type GestureType = 
-  | 'tap' 
-  | 'double-tap' 
-  | 'long-press' 
-  | 'swipe-left' 
-  | 'swipe-right' 
-  | 'swipe-up' 
-  | 'swipe-down' 
-  | 'pinch-in' 
-  | 'pinch-out'
+export type GestureType =
+	| "tap"
+	| "double-tap"
+	| "long-press"
+	| "swipe-left"
+	| "swipe-right"
+	| "swipe-up"
+	| "swipe-down"
+	| "pinch-in"
+	| "pinch-out"
 
 // Gesture event data
 export interface GestureEvent {
-  type: GestureType
-  startPoint: { x: number; y: number }
-  currentPoint: { x: number; y: number }
-  velocity?: { x: number; y: number }
-  scale?: number
-  rotation?: number
-  distance?: number
-  duration: number
-  preventDefault: () => void
-  target: HTMLElement
+	type: GestureType
+	startPoint: { x: number; y: number }
+	currentPoint: { x: number; y: number }
+	velocity?: { x: number; y: number }
+	scale?: number
+	rotation?: number
+	distance?: number
+	duration: number
+	preventDefault: () => void
+	target: HTMLElement
 }
 
 // Gesture configuration
 export interface GestureConfig {
-  enabledGestures?: GestureType[]
-  tapThreshold?: number // ms
-  doubleTapThreshold?: number // ms
-  longPressThreshold?: number // ms
-  swipeThreshold?: number // px
-  swipeVelocityThreshold?: number // px/ms
-  pinchThreshold?: number // scale difference
-  rotationThreshold?: number // degrees
-  enableHapticFeedback?: boolean
+	enabledGestures?: GestureType[]
+	tapThreshold?: number // ms
+	doubleTapThreshold?: number // ms
+	longPressThreshold?: number // ms
+	swipeThreshold?: number // px
+	swipeVelocityThreshold?: number // px/ms
+	pinchThreshold?: number // scale difference
+	rotationThreshold?: number // degrees
+	enableHapticFeedback?: boolean
 }
 
 // Default configuration
 const defaultConfig: Required<GestureConfig> = {
-  enabledGestures: ['tap', 'double-tap', 'long-press', 'swipe-left', 'swipe-right', 'swipe-up', 'swipe-down', 'pinch-in', 'pinch-out'],
-  tapThreshold: 200,
-  doubleTapThreshold: 300,
-  longPressThreshold: 500,
-  swipeThreshold: 50,
-  swipeVelocityThreshold: 0.5,
-  pinchThreshold: 0.1,
-  rotationThreshold: 15,
-  enableHapticFeedback: true
+	enabledGestures: [
+		"tap",
+		"double-tap",
+		"long-press",
+		"swipe-left",
+		"swipe-right",
+		"swipe-up",
+		"swipe-down",
+		"pinch-in",
+		"pinch-out"
+	],
+	tapThreshold: 200,
+	doubleTapThreshold: 300,
+	longPressThreshold: 500,
+	swipeThreshold: 50,
+	swipeVelocityThreshold: 0.5,
+	pinchThreshold: 0.1,
+	rotationThreshold: 15,
+	enableHapticFeedback: true
 }
 
 // Touch point interface
 interface TouchPoint {
-  id: number
-  x: number
-  y: number
-  timestamp: number
+	id: number
+	x: number
+	y: number
+	timestamp: number
 }
 
 // Gesture state
 interface GestureState {
-  isTracking: boolean
-  touches: TouchPoint[]
-  startTouches: TouchPoint[]
-  lastTap?: { timestamp: number; point: { x: number; y: number } }
-  longPressTimer?: NodeJS.Timeout
-  initialDistance?: number
-  initialScale?: number
-  lastScale?: number
+	isTracking: boolean
+	touches: TouchPoint[]
+	startTouches: TouchPoint[]
+	lastTap?: { timestamp: number; point: { x: number; y: number } }
+	longPressTimer?: NodeJS.Timeout
+	initialDistance?: number
+	initialScale?: number
+	lastScale?: number
 }
 
 // Touch gesture hook
 export function useTouchGestures(
-  ref: React.RefObject<HTMLElement>,
-  onGesture: (event: GestureEvent) => void,
-  config: GestureConfig = {}
+	ref: React.RefObject<HTMLElement>,
+	onGesture: (event: GestureEvent) => void,
+	config: GestureConfig = {}
 ) {
-  const mergedConfig = { ...defaultConfig, ...config }
-  const { isTouchDevice } = useDeviceInfo()
-  const { triggerHaptic } = useHapticFeedback()
-  const gestureState = React.useRef<GestureState>({
-    isTracking: false,
-    touches: [],
-    startTouches: []
-  })
-
-  // Helper functions
-  const getTouchPoint = (touch: Touch): TouchPoint => ({
-    id: touch.identifier,
-    x: touch.clientX,
-    y: touch.clientY,
-    timestamp: Date.now()
-  })
-
-  const getDistance = (p1: TouchPoint, p2: TouchPoint): number => 
-    Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2))
-
-  const getVelocity = (start: TouchPoint, end: TouchPoint): { x: number; y: number } => {
-    const timeDiff = Math.max(end.timestamp - start.timestamp, 1)
-    return {
-      x: (end.x - start.x) / timeDiff,
-      y: (end.y - start.y) / timeDiff
-    }
-  }
-
-  const createGestureEvent = (
-    type: GestureType,
-    startPoint: TouchPoint,
-    currentPoint: TouchPoint,
-    additionalData: Partial<GestureEvent> = {}
-  ): GestureEvent => ({
-    type,
-    startPoint: { x: startPoint.x, y: startPoint.y },
-    currentPoint: { x: currentPoint.x, y: currentPoint.y },
-    duration: currentPoint.timestamp - startPoint.timestamp,
-    target: ref.current!,
-    preventDefault: () => {},
-    ...additionalData
-  })
-
-  // Handle touch start
-  const handleTouchStart = React.useCallback((e: TouchEvent) => {
-    if (!mergedConfig.enabledGestures.length) return
-
-    const touches = Array.from(e.touches).map(getTouchPoint)
-    const state = gestureState.current
-
-    state.isTracking = true
-    state.touches = touches
-    state.startTouches = [...touches]
-
-    // Clear any existing long press timer
-    if (state.longPressTimer) {
-      clearTimeout(state.longPressTimer)
-    }
-
-    // Set up long press detection for single touch
-    if (touches.length === 1 && mergedConfig.enabledGestures.includes('long-press')) {
-      state.longPressTimer = setTimeout(() => {
-        if (state.touches.length === 1 && touches[0]) {
-          const gestureEvent = createGestureEvent('long-press', touches[0], touches[0])
-          onGesture(gestureEvent)
-          
-          if (mergedConfig.enableHapticFeedback) {
-            triggerHaptic('heavy')
-          }
-        }
-      }, mergedConfig.longPressThreshold)
-    }
-
-    // Handle multi-touch gestures
-    if (touches.length === 2 && touches[0] && touches[1]) {
-      state.initialDistance = getDistance(touches[0], touches[1])
-      state.initialScale = 1
-      state.lastScale = 1
-    }
-  }, [mergedConfig, onGesture, triggerHaptic])
-
-  // Handle touch move
-  const handleTouchMove = React.useCallback((e: TouchEvent) => {
-    const state = gestureState.current
-    if (!state.isTracking) return
-
-    const touches = Array.from(e.touches).map(getTouchPoint)
-    state.touches = touches
-
-    // Handle pinch gesture
-    if (touches.length === 2 && state.initialDistance && touches[0] && touches[1]) {
-      const currentDistance = getDistance(touches[0], touches[1])
-      const scale = currentDistance / state.initialDistance
-      const scaleDiff = Math.abs(scale - (state.lastScale || 1))
-
-      if (scaleDiff > mergedConfig.pinchThreshold) {
-        const gestureType = scale > (state.lastScale || 1) ? 'pinch-out' : 'pinch-in'
-        
-        if (mergedConfig.enabledGestures.includes(gestureType)) {
-          const centerPoint = {
-            x: (touches[0].x + touches[1].x) / 2,
-            y: (touches[0].y + touches[1].y) / 2,
-            id: -1,
-            timestamp: Date.now()
-          }
-          
-          const startCenterPoint = {
-            x: ((state.startTouches[0]?.x ?? 0) + (state.startTouches[1]?.x ?? 0)) / 2,
-            y: ((state.startTouches[0]?.y ?? 0) + (state.startTouches[1]?.y ?? 0)) / 2,
-            id: -1,
-            timestamp: state.startTouches[0]?.timestamp ?? Date.now()
-          }
-
-          const gestureEvent = createGestureEvent(gestureType, startCenterPoint, centerPoint, {
-            scale,
-            distance: currentDistance
-          })
-          
-          onGesture(gestureEvent)
-          state.lastScale = scale
-        }
-      }
-    }
-
-    // Clear long press timer on move
-    if (state.longPressTimer && touches.length === 1 && state.startTouches[0] && touches[0]) {
-      const startTouch = state.startTouches[0]
-      const currentTouch = touches[0]
-      const distance = getDistance(startTouch, currentTouch)
-      
-      if (distance > mergedConfig.swipeThreshold) {
-        clearTimeout(state.longPressTimer)
-        state.longPressTimer = undefined
-      }
-    }
-  }, [mergedConfig, onGesture])
-
-  // Handle touch end
-  const handleTouchEnd = React.useCallback((e: TouchEvent) => {
-    const state = gestureState.current
-    if (!state.isTracking) return
-
-    const endTouches = Array.from(e.changedTouches).map(getTouchPoint)
-    const currentTime = Date.now()
-
-    // Clear long press timer
-    if (state.longPressTimer) {
-      clearTimeout(state.longPressTimer)
-      state.longPressTimer = undefined
-    }
-
-    // Handle single touch gestures
-    if (state.startTouches.length === 1 && endTouches.length === 1 && state.startTouches[0] && endTouches[0]) {
-      const startTouch = state.startTouches[0]
-      const endTouch = endTouches[0]
-      const distance = getDistance(startTouch, endTouch)
-      const duration = endTouch.timestamp - startTouch.timestamp
-
-      // Check for swipe gestures
-      if (distance > mergedConfig.swipeThreshold) {
-        const velocity = getVelocity(startTouch, endTouch)
-        const absVelX = Math.abs(velocity.x)
-        const absVelY = Math.abs(velocity.y)
-
-        if (absVelX > mergedConfig.swipeVelocityThreshold || absVelY > mergedConfig.swipeVelocityThreshold) {
-          let gestureType: GestureType
-
-          if (absVelX > absVelY) {
-            gestureType = velocity.x > 0 ? 'swipe-right' : 'swipe-left'
-          } else {
-            gestureType = velocity.y > 0 ? 'swipe-down' : 'swipe-up'
-          }
-
-          if (mergedConfig.enabledGestures.includes(gestureType)) {
-            const gestureEvent = createGestureEvent(gestureType, startTouch, endTouch, {
-              velocity,
-              distance
-            })
-            
-            onGesture(gestureEvent)
-            
-            if (mergedConfig.enableHapticFeedback) {
-              triggerHaptic('light')
-            }
-          }
-        }
-      }
-      // Check for tap gestures
-      else if (duration < mergedConfig.tapThreshold && distance < mergedConfig.swipeThreshold) {
-        // Check for double tap
-        if (state.lastTap && 
-            currentTime - state.lastTap.timestamp < mergedConfig.doubleTapThreshold &&
-            getDistance({...state.lastTap.point, id: -1, timestamp: state.lastTap.timestamp}, endTouch) < mergedConfig.swipeThreshold) {
-          
-          if (mergedConfig.enabledGestures.includes('double-tap')) {
-            const gestureEvent = createGestureEvent('double-tap', startTouch, endTouch)
-            onGesture(gestureEvent)
-            
-            if (mergedConfig.enableHapticFeedback) {
-              triggerHaptic('medium')
-            }
-          }
-          
-          state.lastTap = undefined
-        } else {
-          // Single tap
-          if (mergedConfig.enabledGestures.includes('tap')) {
-            const gestureEvent = createGestureEvent('tap', startTouch, endTouch)
-            onGesture(gestureEvent)
-            
-            if (mergedConfig.enableHapticFeedback) {
-              triggerHaptic('light')
-            }
-          }
-          
-          state.lastTap = {
-            timestamp: currentTime,
-            point: { x: endTouch.x, y: endTouch.y }
-          }
-        }
-      }
-    }
-
-    // Reset gesture state
-    if (e.touches.length === 0) {
-      state.isTracking = false
-      state.touches = []
-      state.startTouches = []
-      state.initialDistance = undefined
-      state.initialScale = undefined
-      state.lastScale = undefined
-    }
-  }, [mergedConfig, onGesture, triggerHaptic])
-
-  // Attach event listeners
-  React.useEffect(() => {
-    const element = ref.current
-    if (!element || !isTouchDevice) return
-
-    element.addEventListener('touchstart', handleTouchStart, { passive: false })
-    element.addEventListener('touchmove', handleTouchMove, { passive: false })
-    element.addEventListener('touchend', handleTouchEnd, { passive: false })
-    element.addEventListener('touchcancel', handleTouchEnd, { passive: false })
-
-    return () => {
-      element.removeEventListener('touchstart', handleTouchStart)
-      element.removeEventListener('touchmove', handleTouchMove)
-      element.removeEventListener('touchend', handleTouchEnd)
-      element.removeEventListener('touchcancel', handleTouchEnd)
-    }
-  }, [handleTouchStart, handleTouchMove, handleTouchEnd, isTouchDevice])
-
-  return {
-    isGestureEnabled: isTouchDevice && mergedConfig.enabledGestures.length > 0
-  }
+	const mergedConfig = { ...defaultConfig, ...config }
+	const { isTouchDevice } = useDeviceInfo()
+	const { triggerHaptic } = useHapticFeedback()
+	const gestureState = React.useRef<GestureState>({
+		isTracking: false,
+		touches: [],
+		startTouches: []
+	})
+
+	// Helper functions
+	const getTouchPoint = (touch: Touch): TouchPoint => ({
+		id: touch.identifier,
+		x: touch.clientX,
+		y: touch.clientY,
+		timestamp: Date.now()
+	})
+
+	const getDistance = (p1: TouchPoint, p2: TouchPoint): number =>
+		Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2))
+
+	const getVelocity = (start: TouchPoint, end: TouchPoint): { x: number; y: number } => {
+		const timeDiff = Math.max(end.timestamp - start.timestamp, 1)
+		return {
+			x: (end.x - start.x) / timeDiff,
+			y: (end.y - start.y) / timeDiff
+		}
+	}
+
+	const createGestureEvent = (
+		type: GestureType,
+		startPoint: TouchPoint,
+		currentPoint: TouchPoint,
+		additionalData: Partial<GestureEvent> = {}
+	): GestureEvent => ({
+		type,
+		startPoint: { x: startPoint.x, y: startPoint.y },
+		currentPoint: { x: currentPoint.x, y: currentPoint.y },
+		duration: currentPoint.timestamp - startPoint.timestamp,
+		target: ref.current!,
+		preventDefault: () => {},
+		...additionalData
+	})
+
+	// Handle touch start
+	const handleTouchStart = React.useCallback(
+		(e: TouchEvent) => {
+			if (!mergedConfig.enabledGestures.length) return
+
+			const touches = Array.from(e.touches).map(getTouchPoint)
+			const state = gestureState.current
+
+			state.isTracking = true
+			state.touches = touches
+			state.startTouches = [...touches]
+
+			// Clear any existing long press timer
+			if (state.longPressTimer) {
+				clearTimeout(state.longPressTimer)
+			}
+
+			// Set up long press detection for single touch
+			if (touches.length === 1 && mergedConfig.enabledGestures.includes("long-press")) {
+				state.longPressTimer = setTimeout(() => {
+					if (state.touches.length === 1 && touches[0]) {
+						const gestureEvent = createGestureEvent("long-press", touches[0], touches[0])
+						onGesture(gestureEvent)
+
+						if (mergedConfig.enableHapticFeedback) {
+							triggerHaptic("heavy")
+						}
+					}
+				}, mergedConfig.longPressThreshold)
+			}
+
+			// Handle multi-touch gestures
+			if (touches.length === 2 && touches[0] && touches[1]) {
+				state.initialDistance = getDistance(touches[0], touches[1])
+				state.initialScale = 1
+				state.lastScale = 1
+			}
+		},
+		[mergedConfig, onGesture, triggerHaptic]
+	)
+
+	// Handle touch move
+	const handleTouchMove = React.useCallback(
+		(e: TouchEvent) => {
+			const state = gestureState.current
+			if (!state.isTracking) return
+
+			const touches = Array.from(e.touches).map(getTouchPoint)
+			state.touches = touches
+
+			// Handle pinch gesture
+			if (touches.length === 2 && state.initialDistance && touches[0] && touches[1]) {
+				const currentDistance = getDistance(touches[0], touches[1])
+				const scale = currentDistance / state.initialDistance
+				const scaleDiff = Math.abs(scale - (state.lastScale || 1))
+
+				if (scaleDiff > mergedConfig.pinchThreshold) {
+					const gestureType = scale > (state.lastScale || 1) ? "pinch-out" : "pinch-in"
+
+					if (mergedConfig.enabledGestures.includes(gestureType)) {
+						const centerPoint = {
+							x: (touches[0].x + touches[1].x) / 2,
+							y: (touches[0].y + touches[1].y) / 2,
+							id: -1,
+							timestamp: Date.now()
+						}
+
+						const startCenterPoint = {
+							x: ((state.startTouches[0]?.x ?? 0) + (state.startTouches[1]?.x ?? 0)) / 2,
+							y: ((state.startTouches[0]?.y ?? 0) + (state.startTouches[1]?.y ?? 0)) / 2,
+							id: -1,
+							timestamp: state.startTouches[0]?.timestamp ?? Date.now()
+						}
+
+						const gestureEvent = createGestureEvent(gestureType, startCenterPoint, centerPoint, {
+							scale,
+							distance: currentDistance
+						})
+
+						onGesture(gestureEvent)
+						state.lastScale = scale
+					}
+				}
+			}
+
+			// Clear long press timer on move
+			if (state.longPressTimer && touches.length === 1 && state.startTouches[0] && touches[0]) {
+				const startTouch = state.startTouches[0]
+				const currentTouch = touches[0]
+				const distance = getDistance(startTouch, currentTouch)
+
+				if (distance > mergedConfig.swipeThreshold) {
+					clearTimeout(state.longPressTimer)
+					state.longPressTimer = undefined
+				}
+			}
+		},
+		[mergedConfig, onGesture]
+	)
+
+	// Handle touch end
+	const handleTouchEnd = React.useCallback(
+		(e: TouchEvent) => {
+			const state = gestureState.current
+			if (!state.isTracking) return
+
+			const endTouches = Array.from(e.changedTouches).map(getTouchPoint)
+			const currentTime = Date.now()
+
+			// Clear long press timer
+			if (state.longPressTimer) {
+				clearTimeout(state.longPressTimer)
+				state.longPressTimer = undefined
+			}
+
+			// Handle single touch gestures
+			if (
+				state.startTouches.length === 1 &&
+				endTouches.length === 1 &&
+				state.startTouches[0] &&
+				endTouches[0]
+			) {
+				const startTouch = state.startTouches[0]
+				const endTouch = endTouches[0]
+				const distance = getDistance(startTouch, endTouch)
+				const duration = endTouch.timestamp - startTouch.timestamp
+
+				// Check for swipe gestures
+				if (distance > mergedConfig.swipeThreshold) {
+					const velocity = getVelocity(startTouch, endTouch)
+					const absVelX = Math.abs(velocity.x)
+					const absVelY = Math.abs(velocity.y)
+
+					if (
+						absVelX > mergedConfig.swipeVelocityThreshold ||
+						absVelY > mergedConfig.swipeVelocityThreshold
+					) {
+						let gestureType: GestureType
+
+						if (absVelX > absVelY) {
+							gestureType = velocity.x > 0 ? "swipe-right" : "swipe-left"
+						} else {
+							gestureType = velocity.y > 0 ? "swipe-down" : "swipe-up"
+						}
+
+						if (mergedConfig.enabledGestures.includes(gestureType)) {
+							const gestureEvent = createGestureEvent(gestureType, startTouch, endTouch, {
+								velocity,
+								distance
+							})
+
+							onGesture(gestureEvent)
+
+							if (mergedConfig.enableHapticFeedback) {
+								triggerHaptic("light")
+							}
+						}
+					}
+				}
+				// Check for tap gestures
+				else if (duration < mergedConfig.tapThreshold && distance < mergedConfig.swipeThreshold) {
+					// Check for double tap
+					if (
+						state.lastTap &&
+						currentTime - state.lastTap.timestamp < mergedConfig.doubleTapThreshold &&
+						getDistance(
+							{ ...state.lastTap.point, id: -1, timestamp: state.lastTap.timestamp },
+							endTouch
+						) < mergedConfig.swipeThreshold
+					) {
+						if (mergedConfig.enabledGestures.includes("double-tap")) {
+							const gestureEvent = createGestureEvent("double-tap", startTouch, endTouch)
+							onGesture(gestureEvent)
+
+							if (mergedConfig.enableHapticFeedback) {
+								triggerHaptic("medium")
+							}
+						}
+
+						state.lastTap = undefined
+					} else {
+						// Single tap
+						if (mergedConfig.enabledGestures.includes("tap")) {
+							const gestureEvent = createGestureEvent("tap", startTouch, endTouch)
+							onGesture(gestureEvent)
+
+							if (mergedConfig.enableHapticFeedback) {
+								triggerHaptic("light")
+							}
+						}
+
+						state.lastTap = {
+							timestamp: currentTime,
+							point: { x: endTouch.x, y: endTouch.y }
+						}
+					}
+				}
+			}
+
+			// Reset gesture state
+			if (e.touches.length === 0) {
+				state.isTracking = false
+				state.touches = []
+				state.startTouches = []
+				state.initialDistance = undefined
+				state.initialScale = undefined
+				state.lastScale = undefined
+			}
+		},
+		[mergedConfig, onGesture, triggerHaptic]
+	)
+
+	// Attach event listeners
+	React.useEffect(() => {
+		const element = ref.current
+		if (!element || !isTouchDevice) return
+
+		element.addEventListener("touchstart", handleTouchStart, { passive: false })
+		element.addEventListener("touchmove", handleTouchMove, { passive: false })
+		element.addEventListener("touchend", handleTouchEnd, { passive: false })
+		element.addEventListener("touchcancel", handleTouchEnd, { passive: false })
+
+		return () => {
+			element.removeEventListener("touchstart", handleTouchStart)
+			element.removeEventListener("touchmove", handleTouchMove)
+			element.removeEventListener("touchend", handleTouchEnd)
+			element.removeEventListener("touchcancel", handleTouchEnd)
+		}
+	}, [handleTouchStart, handleTouchMove, handleTouchEnd, isTouchDevice])
+
+	return {
+		isGestureEnabled: isTouchDevice && mergedConfig.enabledGestures.length > 0
+	}
 }
 
 // Media player specific gesture hook with predefined actions
 export function useMediaGestures(
-  ref: React.RefObject<HTMLElement>,
-  actions: {
-    onPlayPause?: () => void
-    onSeek?: (direction: 'forward' | 'backward', amount: number) => void
-    onVolumeChange?: (direction: 'up' | 'down', amount: number) => void
-    onToggleFullscreen?: () => void
-    onZoom?: (scale: number) => void
-  }
+	ref: React.RefObject<HTMLElement>,
+	actions: {
+		onPlayPause?: () => void
+		onSeek?: (direction: "forward" | "backward", amount: number) => void
+		onVolumeChange?: (direction: "up" | "down", amount: number) => void
+		onToggleFullscreen?: () => void
+		onZoom?: (scale: number) => void
+	}
 ) {
-  const handleGesture = React.useCallback((event: GestureEvent) => {
-    const { type, velocity, distance, scale } = event
-
-    switch (type) {
-      case 'double-tap':
-        // Double tap to play/pause
-        actions.onPlayPause?.()
-        break
-
-      case 'swipe-left':
-        // Swipe left to seek backward
-        const backwardAmount = Math.min((distance || 0) / 10, 30) // Max 30 seconds
-        actions.onSeek?.('backward', backwardAmount)
-        break
-
-      case 'swipe-right':
-        // Swipe right to seek forward
-        const forwardAmount = Math.min((distance || 0) / 10, 30) // Max 30 seconds
-        actions.onSeek?.('forward', forwardAmount)
-        break
-
-      case 'swipe-up':
-        // Swipe up on right side for volume up
-        if (event.startPoint.x > (ref.current?.clientWidth || 0) / 2) {
-          const volumeAmount = Math.min((distance || 0) / 100, 0.2) // Max 20%
-          actions.onVolumeChange?.('up', volumeAmount)
-        }
-        break
-
-      case 'swipe-down':
-        // Swipe down on right side for volume down
-        if (event.startPoint.x > (ref.current?.clientWidth || 0) / 2) {
-          const volumeAmount = Math.min((distance || 0) / 100, 0.2) // Max 20%
-          actions.onVolumeChange?.('down', volumeAmount)
-        }
-        break
-
-      case 'pinch-out':
-        // Pinch out to zoom in (for video zoom functionality)
-        actions.onZoom?.(scale || 1)
-        break
-
-      case 'pinch-in':
-        // Pinch in to zoom out
-        actions.onZoom?.(scale || 1)
-        break
-
-      case 'long-press':
-        // Long press for fullscreen toggle
-        actions.onToggleFullscreen?.()
-        break
-
-      default:
-        break
-    }
-  }, [actions, ref])
-
-  const gestureConfig: GestureConfig = {
-    enabledGestures: ['tap', 'double-tap', 'long-press', 'swipe-left', 'swipe-right', 'swipe-up', 'swipe-down', 'pinch-in', 'pinch-out'],
-    enableHapticFeedback: true,
-    swipeThreshold: 30,
-    swipeVelocityThreshold: 0.3
-  }
-
-  return useTouchGestures(ref, handleGesture, gestureConfig)
-}
+	const handleGesture = React.useCallback(
+		(event: GestureEvent) => {
+			const { type, velocity, distance, scale } = event
+
+			switch (type) {
+				case "double-tap":
+					// Double tap to play/pause
+					actions.onPlayPause?.()
+					break
+
+				case "swipe-left":
+					// Swipe left to seek backward
+					const backwardAmount = Math.min((distance || 0) / 10, 30) // Max 30 seconds
+					actions.onSeek?.("backward", backwardAmount)
+					break
+
+				case "swipe-right":
+					// Swipe right to seek forward
+					const forwardAmount = Math.min((distance || 0) / 10, 30) // Max 30 seconds
+					actions.onSeek?.("forward", forwardAmount)
+					break
+
+				case "swipe-up":
+					// Swipe up on right side for volume up
+					if (event.startPoint.x > (ref.current?.clientWidth || 0) / 2) {
+						const volumeAmount = Math.min((distance || 0) / 100, 0.2) // Max 20%
+						actions.onVolumeChange?.("up", volumeAmount)
+					}
+					break
+
+				case "swipe-down":
+					// Swipe down on right side for volume down
+					if (event.startPoint.x > (ref.current?.clientWidth || 0) / 2) {
+						const volumeAmount = Math.min((distance || 0) / 100, 0.2) // Max 20%
+						actions.onVolumeChange?.("down", volumeAmount)
+					}
+					break
+
+				case "pinch-out":
+					// Pinch out to zoom in (for video zoom functionality)
+					actions.onZoom?.(scale || 1)
+					break
+
+				case "pinch-in":
+					// Pinch in to zoom out
+					actions.onZoom?.(scale || 1)
+					break
+
+				case "long-press":
+					// Long press for fullscreen toggle
+					actions.onToggleFullscreen?.()
+					break
+
+				default:
+					break
+			}
+		},
+		[actions, ref]
+	)
+
+	const gestureConfig: GestureConfig = {
+		enabledGestures: [
+			"tap",
+			"double-tap",
+			"long-press",
+			"swipe-left",
+			"swipe-right",
+			"swipe-up",
+			"swipe-down",
+			"pinch-in",
+			"pinch-out"
+		],
+		enableHapticFeedback: true,
+		swipeThreshold: 30,
+		swipeVelocityThreshold: 0.3
+	}
+
+	return useTouchGestures(ref, handleGesture, gestureConfig)
+}