@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

package/src/components/accessibility/keyboard-help-overlay.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '../../lib/utils';
+export function KeyboardHelpOverlay({ isOpen, onClose, shortcuts, className }) {
+    // Handle escape key to close
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, onClose]);
+    // Focus trap within the overlay
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const overlay = document.querySelector('[data-keyboard-help-overlay]');
+        if (!overlay)
+            return;
+        const focusableElements = Array.from(overlay.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
+        if (focusableElements.length === 0)
+            return;
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        // Focus the close button initially
+        const closeButton = overlay.querySelector('[data-close-button]');
+        closeButton?.focus();
+        const handleTabKey = (e) => {
+            if (e.key !== 'Tab')
+                return;
+            if (e.shiftKey) {
+                if (document.activeElement === firstElement) {
+                    e.preventDefault();
+                    lastElement.focus();
+                }
+            }
+            else {
+                if (document.activeElement === lastElement) {
+                    e.preventDefault();
+                    firstElement.focus();
+                }
+            }
+        };
+        document.addEventListener('keydown', handleTabKey);
+        return () => document.removeEventListener('keydown', handleTabKey);
+    }, [isOpen]);
+    if (!isOpen)
+        return null;
+    const formatKey = (key, modifiers) => {
+        const parts = [];
+        if (modifiers?.ctrl)
+            parts.push('Ctrl');
+        if (modifiers?.alt)
+            parts.push('Alt');
+        if (modifiers?.shift)
+            parts.push('Shift');
+        // Format special keys
+        let keyDisplay = key;
+        switch (key) {
+            case ' ':
+                keyDisplay = 'Space';
+                break;
+            case 'ArrowUp':
+                keyDisplay = '↑';
+                break;
+            case 'ArrowDown':
+                keyDisplay = '↓';
+                break;
+            case 'ArrowLeft':
+                keyDisplay = '←';
+                break;
+            case 'ArrowRight':
+                keyDisplay = '→';
+                break;
+            default:
+                keyDisplay = key.toUpperCase();
+        }
+        parts.push(keyDisplay);
+        return parts.join(' + ');
+    };
+    return (_jsx("div", { className: cn('fixed inset-0 z-50 flex items-center justify-center bg-black/50', 'backdrop-blur-sm', className), "data-keyboard-help-overlay": true, onClick: (e) => {
+            if (e.target === e.currentTarget) {
+                onClose();
+            }
+        }, role: "dialog", "aria-modal": "true", "aria-labelledby": "keyboard-help-title", "aria-describedby": "keyboard-help-description", children: _jsxs("div", { className: cn('w-full max-w-md rounded-lg bg-white p-6 shadow-xl', 'dark:bg-gray-900 dark:text-white', 'focus-within:outline-none', "fade-in-0 zoom-in-95 animate-in duration-200"), children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsx("h2", { id: "keyboard-help-title", className: "font-semibold text-lg", children: "Keyboard Shortcuts" }), _jsx("button", { "data-close-button": true, onClick: onClose, className: cn('rounded-md p-2 text-gray-500 transition-colors', 'hover:bg-gray-100 hover:text-gray-700', 'focus:outline-none focus:ring-2 focus:ring-blue-500', 'dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200'), "aria-label": "Close keyboard shortcuts help", children: _jsx("svg", { className: "h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx("p", { id: "keyboard-help-description", className: "mb-4 text-gray-600 text-sm dark:text-gray-400", children: "Use these keyboard shortcuts to control the media player:" }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: _jsx("dl", { className: "space-y-3", children: shortcuts.map(({ key, description, modifiers }, index) => (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("dt", { className: "text-gray-600 text-sm dark:text-gray-400", children: description }), _jsx("dd", { children: _jsx("kbd", { className: cn("inline-flex items-center rounded px-2 py-1 font-mono text-xs", "border border-gray-300 bg-gray-100 text-gray-800", "dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"), children: formatKey(key, modifiers) }) })] }, `${key}-${index}`))) }) }), _jsxs("div", { className: "mt-4 text-gray-500 text-xs dark:text-gray-400", children: ["Press ", _jsx("kbd", { className: "rounded bg-gray-100 px-1 dark:bg-gray-800", children: "Esc" }), " to close this help"] })] }) }));
+}

package/src/components/audio-player.d.ts

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

package/src/components/audio-player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio-player.d.ts","sourceRoot":"","sources":["audio-player.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEtD,eAAO,MAAM,WAAW,6GA0EvB,CAAA"}

package/src/components/audio-player.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useKeyboardControls } from "../hooks/use-keyboard-controls";
+import { useMediaPlayer } from "../hooks/use-media-player";
+import { cn } from "../lib/utils";
+export const AudioPlayer = forwardRef(({ src, className, children, keyboardControls = true, showControls = true, customControls = false, ...options }, ref) => {
+    const { state, controls, mediaRef, containerRef } = useMediaPlayer({
+        src,
+        ...options
+    });
+    useKeyboardControls({
+        enabled: keyboardControls,
+        state,
+        controls
+    });
+    const renderSources = () => {
+        if (Array.isArray(src)) {
+            return src.map((source, index) => _jsx("source", { src: source }, index));
+        }
+        return null;
+    };
+    const audioProps = {
+        ref: mediaRef,
+        controls: showControls && !customControls,
+        className: "w-full",
+        ...(Array.isArray(src) ? {} : { src })
+    };
+    return (_jsxs("div", { ref: ref || containerRef, className: cn("relative", "focus-within:outline-none", className), tabIndex: 0, children: [_jsxs("audio", { ...audioProps, children: [Array.isArray(src) && renderSources(), "Your browser does not support the audio element."] }), state.error && (_jsx("div", { className: "mt-2 rounded-md border border-red-300 bg-red-100 p-3", children: _jsxs("div", { className: "text-red-800", children: [_jsx("p", { className: "font-semibold", children: "Error" }), _jsx("p", { className: "text-sm", children: state.error })] }) })), state.isLoading && (_jsx("div", { className: "mt-2 rounded-md border border-gray-300 bg-gray-100 p-3", children: _jsxs("div", { className: "flex items-center space-x-2 text-gray-600", children: [_jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-gray-600 border-b-2" }), _jsx("span", { className: "text-sm", children: "Loading..." })] }) })), customControls && typeof children === "function" && (_jsx("div", { className: "mt-2", children: children({ state, controls }) })), customControls && typeof children !== "function" && _jsx("div", { className: "mt-2", children: children })] }));
+});
+AudioPlayer.displayName = "AudioPlayer";

package/src/components/basic/index.d.ts

@@ -0,0 +1,26 @@
+export { AudioPlayer } from "../audio-player";
+export { MediaPlayer } from "../media-player";
+export { VideoPlayer } from "../video-player";
+export { SimpleVideoPlayer } from "../simple-video-player";
+export { ModernMediaPlayer } from "../react-player-wrapper";
+export type { ModernMediaPlayerProps } from "../react-player-wrapper";
+export { FullscreenButton } from "../ui/fullscreen-button";
+export { PlayButton } from "../ui/play-button";
+export { SeekBar } from "../ui/seek-bar";
+export { TimeDisplay } from "../ui/time-display";
+export { VolumeControl } from "../ui/volume-control";
+export { MediaPlayerAudio } from "../media-player-audio";
+export { MediaPlayerControls, MediaPlayerControlsOverlay } from "../media-player-controls";
+export { MediaPlayerError } from "../media-player-error";
+export { MediaPlayerFullscreen } from "../media-player-fullscreen";
+export { MediaPlayerLoading } from "../media-player-loading";
+export { MediaPlayerPlay } from "../media-player-play";
+export { MediaPlayerRoot } from "../media-player-root";
+export { MediaPlayerSeek } from "../media-player-seek";
+export { MediaPlayerTime } from "../media-player-time";
+export { MediaPlayerTooltip } from "../media-player-tooltip";
+export { MediaPlayerVideo } from "../media-player-video";
+export { MediaPlayerVolume } from "../media-player-volume";
+export { BasicVideoPlayer } from "../examples/basic-video-player";
+export { CustomControlsExample } from "../examples/custom-controls-example";
+//# sourceMappingURL=index.d.ts.map

package/src/components/basic/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAG3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,YAAY,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAGtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EACL,mBAAmB,EACnB,0BAA0B,EAC3B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAG3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC"}

package/src/components/basic/index.js

@@ -0,0 +1,29 @@
+// Basic Media Player Components
+export { AudioPlayer } from "../audio-player";
+export { MediaPlayer } from "../media-player";
+export { VideoPlayer } from "../video-player";
+export { SimpleVideoPlayer } from "../simple-video-player";
+// Modern React Player
+export { ModernMediaPlayer } from "../react-player-wrapper";
+// Basic UI Components  
+export { FullscreenButton } from "../ui/fullscreen-button";
+export { PlayButton } from "../ui/play-button";
+export { SeekBar } from "../ui/seek-bar";
+export { TimeDisplay } from "../ui/time-display";
+export { VolumeControl } from "../ui/volume-control";
+// DiceUI-style Basic Components
+export { MediaPlayerAudio } from "../media-player-audio";
+export { MediaPlayerControls, MediaPlayerControlsOverlay } from "../media-player-controls";
+export { MediaPlayerError } from "../media-player-error";
+export { MediaPlayerFullscreen } from "../media-player-fullscreen";
+export { MediaPlayerLoading } from "../media-player-loading";
+export { MediaPlayerPlay } from "../media-player-play";
+export { MediaPlayerRoot } from "../media-player-root";
+export { MediaPlayerSeek } from "../media-player-seek";
+export { MediaPlayerTime } from "../media-player-time";
+export { MediaPlayerTooltip } from "../media-player-tooltip";
+export { MediaPlayerVideo } from "../media-player-video";
+export { MediaPlayerVolume } from "../media-player-volume";
+// Basic Examples
+export { BasicVideoPlayer } from "../examples/basic-video-player";
+export { CustomControlsExample } from "../examples/custom-controls-example";

package/src/components/enhanced/advanced-features.d.ts

@@ -0,0 +1,45 @@
+export interface Chapter {
+    id: string;
+    title: string;
+    startTime: number;
+    endTime: number;
+    thumbnail?: string;
+}
+export interface QualityLevel {
+    id: string;
+    label: string;
+    width: number;
+    height: number;
+    bitrate?: number;
+}
+export interface Subtitle {
+    id: string;
+    label: string;
+    language: string;
+    src: string;
+    default?: boolean;
+}
+export declare const QualitySelector: ({ qualities, currentQuality, onQualityChange, className }: {
+    qualities: QualityLevel[];
+    currentQuality: string;
+    onQualityChange: (qualityId: string) => void;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SubtitleSelector: ({ subtitles, currentSubtitle, onSubtitleChange, className }: {
+    subtitles: Subtitle[];
+    currentSubtitle: string | null;
+    onSubtitleChange: (subtitleId: string | null) => void;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const PlaybackSpeedSelector: ({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ChaptersPanel: ({ chapters, onChapterSelect, className }: {
+    chapters: Chapter[];
+    onChapterSelect: (chapter: Chapter) => void;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const PictureInPictureButton: ({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=advanced-features.d.ts.map

package/src/components/enhanced/advanced-features.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"advanced-features.d.ts","sourceRoot":"","sources":["advanced-features.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,OAAO;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,YAAY;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,QAAQ;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,OAAO,CAAA;CACjB;AAGD,eAAO,MAAM,eAAe,GAA4B,2DAKrD;IACF,SAAS,EAAE,YAAY,EAAE,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;IACtB,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,4CAsDA,CAAA;AAGD,eAAO,MAAM,gBAAgB,GAA6B,6DAKvD;IACF,SAAS,EAAE,QAAQ,EAAE,CAAA;IACrB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,gBAAgB,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACrD,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,4CA8DA,CAAA;AAGD,eAAO,MAAM,qBAAqB,GAAkC,eAEjE;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,4CAmDA,CAAA;AAGD,eAAO,MAAM,aAAa,GAA0B,0CAIjD;IACF,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,4CAyCA,CAAA;AAGD,eAAO,MAAM,sBAAsB,GAAmC,eAEnE;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,4CA0BA,CAAA"}

package/src/components/enhanced/advanced-features.js

@@ -0,0 +1,64 @@
+"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";
+// Quality selector component
+export const QualitySelector = function QualitySelector({ qualities, currentQuality, onQualityChange, className }) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const currentQualityLabel = React.useMemo(() => {
+        return qualities.find(q => q.id === currentQuality)?.label || "Auto";
+    }, [qualities, currentQuality]);
+    return (_jsxs("div", { className: cn("relative", className), children: [_jsxs("button", { type: "button", onClick: () => setIsOpen(!isOpen), className: "flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70", "aria-label": "Select quality", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-4 w-4", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }), _jsx("span", { className: "text-sm", children: currentQualityLabel }), _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: cn("h-4 w-4 transition-transform", isOpen && "rotate-180"), children: _jsx("path", { d: "M7 10l5 5 5-5z" }) })] }), isOpen && (_jsx("div", { className: "absolute right-0 bottom-full mb-2 min-w-32 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm", children: qualities.map((quality) => (_jsxs("button", { onClick: () => {
+                        onQualityChange(quality.id);
+                        setIsOpen(false);
+                    }, className: cn("w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10", quality.id === currentQuality && "bg-primary/20 text-primary"), children: [quality.label, quality.bitrate && (_jsxs("span", { className: "ml-2 text-white/60 text-xs", children: ["(", Math.round(quality.bitrate / 1000), "k)"] }))] }, quality.id))) }))] }));
+};
+// Subtitle selector component
+export const SubtitleSelector = function SubtitleSelector({ subtitles, currentSubtitle, onSubtitleChange, className }) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const currentSubtitleLabel = React.useMemo(() => {
+        if (!currentSubtitle)
+            return "Off";
+        return subtitles.find(s => s.id === currentSubtitle)?.label || "Off";
+    }, [subtitles, currentSubtitle]);
+    return (_jsxs("div", { className: cn("relative", className), children: [_jsxs("button", { type: "button", onClick: () => setIsOpen(!isOpen), className: "flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70", "aria-label": "Select subtitles", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-4 w-4", children: _jsx("path", { d: "M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z" }) }), _jsx("span", { className: "text-sm", children: currentSubtitleLabel }), _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: cn("h-4 w-4 transition-transform", isOpen && "rotate-180"), children: _jsx("path", { d: "M7 10l5 5 5-5z" }) })] }), isOpen && (_jsxs("div", { className: "absolute right-0 bottom-full mb-2 min-w-32 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm", children: [_jsx("button", { onClick: () => {
+                            onSubtitleChange(null);
+                            setIsOpen(false);
+                        }, className: cn("w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10", !currentSubtitle && "bg-primary/20 text-primary"), children: "Off" }), subtitles.map((subtitle) => (_jsx("button", { onClick: () => {
+                            onSubtitleChange(subtitle.id);
+                            setIsOpen(false);
+                        }, className: cn("w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10", subtitle.id === currentSubtitle && "bg-primary/20 text-primary"), children: subtitle.label }, subtitle.id)))] }))] }));
+};
+// Playback speed selector
+export const PlaybackSpeedSelector = function PlaybackSpeedSelector({ className }) {
+    const dispatch = useMediaDispatch();
+    const playbackRate = useMediaSelector(state => state.playbackRate);
+    const [isOpen, setIsOpen] = React.useState(false);
+    const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+    const handleSpeedChange = React.useCallback((speed) => {
+        dispatch({ type: MediaActionTypes.SET_PLAYBACK_RATE, detail: speed });
+        setIsOpen(false);
+    }, [dispatch]);
+    return (_jsxs("div", { className: cn("relative", className), children: [_jsxs("button", { type: "button", onClick: () => setIsOpen(!isOpen), className: "flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70", "aria-label": "Select playback speed", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-4 w-4", children: _jsx("path", { d: "M13,8A4,4 0 0,0 9,12A4,4 0 0,0 13,16A4,4 0 0,0 17,12A4,4 0 0,0 13,8M13,14A2,2 0 0,1 11,12A2,2 0 0,1 13,10A2,2 0 0,1 15,12A2,2 0 0,1 13,14M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4Z" }) }), _jsxs("span", { className: "text-sm", children: [playbackRate, "x"] }), _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: cn("h-4 w-4 transition-transform", isOpen && "rotate-180"), children: _jsx("path", { d: "M7 10l5 5 5-5z" }) })] }), isOpen && (_jsx("div", { className: "absolute right-0 bottom-full mb-2 min-w-20 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm", children: speeds.map((speed) => (_jsxs("button", { onClick: () => handleSpeedChange(speed), className: cn("w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10", speed === playbackRate && "bg-primary/20 text-primary"), children: [speed, "x"] }, speed))) }))] }));
+};
+// Chapters component
+export const ChaptersPanel = function ChaptersPanel({ chapters, onChapterSelect, className }) {
+    const currentTime = useMediaSelector(state => state.currentTime);
+    const currentChapter = React.useMemo(() => {
+        return chapters.find(chapter => currentTime >= chapter.startTime && currentTime < chapter.endTime);
+    }, [chapters, currentTime]);
+    return (_jsxs("div", { className: cn("rounded-lg border border-white/20 bg-black/90 p-4 backdrop-blur-sm", className), children: [_jsx("h3", { className: "mb-3 font-semibold text-white", children: "Chapters" }), _jsx("div", { className: "max-h-64 space-y-2 overflow-y-auto", children: chapters.map((chapter) => (_jsxs("button", { onClick: () => onChapterSelect(chapter), className: cn("flex w-full items-center gap-3 rounded-lg p-3 text-left transition-colors", "hover:bg-white/10", chapter.id === currentChapter?.id && "border border-primary/30 bg-primary/20"), children: [chapter.thumbnail && (_jsx("img", { src: chapter.thumbnail, alt: chapter.title, className: "h-9 w-16 rounded object-cover" })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate font-medium text-white", children: chapter.title }), _jsxs("div", { className: "text-sm text-white/60", children: [formatTime(chapter.startTime), " - ", formatTime(chapter.endTime)] })] })] }, chapter.id))) })] }));
+};
+// Picture-in-Picture button
+export const PictureInPictureButton = function PictureInPictureButton({ className }) {
+    const dispatch = useMediaDispatch();
+    const isPictureInPicture = useMediaSelector(state => state.isPictureInPicture);
+    const handleTogglePiP = React.useCallback(() => {
+        dispatch({
+            type: isPictureInPicture ? MediaActionTypes.EXIT_PIP : MediaActionTypes.ENTER_PIP
+        });
+    }, [dispatch, isPictureInPicture]);
+    return (_jsx("button", { type: "button", onClick: handleTogglePiP, className: cn("flex h-10 w-10 items-center justify-center rounded-full text-white", "transition-colors hover:bg-white/10", className), "aria-label": isPictureInPicture ? "Exit Picture-in-Picture" : "Enter Picture-in-Picture", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-5 w-5", children: _jsx("path", { d: "M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z" }) }) }));
+};

package/src/components/enhanced/debug-panel.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Debug Panel Component for Performance Monitoring
+ * Development-only component for displaying performance metrics
+ */
+import React from 'react';
+interface PerformanceMetrics {
+    fps: number;
+    memoryUsage: number;
+    bufferHealth: number;
+    networkBandwidth: number;
+    droppedFrames: number;
+    decodedFrames: number;
+    presentationTime: number;
+}
+interface PreloadingStats {
+    preloadedItems: number;
+    engagementScore: number;
+    queueLength: number;
+    hitRate: number;
+    totalSaved: number;
+}
+interface DebugPanelProps {
+    /** Performance metrics to display */
+    performanceMetrics?: Partial<PerformanceMetrics>;
+    /** Preloading statistics */
+    preloadingStats?: PreloadingStats;
+    /** Current playback state */
+    playbackState?: {
+        currentTime: number;
+        duration: number;
+        volume: number;
+        isPlaying: boolean;
+        quality: number;
+        isBuffering: boolean;
+        error?: string;
+    };
+    /** HLS-specific metrics */
+    hlsMetrics?: {
+        currentLevel: number;
+        availableLevels: number;
+        bandwidthEstimate: number;
+        droppedFrames: number;
+    };
+    /** Plugin information */
+    pluginInfo?: {
+        loadedPlugins: string[];
+        activePlugins: string[];
+        pluginCount: number;
+    };
+    /** Additional debug information */
+    debugInfo?: Record<string, any>;
+    /** Custom className */
+    className?: string;
+    /** Panel position */
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    /** Whether the panel is collapsed by default */
+    defaultCollapsed?: boolean;
+    /** Custom title */
+    title?: string;
+}
+/**
+ * Debug Panel Component
+ */
+export declare const DebugPanel: React.FC<DebugPanelProps>;
+/**
+ * Performance Debug Panel - simplified version focused on performance metrics
+ */
+export declare const PerformanceDebugPanel: React.FC<Omit<DebugPanelProps, 'position' | 'defaultCollapsed' | 'title'>>;
+export default DebugPanel;
+//# sourceMappingURL=debug-panel.d.ts.map

package/src/components/enhanced/debug-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debug-panel.d.ts","sourceRoot":"","sources":["debug-panel.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,UAAU,kBAAkB;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;CACzB;AAED,UAAU,eAAe;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,eAAe;IACxB,qCAAqC;IACrC,kBAAkB,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACjD,4BAA4B;IAC5B,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,6BAA6B;IAC7B,aAAa,CAAC,EAAE;QACf,WAAW,EAAE,MAAM,CAAC;QACpB,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,SAAS,EAAE,OAAO,CAAC;QACnB,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,EAAE,OAAO,CAAC;QACrB,KAAK,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,2BAA2B;IAC3B,UAAU,CAAC,EAAE;QACZ,YAAY,EAAE,MAAM,CAAC;QACrB,eAAe,EAAE,MAAM,CAAC;QACxB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,aAAa,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,yBAAyB;IACzB,UAAU,CAAC,EAAE;QACZ,aAAa,EAAE,MAAM,EAAE,CAAC;QACxB,aAAa,EAAE,MAAM,EAAE,CAAC;QACxB,WAAW,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAChC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;IACrE,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgVhD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,kBAAkB,GAAG,OAAO,CAAC,CAS5G,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/src/components/enhanced/debug-panel.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Debug Panel Component for Performance Monitoring
+ * Development-only component for displaying performance metrics
+ */
+import React, { useMemo } from 'react';
+import { cn } from '../../lib/utils';
+/**
+ * Debug Panel Component
+ */
+export const DebugPanel = ({ performanceMetrics = {}, preloadingStats = {}, playbackState = {}, hlsMetrics = {}, pluginInfo = {}, debugInfo = {}, className, position = 'top-right', defaultCollapsed = false, title = 'BaroiPlayer Debug Panel' }) => {
+    const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
+    const [activeTab, setActiveTab] = React.useState('performance');
+    // Position classes
+    const positionClasses = useMemo(() => {
+        switch (position) {
+            case 'top-left':
+                return 'top-4 left-4';
+            case 'top-right':
+                return 'top-4 right-4';
+            case 'bottom-left':
+                return 'bottom-4 left-4';
+            case 'bottom-right':
+                return 'bottom-4 right-4';
+            default:
+                return 'top-4 right-4';
+        }
+    }, [position]);
+    // Format bytes
+    const formatBytes = (bytes) => {
+        if (bytes === 0)
+            return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    };
+    // Format time
+    const formatTime = (seconds) => {
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    };
+    // Render performance metrics
+    const renderPerformanceMetrics = () => (_jsx("div", { className: "space-y-2", children: _jsxs("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [_jsxs("div", { children: [_jsx("span", { className: "text-green-400", children: "FPS:" }), _jsx("span", { className: "ml-2 font-mono", children: performanceMetrics.fps || 0 })] }), _jsxs("div", { children: [_jsx("span", { className: "text-blue-400", children: "Memory:" }), _jsxs("span", { className: "ml-2 font-mono", children: [((performanceMetrics.memoryUsage || 0) / 1024 / 1024).toFixed(1), " MB"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-yellow-400", children: "Buffer:" }), _jsxs("span", { className: "ml-2 font-mono", children: [(performanceMetrics.bufferHealth || 0).toFixed(2), "s"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-purple-400", children: "Bandwidth:" }), _jsxs("span", { className: "ml-2 font-mono", children: [formatBytes(performanceMetrics.networkBandwidth || 0), "/s"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-red-400", children: "Dropped:" }), _jsxs("span", { className: "ml-2 font-mono", children: [performanceMetrics.droppedFrames || 0, " frames"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-cyan-400", children: "Decoded:" }), _jsxs("span", { className: "ml-2 font-mono", children: [performanceMetrics.decodedFrames || 0, " frames"] })] })] }) }));
+    // Render playback state
+    const renderPlaybackState = () => (_jsx("div", { className: "space-y-2", children: _jsxs("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [_jsxs("div", { children: [_jsx("span", { className: "text-green-400", children: "Status:" }), _jsx("span", { className: "ml-2 font-mono", children: playbackState.isPlaying ? (_jsx("span", { className: "text-green-300", children: "Playing" })) : (_jsx("span", { className: "text-red-300", children: "Paused" })) })] }), _jsxs("div", { children: [_jsx("span", { className: "text-blue-400", children: "Time:" }), _jsxs("span", { className: "ml-2 font-mono", children: [formatTime(playbackState.currentTime || 0), " / ", formatTime(playbackState.duration || 0)] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-yellow-400", children: "Volume:" }), _jsxs("span", { className: "ml-2 font-mono", children: [Math.round((playbackState.volume || 0) * 100), "%"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-purple-400", children: "Quality:" }), _jsxs("span", { className: "ml-2 font-mono", children: [playbackState.quality || 0, "p"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-red-400", children: "Buffering:" }), _jsx("span", { className: "ml-2 font-mono", children: playbackState.isBuffering ? (_jsx("span", { className: "text-yellow-300", children: "Yes" })) : (_jsx("span", { className: "text-green-300", children: "No" })) })] }), playbackState.error && (_jsxs("div", { className: "col-span-2", children: [_jsx("span", { className: "text-red-400", children: "Error:" }), _jsx("span", { className: "ml-2 break-all font-mono text-red-300 text-xs", children: playbackState.error })] }))] }) }));
+    // Render preloading stats
+    const renderPreloadingStats = () => (_jsx("div", { className: "space-y-2", children: _jsxs("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [_jsxs("div", { children: [_jsx("span", { className: "text-green-400", children: "Preloaded:" }), _jsxs("span", { className: "ml-2 font-mono", children: [preloadingStats.preloadedItems || 0, " items"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-blue-400", children: "Engagement:" }), _jsxs("span", { className: "ml-2 font-mono", children: [(preloadingStats.engagementScore || 0).toFixed(1), "%"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-yellow-400", children: "Queue:" }), _jsxs("span", { className: "ml-2 font-mono", children: [preloadingStats.queueLength || 0, " items"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-purple-400", children: "Hit Rate:" }), _jsxs("span", { className: "ml-2 font-mono", children: [(preloadingStats.hitRate || 0).toFixed(1), "%"] })] }), _jsxs("div", { className: "col-span-2", children: [_jsx("span", { className: "text-cyan-400", children: "Saved:" }), _jsx("span", { className: "ml-2 font-mono", children: formatBytes(preloadingStats.totalSaved || 0) })] })] }) }));
+    // Render HLS metrics
+    const renderHLSMetrics = () => (_jsx("div", { className: "space-y-2", children: _jsxs("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [_jsxs("div", { children: [_jsx("span", { className: "text-green-400", children: "Level:" }), _jsxs("span", { className: "ml-2 font-mono", children: [hlsMetrics.currentLevel || 0, " / ", hlsMetrics.availableLevels || 0] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-blue-400", children: "Bandwidth:" }), _jsxs("span", { className: "ml-2 font-mono", children: [formatBytes(hlsMetrics.bandwidthEstimate || 0), "/s"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-red-400", children: "Dropped:" }), _jsxs("span", { className: "ml-2 font-mono", children: [hlsMetrics.droppedFrames || 0, " frames"] })] })] }) }));
+    // Render plugin info
+    const renderPluginInfo = () => (_jsx("div", { className: "space-y-2", children: _jsxs("div", { className: "text-xs", children: [_jsxs("div", { children: [_jsx("span", { className: "text-green-400", children: "Total:" }), _jsxs("span", { className: "ml-2 font-mono", children: [pluginInfo.pluginCount || 0, " plugins"] })] }), _jsxs("div", { className: "mt-2", children: [_jsx("span", { className: "text-blue-400", children: "Active:" }), _jsx("div", { className: "ml-2 space-y-1 font-mono text-xs", children: pluginInfo.activePlugins?.map((plugin, index) => (_jsxs("div", { className: "text-green-300", children: ["\u2022 ", plugin] }, index))) || _jsx("div", { className: "text-gray-400", children: "None" }) })] }), pluginInfo.loadedPlugins && pluginInfo.loadedPlugins.length > pluginInfo.activePlugins?.length && (_jsxs("div", { className: "mt-2", children: [_jsx("span", { className: "text-yellow-400", children: "Loaded (inactive):" }), _jsx("div", { className: "ml-2 space-y-1 font-mono text-xs", children: pluginInfo.loadedPlugins
+                                .filter(plugin => !pluginInfo.activePlugins?.includes(plugin))
+                                .map((plugin, index) => (_jsxs("div", { className: "text-yellow-300", children: ["\u2022 ", plugin] }, index))) })] }))] }) }));
+    // Render debug info
+    const renderDebugInfo = () => (_jsx("div", { className: "space-y-2", children: _jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(debugInfo).map(([key, value]) => (_jsxs("div", { children: [_jsxs("span", { className: "text-yellow-400", children: [key, ":"] }), _jsx("span", { className: "ml-2 text-gray-300", children: typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value) })] }, key))) }) }));
+    // Render tabs
+    const renderTabs = () => (_jsx("div", { className: "flex space-x-1 border-gray-600 border-b", children: [
+            { id: 'performance', label: 'Performance' },
+            { id: 'hls', label: 'HLS' },
+            { id: 'plugins', label: 'Plugins' },
+            { id: 'debug', label: 'Debug' }
+        ].map(tab => (_jsx("button", { onClick: () => setActiveTab(tab.id), className: cn("px-2 py-1 font-medium text-xs transition-colors", activeTab === tab.id
+                ? "border-blue-400 border-b text-blue-400"
+                : 'text-gray-400 hover:text-white'), children: tab.label }, tab.id))) }));
+    // Render active tab content
+    const renderTabContent = () => {
+        switch (activeTab) {
+            case 'performance':
+                return (_jsxs("div", { className: "space-y-3", children: [renderPerformanceMetrics(), _jsx("hr", { className: "border-gray-600" }), renderPlaybackState(), _jsx("hr", { className: "border-gray-600" }), renderPreloadingStats()] }));
+            case 'hls':
+                return renderHLSMetrics();
+            case 'plugins':
+                return renderPluginInfo();
+            case 'debug':
+                return renderDebugInfo();
+            default:
+                return renderPerformanceMetrics();
+        }
+    };
+    // Only render in development
+    if (process.env.NODE_ENV !== 'development') {
+        return null;
+    }
+    return (_jsxs("div", { className: cn("fixed z-50 min-w-80 max-w-96 rounded-lg border border-gray-700 bg-black/90 p-3 font-mono text-white text-xs backdrop-blur-sm", positionClasses, className), children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsx("h3", { className: "font-bold text-blue-400 text-sm", children: title }), _jsx("div", { className: "flex items-center space-x-2", children: _jsx("button", { onClick: () => setIsCollapsed(!isCollapsed), className: "text-gray-400 transition-colors hover:text-white", "aria-label": isCollapsed ? 'Expand' : 'Collapse', children: isCollapsed ? (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: _jsx("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) : (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: _jsx("path", { d: "M3 7.5L6 4.5L9 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) }) })] }), isCollapsed ? (_jsxs("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [_jsxs("div", { children: [_jsx("span", { className: "text-green-400", children: "FPS:" }), _jsx("span", { className: "ml-1 font-mono", children: performanceMetrics.fps || 0 })] }), _jsxs("div", { children: [_jsx("span", { className: "text-blue-400", children: "Memory:" }), _jsxs("span", { className: "ml-1 font-mono", children: [((performanceMetrics.memoryUsage || 0) / 1024 / 1024).toFixed(1), "MB"] })] })] })) : (_jsxs(_Fragment, { children: [renderTabs(), _jsx("div", { className: "mt-3 max-h-64 overflow-y-auto", children: renderTabContent() })] }))] }));
+};
+/**
+ * Performance Debug Panel - simplified version focused on performance metrics
+ */
+export const PerformanceDebugPanel = (props) => {
+    return (_jsx(DebugPanel, { ...props, position: "top-right", defaultCollapsed: false, title: "Performance Monitor" }));
+};
+export default DebugPanel;

package/src/components/enhanced/debug-panel.tsx

@@ -262,7 +262,7 @@ export const DebugPanel: React.FC<DebugPanelProps> = ({
 						)) || <div className="text-gray-400">None</div>}
 					</div>
 				</div>
-				{pluginInfo.loadedPlugins && pluginInfo.loadedPlugins.length > pluginInfo.activePlugins?.length && (
+				{pluginInfo.loadedPlugins && pluginInfo.loadedPlugins.length > (pluginInfo.activePlugins?.length ?? 0) && (
 					<div className="mt-2">
 						<span className="text-yellow-400">Loaded (inactive):</span>
 						<div className="ml-2 space-y-1 font-mono text-xs">

package/src/components/enhanced/enhanced-controls.d.ts

@@ -0,0 +1,50 @@
+export declare const EnhancedPlayButton: ({ className, size }: {
+    className?: string;
+    size?: "sm" | "md" | "lg" | "xl";
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const EnhancedSeekBar: ({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const EnhancedVolumeControl: ({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const EnhancedBackwardButton: ({ className, size, skipTime }: {
+    className?: string;
+    size?: "sm" | "md" | "lg";
+    skipTime?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const EnhancedForwardButton: ({ className, size, skipTime }: {
+    className?: string;
+    size?: "sm" | "md" | "lg";
+    skipTime?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const EnhancedTimeDisplay: ({ variant, className }: {
+    variant?: "current" | "duration" | "remaining";
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const PerformanceIndicator: ({ metrics, className }: {
+    metrics?: {
+        fps?: number;
+        bufferHealth?: number;
+        quality?: number;
+        bandwidth?: number;
+    };
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export declare const EnhancedControlBar: ({ className, showSkipButtons, showVolumeControl, showTimeDisplay, playButtonSize, skipButtonSize, skipTime, showPerformanceIndicators, performanceMetrics }: {
+    className?: string;
+    showSkipButtons?: boolean;
+    showVolumeControl?: boolean;
+    showTimeDisplay?: boolean;
+    playButtonSize?: "sm" | "md" | "lg" | "xl";
+    skipButtonSize?: "sm" | "md" | "lg";
+    skipTime?: number;
+    showPerformanceIndicators?: boolean;
+    performanceMetrics?: {
+        fps?: number;
+        bufferHealth?: number;
+        quality?: number;
+        bandwidth?: number;
+    };
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=enhanced-controls.d.ts.map

package/src/components/enhanced/enhanced-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"enhanced-controls.d.ts","sourceRoot":"","sources":["enhanced-controls.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,kBAAkB,GAA+B,qBAG3D;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAChC,4CA0DA,CAAA;AAGD,eAAO,MAAM,eAAe,GAA4B,eAErD;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,4CA0JA,CAAA;AAGD,eAAO,MAAM,qBAAqB,GAAkC,eAEjE;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,4CAqEA,CAAA;AAGD,eAAO,MAAM,sBAAsB,GAAmC,+BAInE;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;CACjB,4CAiDA,CAAA;AAGD,eAAO,MAAM,qBAAqB,GAAkC,+BAIjE;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;CACjB,4CAkDA,CAAA;AAGD,eAAO,MAAM,mBAAmB,GAAgC,wBAG7D;IACF,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAA;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,4CAsBA,CAAA;AAGD,eAAO,MAAM,oBAAoB,GAAiC,wBAG/D;IACF,OAAO,CAAC,EAAE;QACT,GAAG,CAAC,EAAE,MAAM,CAAA;QACZ,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,SAAS,CAAC,EAAE,MAAM,CAAA;KAClB,CAAA;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,mDAuCA,CAAA;AAGD,eAAO,MAAM,kBAAkB,GAA+B,6JAU3D;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,cAAc,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAC1C,cAAc,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,kBAAkB,CAAC,EAAE;QACpB,GAAG,CAAC,EAAE,MAAM,CAAA;QACZ,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,SAAS,CAAC,EAAE,MAAM,CAAA;KAClB,CAAA;CACD,4CAyDA,CAAA"}