@therealtinhtute/baroiplayer 1.0.0

package/src/components/variants/minimal/EnhancedMinimalMediaPlayer.tsx

@@ -0,0 +1,552 @@
+"use client"
+
+import React, {
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+	useTransition,
+	useOptimistic,
+	useDeferredValue,
+	Suspense,
+} from "react"
+import { MediaPlayerRoot } from "../../media-player-root"
+import { MediaPlayerVideo } from "../../media-player-video"
+import { MinimalControls } from "./MinimalControls"
+import { MinimalOverlay } from "./MinimalOverlay"
+import { MinimalLoading } from "./MinimalLoading"
+import { PerformanceIndicator } from "../../enhanced/enhanced-controls"
+import { DebugPanel } from "../../enhanced/debug-panel"
+import { useIntelligentPreloading } from "../../../hooks/use-intelligent-preloading"
+import { cn } from "../../../lib/utils"
+import type { IconSet } from "../../icons"
+import { defaultMinimalIcons } from "../../icons"
+
+export interface EnhancedMinimalMediaPlayerProps {
+	src: string | string[]
+	poster?: string
+	autoPlay?: boolean
+	muted?: boolean
+	loop?: boolean
+	autoHideControls?: boolean
+	hideDelay?: number
+	theme?: "dark" | "light" | "transparent"
+	customIcons?: IconSet
+	showCenterPlayButton?: boolean
+	showLoadingSpinner?: boolean
+	className?: string
+	onPlay?: () => void
+	onPause?: () => void
+	onEnded?: () => void
+	onTimeUpdate?: (currentTime: number) => void
+	onVolumeChange?: (volume: number) => void
+	onSeek?: (time: number) => void
+	onError?: (error: Error) => void
+	watermark?: {
+		src: string
+		position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
+		opacity?: number
+		size?: "small" | "medium" | "large"
+	}
+	qualities?: Array<{
+		src: string
+		quality: string
+		default?: boolean
+	}>
+	showQualitySelector?: boolean
+	showSpeedControl?: boolean
+	thumbnails?: string
+
+	// Enhanced features
+	enableIntelligentPreloading?: boolean
+	enablePerformanceMonitoring?: boolean
+	showDebugPanel?: boolean
+	preloadingStrategy?: 'conservative' | 'balanced' | 'aggressive'
+	enableReact19Optimizations?: boolean
+}
+
+interface MediaState {
+	isPlaying: boolean
+	isLoading: boolean
+	error: string | null
+	controlsVisible: boolean
+	isHovered: boolean
+	userInteracting: boolean
+}
+
+interface PerformanceMetrics {
+	fps: number
+	bufferHealth: number
+	quality: number
+	bandwidth: number
+}
+
+export function EnhancedMinimalMediaPlayer({
+	src,
+	poster,
+	autoPlay = false,
+	muted = false,
+	loop = false,
+	autoHideControls = true,
+	hideDelay = 2500,
+	theme = "dark",
+	customIcons,
+	showCenterPlayButton = true,
+	showLoadingSpinner = true,
+	className,
+	onPlay,
+	onPause,
+	onEnded,
+	onTimeUpdate,
+	onVolumeChange,
+	onSeek,
+	onError,
+	watermark,
+	qualities,
+	showQualitySelector = false,
+	showSpeedControl = false,
+	thumbnails,
+
+	// Enhanced features
+	enableIntelligentPreloading = true,
+	enablePerformanceMonitoring = process.env.NODE_ENV === 'development',
+	showDebugPanel = false,
+	preloadingStrategy = 'balanced',
+	enableReact19Optimizations = true,
+}: EnhancedMinimalMediaPlayerProps) {
+	// React 19 concurrent features
+	const [isPending, startTransition] = useTransition()
+
+	// Optimistic state for instant UI updates
+	const optimisticState = useOptimistic(
+		{ isPlaying: false, isLoading: false, controlsVisible: true },
+		(state, update: Partial<MediaState>) => ({ ...state, ...update })
+	)
+
+	// Deferred values for non-critical updates
+	const deferredCurrentTime = useDeferredValue(0)
+	const deferredVolume = useDeferredValue(1)
+
+	// State management
+	const [mediaState, setMediaState] = useState<MediaState>({
+		isPlaying: false,
+		isLoading: false,
+		error: null,
+		controlsVisible: true,
+		isHovered: false,
+		userInteracting: false,
+	})
+
+	// Performance metrics
+	const [performanceMetrics, setPerformanceMetrics] = useState<PerformanceMetrics>({
+		fps: 0,
+		bufferHealth: 0,
+		quality: 0,
+		bandwidth: 0,
+	})
+
+	// Refs
+	const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+	const containerRef = useRef<HTMLDivElement | null>(null)
+	const videoRef = useRef<HTMLVideoElement | null>(null)
+	const frameCountRef = useRef(0)
+	const lastTimeRef = useRef(performance.now())
+
+	// Merge default icons with custom icons
+	const icons = { ...defaultMinimalIcons, ...customIcons }
+
+	// Prepare media sources for preloading
+	const mediaSources = React.useMemo(() => {
+		if (qualities && qualities.length > 0) {
+			return qualities.map(q => ({ src: q.src, type: 'video/mp4' }))
+		}
+		const sources = Array.isArray(src) ? src : [src]
+		return sources.map(s => ({ src: s, type: 'video/mp4' }))
+	}, [src, qualities])
+
+	// Intelligent preloading
+	const preloadingControls = useIntelligentPreloading(mediaSources, {
+		trackUserBehavior: enableIntelligentPreloading,
+		adaptToNetwork: true,
+		strategy: preloadingStrategy,
+		maxPreloadItems: 2,
+	})
+
+	// Auto-hide controls logic
+	const resetHideTimer = useCallback(() => {
+		if (!autoHideControls) return
+
+		if (hideTimeoutRef.current) {
+			clearTimeout(hideTimeoutRef.current)
+		}
+
+		startTransition(() => {
+			setMediaState(prev => ({ ...prev, controlsVisible: true }))
+		})
+
+		if (!mediaState.userInteracting && mediaState.isPlaying) {
+			hideTimeoutRef.current = setTimeout(() => {
+				startTransition(() => {
+					setMediaState(prev => ({ ...prev, controlsVisible: false }))
+				})
+			}, hideDelay)
+		}
+	}, [autoHideControls, hideDelay, mediaState.userInteracting, mediaState.isPlaying, startTransition])
+
+	// Handle mouse movement
+	const handleMouseMove = useCallback(() => {
+		resetHideTimer()
+	}, [resetHideTimer])
+
+	// Handle mouse enter/leave
+	const handleMouseEnter = useCallback(() => {
+		startTransition(() => {
+			setMediaState(prev => ({ ...prev, isHovered: true, controlsVisible: true }))
+		})
+		if (hideTimeoutRef.current) {
+			clearTimeout(hideTimeoutRef.current)
+		}
+	}, [startTransition])
+
+	const handleMouseLeave = useCallback(() => {
+		startTransition(() => {
+			setMediaState(prev => ({ ...prev, isHovered: false }))
+		})
+		if (mediaState.isPlaying && autoHideControls && !mediaState.userInteracting) {
+			hideTimeoutRef.current = setTimeout(() => {
+				startTransition(() => {
+					setMediaState(prev => ({ ...prev, controlsVisible: false }))
+				})
+			}, 500)
+		}
+	}, [mediaState.isPlaying, autoHideControls, mediaState.userInteracting, startTransition])
+
+	// Handle user interaction
+	const handleUserInteractionStart = useCallback(() => {
+		startTransition(() => {
+			setMediaState(prev => ({ ...prev, userInteracting: true, controlsVisible: true }))
+		})
+		if (hideTimeoutRef.current) {
+			clearTimeout(hideTimeoutRef.current)
+		}
+	}, [startTransition])
+
+	const handleUserInteractionEnd = useCallback(() => {
+		startTransition(() => {
+			setMediaState(prev => ({ ...prev, userInteracting: false }))
+		})
+		resetHideTimer()
+	}, [resetHideTimer, startTransition])
+
+	// Handle play state changes
+	const handlePlayStateChange = useCallback((playing: boolean) => {
+		startTransition(() => {
+			setMediaState(prev => ({ ...prev, isPlaying: playing }))
+		})
+
+		if (playing) {
+			onPlay?.()
+			resetHideTimer()
+		} else {
+			onPause?.()
+			startTransition(() => {
+				setMediaState(prev => ({ ...prev, controlsVisible: true }))
+			})
+			if (hideTimeoutRef.current) {
+				clearTimeout(hideTimeoutRef.current)
+			}
+		}
+	}, [onPlay, onPause, resetHideTimer, startTransition])
+
+	// Handle loading state
+	const handleLoadStart = useCallback(() => {
+		startTransition(() => {
+			setMediaState(prev => ({ ...prev, isLoading: true, error: null }))
+		})
+	}, [startTransition])
+
+	const handleLoadedData = useCallback(() => {
+		startTransition(() => {
+			setMediaState(prev => ({ ...prev, isLoading: false }))
+		})
+	}, [startTransition])
+
+	// Handle errors
+	const handleError = useCallback((e: Error) => {
+		startTransition(() => {
+			setMediaState(prev => ({ ...prev, isLoading: false, error: e.message || "An error occurred" }))
+		})
+		onError?.(e)
+	}, [onError, startTransition])
+
+	// Performance monitoring
+	useEffect(() => {
+		if (!enablePerformanceMonitoring) return
+
+		const measureFPS = () => {
+			frameCountRef.current++
+			const currentTime = performance.now()
+
+			if (currentTime - lastTimeRef.current >= 1000) {
+				const fps = Math.round((frameCountRef.current * 1000) / (currentTime - lastTimeRef.current))
+
+				startTransition(() => {
+					setPerformanceMetrics(prev => ({ ...prev, fps }))
+				})
+
+				frameCountRef.current = 0
+				lastTimeRef.current = currentTime
+			}
+
+			if (videoRef.current && !videoRef.current.paused) {
+				requestAnimationFrame(measureFPS)
+			}
+		}
+
+		if (videoRef.current) {
+			videoRef.current.addEventListener('play', measureFPS)
+		}
+
+		return () => {
+			if (videoRef.current) {
+				videoRef.current.removeEventListener('play', measureFPS)
+			}
+		}
+	}, [enablePerformanceMonitoring, startTransition])
+
+	// Buffer health monitoring
+	useEffect(() => {
+		if (!enablePerformanceMonitoring || !videoRef.current) return
+
+		const updateBufferHealth = () => {
+			if (videoRef.current) {
+				const buffered = videoRef.current.buffered
+				const currentTime = videoRef.current.currentTime
+				let bufferHealth = 0
+
+				for (let i = 0; i < buffered.length; i++) {
+					const start = buffered.start(i)
+					const end = buffered.end(i)
+					if (start <= currentTime && end > currentTime) {
+						bufferHealth = end - currentTime
+						break
+					}
+				}
+
+				startTransition(() => {
+					setPerformanceMetrics(prev => ({ ...prev, bufferHealth }))
+				})
+			}
+		}
+
+		const interval = setInterval(updateBufferHealth, 500)
+		return () => clearInterval(interval)
+	}, [enablePerformanceMonitoring, startTransition])
+
+	// Cleanup on unmount
+	useEffect(() => {
+		return () => {
+			if (hideTimeoutRef.current) {
+				clearTimeout(hideTimeoutRef.current)
+			}
+		}
+	}, [])
+
+	// Determine video source
+	const videoSrc = qualities && qualities.length > 0
+		? qualities.find(q => q.default)?.src || qualities[0]?.src || (typeof src === 'string' ? src : src[0])
+		: (typeof src === 'string' ? src : src[0])
+
+	// Determine current quality for performance display
+	const currentQuality = React.useMemo(() => {
+		if (!qualities || !videoRef.current) return 0
+		const currentSrc = videoRef.current.currentSrc
+		const currentQuality = qualities.find(q => q.src === currentSrc || q.src.includes(currentSrc))
+		return parseInt(currentQuality?.quality.replace('p', '')) || 0
+	}, [qualities, videoRef.current?.currentSrc])
+
+	return (
+		<div
+			ref={containerRef}
+			className={cn(
+				"enhanced-minimal-player theme-minimal relative overflow-hidden rounded-lg bg-black",
+				`theme-minimal-${theme}`,
+				className
+			)}
+			data-theme={theme}
+			onMouseMove={handleMouseMove}
+			onMouseEnter={handleMouseEnter}
+			onMouseLeave={handleMouseLeave}
+		>
+			<MediaPlayerRoot
+				className="relative h-full w-full"
+				autoHide={false}
+				enableGestures={true}
+				enableMobileOptimizations={true}
+			>
+				{/* Media Resource Preloader */}
+				{enableIntelligentPreloading && (
+					<Suspense fallback={null}>
+						<div className="pointer-events-none absolute inset-0 z-10">
+							{/* Preloader component would go here */}
+						</div>
+					</Suspense>
+				)}
+
+				{/* Video Element */}
+				<MediaPlayerVideo
+					ref={videoRef}
+					src={videoSrc}
+					poster={poster}
+					autoPlay={autoPlay}
+					muted={muted}
+					loop={loop}
+					playsInline
+					crossOrigin="anonymous"
+					onPlay={() => handlePlayStateChange(true)}
+					onPause={() => handlePlayStateChange(false)}
+					onEnded={onEnded}
+					onTimeUpdate={(e) => {
+						const video = e.currentTarget as HTMLVideoElement
+						onTimeUpdate?.(deferredCurrentTime || video.currentTime)
+					}}
+					onVolumeChange={(e) => {
+						const video = e.currentTarget as HTMLVideoElement
+						onVolumeChange?.(deferredVolume || video.volume)
+					}}
+					onLoadStart={handleLoadStart}
+					onLoadedData={handleLoadedData}
+					onError={(e) => handleError(new Error("Failed to load video"))}
+				/>
+
+				{/* Loading State */}
+				{showLoadingSpinner && (mediaState.isLoading || isPending) && (
+					<MinimalLoading icon={icons.spinner} />
+				)}
+
+				{/* Error State */}
+				{mediaState.error && (
+					<div className="absolute inset-0 z-50 flex items-center justify-center bg-black/80">
+						<div className="text-center">
+							<div className="mb-4 text-red-500">
+								<svg className="mx-auto h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+									<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+								</svg>
+							</div>
+							<p className="mb-2 text-lg text-white">Playback Error</p>
+							<p className="text-gray-400 text-sm">{mediaState.error}</p>
+						</div>
+					</div>
+				)}
+
+				{/* Watermark */}
+				{watermark && (
+					<div
+						className={cn(
+							"pointer-events-none absolute z-20",
+							{
+								"top-4 left-4": watermark.position === "top-left",
+								"top-4 right-4": watermark.position === "top-right",
+								"bottom-16 left-4": watermark.position === "bottom-left",
+								"right-4 bottom-16": watermark.position === "bottom-right",
+							}
+						)}
+						style={{ opacity: watermark.opacity || 0.7 }}
+					>
+						<img
+							src={watermark.src}
+							alt=""
+							className={cn(
+								"object-contain",
+								{
+									"h-8": watermark.size === "small",
+									"h-12": watermark.size === "medium" || !watermark.size,
+									"h-16": watermark.size === "large",
+								}
+							)}
+						/>
+					</div>
+				)}
+
+				{/* Center Play Button */}
+				{showCenterPlayButton && !mediaState.isPlaying && !mediaState.isLoading && (
+					<MinimalOverlay
+						visible={true}
+						showCenterButton={true}
+						isPlaying={mediaState.isPlaying}
+						icons={icons}
+						onPlayPause={() => {
+							const video = containerRef.current?.querySelector("video")
+							if (video) {
+								if (mediaState.isPlaying) {
+									video.pause()
+								} else {
+									video.play()
+								}
+							}
+						}}
+					/>
+				)}
+
+				{/* Controls */}
+				<MinimalControls
+					visible={mediaState.controlsVisible || !mediaState.isPlaying || mediaState.isHovered}
+					icons={icons}
+					isPlaying={mediaState.isPlaying}
+					showQualitySelector={showQualitySelector}
+					showSpeedControl={showSpeedControl}
+					qualities={qualities}
+					thumbnails={thumbnails}
+					onUserInteractionStart={handleUserInteractionStart}
+					onUserInteractionEnd={handleUserInteractionEnd}
+					onSeek={onSeek}
+				/>
+
+				{/* Performance Indicator (development only) */}
+				{enablePerformanceMonitoring && (
+					<div className="absolute top-2 left-2 z-30">
+						<PerformanceIndicator
+							metrics={{
+								fps: performanceMetrics.fps,
+								bufferHealth: performanceMetrics.bufferHealth,
+								quality: currentQuality,
+								bandwidth: performanceMetrics.bandwidth,
+							}}
+							className="text-white/60 text-xs"
+						/>
+					</div>
+				)}
+			</MediaPlayerRoot>
+
+			{/* Debug Panel */}
+			{showDebugPanel && (
+				<DebugPanel
+					performanceMetrics={{
+						fps: performanceMetrics.fps,
+						bufferHealth: performanceMetrics.bufferHealth,
+						networkBandwidth: performanceMetrics.bandwidth,
+					}}
+					playbackState={{
+						currentTime: deferredCurrentTime,
+						duration: videoRef.current?.duration || 0,
+						volume: deferredVolume,
+						isPlaying: mediaState.isPlaying,
+						quality: currentQuality,
+						isBuffering: mediaState.isLoading || isPending,
+					}}
+					preloadingStats={{
+						preloadedItems: preloadingControls.getStats().preloadedItems,
+						engagementScore: preloadingControls.getStats().engagementScore,
+						queueLength: preloadingControls.getStats().queueLength,
+						hitRate: preloadingControls.getStats().hitRate,
+						totalSaved: preloadingControls.getStats().totalSaved,
+					}}
+					position="top-right"
+					title="Enhanced Minimal Player Debug"
+				/>
+			)}
+		</div>
+	)
+}
+
+export default EnhancedMinimalMediaPlayer

package/src/components/variants/minimal/MinimalControls.tsx

@@ -0,0 +1,142 @@
+"use client"
+
+import React from "react"
+import { MediaPlayerPlay } from "../../media-player-play"
+import { MediaPlayerSeek } from "../../media-player-seek"
+import { MediaPlayerTime } from "../../media-player-time"
+import { MediaPlayerVolume } from "../../media-player-volume"
+import { MediaPlayerFullscreen } from "../../media-player-fullscreen"
+import { MinimalPlayButton } from "./MinimalPlayButton"
+import { MinimalSeekBar } from "./MinimalSeekBar"
+import { MinimalVolumeControl } from "./MinimalVolumeControl"
+import { cn } from "../../../lib/utils"
+import type { IconSet } from "../../icons"
+
+export interface MinimalControlsProps {
+  visible: boolean
+  icons: IconSet
+  isPlaying: boolean
+  showQualitySelector?: boolean
+  showSpeedControl?: boolean
+  qualities?: Array<{
+    src: string
+    quality: string
+    default?: boolean
+  }>
+  thumbnails?: string
+  onUserInteractionStart?: () => void
+  onUserInteractionEnd?: () => void
+  onSeek?: (time: number) => void
+}
+
+export function MinimalControls({
+  visible,
+  icons,
+  isPlaying,
+  showQualitySelector,
+  showSpeedControl,
+  qualities,
+  thumbnails,
+  onUserInteractionStart,
+  onUserInteractionEnd,
+  onSeek,
+}: MinimalControlsProps) {
+  return (
+    <div
+      className={cn(
+        "minimal-control-bar",
+        "absolute right-0 bottom-0 left-0 z-40",
+        "px-6 py-3 transition-all duration-200",
+        visible ? "minimal-controls-visible" : "minimal-controls-hidden"
+      )}
+      data-hidden={!visible}
+      onMouseDown={onUserInteractionStart}
+      onMouseUp={onUserInteractionEnd}
+      onTouchStart={onUserInteractionStart}
+      onTouchEnd={onUserInteractionEnd}
+    >
+      {/* Seek Bar - Top of controls */}
+      <div className="mb-2">
+        <MinimalSeekBar
+          thumbnails={thumbnails}
+          onSeek={onSeek}
+        />
+      </div>
+
+      {/* Main Controls Row */}
+      <div className="flex items-center justify-between gap-3">
+        {/* Left Side Controls */}
+        <div className="flex items-center gap-3">
+          {/* Play/Pause Button */}
+          <MinimalPlayButton
+            isPlaying={isPlaying}
+            icons={icons}
+          />
+
+          {/* Volume Control */}
+          <MinimalVolumeControl
+            icons={icons}
+          />
+
+          {/* Time Display */}
+          <div className="minimal-time select-none font-mono text-sm text-white/90">
+            <MediaPlayerTime variant="current" />
+            <span className="mx-1 text-white/60">/</span>
+            <MediaPlayerTime variant="duration" />
+          </div>
+        </div>
+
+        {/* Right Side Controls */}
+        <div className="flex items-center gap-2">
+          {/* Quality Selector */}
+          {showQualitySelector && qualities && qualities.length > 1 && (
+            <button
+              className="minimal-btn w-auto px-3 font-medium text-xs"
+              title="Quality"
+            >
+              {qualities.find(q => q.default)?.quality || qualities[0]?.quality || 'Auto'}
+            </button>
+          )}
+
+          {/* Speed Control */}
+          {showSpeedControl && (
+            <button
+              className="minimal-btn w-auto px-3 font-medium text-xs"
+              title="Playback Speed"
+            >
+              1x
+            </button>
+          )}
+
+          {/* Settings */}
+          {icons.settings && (showQualitySelector || showSpeedControl) && (
+            <button className="minimal-btn" title="Settings">
+              <icons.settings size={18} />
+            </button>
+          )}
+
+          {/* Fullscreen Button */}
+          <button
+            className="minimal-btn"
+            title="Toggle Fullscreen"
+            onClick={() => {
+              // This would need to be connected to fullscreen logic
+              const elem = document.documentElement
+              if (!document.fullscreenElement) {
+                elem.requestFullscreen?.()
+              } else {
+                document.exitFullscreen?.()
+              }
+            }}
+          >
+            {document.fullscreenElement ? (
+              icons.exitFullscreen && <icons.exitFullscreen size={18} />
+            ) : (
+              icons.fullscreen && <icons.fullscreen size={18} />
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}