@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

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

@@ -0,0 +1,142 @@
+"use client"
+
+import React, { useState } from "react"
+import { SimpleMinimalPlayer } from "../variants/minimal/SimpleMinimalPlayer"
+import { LoadingState, AnimateLoadingWrapper } from "../LoadingState"
+import { cn } from "../../lib/utils"
+
+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://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+              poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
+              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>
+  )
+}

package/dist/src/components/examples/react-19-demo.d.ts

@@ -0,0 +1,10 @@
+interface React19MediaPlayerDemoProps {
+    src: string;
+    poster?: string;
+    className?: string;
+    mediaId?: string;
+}
+export declare function React19MediaPlayerDemo({ src, poster, className, mediaId }: React19MediaPlayerDemoProps): import("react/jsx-runtime").JSX.Element;
+export declare function React19DemoExample(): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=react-19-demo.d.ts.map

package/dist/src/components/examples/react-19-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-19-demo.d.ts","sourceRoot":"","sources":["react-19-demo.tsx"],"names":[],"mappings":"AAiCA,UAAU,2BAA2B;IACpC,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,wBAAgB,sBAAsB,CAAC,EACtC,GAAG,EACH,MAAM,EACN,SAAS,EACT,OAAyB,EACzB,EAAE,2BAA2B,2CA2B7B;AAiOD,wBAAgB,kBAAkB,4CAmFjC"}

package/dist/src/components/examples/react-19-demo.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { useOptimisticMediaSelector } from "../../context/media-context";
+import { cn } from "../../lib/utils";
+export function React19MediaPlayerDemo({ src, poster, className, mediaId = "react-19-demo" }) {
+    return (_jsx(EnhancedMediaWrapper, { className: className, priority: "high", loadingFallback: _jsx(MediaLoading, { variant: "skeleton", size: "lg" }), errorFallback: ErrorFallback, children: _jsx(MediaProvider, { mediaId: mediaId, useEnhancedStore: true, enableOptimisticUpdates: true, enableErrorRecovery: true, persistenceConfig: {
+                userPreferences: true,
+                sessionState: true,
+                debounceMs: 300
+            }, retryConfig: {
+                maxRetries: 3,
+                exponentialBackoff: true
+            }, children: _jsx(MediaPlayerContent, { src: src, poster: poster }) }) }));
+}
+// Internal content component with React 19 hooks
+function MediaPlayerContent({ src, poster }) {
+    // React 19 enhanced state management
+    const mediaState = useEnhancedMediaState();
+    const { isLoading: actionLoading, errorMessage, ...actions } = useMediaActions(mediaState.state // Type assertion for store
+    );
+    // React 19 optimistic updates
+    const optimisticState = useMediaOptimistic(mediaState.state);
+    // 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) => {
+        await optimisticState.setVolumeOptimistic(newVolume);
+    };
+    const handleSeek = async (time) => {
+        await optimisticState.seekOptimistic(time);
+    };
+    const handleFullscreenToggle = async () => {
+        await optimisticState.toggleFullscreenOptimistic();
+    };
+    return (_jsxs(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, children: [_jsx(MediaPlayerVideo, { src: src, poster: poster, className: "aspect-video w-full object-contain" }), (actionLoading || isPending) && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/20", children: _jsx(MediaLoading, { variant: "spinner", size: "lg", children: actionLoading ? "Processing..." : "Updating..." }) })), _jsx(MediaPlayerControls, { className: "absolute right-0 bottom-0 left-0", children: _jsxs("div", { className: "flex items-center gap-4 bg-gradient-to-t from-black/80 to-transparent p-4", children: [_jsx(MediaPlayerPlay, { className: "text-white transition-colors hover:text-white/80" }), _jsx(MediaPlayerVolume, { className: "text-white" }), _jsx(MediaPlayerTime, { className: "min-w-[120px] font-mono text-sm text-white" }), _jsx("div", { className: "flex-1", children: _jsx(MediaPlayerSeek, { className: "w-full" }) }), _jsx(MediaPlayerFullscreen, { className: "text-white transition-colors hover:text-white/80" })] }) }), (errorMessage || errors.length > 0) && (_jsxs("div", { className: "absolute top-4 right-4 rounded-lg bg-destructive/90 px-3 py-2 text-destructive-foreground text-sm", children: [errorMessage || errors[0]?.message, _jsx("button", { onClick: () => clearError(errors[0] ? `${errors[0].action?.type}-${errors[0].timestamp}` : ''), className: "ml-2 underline hover:no-underline", children: "Dismiss" })] })), process.env.NODE_ENV === 'development' && (_jsx(PerformanceDebugPanel, { metrics: metrics, optimisticState: optimisticState, errors: errors }))] }));
+}
+// Error fallback component
+function ErrorFallback({ error, resetError }) {
+    return (_jsxs("div", { className: "flex min-h-[300px] flex-col items-center justify-center rounded-lg border border-destructive/20 bg-destructive/10 p-8", children: [_jsx("div", { className: "mb-2 font-semibold text-destructive text-xl", children: "React 19 Media Player Error" }), _jsx("div", { className: "mb-4 max-w-md text-center text-muted-foreground", children: error.message }), _jsx("button", { onClick: resetError, className: "rounded-lg bg-primary px-4 py-2 text-primary-foreground transition-colors hover:bg-primary/90", children: "Retry Player" })] }));
+}
+// Performance debug panel (development only)
+function PerformanceDebugPanel({ metrics, optimisticState, errors }) {
+    const [isExpanded, setIsExpanded] = React.useState(false);
+    if (!isExpanded) {
+        return (_jsx("button", { onClick: () => setIsExpanded(true), className: "absolute top-4 left-4 rounded bg-blue-600 px-2 py-1 text-white text-xs", children: "Debug" }));
+    }
+    return (_jsxs("div", { className: "absolute top-4 left-4 max-w-sm rounded-lg bg-black/90 p-4 font-mono text-white text-xs", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("span", { className: "font-bold", children: "React 19 Debug" }), _jsx("button", { onClick: () => setIsExpanded(false), className: "text-white/60 hover:text-white", children: "\u00D7" })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { children: ["Render Time: ", metrics.renderTime, "ms"] }), _jsxs("div", { children: ["Suspense Count: ", metrics.suspenseCount] }), _jsxs("div", { children: ["Error Count: ", metrics.errorCount] }), _jsxs("div", { children: ["Transition Count: ", metrics.transitionCount] }), _jsxs("div", { children: ["Has Optimistic: ", optimisticState.hasOptimisticUpdates ? 'Yes' : 'No'] }), _jsxs("div", { children: ["Active Errors: ", errors.length] })] }), optimisticState.differences?.length > 0 && (_jsxs("div", { className: "mt-2 border-white/20 border-t pt-2", children: [_jsx("div", { className: "mb-1 font-bold", children: "Optimistic Diffs:" }), optimisticState.differences.map((diff, i) => (_jsxs("div", { className: "text-yellow-400", children: [diff.key, ": ", JSON.stringify(diff.optimistic), "(was: ", JSON.stringify(diff.actual), ")"] }, i)))] }))] }));
+}
+// 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 (_jsxs("div", { className: "mx-auto max-w-4xl space-y-6 p-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "mb-2 font-bold text-3xl", children: "React 19 Enhanced Media Player" }), _jsx("p", { className: "text-muted-foreground", children: "Featuring useOptimistic, useActionState, Suspense, concurrent features, error handling, state persistence, and performance optimizations." })] }), _jsx("div", { className: "flex gap-4", children: videoSources.map((video) => (_jsx("button", { 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"), children: video.title }, video.src))) }), _jsx(React19MediaPlayerDemo, { src: currentSrc, poster: currentVideo.poster, mediaId: `demo-${currentSrc}`, className: "w-full" }), _jsxs("div", { className: "grid grid-cols-1 gap-4 text-sm md:grid-cols-2", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "font-semibold", children: "React 19 Features" }), _jsxs("ul", { className: "space-y-1 text-muted-foreground", children: [_jsx("li", { children: "\u2705 useOptimistic for immediate UI feedback" }), _jsx("li", { children: "\u2705 useActionState for form-like actions" }), _jsx("li", { children: "\u2705 Automatic memoization via React compiler" }), _jsx("li", { children: "\u2705 Concurrent features with Suspense" }), _jsx("li", { children: "\u2705 Enhanced error boundaries" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "font-semibold", children: "Media Features" }), _jsxs("ul", { className: "space-y-1 text-muted-foreground", children: [_jsx("li", { children: "\u2705 Optimistic play/pause/seek/volume" }), _jsx("li", { children: "\u2705 Automatic state persistence" }), _jsx("li", { children: "\u2705 Error recovery with retries" }), _jsx("li", { children: "\u2705 Touch gestures & mobile optimization" }), _jsx("li", { children: "\u2705 Performance monitoring" })] })] })] })] }));
+}

package/dist/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/dist/src/components/examples/volume-orientation-demo.d.ts

@@ -0,0 +1,2 @@
+export declare function VolumeOrientationDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=volume-orientation-demo.d.ts.map

package/dist/src/components/examples/volume-orientation-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-orientation-demo.d.ts","sourceRoot":"","sources":["volume-orientation-demo.tsx"],"names":[],"mappings":"AAKA,wBAAgB,qBAAqB,4CA4GpC"}