@therealtinhtute/baroiplayer 1.0.0

package/src/components/ui/enhanced-seek-bar.tsx

@@ -0,0 +1,235 @@
+"use client"
+
+import * as Slider from "@radix-ui/react-slider"
+import * as Tooltip from "@radix-ui/react-tooltip"
+import { forwardRef, useCallback, useState, useMemo, useTransition, useDeferredValue, useRef } from "react"
+import { formatTime } from "../../lib/format-time"
+import { cn } from "../../lib/utils"
+import type { SeekBarProps } from "../../types/index"
+
+export const EnhancedSeekBar = forwardRef<HTMLDivElement, SeekBarProps>(
+	({ currentTime, duration, buffered, onSeek, size = "sm", className }, ref) => {
+		// React 19 concurrent features
+		const [isPending, startTransition] = useTransition()
+		const [isDragging, setIsDragging] = useState(false)
+		const [previewTime, setPreviewTime] = useState(0)
+		const [isHovering, setIsHovering] = useState(false)
+
+		// Defer non-critical updates for better performance
+		const deferredHovering = useDeferredValue(isHovering)
+		const deferredPreviewTime = useDeferredValue(previewTime)
+
+		// Throttling refs
+		const seekTimeoutRef = useRef<NodeJS.Timeout>()
+		const lastSeekTime = useRef<number>(0)
+		const rafId = useRef<number>()
+
+		// Memoize expensive calculations
+		const progress = useMemo(() => duration > 0 ? (currentTime / duration) * 100 : 0, [currentTime, duration])
+
+		// Calculate buffered ranges with memoization
+		const bufferedRanges = useMemo(() => {
+			const ranges = []
+			if (buffered && duration > 0) {
+				for (let i = 0; i < buffered.length; i++) {
+					const start = (buffered.start(i) / duration) * 100
+					const end = (buffered.end(i) / duration) * 100
+					ranges.push({ start, end })
+				}
+			}
+			return ranges
+		}, [buffered, duration])
+
+		// Optimized value change handler with throttling and RAF
+		const handleValueChange = useCallback(([value]: number[]) => {
+			const time = ((value ?? 0) / 100) * duration
+
+			setPreviewTime(time)
+
+			// Cancel any pending RAF
+			if (rafId.current) {
+				cancelAnimationFrame(rafId.current)
+			}
+
+			if (isDragging) {
+				// Clear previous timeout
+				if (seekTimeoutRef.current) {
+					clearTimeout(seekTimeoutRef.current)
+				}
+
+				// Use RAF for smooth updates during dragging
+				rafId.current = requestAnimationFrame(() => {
+					const now = performance.now()
+					const timeDiff = now - lastSeekTime.current
+					const timeJump = Math.abs(time - currentTime)
+
+					// Only seek if enough time has passed or if this is a large jump
+					if (timeDiff > 16 || timeJump > 0.5) { // 60fps = 16ms per frame
+						startTransition(() => {
+							onSeek(time)
+						})
+						lastSeekTime.current = now
+					} else {
+						// Defer the seek
+						seekTimeoutRef.current = setTimeout(() => {
+							startTransition(() => {
+								onSeek(time)
+							})
+							lastSeekTime.current = performance.now()
+						}, 16)
+					}
+				})
+			}
+		}, [duration, isDragging, onSeek, currentTime, startTransition])
+
+		const handleValueCommit = useCallback(([value]: number[]) => {
+			const time = ((value ?? 0) / 100) * duration
+
+			// Cancel any pending RAF
+			if (rafId.current) {
+				cancelAnimationFrame(rafId.current)
+			}
+
+			// Clear any pending seeks
+			if (seekTimeoutRef.current) {
+				clearTimeout(seekTimeoutRef.current)
+			}
+
+			startTransition(() => {
+				onSeek(time)
+			})
+			setIsDragging(false)
+		}, [duration, onSeek, startTransition])
+
+		const handlePointerDown = useCallback(() => {
+			setIsDragging(true)
+			lastSeekTime.current = performance.now()
+		}, [])
+
+		// Cleanup on unmount
+		useMemo(() => {
+			return () => {
+				if (rafId.current) {
+					cancelAnimationFrame(rafId.current)
+				}
+				if (seekTimeoutRef.current) {
+					clearTimeout(seekTimeoutRef.current)
+				}
+			}
+		}, [])
+
+		// Memoize tooltip content to prevent re-renders
+		const tooltipContent = useMemo(() => {
+			return (
+				<div className={cn(
+					"rounded bg-black/80 px-2 py-1 text-sm text-white",
+					"fade-in-0 zoom-in-95 animate-in"
+				)}>
+					{formatTime(deferredPreviewTime)}
+				</div>
+			)
+		}, [deferredPreviewTime])
+
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					"media-container relative w-full text-[color:var(--media-text)]",
+					"touch-manipulation contain-layout",
+					className
+				)}
+				onMouseEnter={() => setIsHovering(true)}
+				onMouseLeave={() => setIsHovering(false)}>
+				<Tooltip.Provider>
+					<Tooltip.Root>
+						<Tooltip.Trigger asChild>
+							<div className="relative animate-enter">
+								<Slider.Root
+									className={cn(
+										"group relative flex w-full touch-none select-none items-center",
+										"media-md:h-4 media-sm:h-3 media-xs:h-2",
+										"focus-ring cursor-pointer",
+										isPending && "opacity-75"
+									)}
+									value={[progress]}
+									max={100}
+									step={0.1}
+									onValueChange={handleValueChange}
+									onValueCommit={handleValueCommit}
+									onPointerDown={handlePointerDown}
+									aria-label="Seek to position">
+									<Slider.Track
+										className={cn(
+											"relative grow overflow-hidden rounded-full",
+											"bg-[color:var(--media-control-bg)]/40 backdrop-blur-sm",
+											"border border-[color:var(--media-border)]/20",
+											"shadow-inner transition-all duration-300 ease-out",
+											"h-1 group-focus-within:h-1.5 group-hover:h-1.5",
+											"group-hover:bg-[color:var(--media-control-bg)]/60",
+											"group-hover:border-[color:var(--media-border)]/40"
+										)}>
+										{/* Buffered ranges - optimized rendering */}
+										{bufferedRanges.map((range, index) => (
+											<div
+												key={`${range.start}-${range.end}-${index}`}
+												className={cn(
+													"absolute h-full rounded-full transition-all duration-500",
+													"bg-[color:var(--color-media-buffered)] shadow-inner",
+													"opacity-60 group-hover:opacity-80"
+												)}
+												style={{
+													left: `${range.start}%`,
+													width: `${range.end - range.start}%`,
+													willChange: 'width, left'
+												}}
+											/>
+										))}
+
+										{/* Progress range with gradient */}
+										<Slider.Range
+											className={cn(
+												"absolute h-full rounded-full transition-all duration-300",
+												"bg-gradient-to-r from-[color:var(--color-media-progress)] to-[color:var(--color-brand-accent)]",
+												"shadow-[color:var(--color-brand-primary)]/20 shadow-lg",
+												"group-hover:shadow-xl",
+												isDragging && "transition-none"
+											)}
+										/>
+									</Slider.Track>
+
+									<Slider.Thumb
+										className={cn(
+											"block size-4 rounded-full border-white/20 bg-white",
+											"shadow-lg hover:shadow-xl",
+											"opacity-0 group-hover:opacity-100",
+											"hover:scale-110 hover:bg-white/95 active:scale-95",
+											"focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-white/50",
+											"focus:ring-offset-2 focus:ring-offset-black/20",
+											"transition-all duration-300 ease-out",
+											isDragging && "scale-110 opacity-100",
+											isPending && "animate-pulse"
+										)}
+										aria-label="Seek"
+									/>
+								</Slider.Root>
+							</div>
+						</Tooltip.Trigger>
+
+						{(isDragging || deferredHovering) && (
+							<Tooltip.Portal>
+								<Tooltip.Content
+									sideOffset={10}
+									className="data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
+									{tooltipContent}
+									<Tooltip.Arrow className="fill-black/80" />
+								</Tooltip.Content>
+							</Tooltip.Portal>
+						)}
+					</Tooltip.Root>
+				</Tooltip.Provider>
+			</div>
+		)
+	}
+)
+
+EnhancedSeekBar.displayName = "EnhancedSeekBar"

package/src/components/ui/fullscreen-button.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import * as Tooltip from "@radix-ui/react-tooltip"
+import { Maximize, Minimize } from "lucide-react"
+import { forwardRef } from "react"
+import { cn } from "../../lib/utils"
+import type { FullscreenButtonProps } from "../../types/index"
+
+export const FullscreenButton = forwardRef<HTMLButtonElement, FullscreenButtonProps>(
+	({ isFullscreen, onToggle, disabled = false, size = "lg", className }, ref) => {
+		const Icon = isFullscreen ? Minimize : Maximize
+		const buttonSizes: Record<"md" | "lg" | "xl", string> = {
+			md: "h-11 w-11",
+			lg: "h-12 w-12",
+			xl: "h-14 w-14"
+		}
+		const iconSizes: Record<"md" | "lg" | "xl", string> = {
+			md: "h-5 w-5",
+			lg: "h-6 w-6",
+			xl: "h-7 w-7"
+		}
+
+		return (
+			<Tooltip.Provider>
+				<Tooltip.Root>
+					<Tooltip.Trigger asChild>
+						<button
+							ref={ref}
+							type="button"
+							onClick={onToggle}
+							disabled={disabled}
+							className={cn(
+								"inline-flex items-center justify-center rounded-lg bg-transparent p-0 text-white transition-all hover:text-cyan-700 active:scale-95",
+								"focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-black/20",
+								"disabled:cursor-not-allowed disabled:opacity-50",
+								buttonSizes[size],
+								className
+							)}
+							aria-label={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}>
+							<Icon className={cn(iconSizes[size])} />
+						</button>
+					</Tooltip.Trigger>
+					<Tooltip.Portal>
+						<Tooltip.Content
+							className={cn(
+								"rounded bg-black/80 px-2 py-1 text-sm text-white",
+								"fade-in-0 zoom-in-95 animate-in"
+							)}
+							sideOffset={5}>
+							{isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
+							<Tooltip.Arrow className="fill-black/80" />
+						</Tooltip.Content>
+					</Tooltip.Portal>
+				</Tooltip.Root>
+			</Tooltip.Provider>
+		)
+	}
+)
+
+FullscreenButton.displayName = "FullscreenButton"

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

@@ -0,0 +1,395 @@
+/**
+ * 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<NetworkInformation | null>(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 (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 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,
+				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: 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 === 'hls';
+		}
+
+		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 === '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: MediaSource, strategy: string): boolean {
+		return strategy === 'aggressive' && source.type === 'hls';
+	}
+
+	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',
+				priority: 'high',
+			});
+		});
+	}
+
+	// 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;