@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

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

@@ -1,116 +1,116 @@
 "use client"
 
 import React, { useState } from "react"
-import { SimpleMinimalPlayer } from "../variants/minimal/SimpleMinimalPlayer"
-import { LoadingState, AnimateLoadingWrapper } from "../LoadingState"
 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://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
+	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}
@@ -133,10 +133,10 @@ export function LoadingStatesDemo() {
     variant: "spinner"
   }}
 />`}</code>
-            </pre>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
+						</pre>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
 }

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

@@ -1,34 +1,28 @@
 "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 { MediaPlayerRoot } from "../media-player-root"
-import { MediaPlayerVideo } from "../media-player-video"
+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 { MediaPlayerVolume } from "../media-player-volume"
-import { MediaPlayerTime } from "../media-player-time"
+import { MediaPlayerRoot } from "../media-player-root"
 import { MediaPlayerSeek } from "../media-player-seek"
-import { MediaPlayerFullscreen } from "../media-player-fullscreen"
+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"
-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 {
@@ -49,8 +43,7 @@ export function React19MediaPlayerDemo({
 			className={className}
 			priority="high"
 			loadingFallback={<MediaLoading variant="skeleton" size="lg" />}
-			errorFallback={ErrorFallback}
-		>
+			errorFallback={ErrorFallback}>
 			<MediaProvider
 				mediaId={mediaId}
 				useEnhancedStore={true}
@@ -64,8 +57,7 @@ export function React19MediaPlayerDemo({
 				retryConfig={{
 					maxRetries: 3,
 					exponentialBackoff: true
-				}}
-			>
+				}}>
 				<MediaPlayerContent src={src} poster={poster} />
 			</MediaProvider>
 		</EnhancedMediaWrapper>
@@ -76,54 +68,58 @@ export function React19MediaPlayerDemo({
 function MediaPlayerContent({ src, poster }: { src: string; poster?: string }) {
 	// React 19 enhanced state management
 	const mediaState = useEnhancedMediaState()
-	const { isLoading: actionLoading, errorMessage, ...actions } = useMediaActions(
+	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)
-	
+	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(
@@ -134,15 +130,10 @@ function MediaPlayerContent({ src, poster }: { src: string; poster?: string }) {
 				actionLoading && "pointer-events-none"
 			)}
 			enableGestures={true}
-			enableMobileOptimizations={true}
-		>
+			enableMobileOptimizations={true}>
 			{/* Video Element */}
-			<MediaPlayerVideo
-				src={src}
-				poster={poster}
-				className="aspect-video w-full object-contain"
-			/>
-			
+			<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">
@@ -151,54 +142,45 @@ function MediaPlayerContent({ src, poster }: { src: string; poster?: string }) {
 					</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"
-					/>
-					
+					<MediaPlayerPlay className="text-white transition-colors hover:text-white/80" />
+
 					{/* Volume with immediate feedback */}
-					<MediaPlayerVolume
-						className="text-white"
-					/>
-					
+					<MediaPlayerVolume className="text-white" />
+
 					{/* Time Display with optimistic values */}
-					<MediaPlayerTime
-						className="min-w-[120px] font-mono text-sm text-white"
-					/>
-					
+					<MediaPlayerTime className="min-w-[120px] font-mono text-sm text-white" />
+
 					{/* Seek Bar with optimistic scrubbing */}
 					<div className="flex-1">
-						<MediaPlayerSeek
-							className="w-full"
-						/>
+						<MediaPlayerSeek className="w-full" />
 					</div>
-					
+
 					{/* Fullscreen with optimistic updates */}
-					<MediaPlayerFullscreen
-						className="text-white transition-colors hover:text-white/80"
-					/>
+					<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"
-					>
+						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' && (
+			{process.env.NODE_ENV === "development" && (
 				<PerformanceDebugPanel
 					metrics={metrics}
 					optimisticState={optimisticState}
@@ -210,25 +192,20 @@ function MediaPlayerContent({ src, poster }: { src: string; poster?: string }) {
 }
 
 // Error fallback component
-function ErrorFallback({ 
-	error, 
-	resetError 
-}: { 
+function ErrorFallback({
+	error,
+	resetError
+}: {
 	error: Error
-	resetError: () => void 
+	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>
+			<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"
-			>
+				className="rounded-lg bg-primary px-4 py-2 text-primary-foreground transition-colors hover:bg-primary/90">
 				Retry Player
 			</button>
 		</div>
@@ -246,45 +223,41 @@ function PerformanceDebugPanel({
 	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"
-			>
+				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 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>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)} 
+							{diff.key}: {JSON.stringify(diff.optimistic)}
 							(was: {JSON.stringify(diff.actual)})
 						</div>
 					))}
@@ -299,34 +272,34 @@ 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"
+			poster:
+				"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
 		},
 		{
-			src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4", 
+			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"
+			poster:
+				"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg"
 		}
 	]
-	
-	const currentVideo = videoSources.find(v => v.src === currentSrc)!
-	
+
+	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>
+				<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.
+					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) => (
@@ -338,13 +311,12 @@ export function React19DemoExample() {
 							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}
@@ -352,7 +324,7 @@ export function React19DemoExample() {
 				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">
@@ -378,4 +350,4 @@ export function React19DemoExample() {
 			</div>
 		</div>
 	)
-}
+}