@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

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

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

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

@@ -1,142 +0,0 @@
-"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>
-  )
-}