@therealtinhtute/baroiplayer 1.0.8 → 1.1.0

package/dist/src/components/ui/icons.tsx

@@ -1,174 +0,0 @@
-import React from 'react';
-
-interface IconProps {
-  className?: string;
-  size?: number | string;
-}
-
-// Button Icons
-export const PlayIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <polygon points="5 3 19 12 5 21 5 3"></polygon>
-  </svg>
-);
-
-export const PauseIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <rect x="6" y="4" width="4" height="16"></rect>
-    <rect x="14" y="4" width="4" height="16"></rect>
-  </svg>
-);
-
-export const VolumeIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
-    <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
-  </svg>
-);
-
-export const Volume1Icon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
-    <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
-  </svg>
-);
-
-export const Volume2Icon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
-    <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
-    <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
-  </svg>
-);
-
-export const VolumeXIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
-    <line x1="23" y1="9" x2="17" y2="15"></line>
-    <line x1="17" y1="9" x2="23" y2="15"></line>
-  </svg>
-);
-
-export const MuteIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <VolumeXIcon className={className} size={size} />
-);
-
-// Fullscreen Icons
-export const Maximize2Icon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <polyline points="15 3 21 3 21 9"></polyline>
-    <polyline points="9 21 3 21 3 15"></polyline>
-    <line x1="21" y1="3" x2="14" y2="10"></line>
-    <line x1="3" y1="21" x2="10" y2="14"></line>
-  </svg>
-);
-
-export const Minimize2Icon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <polyline points="4 14 10 14 10 20"></polyline>
-    <polyline points="20 10 14 10 14 4"></polyline>
-    <line x1="14" y1="10" x2="21" y2="3"></line>
-    <line x1="3" y1="21" x2="10" y2="14"></line>
-  </svg>
-);
-
-export const FullscreenIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <Maximize2Icon className={className} size={size} />
-);
-
-export const ExitFullscreenIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <Minimize2Icon className={className} size={size} />
-);
-
-// Control Icons
-export const Rewind10Icon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <polygon points="1 4 1 10 7 7"></polygon>
-    <polygon points="15 4 15 10 21 7"></polygon>
-    <path d="M7 4a9 9 0 0 1 9 9"></path>
-  </svg>
-);
-
-export const Forward10Icon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <polygon points="5 4 5 10 11 7"></polygon>
-    <polygon points="19 4 19 10 13 7"></polygon>
-    <path d="M17 20a9 9 0 0 1-9-9"></path>
-  </svg>
-);
-
-export const SpeedIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <path d="M3 12h18"></path>
-    <path d="M3 6h18"></path>
-    <path d="M3 18h18"></path>
-  </svg>
-);
-
-export const QualityIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
-    <path d="M2 17l10 5 10-5"></path>
-    <path d="M2 12l10 5 10-5"></path>
-  </svg>
-);
-
-export const SubtitlesIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <rect x="3" y="5" width="18" height="14" rx="2" ry="2"></rect>
-    <line x1="8" y1="10" x2="16" y2="10"></line>
-    <line x1="8" y1="14" x2="12" y2="14"></line>
-  </svg>
-);
-
-export const PictureInPictureIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <path d="M8 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"></path>
-    <rect x="10" y="8" width="8" height="8" rx="1"></rect>
-  </svg>
-);
-
-export const DownloadIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-    <polyline points="7 10 12 15 17 10"></polyline>
-    <line x1="12" y1="15" x2="12" y2="3"></line>
-  </svg>
-);
-
-export const ShareIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <circle cx="18" cy="5" r="3"></circle>
-    <circle cx="6" cy="12" r="3"></circle>
-    <circle cx="18" cy="19" r="3"></circle>
-    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
-    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
-  </svg>
-);
-
-export const LoadingIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <svg className={className + ' animate-spin'} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
-  </svg>
-);
-
-// Error Icons
-export const AlertTriangleIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
-    <line x1="12" y1="9" x2="12" y2="13"></line>
-    <line x1="12" y1="17" x2="12.01" y2="17"></line>
-  </svg>
-);
-
-export const RefreshCcwIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <polyline points="1 4 1 10 7 10"></polyline>
-    <polyline points="23 20 23 14 17 14"></polyline>
-    <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path>
-  </svg>
-);
-
-export const RotateCcwIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
-  <RefreshCcwIcon className={className} size={size} />
-);

package/dist/src/components/ui/media-resource-preloader.d.ts

@@ -1,21 +0,0 @@
-/**
- * Media Resource Preloader using React 19's resource preloading APIs
- * Implements intelligent preloading strategies based on user behavior and network conditions
- */
-import React from 'react';
-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';
-}
-export declare const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps>;
-export default MediaResourcePreloader;
-//# sourceMappingURL=media-resource-preloader.d.ts.map

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

@@ -1,393 +0,0 @@
-/**
- * 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

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