@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/components/ui/blur-poster.tsx

@@ -1,93 +0,0 @@
-import { memo } from "react"
-import { cn } from "../../lib/utils"
-
-interface BlurPosterProps {
-	src: string
-	alt: string
-	className?: string
-	intensity?: "low" | "medium" | "high"
-	transitionDuration?: number
-}
-
-const intensityClasses = {
-	low: "blur-sm",
-	medium: "blur-md",
-	high: "blur-lg"
-}
-
-const BlurPosterComponent = memo(function BlurPoster({
-	src,
-	alt,
-	className,
-	intensity = "medium",
-	transitionDuration = 300
-}: BlurPosterProps) {
-	return (
-		<div
-			className={cn(
-				"relative overflow-hidden bg-black/20",
-				"before:absolute before:inset-0 before:bg-center before:bg-cover before:opacity-100",
-				`before:[background-image:url('${src}')]`,
-				`before:[filter:blur(${intensity === "low" ? "8px" : intensity === "medium" ? "16px" : "32px"})]`,
-				className
-			)}
-			aria-label={alt}
-			role="img">
-			<div
-				className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/20"
-				style={{ transitionDuration: `${transitionDuration}ms` }}
-			/>
-		</div>
-	)
-})
-
-interface BlurPosterWithPlaceholderProps {
-	src: string
-	placeholderSrc?: string
-	alt: string
-	className?: string
-	intensity?: "low" | "medium" | "high"
-	isLoading?: boolean
-	children?: React.ReactNode
-}
-
-export const BlurPosterWithPlaceholder = memo(function BlurPosterWithPlaceholder({
-	src,
-	placeholderSrc,
-	alt,
-	className,
-	intensity = "medium",
-	isLoading = true,
-	children
-}: BlurPosterWithPlaceholderProps) {
-	return (
-		<div className={cn("relative overflow-hidden", className)}>
-			{isLoading ? (
-				<>
-					{placeholderSrc && (
-						<img
-							src={placeholderSrc}
-							alt=""
-							className={cn("absolute inset-0 h-full w-full object-cover", `scale-105 blur-md`)}
-							aria-hidden="true"
-						/>
-					)}
-					<div
-						className={cn(
-							"absolute inset-0 bg-center bg-cover opacity-0 transition-opacity duration-500",
-							!isLoading && "opacity-100",
-							`[background-image:url('${src}')]`,
-							`[filter:blur(${intensity === "low" ? "8px" : intensity === "medium" ? "16px" : "32px"})]`
-						)}
-						aria-hidden="true"
-					/>
-				</>
-			) : (
-				<img src={src} alt={alt} className="absolute inset-0 h-full w-full object-cover" />
-			)}
-			{children}
-		</div>
-	)
-})
-
-export const BlurPoster = BlurPosterComponent

package/src/components/ui/empty-state.tsx

@@ -1,91 +0,0 @@
-import { Film, FolderOpen, Music, Play, Search } from "lucide-react"
-import { type ReactNode, memo } from "react"
-import { cn } from "../../lib/utils"
-
-export interface EmptyStateProps {
-	title?: string
-	description?: string
-	icon?: ReactNode
-	action?: ReactNode
-	className?: string
-	variant?: "default" | "media" | "playlist" | "search" | "folder"
-}
-
-const variantIcons = {
-	default: null,
-	media: <Film size={48} className="text-[color:var(--media-text-secondary)]" />,
-	playlist: <Play size={48} className="text-[color:var(--media-text-secondary)]" />,
-	search: <Search size={48} className="text-[color:var(--media-text-secondary)]" />,
-	folder: <FolderOpen size={48} className="text-[color:var(--media-text-secondary)]" />
-}
-
-const EmptyStateComponent = memo(function EmptyState({
-	title = "No content here",
-	description,
-	icon,
-	action,
-	className,
-	variant = "default"
-}: EmptyStateProps) {
-	const displayIcon = icon ?? variantIcons[variant]
-
-	return (
-		<div
-			className={cn(
-				"flex flex-col items-center justify-center p-8 text-center",
-				"rounded-lg bg-[color:var(--media-bg)]",
-				className
-			)}
-			role="status"
-			aria-live="polite">
-			{displayIcon && (
-				<div className="mb-4" aria-hidden="true">
-					{displayIcon}
-				</div>
-			)}
-			<h3 className="mb-2 font-semibold text-[color:var(--media-text)] text-lg">{title}</h3>
-			{description && (
-				<p className="mb-4 max-w-sm text-[color:var(--media-text-secondary)] text-sm">
-					{description}
-				</p>
-			)}
-			{action && <div>{action}</div>}
-		</div>
-	)
-})
-
-interface MediaEmptyStateProps {
-	type?: "video" | "audio" | "playlist"
-	action?: ReactNode
-	className?: string
-}
-
-export const MediaEmptyState = memo(function MediaEmptyState({
-	type = "video",
-	action,
-	className
-}: MediaEmptyStateProps) {
-	const titles = {
-		video: "No video available",
-		audio: "No audio tracks",
-		playlist: "Playlist is empty"
-	}
-
-	const descriptions = {
-		video: "Select a video to start watching",
-		audio: "Add audio files to your library",
-		playlist: "Add videos to your playlist to see them here"
-	}
-
-	return (
-		<EmptyStateComponent
-			title={titles[type]}
-			description={descriptions[type]}
-			variant={type === "video" ? "media" : type === "audio" ? "media" : "playlist"}
-			action={action}
-			className={className}
-		/>
-	)
-})
-
-export { EmptyStateComponent as EmptyState }

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

@@ -1,254 +0,0 @@
-"use client"
-
-import * as Slider from "@radix-ui/react-slider"
-import * as Tooltip from "@radix-ui/react-tooltip"
-import {
-	forwardRef,
-	useCallback,
-	useDeferredValue,
-	useMemo,
-	useRef,
-	useState,
-	useTransition
-} 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 | undefined>(undefined)
-		const lastSeekTime = useRef<number>(0)
-		const rafId = useRef<number | undefined>(undefined)
-
-		// 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/error-state.tsx

@@ -1,124 +0,0 @@
-import { AlertTriangle, Info, RefreshCw, XCircle } from "lucide-react"
-import { memo } from "react"
-import { cn } from "../../lib/utils"
-
-export interface ErrorStateProps {
-	title?: string
-	message?: string
-	error?: Error | string
-	severity?: "error" | "warning" | "info"
-	onRetry?: () => void
-	retryLabel?: string
-	className?: string
-	showIcon?: boolean
-}
-
-const severityConfig = {
-	error: {
-		icon: XCircle,
-		iconColor: "text-red-500",
-		bgColor: "bg-red-500/10",
-		borderColor: "border-red-500/20"
-	},
-	warning: {
-		icon: AlertTriangle,
-		iconColor: "text-amber-500",
-		bgColor: "bg-amber-500/10",
-		borderColor: "border-amber-500/20"
-	},
-	info: {
-		icon: Info,
-		iconColor: "text-blue-500",
-		bgColor: "bg-blue-500/10",
-		borderColor: "border-blue-500/20"
-	}
-}
-
-const ErrorStateComponent = memo(function ErrorState({
-	title = "Something went wrong",
-	message = "An unexpected error occurred. Please try again.",
-	error,
-	severity = "error",
-	onRetry,
-	retryLabel = "Try again",
-	className,
-	showIcon = true
-}: ErrorStateProps) {
-	const config = severityConfig[severity]
-	const Icon = config.icon
-	const errorMessage = typeof error === "string" ? error : error?.message
-
-	return (
-		<div
-			className={cn(
-				"flex flex-col items-center justify-center p-8 text-center",
-				config.bgColor,
-				config.borderColor,
-				"rounded-lg border",
-				className
-			)}
-			role="alert"
-			aria-live="assertive">
-			{showIcon && (
-				<div className={cn("mb-4 rounded-full p-3", config.bgColor)} aria-hidden="true">
-					<Icon size={48} className={config.iconColor} />
-				</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}
-				{errorMessage && (
-					<code className="mt-2 block rounded bg-black/20 p-2 font-mono text-xs">
-						{errorMessage}
-					</code>
-				)}
-			</p>
-			{onRetry && (
-				<button
-					onClick={onRetry}
-					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 MediaErrorStateProps {
-	error: Error | string
-	onRetry?: () => void
-	onBack?: () => void
-	className?: string
-}
-
-export const MediaErrorState = memo(function MediaErrorState({
-	error,
-	onRetry,
-	onBack,
-	className
-}: MediaErrorStateProps) {
-	const errorMessage = typeof error === "string" ? error : error.message
-
-	return (
-		<ErrorStateComponent
-			title="Unable to play media"
-			message={
-				errorMessage ||
-				"The media could not be loaded. This could be due to a network issue or an unsupported format."
-			}
-			severity="error"
-			onRetry={onRetry}
-			retryLabel="Retry"
-			className={className}
-		/>
-	)
-})
-
-export { ErrorStateComponent as ErrorState }

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

@@ -1,81 +0,0 @@
-"use client"
-
-import * as Tooltip from "@radix-ui/react-tooltip"
-import { Maximize, Minimize } from "lucide-react"
-import { forwardRef, memo, useMemo } from "react"
-import { cn } from "../../lib/utils"
-import type { FullscreenButtonProps } from "../../types/index"
-
-const FullscreenButtonComponent = memo(
-	forwardRef<HTMLButtonElement, FullscreenButtonProps>(
-		({ isFullscreen, onToggle, disabled = false, size = "lg", className }, ref) => {
-			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", number> = {
-				md: 20,
-				lg: 24,
-				xl: 28
-			}
-
-			const sizeConfig = useMemo(
-				() => ({
-					button: buttonSizes[size] || buttonSizes.lg,
-					icon: iconSizes[size] || iconSizes.lg
-				}),
-				[size]
-			)
-
-			const Icon = useMemo(() => (isFullscreen ? Minimize : Maximize), [isFullscreen])
-			const ariaLabel = useMemo(
-				() => (isFullscreen ? "Exit fullscreen" : "Enter fullscreen"),
-				[isFullscreen]
-			)
-			const tooltipText = useMemo(
-				() => (isFullscreen ? "Exit fullscreen" : "Enter fullscreen"),
-				[isFullscreen]
-			)
-
-			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",
-									sizeConfig.button,
-									className
-								)}
-								aria-label={ariaLabel}>
-								<Icon size={sizeConfig.icon} />
-							</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}>
-								{tooltipText}
-								<Tooltip.Arrow className="fill-black/80" />
-							</Tooltip.Content>
-						</Tooltip.Portal>
-					</Tooltip.Root>
-				</Tooltip.Provider>
-			)
-		}
-	)
-)
-
-FullscreenButtonComponent.displayName = "FullscreenButton"
-
-export const FullscreenButton = FullscreenButtonComponent