@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/components/ui/loading-skeleton.tsx

@@ -1,107 +0,0 @@
-import { memo } from "react"
-import { cn } from "../../lib/utils"
-
-interface LoadingSkeletonProps {
-	className?: string
-	variant?: "text" | "circular" | "rectangular" | "rounded"
-	animation?: "pulse" | "wave" | "none"
-	width?: number | string
-	height?: number | string
-}
-
-const variantStyles = {
-	text: "rounded",
-	circular: "rounded-full",
-	rectangular: "rounded-none",
-	rounded: "rounded-lg"
-}
-
-const animationStyles = {
-	pulse: "animate-pulse",
-	wave: "animate-pulse",
-	none: ""
-}
-
-const LoadingSkeletonComponent = memo(function LoadingSkeleton({
-	className,
-	variant = "text",
-	animation = "pulse",
-	width,
-	height
-}: LoadingSkeletonProps) {
-	return (
-		<div
-			className={cn(
-				"bg-[color:var(--media-skeleton)]",
-				variantStyles[variant],
-				animation === "wave" &&
-					"bg-[length:200%_100%] bg-gradient-to-r from-[color:var(--media-skeleton)] via-[color:var(--media-skeleton-light)] to-[color:var(--media-skeleton)]",
-				animationStyles[animation],
-				className
-			)}
-			style={{ width, height }}
-			role="status"
-			aria-label="Loading content"
-		/>
-	)
-})
-
-interface LoadingSkeletonListProps {
-	count?: number
-	className?: string
-	itemClassName?: string
-}
-
-export const LoadingSkeletonList = memo(function LoadingSkeletonList({
-	count = 3,
-	className,
-	itemClassName
-}: LoadingSkeletonListProps) {
-	return (
-		<div className={cn("space-y-4", className)}>
-			{Array.from({ length: count }).map((_, i) => (
-				<LoadingSkeletonComponent
-					key={i}
-					variant="rounded"
-					width="100%"
-					height={60}
-					className={itemClassName}
-				/>
-			))}
-		</div>
-	)
-})
-
-interface LoadingPlayerSkeletonProps {
-	className?: string
-	showTimeDisplay?: boolean
-	showControls?: boolean
-}
-
-export const LoadingPlayerSkeleton = memo(function LoadingPlayerSkeleton({
-	className,
-	showTimeDisplay = true,
-	showControls = true
-}: LoadingPlayerSkeletonProps) {
-	return (
-		<div className={cn("relative overflow-hidden rounded-lg bg-black", className)}>
-			<LoadingSkeletonComponent
-				variant="rectangular"
-				width="100%"
-				height="100%"
-				className="aspect-video"
-			/>
-			<div className="absolute right-0 bottom-0 left-0 p-4">
-				{showTimeDisplay && (
-					<div className="mb-2 flex justify-between">
-						<LoadingSkeletonComponent variant="text" width={60} height={16} />
-						<LoadingSkeletonComponent variant="text" width={60} height={16} />
-					</div>
-				)}
-				{showControls && <LoadingSkeletonComponent variant="rounded" width="100%" height={8} />}
-			</div>
-		</div>
-	)
-})
-
-export { LoadingSkeletonComponent as LoadingSkeleton }

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

@@ -1,458 +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 { preconnect, prefetchDNS, preinit, preload } 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())
-
-	// Helper functions (must be declared before use)
-	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 preloadLikelyContent(sources: string[]): void {
-		sources.forEach((url) => {
-			// Mark as preloaded
-			preloadingHistoryRef.current.set(url, Date.now())
-
-			// Preload the content
-			preload(url, {
-				as: "fetch" as any,
-				crossOrigin: "anonymous"
-			} as any)
-		})
-	}
-
-	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
-	}
-
-	// 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 (basic check without refs)
-			if (shouldPreloadBasic(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])
-
-	// Store the filtered preloading config
-	const [filteredPreloadingConfig, setFilteredPreloadingConfig] = React.useState(preloadingConfig)
-
-	// Update filtered config when preloading config or refs change (safe ref access in effect)
-	React.useEffect(() => {
-		const filtered = { ...preloadingConfig }
-		filtered.preload = preloadingConfig.preload.filter(({ url }) => {
-			const source = sources.find((s) => s.src === url)
-			if (!source) return false
-
-			// Inline the full shouldPreload logic to avoid function hoisting issues
-			// 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 as string) === "hls"
-			}
-
-			if (strategy === "aggressive") {
-				return true
-			}
-
-			// Adaptive strategy (simplified version)
-			if (networkInfoRef.current) {
-				const { effectiveType, saveData } = networkInfoRef.current
-
-				if (saveData) return false
-				if (effectiveType === "slow-2g" || effectiveType === "2g") {
-					return priority === "high" && (source.type as string) === "hls"
-				}
-				if (effectiveType === "3g") {
-					return ["hls", "m3u8"].includes(source.type || "")
-				}
-			}
-
-			return priority !== "low"
-		})
-
-		setFilteredPreloadingConfig(filtered)
-	}, [preloadingConfig, 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(() => {
-		filteredPreloadingConfig.dnsPrefetch.forEach((domain) => {
-			prefetchDNS(domain)
-		})
-	}, [filteredPreloadingConfig.dnsPrefetch])
-
-	// Apply preconnections
-	useEffect(() => {
-		filteredPreloadingConfig.preconnect.forEach((origin) => {
-			preconnect(origin, { crossOrigin: "anonymous" })
-		})
-	}, [filteredPreloadingConfig.preconnect])
-
-	// Apply preloading
-	useEffect(() => {
-		filteredPreloadingConfig.preload.forEach(({ url, type }) => {
-			const crossOrigin = shouldUseCrossOrigin(url) ? "anonymous" : undefined
-
-			preload(url, {
-				as: type as any,
-				crossOrigin,
-				integrity: getAssetIntegrity(url)
-			} as any)
-		})
-	}, [filteredPreloadingConfig.preload, priority])
-
-	// Apply preinit for critical resources
-	useEffect(() => {
-		filteredPreloadingConfig.preinit.forEach(({ url, type }) => {
-			const crossOrigin = shouldUseCrossOrigin(url) ? "anonymous" : undefined
-
-			preinit(url, {
-				as: type as any,
-				crossOrigin
-			} as any)
-		})
-	}, [filteredPreloadingConfig.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 shouldPreloadBasic(source: MediaSource, priority: string, strategy: string): boolean {
-		// Basic strategy-based decision without ref access
-		if (strategy === "conservative") {
-			return priority === "high" && (source.type as string) === "hls"
-		}
-
-		if (strategy === "aggressive") {
-			return true
-		}
-
-		// Adaptive strategy (basic version)
-		return priority !== "low"
-	}
-
-	function shouldPreload(
-		source: MediaSource,
-		priority: string,
-		strategy: string,
-		preloadingHistory: Map<string, number>,
-		networkInfo: any
-	): boolean {
-		// Check if already preloaded recently
-		const lastPreload = preloadingHistory.get(source.src)
-		if (lastPreload && Date.now() - lastPreload < 300000) return false // 5 minutes
-
-		// Strategy-based decision
-		if (strategy === "conservative") {
-			return priority === "high" && (source.type as string) === "hls"
-		}
-
-		if (strategy === "aggressive") {
-			return true
-		}
-
-		// Adaptive strategy
-		return shouldAdaptivePreload(source, priority, networkInfo)
-	}
-
-	function shouldAdaptivePreload(
-		source: MediaSource,
-		priority: string,
-		networkInfo: any
-	): boolean {
-		// Consider network conditions
-		if (networkInfo) {
-			const { effectiveType, saveData } = networkInfo
-
-			if (saveData) return false
-			if (effectiveType === "slow-2g" || effectiveType === "2g") {
-				return priority === "high" && (source.type as string) === "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 as string) === "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"
-		}
-	}
-
-	// 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/src/components/ui/offline-message.tsx

@@ -1,98 +0,0 @@
-import { RefreshCw, WifiOff } from "lucide-react"
-import { memo, useCallback } from "react"
-import { cn } from "../../lib/utils"
-
-interface OfflineMessageProps {
-	className?: string
-	title?: string
-	message?: string
-	onRetry?: () => void
-	retryLabel?: string
-	showRetry?: boolean
-}
-
-const OfflineMessageComponent = memo(function OfflineMessage({
-	className,
-	title = "You're offline",
-	message = "Check your internet connection and try again.",
-	onRetry,
-	retryLabel = "Retry",
-	showRetry = true
-}: OfflineMessageProps) {
-	const handleRetry = useCallback(() => {
-		onRetry?.()
-	}, [onRetry])
-
-	return (
-		<div
-			className={cn(
-				"flex flex-col items-center justify-center p-8 text-center",
-				"rounded-lg bg-[color:var(--media-bg)]",
-				className
-			)}
-			role="alert"
-			aria-live="polite">
-			<div className="mb-4 rounded-full bg-[color:var(--media-control-bg)] p-4" aria-hidden="true">
-				<WifiOff size={48} className="text-[color:var(--media-text-secondary)]" />
-			</div>
-			<h3 className="mb-2 font-semibold text-[color:var(--media-text)] text-lg">{title}</h3>
-			<p className="mb-4 max-w-sm text-[color:var(--media-text-secondary)] text-sm">{message}</p>
-			{showRetry && onRetry && (
-				<button
-					onClick={handleRetry}
-					className={cn(
-						"inline-flex items-center gap-2 rounded-lg px-4 py-2",
-						"bg-[color:var(--media-primary)] text-white",
-						"transition-opacity hover:opacity-90",
-						"focus:outline-none focus:ring-2 focus:ring-[color:var(--media-primary)] focus:ring-offset-2"
-					)}
-					aria-label={retryLabel}>
-					<RefreshCw size={16} />
-					{retryLabel}
-				</button>
-			)}
-		</div>
-	)
-})
-
-interface OfflineBannerProps {
-	className?: string
-	onRetry?: () => void
-}
-
-export const OfflineBanner = memo(function OfflineBanner({
-	className,
-	onRetry
-}: OfflineBannerProps) {
-	return (
-		<div
-			className={cn(
-				"flex items-center justify-between gap-4 p-3 px-4",
-				"rounded-lg border border-amber-500/20 bg-amber-500/10",
-				className
-			)}
-			role="alert"
-			aria-live="polite">
-			<div className="flex items-center gap-3">
-				<WifiOff size={20} className="text-amber-500" aria-hidden="true" />
-				<span className="text-amber-500 text-sm">
-					You're offline. Some features may be limited.
-				</span>
-			</div>
-			{onRetry && (
-				<button
-					onClick={onRetry}
-					className={cn(
-						"rounded px-3 py-1 text-sm",
-						"bg-amber-500/20 text-amber-500",
-						"transition-colors hover:bg-amber-500/30"
-					)}
-					aria-label="Retry connection check">
-					Retry
-				</button>
-			)}
-		</div>
-	)
-})
-
-export { OfflineMessageComponent as OfflineMessage }