@therealtinhtute/baroiplayer 1.0.6 → 1.0.8

package/src/components/media-player-volume.js

@@ -1,88 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from "../components/ui/button";
-import { Slider } from "../components/ui/slider";
-import { Volume1Icon, Volume2Icon, VolumeXIcon } from "lucide-react";
-import React from "react";
-import { MediaActionTypes, useMediaContext, useMediaDispatch, useMediaSelector } from "../context/media-context";
-import { cn } from "../lib/utils";
-import { MediaPlayerTooltip } from "./media-player-tooltip";
-export function MediaPlayerVolume({ className, disabled = false, asChild = false, expandable = true, children, ...props }) {
-    const context = useMediaContext();
-    const dispatch = useMediaDispatch();
-    const volume = useMediaSelector((state) => state.volume);
-    const isMuted = useMediaSelector((state) => state.isMuted);
-    const isDisabled = disabled || useMediaSelector((state) => state.error !== null);
-    // Determine volume level for icon
-    const volumeLevel = React.useMemo(() => {
-        if (isMuted || volume === 0)
-            return 0;
-        if (volume < 0.5)
-            return 1;
-        return 2;
-    }, [volume, isMuted]);
-    const handleMuteToggle = React.useCallback(() => {
-        dispatch({
-            type: MediaActionTypes.TOGGLE_MUTE
-        });
-    }, [dispatch]);
-    const handleVolumeChange = React.useCallback((values) => {
-        const newVolume = values[0];
-        dispatch({
-            type: MediaActionTypes.SET_VOLUME,
-            detail: newVolume
-        });
-    }, [dispatch]);
-    const handleVolumeCommit = React.useCallback((values) => {
-        const newVolume = values[0];
-        dispatch({
-            type: MediaActionTypes.SET_VOLUME,
-            detail: newVolume
-        });
-    }, [dispatch]);
-    const VolumeIcon = volumeLevel === 0 ? VolumeXIcon : volumeLevel === 1 ? Volume1Icon : Volume2Icon;
-    const containerProps = {
-        "data-disabled": isDisabled ? "" : undefined,
-        "data-slot": "media-player-volume",
-        className: cn("group flex items-center", expandable ? "gap-2 transition-all duration-200 hover:gap-3" : "gap-2", className),
-        ...props
-    };
-    const buttonProps = {
-        type: "button",
-        "aria-controls": context.mediaId,
-        "aria-label": isMuted ? "Unmute" : "Mute",
-        "aria-pressed": isMuted,
-        "data-slot": "media-player-volume-button",
-        "data-state": isMuted ? "muted" : "unmuted",
-        variant: "ghost",
-        size: "icon",
-        className: "size-8 shrink-0",
-        disabled: isDisabled,
-        onClick: handleMuteToggle
-    };
-    const sliderProps = {
-        "aria-controls": context.mediaId,
-        "aria-valuetext": `Volume ${Math.round(volume * 100)}%`,
-        "data-slot": "media-player-volume-slider",
-        min: 0,
-        max: 1,
-        step: 0.01,
-        value: [isMuted ? 0 : volume],
-        onValueChange: handleVolumeChange,
-        onValueCommit: handleVolumeCommit,
-        disabled: isDisabled,
-        className: cn("relative flex touch-none select-none items-center", expandable
-            ? "w-0 opacity-0 transition-all duration-200 group-hover:w-20 group-hover:opacity-100"
-            : "w-20", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50")
-    };
-    const content = (_jsxs("div", { ...containerProps, children: [_jsx(MediaPlayerTooltip, { tooltip: isMuted ? "Unmute" : "Mute", shortcut: "M", children: _jsx(Button, { ...buttonProps, children: _jsx(VolumeIcon, { className: "size-4" }) }) }), _jsxs(Slider, { ...sliderProps, children: [_jsx("div", { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: _jsx("div", { className: "h-full bg-primary transition-all", style: { width: `${(isMuted ? 0 : volume) * 100}%` } }) }), _jsx("div", { className: "block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", style: {
-                            transform: `translateX(-50%)`,
-                            left: `${(isMuted ? 0 : volume) * 100}%`
-                        } })] })] }));
-    if (asChild) {
-        const child = React.Children.only(children);
-        return React.cloneElement(child, containerProps, content);
-    }
-    return content;
-}
-MediaPlayerVolume.displayName = "MediaPlayerVolume";

package/src/components/media-player.js

@@ -1,67 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useTransition } from "react";
-import { useKeyboardControls } from "../hooks/use-keyboard-controls";
-import { useEnhancedMediaPlayer } from "../hooks/use-enhanced-media-player";
-import { useMemoryOptimization } from "../hooks/use-memory-optimization";
-import { EnhancedMediaWrapper } from "./media-suspense";
-import { cn } from "../lib/utils";
-export const MediaPlayer = forwardRef(({ src, className, children, keyboardControls = true, showControls = true, customControls = false, crossOrigin, enablePerformanceMonitoring = true, bufferingStrategy = "adaptive", preloadStrategy = "progressive", enableOptimizations = true, ...options }, ref) => {
-    // React 19 concurrent features
-    const [isPending] = useTransition();
-    // Enhanced media player with optimizations
-    const { state, controls, mediaRef, containerRef, performanceMetrics, isEnhanced } = useEnhancedMediaPlayer({
-        src,
-        crossOrigin,
-        enablePerformanceMonitoring,
-        bufferingStrategy,
-        preloadStrategy,
-        enableTimeUpdateThrottling: true,
-        timeUpdateThrottleMs: 100,
-        enableSeekPreview: true,
-        ...options
-    });
-    // Memory optimization
-    const { memoryStats, addEventListener } = useMemoryOptimization({
-        maxMemoryUsage: 50, // 50MB for media player
-        cleanupInterval: 15000, // 15 seconds
-        enableGC: true,
-        monitorMemory: enableOptimizations
-    });
-    // Keyboard controls with performance optimization
-    useKeyboardControls({
-        enabled: keyboardControls,
-        state,
-        controls
-    });
-    // Memoize media type detection
-    const isVideo = useMemo(() => {
-        return Array.isArray(src)
-            ? src.some((s) => /\.(mp4|webm|ogv|mov|avi)$/i.test(s))
-            : /\.(mp4|webm|ogv|mov|avi)$/i.test(src);
-    }, [src]);
-    // Memoize source rendering
-    const renderSources = useMemo(() => {
-        if (!Array.isArray(src))
-            return null;
-        return src.map((source, index) => (_jsx("source", { src: source }, `${source}-${index}`)));
-    }, [src]);
-    // Memoize common props
-    const commonProps = useMemo(() => ({
-        controls: showControls && !customControls,
-        className: cn("w-full transition-all duration-300", isVideo && "aspect-video", "bg-[color:var(--media-bg)] rounded-lg", state.isTransitioning && "opacity-90"),
-        preload: preloadStrategy === "eager" ? "auto" : "metadata",
-        crossOrigin,
-        ...(Array.isArray(src) ? {} : { src })
-    }), [showControls, customControls, isVideo, state.isTransitioning, preloadStrategy, crossOrigin, src]);
-    return (_jsx(EnhancedMediaWrapper, { priority: "high", errorFallback: ({ error, resetError }) => (_jsx("div", { className: cn("absolute inset-0 flex items-center justify-center", "glass-strong animate-enter rounded-lg", "bg-[color:var(--color-error)]/10 backdrop-blur-md"), children: _jsxs("div", { className: "space-y-2 text-center text-[color:var(--media-text)]", children: [_jsx("div", { className: "mx-auto w-fit rounded-full bg-[color:var(--color-error)]/20 p-3", children: _jsx("svg", { className: "size-6 text-[color:var(--color-error)]", 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: "font-semibold text-lg", children: "Playback Error" }), _jsx("p", { className: "max-w-xs text-[color:var(--media-text-secondary)] text-sm", children: error.message || state.error }), _jsx("button", { onClick: resetError, className: "mt-2 rounded bg-[color:var(--color-brand-primary)] px-4 py-2 text-sm text-white transition-colors hover:bg-[color:var(--color-brand-accent)]", children: "Try Again" })] }) })), loadingFallback: _jsx("div", { className: cn("absolute inset-0 flex items-center justify-center", "glass animate-enter rounded-lg", "bg-[color:var(--media-bg)]/20 backdrop-blur-sm"), children: _jsxs("div", { className: "space-y-4 text-center text-[color:var(--media-text)]", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: cn("size-12 animate-spin rounded-full border-2", "border-[color:var(--color-brand-accent)]/30", "border-t-[color:var(--color-brand-accent)]") }), _jsx("div", { className: cn("absolute inset-0 size-12 rounded-full", "bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]", "animate-pulse opacity-20 blur-sm") })] }), _jsx("p", { className: "font-medium text-[color:var(--media-text-secondary)] text-sm", children: "Loading media..." })] }) }), children: _jsxs("div", { ref: ref || containerRef, className: cn("media-container relative overflow-hidden contain-strict", "bg-[color:var(--media-bg)] focus-within:outline-none", "rounded-xl border border-[color:var(--media-border)]/30", "shadow-2xl shadow-[color:var(--media-bg)]/50", "transition-all duration-300 ease-out", "hover:border-[color:var(--media-border)]/50", "hover:shadow-3xl hover:shadow-[color:var(--media-bg)]/60", 
-            // Performance optimizations
-            "will-change-transform", state.isTransitioning && "cursor-wait", className), tabIndex: 0, 
-            // Performance attributes
-            role: "application", "aria-label": isVideo ? "Video player" : "Audio player", "aria-busy": state.isLoading || state.isBuffering, children: [isVideo ? (_jsxs("video", { ref: mediaRef, ...commonProps, 
-                    // Performance optimizations
-                    disablePictureInPicture: false, playsInline: true, "x-webkit-airplay": "allow", style: { willChange: 'transform' }, children: [renderSources(), "Your browser does not support the video element."] })) : (_jsxs("audio", { ref: mediaRef, ...commonProps, 
-                    // Performance optimizations
-                    preload: preloadStrategy === "eager" ? "auto" : "metadata", children: [renderSources(), "Your browser does not support the audio element."] })), state.error && (_jsx("div", { className: cn("absolute inset-0 flex items-center justify-center", "glass-strong animate-enter rounded-lg", "bg-[color:var(--color-error)]/10 backdrop-blur-md"), children: _jsxs("div", { className: "space-y-2 text-center text-[color:var(--media-text)]", children: [_jsx("div", { className: "mx-auto w-fit rounded-full bg-[color:var(--color-error)]/20 p-3", children: _jsx("svg", { className: "size-6 text-[color:var(--color-error)]", 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: "font-semibold text-lg", children: "Playback Error" }), _jsx("p", { className: "max-w-xs text-[color:var(--media-text-secondary)] text-sm", children: state.error })] }) })), state.isLoading && (_jsx("div", { className: cn("absolute inset-0 flex items-center justify-center", "glass animate-enter rounded-lg", "bg-[color:var(--media-bg)]/20 backdrop-blur-sm"), children: _jsxs("div", { className: "space-y-4 text-center text-[color:var(--media-text)]", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: cn("size-12 animate-spin rounded-full border-2", "border-[color:var(--color-brand-accent)]/30", "border-t-[color:var(--color-brand-accent)]") }), _jsx("div", { className: cn("absolute inset-0 size-12 rounded-full", "bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]", "animate-pulse opacity-20 blur-sm") })] }), _jsx("p", { className: "font-medium text-[color:var(--media-text-secondary)] text-sm", children: state.isBuffering ? "Buffering..." : "Loading media..." })] }) })), customControls && typeof children === "function" && (_jsx("div", { className: "pointer-events-auto absolute inset-0 z-50", children: children({ state, controls }) })), customControls && typeof children !== "function" && (_jsx("div", { className: "pointer-events-auto absolute inset-0 z-50", children: children })), process.env.NODE_ENV === 'development' && enablePerformanceMonitoring && (_jsxs("div", { className: "absolute bottom-2 left-2 rounded bg-black/50 px-2 py-1 text-white text-xs", children: [_jsxs("div", { children: ["FPS: ", performanceMetrics.frameRate || 0] }), _jsxs("div", { children: ["Memory: ", memoryStats.usage.toFixed(1), "MB"] }), isEnhanced && _jsx("div", { children: "Enhanced \u2713" })] }))] }) }));
-});
-MediaPlayer.displayName = "MediaPlayer";

package/src/components/media-suspense.js

@@ -1,173 +0,0 @@
-"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.js

@@ -1,46 +0,0 @@
-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.js

@@ -1,163 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "../styles/pixel-art.css";
-import { Button } from "../components/ui/button";
-import { DownloadIcon, ExitFullscreenIcon, Forward10Icon, FullscreenIcon, LoadingIcon, MuteIcon, PauseIcon, PictureInPictureIcon, PlayIcon, QualityIcon, Rewind10Icon, ShareIcon, SpeedIcon, SubtitlesIcon, VolumeIcon } from "../components/ui/icons";
-import { Slider } from "../components/ui/slider";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../components/ui/dropdown-menu";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../components/ui/tooltip";
-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.js

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