@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/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/dist/src/hooks/use-optimized-media.ts

@@ -0,0 +1,263 @@
+"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: number) => {
+		dispatch({ type: MediaActionTypes.SEEK, detail: time })
+	}, [dispatch])
+
+	const setVolume = React.useCallback((volume: number) => {
+		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: number) => {
+		dispatch({ type: MediaActionTypes.SET_PLAYBACK_RATE, detail: rate })
+	}, [dispatch])
+
+	const skipForward = React.useCallback((seconds: number = 10) => {
+		dispatch({ type: MediaActionTypes.SEEK, detail: seconds })
+	}, [dispatch])
+
+	const skipBackward = React.useCallback((seconds: number = 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: number = 100) {
+	const dispatch = useMediaDispatch()
+	const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+
+	const debouncedSeek = React.useCallback((time: number) => {
+		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: number = 50) {
+	const dispatch = useMediaDispatch()
+	const lastUpdateRef = React.useRef<number>(0)
+
+	const throttledSetVolume = React.useCallback((volume: number) => {
+		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: number) {
+	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: React.RefObject<Element>,
+	options?: IntersectionObserverInit
+) {
+	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: string) {
+	const [matches, setMatches] = React.useState(false)
+
+	React.useEffect(() => {
+		const mediaQuery = window.matchMedia(query)
+		setMatches(mediaQuery.matches)
+
+		const handler = (event: MediaQueryListEvent) => {
+			setMatches(event.matches)
+		}
+
+		mediaQuery.addEventListener('change', handler)
+		return () => mediaQuery.removeEventListener('change', handler)
+	}, [query])
+
+	return matches
+}

package/dist/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/dist/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"}