@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

package/src/components/react-player-wrapper.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import "../styles/pixel-art.css"
-import { Button } from "../components/ui/button"
+import { Button } from "@rp/ui"
 import {
 	DownloadIcon,
 	ExitFullscreenIcon,
@@ -21,8 +21,8 @@ import {
 	SpeedIcon,
 	SubtitlesIcon,
 	VolumeIcon
-} from "../components/ui/icons"
-import { Slider } from "../components/ui/slider"
+} from "@rp/ui"
+import { Slider } from "@rp/ui"
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -30,8 +30,8 @@ import {
 	DropdownMenuLabel,
 	DropdownMenuSeparator,
 	DropdownMenuTrigger
-} from "../components/ui/dropdown-menu"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../components/ui/tooltip"
+} from "@rp/ui"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@rp/ui"
 import React, { useState, useRef, useEffect, useCallback, Suspense, lazy } from "react"
 // Dynamic import for lazy loading
 const ReactPlayer = lazy(() => import("react-player"))
@@ -188,16 +188,16 @@ export function ModernMediaPlayer({
 
 	// Handle mouse movement for auto-hiding controls
 	const handleMouseMove = () => {
-    		setShowControls(true)
-    		if (controlsTimeoutRef.current) {
-    			clearTimeout(controlsTimeoutRef.current)
-    		}
-    		if (isPlaying) {
-    			controlsTimeoutRef.current = setTimeout(() => {
-    				setShowControls(false)
-    			}, 3000)
-    		}
-    	}
+		setShowControls(true)
+		if (controlsTimeoutRef.current) {
+			clearTimeout(controlsTimeoutRef.current)
+		}
+		if (isPlaying) {
+			controlsTimeoutRef.current = setTimeout(() => {
+				setShowControls(false)
+			}, 3000)
+		}
+	}
 
 	useEffect(() => {
 		return () => {
@@ -209,14 +209,14 @@ export function ModernMediaPlayer({
 
 	// Fullscreen handling
 	const toggleFullscreen = () => {
-    		if (!document.fullscreenElement) {
-    			containerRef.current?.requestFullscreen()
-    			setIsFullscreen(true)
-    		} else {
-    			document.exitFullscreen()
-    			setIsFullscreen(false)
-    		}
-    	}
+		if (!document.fullscreenElement) {
+			containerRef.current?.requestFullscreen()
+			setIsFullscreen(true)
+		} else {
+			document.exitFullscreen()
+			setIsFullscreen(false)
+		}
+	}
 
 	// Keyboard shortcuts
 	useEffect(() => {

package/src/components/simple-video-player.tsx

@@ -4,57 +4,59 @@ import React, { useEffect, useRef } from "react"
 import "video.js/dist/video-js.css"
 
 export function SimpleVideoPlayer({ src, type = "video/mp4" }: { src: string; type?: string }) {
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const playerRef = useRef<any>(null)
-
-  useEffect(() => {
-    const loadPlayer = async () => {
-      if (!videoRef.current || playerRef.current) return
-
-      // Dynamically import video.js
-      const videojs = (await import("video.js")).default
-      
-      // Initialize player
-      const player = videojs(videoRef.current, {
-        controls: true,
-        autoplay: false,
-        preload: 'auto',
-        fluid: true,
-        sources: [{
-          src: src,
-          type: type
-        }]
-      })
-
-      playerRef.current = player
-
-      player.ready(() => {
-        console.log("Player is ready!")
-      })
-    }
-
-    loadPlayer()
-
-    // Cleanup
-    return () => {
-      if (playerRef.current) {
-        playerRef.current.dispose()
-        playerRef.current = null
-      }
-    }
-  }, [src, type])
-
-  return (
-    <div className="w-full">
-      <div data-vjs-player>
-        <video 
-          ref={videoRef} 
-          className="video-js vjs-big-play-centered vjs-default-skin w-full"
-          playsInline
-        />
-      </div>
-    </div>
-  )
+	const videoRef = useRef<HTMLVideoElement>(null)
+	const playerRef = useRef<any>(null)
+
+	useEffect(() => {
+		const loadPlayer = async () => {
+			if (!videoRef.current || playerRef.current) return
+
+			// Dynamically import video.js
+			const videojs = (await import("video.js")).default
+
+			// Initialize player
+			const player = videojs(videoRef.current, {
+				controls: true,
+				autoplay: false,
+				preload: "auto",
+				fluid: true,
+				sources: [
+					{
+						src: src,
+						type: type
+					}
+				]
+			})
+
+			playerRef.current = player
+
+			player.ready(() => {
+				console.log("Player is ready!")
+			})
+		}
+
+		loadPlayer()
+
+		// Cleanup
+		return () => {
+			if (playerRef.current) {
+				playerRef.current.dispose()
+				playerRef.current = null
+			}
+		}
+	}, [src, type])
+
+	return (
+		<div className="w-full">
+			<div data-vjs-player>
+				<video
+					ref={videoRef}
+					className="video-js vjs-big-play-centered vjs-default-skin w-full"
+					playsInline
+				/>
+			</div>
+		</div>
+	)
 }
 
 SimpleVideoPlayer.displayName = "SimpleVideoPlayer"

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

@@ -0,0 +1,93 @@
+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

@@ -0,0 +1,91 @@
+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

@@ -2,7 +2,15 @@
 
 import * as Slider from "@radix-ui/react-slider"
 import * as Tooltip from "@radix-ui/react-tooltip"
-import { forwardRef, useCallback, useState, useMemo, useTransition, useDeferredValue, useRef } from "react"
+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"
@@ -20,12 +28,15 @@ export const EnhancedSeekBar = forwardRef<HTMLDivElement, SeekBarProps>(
 		const deferredPreviewTime = useDeferredValue(previewTime)
 
 		// Throttling refs
-		const seekTimeoutRef = useRef<NodeJS.Timeout>()
+		const seekTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
 		const lastSeekTime = useRef<number>(0)
-		const rafId = useRef<number>()
+		const rafId = useRef<number | undefined>(undefined)
 
 		// Memoize expensive calculations
-		const progress = useMemo(() => duration > 0 ? (currentTime / duration) * 100 : 0, [currentTime, duration])
+		const progress = useMemo(
+			() => (duration > 0 ? (currentTime / duration) * 100 : 0),
+			[currentTime, duration]
+		)
 
 		// Calculate buffered ranges with memoization
 		const bufferedRanges = useMemo(() => {
@@ -41,65 +52,72 @@ export const EnhancedSeekBar = forwardRef<HTMLDivElement, SeekBarProps>(
 		}, [buffered, duration])
 
 		// Optimized value change handler with throttling and RAF
-		const handleValueChange = useCallback(([value]: number[]) => {
-			const time = ((value ?? 0) / 100) * duration
-
-			setPreviewTime(time)
+		const handleValueChange = useCallback(
+			([value]: number[]) => {
+				const time = ((value ?? 0) / 100) * duration
 
-			// Cancel any pending RAF
-			if (rafId.current) {
-				cancelAnimationFrame(rafId.current)
-			}
+				setPreviewTime(time)
 
-			if (isDragging) {
-				// Clear previous timeout
-				if (seekTimeoutRef.current) {
-					clearTimeout(seekTimeoutRef.current)
+				// Cancel any pending RAF
+				if (rafId.current) {
+					cancelAnimationFrame(rafId.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(() => {
+				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 = performance.now()
-						}, 16)
-					}
-				})
-			}
-		}, [duration, isDragging, onSeek, currentTime, startTransition])
+							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
+		const handleValueCommit = useCallback(
+			([value]: number[]) => {
+				const time = ((value ?? 0) / 100) * duration
 
-			// Cancel any pending RAF
-			if (rafId.current) {
-				cancelAnimationFrame(rafId.current)
-			}
+				// Cancel any pending RAF
+				if (rafId.current) {
+					cancelAnimationFrame(rafId.current)
+				}
 
-			// Clear any pending seeks
-			if (seekTimeoutRef.current) {
-				clearTimeout(seekTimeoutRef.current)
-			}
+				// Clear any pending seeks
+				if (seekTimeoutRef.current) {
+					clearTimeout(seekTimeoutRef.current)
+				}
 
-			startTransition(() => {
-				onSeek(time)
-			})
-			setIsDragging(false)
-		}, [duration, onSeek, startTransition])
+				startTransition(() => {
+					onSeek(time)
+				})
+				setIsDragging(false)
+			},
+			[duration, onSeek, startTransition]
+		)
 
 		const handlePointerDown = useCallback(() => {
 			setIsDragging(true)
@@ -121,10 +139,11 @@ export const EnhancedSeekBar = forwardRef<HTMLDivElement, SeekBarProps>(
 		// 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"
-				)}>
+				<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>
 			)
@@ -180,7 +199,7 @@ export const EnhancedSeekBar = forwardRef<HTMLDivElement, SeekBarProps>(
 												style={{
 													left: `${range.start}%`,
 													width: `${range.end - range.start}%`,
-													willChange: 'width, left'
+													willChange: "width, left"
 												}}
 											/>
 										))}
@@ -232,4 +251,4 @@ export const EnhancedSeekBar = forwardRef<HTMLDivElement, SeekBarProps>(
 	}
 )
 
-EnhancedSeekBar.displayName = "EnhancedSeekBar"
+EnhancedSeekBar.displayName = "EnhancedSeekBar"

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

@@ -0,0 +1,124 @@
+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 }