@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

package/src/hooks/use-optimized-media.js

@@ -0,0 +1,211 @@
+"use client";
+import React from "react";
+import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../context/media-context";
+// Optimized hook for media state with memoized selectors
+export function useOptimizedMediaState() {
+    // Memoized selectors to prevent unnecessary re-renders
+    const isPlaying = useMediaSelector(React.useCallback(state => state.isPlaying, []));
+    const currentTime = useMediaSelector(React.useCallback(state => state.currentTime, []));
+    const duration = useMediaSelector(React.useCallback(state => state.duration, []));
+    const volume = useMediaSelector(React.useCallback(state => state.volume, []));
+    const isMuted = useMediaSelector(React.useCallback(state => state.isMuted, []));
+    const isLoading = useMediaSelector(React.useCallback(state => state.isLoading, []));
+    const error = useMediaSelector(React.useCallback(state => state.error, []));
+    const isFullscreen = useMediaSelector(React.useCallback(state => state.isFullscreen, []));
+    const isPictureInPicture = useMediaSelector(React.useCallback(state => state.isPictureInPicture, []));
+    const buffered = useMediaSelector(React.useCallback(state => state.buffered, []));
+    const playbackRate = useMediaSelector(React.useCallback(state => state.playbackRate, []));
+    // Derived state with memoization
+    const progress = React.useMemo(() => {
+        return duration > 0 ? (currentTime / duration) * 100 : 0;
+    }, [currentTime, duration]);
+    const remainingTime = React.useMemo(() => {
+        return Math.max(0, duration - currentTime);
+    }, [duration, currentTime]);
+    const bufferedRanges = React.useMemo(() => {
+        if (!buffered || duration === 0)
+            return [];
+        const ranges = [];
+        for (let i = 0; i < buffered.length; i++) {
+            ranges.push({
+                start: (buffered.start(i) / duration) * 100,
+                end: (buffered.end(i) / duration) * 100
+            });
+        }
+        return ranges;
+    }, [buffered, duration]);
+    const canPlay = React.useMemo(() => {
+        return !isLoading && !error && duration > 0;
+    }, [isLoading, error, duration]);
+    return {
+        // Basic state
+        isPlaying,
+        currentTime,
+        duration,
+        volume,
+        isMuted,
+        isLoading,
+        error,
+        isFullscreen,
+        isPictureInPicture,
+        buffered,
+        playbackRate,
+        // Derived state
+        progress,
+        remainingTime,
+        bufferedRanges,
+        canPlay
+    };
+}
+// Optimized hook for media controls with memoized callbacks
+export function useOptimizedMediaControls() {
+    const dispatch = useMediaDispatch();
+    // Memoized control functions
+    const play = React.useCallback(() => {
+        dispatch({ type: MediaActionTypes.PLAY });
+    }, [dispatch]);
+    const pause = React.useCallback(() => {
+        dispatch({ type: MediaActionTypes.PAUSE });
+    }, [dispatch]);
+    const toggle = React.useCallback(() => {
+        dispatch({ type: MediaActionTypes.PLAY });
+    }, [dispatch]);
+    const seek = React.useCallback((time) => {
+        dispatch({ type: MediaActionTypes.SEEK, detail: time });
+    }, [dispatch]);
+    const setVolume = React.useCallback((volume) => {
+        dispatch({ type: MediaActionTypes.SET_VOLUME, detail: volume });
+    }, [dispatch]);
+    const mute = React.useCallback(() => {
+        dispatch({ type: MediaActionTypes.MUTE });
+    }, [dispatch]);
+    const unmute = React.useCallback(() => {
+        dispatch({ type: MediaActionTypes.UNMUTE });
+    }, [dispatch]);
+    const toggleMute = React.useCallback(() => {
+        dispatch({ type: MediaActionTypes.TOGGLE_MUTE });
+    }, [dispatch]);
+    const enterFullscreen = React.useCallback(() => {
+        dispatch({ type: MediaActionTypes.ENTER_FULLSCREEN });
+    }, [dispatch]);
+    const exitFullscreen = React.useCallback(() => {
+        dispatch({ type: MediaActionTypes.EXIT_FULLSCREEN });
+    }, [dispatch]);
+    const toggleFullscreen = React.useCallback(() => {
+        dispatch({ type: MediaActionTypes.ENTER_FULLSCREEN });
+    }, [dispatch]);
+    const enterPictureInPicture = React.useCallback(() => {
+        dispatch({ type: MediaActionTypes.ENTER_PIP });
+    }, [dispatch]);
+    const exitPictureInPicture = React.useCallback(() => {
+        dispatch({ type: MediaActionTypes.EXIT_PIP });
+    }, [dispatch]);
+    const togglePictureInPicture = React.useCallback(() => {
+        dispatch({ type: MediaActionTypes.ENTER_PIP });
+    }, [dispatch]);
+    const setPlaybackRate = React.useCallback((rate) => {
+        dispatch({ type: MediaActionTypes.SET_PLAYBACK_RATE, detail: rate });
+    }, [dispatch]);
+    const skipForward = React.useCallback((seconds = 10) => {
+        dispatch({ type: MediaActionTypes.SEEK, detail: seconds });
+    }, [dispatch]);
+    const skipBackward = React.useCallback((seconds = 10) => {
+        dispatch({ type: MediaActionTypes.SEEK, detail: -seconds });
+    }, [dispatch]);
+    return {
+        play,
+        pause,
+        toggle,
+        seek,
+        setVolume,
+        mute,
+        unmute,
+        toggleMute,
+        enterFullscreen,
+        exitFullscreen,
+        toggleFullscreen,
+        enterPictureInPicture,
+        exitPictureInPicture,
+        togglePictureInPicture,
+        setPlaybackRate,
+        skipForward,
+        skipBackward
+    };
+}
+// Hook for debounced seek operations
+export function useDebouncedSeek(delay = 100) {
+    const dispatch = useMediaDispatch();
+    const timeoutRef = React.useRef(null);
+    const debouncedSeek = React.useCallback((time) => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+            dispatch({ type: MediaActionTypes.SEEK, detail: time });
+        }, delay);
+    }, [dispatch, delay]);
+    React.useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    return debouncedSeek;
+}
+// Hook for throttled volume changes
+export function useThrottledVolume(delay = 50) {
+    const dispatch = useMediaDispatch();
+    const lastUpdateRef = React.useRef(0);
+    const throttledSetVolume = React.useCallback((volume) => {
+        const now = Date.now();
+        if (now - lastUpdateRef.current >= delay) {
+            dispatch({ type: MediaActionTypes.SET_VOLUME, detail: volume });
+            lastUpdateRef.current = now;
+        }
+    }, [dispatch, delay]);
+    return throttledSetVolume;
+}
+// Hook for optimized time formatting
+export function useFormattedTime(time) {
+    return React.useMemo(() => {
+        const hours = Math.floor(time / 3600);
+        const minutes = Math.floor((time % 3600) / 60);
+        const seconds = Math.floor(time % 60);
+        if (hours > 0) {
+            return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+        }
+        return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+    }, [time]);
+}
+// Hook for intersection observer (for lazy loading)
+export function useIntersectionObserver(elementRef, options) {
+    const [isIntersecting, setIsIntersecting] = React.useState(false);
+    React.useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        const observer = new IntersectionObserver(([entry]) => {
+            setIsIntersecting(entry?.isIntersecting ?? false);
+        }, options);
+        observer.observe(element);
+        return () => {
+            observer.unobserve(element);
+        };
+    }, [elementRef, options]);
+    return isIntersecting;
+}
+// Hook for media queries (responsive behavior)
+export function useMediaQuery(query) {
+    const [matches, setMatches] = React.useState(false);
+    React.useEffect(() => {
+        const mediaQuery = window.matchMedia(query);
+        setMatches(mediaQuery.matches);
+        const handler = (event) => {
+            setMatches(event.matches);
+        };
+        mediaQuery.addEventListener('change', handler);
+        return () => mediaQuery.removeEventListener('change', handler);
+    }, [query]);
+    return matches;
+}

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

@@ -0,0 +1,47 @@
+import * as React from "react";
+export type GestureType = 'tap' | 'double-tap' | 'long-press' | 'swipe-left' | 'swipe-right' | 'swipe-up' | 'swipe-down' | 'pinch-in' | 'pinch-out';
+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;
+}
+export interface GestureConfig {
+    enabledGestures?: GestureType[];
+    tapThreshold?: number;
+    doubleTapThreshold?: number;
+    longPressThreshold?: number;
+    swipeThreshold?: number;
+    swipeVelocityThreshold?: number;
+    pinchThreshold?: number;
+    rotationThreshold?: number;
+    enableHapticFeedback?: boolean;
+}
+export declare function useTouchGestures(ref: React.RefObject<HTMLElement>, onGesture: (event: GestureEvent) => void, config?: GestureConfig): {
+    isGestureEnabled: boolean;
+};
+export declare 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;
+}): {
+    isGestureEnabled: boolean;
+};
+//# sourceMappingURL=use-touch-gestures.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-touch-gestures.d.ts","sourceRoot":"","sources":["use-touch-gestures.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,WAAW,GACnB,KAAK,GACL,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,aAAa,GACb,UAAU,GACV,YAAY,GACZ,UAAU,GACV,WAAW,CAAA;AAGf,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAA;IACjB,UAAU,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACpC,YAAY,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACtC,QAAQ,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,MAAM,EAAE,WAAW,CAAA;CACpB;AAGD,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,WAAW,EAAE,CAAA;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B;AAoCD,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EACjC,SAAS,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,EACxC,MAAM,GAAE,aAAkB;;EAiQ3B;AAGD,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EACjC,OAAO,EAAE;IACP,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACpE,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACnE,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC/B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC;;EAmEF"}

package/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);
+}

package/src/hooks/useEnhancedSubtitles.d.ts

@@ -0,0 +1,39 @@
+interface SubtitleCue {
+    start: number;
+    end: number;
+    text: string;
+}
+export interface SubtitleTrack {
+    id: string;
+    label: string;
+    language?: string;
+    src?: string;
+}
+export interface UseEnhancedSubtitlesOptions {
+    subtitleSrc?: string;
+    subtitleTracks?: SubtitleTrack[];
+    defaultFontSize?: "small" | "medium" | "large";
+    onLoadError?: (error: Error) => void;
+}
+export declare function useEnhancedSubtitles({ subtitleSrc, subtitleTracks, defaultFontSize, onLoadError }?: UseEnhancedSubtitlesOptions): {
+    subtitlesEnabled: boolean;
+    currentSubtitle: string;
+    subtitleCues: SubtitleCue[];
+    currentTrackId: string | null;
+    fontSize: "small" | "medium" | "large";
+    loadError: Error | null;
+    isLoading: boolean;
+    hasSubtitles: boolean;
+    toggleSubtitles: () => void;
+    selectSubtitleTrack: (trackId: string | null) => void;
+    changeSubtitleFontSize: (size: "small" | "medium" | "large") => void;
+    setCurrentSubtitle: import("react").Dispatch<import("react").SetStateAction<string>>;
+    getCurrentSubtitle: (currentTime: number) => string;
+    getSubtitleStyles: {
+        fontSize: string;
+        className: string;
+    };
+    availableTracks: SubtitleTrack[];
+};
+export {};
+//# sourceMappingURL=useEnhancedSubtitles.d.ts.map

package/src/hooks/useEnhancedSubtitles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEnhancedSubtitles.d.ts","sourceRoot":"","sources":["useEnhancedSubtitles.ts"],"names":[],"mappings":"AAEA,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,2BAA2B;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,aAAa,EAAE,CAAA;IAChC,eAAe,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC9C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACrC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,WAAW,EACX,cAAmB,EACnB,eAA0B,EAC1B,WAAW,EACZ,GAAE,2BAAgC;;;;;;;;;;mCAmKK,MAAM,GAAG,IAAI;mCAkBb,OAAO,GAAG,QAAQ,GAAG,OAAO;;sCArDzB,MAAM;;;;;;EAsGhD"}