@therealtinhtute/baroiplayer 1.0.0

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

@@ -0,0 +1,381 @@
+"use client"
+
+import React from "react"
+import { MediaProvider } from "../../context/media-provider"
+import { MediaPlayerRoot } from "../media-player-root"
+import { MediaPlayerVideo } from "../media-player-video"
+import { MediaPlayerControls } from "../media-player-controls"
+import { MediaPlayerPlay } from "../media-player-play"
+import { MediaPlayerVolume } from "../media-player-volume"
+import { MediaPlayerTime } from "../media-player-time"
+import { MediaPlayerSeek } from "../media-player-seek"
+import { MediaPlayerFullscreen } from "../media-player-fullscreen"
+import {
+	EnhancedMediaWrapper,
+	MediaLoading,
+	useMediaConcurrent,
+	useMediaPerformance
+} from "../media-suspense"
+import {
+	useEnhancedMediaState
+} from "../../hooks/use-media-state"
+import {
+	useMediaActions
+} from "../../hooks/use-media-actions"
+import {
+	useMediaOptimistic
+} from "../../hooks/use-media-optimistic"
+import { useMediaErrorHandler } from "../../context/error-handling"
+import { useAutoMediaPersistence } from "../../context/persistence"
+import { useOptimisticMediaSelector } from "../../context/media-context"
+import { cn } from "../../lib/utils"
+
+// 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

@@ -0,0 +1,114 @@
+"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>
+  )
+}