@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

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

@@ -1,358 +0,0 @@
-"use client"
-
-import React, { useEffect, useRef, useCallback, useMemo } from "react"
-
-// Memory optimization hook for media players
-export function useMemoryOptimization(options: {
-	maxMemoryUsage?: number // in MB
-	cleanupInterval?: number // in ms
-	enableGC?: boolean
-	monitorMemory?: boolean
-} = {}) {
-	const {
-		maxMemoryUsage = 100, // 100MB default
-		cleanupInterval = 30000, // 30 seconds default
-		enableGC = true,
-		monitorMemory = true
-	} = options
-
-	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<ReturnType<typeof setInterval>>>(new Set()) // Use proper timer type
-	const animationFrameRefs = useRef<Set<number>>(new Set())
-
-	// Get current memory usage
-	const getMemoryUsage = useCallback(() => {
-		if (typeof window === 'undefined' || !('memory' in performance)) {
-			return { used: 0, total: 0, limit: 0 }
-		}
-
-		const memory = (performance as any).memory
-		return {
-			used: memory.usedJSHeapSize,
-			total: memory.totalJSHeapSize,
-			limit: memory.jsHeapSizeLimit
-		}
-	}, [])
-
-	// Memory monitoring state
-	const [memoryStats, setMemoryStats] = React.useState({
-		used: 0,
-		total: 0,
-		limit: 0,
-		usage: 0,
-		isHighUsage: false
-	})
-
-	// Memory monitoring
-	useEffect(() => {
-		if (!monitorMemory) return
-
-		const checkMemory = () => {
-			const memory = getMemoryUsage()
-			const usage = (memory.used / 1024 / 1024) // Convert to MB
-			const isHighUsage = usage > maxMemoryUsage
-
-			setMemoryStats({
-				...memory,
-				usage,
-				isHighUsage
-			})
-
-			// Trigger cleanup if memory usage is high
-			if (isHighUsage && enableGC) {
-				performCleanup()
-			}
-		}
-
-		checkMemory()
-		const intervalId: ReturnType<typeof setInterval> = setInterval(checkMemory, cleanupInterval)
-		intervalRefs.current.add(intervalId)
-
-		return () => {
-			clearInterval(intervalId as any)
-			intervalRefs.current.delete(intervalId)
-		}
-	}, [monitorMemory, getMemoryUsage, maxMemoryUsage, enableGC, cleanupInterval])
-
-	// Cleanup function
-	const performCleanup = useCallback(() => {
-		// Clear all intervals
-		intervalRefs.current.forEach(intervalId => {
-			clearInterval(intervalId as any)
-		})
-		intervalRefs.current.clear()
-
-		// Cancel all animation frames
-		animationFrameRefs.current.forEach(frameId => {
-			cancelAnimationFrame(frameId)
-		})
-		animationFrameRefs.current.clear()
-
-		// Disconnect all observers
-		observersRef.current.forEach(observer => {
-			observer.disconnect()
-		})
-		observersRef.current.clear()
-
-		// Remove all event listeners
-		eventListenersRef.current.forEach((listeners, element) => {
-			listeners.forEach(({ event, handler }) => {
-				element.removeEventListener(event, handler)
-			})
-		})
-		eventListenersRef.current.clear()
-
-		// Trigger garbage collection if available
-		if (enableGC && 'gc' in window) {
-			(window as any).gc()
-		}
-	}, [enableGC])
-
-	// Safe event listener management
-	const addEventListener = useCallback((
-		element: Element,
-		event: string,
-		handler: EventListener,
-		options?: AddEventListenerOptions
-	) => {
-		element.addEventListener(event, handler, options)
-
-		if (!eventListenersRef.current.has(element)) {
-			eventListenersRef.current.set(element, [])
-		}
-		eventListenersRef.current.get(element)!.push({ event, handler })
-
-		// Return cleanup function
-		return () => {
-			element.removeEventListener(event, handler)
-			const listeners = eventListenersRef.current.get(element)
-			if (listeners) {
-				const index = listeners.findIndex(l => l.event === event && l.handler === handler)
-				if (index > -1) {
-					listeners.splice(index, 1)
-				}
-				if (listeners.length === 0) {
-					eventListenersRef.current.delete(element)
-				}
-			}
-		}
-	}, [])
-
-	// Safe interval management
-	const safeSetInterval = useCallback((callback: () => void, delay: number) => {
-		const timeoutId = setInterval(callback, delay)
-		intervalRefs.current.add(timeoutId)
-
-		return () => {
-			clearInterval(timeoutId as any)
-			intervalRefs.current.delete(timeoutId)
-		}
-	}, [])
-
-	// Safe timeout management
-	const safeSetTimeout = useCallback((callback: () => void, delay: number) => {
-		const timeoutId = setTimeout(callback, delay)
-		intervalRefs.current.add(timeoutId)
-
-		return () => {
-			clearTimeout(timeoutId as any)
-			intervalRefs.current.delete(timeoutId)
-		}
-	}, [])
-
-	// Safe animation frame management
-	const safeRequestAnimationFrame = useCallback((callback: FrameRequestCallback) => {
-		const frameId = requestAnimationFrame(callback)
-		animationFrameRefs.current.add(frameId)
-
-		return () => {
-			cancelAnimationFrame(frameId)
-			animationFrameRefs.current.delete(frameId)
-		}
-	}, [])
-
-	// Safe observer management
-	const addObserver = useCallback((observer: MutationObserver) => {
-		observersRef.current.add(observer)
-
-		return () => {
-			observer.disconnect()
-			observersRef.current.delete(observer)
-		}
-	}, [])
-
-	// Cleanup on unmount
-	useEffect(() => {
-		return () => {
-			performCleanup()
-		}
-	}, [performCleanup])
-
-	return {
-		// Memory stats
-		memoryStats,
-		getMemoryUsage,
-
-		// Cleanup functions
-		performCleanup,
-
-		// Safe API functions
-		addEventListener,
-		setInterval: safeSetInterval,
-		setTimeout: safeSetTimeout,
-		requestAnimationFrame: safeRequestAnimationFrame,
-		addObserver,
-
-		// Utilities
-		formatBytes: (bytes: number) => {
-			if (bytes === 0) return '0 Bytes'
-			const k = 1024
-			const sizes = ['Bytes', 'KB', 'MB', 'GB']
-			const i = Math.floor(Math.log(bytes) / Math.log(k))
-			return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
-		}
-	}
-}
-
-// Resource cleanup hook for media elements
-export function useMediaResourceCleanup(mediaRef: React.RefObject<HTMLVideoElement | HTMLAudioElement>) {
-	const { addEventListener, performCleanup } = useMemoryOptimization()
-
-	// Track resource cleanup
-	const cleanupResources = useCallback(() => {
-		const media = mediaRef.current
-		if (!media) return
-
-		// Stop media playback
-		if (!media.paused) {
-			media.pause()
-		}
-
-		// Clear source
-		if (media.src) {
-			media.src = ''
-			media.load()
-		}
-
-		// Remove source elements
-		while (media.firstChild) {
-			media.removeChild(media.firstChild)
-		}
-
-		// Clear any pending seeks
-		media.currentTime = 0
-
-		// Clear buffered data
-		if ('clearBuffered' in media) {
-			(media as any).clearBuffered()
-		}
-	}, [mediaRef])
-
-	// Enhanced event listener registration
-	const registerMediaEventListener = useCallback((
-		event: string,
-		handler: EventListener,
-		options?: AddEventListenerOptions
-	) => {
-		const media = mediaRef.current
-		if (!media) return () => {}
-
-		return addEventListener(media, event, handler, options)
-	}, [mediaRef, addEventListener])
-
-	// Cleanup on unmount
-	useEffect(() => {
-		return cleanupResources
-	}, [cleanupResources])
-
-	return {
-		cleanupResources,
-		registerMediaEventListener
-	}
-}
-
-// Performance monitoring hook
-export function usePerformanceMonitoring() {
-	const [metrics, setMetrics] = React.useState({
-		fps: 0,
-		frameDrops: 0,
-		longTasks: 0,
-		totalLongTaskDuration: 0
-	})
-
-	const frameCountRef = useRef(0)
-	const lastFrameTimeRef = useRef(performance.now())
-	const longTaskObserverRef = useRef<PerformanceObserver | undefined>(undefined)
-
-	// FPS monitoring
-	useEffect(() => {
-		let rafId: number
-
-		const measureFrame = () => {
-			frameCountRef.current++
-			const now = performance.now()
-
-			// Calculate FPS every second
-			if (now - lastFrameTimeRef.current >= 1000) {
-				const fps = Math.round((frameCountRef.current * 1000) / (now - lastFrameTimeRef.current))
-				const expectedFrames = Math.round((now - lastFrameTimeRef.current) / 16.67) // 60fps
-				const frameDrops = Math.max(0, expectedFrames - frameCountRef.current)
-
-				setMetrics(prev => ({
-					...prev,
-					fps,
-					frameDrops: prev.frameDrops + frameDrops
-				}))
-
-				frameCountRef.current = 0
-				lastFrameTimeRef.current = now
-			}
-
-			rafId = requestAnimationFrame(measureFrame)
-		}
-
-		rafId = requestAnimationFrame(measureFrame)
-
-		return () => {
-			cancelAnimationFrame(rafId)
-		}
-	}, [])
-
-	// Long task monitoring
-	useEffect(() => {
-		if (!('PerformanceObserver' in window)) return
-
-		try {
-			const observer = new PerformanceObserver((list) => {
-				for (const entry of list.getEntries()) {
-					if (entry.duration > 50) { // Long task threshold
-						setMetrics(prev => ({
-							...prev,
-							longTasks: prev.longTasks + 1,
-							totalLongTaskDuration: prev.totalLongTaskDuration + entry.duration
-						}))
-					}
-				}
-			})
-
-			observer.observe({ entryTypes: ['longtask'] })
-			longTaskObserverRef.current = observer
-
-			return () => {
-				observer.disconnect()
-			}
-		} catch (error) {
-			console.warn('Long task monitoring not supported:', error)
-		}
-	}, [])
-
-	return {
-		...metrics,
-		averageLongTaskDuration: metrics.longTasks > 0
-			? metrics.totalLongTaskDuration / metrics.longTasks
-			: 0,
-		isPerformanceGood: metrics.fps >= 50 && metrics.frameDrops < 5
-	}
-}

package/dist/src/hooks/use-mobile.ts

@@ -1,125 +0,0 @@
-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/dist/src/hooks/use-optimistic-controls.d.ts

@@ -1,22 +0,0 @@
-export interface MediaState {
-    isPlaying: boolean;
-    volume: number;
-    currentTime: number;
-    playbackRate: number;
-}
-export declare function useOptimisticMediaState(initialState: MediaState, mediaElement?: HTMLMediaElement | null): {
-    state: {
-        isPlaying: boolean;
-        volume: number;
-        currentTime: number;
-        playbackRate: number;
-    };
-    actions: {
-        togglePlay: () => Promise<void>;
-        setVolume: (volume: number) => Promise<void>;
-        seek: (time: number) => Promise<void>;
-        setPlaybackRate: (rate: number) => Promise<void>;
-    };
-    isPending: boolean;
-};
-//# sourceMappingURL=use-optimistic-controls.d.ts.map

package/dist/src/hooks/use-optimistic-controls.ts

@@ -1,92 +0,0 @@
-import { useOptimistic, useTransition } from 'react'
-
-export interface MediaState {
-  isPlaying: boolean
-  volume: number
-  currentTime: number
-  playbackRate: number
-}
-
-export function useOptimisticMediaState(initialState: MediaState, mediaElement?: HTMLMediaElement | null) {
-  const [isPending, startTransition] = useTransition()
-  
-  // Optimistic state for each property
-  const [optimisticPlaying, setOptimisticPlaying] = useOptimistic(
-    initialState.isPlaying,
-    (_, value: boolean) => value
-  )
-  
-  const [optimisticVolume, setOptimisticVolume] = useOptimistic(
-    initialState.volume,
-    (_, value: number) => value
-  )
-  
-  const [optimisticTime, setOptimisticTime] = useOptimistic(
-    initialState.currentTime,
-    (_, value: number) => value
-  )
-  
-  const [optimisticRate, setOptimisticRate] = useOptimistic(
-    initialState.playbackRate,
-    (_, value: number) => value
-  )
-  
-  // Wrapped actions with optimistic updates
-  const actions = {
-    togglePlay: async () => {
-      const newState = !optimisticPlaying
-      setOptimisticPlaying(newState)
-      
-      startTransition(async () => {
-        if (mediaElement) {
-          if (newState) {
-            await mediaElement.play()
-          } else {
-            mediaElement.pause()
-          }
-        }
-      })
-    },
-    
-    setVolume: async (volume: number) => {
-      setOptimisticVolume(volume)
-      
-      startTransition(async () => {
-        if (mediaElement) {
-          mediaElement.volume = volume
-        }
-      })
-    },
-    
-    seek: async (time: number) => {
-      setOptimisticTime(time)
-      
-      startTransition(async () => {
-        if (mediaElement) {
-          mediaElement.currentTime = time
-        }
-      })
-    },
-    
-    setPlaybackRate: async (rate: number) => {
-      setOptimisticRate(rate)
-      
-      startTransition(async () => {
-        if (mediaElement) {
-          mediaElement.playbackRate = rate
-        }
-      })
-    }
-  }
-  
-  return {
-    state: {
-      isPlaying: optimisticPlaying,
-      volume: optimisticVolume,
-      currentTime: optimisticTime,
-      playbackRate: optimisticRate
-    },
-    actions,
-    isPending
-  }
-}

package/dist/src/hooks/use-optimized-media.d.ts

@@ -1,46 +0,0 @@
-import React from "react";
-export declare function useOptimizedMediaState(): {
-    isPlaying: boolean;
-    currentTime: number;
-    duration: number;
-    volume: number;
-    isMuted: boolean;
-    isLoading: boolean;
-    error: string | null;
-    isFullscreen: boolean;
-    isPictureInPicture: boolean;
-    buffered: TimeRanges | null;
-    playbackRate: number;
-    progress: number;
-    remainingTime: number;
-    bufferedRanges: {
-        start: number;
-        end: number;
-    }[];
-    canPlay: boolean;
-};
-export declare function useOptimizedMediaControls(): {
-    play: () => void;
-    pause: () => void;
-    toggle: () => void;
-    seek: (time: number) => void;
-    setVolume: (volume: number) => void;
-    mute: () => void;
-    unmute: () => void;
-    toggleMute: () => void;
-    enterFullscreen: () => void;
-    exitFullscreen: () => void;
-    toggleFullscreen: () => void;
-    enterPictureInPicture: () => void;
-    exitPictureInPicture: () => void;
-    togglePictureInPicture: () => void;
-    setPlaybackRate: (rate: number) => void;
-    skipForward: (seconds?: number) => void;
-    skipBackward: (seconds?: number) => void;
-};
-export declare function useDebouncedSeek(delay?: number): (time: number) => void;
-export declare function useThrottledVolume(delay?: number): (volume: number) => void;
-export declare function useFormattedTime(time: number): string;
-export declare function useIntersectionObserver(elementRef: React.RefObject<Element>, options?: IntersectionObserverInit): boolean;
-export declare function useMediaQuery(query: string): boolean;
-//# sourceMappingURL=use-optimized-media.d.ts.map