@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

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

@@ -0,0 +1,358 @@
+"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>()
+	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 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 interval = setInterval(checkMemory, cleanupInterval)
+		intervalRefs.current.add(interval)
+
+		return () => {
+			clearInterval(interval)
+			intervalRefs.current.delete(interval)
+		}
+	}, [monitorMemory, getMemoryUsage, maxMemoryUsage, enableGC, cleanupInterval])
+
+	// Cleanup function
+	const performCleanup = useCallback(() => {
+		// Clear all timeouts
+		intervalRefs.current.forEach(timeout => {
+			clearTimeout(timeout)
+		})
+		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 setInterval = useCallback((callback: () => void, delay: number) => {
+		const timeoutId = setInterval(callback, delay)
+		intervalRefs.current.add(timeoutId)
+
+		return () => {
+			clearInterval(timeoutId)
+			intervalRefs.current.delete(timeoutId)
+		}
+	}, [])
+
+	// Safe timeout management
+	const setTimeout = useCallback((callback: () => void, delay: number) => {
+		const timeoutId = setTimeout(callback, delay)
+		intervalRefs.current.add(timeoutId)
+
+		return () => {
+			clearTimeout(timeoutId)
+			intervalRefs.current.delete(timeoutId)
+		}
+	}, [])
+
+	// Safe animation frame management
+	const requestAnimationFrame = 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,
+		setTimeout,
+		requestAnimationFrame,
+		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>()
+
+	// 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-optimistic-controls.d.ts

@@ -0,0 +1,22 @@
+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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-optimistic-controls.d.ts","sourceRoot":"","sources":["use-optimistic-controls.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,uBAAuB,CAAC,YAAY,EAAE,UAAU,EAAE,YAAY,CAAC,EAAE,gBAAgB,GAAG,IAAI;;;;;;;;;4BAyC1E,MAAM;qBAUb,MAAM;gCAUK,MAAM;;;EAqBvC"}

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

@@ -0,0 +1,60 @@
+import { useOptimistic, useTransition } from 'react';
+export function useOptimisticMediaState(initialState, mediaElement) {
+    const [isPending, startTransition] = useTransition();
+    // Optimistic state for each property
+    const [optimisticPlaying, setOptimisticPlaying] = useOptimistic(initialState.isPlaying, (_, value) => value);
+    const [optimisticVolume, setOptimisticVolume] = useOptimistic(initialState.volume, (_, value) => value);
+    const [optimisticTime, setOptimisticTime] = useOptimistic(initialState.currentTime, (_, value) => value);
+    const [optimisticRate, setOptimisticRate] = useOptimistic(initialState.playbackRate, (_, value) => 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) => {
+            setOptimisticVolume(volume);
+            startTransition(async () => {
+                if (mediaElement) {
+                    mediaElement.volume = volume;
+                }
+            });
+        },
+        seek: async (time) => {
+            setOptimisticTime(time);
+            startTransition(async () => {
+                if (mediaElement) {
+                    mediaElement.currentTime = time;
+                }
+            });
+        },
+        setPlaybackRate: async (rate) => {
+            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-optimistic-controls.ts

@@ -0,0 +1,92 @@
+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

@@ -0,0 +1,46 @@
+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

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-optimized-media.d.ts","sourceRoot":"","sources":["use-optimized-media.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,wBAAgB,sBAAsB;;;;;;;;;;;;;;;;;;;EA2DrC;AAGD,wBAAgB,yBAAyB;;;;iBAgBF,MAAM;wBAIC,MAAM;;;;;;;;;;4BAwCF,MAAM;4BAIP,MAAM;6BAIL,MAAM;EAuBvD;AAGD,wBAAgB,gBAAgB,CAAC,KAAK,GAAE,MAAY,UAIJ,MAAM,UAmBrD;AAGD,wBAAgB,kBAAkB,CAAC,KAAK,GAAE,MAAW,YAIE,MAAM,UAS5D;AAGD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,UAW5C;AAGD,wBAAgB,uBAAuB,CACtC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,EACpC,OAAO,CAAC,EAAE,wBAAwB,WAuBlC;AAGD,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,WAgB1C"}