@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/src/components/react-player-wrapper.js

@@ -0,0 +1,163 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../styles/pixel-art.css";
+import { Button } from "@rp/ui";
+import { DownloadIcon, ExitFullscreenIcon, Forward10Icon, FullscreenIcon, LoadingIcon, MuteIcon, PauseIcon, PictureInPictureIcon, PlayIcon, QualityIcon, Rewind10Icon, ShareIcon, SpeedIcon, SubtitlesIcon, VolumeIcon } from "@rp/ui";
+import { Slider } from "@rp/ui";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@rp/ui";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@rp/ui";
+import { useState, useRef, useEffect, Suspense, lazy } from "react";
+// Dynamic import for lazy loading
+const ReactPlayer = lazy(() => import("react-player"));
+import { cn } from "../lib/utils";
+export function ModernMediaPlayer({ className, containerClassName, url, playing = false, volume = 1, muted = false, controls = false, light = false, loop = false, playbackRate = 1, width = "100%", height = "100%", style, progressInterval = 1000, playsinline = true, pip = false, stopOnUnmount = true, fallback = _jsx(LoadingIcon, { className: "size-12 text-white" }), wrapper = "div", config, showDownload = false, showShare = false, showSubtitles = false, showQuality = false, onDownload, onShare, qualityOptions = [
+    { label: "1080p", value: "1080" },
+    { label: "720p", value: "720" },
+    { label: "480p", value: "480" },
+    { label: "360p", value: "360" }
+], subtitleTracks = [], onReady, onStart, onPlay, onProgress, onDuration, onPause, onBuffer, onBufferEnd, onSeek, onPlaybackRateChange, onEnded, onError, onClickPreview, onEnablePIP, onDisablePIP, ...props }) {
+    const [isPlaying, setIsPlaying] = useState(playing);
+    const [currentVolume, setCurrentVolume] = useState(volume);
+    const [isMuted, setIsMuted] = useState(muted);
+    const [duration, setDuration] = useState(0);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [buffered, setBuffered] = useState(0);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [isPiP, setIsPiP] = useState(pip);
+    const [currentRate, setCurrentRate] = useState(playbackRate);
+    const [showControls, setShowControls] = useState(true);
+    const [isLoading, setIsLoading] = useState(true);
+    const [selectedQuality, setSelectedQuality] = useState(qualityOptions[0]?.value || "720");
+    const [selectedSubtitle, setSelectedSubtitle] = useState(null);
+    const playerRef = useRef(null);
+    const containerRef = useRef(null);
+    const controlsTimeoutRef = useRef(null);
+    // Format time helper
+    const formatTime = (seconds) => {
+        const date = new Date(seconds * 1000);
+        const hh = date.getUTCHours();
+        const mm = date.getUTCMinutes();
+        const ss = date.getUTCSeconds().toString().padStart(2, "0");
+        if (hh) {
+            return `${hh}:${mm.toString().padStart(2, "0")}:${ss}`;
+        }
+        return `${mm}:${ss}`;
+    };
+    // Handle mouse movement for auto-hiding controls
+    const handleMouseMove = () => {
+        setShowControls(true);
+        if (controlsTimeoutRef.current) {
+            clearTimeout(controlsTimeoutRef.current);
+        }
+        if (isPlaying) {
+            controlsTimeoutRef.current = setTimeout(() => {
+                setShowControls(false);
+            }, 3000);
+        }
+    };
+    useEffect(() => {
+        return () => {
+            if (controlsTimeoutRef.current) {
+                clearTimeout(controlsTimeoutRef.current);
+            }
+        };
+    }, []);
+    // Fullscreen handling
+    const toggleFullscreen = () => {
+        if (!document.fullscreenElement) {
+            containerRef.current?.requestFullscreen();
+            setIsFullscreen(true);
+        }
+        else {
+            document.exitFullscreen();
+            setIsFullscreen(false);
+        }
+    };
+    // Keyboard shortcuts
+    useEffect(() => {
+        const handleKeyPress = (e) => {
+            if (!containerRef.current?.contains(document.activeElement))
+                return;
+            switch (e.key.toLowerCase()) {
+                case " ":
+                case "k":
+                    e.preventDefault();
+                    setIsPlaying(!isPlaying);
+                    break;
+                case "f":
+                    e.preventDefault();
+                    toggleFullscreen();
+                    break;
+                case "m":
+                    e.preventDefault();
+                    setIsMuted(!isMuted);
+                    break;
+                case "arrowleft":
+                    e.preventDefault();
+                    playerRef.current?.seekTo(currentTime - 10);
+                    break;
+                case "arrowright":
+                    e.preventDefault();
+                    playerRef.current?.seekTo(currentTime + 10);
+                    break;
+                case "arrowup":
+                    e.preventDefault();
+                    setCurrentVolume(Math.min(1, currentVolume + 0.1));
+                    break;
+                case "arrowdown":
+                    e.preventDefault();
+                    setCurrentVolume(Math.max(0, currentVolume - 0.1));
+                    break;
+            }
+        };
+        window.addEventListener("keydown", handleKeyPress);
+        return () => window.removeEventListener("keydown", handleKeyPress);
+    }, [isPlaying, isMuted, currentTime, currentVolume, toggleFullscreen]);
+    const playbackRates = [0.5, 0.75, 1, 1.25, 1.5, 2];
+    return (_jsx(TooltipProvider, { children: _jsxs("div", { ref: containerRef, className: cn("relative overflow-hidden rounded-lg bg-black", "focus-within:outline-none", containerClassName), onMouseMove: handleMouseMove, onMouseLeave: () => isPlaying && setShowControls(false), tabIndex: 0, children: [_jsx(Suspense, { fallback: fallback, children: _jsx(ReactPlayer, { ref: playerRef, url: url, playing: isPlaying, volume: isMuted ? 0 : currentVolume, muted: isMuted, controls: false, light: light, loop: loop, playbackRate: currentRate, width: width, height: height, style: { ...style, aspectRatio: "16/9" }, progressInterval: progressInterval, playsinline: playsinline, pip: isPiP, stopOnUnmount: stopOnUnmount, fallback: fallback, wrapper: wrapper, config: config, className: cn("aspect-video", className), onReady: () => {
+                            setIsLoading(false);
+                            onReady?.();
+                        }, onStart: () => {
+                            setIsLoading(false);
+                            onStart?.();
+                        }, onPlay: () => {
+                            setIsPlaying(true);
+                            onPlay?.();
+                        }, onPause: () => {
+                            setIsPlaying(false);
+                            onPause?.();
+                        }, ...{
+                            onProgress: (state) => {
+                                setCurrentTime(state.playedSeconds);
+                                setBuffered(state.loaded);
+                                onProgress?.(state);
+                            }
+                        }, onDuration: (dur) => {
+                            setDuration(dur);
+                            onDuration?.(dur);
+                        }, onBuffer: () => {
+                            setIsLoading(true);
+                            onBuffer?.();
+                        }, onBufferEnd: () => {
+                            setIsLoading(false);
+                            onBufferEnd?.();
+                        }, onSeek: onSeek, onPlaybackRateChange: (rate) => {
+                            setCurrentRate(rate);
+                            onPlaybackRateChange?.(rate);
+                        }, onEnded: onEnded, onError: onError, onClickPreview: onClickPreview, onEnablePIP: () => {
+                            setIsPiP(true);
+                            onEnablePIP?.();
+                        }, onDisablePIP: () => {
+                            setIsPiP(false);
+                            onDisablePIP?.();
+                        }, ...props }) }), isLoading && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: _jsx(LoadingIcon, { className: "size-12 text-white" }) })), _jsxs("div", { className: cn("absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-black/20", "transition-opacity duration-300", showControls ? "opacity-100" : "pointer-events-none opacity-0"), children: [_jsxs("div", { className: "absolute top-0 right-0 left-0 flex items-center justify-between p-4", children: [_jsx("h3", { className: "font-medium text-lg text-white", children: "Media Player" }), _jsxs("div", { className: "flex items-center gap-2", children: [showShare && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95", onClick: onShare, children: _jsx(ShareIcon, { className: "size-5" }) }) }), _jsx(TooltipContent, { children: "Share" })] })), showDownload && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95", onClick: onDownload, children: _jsx(DownloadIcon, { className: "size-5" }) }) }), _jsx(TooltipContent, { children: "Download" })] }))] })] }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx(Button, { variant: "ghost", size: "icon", className: "pixel-button size-20 rounded-none border-2 border-gray-600 bg-gray-800/90 text-white shadow-xl transition-all duration-200 hover:scale-105 hover:border-gray-500 hover:bg-gray-700/90 active:scale-95", onClick: () => setIsPlaying(!isPlaying), children: isPlaying ? _jsx(PauseIcon, { className: "size-10" }) : _jsx(PlayIcon, { className: "size-10" }) }) }), _jsxs("div", { className: "absolute right-0 bottom-0 left-0 space-y-2 p-4", children: [_jsxs("div", { className: "relative", children: [_jsx(Slider, { value: [currentTime], max: duration, step: 1, onValueChange: ([value]) => {
+                                                if (typeof value !== "number")
+                                                    return;
+                                                playerRef.current?.seekTo(value);
+                                            }, className: "pixel-progress cursor-pointer [&>span]:rounded-none [&>span]:border [&>span]:border-gray-600 [&>span]:bg-gray-800 [&>span]:shadow-lg [&_[role=slider]]:size-4 [&_[role=slider]]:rounded-none [&_[role=slider]]:border-2 [&_[role=slider]]:border-gray-400 [&_[role=slider]]:bg-white [&_[role=slider]]:shadow-md" }), _jsx("div", { className: "pointer-events-none absolute top-0 left-0 h-full rounded-none border border-gray-500/30 bg-white/20", style: { width: `${buffered * 100}%` } })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95", onClick: () => setIsPlaying(!isPlaying), children: isPlaying ? (_jsx(PauseIcon, { className: "size-6" })) : (_jsx(PlayIcon, { className: "size-6" })) }) }), _jsx(TooltipContent, { children: isPlaying ? "Pause (k)" : "Play (k)" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95", onClick: () => playerRef.current?.seekTo(currentTime - 10), children: _jsx(Rewind10Icon, { className: "size-6" }) }) }), _jsx(TooltipContent, { children: "Back 10s (\u2190)" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95", onClick: () => playerRef.current?.seekTo(currentTime + 10), children: _jsx(Forward10Icon, { className: "size-6" }) }) }), _jsx(TooltipContent, { children: "Forward 10s (\u2192)" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95", onClick: () => setIsMuted(!isMuted), children: isMuted || currentVolume === 0 ? (_jsx(MuteIcon, { className: "size-6" })) : (_jsx(VolumeIcon, { className: "size-6" })) }) }), _jsx(TooltipContent, { children: isMuted ? "Unmute (m)" : "Mute (m)" })] }), _jsx(Slider, { value: [isMuted ? 0 : currentVolume], max: 1, step: 0.05, onValueChange: ([value]) => {
+                                                                if (typeof value !== "number")
+                                                                    return;
+                                                                setCurrentVolume(value);
+                                                                setIsMuted(value === 0);
+                                                            }, className: "pixel-progress w-20 cursor-pointer [&>span]:rounded-none [&>span]:border [&>span]:border-gray-600 [&>span]:bg-gray-800 [&>span]:shadow-lg [&_[role=slider]]:size-3 [&_[role=slider]]:rounded-none [&_[role=slider]]:border-2 [&_[role=slider]]:border-gray-400 [&_[role=slider]]:bg-white [&_[role=slider]]:shadow-md" })] }), _jsxs("span", { className: "pixel-time-display rounded-none border border-gray-600/50 bg-gray-900/80 px-2 py-1 font-mono text-sm text-white shadow-lg", children: [formatTime(currentTime), " / ", formatTime(duration)] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [showSubtitles && subtitleTracks.length > 0 && (_jsxs(DropdownMenu, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95", children: _jsx(SubtitlesIcon, { className: "size-6" }) }) }) }), _jsx(TooltipContent, { children: "Subtitles" })] }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "Subtitles" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onClick: () => setSelectedSubtitle(null), children: "Off" }), subtitleTracks.map((track) => (_jsx(DropdownMenuItem, { onClick: () => setSelectedSubtitle(track.value), children: track.label }, track.value)))] })] })), showQuality && (_jsxs(DropdownMenu, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95", children: _jsx(QualityIcon, { className: "size-6" }) }) }) }), _jsx(TooltipContent, { children: "Quality" })] }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "Quality" }), _jsx(DropdownMenuSeparator, {}), qualityOptions.map((option) => (_jsxs(DropdownMenuItem, { onClick: () => setSelectedQuality(option.value), children: [option.label, " ", selectedQuality === option.value && "✓"] }, option.value)))] })] })), _jsxs(DropdownMenu, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95", children: _jsx(SpeedIcon, { className: "size-6" }) }) }) }), _jsx(TooltipContent, { children: "Playback Speed" })] }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "Speed" }), _jsx(DropdownMenuSeparator, {}), playbackRates.map((rate) => (_jsxs(DropdownMenuItem, { onClick: () => setCurrentRate(rate), children: [rate, "x ", currentRate === rate && "✓"] }, rate)))] })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95", onClick: () => setIsPiP(!isPiP), children: _jsx(PictureInPictureIcon, { className: "size-6" }) }) }), _jsx(TooltipContent, { children: "Picture in Picture" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95", onClick: toggleFullscreen, children: isFullscreen ? (_jsx(ExitFullscreenIcon, { className: "size-6" })) : (_jsx(FullscreenIcon, { className: "size-6" })) }) }), _jsx(TooltipContent, { children: isFullscreen ? "Exit Fullscreen (f)" : "Fullscreen (f)" })] })] })] })] })] })] }) }));
+}

package/src/components/simple-video-player.d.ts

@@ -0,0 +1,9 @@
+import "video.js/dist/video-js.css";
+export declare function SimpleVideoPlayer({ src, type }: {
+    src: string;
+    type?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace SimpleVideoPlayer {
+    var displayName: string;
+}
+//# sourceMappingURL=simple-video-player.d.ts.map

package/src/components/simple-video-player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-video-player.d.ts","sourceRoot":"","sources":["simple-video-player.tsx"],"names":[],"mappings":"AAGA,OAAO,4BAA4B,CAAA;AAEnC,wBAAgB,iBAAiB,CAAC,EAAE,GAAG,EAAE,IAAkB,EAAE,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,2CAoD5F;yBApDe,iBAAiB"}

package/src/components/simple-video-player.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import "video.js/dist/video-js.css";
+export function SimpleVideoPlayer({ src, type = "video/mp4" }) {
+    const videoRef = useRef(null);
+    const playerRef = useRef(null);
+    useEffect(() => {
+        const loadPlayer = async () => {
+            if (!videoRef.current || playerRef.current)
+                return;
+            // Dynamically import video.js
+            const videojs = (await import("video.js")).default;
+            // Initialize player
+            const player = videojs(videoRef.current, {
+                controls: true,
+                autoplay: false,
+                preload: 'auto',
+                fluid: true,
+                sources: [{
+                        src: src,
+                        type: type
+                    }]
+            });
+            playerRef.current = player;
+            player.ready(() => {
+                console.log("Player is ready!");
+            });
+        };
+        loadPlayer();
+        // Cleanup
+        return () => {
+            if (playerRef.current) {
+                playerRef.current.dispose();
+                playerRef.current = null;
+            }
+        };
+    }, [src, type]);
+    return (_jsx("div", { className: "w-full", children: _jsx("div", { "data-vjs-player": true, children: _jsx("video", { ref: videoRef, className: "video-js vjs-big-play-centered vjs-default-skin w-full", playsInline: true }) }) }));
+}
+SimpleVideoPlayer.displayName = "SimpleVideoPlayer";

package/src/components/ui/enhanced-seek-bar.d.ts

@@ -0,0 +1,3 @@
+import type { SeekBarProps } from "../../types/index";
+export declare const EnhancedSeekBar: import("react").ForwardRefExoticComponent<SeekBarProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=enhanced-seek-bar.d.ts.map

package/src/components/ui/enhanced-seek-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"enhanced-seek-bar.d.ts","sourceRoot":"","sources":["enhanced-seek-bar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,eAAO,MAAM,eAAe,yGA+N3B,CAAA"}

package/src/components/ui/enhanced-seek-bar.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Slider from "@radix-ui/react-slider";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { forwardRef, useCallback, useState, useMemo, useTransition, useDeferredValue, useRef } from "react";
+import { formatTime } from "../../lib/format-time";
+import { cn } from "../../lib/utils";
+export const EnhancedSeekBar = forwardRef(({ currentTime, duration, buffered, onSeek, size = "sm", className }, ref) => {
+    // React 19 concurrent features
+    const [isPending, startTransition] = useTransition();
+    const [isDragging, setIsDragging] = useState(false);
+    const [previewTime, setPreviewTime] = useState(0);
+    const [isHovering, setIsHovering] = useState(false);
+    // Defer non-critical updates for better performance
+    const deferredHovering = useDeferredValue(isHovering);
+    const deferredPreviewTime = useDeferredValue(previewTime);
+    // Throttling refs
+    const seekTimeoutRef = useRef();
+    const lastSeekTime = useRef(0);
+    const rafId = useRef();
+    // Memoize expensive calculations
+    const progress = useMemo(() => duration > 0 ? (currentTime / duration) * 100 : 0, [currentTime, duration]);
+    // Calculate buffered ranges with memoization
+    const bufferedRanges = useMemo(() => {
+        const ranges = [];
+        if (buffered && duration > 0) {
+            for (let i = 0; i < buffered.length; i++) {
+                const start = (buffered.start(i) / duration) * 100;
+                const end = (buffered.end(i) / duration) * 100;
+                ranges.push({ start, end });
+            }
+        }
+        return ranges;
+    }, [buffered, duration]);
+    // Optimized value change handler with throttling and RAF
+    const handleValueChange = useCallback(([value]) => {
+        const time = ((value ?? 0) / 100) * duration;
+        setPreviewTime(time);
+        // Cancel any pending RAF
+        if (rafId.current) {
+            cancelAnimationFrame(rafId.current);
+        }
+        if (isDragging) {
+            // Clear previous timeout
+            if (seekTimeoutRef.current) {
+                clearTimeout(seekTimeoutRef.current);
+            }
+            // Use RAF for smooth updates during dragging
+            rafId.current = requestAnimationFrame(() => {
+                const now = performance.now();
+                const timeDiff = now - lastSeekTime.current;
+                const timeJump = Math.abs(time - currentTime);
+                // Only seek if enough time has passed or if this is a large jump
+                if (timeDiff > 16 || timeJump > 0.5) { // 60fps = 16ms per frame
+                    startTransition(() => {
+                        onSeek(time);
+                    });
+                    lastSeekTime.current = now;
+                }
+                else {
+                    // Defer the seek
+                    seekTimeoutRef.current = setTimeout(() => {
+                        startTransition(() => {
+                            onSeek(time);
+                        });
+                        lastSeekTime.current = performance.now();
+                    }, 16);
+                }
+            });
+        }
+    }, [duration, isDragging, onSeek, currentTime, startTransition]);
+    const handleValueCommit = useCallback(([value]) => {
+        const time = ((value ?? 0) / 100) * duration;
+        // Cancel any pending RAF
+        if (rafId.current) {
+            cancelAnimationFrame(rafId.current);
+        }
+        // Clear any pending seeks
+        if (seekTimeoutRef.current) {
+            clearTimeout(seekTimeoutRef.current);
+        }
+        startTransition(() => {
+            onSeek(time);
+        });
+        setIsDragging(false);
+    }, [duration, onSeek, startTransition]);
+    const handlePointerDown = useCallback(() => {
+        setIsDragging(true);
+        lastSeekTime.current = performance.now();
+    }, []);
+    // Cleanup on unmount
+    useMemo(() => {
+        return () => {
+            if (rafId.current) {
+                cancelAnimationFrame(rafId.current);
+            }
+            if (seekTimeoutRef.current) {
+                clearTimeout(seekTimeoutRef.current);
+            }
+        };
+    }, []);
+    // Memoize tooltip content to prevent re-renders
+    const tooltipContent = useMemo(() => {
+        return (_jsx("div", { className: cn("rounded bg-black/80 px-2 py-1 text-sm text-white", "fade-in-0 zoom-in-95 animate-in"), children: formatTime(deferredPreviewTime) }));
+    }, [deferredPreviewTime]);
+    return (_jsx("div", { ref: ref, className: cn("media-container relative w-full text-[color:var(--media-text)]", "touch-manipulation contain-layout", className), onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), children: _jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("div", { className: "relative animate-enter", children: _jsxs(Slider.Root, { className: cn("group relative flex w-full touch-none select-none items-center", "media-md:h-4 media-sm:h-3 media-xs:h-2", "focus-ring cursor-pointer", isPending && "opacity-75"), value: [progress], max: 100, step: 0.1, onValueChange: handleValueChange, onValueCommit: handleValueCommit, onPointerDown: handlePointerDown, "aria-label": "Seek to position", children: [_jsxs(Slider.Track, { className: cn("relative grow overflow-hidden rounded-full", "bg-[color:var(--media-control-bg)]/40 backdrop-blur-sm", "border border-[color:var(--media-border)]/20", "shadow-inner transition-all duration-300 ease-out", "h-1 group-focus-within:h-1.5 group-hover:h-1.5", "group-hover:bg-[color:var(--media-control-bg)]/60", "group-hover:border-[color:var(--media-border)]/40"), children: [bufferedRanges.map((range, index) => (_jsx("div", { className: cn("absolute h-full rounded-full transition-all duration-500", "bg-[color:var(--color-media-buffered)] shadow-inner", "opacity-60 group-hover:opacity-80"), style: {
+                                                    left: `${range.start}%`,
+                                                    width: `${range.end - range.start}%`,
+                                                    willChange: 'width, left'
+                                                } }, `${range.start}-${range.end}-${index}`))), _jsx(Slider.Range, { className: cn("absolute h-full rounded-full transition-all duration-300", "bg-gradient-to-r from-[color:var(--color-media-progress)] to-[color:var(--color-brand-accent)]", "shadow-[color:var(--color-brand-primary)]/20 shadow-lg", "group-hover:shadow-xl", isDragging && "transition-none") })] }), _jsx(Slider.Thumb, { className: cn("block size-4 rounded-full border-white/20 bg-white", "shadow-lg hover:shadow-xl", "opacity-0 group-hover:opacity-100", "hover:scale-110 hover:bg-white/95 active:scale-95", "focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-white/50", "focus:ring-offset-2 focus:ring-offset-black/20", "transition-all duration-300 ease-out", isDragging && "scale-110 opacity-100", isPending && "animate-pulse"), "aria-label": "Seek" })] }) }) }), (isDragging || deferredHovering) && (_jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { sideOffset: 10, className: "data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade", children: [tooltipContent, _jsx(Tooltip.Arrow, { className: "fill-black/80" })] }) }))] }) }) }));
+});
+EnhancedSeekBar.displayName = "EnhancedSeekBar";

package/src/components/ui/fullscreen-button.d.ts

@@ -0,0 +1,3 @@
+import type { FullscreenButtonProps } from "../../types/index";
+export declare const FullscreenButton: import("react").ForwardRefExoticComponent<FullscreenButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=fullscreen-button.d.ts.map

package/src/components/ui/fullscreen-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-button.d.ts","sourceRoot":"","sources":["fullscreen-button.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAE9D,eAAO,MAAM,gBAAgB,qHAiD5B,CAAA"}

package/src/components/ui/fullscreen-button.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { Maximize, Minimize } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+export const FullscreenButton = forwardRef(({ isFullscreen, onToggle, disabled = false, size = "lg", className }, ref) => {
+    const Icon = isFullscreen ? Minimize : Maximize;
+    const buttonSizes = {
+        md: "h-11 w-11",
+        lg: "h-12 w-12",
+        xl: "h-14 w-14"
+    };
+    const iconSizes = {
+        md: "h-5 w-5",
+        lg: "h-6 w-6",
+        xl: "h-7 w-7"
+    };
+    return (_jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { ref: ref, type: "button", onClick: onToggle, disabled: disabled, className: cn("inline-flex items-center justify-center rounded-lg bg-transparent p-0 text-white transition-all hover:text-cyan-700 active:scale-95", "focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-black/20", "disabled:cursor-not-allowed disabled:opacity-50", buttonSizes[size], className), "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen", children: _jsx(Icon, { className: cn(iconSizes[size]) }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: cn("rounded bg-black/80 px-2 py-1 text-sm text-white", "fade-in-0 zoom-in-95 animate-in"), sideOffset: 5, children: [isFullscreen ? "Exit fullscreen" : "Enter fullscreen", _jsx(Tooltip.Arrow, { className: "fill-black/80" })] }) })] }) }));
+});
+FullscreenButton.displayName = "FullscreenButton";

package/src/components/ui/media-resource-preloader.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Media Resource Preloader using React 19's resource preloading APIs
+ * Implements intelligent preloading strategies based on user behavior and network conditions
+ */
+import React from 'react';
+import { MediaSource } from '../../types';
+interface MediaResourcePreloaderProps {
+    /** Media sources to preload */
+    sources: MediaSource[];
+    /** Enable intelligent preloading based on user behavior */
+    enableIntelligentPreloading?: boolean;
+    /** Network-aware preloading */
+    adaptToNetworkConditions?: boolean;
+    /** Preload priority level */
+    priority?: 'high' | 'low' | 'auto';
+    /** Custom preloading strategy */
+    strategy?: 'conservative' | 'aggressive' | 'adaptive';
+}
+export declare const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps>;
+export default MediaResourcePreloader;
+//# sourceMappingURL=media-resource-preloader.d.ts.map

package/src/components/ui/media-resource-preloader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-resource-preloader.d.ts","sourceRoot":"","sources":["media-resource-preloader.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,UAAU,2BAA2B;IACpC,+BAA+B;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,2DAA2D;IAC3D,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,+BAA+B;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;IACnC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,UAAU,CAAC;CACtD;AASD,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA+PxE,CAAC;AA8GF,eAAe,sBAAsB,CAAC"}