@therealtinhtute/baroiplayer 1.0.6 → 1.0.8

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

@@ -1,288 +0,0 @@
-"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
-    };
-}

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

@@ -1,60 +0,0 @@
-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/src/hooks/use-optimized-media.js

@@ -1,211 +0,0 @@
-"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;
-}