@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

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

@@ -1,99 +0,0 @@
-"use client"
-
-import { Pause, Play } from "lucide-react"
-import { forwardRef, memo, useMemo } 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
-
-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(
-						"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(
-							"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"
-						)}
-					/>
-
-					{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(
-							"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>
-			)
-		}
-	)
-)
-
-PlayButtonComponent.displayName = "PlayButton"
-
-export const PlayButton = PlayButtonComponent

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

@@ -1,191 +0,0 @@
-"use client"
-
-import * as Slider from "@radix-ui/react-slider"
-import * as Tooltip from "@radix-ui/react-tooltip"
-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"
-
-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])
-
-			// 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(
-											"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-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 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.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>
-			)
-		}
-	)
-)
-
-SeekBarComponent.displayName = "SeekBar"
-
-export const SeekBar = SeekBarComponent

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

@@ -1,61 +0,0 @@
-"use client"
-
-import { forwardRef, memo, useMemo } from "react"
-import { formatTime } from "../../lib/format-time"
-import { cn } from "../../lib/utils"
-import type { TimeDisplayProps } from "../../types/index"
-
-const TimeDisplayComponent = memo(
-	forwardRef<HTMLDivElement, TimeDisplayProps>(function TimeDisplay(
-		{ currentTime, duration, showRemaining = false, size = "sm", className },
-		ref
-	) {
-		const current = useMemo(() => formatTime(currentTime), [currentTime])
-		const total = useMemo(() => formatTime(duration), [duration])
-		const remaining = useMemo(() => formatTime(duration - currentTime), [duration, currentTime])
-
-		const sizeClasses: Record<"sm" | "md" | "lg" | "xl", string> = {
-			sm: "text-xs",
-			md: "text-sm",
-			lg: "text-base",
-			xl: "text-lg"
-		}
-
-		const displayTime = useMemo(
-			() => (showRemaining ? `-${remaining}` : total),
-			[showRemaining, remaining, total]
-		)
-
-		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
-				)}
-				role="timer"
-				aria-label={`${showRemaining ? "Time remaining" : "Duration"}: ${displayTime}`}
-				aria-live="off">
-				<span className="tabular-nums" aria-label="Current time">
-					{current}
-				</span>
-				<span className="mx-1 text-white" aria-hidden="true">
-					/
-				</span>
-				<span
-					className="tabular-nums"
-					aria-label={showRemaining ? "Time remaining" : "Total duration"}>
-					{displayTime}
-				</span>
-			</div>
-		)
-	})
-)
-
-TimeDisplayComponent.displayName = "TimeDisplay"
-
-export const TimeDisplay = TimeDisplayComponent

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

@@ -1,190 +0,0 @@
-"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, memo, useCallback, useMemo } 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
-
-const VolumeControlComponent = memo(
-	forwardRef<HTMLDivElement, VolumeControlProps>(function VolumeControl(
-		{ volume, isMuted, onVolumeChange, onToggleMute, size = "lg", className },
-		ref
-	) {
-		const VolumeIcon = useMemo(() => {
-			if (isMuted || volume === 0) {
-				return VolumeX
-			} else if (volume < 0.5) {
-				return Volume1
-			}
-			return Volume2
-		}, [isMuted, volume])
-
-		const buttonSizes: Record<"md" | "lg" | "xl", string> = useMemo(
-			() => ({
-				md: "h-11 w-11",
-				lg: "h-12 w-12",
-				xl: "h-14 w-14"
-			}),
-			[]
-		)
-
-		const iconSizes: Record<"md" | "lg" | "xl", string> = useMemo(
-			() => ({
-				md: "h-5 w-5",
-				lg: "h-6 w-6",
-				xl: "h-7 w-7"
-			}),
-			[]
-		)
-
-		const sliderHeight: Record<"md" | "lg" | "xl", string> = useMemo(
-			() => ({
-				md: "h-6",
-				lg: "h-7",
-				xl: "h-8"
-			}),
-			[]
-		)
-
-		const thumbSize: Record<"md" | "lg" | "xl", string> = useMemo(
-			() => ({
-				md: "h-4 w-4",
-				lg: "h-4 w-4",
-				xl: "h-5 w-5"
-			}),
-			[]
-		)
-
-		const trackHeight: Record<"md" | "lg" | "xl", string> = useMemo(
-			() => ({
-				md: "h-1.5",
-				lg: "h-2",
-				xl: "h-2.5"
-			}),
-			[]
-		)
-
-		const sliderValue = useMemo(() => [isMuted ? 0 : volume], [isMuted, volume])
-		const percentageText = useMemo(
-			() => Math.round((isMuted ? 0 : volume) * 100),
-			[isMuted, volume]
-		)
-
-		const handleToggleClick = useCallback(() => {
-			onToggleMute()
-		}, [onToggleMute])
-
-		const handleSliderChange = useCallback(
-			([value]: number[]) => {
-				onVolumeChange(value ?? 0)
-			},
-			[onVolumeChange]
-		)
-
-		const ariaLabel = isMuted ? "Unmute" : "Mute"
-		const tooltipText = ariaLabel
-
-		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={handleToggleClick}
-								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={ariaLabel}
-								aria-pressed={isMuted}>
-								<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}>
-								{tooltipText}
-								<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={sliderValue}
-						max={1}
-						step={0.01}
-						onValueChange={handleSliderChange}
-						aria-label="Volume"
-						aria-valuemin={0}
-						aria-valuemax={1}
-						aria-valuenow={volume}
-						aria-valuetext={`${percentageText} percent`}>
-						<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" aria-hidden="true">
-					{percentageText}
-				</span>
-			</div>
-		)
-	})
-)
-
-VolumeControlComponent.displayName = "VolumeControl"
-
-export const VolumeControl = VolumeControlComponent