@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

package/dist/src/hooks/use-touch-gestures.js

@@ -0,0 +1,289 @@
+"use client";
+import * as React from "react";
+import { useDeviceInfo, useHapticFeedback } from "@rp/ui/hooks/use-mobile";
+// Default configuration
+const defaultConfig = {
+    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 gesture hook
+export function useTouchGestures(ref, onGesture, config = {}) {
+    const mergedConfig = { ...defaultConfig, ...config };
+    const { isTouchDevice } = useDeviceInfo();
+    const { triggerHaptic } = useHapticFeedback();
+    const gestureState = React.useRef({
+        isTracking: false,
+        touches: [],
+        startTouches: []
+    });
+    // Helper functions
+    const getTouchPoint = (touch) => ({
+        id: touch.identifier,
+        x: touch.clientX,
+        y: touch.clientY,
+        timestamp: Date.now()
+    });
+    const getDistance = (p1, p2) => Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+    const getVelocity = (start, end) => {
+        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, startPoint, currentPoint, additionalData = {}) => ({
+        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) => {
+        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) => {
+        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) => {
+        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;
+                    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, actions) {
+    const handleGesture = React.useCallback((event) => {
+        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 = {
+        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);
+}