@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/components/enhanced/enhanced-controls.js

@@ -0,0 +1,233 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../context/media-context";
+import { cn } from "../../lib/utils";
+import { formatTime } from "../../lib/format-time";
+// Enhanced play button with better animations
+export const EnhancedPlayButton = function EnhancedPlayButton({ className, size = "md" }) {
+    const dispatch = useMediaDispatch();
+    const isPlaying = useMediaSelector(state => state.isPlaying);
+    const isLoading = useMediaSelector(state => state.isLoading);
+    const sizeClasses = {
+        sm: "h-8 w-8",
+        md: "h-10 w-10",
+        lg: "h-12 w-12",
+        xl: "h-16 w-16"
+    };
+    const iconSizes = {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6",
+        xl: "h-8 w-8"
+    };
+    const handleClick = React.useCallback(() => {
+        dispatch({
+            type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+        });
+    }, [dispatch, isPlaying]);
+    return (_jsx("button", { type: "button", onClick: handleClick, disabled: isLoading, className: cn("group relative flex items-center justify-center rounded-full bg-white/10 backdrop-blur-sm", "border border-white/20 text-white transition-all duration-200", "hover:scale-105 hover:bg-white/20 active:scale-95", "focus:outline-none focus:ring-2 focus:ring-white/50", "disabled:cursor-not-allowed disabled:opacity-50", sizeClasses[size], className), "aria-label": isPlaying ? "Pause" : "Play", children: isLoading ? (_jsx("div", { className: cn("animate-spin rounded-full border-2 border-white/30 border-t-white", iconSizes[size]) })) : (_jsx("div", { className: cn("transition-transform duration-200", iconSizes[size]), children: isPlaying ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-full w-full", children: _jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) })) : (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "ml-0.5 h-full w-full", children: _jsx("path", { d: "M8 5v14l11-7z" }) })) })) }));
+};
+// Enhanced seek bar with preview and better touch support
+export const EnhancedSeekBar = function EnhancedSeekBar({ className }) {
+    const dispatch = useMediaDispatch();
+    const currentTime = useMediaSelector(state => state.currentTime);
+    const duration = useMediaSelector(state => state.duration);
+    const buffered = useMediaSelector(state => state.buffered);
+    const previewTime = useMediaSelector(state => state.previewTime);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [hoverTime, setHoverTime] = React.useState(null);
+    const progressRef = React.useRef(null);
+    const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+    const previewProgress = duration > 0 && previewTime !== null ? (previewTime / duration) * 100 : null;
+    // Calculate buffered ranges
+    const bufferedRanges = React.useMemo(() => {
+        if (!buffered || duration === 0)
+            return [];
+        const ranges = [];
+        for (let i = 0; i < buffered.length; i++) {
+            ranges.push({
+                start: (buffered.start(i) / duration) * 100,
+                end: (buffered.end(i) / duration) * 100
+            });
+        }
+        return ranges;
+    }, [buffered, duration]);
+    const getTimeFromPosition = React.useCallback((clientX) => {
+        if (!progressRef.current)
+            return 0;
+        const rect = progressRef.current.getBoundingClientRect();
+        const position = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        return position * duration;
+    }, [duration]);
+    const handleMouseMove = React.useCallback((e) => {
+        if (!isDragging) {
+            const time = getTimeFromPosition(e.clientX);
+            setHoverTime(time);
+            dispatch({ type: MediaActionTypes.PREVIEW_TIME, detail: time });
+        }
+    }, [isDragging, getTimeFromPosition, dispatch]);
+    const handleMouseLeave = React.useCallback(() => {
+        if (!isDragging) {
+            setHoverTime(null);
+            dispatch({ type: MediaActionTypes.CLEAR_PREVIEW });
+        }
+    }, [isDragging, dispatch]);
+    const handleMouseDown = React.useCallback((e) => {
+        setIsDragging(true);
+        const time = getTimeFromPosition(e.clientX);
+        dispatch({ type: MediaActionTypes.SEEK, detail: time });
+    }, [getTimeFromPosition, dispatch]);
+    const handleTouchStart = React.useCallback((e) => {
+        setIsDragging(true);
+        const time = getTimeFromPosition(e.touches[0]?.clientX || 0);
+        dispatch({ type: MediaActionTypes.SEEK, detail: time });
+    }, [getTimeFromPosition, dispatch]);
+    React.useEffect(() => {
+        const handleMouseMove = (e) => {
+            if (isDragging) {
+                const time = getTimeFromPosition(e.clientX);
+                dispatch({ type: MediaActionTypes.SEEK, detail: time });
+            }
+        };
+        const handleMouseUp = () => {
+            setIsDragging(false);
+            setHoverTime(null);
+            dispatch({ type: MediaActionTypes.CLEAR_PREVIEW });
+        };
+        const handleTouchMove = (e) => {
+            if (isDragging) {
+                const time = getTimeFromPosition(e.touches[0]?.clientX || 0);
+                dispatch({ type: MediaActionTypes.SEEK, detail: time });
+            }
+        };
+        if (isDragging) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            document.addEventListener('touchmove', handleTouchMove);
+            document.addEventListener('touchend', handleMouseUp);
+        }
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            document.removeEventListener('touchmove', handleTouchMove);
+            document.removeEventListener('touchend', handleMouseUp);
+        };
+    }, [isDragging, getTimeFromPosition, dispatch]);
+    return (_jsxs("div", { className: cn("group relative flex items-center", className), children: [(hoverTime !== null || previewTime !== null) && (_jsx("div", { className: "pointer-events-none absolute bottom-full mb-2 rounded bg-black/80 px-2 py-1 text-white text-xs", style: {
+                    left: `${previewProgress || ((hoverTime || 0) / duration) * 100}%`,
+                    transform: 'translateX(-50%)'
+                }, children: formatTime(hoverTime || previewTime || 0) })), _jsxs("div", { ref: progressRef, className: "relative h-2 w-full cursor-pointer rounded-full bg-white/20 transition-all duration-200 group-hover:h-3", onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, children: [bufferedRanges.map((range, index) => (_jsx("div", { className: "absolute top-0 h-full rounded-full bg-white/30", style: {
+                            left: `${range.start}%`,
+                            width: `${range.end - range.start}%`
+                        } }, index))), _jsx("div", { className: "absolute top-0 h-full rounded-full bg-primary transition-all duration-100", style: { width: `${progress}%` } }), previewProgress !== null && (_jsx("div", { className: "absolute top-0 h-full w-1 rounded-full bg-white/80", style: { left: `${previewProgress}%` } })), _jsx("div", { className: "-translate-y-1/2 absolute top-1/2 h-4 w-4 rounded-full border-2 border-white bg-primary opacity-0 shadow-lg transition-all duration-200 group-hover:opacity-100", style: { left: `${progress}%`, transform: 'translateX(-50%) translateY(-50%)' } })] })] }));
+};
+// Enhanced volume control with better UX
+export const EnhancedVolumeControl = function EnhancedVolumeControl({ className }) {
+    const dispatch = useMediaDispatch();
+    const volume = useMediaSelector(state => state.volume);
+    const isMuted = useMediaSelector(state => state.isMuted);
+    const [showSlider, setShowSlider] = React.useState(false);
+    const handleToggleMute = React.useCallback(() => {
+        dispatch({ type: MediaActionTypes.TOGGLE_MUTE });
+    }, [dispatch]);
+    const handleVolumeChange = React.useCallback((newVolume) => {
+        dispatch({ type: MediaActionTypes.SET_VOLUME, detail: newVolume });
+    }, [dispatch]);
+    const VolumeIcon = React.useMemo(() => {
+        if (isMuted || volume === 0) {
+            return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-5 w-5", children: _jsx("path", { d: "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" }) }));
+        }
+        else if (volume < 0.5) {
+            return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-5 w-5", children: _jsx("path", { d: "M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z" }) }));
+        }
+        else {
+            return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-5 w-5", children: _jsx("path", { d: "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" }) }));
+        }
+    }, [isMuted, volume]);
+    return (_jsxs("div", { className: cn("relative flex items-center", className), onMouseEnter: () => setShowSlider(true), onMouseLeave: () => setShowSlider(false), children: [_jsx("button", { type: "button", onClick: handleToggleMute, className: "flex h-10 w-10 items-center justify-center rounded-full text-white transition-colors hover:bg-white/10", "aria-label": isMuted ? "Unmute" : "Mute", children: VolumeIcon }), _jsx("div", { className: cn("absolute left-full ml-2 flex items-center transition-all duration-200", showSlider ? "translate-x-0 opacity-100" : "-translate-x-2 pointer-events-none opacity-0"), children: _jsx("input", { type: "range", min: "0", max: "1", step: "0.01", value: isMuted ? 0 : volume, onChange: (e) => handleVolumeChange(parseFloat(e.target.value)), className: "slider h-1 w-20 cursor-pointer appearance-none rounded-lg bg-white/20" }) })] }));
+};
+// Enhanced backward skip button
+export const EnhancedBackwardButton = function EnhancedBackwardButton({ className, size = "md", skipTime = 10 }) {
+    const dispatch = useMediaDispatch();
+    const currentTime = useMediaSelector(state => state.currentTime);
+    const sizeClasses = {
+        sm: "h-8 w-8",
+        md: "h-10 w-10",
+        lg: "h-12 w-12"
+    };
+    const iconSizes = {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6"
+    };
+    const handleClick = React.useCallback(() => {
+        const newTime = Math.max(0, currentTime - skipTime);
+        dispatch({ type: MediaActionTypes.SEEK, detail: newTime });
+    }, [dispatch, currentTime, skipTime]);
+    return (_jsx("button", { type: "button", onClick: handleClick, className: cn("group relative flex items-center justify-center rounded-full bg-white/10 backdrop-blur-sm", "border border-white/20 text-white transition-all duration-200", "hover:scale-105 hover:bg-white/20 active:scale-95", "focus:outline-none focus:ring-2 focus:ring-white/50", sizeClasses[size], className), "aria-label": `Backward ${skipTime} seconds`, title: `Backward ${skipTime}s`, children: _jsxs("div", { className: cn("flex items-center transition-transform duration-200", iconSizes[size]), children: [_jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-full w-full", children: [_jsx("path", { d: "M7 6c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1s-1-.45-1-1V7c0-.55.45-1 1-1zM15.5 7.5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v9c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-9z" }), _jsx("path", { d: "M5.5 12l7-4.5v9l-7-4.5z", opacity: "0.8" })] }), skipTime && (_jsx("span", { className: "-bottom-1 absolute font-bold text-[10px]", children: skipTime }))] }) }));
+};
+// Enhanced forward skip button
+export const EnhancedForwardButton = function EnhancedForwardButton({ className, size = "md", skipTime = 10 }) {
+    const dispatch = useMediaDispatch();
+    const currentTime = useMediaSelector(state => state.currentTime);
+    const duration = useMediaSelector(state => state.duration);
+    const sizeClasses = {
+        sm: "h-8 w-8",
+        md: "h-10 w-10",
+        lg: "h-12 w-12"
+    };
+    const iconSizes = {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6"
+    };
+    const handleClick = React.useCallback(() => {
+        const newTime = Math.min(duration, currentTime + skipTime);
+        dispatch({ type: MediaActionTypes.SEEK, detail: newTime });
+    }, [dispatch, currentTime, duration, skipTime]);
+    return (_jsx("button", { type: "button", onClick: handleClick, className: cn("group relative flex items-center justify-center rounded-full bg-white/10 backdrop-blur-sm", "border border-white/20 text-white transition-all duration-200", "hover:scale-105 hover:bg-white/20 active:scale-95", "focus:outline-none focus:ring-2 focus:ring-white/50", sizeClasses[size], className), "aria-label": `Forward ${skipTime} seconds`, title: `Forward ${skipTime}s`, children: _jsxs("div", { className: cn("flex items-center transition-transform duration-200", iconSizes[size]), children: [_jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-full w-full", children: [_jsx("path", { d: "M17 6c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1s-1-.45-1-1V7c0-.55.45-1 1-1zM8.5 7.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v9c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5v-9z" }), _jsx("path", { d: "M18.5 12l-7-4.5v9l7-4.5z", opacity: "0.8" })] }), skipTime && (_jsx("span", { className: "-bottom-1 absolute font-bold text-[10px]", children: skipTime }))] }) }));
+};
+// Enhanced time display
+export const EnhancedTimeDisplay = function EnhancedTimeDisplay({ variant = "current", className }) {
+    const currentTime = useMediaSelector(state => state.currentTime);
+    const duration = useMediaSelector(state => state.duration);
+    const displayTime = React.useMemo(() => {
+        switch (variant) {
+            case "current":
+                return formatTime(currentTime);
+            case "duration":
+                return formatTime(duration);
+            case "remaining":
+                return `-${formatTime(duration - currentTime)}`;
+            default:
+                return formatTime(currentTime);
+        }
+    }, [variant, currentTime, duration]);
+    return (_jsx("div", { className: cn("font-mono text-sm text-white tabular-nums", className), children: displayTime }));
+};
+// Performance indicator component
+export const PerformanceIndicator = function PerformanceIndicator({ metrics, className }) {
+    if (!metrics || process.env.NODE_ENV !== 'development') {
+        return null;
+    }
+    const getPerformanceColor = (fps) => {
+        if (fps >= 50)
+            return 'text-green-400';
+        if (fps >= 30)
+            return 'text-yellow-400';
+        return 'text-red-400';
+    };
+    const getBufferColor = (health) => {
+        if (health >= 5)
+            return 'text-green-400';
+        if (health >= 2)
+            return 'text-yellow-400';
+        return 'text-red-400';
+    };
+    return (_jsxs("div", { className: cn("flex items-center gap-3 font-mono text-xs", className), children: [metrics.fps !== undefined && (_jsxs("div", { className: cn("flex items-center gap-1", getPerformanceColor(metrics.fps)), children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-current" }), _jsxs("span", { children: [metrics.fps, " FPS"] })] })), metrics.bufferHealth !== undefined && (_jsxs("div", { className: cn("flex items-center gap-1", getBufferColor(metrics.bufferHealth)), children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-current" }), _jsxs("span", { children: [metrics.bufferHealth.toFixed(1), "s"] })] })), metrics.quality !== undefined && (_jsxs("div", { className: "flex items-center gap-1 text-blue-400", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-current" }), _jsxs("span", { children: [metrics.quality, "p"] })] }))] }));
+};
+// Enhanced control bar that combines all controls
+export const EnhancedControlBar = function EnhancedControlBar({ className, showSkipButtons = true, showVolumeControl = true, showTimeDisplay = true, playButtonSize = "xl", skipButtonSize = "md", skipTime = 10, showPerformanceIndicators = process.env.NODE_ENV === 'development', performanceMetrics }) {
+    return (_jsxs("div", { className: cn("flex flex-col gap-4 bg-gradient-to-t from-black/80 to-transparent p-4", className), children: [_jsx(EnhancedSeekBar, { className: "w-full" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [showSkipButtons && (_jsx(EnhancedBackwardButton, { size: skipButtonSize, skipTime: skipTime, className: "shrink-0" })), _jsx(EnhancedPlayButton, { size: playButtonSize, className: "shrink-0" }), showSkipButtons && (_jsx(EnhancedForwardButton, { size: skipButtonSize, skipTime: skipTime, className: "shrink-0" })), showVolumeControl && (_jsx(EnhancedVolumeControl, { className: "shrink-0" })), showTimeDisplay && (_jsxs("div", { className: "flex items-center gap-1 font-mono text-sm", children: [_jsx(EnhancedTimeDisplay, { variant: "current" }), _jsx("span", { className: "text-white/60", children: "/" }), _jsx(EnhancedTimeDisplay, { variant: "duration" })] }))] }), _jsx("div", { className: "flex items-center gap-2", children: showPerformanceIndicators && (_jsx(PerformanceIndicator, { metrics: performanceMetrics, className: "text-white/80" })) })] })] }));
+};