@therealtinhtute/baroiplayer 1.0.8 → 1.1.0

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

@@ -1,381 +0,0 @@
-"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

@@ -1,2 +0,0 @@
-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.tsx

@@ -1,114 +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/dist/src/components/icon-demo.d.ts

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