@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

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

@@ -2,59 +2,80 @@
 
 import * as Tooltip from "@radix-ui/react-tooltip"
 import { Maximize, Minimize } from "lucide-react"
-import { forwardRef } from "react"
+import { forwardRef, memo, useMemo } from "react"
 import { cn } from "../../lib/utils"
 import type { FullscreenButtonProps } from "../../types/index"
 
-export const FullscreenButton = forwardRef<HTMLButtonElement, FullscreenButtonProps>(
-	({ isFullscreen, onToggle, disabled = false, size = "lg", className }, ref) => {
-		const Icon = isFullscreen ? Minimize : Maximize
-		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 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]
+			)
 
-		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",
-								buttonSizes[size],
-								className
-							)}
-							aria-label={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}>
-							<Icon 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}>
-							{isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
-							<Tooltip.Arrow className="fill-black/80" />
-						</Tooltip.Content>
-					</Tooltip.Portal>
-				</Tooltip.Root>
-			</Tooltip.Provider>
-		)
-	}
+			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>
+			)
+		}
+	)
 )
 
-FullscreenButton.displayName = "FullscreenButton"
+FullscreenButtonComponent.displayName = "FullscreenButton"
+
+export const FullscreenButton = FullscreenButtonComponent

package/src/components/ui/loading-skeleton.tsx

@@ -0,0 +1,107 @@
+import { memo } from "react"
+import { cn } from "../../lib/utils"
+
+interface LoadingSkeletonProps {
+	className?: string
+	variant?: "text" | "circular" | "rectangular" | "rounded"
+	animation?: "pulse" | "wave" | "none"
+	width?: number | string
+	height?: number | string
+}
+
+const variantStyles = {
+	text: "rounded",
+	circular: "rounded-full",
+	rectangular: "rounded-none",
+	rounded: "rounded-lg"
+}
+
+const animationStyles = {
+	pulse: "animate-pulse",
+	wave: "animate-pulse",
+	none: ""
+}
+
+const LoadingSkeletonComponent = memo(function LoadingSkeleton({
+	className,
+	variant = "text",
+	animation = "pulse",
+	width,
+	height
+}: LoadingSkeletonProps) {
+	return (
+		<div
+			className={cn(
+				"bg-[color:var(--media-skeleton)]",
+				variantStyles[variant],
+				animation === "wave" &&
+					"bg-[length:200%_100%] bg-gradient-to-r from-[color:var(--media-skeleton)] via-[color:var(--media-skeleton-light)] to-[color:var(--media-skeleton)]",
+				animationStyles[animation],
+				className
+			)}
+			style={{ width, height }}
+			role="status"
+			aria-label="Loading content"
+		/>
+	)
+})
+
+interface LoadingSkeletonListProps {
+	count?: number
+	className?: string
+	itemClassName?: string
+}
+
+export const LoadingSkeletonList = memo(function LoadingSkeletonList({
+	count = 3,
+	className,
+	itemClassName
+}: LoadingSkeletonListProps) {
+	return (
+		<div className={cn("space-y-4", className)}>
+			{Array.from({ length: count }).map((_, i) => (
+				<LoadingSkeletonComponent
+					key={i}
+					variant="rounded"
+					width="100%"
+					height={60}
+					className={itemClassName}
+				/>
+			))}
+		</div>
+	)
+})
+
+interface LoadingPlayerSkeletonProps {
+	className?: string
+	showTimeDisplay?: boolean
+	showControls?: boolean
+}
+
+export const LoadingPlayerSkeleton = memo(function LoadingPlayerSkeleton({
+	className,
+	showTimeDisplay = true,
+	showControls = true
+}: LoadingPlayerSkeletonProps) {
+	return (
+		<div className={cn("relative overflow-hidden rounded-lg bg-black", className)}>
+			<LoadingSkeletonComponent
+				variant="rectangular"
+				width="100%"
+				height="100%"
+				className="aspect-video"
+			/>
+			<div className="absolute right-0 bottom-0 left-0 p-4">
+				{showTimeDisplay && (
+					<div className="mb-2 flex justify-between">
+						<LoadingSkeletonComponent variant="text" width={60} height={16} />
+						<LoadingSkeletonComponent variant="text" width={60} height={16} />
+					</div>
+				)}
+				{showControls && <LoadingSkeletonComponent variant="rounded" width="100%" height={8} />}
+			</div>
+		</div>
+	)
+})
+
+export { LoadingSkeletonComponent as LoadingSkeleton }