@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

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

@@ -0,0 +1,280 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { defaultMinimalIcons } from "../../icons";
+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, }) {
+    // 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) => ({ ...state, ...update }));
+    // Deferred values for non-critical updates
+    const deferredCurrentTime = useDeferredValue(0);
+    const deferredVolume = useDeferredValue(1);
+    // State management
+    const [mediaState, setMediaState] = useState({
+        isPlaying: false,
+        isLoading: false,
+        error: null,
+        controlsVisible: true,
+        isHovered: false,
+        userInteracting: false,
+    });
+    // Performance metrics
+    const [performanceMetrics, setPerformanceMetrics] = useState({
+        fps: 0,
+        bufferHealth: 0,
+        quality: 0,
+        bandwidth: 0,
+    });
+    // Refs
+    const hideTimeoutRef = useRef(null);
+    const containerRef = useRef(null);
+    const videoRef = useRef(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) => {
+        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) => {
+        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 (_jsxs("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, children: [_jsxs(MediaPlayerRoot, { className: "relative h-full w-full", autoHide: false, enableGestures: true, enableMobileOptimizations: true, children: [enableIntelligentPreloading && (_jsx(Suspense, { fallback: null, children: _jsx("div", { className: "pointer-events-none absolute inset-0 z-10" }) })), _jsx(MediaPlayerVideo, { ref: videoRef, src: videoSrc, poster: poster, autoPlay: autoPlay, muted: muted, loop: loop, playsInline: true, crossOrigin: "anonymous", onPlay: () => handlePlayStateChange(true), onPause: () => handlePlayStateChange(false), onEnded: onEnded, onTimeUpdate: (e) => {
+                            const video = e.currentTarget;
+                            onTimeUpdate?.(deferredCurrentTime || video.currentTime);
+                        }, onVolumeChange: (e) => {
+                            const video = e.currentTarget;
+                            onVolumeChange?.(deferredVolume || video.volume);
+                        }, onLoadStart: handleLoadStart, onLoadedData: handleLoadedData, onError: (e) => handleError(new Error("Failed to load video")) }), showLoadingSpinner && (mediaState.isLoading || isPending) && (_jsx(MinimalLoading, { icon: icons.spinner })), mediaState.error && (_jsx("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/80", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "mb-4 text-red-500", children: _jsx("svg", { className: "mx-auto h-12 w-12", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }) }), _jsx("p", { className: "mb-2 text-lg text-white", children: "Playback Error" }), _jsx("p", { className: "text-gray-400 text-sm", children: mediaState.error })] }) })), watermark && (_jsx("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 }, children: _jsx("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",
+                            }) }) })), showCenterPlayButton && !mediaState.isPlaying && !mediaState.isLoading && (_jsx(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();
+                                }
+                            }
+                        } })), _jsx(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 }), enablePerformanceMonitoring && (_jsx("div", { className: "absolute top-2 left-2 z-30", children: _jsx(PerformanceIndicator, { metrics: {
+                                fps: performanceMetrics.fps,
+                                bufferHealth: performanceMetrics.bufferHealth,
+                                quality: currentQuality,
+                                bandwidth: performanceMetrics.bandwidth,
+                            }, className: "text-white/60 text-xs" }) }))] }), showDebugPanel && (_jsx(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" }))] }));
+}
+export default EnhancedMinimalMediaPlayer;