@therealtinhtute/baroiplayer 1.0.8 → 1.1.0

package/src/components/AnimateLoading.tsx

@@ -11,105 +11,97 @@ let monaLoadingGif: string | undefined
 import monaGifSrc from "../assets/mona-loading.gif"
 
 try {
-  monaLoadingGif = (monaGifSrc as unknown) as string
+	monaLoadingGif = monaGifSrc
 } catch {
-  // GIF import failed, will use fallback
-  monaLoadingGif = undefined
+	// GIF import failed, will use fallback
+	monaLoadingGif = undefined
 }
 
 interface AnimateLoadingProps extends React.HTMLAttributes<HTMLDivElement> {
-  loadingText?: string
-  gifSrc?: string
-  showFallback?: boolean
+	loadingText?: string
+	gifSrc?: string
+	showFallback?: boolean
 }
 
 export function AnimateLoading({
-  loadingText = "Loading...",
-  gifSrc,
-  showFallback = true,
-  className,
-  ...props
+	loadingText = "Loading...",
+	gifSrc,
+	showFallback = true,
+	className,
+	...props
 }: AnimateLoadingProps) {
-  const [imageError, setImageError] = useState(false)
-  const [imageLoaded, setImageLoaded] = useState(false)
-  
-  // Try multiple paths for the GIF
-  const gifPaths = [
-    gifSrc,
-    monaLoadingGif,
-    "/mona-loading.gif",
-    "./mona-loading.gif",
-    "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" // 1x1 transparent gif as last resort
-  ].filter(Boolean) as string[]
-  
-  const [currentGifIndex, setCurrentGifIndex] = useState(0)
-  const currentGif = gifPaths[currentGifIndex]
-  
-  const handleImageError = () => {
-    if (currentGifIndex < gifPaths.length - 1) {
-      setCurrentGifIndex(currentGifIndex + 1)
-    } else {
-      setImageError(true)
-    }
-  }
-  
-  // Enhanced fallback CSS animation
-  const FallbackAnimation = () => (
-    <div className="relative h-12 w-12">
-      {/* Outer spinning gradient ring */}
-      <div className="absolute inset-0 animate-spin rounded-full bg-gradient-to-r from-cyan-400 via-blue-500 to-cyan-400 opacity-75" />
-      
-      {/* Inner background */}
-      <div className="absolute inset-1 rounded-full bg-black/90" />
-      
-      {/* Center spinning element */}
-      <div className="absolute inset-0 flex items-center justify-center">
-        <div className="relative">
-          <div className="h-8 w-8 rounded-full border-2 border-white/20" />
-          <div className="absolute inset-0 h-8 w-8 animate-spin rounded-full border-2 border-transparent border-t-cyan-400" />
-          
-          {/* Pulsing dot in center */}
-          <div className="absolute inset-0 flex items-center justify-center">
-            <div className="h-2 w-2 animate-pulse rounded-full bg-cyan-400" />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-  
-  return (
-    <div
-      className={cn(
-        "flex flex-col items-center justify-center space-y-2 rounded py-2 text-white",
-        className
-      )}
-      {...props}
-    >
-      {/* Show fallback while image is loading or if error */}
-      {(!imageLoaded || imageError) && showFallback && (
-        <FallbackAnimation />
-      )}
-      
-      {/* Try to load the actual GIF (hidden if not loaded) */}
-      {!imageError && currentGif && (
-        <img 
-          alt="loading" 
-          height={50} 
-          width={50} 
-          src={currentGif}
-          onError={handleImageError}
-          onLoad={() => setImageLoaded(true)}
-          className={cn(
-            "object-contain",
-            !imageLoaded && "hidden"
-          )}
-          style={{ display: imageLoaded ? 'block' : 'none' }}
-        />
-      )}
-      
-      <span className="mt-2 text-sm tracking-wider">
-        {loadingText}
-      </span>
-    </div>
-  )
+	const [imageError, setImageError] = useState(false)
+	const [imageLoaded, setImageLoaded] = useState(false)
+
+	// Try multiple paths for the GIF
+	const gifPaths = [
+		gifSrc,
+		monaLoadingGif,
+		"/mona-loading.gif",
+		"./mona-loading.gif",
+		"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" // 1x1 transparent gif as last resort
+	].filter(Boolean) as string[]
+
+	const [currentGifIndex, setCurrentGifIndex] = useState(0)
+	const currentGif = gifPaths[currentGifIndex]
+
+	const handleImageError = () => {
+		if (currentGifIndex < gifPaths.length - 1) {
+			setCurrentGifIndex(currentGifIndex + 1)
+		} else {
+			setImageError(true)
+		}
+	}
+
+	// Enhanced fallback CSS animation
+	const FallbackAnimation = () => (
+		<div className="relative h-12 w-12">
+			{/* Outer spinning gradient ring */}
+			<div className="absolute inset-0 animate-spin rounded-full bg-gradient-to-r from-cyan-400 via-blue-500 to-cyan-400 opacity-75" />
+
+			{/* Inner background */}
+			<div className="absolute inset-1 rounded-full bg-black/90" />
+
+			{/* Center spinning element */}
+			<div className="absolute inset-0 flex items-center justify-center">
+				<div className="relative">
+					<div className="h-8 w-8 rounded-full border-2 border-white/20" />
+					<div className="absolute inset-0 h-8 w-8 animate-spin rounded-full border-2 border-transparent border-t-cyan-400" />
+
+					{/* Pulsing dot in center */}
+					<div className="absolute inset-0 flex items-center justify-center">
+						<div className="h-2 w-2 animate-pulse rounded-full bg-cyan-400" />
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+
+	return (
+		<div
+			className={cn(
+				"flex flex-col items-center justify-center space-y-2 rounded py-2 text-white",
+				className
+			)}
+			{...props}>
+			{/* Show fallback while image is loading or if error */}
+			{(!imageLoaded || imageError) && showFallback && <FallbackAnimation />}
+
+			{/* Try to load the actual GIF (hidden if not loaded) */}
+			{!imageError && currentGif && (
+				<img
+					alt="loading"
+					height={50}
+					width={50}
+					src={currentGif}
+					onError={handleImageError}
+					onLoad={() => setImageLoaded(true)}
+					className={cn("object-contain", !imageLoaded && "hidden")}
+					style={{ display: imageLoaded ? "block" : "none" }}
+				/>
+			)}
+
+			<span className="mt-2 text-sm tracking-wider">{loadingText}</span>
+		</div>
+	)
 }

package/src/components/LoadingState.tsx

@@ -9,240 +9,231 @@ 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
+	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"
-  }
+	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"
-  }
+	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 = "initial",
+	message,
+	className,
+	textSize = "text-sm"
 }: {
-  context?: LoadingContext
-  message?: string
-  className?: string
-  textSize?: string
+	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>
-  )
+	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
+	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>
-  )
+	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
+	children: React.ReactNode
+	context?: LoadingContext
+	className?: string
 }
 
 export const CustomLoading = function CustomLoading({
-  children,
-  context = "initial",
-  className
+	children,
+	context = "initial",
+	className
 }: CustomLoadingProps) {
-  const contextStyle = contextStyles[context]
-  
-  return (
-    <div className={cn(contextStyle.wrapper, contextStyle.background, className)}>
-      {children}
-    </div>
-  )
+	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} />
-  )
+	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} />
+	)
 }