@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

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

@@ -1,573 +0,0 @@
-"use client"
-
-import React, {
-	useCallback,
-	useEffect,
-	useRef,
-	useState,
-	useTransition,
-	useOptimistic,
-	useDeferredValue,
-	Suspense
-} from "react"
-import { useIntelligentPreloading } from "../../../hooks/use-intelligent-preloading"
-import { cn } from "../../../lib/utils"
-import { DebugPanel } from "../../enhanced/debug-panel"
-import { PerformanceIndicator } from "../../enhanced/enhanced-controls"
-import type { IconSet } from "../../icons"
-import { defaultMinimalIcons } from "../../icons"
-import { MediaPlayerRoot } from "../../media-player-root"
-import { MediaPlayerVideo } from "../../media-player-video"
-import { MinimalControls } from "./MinimalControls"
-import { MinimalLoading } from "./MinimalLoading"
-import { MinimalOverlay } from "./MinimalOverlay"
-
-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" as const }))
-		}
-		const sources = Array.isArray(src) ? src : [src]
-		return sources.map((s) => ({ src: s, type: "video/mp4" as const }))
-	}, [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") || 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
-					
-					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: 0,
-						totalSaved: 0
-					}}
-					position="top-right"
-					title="Enhanced Minimal Player Debug"
-				/>
-			)}
-		</div>
-	)
-}
-
-export default EnhancedMinimalMediaPlayer

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

@@ -1,124 +0,0 @@
-"use client"
-
-import React from "react"
-import { cn } from "../../../lib/utils"
-import type { IconSet } from "../../icons"
-import { MediaPlayerFullscreen } from "../../media-player-fullscreen"
-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 { MinimalPlayButton } from "./MinimalPlayButton"
-import { MinimalSeekBar } from "./MinimalSeekBar"
-import { MinimalVolumeControl } from "./MinimalVolumeControl"
-
-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>
-	)
-}