@therealtinhtute/baroiplayer 1.0.0

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

@@ -0,0 +1,107 @@
+"use client"
+
+import { Pause, Play } from "lucide-react"
+import { forwardRef } from "react"
+import { cn } from "../../lib/utils"
+import type { PlayButtonProps } from "../../types/index"
+
+const sizeVariants = {
+	sm: { button: "size-8", icon: 16 },
+	md: { button: "size-10", icon: 20 },
+	lg: { button: "size-12", icon: 24 },
+	xl: { button: "size-16", icon: 32 }
+} as const
+
+export const PlayButton = forwardRef<HTMLButtonElement, PlayButtonProps>(
+	({ isPlaying, onToggle, disabled = false, size = "lg", className }, ref) => {
+		const sizeConfig = sizeVariants[size] || sizeVariants.lg
+		
+		return (
+			<button
+				ref={ref}
+				type="button"
+				onClick={onToggle}
+				disabled={disabled}
+				data-state={isPlaying ? "playing" : "paused"}
+				className={cn(
+					// Base styles with new design system
+					"group relative inline-flex items-center justify-center",
+					"glass-strong media-control rounded-full contain-layout",
+					"focus-ring touch-manipulation",
+					sizeConfig.button,
+					
+					// Color transitions with OKLCH
+					"text-[color:var(--media-text)] transition-all duration-300",
+					"bg-[color:var(--media-control-bg)] backdrop-blur-sm",
+					"border border-[color:var(--media-border)]/30",
+					
+					// Interactive states
+					"hover:bg-[color:var(--media-control-hover)]",
+					"hover:border-[color:var(--media-border)]/50",
+					"hover:shadow-[color:var(--media-bg)]/20 hover:shadow-lg",
+					"hover:-translate-y-0.5 hover:scale-105",
+					
+					"active:bg-[color:var(--media-control-active)]",
+					"active:translate-y-0 active:scale-100",
+					
+					// Focus state
+					"focus-visible:ring-2 focus-visible:ring-[color:var(--media-focus)]",
+					"focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--media-bg)]",
+					
+					// Disabled state
+					"disabled:cursor-not-allowed disabled:opacity-50",
+					"disabled:hover:translate-y-0 disabled:hover:scale-100",
+					"disabled:hover:bg-[color:var(--media-control-bg)]",
+					
+					className
+				)}
+				aria-label={isPlaying ? "Pause media" : "Play media"}
+				aria-pressed={isPlaying}>
+				{/* Background glow effect */}
+				<div 
+					className={cn(
+						"absolute inset-0 rounded-full opacity-0 transition-opacity duration-300",
+						"bg-gradient-to-br from-[color:var(--color-media-play)] to-[color:var(--color-media-pause)]",
+						"blur-sm group-hover:opacity-20",
+						isPlaying && "opacity-10"
+					)} 
+				/>
+				
+				{/* Icon with enhanced styling */}
+				{isPlaying ? (
+					<Pause 
+						size={sizeConfig.icon} 
+						className={cn(
+							"relative z-10 fill-current transition-all duration-200",
+							"text-[color:var(--color-media-pause)]",
+							"group-hover:scale-110 group-active:scale-95",
+							"drop-shadow-sm"
+						)} 
+					/>
+				) : (
+					<Play 
+						size={sizeConfig.icon} 
+						className={cn(
+							"relative z-10 fill-current transition-all duration-200",
+							"ml-0.5 text-[color:var(--color-media-play)]",
+							"group-hover:scale-110 group-active:scale-95",
+							"drop-shadow-sm"
+						)} 
+					/>
+				)}
+				
+				{/* Ripple effect */}
+				<div 
+					className={cn(
+						"absolute inset-0 rounded-full opacity-0",
+						"scale-75 bg-[color:var(--media-text)]/10",
+						"group-active:scale-100 group-active:opacity-100",
+						"transition-all duration-150 ease-out"
+					)}
+				/>
+			</button>
+		)
+	}
+)
+
+PlayButton.displayName = "PlayButton"

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

@@ -0,0 +1,161 @@
+"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 SeekBar = 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)
+
+		// 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])
+
+		// Throttled seek handler with React 19 transitions
+		const seekTimeoutRef = useRef<NodeJS.Timeout>()
+		const lastSeekTime = useRef<number>(0)
+
+		const handleValueChange = ([value]: number[]) => {
+        				const time = ((value ?? 0) / 100) * duration
+        				setPreviewTime(time)
+        				if (isDragging) {
+        					onSeek(time)
+        				}
+        			}
+
+		const handleValueCommit = ([value]: number[]) => {
+        				const time = ((value ?? 0) / 100) * duration
+        				onSeek(time)
+        				setIsDragging(false)
+        			}
+
+		const handlePointerDown = () => {
+        			setIsDragging(true)
+        		}
+
+		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"
+									)}
+									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 */}
+										{bufferedRanges.map((range, index) => (
+											<div
+												key={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}%`
+												}}
+											/>
+										))}
+
+										{/* 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"
+											)} 
+										/>
+									</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 && "opacity-100"
+										)}
+										aria-label="Seek"
+									/>
+								</Slider.Root>
+							</div>
+						</Tooltip.Trigger>
+
+						{isDragging && (
+							<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={10}>
+									{formatTime(previewTime)}
+									<Tooltip.Arrow className="fill-black/80" />
+								</Tooltip.Content>
+							</Tooltip.Portal>
+						)}
+					</Tooltip.Root>
+				</Tooltip.Provider>
+			</div>
+		)
+	}
+)
+
+SeekBar.displayName = "SeekBar"

package/src/components/ui/time-display.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import { forwardRef } from "react"
+import { formatTime } from "../../lib/format-time"
+import { cn } from "../../lib/utils"
+import type { TimeDisplayProps } from "../../types/index"
+
+export const TimeDisplay = forwardRef<HTMLDivElement, TimeDisplayProps>(
+	({ currentTime, duration, showRemaining = false, size = "sm", className }, ref) => {
+		const current = formatTime(currentTime)
+		const total = formatTime(duration)
+		const remaining = formatTime(duration - currentTime)
+
+		const sizeClasses: Record<"sm" | "md" | "lg" | "xl", string> = {
+			sm: "text-xs",
+			md: "text-sm",
+			lg: "text-base",
+			xl: "text-lg"
+		}
+
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					"flex items-center font-mono text-white text-xs",
+					"rounded-lg backdrop-blur-sm",
+					"px-3 py-1.5",
+					sizeClasses[size],
+					"select-none",
+					className
+				)}>
+				<span className="tabular-nums">{current}</span>
+				<span className="mx-1 text-white">/</span>
+				<span className="tabular-nums">{showRemaining ? `-${remaining}` : total}</span>
+			</div>
+		)
+	}
+)
+
+TimeDisplay.displayName = "TimeDisplay"

package/src/components/ui/volume-control.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as Slider from "@radix-ui/react-slider"
+import * as Tooltip from "@radix-ui/react-tooltip"
+import { Volume1, Volume2, VolumeX } from "lucide-react"
+import { forwardRef } from "react"
+import { cn } from "../../lib/utils"
+import type { VolumeControlProps } from "../../types/index"
+
+const sizeConfig = {
+	md: {
+		button: "size-10",
+		icon: 18,
+		slider: "h-6",
+		thumb: "size-3",
+		track: "h-1"
+	},
+	lg: {
+		button: "size-12",
+		icon: 22,
+		slider: "h-7",
+		thumb: "size-4",
+		track: "h-1.5"
+	},
+	xl: {
+		button: "size-14",
+		icon: 26,
+		slider: "h-8",
+		thumb: "size-5",
+		track: "h-2"
+	}
+} as const
+
+export const VolumeControl = forwardRef<HTMLDivElement, VolumeControlProps>(
+	({ volume, isMuted, onVolumeChange, onToggleMute, size = "lg", className }, ref) => {
+		const getVolumeIcon = () => {
+			if (isMuted || volume === 0) {
+				return VolumeX
+			} else if (volume < 0.5) {
+				return Volume1
+			} else {
+				return Volume2
+			}
+		}
+
+		const VolumeIcon = getVolumeIcon()
+		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"
+		}
+		const sliderHeight: Record<"md" | "lg" | "xl", string> = {
+			md: "h-6",
+			lg: "h-7",
+			xl: "h-8"
+		}
+		const thumbSize: Record<"md" | "lg" | "xl", string> = {
+			md: "h-4 w-4",
+			lg: "h-4 w-4",
+			xl: "h-5 w-5"
+		}
+		const trackHeight: Record<"md" | "lg" | "xl", string> = {
+			md: "h-1.5",
+			lg: "h-2",
+			xl: "h-2.5"
+		}
+
+		return (
+			<div ref={ref} className={cn("flex items-center space-x-3 text-white", className)}>
+				<Tooltip.Provider>
+					<Tooltip.Root>
+						<Tooltip.Trigger asChild>
+							<button
+								type="button"
+								onClick={onToggleMute}
+								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",
+									buttonSizes[size]
+								)}
+								aria-label={isMuted ? "Unmute" : "Mute"}>
+								<VolumeIcon 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}>
+								{isMuted ? "Unmute" : "Mute"}
+								<Tooltip.Arrow className="fill-black/80" />
+							</Tooltip.Content>
+						</Tooltip.Portal>
+					</Tooltip.Root>
+				</Tooltip.Provider>
+
+				<div className="w-32">
+					<Slider.Root
+						className={cn(
+							"group relative flex w-full touch-none select-none items-center",
+							sliderHeight[size]
+						)}
+						value={[isMuted ? 0 : volume]}
+						max={1}
+						step={0.01}
+						onValueChange={([value]) => onVolumeChange(value ?? 0)}
+						aria-label="Volume">
+						<Slider.Track
+							className={cn(
+								"relative grow rounded-full bg-white/20 shadow-inner transition-all duration-300 group-hover:bg-white/30",
+								"border border-white/10",
+								trackHeight[size]
+							)}>
+							<Slider.Range className="absolute h-full rounded-full bg-white shadow-sm" />
+						</Slider.Track>
+						<Slider.Thumb
+							className={cn(
+								"block rounded-full border-2 border-white/20 bg-white shadow-lg",
+								"transition-all duration-300 ease-out hover:scale-110 hover:bg-white/95 active:scale-95",
+								"focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-black/20",
+								thumbSize[size]
+							)}
+							aria-label="Volume"
+						/>
+					</Slider.Root>
+				</div>
+
+				<span className="w-10 text-right text-sm text-white">
+					{Math.round((isMuted ? 0 : volume) * 100)}
+				</span>
+			</div>
+		)
+	}
+)
+
+VolumeControl.displayName = "VolumeControl"

package/src/components/unified/base-media-player.tsx

@@ -0,0 +1,246 @@
+/**
+ * Base Media Player - Core unified functionality for video and audio
+ * This consolidates the logic from MediaPlayer, VideoPlayer, and AudioPlayer
+ */
+
+"use client"
+
+import { forwardRef, useMemo, useTransition, startTransition } from "react"
+import { useKeyboardControls } from "../../hooks/use-keyboard-controls"
+import { useEnhancedMediaPlayer } from "../../hooks/use-enhanced-media-player"
+import { useMemoryOptimization } from "../../hooks/use-memory-optimization"
+import { EnhancedMediaWrapper } from "../media-suspense"
+import { cn } from "../../lib/utils"
+import type { MediaPlayerProps } from "../../types"
+
+export interface BaseMediaPlayerProps extends Omit<MediaPlayerProps, 'poster' | 'aspectRatio' | 'width' | 'height'> {
+	// Media type detection
+	mediaType?: 'video' | 'audio' | 'auto'
+
+	// Video-specific props (only used for video content)
+	poster?: string
+	aspectRatio?: string
+	width?: string | number
+	height?: string | number
+
+	// Enhanced features
+	enablePerformanceMonitoring?: boolean
+	bufferingStrategy?: 'adaptive' | 'conservative' | 'aggressive'
+	preloadStrategy?: 'progressive' | 'eager' | 'lazy'
+	enableOptimizations?: boolean
+}
+
+export const BaseMediaPlayer = forwardRef<HTMLDivElement, BaseMediaPlayerProps>(
+	(
+		{
+			src,
+			mediaType = 'auto',
+			className,
+			children,
+			keyboardControls = true,
+			showControls = true,
+			customControls = false,
+			crossOrigin,
+			enablePerformanceMonitoring = true,
+			bufferingStrategy = "adaptive",
+			preloadStrategy = "progressive",
+			enableOptimizations = true,
+			// Video-specific props
+			poster,
+			aspectRatio = "16/9",
+			width = "100%",
+			height = "auto",
+			...options
+		},
+		ref
+	) => {
+		// React 19 concurrent features
+		const [isPending] = useTransition()
+
+		// Auto-detect media type if not specified
+		const detectedMediaType = useMemo(() => {
+			if (mediaType !== 'auto') return mediaType
+
+			// Simple detection based on file extension
+			if (typeof src === 'string') {
+				const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv']
+				const audioExtensions = ['.mp3', '.wav', '.ogg', '.aac', '.flac', '.m4a']
+
+				const extension = src.toLowerCase().split('.').pop()
+				if (extension && videoExtensions.some(ext => extension.endsWith(ext))) {
+					return 'video'
+				}
+				if (extension && audioExtensions.some(ext => extension.endsWith(ext))) {
+					return 'audio'
+				}
+			}
+
+			// Default to video for unknown types
+			return 'video'
+		}, [src, mediaType])
+
+		// 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
+		useKeyboardControls({
+			enabled: keyboardControls,
+			state,
+			controls
+		})
+
+		// Determine the media element based on type
+		const MediaElement = useMemo(() => {
+			const commonProps = {
+				ref: mediaRef,
+				src,
+				className: cn(
+					"w-full h-full",
+					state.isLoading && "opacity-0",
+					!customControls && showControls && "cursor-pointer"
+				),
+				onPlay: controls.play,
+				onPause: controls.pause,
+				onVolumeChange: (e: any) => controls.setVolume(e.target.volume),
+				onTimeUpdate: (e: any) => controls.setCurrentTime(e.target.currentTime),
+				onSeeked: (e: any) => controls.setCurrentTime(e.target.currentTime),
+				crossOrigin
+			}
+
+			if (detectedMediaType === 'audio') {
+				return (
+					<audio {...commonProps} controls={!customControls && showControls}>
+						{src && <source src={typeof src === 'string' ? src : src.src} />}
+						Your browser does not support the audio element.
+					</audio>
+				)
+			}
+
+			// Video (default)
+			return (
+				<video
+					{...commonProps}
+					poster={poster}
+					muted={state.isMuted}
+					playsInline
+					controls={!customControls && showControls}
+				>
+					{Array.isArray(src) ? (
+						src.map((source, index) => (
+							<source key={index} src={source.src} type={source.type} />
+						))
+					) : src ? (
+						<source src={typeof src === 'string' ? src : src.src} />
+					) : null}
+					Your browser does not support the video element.
+				</video>
+			)
+		}, [detectedMediaType, src, mediaRef, state, controls, customControls, showControls, poster])
+
+		// Container styles based on media type
+		const containerStyles = useMemo(() => {
+			if (detectedMediaType === 'audio') {
+				return cn(
+					"relative bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg overflow-hidden",
+					"flex items-center justify-center p-8",
+					className
+				)
+			}
+
+			// Video styles
+			return cn(
+				"relative bg-black rounded-lg overflow-hidden",
+				className
+			)
+		}, [detectedMediaType, className])
+
+		// Video-specific aspect ratio
+		const aspectRatioStyles = useMemo(() => {
+			if (detectedMediaType === 'video' && aspectRatio) {
+				return {
+					aspectRatio,
+					width: typeof width === 'number' ? `${width}px` : width,
+					height: typeof height === 'number' ? `${height}px` : height
+				}
+			}
+			return {}
+		}, [detectedMediaType, aspectRatio, width, height])
+
+		return (
+			<EnhancedMediaWrapper>
+				<div
+					ref={containerRef}
+					className={containerStyles}
+					style={aspectRatioStyles}
+					data-media-type={detectedMediaType}
+					data-enhanced={isEnhanced}
+				>
+					{MediaElement}
+
+					{/* Loading state */}
+					{state.isLoading && (
+						<div className="absolute inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+							<div className="text-center">
+								<div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-4 border-white/20 border-t-white"></div>
+								<p className="font-medium text-sm text-white">
+									{state.isBuffering ? "Buffering..." : "Loading..."}
+								</p>
+							</div>
+						</div>
+					)}
+
+					{/* Error state */}
+					{state.error && (
+						<div className="absolute inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+							<div className="p-4 text-center text-white">
+								<div className="mb-2 text-lg text-red-400">⚠️</div>
+								<p className="text-sm">Failed to load media</p>
+								<p className="mt-1 text-xs opacity-75">{state.error.message}</p>
+							</div>
+						</div>
+					)}
+
+					{/* Custom controls or children */}
+					{children && (
+						<div className="pointer-events-none absolute inset-0">
+							{typeof children === "function"
+								? children({ state, controls, mediaType: detectedMediaType })
+								: 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>
+							<div>Type: {detectedMediaType}</div>
+							{isEnhanced && <div>Enhanced ✓</div>}
+						</div>
+					)}
+				</div>
+			</EnhancedMediaWrapper>
+		)
+	}
+)
+
+BaseMediaPlayer.displayName = "BaseMediaPlayer"