@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/components/examples/react-19-demo.tsx

@@ -1,353 +0,0 @@
-"use client"
-
-import React from "react"
-import { useMediaErrorHandler } from "../../context/error-handling"
-import { useOptimisticMediaSelector } from "../../context/media-context"
-import { MediaProvider } from "../../context/media-provider"
-import { useAutoMediaPersistence } from "../../context/persistence"
-import { useMediaActions } from "../../hooks/use-media-actions"
-import { useMediaOptimistic } from "../../hooks/use-media-optimistic"
-import { useEnhancedMediaState } from "../../hooks/use-media-state"
-import { cn } from "../../lib/utils"
-import { MediaPlayerControls } from "../media-player-controls"
-import { MediaPlayerFullscreen } from "../media-player-fullscreen"
-import { MediaPlayerPlay } from "../media-player-play"
-import { MediaPlayerRoot } from "../media-player-root"
-import { MediaPlayerSeek } from "../media-player-seek"
-import { MediaPlayerTime } from "../media-player-time"
-import { MediaPlayerVideo } from "../media-player-video"
-import { MediaPlayerVolume } from "../media-player-volume"
-import {
-	EnhancedMediaWrapper,
-	MediaLoading,
-	useMediaConcurrent,
-	useMediaPerformance
-} from "../media-suspense"
-
-// Demo component showcasing React 19 features
-interface React19MediaPlayerDemoProps {
-	src: string
-	poster?: string
-	className?: string
-	mediaId?: string
-}
-
-export function React19MediaPlayerDemo({
-	src,
-	poster,
-	className,
-	mediaId = "react-19-demo"
-}: React19MediaPlayerDemoProps) {
-	return (
-		<EnhancedMediaWrapper
-			className={className}
-			priority="high"
-			loadingFallback={<MediaLoading variant="skeleton" size="lg" />}
-			errorFallback={ErrorFallback}>
-			<MediaProvider
-				mediaId={mediaId}
-				useEnhancedStore={true}
-				enableOptimisticUpdates={true}
-				enableErrorRecovery={true}
-				persistenceConfig={{
-					userPreferences: true,
-					sessionState: true,
-					debounceMs: 300
-				}}
-				retryConfig={{
-					maxRetries: 3,
-					exponentialBackoff: true
-				}}>
-				<MediaPlayerContent src={src} poster={poster} />
-			</MediaProvider>
-		</EnhancedMediaWrapper>
-	)
-}
-
-// Internal content component with React 19 hooks
-function MediaPlayerContent({ src, poster }: { src: string; poster?: string }) {
-	// React 19 enhanced state management
-	const mediaState = useEnhancedMediaState()
-	const {
-		isLoading: actionLoading,
-		errorMessage,
-		...actions
-	} = useMediaActions(
-		mediaState.state as any // Type assertion for store
-	)
-
-	// React 19 optimistic updates
-	const optimisticState = useMediaOptimistic(mediaState.state as any)
-
-	// React 19 concurrent features
-	const { isPending, updateWithTransition } = useMediaConcurrent()
-
-	// Performance monitoring
-	const { metrics, recordRenderTime } = useMediaPerformance()
-
-	// Error handling
-	const { errors, clearError } = useMediaErrorHandler()
-
-	// Record render performance
-	React.useEffect(() => {
-		const start = performance.now()
-		return () => recordRenderTime(start)
-	}, [recordRenderTime])
-
-	// Optimistic selectors for immediate UI feedback
-	const isPlaying = useOptimisticMediaSelector((state) => state.isPlaying)
-	const volume = useOptimisticMediaSelector((state) => state.volume)
-	const currentTime = useOptimisticMediaSelector((state) => state.currentTime)
-	const duration = useOptimisticMediaSelector((state) => state.duration)
-	const isFullscreen = useOptimisticMediaSelector((state) => state.isFullscreen)
-
-	// Enhanced action handlers with React 19 features
-	const handlePlayPause = async () => {
-		await updateWithTransition(async () => {
-			await optimisticState.togglePlayPause()
-		})
-	}
-
-	const handleVolumeChange = async (newVolume: number) => {
-		await optimisticState.setVolumeOptimistic(newVolume)
-	}
-
-	const handleSeek = async (time: number) => {
-		await optimisticState.seekOptimistic(time)
-	}
-
-	const handleFullscreenToggle = async () => {
-		await optimisticState.toggleFullscreenOptimistic()
-	}
-
-	return (
-		<MediaPlayerRoot
-			className={cn(
-				"group relative overflow-hidden rounded-lg",
-				"border border-border bg-black shadow-lg",
-				"transition-all duration-200",
-				isPending && "opacity-75", // Visual feedback for pending transitions
-				actionLoading && "pointer-events-none"
-			)}
-			enableGestures={true}
-			enableMobileOptimizations={true}>
-			{/* Video Element */}
-			<MediaPlayerVideo src={src} poster={poster} className="aspect-video w-full object-contain" />
-
-			{/* Enhanced Loading State */}
-			{(actionLoading || isPending) && (
-				<div className="absolute inset-0 flex items-center justify-center bg-black/20">
-					<MediaLoading variant="spinner" size="lg">
-						{actionLoading ? "Processing..." : "Updating..."}
-					</MediaLoading>
-				</div>
-			)}
-
-			{/* Controls with React 19 optimizations */}
-			<MediaPlayerControls className="absolute right-0 bottom-0 left-0">
-				<div className="flex items-center gap-4 bg-gradient-to-t from-black/80 to-transparent p-4">
-					{/* Play/Pause with optimistic updates */}
-					<MediaPlayerPlay className="text-white transition-colors hover:text-white/80" />
-
-					{/* Volume with immediate feedback */}
-					<MediaPlayerVolume className="text-white" />
-
-					{/* Time Display with optimistic values */}
-					<MediaPlayerTime className="min-w-[120px] font-mono text-sm text-white" />
-
-					{/* Seek Bar with optimistic scrubbing */}
-					<div className="flex-1">
-						<MediaPlayerSeek className="w-full" />
-					</div>
-
-					{/* Fullscreen with optimistic updates */}
-					<MediaPlayerFullscreen className="text-white transition-colors hover:text-white/80" />
-				</div>
-			</MediaPlayerControls>
-
-			{/* Error Display */}
-			{(errorMessage || errors.length > 0) && (
-				<div className="absolute top-4 right-4 rounded-lg bg-destructive/90 px-3 py-2 text-destructive-foreground text-sm">
-					{errorMessage || errors[0]?.message}
-					<button
-						onClick={() =>
-							clearError(errors[0] ? `${errors[0].action?.type}-${errors[0].timestamp}` : "")
-						}
-						className="ml-2 underline hover:no-underline">
-						Dismiss
-					</button>
-				</div>
-			)}
-
-			{/* Performance Debug Info (Development only) */}
-			{process.env.NODE_ENV === "development" && (
-				<PerformanceDebugPanel
-					metrics={metrics}
-					optimisticState={optimisticState}
-					errors={errors}
-				/>
-			)}
-		</MediaPlayerRoot>
-	)
-}
-
-// Error fallback component
-function ErrorFallback({
-	error,
-	resetError
-}: {
-	error: Error
-	resetError: () => void
-}) {
-	return (
-		<div className="flex min-h-[300px] flex-col items-center justify-center rounded-lg border border-destructive/20 bg-destructive/10 p-8">
-			<div className="mb-2 font-semibold text-destructive text-xl">React 19 Media Player Error</div>
-			<div className="mb-4 max-w-md text-center text-muted-foreground">{error.message}</div>
-			<button
-				onClick={resetError}
-				className="rounded-lg bg-primary px-4 py-2 text-primary-foreground transition-colors hover:bg-primary/90">
-				Retry Player
-			</button>
-		</div>
-	)
-}
-
-// Performance debug panel (development only)
-function PerformanceDebugPanel({
-	metrics,
-	optimisticState,
-	errors
-}: {
-	metrics: any
-	optimisticState: any
-	errors: any[]
-}) {
-	const [isExpanded, setIsExpanded] = React.useState(false)
-
-	if (!isExpanded) {
-		return (
-			<button
-				onClick={() => setIsExpanded(true)}
-				className="absolute top-4 left-4 rounded bg-blue-600 px-2 py-1 text-white text-xs">
-				Debug
-			</button>
-		)
-	}
-
-	return (
-		<div className="absolute top-4 left-4 max-w-sm rounded-lg bg-black/90 p-4 font-mono text-white text-xs">
-			<div className="mb-2 flex items-center justify-between">
-				<span className="font-bold">React 19 Debug</span>
-				<button onClick={() => setIsExpanded(false)} className="text-white/60 hover:text-white">
-					×
-				</button>
-			</div>
-
-			<div className="space-y-1">
-				<div>Render Time: {metrics.renderTime}ms</div>
-				<div>Suspense Count: {metrics.suspenseCount}</div>
-				<div>Error Count: {metrics.errorCount}</div>
-				<div>Transition Count: {metrics.transitionCount}</div>
-				<div>Has Optimistic: {optimisticState.hasOptimisticUpdates ? "Yes" : "No"}</div>
-				<div>Active Errors: {errors.length}</div>
-			</div>
-
-			{optimisticState.differences?.length > 0 && (
-				<div className="mt-2 border-white/20 border-t pt-2">
-					<div className="mb-1 font-bold">Optimistic Diffs:</div>
-					{optimisticState.differences.map((diff: any, i: number) => (
-						<div key={i} className="text-yellow-400">
-							{diff.key}: {JSON.stringify(diff.optimistic)}
-							(was: {JSON.stringify(diff.actual)})
-						</div>
-					))}
-				</div>
-			)}
-		</div>
-	)
-}
-
-// Example usage component
-export function React19DemoExample() {
-	const [currentSrc, setCurrentSrc] = React.useState(
-		"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
-	)
-
-	const videoSources = [
-		{
-			src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
-			title: "Big Buck Bunny",
-			poster:
-				"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
-		},
-		{
-			src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
-			title: "Elephants Dream",
-			poster:
-				"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg"
-		}
-	]
-
-	const currentVideo = videoSources.find((v) => v.src === currentSrc)!
-
-	return (
-		<div className="mx-auto max-w-4xl space-y-6 p-6">
-			<div>
-				<h1 className="mb-2 font-bold text-3xl">React 19 Enhanced Media Player</h1>
-				<p className="text-muted-foreground">
-					Featuring useOptimistic, useActionState, Suspense, concurrent features, error handling,
-					state persistence, and performance optimizations.
-				</p>
-			</div>
-
-			{/* Video Source Selector */}
-			<div className="flex gap-4">
-				{videoSources.map((video) => (
-					<button
-						key={video.src}
-						onClick={() => setCurrentSrc(video.src)}
-						className={cn(
-							"rounded-lg border px-4 py-2 transition-colors",
-							currentSrc === video.src
-								? "border-primary bg-primary text-primary-foreground"
-								: "border-border bg-background hover:border-primary/50"
-						)}>
-						{video.title}
-					</button>
-				))}
-			</div>
-
-			{/* Enhanced Media Player */}
-			<React19MediaPlayerDemo
-				src={currentSrc}
-				poster={currentVideo.poster}
-				mediaId={`demo-${currentSrc}`}
-				className="w-full"
-			/>
-
-			{/* Feature List */}
-			<div className="grid grid-cols-1 gap-4 text-sm md:grid-cols-2">
-				<div className="space-y-2">
-					<h3 className="font-semibold">React 19 Features</h3>
-					<ul className="space-y-1 text-muted-foreground">
-						<li>✅ useOptimistic for immediate UI feedback</li>
-						<li>✅ useActionState for form-like actions</li>
-						<li>✅ Automatic memoization via React compiler</li>
-						<li>✅ Concurrent features with Suspense</li>
-						<li>✅ Enhanced error boundaries</li>
-					</ul>
-				</div>
-				<div className="space-y-2">
-					<h3 className="font-semibold">Media Features</h3>
-					<ul className="space-y-1 text-muted-foreground">
-						<li>✅ Optimistic play/pause/seek/volume</li>
-						<li>✅ Automatic state persistence</li>
-						<li>✅ Error recovery with retries</li>
-						<li>✅ Touch gestures & mobile optimization</li>
-						<li>✅ Performance monitoring</li>
-					</ul>
-				</div>
-			</div>
-		</div>
-	)
-}

package/src/components/examples/volume-orientation-demo.tsx

@@ -1,106 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { SimpleMinimalPlayer } from "../variants/minimal/SimpleMinimalPlayer"
-
-export function VolumeOrientationDemo() {
-	const [orientation, setOrientation] = useState<"horizontal" | "vertical">("horizontal")
-
-	return (
-		<div className="min-h-screen bg-gray-950 p-8">
-			<div className="mx-auto max-w-5xl space-y-8">
-				<div className="text-center">
-					<h1 className="mb-4 font-bold text-3xl text-white">Enhanced Volume Control Demo</h1>
-					<p className="mb-6 text-gray-400">
-						Small gradient volume slider with horizontal/vertical orientation
-					</p>
-
-					{/* Orientation toggle */}
-					<div className="mb-8 flex justify-center gap-4">
-						<button
-							onClick={() => setOrientation("horizontal")}
-							className={`rounded-lg px-4 py-2 transition-colors ${
-								orientation === "horizontal"
-									? "bg-cyan-600 text-white"
-									: "bg-gray-800 text-gray-400 hover:bg-gray-700"
-							}`}>
-							Horizontal (Default)
-						</button>
-						<button
-							onClick={() => setOrientation("vertical")}
-							className={`rounded-lg px-4 py-2 transition-colors ${
-								orientation === "vertical"
-									? "bg-cyan-600 text-white"
-									: "bg-gray-800 text-gray-400 hover:bg-gray-700"
-							}`}>
-							Vertical
-						</button>
-					</div>
-				</div>
-
-				{/* Demo Player */}
-				<div className="aspect-video overflow-hidden rounded-lg bg-black">
-					<SimpleMinimalPlayer
-						src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
-						poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
-						crossOrigin="anonymous"
-						className="h-full w-full"
-						volumeOrientation={orientation}
-					/>
-				</div>
-
-				{/* Features list */}
-				<div className="mt-8 grid gap-6 md:grid-cols-2">
-					<div className="rounded-lg bg-gray-900 p-6">
-						<h3 className="mb-3 font-semibold text-lg text-white">Horizontal Mode (Default)</h3>
-						<ul className="space-y-2 text-gray-400 text-sm">
-							<li>• Slider appears beside the volume button</li>
-							<li>• Expands horizontally on hover</li>
-							<li>• Cyan to blue gradient (4px height)</li>
-							<li>• Smooth 300ms transition</li>
-							<li>• White thumb appears on hover</li>
-						</ul>
-					</div>
-
-					<div className="rounded-lg bg-gray-900 p-6">
-						<h3 className="mb-3 font-semibold text-lg text-white">Vertical Mode</h3>
-						<ul className="space-y-2 text-gray-400 text-sm">
-							<li>• Slider appears above the volume button</li>
-							<li>• Expands vertically on hover</li>
-							<li>• Same gradient rotated 90°</li>
-							<li>• Shows percentage value</li>
-							<li>• Dark backdrop for visibility</li>
-						</ul>
-					</div>
-				</div>
-
-				{/* Code example */}
-				<div className="rounded-lg bg-gray-900 p-6">
-					<h3 className="mb-3 font-semibold text-lg text-white">Usage Example</h3>
-					<pre className="overflow-x-auto text-gray-300 text-sm">
-						<code>{`// Default horizontal orientation
-<VolumeControl
-  volume={volume}
-  isMuted={isMuted}
-  showVolumeSlider={showSlider}
-  onToggleMute={handleMute}
-  onVolumeChange={handleVolumeChange}
-  onShowVolumeSlider={setShowSlider}
-/>
-
-// Vertical orientation
-<VolumeControl
-  volume={volume}
-  isMuted={isMuted}
-  showVolumeSlider={showSlider}
-  onToggleMute={handleMute}
-  onVolumeChange={handleVolumeChange}
-  onShowVolumeSlider={setShowSlider}
-  orientation="vertical"
-/>`}</code>
-					</pre>
-				</div>
-			</div>
-		</div>
-	)
-}

package/src/components/icon-demo.tsx

@@ -1,196 +0,0 @@
-import { useState } from "react"
-import {
-	FullscreenIcon,
-	IconProvider,
-	LoadingIcon,
-	PauseIcon,
-	PlayIcon,
-	PlayPauseIcon,
-	SettingsIcon,
-	VolumeIcon,
-	VolumeOffIcon
-} from "../icons"
-
-export function IconSystemDemo() {
-	const [isPlaying, setIsPlaying] = useState(false)
-	const [volume, setVolume] = useState(0.8)
-	const [theme, setTheme] = useState({
-		size: 24,
-		strokeWidth: 2,
-		color: "currentColor"
-	})
-
-	const customPlayIcon = ({ className, ...props }: any) => (
-		<svg className={className} width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
-			<circle cx="12" cy="12" r="10" fill="#ff6b6b" />
-			<polygon points="10 8 16 12 10 16 10 8" fill="white" />
-		</svg>
-	)
-
-	return (
-		<div className="min-h-screen bg-gray-950 p-8">
-			<div className="mx-auto max-w-4xl">
-				<h1 className="mb-8 text-center font-bold text-3xl text-white">Icon System Demo</h1>
-
-				{/* Theme Controls */}
-				<div className="mb-8 rounded-lg bg-gray-800 p-6">
-					<h2 className="mb-4 font-semibold text-white text-xl">Theme Configuration</h2>
-					<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-						<div>
-							<label className="mb-2 block font-medium text-sm text-white">
-								Size: {theme.size}
-							</label>
-							<input
-								type="range"
-								min="16"
-								max="48"
-								value={theme.size}
-								onChange={(e) => setTheme((prev) => ({ ...prev, size: Number(e.target.value) }))}
-								className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700"
-							/>
-						</div>
-						<div>
-							<label className="mb-2 block font-medium text-sm text-white">
-								Stroke Width: {theme.strokeWidth}
-							</label>
-							<input
-								type="range"
-								min="1"
-								max="4"
-								step="0.5"
-								value={theme.strokeWidth}
-								onChange={(e) =>
-									setTheme((prev) => ({ ...prev, strokeWidth: Number(e.target.value) }))
-								}
-								className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700"
-							/>
-						</div>
-						<div>
-							<label className="mb-2 block font-medium text-sm text-white">Color</label>
-							<select
-								value={theme.color}
-								onChange={(e) => setTheme((prev) => ({ ...prev, color: e.target.value }))}
-								className="w-full rounded-lg border border-gray-600 bg-gray-700 p-2 text-white">
-								<option value="currentColor">Current Color</option>
-								<option value="#ffffff">White</option>
-								<option value="#06b6d4">Cyan</option>
-								<option value="#f59e0b">Amber</option>
-								<option value="#ef4444">Red</option>
-							</select>
-						</div>
-					</div>
-				</div>
-
-				<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-					{/* Default Icons */}
-					<div className="rounded-lg bg-gray-800 p-6">
-						<h2 className="mb-4 font-semibold text-white text-xl">Default Icons</h2>
-						<IconProvider theme={theme}>
-							<div className="grid grid-cols-4 gap-4 text-white">
-								<div className="flex flex-col items-center space-y-2">
-									<PlayIcon />
-									<span className="text-xs">Play</span>
-								</div>
-								<div className="flex flex-col items-center space-y-2">
-									<PauseIcon />
-									<span className="text-xs">Pause</span>
-								</div>
-								<div className="flex flex-col items-center space-y-2">
-									<VolumeIcon />
-									<span className="text-xs">Volume</span>
-								</div>
-								<div className="flex flex-col items-center space-y-2">
-									<VolumeOffIcon />
-									<span className="text-xs">Mute</span>
-								</div>
-								<div className="flex flex-col items-center space-y-2">
-									<SettingsIcon />
-									<span className="text-xs">Settings</span>
-								</div>
-								<div className="flex flex-col items-center space-y-2">
-									<FullscreenIcon />
-									<span className="text-xs">Fullscreen</span>
-								</div>
-								<div className="flex flex-col items-center space-y-2">
-									<LoadingIcon />
-									<span className="text-xs">Loading</span>
-								</div>
-								<div className="flex flex-col items-center space-y-2">
-									<PlayPauseIcon isPlaying={isPlaying} />
-									<span className="text-xs">Play/Pause</span>
-								</div>
-							</div>
-						</IconProvider>
-					</div>
-
-					{/* Custom Icons */}
-					<div className="rounded-lg bg-gray-800 p-6">
-						<h2 className="mb-4 font-semibold text-white text-xl">Custom Icons</h2>
-						<IconProvider
-							theme={theme}
-							icons={{
-								play: customPlayIcon
-							}}>
-							<div className="grid grid-cols-4 gap-4 text-white">
-								<div className="flex flex-col items-center space-y-2">
-									<PlayIcon />
-									<span className="text-xs">Custom Play</span>
-								</div>
-								<div className="flex flex-col items-center space-y-2">
-									<PauseIcon />
-									<span className="text-xs">Default Pause</span>
-								</div>
-								<div className="flex flex-col items-center space-y-2">
-									<VolumeIcon />
-									<span className="text-xs">Default Volume</span>
-								</div>
-								<div className="flex flex-col items-center space-y-2">
-									<SettingsIcon />
-									<span className="text-xs">Default Settings</span>
-								</div>
-							</div>
-						</IconProvider>
-					</div>
-				</div>
-
-				{/* Interactive Demo */}
-				<div className="mt-8 rounded-lg bg-gray-800 p-6">
-					<h2 className="mb-4 font-semibold text-white text-xl">Interactive Media Player Demo</h2>
-					<IconProvider theme={{ ...theme, size: 32 }}>
-						<div className="flex items-center justify-center space-x-6 text-white">
-							<button
-								onClick={() => setIsPlaying(!isPlaying)}
-								className="rounded-full bg-blue-600 p-3 transition-colors hover:bg-blue-700"
-								aria-label={isPlaying ? "Pause" : "Play"}>
-								<PlayPauseIcon isPlaying={isPlaying} />
-							</button>
-
-							<button
-								onClick={() => setVolume(volume > 0 ? 0 : 0.8)}
-								className="rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700"
-								aria-label={volume > 0 ? "Mute" : "Unmute"}>
-								{volume > 0 ? <VolumeIcon /> : <VolumeOffIcon />}
-							</button>
-
-							<button
-								className="rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700"
-								aria-label="Settings">
-								<SettingsIcon />
-							</button>
-
-							<button
-								className="rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700"
-								aria-label="Fullscreen">
-								<FullscreenIcon />
-							</button>
-						</div>
-					</IconProvider>
-
-					<div className="mt-4 text-center text-gray-400 text-sm">
-						Status: {isPlaying ? "Playing" : "Paused"} | Volume: {volume > 0 ? "On" : "Muted"}
-					</div>
-				</div>
-			</div>
-		</div>
-	)
-}