@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

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

@@ -0,0 +1,404 @@
+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()
+    };
+}