@therealtinhtute/baroiplayer 1.2.1 → 2.0.0-beta.1

package/src/components/examples/enhanced-media-player-example.tsx

@@ -1,302 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { cn } from "../../lib/utils"
-import { MediaPlayer } from "../media-player"
-import { PlayButton } from "../ui/play-button"
-import { SeekBar } from "../ui/seek-bar"
-import { TimeDisplay } from "../ui/time-display"
-import { VolumeControl } from "../ui/volume-control"
-
-interface EnhancedMediaPlayerProps {
-	src: string | string[]
-	className?: string
-	title?: string
-	description?: string
-}
-
-export function EnhancedMediaPlayerExample({
-	src,
-	className,
-	title = "Sample Media",
-	description = "Demonstrating the new BaroiPlayer design system"
-}: EnhancedMediaPlayerProps) {
-	const [isControlsVisible, setIsControlsVisible] = useState(true)
-
-	return (
-		<div className={cn("mx-auto w-full max-w-4xl space-y-6", className)}>
-			{/* Media Player Title */}
-			<div className="space-y-2">
-				<h2 className="font-semibold text-[color:var(--color-text-primary)] text-fluid-xl">
-					{title}
-				</h2>
-				<p className="text-[color:var(--color-text-secondary)] text-fluid-sm">{description}</p>
-			</div>
-
-			{/* Enhanced Media Player with Custom Controls */}
-			<div
-				className={cn(
-					"group relative",
-					"hover:shadow-2xl hover:shadow-[color:var(--color-brand-primary)]/10",
-					"transition-all duration-500 ease-out"
-				)}
-				onMouseEnter={() => setIsControlsVisible(true)}
-				onMouseLeave={() => setIsControlsVisible(false)}>
-				<MediaPlayer src={src} customControls={true}>
-					{({ state, controls }) => (
-						<>
-							{/* Main Control Overlay */}
-							<div
-								className={cn(
-									"absolute inset-0 z-20 flex items-center justify-center",
-									"transition-all duration-300",
-									state.isLoading && "pointer-events-none"
-								)}>
-								<div
-									className={cn(
-										"relative",
-										"transition-all duration-300 ease-out",
-										"hover:scale-105"
-									)}>
-									<PlayButton
-										isPlaying={state.isPlaying}
-										onToggle={controls.toggle}
-										disabled={state.isLoading}
-										size="xl"
-										className={cn(
-											"transform transition-all duration-300",
-											!isControlsVisible && !state.isLoading && "scale-75 opacity-60",
-											isControlsVisible && "scale-100 opacity-100"
-										)}
-									/>
-								</div>
-							</div>
-
-							{/* Bottom Control Panel */}
-							<div
-								className={cn(
-									"absolute right-0 bottom-0 left-0 z-30",
-									"glass-strong border-[color:var(--media-border)]/30 border-t",
-									"transition-all duration-300 ease-out",
-									!isControlsVisible && "translate-y-full opacity-0",
-									isControlsVisible && "translate-y-0 opacity-100"
-								)}>
-								{/* Seek Bar Container */}
-								<div className="-mt-2 px-4">
-									<SeekBar
-										currentTime={state.currentTime}
-										duration={state.duration}
-										buffered={state.buffered}
-										onSeek={controls.seek}
-										className="w-full"
-									/>
-								</div>
-
-								{/* Main Controls Row */}
-								<div
-									className={cn(
-										"flex items-center justify-between gap-4 p-4",
-										"media-md:px-8 media-sm:px-6"
-									)}>
-									{/* Left Side - Playback Controls */}
-									<div className="flex items-center gap-3 media-sm:gap-4">
-										<PlayButton
-											isPlaying={state.isPlaying}
-											onToggle={controls.toggle}
-											disabled={state.isLoading}
-											size="md"
-										/>
-
-										<div className="media-sm:block hidden">
-											<TimeDisplay
-												currentTime={state.currentTime}
-												duration={state.duration}
-												className="font-mono text-fluid-sm"
-											/>
-										</div>
-									</div>
-
-									{/* Center - Media Information */}
-									<div className={cn("media-md:block hidden flex-1 text-center", "space-y-1")}>
-										<p className="truncate font-medium text-[color:var(--media-text)] text-fluid-sm">
-											{title}
-										</p>
-										{state.duration > 0 && (
-											<div className="text-[color:var(--media-text-secondary)] text-xs">
-												{Math.round((state.currentTime / state.duration) * 100)}% complete
-											</div>
-										)}
-									</div>
-
-									{/* Right Side - Volume & Settings */}
-									<div className="flex items-center gap-3 media-sm:gap-4">
-										<div className="media-sm:block hidden">
-											<VolumeControl
-												volume={state.volume}
-												isMuted={state.isMuted}
-												onVolumeChange={controls.setVolume}
-												onToggleMute={controls.toggleMute}
-												size="md"
-											/>
-										</div>
-
-										{/* Fullscreen Button */}
-										<button
-											onClick={controls.toggleFullscreen}
-											className={cn(
-												"group glass-strong media-control relative",
-												"size-10 touch-manipulation rounded-xl contain-layout",
-												"bg-[color:var(--media-control-bg)] backdrop-blur-sm",
-												"border border-[color:var(--media-border)]/30",
-												"text-[color:var(--media-text)] transition-all duration-300",
-												"hover:bg-[color:var(--media-control-hover)]",
-												"hover:border-[color:var(--media-border)]/50",
-												"hover:-translate-y-0.5 hover:scale-105",
-												"active:translate-y-0 active:scale-100",
-												"focus-ring"
-											)}
-											aria-label="Enter fullscreen">
-											<svg
-												className="m-auto size-5 transition-transform duration-200 group-hover:scale-110"
-												fill="none"
-												stroke="currentColor"
-												viewBox="0 0 24 24">
-												<path
-													strokeLinecap="round"
-													strokeLinejoin="round"
-													strokeWidth={2}
-													d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
-												/>
-											</svg>
-										</button>
-									</div>
-								</div>
-
-								{/* Mobile Time Display */}
-								<div className="media-sm:hidden px-4 pb-3">
-									<TimeDisplay
-										currentTime={state.currentTime}
-										duration={state.duration}
-										className="text-center font-mono text-sm"
-									/>
-								</div>
-							</div>
-
-							{/* Loading State Overlay */}
-							{state.isLoading && (
-								<div
-									className={cn(
-										"absolute inset-0 z-40 flex items-center justify-center",
-										"glass animate-enter rounded-lg",
-										"bg-[color:var(--media-bg)]/20 backdrop-blur-sm"
-									)}>
-									<div className="space-y-4 text-center text-[color:var(--media-text)]">
-										<div className="relative">
-											<div
-												className={cn(
-													"size-16 animate-spin rounded-full border-2",
-													"border-[color:var(--color-brand-accent)]/30",
-													"border-t-[color:var(--color-brand-accent)]"
-												)}></div>
-											<div
-												className={cn(
-													"absolute inset-0 size-16 rounded-full",
-													"bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]",
-													"animate-pulse opacity-20 blur-lg"
-												)}></div>
-										</div>
-										<p className="font-medium text-[color:var(--media-text-secondary)] text-fluid-base">
-											Loading {title}...
-										</p>
-									</div>
-								</div>
-							)}
-
-							{/* Error State */}
-							{state.error && (
-								<div
-									className={cn(
-										"absolute inset-0 z-40 flex items-center justify-center",
-										"glass-strong animate-enter rounded-lg",
-										"bg-[color:var(--color-error)]/10 backdrop-blur-md"
-									)}>
-									<div className="mx-auto max-w-sm space-y-4 p-6 text-center text-[color:var(--media-text)]">
-										<div className="mx-auto w-fit rounded-full bg-[color:var(--color-error)]/20 p-4">
-											<svg
-												className="size-8 text-[color:var(--color-error)]"
-												fill="none"
-												viewBox="0 0 24 24"
-												stroke="currentColor">
-												<path
-													strokeLinecap="round"
-													strokeLinejoin="round"
-													strokeWidth={2}
-													d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
-												/>
-											</svg>
-										</div>
-										<div>
-											<h3 className="mb-2 font-semibold text-fluid-lg">Playback Error</h3>
-											<p className="text-[color:var(--media-text-secondary)] text-fluid-sm">
-												{state.error}
-											</p>
-										</div>
-										<button
-											onClick={() => window.location.reload()}
-											className={cn(
-												"rounded-lg px-6 py-2 font-medium transition-all duration-200",
-												"bg-[color:var(--color-brand-primary)] text-[color:var(--media-text)]",
-												"hover:scale-105 hover:bg-[color:var(--color-brand-accent)]",
-												"focus-ring active:scale-95"
-											)}>
-											Try Again
-										</button>
-									</div>
-								</div>
-							)}
-						</>
-					)}
-				</MediaPlayer>
-			</div>
-
-			{/* Design System Showcase */}
-			<div className="grid grid-cols-1 media-lg:grid-cols-3 media-sm:grid-cols-2 gap-4">
-				<div className="glass-strong space-y-3 rounded-xl border border-[color:var(--glass-border-medium)] p-6">
-					<h3 className="font-semibold text-[color:var(--color-text-primary)] text-fluid-base">
-						Modern Colors
-					</h3>
-					<p className="text-[color:var(--color-text-secondary)] text-fluid-sm">
-						OKLCH color space for vivid, accessible colors across all displays.
-					</p>
-					<div className="flex gap-2">
-						<div className="h-4 w-4 rounded-full bg-[color:var(--color-brand-primary)] shadow-sm"></div>
-						<div className="h-4 w-4 rounded-full bg-[color:var(--color-brand-accent)] shadow-sm"></div>
-						<div className="h-4 w-4 rounded-full bg-[color:var(--color-brand-highlight)] shadow-sm"></div>
-					</div>
-				</div>
-
-				<div className="glass-strong space-y-3 rounded-xl border border-[color:var(--glass-border-medium)] p-6">
-					<h3 className="font-semibold text-[color:var(--color-text-primary)] text-fluid-base">
-						Container Queries
-					</h3>
-					<p className="text-[color:var(--color-text-secondary)] text-fluid-sm">
-						Responsive design based on container size, not just viewport.
-					</p>
-					<div className="font-mono text-[color:var(--color-text-tertiary)] text-xs">
-						@container (min-width: 480px)
-					</div>
-				</div>
-
-				<div className="glass-strong media-lg:col-span-1 media-sm:col-span-2 space-y-3 rounded-xl border border-[color:var(--glass-border-medium)] p-6">
-					<h3 className="font-semibold text-[color:var(--color-text-primary)] text-fluid-base">
-						Smooth Animations
-					</h3>
-					<p className="text-[color:var(--color-text-secondary)] text-fluid-sm">
-						Performance-optimized with CSS containment and modern easing.
-					</p>
-					<div className="h-1 w-8 animate-pulse rounded-full bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]"></div>
-				</div>
-			</div>
-		</div>
-	)
-}

package/src/components/examples/loading-states-demo.tsx

@@ -1,141 +0,0 @@
-"use client"
-
-import React, { useState } from "react"
-import { cn } from "../../lib/utils"
-import { AnimateLoadingWrapper, LoadingState } from "../LoadingState"
-import { SimpleMinimalPlayer } from "../variants/minimal/SimpleMinimalPlayer"
-
-export function LoadingStatesDemo() {
-	const [showCustomLoading, setShowCustomLoading] = useState(false)
-	const [loadingVariant, setLoadingVariant] = useState<"animate" | "spinner" | "dots" | "skeleton">(
-		"animate"
-	)
-
-	// Custom loading component example
-	const CustomLoadingComponent = ({
-		context
-	}: { context: "initial" | "seeking" | "buffering" }) => (
-		<div className="flex flex-col items-center gap-4 text-white">
-			<div className="h-16 w-16 animate-pulse rounded-full bg-gradient-to-r from-cyan-500 to-blue-500" />
-			<p className="font-medium text-sm">Custom {context} loader</p>
-		</div>
-	)
-
-	return (
-		<div className="min-h-screen bg-gray-950 p-8">
-			<div className="mx-auto max-w-6xl space-y-8">
-				<div className="text-center">
-					<h1 className="mb-4 font-bold text-3xl text-white">Loading States Demo</h1>
-					<p className="mb-6 text-gray-400">
-						Demonstrating the new AnimateLoading integration with context-aware loading text
-					</p>
-				</div>
-
-				{/* Loading state examples */}
-				<div className="mb-8 grid grid-cols-1 gap-6 md:grid-cols-3">
-					<div className="relative h-40 overflow-hidden rounded-lg bg-black">
-						<AnimateLoadingWrapper context="initial" />
-						<p className="absolute bottom-2 left-2 text-white/60 text-xs">Initial Loading</p>
-					</div>
-
-					<div className="relative h-40 overflow-hidden rounded-lg bg-black">
-						<AnimateLoadingWrapper context="seeking" />
-						<p className="absolute bottom-2 left-2 text-white/60 text-xs">Seeking</p>
-					</div>
-
-					<div className="relative h-40 overflow-hidden rounded-lg bg-black">
-						<AnimateLoadingWrapper context="buffering" />
-						<p className="absolute bottom-2 left-2 text-white/60 text-xs">Buffering</p>
-					</div>
-				</div>
-
-				{/* Controls */}
-				<div className="mb-6 flex justify-center gap-4">
-					<div className="flex items-center gap-2">
-						<label className="text-sm text-white">Loading Variant:</label>
-						<select
-							value={loadingVariant}
-							onChange={(e) => setLoadingVariant(e.target.value as any)}
-							className="rounded border border-gray-700 bg-gray-800 px-3 py-1 text-white">
-							<option value="animate">Animate (Default)</option>
-							<option value="spinner">Spinner</option>
-							<option value="dots">Dots</option>
-							<option value="skeleton">Skeleton</option>
-						</select>
-					</div>
-
-					<button
-						onClick={() => setShowCustomLoading(!showCustomLoading)}
-						className={cn(
-							"rounded-lg px-4 py-2 transition-colors",
-							showCustomLoading
-								? "bg-cyan-600 text-white"
-								: "bg-gray-800 text-gray-300 hover:bg-gray-700"
-						)}>
-						{showCustomLoading ? "Using Custom" : "Use Custom"} Loading
-					</button>
-				</div>
-
-				{/* Video Player with loading states */}
-				<div className="space-y-4">
-					<h2 className="font-semibold text-white text-xl">Live Player Example</h2>
-
-					<div className="aspect-video overflow-hidden rounded-lg bg-black">
-						<SimpleMinimalPlayer
-							src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
-							crossOrigin="anonymous"
-							showLoadingState={true}
-							loadingComponent={showCustomLoading ? CustomLoadingComponent : undefined}
-							loadingProps={{
-								variant: showCustomLoading ? undefined : loadingVariant,
-								size: "sm",
-								message: showCustomLoading ? undefined : "Custom message..."
-							}}
-						/>
-					</div>
-
-					<div className="rounded-lg bg-gray-900 p-4">
-						<h3 className="mb-2 font-medium text-white">Features:</h3>
-						<ul className="space-y-1 text-gray-300 text-sm">
-							<li>• AnimateLoading from UI package as default</li>
-							<li>• Context-aware loading messages</li>
-							<li>• No blur backdrop for better performance</li>
-							<li>• Customizable text size based on size prop</li>
-							<li>• Support for custom loading components</li>
-							<li>• Fallback to other variants (spinner, dots, skeleton)</li>
-						</ul>
-					</div>
-
-					<div className="rounded-lg bg-gray-900 p-4">
-						<h3 className="mb-2 font-medium text-white">Usage:</h3>
-						<pre className="overflow-x-auto text-green-400 text-sm">
-							<code>{`// Default with AnimateLoading
-<SimpleMinimalPlayer
-  src="video.mp4"
-  showLoadingState={true}
-/>
-
-// Custom loading component
-<SimpleMinimalPlayer
-  src="video.mp4"
-  loadingComponent={CustomLoader}
-  loadingProps={{
-    size: "sm",
-    message: "Please wait..."
-  }}
-/>
-
-// Use different variant
-<SimpleMinimalPlayer
-  src="video.mp4"
-  loadingProps={{
-    variant: "spinner"
-  }}
-/>`}</code>
-						</pre>
-					</div>
-				</div>
-			</div>
-		</div>
-	)
-}