@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/hooks/use-media-state.js

@@ -0,0 +1,162 @@
+"use client";
+import { useState } from "react";
+import { useMediaStore } from "../context/media-context";
+import { useMediaOptimistic } from "./use-media-optimistic";
+import { useMediaActions } from "./use-media-actions";
+// Legacy hook for backward compatibility
+export function useMediaState() {
+    const [state, setState] = useState({
+        isPlaying: false,
+        currentTime: 0,
+        duration: 0,
+        volume: 1,
+        isMuted: false,
+        isLoading: false,
+        isFullscreen: false,
+        error: null,
+        buffered: null
+    });
+    const updateState = (updates) => {
+        setState((prev) => ({ ...prev, ...updates }));
+    };
+    const setPlaying = (isPlaying) => {
+        updateState({ isPlaying });
+    };
+    const setCurrentTime = (currentTime) => {
+        updateState({ currentTime });
+    };
+    const setDuration = (duration) => {
+        updateState({ duration });
+    };
+    const setVolume = (volume) => {
+        updateState({ volume: Math.max(0, Math.min(1, volume)) });
+    };
+    const setMuted = (isMuted) => {
+        updateState({ isMuted });
+    };
+    const setLoading = (isLoading) => {
+        updateState({ isLoading });
+    };
+    const setFullscreen = (isFullscreen) => {
+        updateState({ isFullscreen });
+    };
+    const setError = (error) => {
+        updateState({ error });
+    };
+    const setBuffered = (buffered) => {
+        updateState({ buffered });
+    };
+    return {
+        state,
+        updateState,
+        setPlaying,
+        setCurrentTime,
+        setDuration,
+        setVolume,
+        setMuted,
+        setLoading,
+        setFullscreen,
+        setError,
+        setBuffered
+    };
+}
+// React 19 enhanced media state hook
+export function useEnhancedMediaState() {
+    const store = useMediaStore();
+    // Check if this is an enhanced store
+    const isEnhanced = 'getOptimisticState' in store;
+    if (!isEnhanced) {
+        // Fall back to regular media state if not enhanced
+        return useMediaState();
+    }
+    // Cast to enhanced store type
+    const enhancedStore = store;
+    // Use React 19 optimistic updates
+    const optimisticState = useMediaOptimistic(enhancedStore);
+    // Get action handlers with React 19 features
+    const actions = useMediaActions(enhancedStore);
+    return {
+        // State (optimistic values for immediate UI feedback)
+        state: optimisticState.state,
+        actualState: optimisticState.actualState,
+        // Individual state selectors
+        isPlaying: optimisticState.isPlaying,
+        currentTime: optimisticState.currentTime,
+        duration: optimisticState.state.duration,
+        volume: optimisticState.volume,
+        isMuted: optimisticState.isMuted,
+        isLoading: optimisticState.isBuffering,
+        isFullscreen: optimisticState.isFullscreen,
+        error: optimisticState.state.error,
+        buffered: optimisticState.state.buffered,
+        // Computed values
+        progress: optimisticState.progress,
+        formattedTime: optimisticState.formattedTime,
+        formattedDuration: optimisticState.formattedDuration,
+        // Actions with optimistic updates
+        actions,
+        // Action state for loading/error handling
+        isActionLoading: actions.isLoading,
+        actionError: actions.errorMessage,
+        retryLastAction: actions.retryLastAction,
+        // Legacy compatibility methods
+        updateState: (updates) => {
+            // Map legacy updates to new actions
+            if ('isPlaying' in updates) {
+                updates.isPlaying ? actions.play() : actions.pause();
+            }
+            if ('currentTime' in updates) {
+                actions.setCurrentTime(updates.currentTime);
+            }
+            if ('duration' in updates) {
+                actions.setDuration(updates.duration);
+            }
+            if ('volume' in updates) {
+                actions.setVolume(updates.volume);
+            }
+            if ('isMuted' in updates) {
+                updates.isMuted ? actions.mute() : actions.unmute();
+            }
+            if ('isLoading' in updates) {
+                actions.setLoading(updates.isLoading);
+            }
+            if ('isFullscreen' in updates) {
+                updates.isFullscreen ? actions.enterFullscreen() : actions.exitFullscreen();
+            }
+            if ('error' in updates) {
+                actions.setError(updates.error ?? null);
+            }
+            if ('buffered' in updates) {
+                actions.setBuffered(updates.buffered ?? null);
+            }
+        },
+        // Individual action methods for legacy compatibility
+        setPlaying: (isPlaying) => {
+            isPlaying ? actions.play(true) : actions.pause(true); // Use optimistic updates
+        },
+        setCurrentTime: (time) => actions.setCurrentTime(time),
+        setDuration: (duration) => actions.setDuration(duration),
+        setVolume: (volume) => actions.setVolume(volume, true),
+        setMuted: (muted) => {
+            muted ? actions.mute(true) : actions.unmute(true);
+        },
+        setLoading: (loading) => actions.setLoading(loading),
+        setFullscreen: (fullscreen) => {
+            fullscreen ? actions.enterFullscreen(true) : actions.exitFullscreen(true);
+        },
+        setError: (error) => actions.setError(error),
+        setBuffered: (buffered) => actions.setBuffered(buffered)
+    };
+}
+// Hook that automatically chooses between legacy and enhanced based on context availability
+export function useAdaptiveMediaState() {
+    try {
+        // Try to use the enhanced version if MediaStore context is available
+        return useEnhancedMediaState();
+    }
+    catch (error) {
+        // Fall back to legacy version if not in MediaProvider context
+        console.warn('MediaStore context not available, using legacy state management');
+        return useMediaState();
+    }
+}

package/dist/src/hooks/use-media-state.ts

@@ -0,0 +1,190 @@
+"use client"
+
+import { useCallback, useState, useActionState, useOptimistic } from "react"
+import type { MediaPlayerState } from "../types/index"
+import { useMediaStore, useMediaSelector } from "../context/media-context"
+import { useMediaOptimistic } from "./use-media-optimistic"
+import { useMediaActions } from "./use-media-actions"
+import type { EnhancedMediaStore } from "../context/media-store"
+
+// Legacy hook for backward compatibility
+export function useMediaState() {
+	const [state, setState] = useState<MediaPlayerState>({
+		isPlaying: false,
+		currentTime: 0,
+		duration: 0,
+		volume: 1,
+		isMuted: false,
+		isLoading: false,
+		isFullscreen: false,
+		error: null,
+		buffered: null
+	})
+
+	const updateState = (updates: Partial<MediaPlayerState>) => {
+    		setState((prev: MediaPlayerState) => ({ ...prev, ...updates }))
+    	}
+
+	const setPlaying = (isPlaying: boolean) => {
+    			updateState({ isPlaying })
+    		}
+
+	const setCurrentTime = (currentTime: number) => {
+    			updateState({ currentTime })
+    		}
+
+	const setDuration = (duration: number) => {
+    			updateState({ duration })
+    		}
+
+	const setVolume = (volume: number) => {
+    			updateState({ volume: Math.max(0, Math.min(1, volume)) })
+    		}
+
+	const setMuted = (isMuted: boolean) => {
+    			updateState({ isMuted })
+    		}
+
+	const setLoading = (isLoading: boolean) => {
+    			updateState({ isLoading })
+    		}
+
+	const setFullscreen = (isFullscreen: boolean) => {
+    			updateState({ isFullscreen })
+    		}
+
+	const setError = (error: string | null) => {
+    			updateState({ error })
+    		}
+
+	const setBuffered = (buffered: TimeRanges | null) => {
+    			updateState({ buffered })
+    		}
+
+	return {
+		state,
+		updateState,
+		setPlaying,
+		setCurrentTime,
+		setDuration,
+		setVolume,
+		setMuted,
+		setLoading,
+		setFullscreen,
+		setError,
+		setBuffered
+	}
+}
+
+// React 19 enhanced media state hook
+export function useEnhancedMediaState() {
+	const store = useMediaStore()
+	
+	// Check if this is an enhanced store
+	const isEnhanced = 'getOptimisticState' in store
+	
+	if (!isEnhanced) {
+		// Fall back to regular media state if not enhanced
+		return useMediaState() as any
+	}
+	
+	// Cast to enhanced store type
+	const enhancedStore = store as unknown as EnhancedMediaStore
+	
+	// Use React 19 optimistic updates
+	const optimisticState = useMediaOptimistic(enhancedStore)
+	
+	// Get action handlers with React 19 features
+	const actions = useMediaActions(enhancedStore)
+	
+	return {
+		// State (optimistic values for immediate UI feedback)
+		state: optimisticState.state,
+		actualState: optimisticState.actualState,
+		
+		// Individual state selectors
+		isPlaying: optimisticState.isPlaying,
+		currentTime: optimisticState.currentTime,
+		duration: optimisticState.state.duration,
+		volume: optimisticState.volume,
+		isMuted: optimisticState.isMuted,
+		isLoading: optimisticState.isBuffering,
+		isFullscreen: optimisticState.isFullscreen,
+		error: optimisticState.state.error,
+		buffered: optimisticState.state.buffered,
+		
+		// Computed values
+		progress: optimisticState.progress,
+		formattedTime: optimisticState.formattedTime,
+		formattedDuration: optimisticState.formattedDuration,
+		
+		// Actions with optimistic updates
+		actions,
+		
+		// Action state for loading/error handling
+		isActionLoading: actions.isLoading,
+		actionError: actions.errorMessage,
+		retryLastAction: actions.retryLastAction,
+		
+		// Legacy compatibility methods
+		updateState: (updates: Partial<MediaPlayerState>) => {
+			// Map legacy updates to new actions
+			if ('isPlaying' in updates) {
+				updates.isPlaying ? actions.play() : actions.pause()
+			}
+			if ('currentTime' in updates) {
+				actions.setCurrentTime(updates.currentTime!)
+			}
+			if ('duration' in updates) {
+				actions.setDuration(updates.duration!)
+			}
+			if ('volume' in updates) {
+				actions.setVolume(updates.volume!)
+			}
+			if ('isMuted' in updates) {
+				updates.isMuted ? actions.mute() : actions.unmute()
+			}
+			if ('isLoading' in updates) {
+				actions.setLoading(updates.isLoading!)
+			}
+			if ('isFullscreen' in updates) {
+				updates.isFullscreen ? actions.enterFullscreen() : actions.exitFullscreen()
+			}
+			if ('error' in updates) {
+				actions.setError(updates.error ?? null)
+			}
+			if ('buffered' in updates) {
+				actions.setBuffered(updates.buffered ?? null)
+			}
+		},
+		
+		// Individual action methods for legacy compatibility
+		setPlaying: (isPlaying: boolean) => {
+			isPlaying ? actions.play(true) : actions.pause(true) // Use optimistic updates
+		},
+		setCurrentTime: (time: number) => actions.setCurrentTime(time),
+		setDuration: (duration: number) => actions.setDuration(duration),
+		setVolume: (volume: number) => actions.setVolume(volume, true),
+		setMuted: (muted: boolean) => {
+			muted ? actions.mute(true) : actions.unmute(true)
+		},
+		setLoading: (loading: boolean) => actions.setLoading(loading),
+		setFullscreen: (fullscreen: boolean) => {
+			fullscreen ? actions.enterFullscreen(true) : actions.exitFullscreen(true)
+		},
+		setError: (error: string | null) => actions.setError(error),
+		setBuffered: (buffered: TimeRanges | null) => actions.setBuffered(buffered)
+	}
+}
+
+// Hook that automatically chooses between legacy and enhanced based on context availability
+export function useAdaptiveMediaState() {
+	try {
+		// Try to use the enhanced version if MediaStore context is available
+		return useEnhancedMediaState()
+	} catch (error) {
+		// Fall back to legacy version if not in MediaProvider context
+		console.warn('MediaStore context not available, using legacy state management')
+		return useMediaState()
+	}
+}

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

@@ -0,0 +1,40 @@
+import React from "react";
+export declare function useMemoryOptimization(options?: {
+    maxMemoryUsage?: number;
+    cleanupInterval?: number;
+    enableGC?: boolean;
+    monitorMemory?: boolean;
+}): {
+    memoryStats: {
+        used: number;
+        total: number;
+        limit: number;
+        usage: number;
+        isHighUsage: boolean;
+    };
+    getMemoryUsage: () => {
+        used: any;
+        total: any;
+        limit: any;
+    };
+    performCleanup: () => void;
+    addEventListener: (element: Element, event: string, handler: EventListener, options?: AddEventListenerOptions) => () => void;
+    setInterval: (callback: () => void, delay: number) => () => void;
+    setTimeout: (callback: () => void, delay: number) => () => void;
+    requestAnimationFrame: (callback: FrameRequestCallback) => () => void;
+    addObserver: (observer: MutationObserver) => () => void;
+    formatBytes: (bytes: number) => string;
+};
+export declare function useMediaResourceCleanup(mediaRef: React.RefObject<HTMLVideoElement | HTMLAudioElement>): {
+    cleanupResources: () => void;
+    registerMediaEventListener: (event: string, handler: EventListener, options?: AddEventListenerOptions) => () => void;
+};
+export declare function usePerformanceMonitoring(): {
+    averageLongTaskDuration: number;
+    isPerformanceGood: boolean;
+    fps: number;
+    frameDrops: number;
+    longTasks: number;
+    totalLongTaskDuration: number;
+};
+//# sourceMappingURL=use-memory-optimization.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-memory-optimization.d.ts","sourceRoot":"","sources":["use-memory-optimization.ts"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAGtE,wBAAgB,qBAAqB,CAAC,OAAO,GAAE;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;CAClB;;;;;;;;;;;;;;gCAwGK,OAAO,SACT,MAAM,WACJ,aAAa,YACZ,uBAAuB;4BA0BS,MAAM,IAAI,SAAS,MAAM;2BAW1B,MAAM,IAAI,SAAS,MAAM;sCAWd,oBAAoB;4BAW9B,gBAAgB;yBAgCrC,MAAM;EAQ5B;AAGD,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;;wCAmC7F,MAAM,WACJ,aAAa,YACZ,uBAAuB;EAiBlC;AAGD,wBAAgB,wBAAwB;;;;;;;EAiFvC"}

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

@@ -0,0 +1,288 @@
+"use client";
+import React, { useEffect, useRef, useCallback } from "react";
+// Memory optimization hook for media players
+export function useMemoryOptimization(options = {}) {
+    const { maxMemoryUsage = 100, // 100MB default
+    cleanupInterval = 30000, // 30 seconds default
+    enableGC = true, monitorMemory = true } = options;
+    const cleanupTimeoutRef = useRef();
+    const observersRef = useRef(new Set());
+    const eventListenersRef = useRef(new Map());
+    const intervalRefs = useRef(new Set());
+    const animationFrameRefs = useRef(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.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.gc();
+        }
+    }, [enableGC]);
+    // Safe event listener management
+    const addEventListener = useCallback((element, event, handler, options) => {
+        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, delay) => {
+        const timeoutId = setInterval(callback, delay);
+        intervalRefs.current.add(timeoutId);
+        return () => {
+            clearInterval(timeoutId);
+            intervalRefs.current.delete(timeoutId);
+        };
+    }, []);
+    // Safe timeout management
+    const setTimeout = useCallback((callback, delay) => {
+        const timeoutId = setTimeout(callback, delay);
+        intervalRefs.current.add(timeoutId);
+        return () => {
+            clearTimeout(timeoutId);
+            intervalRefs.current.delete(timeoutId);
+        };
+    }, []);
+    // Safe animation frame management
+    const requestAnimationFrame = useCallback((callback) => {
+        const frameId = requestAnimationFrame(callback);
+        animationFrameRefs.current.add(frameId);
+        return () => {
+            cancelAnimationFrame(frameId);
+            animationFrameRefs.current.delete(frameId);
+        };
+    }, []);
+    // Safe observer management
+    const addObserver = useCallback((observer) => {
+        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) => {
+            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) {
+    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.clearBuffered();
+        }
+    }, [mediaRef]);
+    // Enhanced event listener registration
+    const registerMediaEventListener = useCallback((event, handler, options) => {
+        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();
+    // FPS monitoring
+    useEffect(() => {
+        let rafId;
+        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
+    };
+}