@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

package/src/components/media-suspense.js

@@ -0,0 +1,173 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { Suspense } from "react";
+import { cn } from "../lib/utils";
+export function MediaLoading({ children, className, size = "md", variant = "spinner" }) {
+    const sizeClasses = {
+        sm: "w-4 h-4",
+        md: "w-8 h-8",
+        lg: "w-12 h-12"
+    };
+    if (variant === "spinner") {
+        return (_jsxs("div", { className: cn("flex items-center justify-center", className), children: [_jsx("div", { className: cn("animate-spin rounded-full border-2 border-current border-t-transparent", sizeClasses[size]) }), children && (_jsx("span", { className: "ml-2 text-muted-foreground text-sm", children: children }))] }));
+    }
+    if (variant === "skeleton") {
+        return (_jsx("div", { className: cn("animate-pulse rounded bg-muted", sizeClasses[size], className) }));
+    }
+    // Pulse variant
+    return (_jsx("div", { className: cn("animate-pulse bg-gradient-to-r bg-pos-0 bg-size-200 from-muted via-muted/50 to-muted", "animate-shimmer rounded", sizeClasses[size], className) }));
+}
+export function MediaSuspense({ children, fallback = _jsx(MediaLoading, {}), className }) {
+    return (_jsx("div", { className: className, children: _jsx(Suspense, { fallback: fallback, children: children }) }));
+}
+// Lazy loading wrapper for heavy media components
+export function withMediaSuspense(Component, loadingComponent) {
+    const WrappedComponent = React.forwardRef((props, ref) => {
+        const LoadingComp = loadingComponent;
+        return (_jsx(MediaSuspense, { fallback: LoadingComp ? _jsx(LoadingComp, {}) : _jsx(MediaLoading, {}), children: _jsx(Component, { ...props, ref: ref }) }));
+    });
+    WrappedComponent.displayName = `withMediaSuspense(${Component.displayName || Component.name})`;
+    return WrappedComponent;
+}
+// Hook for managing concurrent state updates
+export function useMediaConcurrent() {
+    const [isPending, startTransition] = React.useTransition();
+    // Wrap state updates in transitions for better performance
+    const updateWithTransition = React.useCallback((updateFn) => {
+        return new Promise((resolve) => {
+            startTransition(() => {
+                const result = updateFn();
+                resolve(result);
+            });
+        });
+    }, [startTransition]);
+    // Batch multiple updates together
+    const batchUpdates = React.useCallback((updates) => {
+        return new Promise((resolve) => {
+            startTransition(() => {
+                const results = updates.map(update => update());
+                resolve(results);
+            });
+        });
+    }, [startTransition]);
+    return {
+        isPending,
+        updateWithTransition,
+        batchUpdates
+    };
+}
+// Default error fallback component
+function DefaultErrorFallback({ error, resetError }) {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-lg border border-destructive/20 bg-destructive/10 p-6", children: [_jsx("div", { className: "mb-2 font-semibold text-destructive text-lg", children: "Media Player Error" }), _jsx("div", { className: "mb-4 text-center text-muted-foreground text-sm", children: error.message }), _jsx("button", { onClick: resetError, className: "rounded bg-primary px-4 py-2 text-primary-foreground transition-colors hover:bg-primary/90", children: "Try Again" })] }));
+}
+export class MediaErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        this.props.onError?.(error, errorInfo);
+        console.error('MediaErrorBoundary caught an error:', error, errorInfo);
+    }
+    resetError = () => {
+        this.setState({ hasError: false, error: null });
+    };
+    render() {
+        if (this.state.hasError && this.state.error) {
+            const FallbackComponent = this.props.fallback || DefaultErrorFallback;
+            return _jsx(FallbackComponent, { error: this.state.error, resetError: this.resetError });
+        }
+        return this.props.children;
+    }
+}
+export function ConcurrentMedia({ children, priority = "normal", deferredMs = 0 }) {
+    const [isDeferred, setIsDeferred] = React.useState(deferredMs > 0);
+    React.useEffect(() => {
+        if (deferredMs > 0) {
+            const timer = setTimeout(() => {
+                setIsDeferred(false);
+            }, deferredMs);
+            return () => clearTimeout(timer);
+        }
+    }, [deferredMs]);
+    if (isDeferred) {
+        return _jsx(MediaLoading, { variant: "skeleton" });
+    }
+    // Use different rendering strategies based on priority
+    if (priority === "high") {
+        // Render immediately without deferring
+        return _jsx(_Fragment, { children: children });
+    }
+    if (priority === "low") {
+        // Use deferred value for lower priority updates
+        const deferredChildren = React.useDeferredValue(children);
+        return _jsx(_Fragment, { children: deferredChildren });
+    }
+    // Normal priority - use transition
+    return (_jsx(React.Suspense, { fallback: _jsx(MediaLoading, {}), children: children }));
+}
+// Hook for deferred loading of media resources
+export function useDeferredMediaLoading(delay = 100) {
+    const [isReady, setIsReady] = React.useState(false);
+    const deferredIsReady = React.useDeferredValue(isReady);
+    React.useEffect(() => {
+        const timer = setTimeout(() => {
+            setIsReady(true);
+        }, delay);
+        return () => clearTimeout(timer);
+    }, [delay]);
+    return {
+        isReady: deferredIsReady,
+        actualIsReady: isReady
+    };
+}
+export function EnhancedMediaWrapper({ children, className, loadingFallback = _jsx(MediaLoading, {}), errorFallback, priority = "normal", deferredMs = 0, onError }) {
+    return (_jsx("div", { className: className, children: _jsx(MediaErrorBoundary, { fallback: errorFallback, onError: onError, children: _jsx(MediaSuspense, { fallback: loadingFallback, children: _jsx(ConcurrentMedia, { priority: priority, deferredMs: deferredMs, children: children }) }) }) }));
+}
+// Export enhanced components with concurrent features
+export const EnhancedMediaSuspense = MediaSuspense;
+export const EnhancedMediaLoading = MediaLoading;
+// Performance monitoring hook for concurrent features
+export function useMediaPerformance() {
+    const [metrics, setMetrics] = React.useState({
+        renderTime: 0,
+        suspenseCount: 0,
+        errorCount: 0,
+        transitionCount: 0
+    });
+    const recordRenderTime = React.useCallback((startTime) => {
+        const renderTime = performance.now() - startTime;
+        setMetrics(prev => ({
+            ...prev,
+            renderTime: Math.round(renderTime * 100) / 100
+        }));
+    }, []);
+    const incrementSuspense = React.useCallback(() => {
+        setMetrics(prev => ({
+            ...prev,
+            suspenseCount: prev.suspenseCount + 1
+        }));
+    }, []);
+    const incrementError = React.useCallback(() => {
+        setMetrics(prev => ({
+            ...prev,
+            errorCount: prev.errorCount + 1
+        }));
+    }, []);
+    const incrementTransition = React.useCallback(() => {
+        setMetrics(prev => ({
+            ...prev,
+            transitionCount: prev.transitionCount + 1
+        }));
+    }, []);
+    return {
+        metrics,
+        recordRenderTime,
+        incrementSuspense,
+        incrementError,
+        incrementTransition
+    };
+}

package/src/components/player-settings-form.d.ts

@@ -0,0 +1,8 @@
+export interface PlayerSettings {
+    volume: number;
+    quality: string;
+    subtitles: boolean;
+    playbackRate: number;
+}
+export declare function PlayerSettingsForm(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=player-settings-form.d.ts.map

package/src/components/player-settings-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"player-settings-form.d.ts","sourceRoot":"","sources":["player-settings-form.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;CACrB;AAsDD,wBAAgB,kBAAkB,4CAqGjC"}

package/src/components/player-settings-form.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useActionState } from 'react';
+const defaultSettings = {
+    volume: 0.8,
+    quality: 'auto',
+    subtitles: false,
+    playbackRate: 1
+};
+async function updateSettings(prevState, formData) {
+    try {
+        // Simulate async operation
+        await new Promise(resolve => setTimeout(resolve, 500));
+        const settings = {
+            volume: Number(formData.get('volume')) || 0.8,
+            quality: formData.get('quality') || 'auto',
+            subtitles: formData.get('subtitles') === 'on',
+            playbackRate: Number(formData.get('playbackRate')) || 1
+        };
+        // Validate settings
+        if (settings.volume < 0 || settings.volume > 1) {
+            throw new Error('Volume must be between 0 and 1');
+        }
+        if (settings.playbackRate < 0.25 || settings.playbackRate > 2) {
+            throw new Error('Playback rate must be between 0.25 and 2');
+        }
+        // Save to localStorage or send to server
+        localStorage.setItem('player-settings', JSON.stringify(settings));
+        return {
+            values: settings,
+            success: true
+        };
+    }
+    catch (error) {
+        return {
+            values: prevState.values,
+            error: error instanceof Error ? error.message : 'Unknown error'
+        };
+    }
+}
+export function PlayerSettingsForm() {
+    const [state, submitAction, isPending] = useActionState(updateSettings, {
+        values: defaultSettings,
+        success: false
+    });
+    return (_jsxs("div", { className: "mx-auto w-full max-w-md", children: [_jsx("h3", { className: "mb-4 font-semibold text-lg text-white", children: "Player Settings" }), _jsxs("form", { action: submitAction, className: "space-y-4", children: [state.error && (_jsx("div", { className: "rounded-lg border border-red-700 bg-red-900/20 p-3", children: _jsx("p", { className: "text-red-400 text-sm", children: state.error }) })), state.success && (_jsx("div", { className: "rounded-lg border border-green-700 bg-green-900/20 p-3", children: _jsx("p", { className: "text-green-400 text-sm", children: "Settings saved successfully!" }) })), _jsxs("fieldset", { disabled: isPending, className: "space-y-4 disabled:opacity-50", children: [_jsxs("div", { children: [_jsxs("label", { htmlFor: "volume", className: "mb-2 block font-medium text-sm text-white", children: ["Volume: ", Math.round(state.values.volume * 100), "%"] }), _jsx("input", { type: "range", id: "volume", name: "volume", min: "0", max: "1", step: "0.01", defaultValue: state.values.volume, className: "h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "quality", className: "mb-2 block font-medium text-sm text-white", children: "Quality" }), _jsxs("select", { id: "quality", name: "quality", defaultValue: state.values.quality, className: "w-full rounded-lg border border-gray-600 bg-gray-700 p-2 text-white focus:ring-2 focus:ring-blue-500", children: [_jsx("option", { value: "auto", children: "Auto" }), _jsx("option", { value: "1080p", children: "1080p" }), _jsx("option", { value: "720p", children: "720p" }), _jsx("option", { value: "480p", children: "480p" }), _jsx("option", { value: "360p", children: "360p" })] })] }), _jsxs("div", { children: [_jsxs("label", { htmlFor: "playbackRate", className: "mb-2 block font-medium text-sm text-white", children: ["Playback Rate: ", state.values.playbackRate, "x"] }), _jsx("input", { type: "range", id: "playbackRate", name: "playbackRate", min: "0.25", max: "2", step: "0.25", defaultValue: state.values.playbackRate, className: "h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700" })] }), _jsxs("div", { className: "flex items-center", children: [_jsx("input", { type: "checkbox", id: "subtitles", name: "subtitles", defaultChecked: state.values.subtitles, className: "h-4 w-4 rounded border-gray-600 bg-gray-700 text-blue-600 focus:ring-blue-500" }), _jsx("label", { htmlFor: "subtitles", className: "ml-2 font-medium text-sm text-white", children: "Enable Subtitles" })] }), _jsx("button", { type: "submit", disabled: isPending, className: "w-full rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 disabled:bg-gray-600", children: isPending ? 'Saving...' : 'Save Settings' })] })] })] }));
+}

package/src/components/react-player-wrapper.d.ts

@@ -0,0 +1,64 @@
+import "../styles/pixel-art.css";
+import React from "react";
+interface QualityOption {
+    label: string;
+    value: string;
+}
+interface SubtitleTrack {
+    label: string;
+    value: string;
+    src: string;
+}
+interface ProgressState {
+    playedSeconds: number;
+    loaded: number;
+}
+export interface ModernMediaPlayerProps {
+    className?: string;
+    containerClassName?: string;
+    url?: string | string[];
+    playing?: boolean;
+    volume?: number;
+    muted?: boolean;
+    controls?: boolean;
+    light?: boolean | string;
+    loop?: boolean;
+    playbackRate?: number;
+    width?: string | number;
+    height?: string | number;
+    style?: React.CSSProperties;
+    progressInterval?: number;
+    playsinline?: boolean;
+    pip?: boolean;
+    stopOnUnmount?: boolean;
+    fallback?: React.ReactNode;
+    wrapper?: unknown;
+    config?: unknown;
+    showDownload?: boolean;
+    showShare?: boolean;
+    showSubtitles?: boolean;
+    showQuality?: boolean;
+    onDownload?: () => void;
+    onShare?: () => void;
+    qualityOptions?: QualityOption[];
+    subtitleTracks?: SubtitleTrack[];
+    onReady?: () => void;
+    onStart?: () => void;
+    onPlay?: () => void;
+    onProgress?: (state: ProgressState) => void;
+    onDuration?: (duration: number) => void;
+    onPause?: () => void;
+    onBuffer?: () => void;
+    onBufferEnd?: () => void;
+    onSeek?: (seconds: number) => void;
+    onPlaybackRateChange?: (rate: number) => void;
+    onEnded?: () => void;
+    onError?: (error: unknown) => void;
+    onClickPreview?: () => void;
+    onEnablePIP?: () => void;
+    onDisablePIP?: () => void;
+    [key: string]: unknown;
+}
+export declare function ModernMediaPlayer({ className, containerClassName, url, playing, volume, muted, controls, light, loop, playbackRate, width, height, style, progressInterval, playsinline, pip, stopOnUnmount, fallback, wrapper, config, showDownload, showShare, showSubtitles, showQuality, onDownload, onShare, qualityOptions, subtitleTracks, onReady, onStart, onPlay, onProgress, onDuration, onPause, onBuffer, onBufferEnd, onSeek, onPlaybackRateChange, onEnded, onError, onClickPreview, onEnablePIP, onDisablePIP, ...props }: ModernMediaPlayerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=react-player-wrapper.d.ts.map

package/src/components/react-player-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-player-wrapper.d.ts","sourceRoot":"","sources":["react-player-wrapper.tsx"],"names":[],"mappings":"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"}

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"}