@therealtinhtute/baroiplayer 1.0.3 → 1.0.5

package/src/hooks/use-memory-optimization.ts

@@ -16,10 +16,10 @@ export function useMemoryOptimization(options: {
 		monitorMemory = true
 	} = options
 
-	const cleanupTimeoutRef = useRef<NodeJS.Timeout>()
+	const cleanupTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
 	const observersRef = useRef<Set<MutationObserver>>(new Set())
 	const eventListenersRef = useRef<Map<Element, Array<{ event: string; handler: EventListener }>>>(new Map())
-	const intervalRefs = useRef<Set<NodeJS.Timeout>>(new Set())
+	const intervalRefs = useRef<Set<ReturnType<typeof setInterval>>>(new Set()) // Use proper timer type
 	const animationFrameRefs = useRef<Set<number>>(new Set())
 
 	// Get current memory usage
@@ -67,20 +67,20 @@ export function useMemoryOptimization(options: {
 		}
 
 		checkMemory()
-		const interval = setInterval(checkMemory, cleanupInterval)
-		intervalRefs.current.add(interval)
+		const intervalId: ReturnType<typeof setInterval> = setInterval(checkMemory, cleanupInterval)
+		intervalRefs.current.add(intervalId)
 
 		return () => {
-			clearInterval(interval)
-			intervalRefs.current.delete(interval)
+			clearInterval(intervalId as any)
+			intervalRefs.current.delete(intervalId)
 		}
 	}, [monitorMemory, getMemoryUsage, maxMemoryUsage, enableGC, cleanupInterval])
 
 	// Cleanup function
 	const performCleanup = useCallback(() => {
-		// Clear all timeouts
-		intervalRefs.current.forEach(timeout => {
-			clearTimeout(timeout)
+		// Clear all intervals
+		intervalRefs.current.forEach(intervalId => {
+			clearInterval(intervalId as any)
 		})
 		intervalRefs.current.clear()
 
@@ -141,29 +141,29 @@ export function useMemoryOptimization(options: {
 	}, [])
 
 	// Safe interval management
-	const setInterval = useCallback((callback: () => void, delay: number) => {
+	const safeSetInterval = useCallback((callback: () => void, delay: number) => {
 		const timeoutId = setInterval(callback, delay)
 		intervalRefs.current.add(timeoutId)
 
 		return () => {
-			clearInterval(timeoutId)
+			clearInterval(timeoutId as any)
 			intervalRefs.current.delete(timeoutId)
 		}
 	}, [])
 
 	// Safe timeout management
-	const setTimeout = useCallback((callback: () => void, delay: number) => {
+	const safeSetTimeout = useCallback((callback: () => void, delay: number) => {
 		const timeoutId = setTimeout(callback, delay)
 		intervalRefs.current.add(timeoutId)
 
 		return () => {
-			clearTimeout(timeoutId)
+			clearTimeout(timeoutId as any)
 			intervalRefs.current.delete(timeoutId)
 		}
 	}, [])
 
 	// Safe animation frame management
-	const requestAnimationFrame = useCallback((callback: FrameRequestCallback) => {
+	const safeRequestAnimationFrame = useCallback((callback: FrameRequestCallback) => {
 		const frameId = requestAnimationFrame(callback)
 		animationFrameRefs.current.add(frameId)
 
@@ -200,9 +200,9 @@ export function useMemoryOptimization(options: {
 
 		// Safe API functions
 		addEventListener,
-		setInterval,
-		setTimeout,
-		requestAnimationFrame,
+		setInterval: safeSetInterval,
+		setTimeout: safeSetTimeout,
+		requestAnimationFrame: safeRequestAnimationFrame,
 		addObserver,
 
 		// Utilities
@@ -227,7 +227,7 @@ export function useMediaResourceCleanup(mediaRef: React.RefObject<HTMLVideoEleme
 
 		// Stop media playback
 		if (!media.paused) {
-		_media.pause()
+			media.pause()
 		}
 
 		// Clear source
@@ -284,7 +284,7 @@ export function usePerformanceMonitoring() {
 
 	const frameCountRef = useRef(0)
 	const lastFrameTimeRef = useRef(performance.now())
-	const longTaskObserverRef = useRef<PerformanceObserver>()
+	const longTaskObserverRef = useRef<PerformanceObserver | undefined>(undefined)
 
 	// FPS monitoring
 	useEffect(() => {

package/src/hooks/use-mobile.ts

@@ -0,0 +1,125 @@
+import { useState, useEffect } from 'react';
+
+interface DeviceInfo {
+  isMobile: boolean;
+  isTablet: boolean;
+  isDesktop: boolean;
+  userAgent: string;
+  screenWidth: number;
+  screenHeight: number;
+}
+
+export function useDeviceInfo(): DeviceInfo {
+  const [deviceInfo, setDeviceInfo] = useState<DeviceInfo>(() => {
+    if (typeof window === 'undefined') {
+      return {
+        isMobile: false,
+        isTablet: false,
+        isDesktop: true,
+        userAgent: '',
+        screenWidth: 1920,
+        screenHeight: 1080
+      };
+    }
+
+    const userAgent = navigator.userAgent;
+    const screenWidth = window.innerWidth;
+    const screenHeight = window.innerHeight;
+
+    const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) && screenWidth < 768;
+    const isTablet = /iPad|Android/i.test(userAgent) && screenWidth >= 768 && screenWidth < 1024;
+    const isDesktop = !isMobile && !isTablet;
+
+    return {
+      isMobile,
+      isTablet,
+      isDesktop,
+      userAgent,
+      screenWidth,
+      screenHeight
+    };
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handleResize = () => {
+      const userAgent = navigator.userAgent;
+      const screenWidth = window.innerWidth;
+      const screenHeight = window.innerHeight;
+
+      const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) && screenWidth < 768;
+      const isTablet = /iPad|Android/i.test(userAgent) && screenWidth >= 768 && screenWidth < 1024;
+      const isDesktop = !isMobile && !isTablet;
+
+      setDeviceInfo({
+        isMobile,
+        isTablet,
+        isDesktop,
+        userAgent,
+        screenWidth,
+        screenHeight
+      });
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return deviceInfo;
+}
+
+export function useContainerQuery(): boolean {
+  const [isSmall, setIsSmall] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const checkSize = () => {
+      setIsSmall(window.innerWidth < 640);
+    };
+
+    checkSize();
+    window.addEventListener('resize', checkSize);
+    return () => window.removeEventListener('resize', checkSize);
+  }, []);
+
+  return isSmall;
+}
+
+export function useMobileOptimizations() {
+  const deviceInfo = useDeviceInfo();
+  const [isTouch, setIsTouch] = useState(false);
+
+  useEffect(() => {
+    setIsTouch('ontouchstart' in window || navigator.maxTouchPoints > 0);
+  }, []);
+
+  return {
+    ...deviceInfo,
+    isTouch,
+    preferReducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+    prefersDarkScheme: window.matchMedia('(prefers-color-scheme: dark)').matches
+  };
+}
+
+export function useHapticFeedback() {
+  const deviceInfo = useDeviceInfo();
+
+  const triggerHaptic = (type: 'light' | 'medium' | 'heavy' = 'light') => {
+    if (!deviceInfo.isMobile || !('vibrate' in navigator)) return;
+
+    const patterns = {
+      light: [10],
+      medium: [20],
+      heavy: [50]
+    };
+
+    navigator.vibrate(patterns[type]);
+  };
+
+  return {
+    triggerHaptic,
+    supported: deviceInfo.isMobile && 'vibrate' in navigator
+  };
+}

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

@@ -1,6 +1,6 @@
 "use client";
 import * as React from "react";
-import { useDeviceInfo, useHapticFeedback } from "@rp/ui/hooks/use-mobile";
+import { useDeviceInfo, useHapticFeedback } from "./use-mobile";
 // Default configuration
 const defaultConfig = {
     enabledGestures: ['tap', 'double-tap', 'long-press', 'swipe-left', 'swipe-right', 'swipe-up', 'swipe-down', 'pinch-in', 'pinch-out'],

package/src/index-legacy.ts

@@ -133,10 +133,11 @@ export { useEnhancedMediaPlayer } from "./hooks/use-enhanced-media-player"
 // Performance Monitoring
 export {
 	PerformanceMonitor,
-	PerformanceMetrics,
 	usePerformanceMonitor as usePerformanceMonitoring
 } from "./core/performance"
 
+export type { PerformanceMetrics } from "./core/performance"
+
 // Media Resource Preloader
 export { MediaResourcePreloader } from "./components/ui/media-resource-preloader"