@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/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/dist/src/components/variants/minimal/MinimalControls.d.ts

@@ -0,0 +1,19 @@
+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 declare function MinimalControls({ visible, icons, isPlaying, showQualitySelector, showSpeedControl, qualities, thumbnails, onUserInteractionStart, onUserInteractionEnd, onSeek, }: MinimalControlsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MinimalControls.d.ts.map

package/dist/src/components/variants/minimal/MinimalControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimalControls.d.ts","sourceRoot":"","sources":["MinimalControls.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAE1C,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,OAAO,CAAA;IACd,SAAS,EAAE,OAAO,CAAA;IAClB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC;QAChB,GAAG,EAAE,MAAM,CAAA;QACX,OAAO,EAAE,MAAM,CAAA;QACf,OAAO,CAAC,EAAE,OAAO,CAAA;KAClB,CAAC,CAAA;IACF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAA;IACnC,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,KAAK,EACL,SAAS,EACT,mBAAmB,EACnB,gBAAgB,EAChB,SAAS,EACT,UAAU,EACV,sBAAsB,EACtB,oBAAoB,EACpB,MAAM,GACP,EAAE,oBAAoB,2CAmGtB"}

package/dist/src/components/variants/minimal/MinimalControls.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MediaPlayerTime } from "../../media-player-time";
+import { MinimalPlayButton } from "./MinimalPlayButton";
+import { MinimalSeekBar } from "./MinimalSeekBar";
+import { MinimalVolumeControl } from "./MinimalVolumeControl";
+import { cn } from "../../../lib/utils";
+export function MinimalControls({ visible, icons, isPlaying, showQualitySelector, showSpeedControl, qualities, thumbnails, onUserInteractionStart, onUserInteractionEnd, onSeek, }) {
+    return (_jsxs("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, children: [_jsx("div", { className: "mb-2", children: _jsx(MinimalSeekBar, { thumbnails: thumbnails, onSeek: onSeek }) }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(MinimalPlayButton, { isPlaying: isPlaying, icons: icons }), _jsx(MinimalVolumeControl, { icons: icons }), _jsxs("div", { className: "minimal-time select-none font-mono text-sm text-white/90", children: [_jsx(MediaPlayerTime, { variant: "current" }), _jsx("span", { className: "mx-1 text-white/60", children: "/" }), _jsx(MediaPlayerTime, { variant: "duration" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [showQualitySelector && qualities && qualities.length > 1 && (_jsx("button", { className: "minimal-btn w-auto px-3 font-medium text-xs", title: "Quality", children: qualities.find(q => q.default)?.quality || qualities[0]?.quality || 'Auto' })), showSpeedControl && (_jsx("button", { className: "minimal-btn w-auto px-3 font-medium text-xs", title: "Playback Speed", children: "1x" })), icons.settings && (showQualitySelector || showSpeedControl) && (_jsx("button", { className: "minimal-btn", title: "Settings", children: _jsx(icons.settings, { size: 18 }) })), _jsx("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?.();
+                                    }
+                                }, children: document.fullscreenElement ? (icons.exitFullscreen && _jsx(icons.exitFullscreen, { size: 18 })) : (icons.fullscreen && _jsx(icons.fullscreen, { size: 18 })) })] })] })] }));
+}