@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

package/dist/src/components/ui/media-resource-preloader.js

@@ -0,0 +1,295 @@
+/**
+ * Media Resource Preloader using React 19's resource preloading APIs
+ * Implements intelligent preloading strategies based on user behavior and network conditions
+ */
+import { useEffect, useRef, useMemo } from 'react';
+import { prefetchDNS, preconnect, preload, preinit } from 'react-dom';
+export const MediaResourcePreloader = ({ sources, enableIntelligentPreloading = true, adaptToNetworkConditions = true, priority = 'auto', strategy = 'adaptive', }) => {
+    const networkInfoRef = useRef(null);
+    const userBehaviorRef = useRef(null);
+    const preloadingHistoryRef = useRef(new Map());
+    // Analyze sources and determine preloading configuration
+    const preloadingConfig = useMemo(() => {
+        const config = {
+            dnsPrefetch: [],
+            preconnect: [],
+            preload: [],
+            preinit: [],
+        };
+        sources.forEach((source) => {
+            const url = new URL(source.src);
+            const domain = url.origin;
+            // DNS prefetch for CDN domains
+            if (isCDNDomain(domain)) {
+                config.dnsPrefetch.push(domain);
+            }
+            // Preconnect to media domains
+            if (shouldPreconnect(source.type, strategy)) {
+                config.preconnect.push(domain);
+            }
+            // Preload media files based on strategy
+            if (shouldPreload(source, priority, strategy)) {
+                config.preload.push({
+                    url: source.src,
+                    type: getPreloadType(source.type),
+                });
+            }
+            // Preinit critical resources
+            if (shouldPreinit(source, strategy)) {
+                config.preinit.push({
+                    url: source.src,
+                    type: 'script',
+                });
+            }
+        });
+        return config;
+    }, [sources, priority, strategy]);
+    // Initialize network monitoring
+    useEffect(() => {
+        if (adaptToNetworkConditions && 'connection' in navigator) {
+            networkInfoRef.current = navigator.connection;
+            const handleNetworkChange = () => {
+                adjustPreloadingStrategy();
+            };
+            networkInfoRef.current.addEventListener('change', handleNetworkChange);
+            return () => {
+                networkInfoRef.current?.removeEventListener('change', handleNetworkChange);
+            };
+        }
+    }, [adaptToNetworkConditions]);
+    // Initialize user behavior tracking
+    useEffect(() => {
+        if (enableIntelligentPreloading) {
+            userBehaviorRef.current = new UserBehaviorTracker();
+            userBehaviorRef.current.startTracking();
+            return () => {
+                userBehaviorRef.current?.stopTracking();
+            };
+        }
+    }, [enableIntelligentPreloading]);
+    // Apply DNS prefetching
+    useEffect(() => {
+        preloadingConfig.dnsPrefetch.forEach((domain) => {
+            prefetchDNS(domain);
+        });
+    }, [preloadingConfig.dnsPrefetch]);
+    // Apply preconnections
+    useEffect(() => {
+        preloadingConfig.preconnect.forEach((origin) => {
+            preconnect(origin, { crossOrigin: 'anonymous' });
+        });
+    }, [preloadingConfig.preconnect]);
+    // Apply preloading
+    useEffect(() => {
+        preloadingConfig.preload.forEach(({ url, type }) => {
+            const crossOrigin = shouldUseCrossOrigin(url) ? 'anonymous' : undefined;
+            preload(url, {
+                as: type,
+                crossOrigin,
+                integrity: getAssetIntegrity(url),
+                priority,
+            });
+        });
+    }, [preloadingConfig.preload, priority]);
+    // Apply preinit for critical resources
+    useEffect(() => {
+        preloadingConfig.preinit.forEach(({ url, type }) => {
+            const crossOrigin = shouldUseCrossOrigin(url) ? 'anonymous' : undefined;
+            preinit(url, {
+                as: type,
+                crossOrigin,
+            });
+        });
+    }, [preloadingConfig.preinit]);
+    // Intelligent preloading based on user behavior
+    useEffect(() => {
+        if (!enableIntelligentPreloading || !userBehaviorRef.current)
+            return;
+        const handleUserBehavior = (behavior) => {
+            if (behavior.isLikelyToInteract) {
+                preloadLikelyContent(behavior.predictedSources);
+            }
+        };
+        userBehaviorRef.current.onBehaviorChange(handleUserBehavior);
+    }, [enableIntelligentPreloading]);
+    // Helper functions
+    function isCDNDomain(domain) {
+        const cdnDomains = [
+            'cdn.jsdelivr.net',
+            'cdnjs.cloudflare.com',
+            'unpkg.com',
+            'cloudflare.com',
+            'fastly.net',
+            'akamaized.net',
+        ];
+        return cdnDomains.some((cdn) => domain.includes(cdn));
+    }
+    function shouldPreconnect(mediaType, strategy) {
+        if (strategy === 'aggressive')
+            return true;
+        if (strategy === 'conservative')
+            return ['hls', 'm3u8'].includes(mediaType);
+        return ['hls', 'm3u8', 'mp4'].includes(mediaType);
+    }
+    function shouldPreload(source, priority, strategy) {
+        // Check if already preloaded recently
+        const lastPreload = preloadingHistoryRef.current.get(source.src);
+        if (lastPreload && Date.now() - lastPreload < 300000)
+            return false; // 5 minutes
+        // Strategy-based decision
+        if (strategy === 'conservative') {
+            return priority === 'high' && source.type === 'hls';
+        }
+        if (strategy === 'aggressive') {
+            return true;
+        }
+        // Adaptive strategy
+        return shouldAdaptivePreload(source, priority);
+    }
+    function shouldAdaptivePreload(source, priority) {
+        // Consider network conditions
+        if (networkInfoRef.current) {
+            const { effectiveType, saveData } = networkInfoRef.current;
+            if (saveData)
+                return false;
+            if (effectiveType === 'slow-2g' || effectiveType === '2g') {
+                return priority === 'high' && source.type === 'hls';
+            }
+            if (effectiveType === '3g') {
+                return ['hls', 'm3u8'].includes(source.type);
+            }
+        }
+        // Consider user behavior
+        if (userBehaviorRef.current) {
+            const behavior = userBehaviorRef.current.getCurrentBehavior();
+            if (behavior.engagementScore > 0.7) {
+                return true;
+            }
+        }
+        return priority !== 'low';
+    }
+    function shouldPreinit(source, strategy) {
+        return strategy === 'aggressive' && source.type === 'hls';
+    }
+    function getPreloadType(mediaType) {
+        switch (mediaType) {
+            case 'hls':
+            case 'm3u8':
+                return 'fetch';
+            case 'mp4':
+            case 'webm':
+                return 'video';
+            case 'mp3':
+            case 'wav':
+                return 'audio';
+            default:
+                return 'fetch';
+        }
+    }
+    function shouldUseCrossOrigin(url) {
+        return !url.includes(window.location.origin);
+    }
+    function getAssetIntegrity(url) {
+        // Return integrity hash if available for the asset
+        // This would typically come from a build process or asset manifest
+        return undefined;
+    }
+    function adjustPreloadingStrategy() {
+        // Adjust preloading based on network conditions
+        if (!networkInfoRef.current)
+            return;
+        const { effectiveType, downlink } = networkInfoRef.current;
+        // This would update the preloading configuration
+        // Implementation depends on specific requirements
+    }
+    function preloadLikelyContent(sources) {
+        sources.forEach((url) => {
+            // Mark as preloaded
+            preloadingHistoryRef.current.set(url, Date.now());
+            // Preload the content
+            preload(url, {
+                as: 'fetch',
+                crossOrigin: 'anonymous',
+                priority: 'high',
+            });
+        });
+    }
+    // This component doesn't render anything visible
+    return null;
+};
+/**
+ * User behavior tracker for intelligent preloading
+ */
+class UserBehaviorTracker {
+    behaviorData = {
+        isLikelyToInteract: false,
+        engagementScore: 0,
+        predictedSources: [],
+        interactionHistory: [],
+    };
+    listeners = [];
+    mouseMoveTimer = null;
+    startTracking() {
+        // Track mouse movements as interaction indicators
+        document.addEventListener('mousemove', this.handleMouseMove);
+        document.addEventListener('scroll', this.handleScroll);
+        document.addEventListener('keydown', this.handleKeydown);
+        // Track focus events
+        document.addEventListener('focusin', this.handleFocus);
+        document.addEventListener('visibilitychange', this.handleVisibilityChange);
+    }
+    stopTracking() {
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('scroll', this.handleScroll);
+        document.removeEventListener('keydown', this.handleKeydown);
+        document.removeEventListener('focusin', this.handleFocus);
+        document.removeEventListener('visibilitychange', this.handleVisibilityChange);
+        if (this.mouseMoveTimer) {
+            clearTimeout(this.mouseMoveTimer);
+        }
+    }
+    onBehaviorChange(listener) {
+        this.listeners.push(listener);
+    }
+    getCurrentBehavior() {
+        return this.behaviorData;
+    }
+    handleMouseMove = () => {
+        if (this.mouseMoveTimer)
+            return;
+        this.mouseMoveTimer = window.setTimeout(() => {
+            this.updateEngagementScore(0.1);
+            this.mouseMoveTimer = null;
+        }, 100);
+    };
+    handleScroll = () => {
+        this.updateEngagementScore(0.2);
+    };
+    handleKeydown = () => {
+        this.updateEngagementScore(0.3);
+        this.behaviorData.isLikelyToInteract = true;
+    };
+    handleFocus = () => {
+        this.updateEngagementScore(0.4);
+        this.behaviorData.isLikelyToInteract = true;
+    };
+    handleVisibilityChange = () => {
+        if (!document.hidden) {
+            this.updateEngagementScore(0.5);
+            this.behaviorData.isLikelyToInteract = true;
+        }
+    };
+    updateEngagementScore(increment) {
+        this.behaviorData.engagementScore = Math.min(1, this.behaviorData.engagementScore + increment);
+        // Decay engagement score over time
+        setTimeout(() => {
+            this.behaviorData.engagementScore = Math.max(0, this.behaviorData.engagementScore - increment * 0.5);
+            this.notifyListeners();
+        }, 30000); // 30 seconds decay
+        this.notifyListeners();
+    }
+    notifyListeners() {
+        this.listeners.forEach((listener) => listener(this.behaviorData));
+    }
+}
+export default MediaResourcePreloader;

package/dist/src/components/ui/media-resource-preloader.tsx

@@ -0,0 +1,393 @@
+/**
+ * Media Resource Preloader using React 19's resource preloading APIs
+ * Implements intelligent preloading strategies based on user behavior and network conditions
+ */
+
+import React, { useEffect, useRef, useMemo } from 'react';
+import { prefetchDNS, preconnect, preload, preinit } from 'react-dom';
+import { MediaSource } from '../../types';
+
+interface MediaResourcePreloaderProps {
+	/** Media sources to preload */
+	sources: MediaSource[];
+	/** Enable intelligent preloading based on user behavior */
+	enableIntelligentPreloading?: boolean;
+	/** Network-aware preloading */
+	adaptToNetworkConditions?: boolean;
+	/** Preload priority level */
+	priority?: 'high' | 'low' | 'auto';
+	/** Custom preloading strategy */
+	strategy?: 'conservative' | 'aggressive' | 'adaptive';
+}
+
+interface PreloadingConfig {
+	dnsPrefetch: string[];
+	preconnect: string[];
+	preload: Array<{ url: string; type: string }>;
+	preinit: Array<{ url: string; type: string }>;
+}
+
+export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
+	sources,
+	enableIntelligentPreloading = true,
+	adaptToNetworkConditions = true,
+	priority = 'auto',
+	strategy = 'adaptive',
+}) => {
+	const networkInfoRef = useRef<any>(null);
+	const userBehaviorRef = useRef<UserBehaviorTracker | null>(null);
+	const preloadingHistoryRef = useRef<Map<string, number>>(new Map());
+
+	// Analyze sources and determine preloading configuration
+	const preloadingConfig = useMemo((): PreloadingConfig => {
+		const config: PreloadingConfig = {
+			dnsPrefetch: [],
+			preconnect: [],
+			preload: [],
+			preinit: [],
+		};
+
+		sources.forEach((source) => {
+			const url = new URL(source.src);
+			const domain = url.origin;
+
+			// DNS prefetch for CDN domains
+			if (isCDNDomain(domain)) {
+				config.dnsPrefetch.push(domain);
+			}
+
+			// Preconnect to media domains
+			if (source.type && shouldPreconnect(source.type, strategy)) {
+				config.preconnect.push(domain);
+			}
+
+			// Preload media files based on strategy
+			if (shouldPreload(source, priority, strategy)) {
+				config.preload.push({
+					url: source.src,
+					type: source.type ? getPreloadType(source.type) : 'auto',
+				});
+			}
+
+			// Preinit critical resources
+			if (shouldPreinit(source, strategy)) {
+				config.preinit.push({
+					url: source.src,
+					type: 'script',
+				});
+			}
+		});
+
+		return config;
+	}, [sources, priority, strategy]);
+
+	// Initialize network monitoring
+	useEffect(() => {
+		if (adaptToNetworkConditions && 'connection' in navigator) {
+			networkInfoRef.current = (navigator as any).connection;
+
+			const handleNetworkChange = () => {
+				adjustPreloadingStrategy();
+			};
+
+			networkInfoRef.current.addEventListener('change', handleNetworkChange);
+
+			return () => {
+				networkInfoRef.current?.removeEventListener('change', handleNetworkChange);
+			};
+		}
+	}, [adaptToNetworkConditions]);
+
+	// Initialize user behavior tracking
+	useEffect(() => {
+		if (enableIntelligentPreloading) {
+			userBehaviorRef.current = new UserBehaviorTracker();
+			userBehaviorRef.current.startTracking();
+
+			return () => {
+				userBehaviorRef.current?.stopTracking();
+			};
+		}
+	}, [enableIntelligentPreloading]);
+
+	// Apply DNS prefetching
+	useEffect(() => {
+		preloadingConfig.dnsPrefetch.forEach((domain) => {
+			prefetchDNS(domain);
+		});
+	}, [preloadingConfig.dnsPrefetch]);
+
+	// Apply preconnections
+	useEffect(() => {
+		preloadingConfig.preconnect.forEach((origin) => {
+			preconnect(origin, { crossOrigin: 'anonymous' });
+		});
+	}, [preloadingConfig.preconnect]);
+
+	// Apply preloading
+	useEffect(() => {
+		preloadingConfig.preload.forEach(({ url, type }) => {
+			const crossOrigin = shouldUseCrossOrigin(url) ? 'anonymous' : undefined;
+
+			preload(url, {
+				as: type as any,
+				crossOrigin,
+				integrity: getAssetIntegrity(url),
+			});
+		});
+	}, [preloadingConfig.preload, priority]);
+
+	// Apply preinit for critical resources
+	useEffect(() => {
+		preloadingConfig.preinit.forEach(({ url, type }) => {
+			const crossOrigin = shouldUseCrossOrigin(url) ? 'anonymous' : undefined;
+
+			preinit(url, {
+				as: type as any,
+				crossOrigin,
+			});
+		});
+	}, [preloadingConfig.preinit]);
+
+	// Intelligent preloading based on user behavior
+	useEffect(() => {
+		if (!enableIntelligentPreloading || !userBehaviorRef.current) return;
+
+		const handleUserBehavior = (behavior: UserBehaviorData) => {
+			if (behavior.isLikelyToInteract) {
+				preloadLikelyContent(behavior.predictedSources);
+			}
+		};
+
+		userBehaviorRef.current.onBehaviorChange(handleUserBehavior);
+	}, [enableIntelligentPreloading]);
+
+	// Helper functions
+	function isCDNDomain(domain: string): boolean {
+		const cdnDomains = [
+			'cdn.jsdelivr.net',
+			'cdnjs.cloudflare.com',
+			'unpkg.com',
+			'cloudflare.com',
+			'fastly.net',
+			'akamaized.net',
+		];
+
+		return cdnDomains.some((cdn) => domain.includes(cdn));
+	}
+
+	function shouldPreconnect(mediaType: string, strategy: string): boolean {
+		if (strategy === 'aggressive') return true;
+		if (strategy === 'conservative') return ['hls', 'm3u8'].includes(mediaType);
+		return ['hls', 'm3u8', 'mp4'].includes(mediaType);
+	}
+
+	function shouldPreload(source: MediaSource, priority: string, strategy: string): boolean {
+		// Check if already preloaded recently
+		const lastPreload = preloadingHistoryRef.current.get(source.src);
+		if (lastPreload && Date.now() - lastPreload < 300000) return false; // 5 minutes
+
+		// Strategy-based decision
+		if (strategy === 'conservative') {
+			return priority === 'high' && (source.type?.includes('hls') ?? false);
+		}
+
+		if (strategy === 'aggressive') {
+			return true;
+		}
+
+		// Adaptive strategy
+		return shouldAdaptivePreload(source, priority);
+	}
+
+	function shouldAdaptivePreload(source: MediaSource, priority: string): boolean {
+		// Consider network conditions
+		if (networkInfoRef.current) {
+			const { effectiveType, saveData } = networkInfoRef.current;
+
+			if (saveData) return false;
+			if (effectiveType === 'slow-2g' || effectiveType === '2g') {
+				return priority === 'high' && (source.type?.includes('hls') ?? false);
+			}
+			if (effectiveType === '3g') {
+				return ['hls', 'm3u8'].includes(source.type || '');
+			}
+		}
+
+		// Consider user behavior
+		if (userBehaviorRef.current) {
+			const behavior = userBehaviorRef.current.getCurrentBehavior();
+			if (behavior.engagementScore > 0.7) {
+				return true;
+			}
+		}
+
+		return priority !== 'low';
+	}
+
+	function shouldPreinit(source: MediaSource, strategy: string): boolean {
+		return strategy === 'aggressive' && (source.type?.includes('hls') ?? false);
+	}
+
+	function getPreloadType(mediaType: string): string {
+		switch (mediaType) {
+			case 'hls':
+			case 'm3u8':
+				return 'fetch';
+			case 'mp4':
+			case 'webm':
+				return 'video';
+			case 'mp3':
+			case 'wav':
+				return 'audio';
+			default:
+				return 'fetch';
+		}
+	}
+
+	function shouldUseCrossOrigin(url: string): boolean {
+		return !url.includes(window.location.origin);
+	}
+
+	function getAssetIntegrity(url: string): string | undefined {
+		// Return integrity hash if available for the asset
+		// This would typically come from a build process or asset manifest
+		return undefined;
+	}
+
+	function adjustPreloadingStrategy(): void {
+		// Adjust preloading based on network conditions
+		if (!networkInfoRef.current) return;
+
+		const { effectiveType, downlink } = networkInfoRef.current;
+
+		// This would update the preloading configuration
+		// Implementation depends on specific requirements
+	}
+
+	function preloadLikelyContent(sources: string[]): void {
+		sources.forEach((url) => {
+			// Mark as preloaded
+			preloadingHistoryRef.current.set(url, Date.now());
+
+			// Preload the content
+			preload(url, {
+				as: 'fetch',
+				crossOrigin: 'anonymous',
+			});
+		});
+	}
+
+	// This component doesn't render anything visible
+	return null;
+};
+
+/**
+ * User behavior tracker for intelligent preloading
+ */
+class UserBehaviorTracker {
+	private behaviorData: UserBehaviorData = {
+		isLikelyToInteract: false,
+		engagementScore: 0,
+		predictedSources: [],
+		interactionHistory: [],
+	};
+
+	private listeners: ((behavior: UserBehaviorData) => void)[] = [];
+	private mouseMoveTimer: number | null = null;
+
+	public startTracking(): void {
+		// Track mouse movements as interaction indicators
+		document.addEventListener('mousemove', this.handleMouseMove);
+		document.addEventListener('scroll', this.handleScroll);
+		document.addEventListener('keydown', this.handleKeydown);
+
+		// Track focus events
+		document.addEventListener('focusin', this.handleFocus);
+		document.addEventListener('visibilitychange', this.handleVisibilityChange);
+	}
+
+	public stopTracking(): void {
+		document.removeEventListener('mousemove', this.handleMouseMove);
+		document.removeEventListener('scroll', this.handleScroll);
+		document.removeEventListener('keydown', this.handleKeydown);
+		document.removeEventListener('focusin', this.handleFocus);
+		document.removeEventListener('visibilitychange', this.handleVisibilityChange);
+
+		if (this.mouseMoveTimer) {
+			clearTimeout(this.mouseMoveTimer);
+		}
+	}
+
+	public onBehaviorChange(listener: (behavior: UserBehaviorData) => void): void {
+		this.listeners.push(listener);
+	}
+
+	public getCurrentBehavior(): UserBehaviorData {
+		return this.behaviorData;
+	}
+
+	private handleMouseMove = (): void => {
+		if (this.mouseMoveTimer) return;
+
+		this.mouseMoveTimer = window.setTimeout(() => {
+			this.updateEngagementScore(0.1);
+			this.mouseMoveTimer = null;
+		}, 100);
+	};
+
+	private handleScroll = (): void => {
+		this.updateEngagementScore(0.2);
+	};
+
+	private handleKeydown = (): void => {
+		this.updateEngagementScore(0.3);
+		this.behaviorData.isLikelyToInteract = true;
+	};
+
+	private handleFocus = (): void => {
+		this.updateEngagementScore(0.4);
+		this.behaviorData.isLikelyToInteract = true;
+	};
+
+	private handleVisibilityChange = (): void => {
+		if (!document.hidden) {
+			this.updateEngagementScore(0.5);
+			this.behaviorData.isLikelyToInteract = true;
+		}
+	};
+
+	private updateEngagementScore(increment: number): void {
+		this.behaviorData.engagementScore = Math.min(
+			1,
+			this.behaviorData.engagementScore + increment
+		);
+
+		// Decay engagement score over time
+		setTimeout(() => {
+			this.behaviorData.engagementScore = Math.max(
+				0,
+				this.behaviorData.engagementScore - increment * 0.5
+			);
+			this.notifyListeners();
+		}, 30000); // 30 seconds decay
+
+		this.notifyListeners();
+	}
+
+	private notifyListeners(): void {
+		this.listeners.forEach((listener) => listener(this.behaviorData));
+	}
+}
+
+interface UserBehaviorData {
+	isLikelyToInteract: boolean;
+	engagementScore: number;
+	predictedSources: string[];
+	interactionHistory: Array<{
+		type: string;
+		timestamp: number;
+	}>;
+}
+
+export default MediaResourcePreloader;

package/dist/src/components/ui/play-button.d.ts

@@ -0,0 +1,3 @@
+import type { PlayButtonProps } from "../../types/index";
+export declare const PlayButton: import("react").ForwardRefExoticComponent<PlayButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=play-button.d.ts.map

package/dist/src/components/ui/play-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"play-button.d.ts","sourceRoot":"","sources":["play-button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AASxD,eAAO,MAAM,UAAU,+GA0FtB,CAAA"}