@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

package/src/components/ui/offline-message.tsx

@@ -0,0 +1,98 @@
+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 }

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

@@ -1,7 +1,7 @@
 "use client"
 
 import { Pause, Play } from "lucide-react"
-import { forwardRef } from "react"
+import { forwardRef, memo, useMemo } from "react"
 import { cn } from "../../lib/utils"
 import type { PlayButtonProps } from "../../types/index"
 
@@ -12,96 +12,88 @@ const sizeVariants = {
 	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 
+const PlayButtonComponent = memo(
+	forwardRef<HTMLButtonElement, PlayButtonProps>(
+		({ isPlaying, onToggle, disabled = false, size = "lg", className }, ref) => {
+			const sizeConfig = useMemo(() => sizeVariants[size] || sizeVariants.lg, [size])
+
+			const ariaLabel = useMemo(() => (isPlaying ? "Pause media" : "Play media"), [isPlaying])
+
+			return (
+				<button
+					ref={ref}
+					type="button"
+					onClick={onToggle}
+					disabled={disabled}
+					data-state={isPlaying ? "playing" : "paused"}
 					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} 
+						"group relative inline-flex items-center justify-center",
+						"glass-strong media-control rounded-full contain-layout",
+						"focus-ring touch-manipulation",
+						sizeConfig.button,
+						"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",
+						"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-visible:ring-2 focus-visible:ring-[color:var(--media-focus)]",
+						"focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--media-bg)]",
+						"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={ariaLabel}
+					aria-pressed={isPlaying}>
+					<div
 						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"
-						)} 
+							"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"
+						)}
 					/>
-				) : (
-					<Play 
-						size={sizeConfig.icon} 
+
+					{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"
+							)}
+						/>
+					)}
+
+					<div
 						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"
-						)} 
+							"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"
+						)}
 					/>
-				)}
-				
-				{/* 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>
-		)
-	}
+				</button>
+			)
+		}
+	)
 )
 
-PlayButton.displayName = "PlayButton"
+PlayButtonComponent.displayName = "PlayButton"
+
+export const PlayButton = PlayButtonComponent

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

@@ -2,160 +2,190 @@
 
 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 { forwardRef, memo, useCallback, useDeferredValue, useMemo, useState } 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 })
+const SeekBarComponent = memo(
+	forwardRef<HTMLDivElement, SeekBarProps>(
+		({ currentTime, duration, buffered, onSeek, size = "sm", className }, ref) => {
+			const [isDragging, setIsDragging] = useState(false)
+			const [previewTime, setPreviewTime] = useState(0)
+			const [isHovering, setIsHovering] = useState(false)
+
+			// Defer non-critical updates for better performance
+			const deferredPreviewTime = useDeferredValue(previewTime)
+
+			// Memoize size configuration
+			const sizeConfig = useMemo(
+				() => ({
+					trackHeight: size === "sm" ? "h-1" : size === "md" ? "h-1.5" : "h-2",
+					thumbSize: size === "sm" ? "size-3" : size === "md" ? "size-4" : "size-5",
+					trackHoverHeight: "h-1.5"
+				}),
+				[size]
+			)
+
+			// 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 | undefined>(undefined)
-		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
+				return ranges
+			}, [buffered, duration])
+
+			// Memoized event handlers
+			const handleValueChange = useCallback(
+				([value]: number[]) => {
+					const time = ((value ?? 0) / 100) * duration
+					setPreviewTime(time)
+					if (isDragging) {
+						onSeek(time)
+					}
+				},
+				[duration, isDragging, onSeek]
+			)
+
+			const handleValueCommit = useCallback(
+				([value]: number[]) => {
+					const time = ((value ?? 0) / 100) * duration
+					onSeek(time)
+					setIsDragging(false)
+				},
+				[duration, onSeek]
+			)
+
+			const handlePointerDown = useCallback(() => {
+				setIsDragging(true)
+			}, [])
+
+			const handleMouseEnter = useCallback(() => setIsHovering(true), [])
+			const handleMouseLeave = useCallback(() => setIsHovering(false), [])
+
+			const formattedTime = useMemo(() => formatTime(currentTime), [currentTime])
+			const formattedDuration = useMemo(() => formatTime(duration), [duration])
+
+			return (
+				<div
+					ref={ref}
+					className={cn(
+						"media-container relative w-full text-[color:var(--media-text)]",
+						"touch-manipulation contain-layout",
+						className
+					)}
+					onMouseEnter={handleMouseEnter}
+					onMouseLeave={handleMouseLeave}
+					role="group"
+					aria-label="Seek bar">
+					<Tooltip.Provider>
+						<Tooltip.Root>
+							<Tooltip.Trigger asChild>
+								<div className="relative animate-enter">
+									<Slider.Root
 										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}
+											"group relative flex w-full touch-none select-none items-center",
+											"focus-ring cursor-pointer",
+											sizeConfig.trackHeight
+										)}
+										value={[progress]}
+										max={100}
+										step={0.1}
+										onValueChange={handleValueChange}
+										onValueCommit={handleValueCommit}
+										onPointerDown={handlePointerDown}
+										aria-label="Seek to position"
+										aria-valuemin={0}
+										aria-valuemax={100}
+										aria-valuenow={Math.round(progress)}
+										aria-valuetext={`${formattedTime} of ${formattedDuration}`}
+										aria-orientation="horizontal">
+										<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",
+												sizeConfig.trackHoverHeight,
+												"group-hover:bg-[color:var(--media-control-bg)]/60",
+												"group-hover:border-[color:var(--media-border)]/40"
+											)}>
+											{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}%`
+													}}
+												/>
+											))}
+
+											<Slider.Range
 												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"
+													"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"
 												)}
-												style={{
-													left: `${range.start}%`,
-													width: `${range.end - range.start}%`
-												}}
 											/>
-										))}
+										</Slider.Track>
 
-										{/* Progress range with gradient */}
-										<Slider.Range 
+										<Slider.Thumb
 											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"
-											)} 
+												"block rounded-full border-white/20 bg-white",
+												"shadow-lg hover:shadow-xl",
+												sizeConfig.thumbSize,
+												"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"
+											aria-valuetext={`${formattedTime} of ${formattedDuration}`}
 										/>
-									</Slider.Track>
+									</Slider.Root>
+								</div>
+							</Tooltip.Trigger>
 
-									<Slider.Thumb
+							{isDragging && (
+								<Tooltip.Portal>
+									<Tooltip.Content
 										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"
+											"rounded bg-black/80 px-2 py-1 text-sm text-white",
+											"fade-in-0 zoom-in-95 animate-in"
 										)}
-										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>
-		)
-	}
+										sideOffset={10}>
+										{formatTime(previewTime)}
+										<Tooltip.Arrow className="fill-black/80" />
+									</Tooltip.Content>
+								</Tooltip.Portal>
+							)}
+						</Tooltip.Root>
+					</Tooltip.Provider>
+				</div>
+			)
+		}
+	)
 )
 
-SeekBar.displayName = "SeekBar"
+SeekBarComponent.displayName = "SeekBar"
+
+export const SeekBar = SeekBarComponent