@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/components/LoadingState.tsx

@@ -1,239 +0,0 @@
-"use client"
-
-import React from "react"
-import { cn } from "../lib/utils"
-import { AnimateLoading } from "./AnimateLoading"
-
-export type LoadingVariant = "animate" | "spinner" | "skeleton" | "dots"
-export type LoadingContext = "initial" | "seeking" | "buffering"
-export type LoadingSize = "sm" | "md" | "lg" | "xl"
-
-export interface LoadingStateProps {
-	variant?: LoadingVariant
-	context?: LoadingContext
-	size?: LoadingSize
-	color?: string
-	message?: string
-	showMessage?: boolean
-	className?: string
-	style?: React.CSSProperties
-}
-
-const sizeMap: Record<LoadingSize, { container: string; spinner: string; dots: string }> = {
-	sm: {
-		container: "h-8 w-8",
-		spinner: "h-6 w-6 border-2",
-		dots: "h-1.5 w-1.5"
-	},
-	md: {
-		container: "h-12 w-12",
-		spinner: "h-10 w-10 border-3",
-		dots: "h-2 w-2"
-	},
-	lg: {
-		container: "h-16 w-16",
-		spinner: "h-14 w-14 border-4",
-		dots: "h-2.5 w-2.5"
-	},
-	xl: {
-		container: "h-20 w-20",
-		spinner: "h-18 w-18 border-4",
-		dots: "h-3 w-3"
-	}
-}
-
-const contextStyles: Record<LoadingContext, { wrapper: string; background: string }> = {
-	initial: {
-		wrapper: "absolute inset-0 z-50 flex items-center justify-center",
-		background: "bg-black/80"
-	},
-	seeking: {
-		wrapper: "absolute inset-0 z-40 flex items-center justify-center",
-		background: "bg-black/40"
-	},
-	buffering: {
-		wrapper: "absolute inset-0 z-45 flex items-center justify-center",
-		background: "bg-black/60"
-	}
-}
-
-// Default AnimateLoading wrapper component
-export const AnimateLoadingWrapper = function AnimateLoadingWrapper({
-	context = "initial",
-	message,
-	className,
-	textSize = "text-sm"
-}: {
-	context?: LoadingContext
-	message?: string
-	className?: string
-	textSize?: string
-}) {
-	const contextStyle = contextStyles[context]
-
-	const getLoadingText = () => {
-		if (message) return message
-
-		switch (context) {
-			case "initial":
-				return "Loading video..."
-			case "seeking":
-				return "Seeking..."
-			case "buffering":
-				return "Buffering..."
-			default:
-				return "Loading..."
-		}
-	}
-
-	return (
-		<div className={cn(contextStyle.wrapper, contextStyle.background, className)}>
-			<AnimateLoading loadingText={getLoadingText()} className={cn("text-white", textSize)} />
-		</div>
-	)
-}
-
-export const LoadingState = function LoadingState({
-	variant = "animate",
-	context = "initial",
-	size = "md",
-	color,
-	message,
-	showMessage = true,
-	className,
-	style
-}: LoadingStateProps) {
-	const sizes = sizeMap[size]
-	const contextStyle = contextStyles[context]
-
-	// Use AnimateLoading as default
-	if (variant === "animate") {
-		return (
-			<AnimateLoadingWrapper
-				context={context}
-				message={message}
-				className={className}
-				textSize={size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm"}
-			/>
-		)
-	}
-
-	const renderLoadingIndicator = () => {
-		switch (variant) {
-			case "spinner":
-				return (
-					<div
-						className={cn(
-							"minimal-loading-spinner animate-spin rounded-full",
-							"border-white/20 border-t-cyan-500",
-							sizes.spinner,
-							className
-						)}
-						style={{
-							borderTopColor: color || undefined,
-							...style
-						}}
-					/>
-				)
-
-			case "dots":
-				return (
-					<div className="flex items-center gap-1">
-						{[0, 1, 2].map((i) => (
-							<div
-								key={i}
-								className={cn(
-									"minimal-loading-dot rounded-full bg-cyan-500",
-									sizes.dots,
-									className
-								)}
-								style={{
-									backgroundColor: color || undefined,
-									animationDelay: `${i * 150}ms`,
-									...style
-								}}
-							/>
-						))}
-					</div>
-				)
-
-			case "skeleton":
-				return (
-					<div className={cn("space-y-3", className)}>
-						<div className="minimal-loading-skeleton h-4 w-32 rounded bg-white/10" />
-						<div className="minimal-loading-skeleton h-3 w-24 rounded bg-white/10" />
-						<div className="minimal-loading-skeleton h-3 w-28 rounded bg-white/10" />
-					</div>
-				)
-
-			default:
-				return null
-		}
-	}
-
-	const getMessage = () => {
-		if (message) return message
-
-		switch (context) {
-			case "initial":
-				return "Loading video..."
-			case "seeking":
-				return "Seeking..."
-			case "buffering":
-				return "Buffering..."
-			default:
-				return "Loading..."
-		}
-	}
-
-	return (
-		<div className={cn(contextStyle.wrapper, contextStyle.background)}>
-			<div className="flex flex-col items-center gap-4">
-				<div className={cn(sizes.container, "flex items-center justify-center")}>
-					{renderLoadingIndicator()}
-				</div>
-
-				{showMessage && (
-					<div className="text-center">
-						<p className="font-medium text-sm text-white/90">{getMessage()}</p>
-						{context === "buffering" && (
-							<p className="mt-1 text-white/60 text-xs">Please wait...</p>
-						)}
-					</div>
-				)}
-			</div>
-		</div>
-	)
-}
-
-// Custom loading component wrapper
-export interface CustomLoadingProps {
-	children: React.ReactNode
-	context?: LoadingContext
-	className?: string
-}
-
-export const CustomLoading = function CustomLoading({
-	children,
-	context = "initial",
-	className
-}: CustomLoadingProps) {
-	const contextStyle = contextStyles[context]
-
-	return (
-		<div className={cn(contextStyle.wrapper, contextStyle.background, className)}>{children}</div>
-	)
-}
-
-// Export default presets
-export const LoadingPresets = {
-	Initial: (props: Partial<LoadingStateProps>) => (
-		<LoadingState variant="animate" context="initial" size="md" {...props} />
-	),
-	Seeking: (props: Partial<LoadingStateProps>) => (
-		<LoadingState variant="animate" context="seeking" size="sm" {...props} />
-	),
-	Buffering: (props: Partial<LoadingStateProps>) => (
-		<LoadingState variant="animate" context="buffering" size="sm" {...props} />
-	)
-}