@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/components/media-player.tsx

@@ -1,292 +0,0 @@
-"use client"
-
-import { forwardRef, startTransition, useMemo, useTransition } from "react"
-import { useEnhancedMediaPlayer } from "../hooks/use-enhanced-media-player"
-import { useKeyboardControls } from "../hooks/use-keyboard-controls"
-import { useMemoryOptimization } from "../hooks/use-memory-optimization"
-import { cn } from "../lib/utils"
-import type { MediaPlayerProps } from "../types/index"
-import { EnhancedMediaWrapper } from "./media-suspense"
-
-export const MediaPlayer = forwardRef<HTMLDivElement, MediaPlayerProps>(
-	(
-		{
-			src,
-			className,
-			children,
-			keyboardControls = true,
-			showControls = true,
-			customControls = false,
-			crossOrigin,
-			enablePerformanceMonitoring = true,
-			bufferingStrategy = "adaptive",
-			preloadStrategy = "progressive",
-			enableOptimizations = true,
-			...options
-		},
-		ref
-	) => {
-		// React 19 concurrent features
-		const [isPending] = useTransition()
-
-		// Enhanced media player with optimizations
-		const { state, controls, mediaRef, containerRef, performanceMetrics, isEnhanced } =
-			useEnhancedMediaPlayer({
-				src,
-				crossOrigin,
-				enablePerformanceMonitoring,
-				bufferingStrategy,
-				preloadStrategy,
-				enableTimeUpdateThrottling: true,
-				timeUpdateThrottleMs: 100,
-				enableSeekPreview: true,
-				...options
-			})
-
-		// Memory optimization
-		const { memoryStats, addEventListener } = useMemoryOptimization({
-			maxMemoryUsage: 50, // 50MB for media player
-			cleanupInterval: 15000, // 15 seconds
-			enableGC: true,
-			monitorMemory: enableOptimizations
-		})
-
-		// Keyboard controls with performance optimization
-		useKeyboardControls({
-			enabled: keyboardControls,
-			state,
-			controls
-		})
-
-		// Memoize media type detection
-		const isVideo = useMemo(() => {
-			return Array.isArray(src)
-				? src.some((s) => /\.(mp4|webm|ogv|mov|avi)$/i.test(s))
-				: /\.(mp4|webm|ogv|mov|avi)$/i.test(src)
-		}, [src])
-
-		// Memoize source rendering
-		const renderSources = useMemo(() => {
-			if (!Array.isArray(src)) return null
-
-			return src.map((source, index) => <source key={`${source}-${index}`} src={source} />)
-		}, [src])
-
-		// Memoize common props
-		const commonProps = useMemo(
-			() => ({
-				controls: showControls && !customControls,
-				className: cn(
-					"w-full transition-all duration-300",
-					isVideo && "aspect-video",
-					"bg-[color:var(--media-bg)] rounded-lg",
-					state.isTransitioning && "opacity-90"
-				),
-				preload: preloadStrategy === "eager" ? "auto" : "metadata",
-				crossOrigin,
-				...(Array.isArray(src) ? {} : { src })
-			}),
-			[
-				showControls,
-				customControls,
-				isVideo,
-				state.isTransitioning,
-				preloadStrategy,
-				crossOrigin,
-				src
-			]
-		)
-
-		return (
-			<EnhancedMediaWrapper
-				priority="high"
-				errorFallback={({ error, resetError }) => (
-					<div
-						className={cn(
-							"absolute inset-0 flex items-center justify-center",
-							"glass-strong animate-enter rounded-lg",
-							"bg-[color:var(--color-error)]/10 backdrop-blur-md"
-						)}>
-						<div className="space-y-2 text-center text-[color:var(--media-text)]">
-							<div className="mx-auto w-fit rounded-full bg-[color:var(--color-error)]/20 p-3">
-								<svg
-									className="size-6 text-[color:var(--color-error)]"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke="currentColor">
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										strokeWidth={2}
-										d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-									/>
-								</svg>
-							</div>
-							<p className="font-semibold text-lg">Playback Error</p>
-							<p className="max-w-xs text-[color:var(--media-text-secondary)] text-sm">
-								{error.message || state.error}
-							</p>
-							<button
-								onClick={resetError}
-								className="mt-2 rounded bg-[color:var(--color-brand-primary)] px-4 py-2 text-sm text-white transition-colors hover:bg-[color:var(--color-brand-accent)]">
-								Try Again
-							</button>
-						</div>
-					</div>
-				)}
-				loadingFallback={
-					<div
-						className={cn(
-							"absolute inset-0 flex items-center justify-center",
-							"glass animate-enter rounded-lg",
-							"bg-[color:var(--media-bg)]/20 backdrop-blur-sm"
-						)}>
-						<div className="space-y-4 text-center text-[color:var(--media-text)]">
-							<div className="relative">
-								<div
-									className={cn(
-										"size-12 animate-spin rounded-full border-2",
-										"border-[color:var(--color-brand-accent)]/30",
-										"border-t-[color:var(--color-brand-accent)]"
-									)}></div>
-								<div
-									className={cn(
-										"absolute inset-0 size-12 rounded-full",
-										"bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]",
-										"animate-pulse opacity-20 blur-sm"
-									)}></div>
-							</div>
-							<p className="font-medium text-[color:var(--media-text-secondary)] text-sm">
-								Loading media...
-							</p>
-						</div>
-					</div>
-				}>
-				<div
-					ref={ref || containerRef}
-					className={cn(
-						"media-container relative overflow-hidden contain-strict",
-						"bg-[color:var(--media-bg)] focus-within:outline-none",
-						"rounded-xl border border-[color:var(--media-border)]/30",
-						"shadow-2xl shadow-[color:var(--media-bg)]/50",
-						"transition-all duration-300 ease-out",
-						"hover:border-[color:var(--media-border)]/50",
-						"hover:shadow-3xl hover:shadow-[color:var(--media-bg)]/60",
-						// Performance optimizations
-						"will-change-transform",
-						state.isTransitioning && "cursor-wait",
-						className
-					)}
-					tabIndex={0}
-					// Performance attributes
-					role="application"
-					aria-label={isVideo ? "Video player" : "Audio player"}
-					aria-busy={state.isLoading || state.isBuffering}>
-					{isVideo ? (
-						<video
-							ref={mediaRef as React.RefObject<HTMLVideoElement>}
-							{...commonProps}
-							// Performance optimizations
-							disablePictureInPicture={false}
-							playsInline
-							x-webkit-airplay="allow"
-							style={{ willChange: "transform" }}>
-							{renderSources}
-							Your browser does not support the video element.
-						</video>
-					) : (
-						<audio
-							ref={mediaRef as React.RefObject<HTMLAudioElement>}
-							{...commonProps}
-							// Performance optimizations
-							preload={preloadStrategy === "eager" ? "auto" : "metadata"}
-						>
-							{renderSources}
-							Your browser does not support the audio element.
-						</audio>
-					)}
-
-					{state.error && (
-						<div
-							className={cn(
-								"absolute inset-0 flex items-center justify-center",
-								"glass-strong animate-enter rounded-lg",
-								"bg-[color:var(--color-error)]/10 backdrop-blur-md"
-							)}>
-							<div className="space-y-2 text-center text-[color:var(--media-text)]">
-								<div className="mx-auto w-fit rounded-full bg-[color:var(--color-error)]/20 p-3">
-									<svg
-										className="size-6 text-[color:var(--color-error)]"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke="currentColor">
-										<path
-											strokeLinecap="round"
-											strokeLinejoin="round"
-											strokeWidth={2}
-											d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-										/>
-									</svg>
-								</div>
-								<p className="font-semibold text-lg">Playback Error</p>
-								<p className="max-w-xs text-[color:var(--media-text-secondary)] text-sm">
-									{state.error}
-								</p>
-							</div>
-						</div>
-					)}
-
-					{state.isLoading && (
-						<div
-							className={cn(
-								"absolute inset-0 flex items-center justify-center",
-								"glass animate-enter rounded-lg",
-								"bg-[color:var(--media-bg)]/20 backdrop-blur-sm"
-							)}>
-							<div className="space-y-4 text-center text-[color:var(--media-text)]">
-								<div className="relative">
-									<div
-										className={cn(
-											"size-12 animate-spin rounded-full border-2",
-											"border-[color:var(--color-brand-accent)]/30",
-											"border-t-[color:var(--color-brand-accent)]"
-										)}></div>
-									<div
-										className={cn(
-											"absolute inset-0 size-12 rounded-full",
-											"bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]",
-											"animate-pulse opacity-20 blur-sm"
-										)}></div>
-								</div>
-								<p className="font-medium text-[color:var(--media-text-secondary)] text-sm">
-									{state.isBuffering ? "Buffering..." : "Loading media..."}
-								</p>
-							</div>
-						</div>
-					)}
-
-					{customControls && typeof children === "function" && (
-						<div className="pointer-events-auto absolute inset-0 z-50">
-							{children({ state, controls })}
-						</div>
-					)}
-
-					{customControls && typeof children !== "function" && (
-						<div className="pointer-events-auto absolute inset-0 z-50">{children}</div>
-					)}
-
-					{/* Performance indicator for development */}
-					{process.env.NODE_ENV === "development" && enablePerformanceMonitoring && (
-						<div className="absolute bottom-2 left-2 rounded bg-black/50 px-2 py-1 text-white text-xs">
-							<div>FPS: {performanceMetrics.frameRate || 0}</div>
-							<div>Memory: {memoryStats.usage.toFixed(1)}MB</div>
-							{isEnhanced && <div>Enhanced ✓</div>}
-						</div>
-					)}
-				</div>
-			</EnhancedMediaWrapper>
-		)
-	}
-)
-
-MediaPlayer.displayName = "MediaPlayer"

package/src/components/media-suspense.tsx

@@ -1,344 +0,0 @@
-"use client"
-
-import React, { Suspense } from "react"
-import { cn } from "../lib/utils"
-
-// Loading state component for media operations
-export interface MediaLoadingProps {
-	children?: React.ReactNode
-	className?: string
-	size?: "sm" | "md" | "lg"
-	variant?: "spinner" | "skeleton" | "pulse"
-}
-
-export function MediaLoading({
-	children,
-	className,
-	size = "md",
-	variant = "spinner"
-}: MediaLoadingProps) {
-	const sizeClasses = {
-		sm: "w-4 h-4",
-		md: "w-8 h-8",
-		lg: "w-12 h-12"
-	}
-
-	if (variant === "spinner") {
-		return (
-			<div className={cn("flex items-center justify-center", className)}>
-				<div
-					className={cn(
-						"animate-spin rounded-full border-2 border-current border-t-transparent",
-						sizeClasses[size]
-					)}
-				/>
-				{children && <span className="ml-2 text-muted-foreground text-sm">{children}</span>}
-			</div>
-		)
-	}
-
-	if (variant === "skeleton") {
-		return <div className={cn("animate-pulse rounded bg-muted", sizeClasses[size], className)} />
-	}
-
-	// Pulse variant
-	return (
-		<div
-			className={cn(
-				"animate-pulse bg-gradient-to-r bg-pos-0 bg-size-200 from-muted via-muted/50 to-muted",
-				"animate-shimmer rounded",
-				sizeClasses[size],
-				className
-			)}
-		/>
-	)
-}
-
-// Suspense wrapper for media components
-export interface MediaSuspenseProps {
-	children: React.ReactNode
-	fallback?: React.ReactNode
-	className?: string
-}
-
-export function MediaSuspense({
-	children,
-	fallback = <MediaLoading />,
-	className
-}: MediaSuspenseProps) {
-	return (
-		<div className={className}>
-			<Suspense fallback={fallback}>{children}</Suspense>
-		</div>
-	)
-}
-
-// Lazy loading wrapper for heavy media components
-export function withMediaSuspense<P extends object>(
-	Component: React.ComponentType<P>,
-	loadingComponent?: React.ComponentType
-) {
-	const WrappedComponent = React.forwardRef<any, P>((props, ref) => {
-		const LoadingComp = loadingComponent
-		return (
-			<MediaSuspense fallback={LoadingComp ? <LoadingComp /> : <MediaLoading />}>
-				<Component {...(props as any)} ref={ref} />
-			</MediaSuspense>
-		)
-	})
-
-	WrappedComponent.displayName = `withMediaSuspense(${Component.displayName || Component.name})`
-
-	return WrappedComponent
-}
-
-// Hook for managing concurrent state updates
-export function useMediaConcurrent() {
-	const [isPending, startTransition] = React.useTransition()
-
-	// Wrap state updates in transitions for better performance
-	const updateWithTransition = React.useCallback(
-		(updateFn: () => any): Promise<any> => {
-			return new Promise((resolve) => {
-				startTransition(() => {
-					const result = updateFn()
-					resolve(result)
-				})
-			})
-		},
-		[startTransition]
-	)
-
-	// Batch multiple updates together
-	const batchUpdates = React.useCallback(
-		(updates: Array<() => any>): Promise<any[]> => {
-			return new Promise((resolve) => {
-				startTransition(() => {
-					const results = updates.map((update) => update())
-					resolve(results)
-				})
-			})
-		},
-		[startTransition]
-	)
-
-	return {
-		isPending,
-		updateWithTransition,
-		batchUpdates
-	}
-}
-
-// Error boundary for media components
-export interface MediaErrorBoundaryProps {
-	children: React.ReactNode
-	fallback?: React.ComponentType<{ error: Error; resetError: () => void }>
-	onError?: (error: Error, errorInfo: React.ErrorInfo) => void
-}
-
-interface MediaErrorBoundaryState {
-	hasError: boolean
-	error: Error | null
-}
-
-// Default error fallback component
-function DefaultErrorFallback({
-	error,
-	resetError
-}: {
-	error: Error
-	resetError: () => void
-}) {
-	return (
-		<div className="flex flex-col items-center justify-center rounded-lg border border-destructive/20 bg-destructive/10 p-6">
-			<div className="mb-2 font-semibold text-destructive text-lg">Media Player Error</div>
-			<div className="mb-4 text-center text-muted-foreground text-sm">{error.message}</div>
-			<button
-				onClick={resetError}
-				className="rounded bg-primary px-4 py-2 text-primary-foreground transition-colors hover:bg-primary/90">
-				Try Again
-			</button>
-		</div>
-	)
-}
-
-export class MediaErrorBoundary extends React.Component<
-	MediaErrorBoundaryProps,
-	MediaErrorBoundaryState
-> {
-	constructor(props: MediaErrorBoundaryProps) {
-		super(props)
-		this.state = { hasError: false, error: null }
-	}
-
-	static getDerivedStateFromError(error: Error): MediaErrorBoundaryState {
-		return { hasError: true, error }
-	}
-
-	componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-		this.props.onError?.(error, errorInfo)
-		console.error("MediaErrorBoundary caught an error:", error, errorInfo)
-	}
-
-	resetError = () => {
-		this.setState({ hasError: false, error: null })
-	}
-
-	render() {
-		if (this.state.hasError && this.state.error) {
-			const FallbackComponent = this.props.fallback || DefaultErrorFallback
-			return <FallbackComponent error={this.state.error} resetError={this.resetError} />
-		}
-
-		return this.props.children
-	}
-}
-
-// Concurrent media component wrapper
-export interface ConcurrentMediaProps {
-	children: React.ReactNode
-	priority?: "high" | "normal" | "low"
-	deferredMs?: number
-}
-
-export function ConcurrentMedia({
-	children,
-	priority = "normal",
-	deferredMs = 0
-}: ConcurrentMediaProps) {
-	const [isDeferred, setIsDeferred] = React.useState(deferredMs > 0)
-
-	// Always call hooks unconditionally
-	const deferredChildren = React.useDeferredValue(children)
-
-	React.useEffect(() => {
-		if (deferredMs > 0) {
-			const timer = setTimeout(() => {
-				setIsDeferred(false)
-			}, deferredMs)
-
-			return () => clearTimeout(timer)
-		}
-	}, [deferredMs])
-
-	if (isDeferred) {
-		return <MediaLoading variant="skeleton" />
-	}
-
-	// Use different rendering strategies based on priority
-	if (priority === "high") {
-		// Render immediately without deferring
-		return <>{children}</>
-	}
-
-	if (priority === "low") {
-		// Use deferred value for lower priority updates
-		return <>{deferredChildren}</>
-	}
-
-	// Normal priority - use transition
-	return <React.Suspense fallback={<MediaLoading />}>{children}</React.Suspense>
-}
-
-// Hook for deferred loading of media resources
-export function useDeferredMediaLoading(delay: number = 100) {
-	const [isReady, setIsReady] = React.useState(false)
-	const deferredIsReady = React.useDeferredValue(isReady)
-
-	React.useEffect(() => {
-		const timer = setTimeout(() => {
-			setIsReady(true)
-		}, delay)
-
-		return () => clearTimeout(timer)
-	}, [delay])
-
-	return {
-		isReady: deferredIsReady,
-		actualIsReady: isReady
-	}
-}
-
-// Media component with full React 19 concurrent features
-export interface EnhancedMediaWrapperProps {
-	children: React.ReactNode
-	className?: string
-	loadingFallback?: React.ReactNode
-	errorFallback?: React.ComponentType<{ error: Error; resetError: () => void }>
-	priority?: "high" | "normal" | "low"
-	deferredMs?: number
-	onError?: (error: Error, errorInfo: React.ErrorInfo) => void
-}
-
-export function EnhancedMediaWrapper({
-	children,
-	className,
-	loadingFallback = <MediaLoading />,
-	errorFallback,
-	priority = "normal",
-	deferredMs = 0,
-	onError
-}: EnhancedMediaWrapperProps) {
-	return (
-		<div className={className}>
-			<MediaErrorBoundary fallback={errorFallback} onError={onError}>
-				<MediaSuspense fallback={loadingFallback}>
-					<ConcurrentMedia priority={priority} deferredMs={deferredMs}>
-						{children}
-					</ConcurrentMedia>
-				</MediaSuspense>
-			</MediaErrorBoundary>
-		</div>
-	)
-}
-
-// Export enhanced components with concurrent features
-export const EnhancedMediaSuspense = MediaSuspense
-export const EnhancedMediaLoading = MediaLoading
-
-// Performance monitoring hook for concurrent features
-export function useMediaPerformance() {
-	const [metrics, setMetrics] = React.useState({
-		renderTime: 0,
-		suspenseCount: 0,
-		errorCount: 0,
-		transitionCount: 0
-	})
-
-	const recordRenderTime = React.useCallback((startTime: number) => {
-		const renderTime = performance.now() - startTime
-		setMetrics((prev) => ({
-			...prev,
-			renderTime: Math.round(renderTime * 100) / 100
-		}))
-	}, [])
-
-	const incrementSuspense = React.useCallback(() => {
-		setMetrics((prev) => ({
-			...prev,
-			suspenseCount: prev.suspenseCount + 1
-		}))
-	}, [])
-
-	const incrementError = React.useCallback(() => {
-		setMetrics((prev) => ({
-			...prev,
-			errorCount: prev.errorCount + 1
-		}))
-	}, [])
-
-	const incrementTransition = React.useCallback(() => {
-		setMetrics((prev) => ({
-			...prev,
-			transitionCount: prev.transitionCount + 1
-		}))
-	}, [])
-
-	return {
-		metrics,
-		recordRenderTime,
-		incrementSuspense,
-		incrementError,
-		incrementTransition
-	}
-}