@therealtinhtute/baroiplayer 1.0.6 → 1.0.8

package/src/core/performance/media-loading-optimizer.js

@@ -1,404 +0,0 @@
-import React from 'react';
-export const defaultMediaLoadingConfig = {
-    preloadStrategy: 'metadata',
-    adaptiveBitrate: true,
-    maxPreloadSize: 2 * 1024 * 1024, // 2MB
-    networkThresholds: {
-        '2g': { maxBitrate: 128, preload: false }, // 128 kbps
-        '3g': { maxBitrate: 500, preload: false }, // 500 kbps  
-        '4g': { maxBitrate: 2000, preload: true }, // 2 Mbps
-        '5g': { maxBitrate: 10000, preload: true } // 10 Mbps
-    },
-    bufferSize: 10, // 10 seconds
-    enableServiceWorker: true
-};
-// Network monitoring utility
-export class NetworkMonitor {
-    connection;
-    listeners = new Set();
-    currentInfo;
-    constructor() {
-        if (typeof window === 'undefined' || typeof navigator === 'undefined') {
-            // Server-side rendering fallback
-            this.connection = null;
-            this.currentInfo = {
-                effectiveType: 'unknown',
-                downlink: 0,
-                rtt: 0,
-                saveData: false,
-                isOnline: true
-            };
-            return;
-        }
-        this.connection = navigator.connection ||
-            navigator.mozConnection ||
-            navigator.webkitConnection;
-        this.currentInfo = this.getNetworkInfo();
-        this.initializeListeners();
-    }
-    getNetworkInfo() {
-        if (typeof navigator === 'undefined') {
-            // Server-side rendering fallback
-            return {
-                effectiveType: 'unknown',
-                downlink: 0,
-                rtt: 0,
-                saveData: false,
-                isOnline: true
-            };
-        }
-        const isOnline = navigator.onLine;
-        if (this.connection) {
-            return {
-                effectiveType: this.connection.effectiveType || 'unknown',
-                downlink: this.connection.downlink || 0,
-                rtt: this.connection.rtt || 0,
-                saveData: this.connection.saveData || false,
-                isOnline
-            };
-        }
-        // Fallback for browsers without Network Information API
-        return {
-            effectiveType: 'unknown',
-            downlink: 0,
-            rtt: 0,
-            saveData: false,
-            isOnline
-        };
-    }
-    initializeListeners() {
-        if (typeof window === 'undefined') {
-            // Server-side rendering - skip event listeners
-            return;
-        }
-        if (this.connection) {
-            this.connection.addEventListener('change', this.handleNetworkChange.bind(this));
-        }
-        window.addEventListener('online', this.handleNetworkChange.bind(this));
-        window.addEventListener('offline', this.handleNetworkChange.bind(this));
-    }
-    handleNetworkChange() {
-        const newInfo = this.getNetworkInfo();
-        this.currentInfo = newInfo;
-        this.listeners.forEach(listener => listener(newInfo));
-    }
-    getCurrentNetworkInfo() {
-        return { ...this.currentInfo };
-    }
-    subscribe(listener) {
-        this.listeners.add(listener);
-        return () => this.listeners.delete(listener);
-    }
-    // Estimate available bandwidth with fallback detection
-    async estimateBandwidth() {
-        if (this.connection && this.connection.downlink) {
-            return this.connection.downlink * 1000; // Convert to kbps
-        }
-        // Fallback: simple bandwidth test
-        try {
-            const startTime = performance.now();
-            const testUrl = '/api/bandwidth-test?size=100kb'; // Would need to be implemented
-            const response = await fetch(testUrl);
-            const blob = await response.blob();
-            const endTime = performance.now();
-            const timeInSeconds = (endTime - startTime) / 1000;
-            const bytesLoaded = blob.size;
-            const bitsPerSecond = (bytesLoaded * 8) / timeInSeconds;
-            return bitsPerSecond / 1000; // Return in kbps
-        }
-        catch (error) {
-            console.warn('Bandwidth estimation failed:', error);
-            return 1000; // Default to 1Mbps
-        }
-    }
-}
-// Media loading optimizer
-export class MediaLoadingOptimizer {
-    config;
-    networkMonitor;
-    loadingMetrics = new Map();
-    preloadCache = new Map();
-    constructor(config = {}) {
-        this.config = { ...defaultMediaLoadingConfig, ...config };
-        this.networkMonitor = new NetworkMonitor();
-        this.initializeNetworkMonitoring();
-    }
-    initializeNetworkMonitoring() {
-        this.networkMonitor.subscribe((networkInfo) => {
-            this.handleNetworkChange(networkInfo);
-        });
-    }
-    handleNetworkChange(networkInfo) {
-        console.log('Network changed:', networkInfo);
-        // Adjust quality based on network conditions
-        if (this.config.adaptiveBitrate) {
-            this.adjustQualityForNetwork(networkInfo);
-        }
-        // Clear preload cache if on slow network
-        if (networkInfo.effectiveType === '2g' || networkInfo.saveData) {
-            this.clearPreloadCache();
-        }
-    }
-    // Optimize media loading based on network conditions
-    async optimizeMediaLoading(mediaUrl, element, options = {}) {
-        const startTime = performance.now();
-        const networkInfo = this.networkMonitor.getCurrentNetworkInfo();
-        const metrics = {
-            loadStartTime: startTime,
-            bytesLoaded: 0,
-            loadSpeed: 0,
-            networkType: networkInfo.effectiveType,
-            quality: options.quality || 'auto',
-            bufferHealth: 0,
-            stallsCount: 0,
-            stallsDuration: 0
-        };
-        this.loadingMetrics.set(mediaUrl, metrics);
-        try {
-            // Choose optimal loading strategy
-            const loadingStrategy = this.chooseLoadingStrategy(networkInfo, options);
-            // Apply preload strategy
-            if (loadingStrategy.shouldPreload) {
-                await this.preloadMedia(mediaUrl, loadingStrategy.preloadAmount);
-            }
-            // Set appropriate preload attribute
-            element.preload = loadingStrategy.preloadAttribute;
-            // Monitor loading progress
-            this.monitorLoadingProgress(element, metrics);
-            // Apply quality adjustments
-            if (this.config.adaptiveBitrate && loadingStrategy.suggestedQuality) {
-                this.applyQualitySettings(element, loadingStrategy.suggestedQuality);
-            }
-            return metrics;
-        }
-        catch (error) {
-            console.error('Media loading optimization failed:', error);
-            return metrics;
-        }
-    }
-    chooseLoadingStrategy(networkInfo, options) {
-        const effectiveType = networkInfo.effectiveType === 'unknown' ? '4g' : networkInfo.effectiveType;
-        const threshold = this.config.networkThresholds[effectiveType] ||
-            this.config.networkThresholds['4g'];
-        return {
-            shouldPreload: options.preload !== false && threshold.preload && !networkInfo.saveData,
-            preloadAmount: networkInfo.saveData ? 0 : this.config.maxPreloadSize,
-            preloadAttribute: this.getPreloadAttribute(networkInfo),
-            suggestedQuality: this.getSuggestedQuality(networkInfo, threshold.maxBitrate),
-            bufferTarget: this.getBufferTarget(networkInfo)
-        };
-    }
-    getPreloadAttribute(networkInfo) {
-        if (networkInfo.saveData || networkInfo.effectiveType === '2g') {
-            return 'none';
-        }
-        if (networkInfo.effectiveType === '3g') {
-            return 'metadata';
-        }
-        return this.config.preloadStrategy;
-    }
-    getSuggestedQuality(networkInfo, maxBitrate) {
-        const availableBandwidth = networkInfo.downlink * 1000; // Convert to kbps
-        if (availableBandwidth >= maxBitrate * 2)
-            return 'high';
-        if (availableBandwidth >= maxBitrate)
-            return 'medium';
-        return 'low';
-    }
-    getBufferTarget(networkInfo) {
-        switch (networkInfo.effectiveType) {
-            case '2g': return 2; // 2 seconds
-            case '3g': return 5; // 5 seconds
-            case '4g': return this.config.bufferSize;
-            case '5g': return this.config.bufferSize * 1.5;
-            default: return this.config.bufferSize;
-        }
-    }
-    // Preload media content
-    async preloadMedia(url, maxSize) {
-        if (this.preloadCache.has(url)) {
-            return; // Already preloading or preloaded
-        }
-        const preloadPromise = this.fetchWithProgress(url, maxSize);
-        this.preloadCache.set(url, preloadPromise);
-        try {
-            await preloadPromise;
-        }
-        catch (error) {
-            console.warn(`Preload failed for ${url}:`, error);
-            this.preloadCache.delete(url);
-        }
-    }
-    async fetchWithProgress(url, maxSize) {
-        const response = await fetch(url, {
-            headers: {
-                'Range': `bytes=0-${maxSize - 1}` // Limit preload size
-            }
-        });
-        if (!response.ok) {
-            throw new Error(`Failed to preload: ${response.status}`);
-        }
-        const reader = response.body?.getReader();
-        if (!reader) {
-            throw new Error('Response body not readable');
-        }
-        const chunks = [];
-        let bytesRead = 0;
-        try {
-            while (bytesRead < maxSize) {
-                const { done, value } = await reader.read();
-                if (done)
-                    break;
-                chunks.push(value);
-                bytesRead += value.length;
-            }
-        }
-        finally {
-            reader.releaseLock();
-        }
-        return new Blob(chunks);
-    }
-    // Monitor loading progress and update metrics
-    monitorLoadingProgress(element, metrics) {
-        let stallStartTime = null;
-        const updateMetrics = () => {
-            if (element.buffered.length > 0) {
-                const bufferedEnd = element.buffered.end(element.buffered.length - 1);
-                const currentTime = element.currentTime;
-                metrics.bufferHealth = Math.min((bufferedEnd - currentTime) / this.config.bufferSize, 1);
-            }
-        };
-        // Track first byte
-        const onLoadStart = () => {
-            metrics.firstByteTime = performance.now();
-        };
-        // Track load completion
-        const onCanPlay = () => {
-            metrics.loadCompleteTime = performance.now();
-            metrics.totalLoadTime = metrics.loadCompleteTime - metrics.loadStartTime;
-            // Calculate load speed
-            if (metrics.totalLoadTime && metrics.bytesLoaded > 0) {
-                metrics.loadSpeed = metrics.bytesLoaded / (metrics.totalLoadTime / 1000);
-            }
-        };
-        // Track stalls
-        const onWaiting = () => {
-            if (stallStartTime === null) {
-                stallStartTime = performance.now();
-                metrics.stallsCount++;
-            }
-        };
-        const onPlaying = () => {
-            if (stallStartTime !== null) {
-                metrics.stallsDuration += performance.now() - stallStartTime;
-                stallStartTime = null;
-            }
-            updateMetrics();
-        };
-        // Track progress
-        const onProgress = () => {
-            if (element.buffered.length > 0) {
-                const bufferedBytes = element.buffered.end(0) * 1000; // Rough estimate
-                metrics.bytesLoaded = bufferedBytes;
-            }
-            updateMetrics();
-        };
-        // Add event listeners
-        element.addEventListener('loadstart', onLoadStart);
-        element.addEventListener('canplay', onCanPlay);
-        element.addEventListener('waiting', onWaiting);
-        element.addEventListener('playing', onPlaying);
-        element.addEventListener('progress', onProgress);
-        // Cleanup function
-        const cleanup = () => {
-            element.removeEventListener('loadstart', onLoadStart);
-            element.removeEventListener('canplay', onCanPlay);
-            element.removeEventListener('waiting', onWaiting);
-            element.removeEventListener('playing', onPlaying);
-            element.removeEventListener('progress', onProgress);
-        };
-        // Auto-cleanup after 5 minutes
-        setTimeout(cleanup, 5 * 60 * 1000);
-    }
-    // Apply quality settings (would integrate with HLS.js or similar)
-    applyQualitySettings(element, quality) {
-        // This would integrate with your video streaming library
-        console.log(`Applying quality setting: ${quality} to`, element);
-        // Example integration with HLS.js:
-        // if (element.hls) {
-        //   element.hls.currentLevel = this.getQualityLevel(quality);
-        // }
-    }
-    adjustQualityForNetwork(networkInfo) {
-        // Auto-adjust quality for all active media elements
-        console.log('Adjusting quality for network conditions:', networkInfo.effectiveType);
-    }
-    // Clear preload cache to save memory
-    clearPreloadCache() {
-        this.preloadCache.clear();
-    }
-    // Get loading metrics for a specific media URL
-    getLoadingMetrics(url) {
-        return this.loadingMetrics.get(url);
-    }
-    // Get all loading metrics
-    getAllMetrics() {
-        return Array.from(this.loadingMetrics.values());
-    }
-    // Calculate average loading performance
-    getAverageLoadingTime() {
-        const metrics = this.getAllMetrics();
-        const completedLoads = metrics.filter(m => m.totalLoadTime !== undefined);
-        if (completedLoads.length === 0)
-            return 0;
-        const total = completedLoads.reduce((sum, m) => sum + (m.totalLoadTime || 0), 0);
-        return total / completedLoads.length;
-    }
-    // Get network-specific performance stats
-    getNetworkPerformanceStats() {
-        const statsByNetwork = new Map();
-        this.getAllMetrics().forEach(metrics => {
-            const network = metrics.networkType;
-            if (!statsByNetwork.has(network)) {
-                statsByNetwork.set(network, []);
-            }
-            statsByNetwork.get(network).push(metrics);
-        });
-        return Array.from(statsByNetwork.entries()).map(([networkType, metrics]) => ({
-            networkType,
-            avgLoadTime: metrics.reduce((sum, m) => sum + (m.totalLoadTime || 0), 0) / metrics.length,
-            avgStalls: metrics.reduce((sum, m) => sum + m.stallsCount, 0) / metrics.length,
-            avgBufferHealth: metrics.reduce((sum, m) => sum + m.bufferHealth, 0) / metrics.length
-        }));
-    }
-}
-// Global media loading optimizer instance
-export const mediaLoadingOptimizer = new MediaLoadingOptimizer();
-// React hook for media loading optimization
-export function useMediaLoadingOptimizer(config) {
-    const [optimizer] = React.useState(() => config ? new MediaLoadingOptimizer(config) : mediaLoadingOptimizer);
-    const [networkInfo, setNetworkInfo] = React.useState(null);
-    const [loadingMetrics, setLoadingMetrics] = React.useState([]);
-    React.useEffect(() => {
-        const unsubscribe = optimizer['networkMonitor'].subscribe(setNetworkInfo);
-        setNetworkInfo(optimizer['networkMonitor'].getCurrentNetworkInfo());
-        // Update metrics periodically
-        const interval = setInterval(() => {
-            setLoadingMetrics(optimizer.getAllMetrics());
-        }, 1000);
-        return () => {
-            unsubscribe();
-            clearInterval(interval);
-        };
-    }, [optimizer]);
-    const optimizeLoading = React.useCallback((mediaUrl, element, options) => {
-        return optimizer.optimizeMediaLoading(mediaUrl, element, options);
-    }, [optimizer]);
-    return {
-        networkInfo,
-        loadingMetrics,
-        optimizeLoading,
-        averageLoadTime: optimizer.getAverageLoadingTime(),
-        networkStats: optimizer.getNetworkPerformanceStats()
-    };
-}