@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/src/components/icons/svg-icons/VolumeTwoIcon.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+declare const VolumeTwoIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default VolumeTwoIcon;
+//# sourceMappingURL=VolumeTwoIcon.d.ts.map

package/src/components/icons/svg-icons/VolumeTwoIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeTwoIcon.d.ts","sourceRoot":"","sources":["VolumeTwoIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAQ,MAAM,OAAO,CAAA;AAEtC,QAAA,MAAM,aAAa,GAAI,OAAO,QAAQ,CAAC,aAAa,CAAC,4CAUpD,CAAA;AAED,eAAe,aAAa,CAAA"}

package/src/components/icons/svg-icons/VolumeTwoIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const VolumeTwoIcon = (props) => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '1em', height: '1em', viewBox: '0 0 24 24', ...props, children: _jsxs("g", { fill: 'currentColor', children: [_jsx("path", { d: 'M2.003 11.716c.037-1.843.056-2.764.668-3.552a3.18 3.18 0 0 1 .413-.431c.752-.636 1.746-.636 3.733-.636c.71 0 1.065 0 1.403-.092c.07-.02.14-.042.209-.067c.33-.121.627-.33 1.22-.746c2.338-1.645 3.508-2.467 4.489-2.11c.188.069.37.168.533.29c.848.635.913 2.115 1.042 5.073a70.58 70.58 0 0 1 .08 2.555c0 .521-.032 1.46-.08 2.555c-.13 2.958-.194 4.438-1.042 5.073a2.109 2.109 0 0 1-.533.29c-.982.357-2.15-.465-4.49-2.11c-.592-.416-.889-.625-1.22-.746a2.61 2.61 0 0 0-.208-.067c-.338-.092-.693-.092-1.403-.092c-1.987 0-2.98 0-3.733-.636a3.145 3.145 0 0 1-.413-.43c-.612-.79-.63-1.71-.668-3.553a14.06 14.06 0 0 1 0-.569Z' }), _jsx("path", { fillRule: 'evenodd', d: 'M19.49 5.552a.66.66 0 0 1 .97.094l-.529.471l.53-.47l.002.002l.003.004l.007.009a2.572 2.572 0 0 1 .079.112c.047.071.111.173.186.305c.149.264.339.652.526 1.171C21.64 8.291 22 9.851 22 12c0 2.15-.36 3.71-.736 4.75c-.187.52-.377.907-.526 1.172a4.655 4.655 0 0 1-.265.417l-.007.009l-.003.003l-.001.002s-.001.001-.531-.47l.53.471a.66.66 0 0 1-.971.094a.77.77 0 0 1-.09-1.035l.03-.041c.026-.04.07-.11.125-.207a6.28 6.28 0 0 0 .422-.943c.314-.871.644-2.253.644-4.222c0-1.97-.33-3.35-.644-4.222a6.28 6.28 0 0 0-.422-.942a3.152 3.152 0 0 0-.157-.253m-1.641 1.833c.333-.197.753-.07.938.286l-.603.357l.603-.357l.001.002l.002.003l.003.007l.01.018l.024.053c.018.042.042.099.07.17c.053.145.12.35.185.62c.13.54.252 1.337.252 2.425c0 1.089-.122 1.886-.252 2.426c-.065.27-.132.475-.186.619a3.04 3.04 0 0 1-.094.223l-.009.018l-.003.007l-.002.003v.002s-.001.001-.604-.356l.603.357c-.185.355-.605.483-.938.286c-.33-.196-.45-.638-.272-.991l.004-.01l.035-.085c.032-.086.08-.23.13-.438c.1-.416.208-1.09.208-2.06c0-.971-.108-1.645-.208-2.06a3.757 3.757 0 0 0-.165-.524l-.004-.01a.76.76 0 0 1 .272-.991Z', clipRule: 'evenodd' })] }) }));
+export default VolumeTwoIcon;

package/src/components/legacy.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Legacy Components (Deprecated)
+ * These components are wrapped with deprecation warnings
+ */
+import React from "react";
+export declare const ModernMediaPlayer: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
+export declare const SimpleVideoPlayer: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
+export declare const LegacyPlayButton: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
+export declare const LegacySeekBar: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
+export declare const LegacyTimeDisplay: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
+export declare const LegacyVolumeControl: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
+export declare const LegacyFullscreenButton: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
+//# sourceMappingURL=legacy.d.ts.map

package/src/components/legacy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"legacy.d.ts","sourceRoot":"","sources":["legacy.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAA;AAgBzB,eAAO,MAAM,iBAAiB,8EAM5B,CAAA;AAIF,eAAO,MAAM,iBAAiB,8EAM5B,CAAA;AAKF,eAAO,MAAM,gBAAgB,8EAM3B,CAAA;AAIF,eAAO,MAAM,aAAa,8EAMxB,CAAA;AAIF,eAAO,MAAM,iBAAiB,8EAM5B,CAAA;AAIF,eAAO,MAAM,mBAAmB,8EAM9B,CAAA;AAIF,eAAO,MAAM,sBAAsB,8EAMjC,CAAA"}

package/src/components/legacy.js

@@ -0,0 +1,52 @@
+/**
+ * Legacy Components (Deprecated)
+ * These components are wrapped with deprecation warnings
+ */
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { showDeprecationWarning } from "../lib/deprecation";
+import { PlayButton } from "./ui/play-button";
+import { SeekBar } from "./ui/seek-bar";
+import { TimeDisplay } from "./ui/time-display";
+import { VolumeControl } from "./ui/volume-control";
+import { FullscreenButton } from "./ui/fullscreen-button";
+import { ModernMediaPlayer as ReactPlayerWrapper } from "./react-player-wrapper";
+import { SimpleVideoPlayer as SimpleVideoPlayerBase } from "./simple-video-player";
+// Legacy component wrappers with deprecation warnings
+export const ModernMediaPlayer = React.forwardRef((props, ref) => {
+    showDeprecationWarning("ModernMediaPlayer", "MediaPlayer (the primary media player component)");
+    return _jsx(ReactPlayerWrapper, { ...props, ref: ref });
+});
+ModernMediaPlayer.displayName = "DeprecatedModernMediaPlayer";
+export const SimpleVideoPlayer = React.forwardRef((props, ref) => {
+    showDeprecationWarning("SimpleVideoPlayer", "VideoPlayer (the primary video player component)");
+    return _jsx(SimpleVideoPlayerBase, { ...props, ref: ref });
+});
+SimpleVideoPlayer.displayName = "DeprecatedSimpleVideoPlayer";
+// Legacy UI components with deprecation warnings
+export const LegacyPlayButton = React.forwardRef((props, ref) => {
+    showDeprecationWarning("PlayButton", "Use MediaPlayer compound components or MediaPlayer (all-in-one)");
+    return _jsx(PlayButton, { ...props, ref: ref });
+});
+LegacyPlayButton.displayName = "DeprecatedPlayButton";
+export const LegacySeekBar = React.forwardRef((props, ref) => {
+    showDeprecationWarning("SeekBar", "Use MediaPlayer compound components or MediaPlayer (all-in-one)");
+    return _jsx(SeekBar, { ...props, ref: ref });
+});
+LegacySeekBar.displayName = "DeprecatedSeekBar";
+export const LegacyTimeDisplay = React.forwardRef((props, ref) => {
+    showDeprecationWarning("TimeDisplay", "Use MediaPlayer compound components or MediaPlayer (all-in-one)");
+    return _jsx(TimeDisplay, { ...props, ref: ref });
+});
+LegacyTimeDisplay.displayName = "DeprecatedTimeDisplay";
+export const LegacyVolumeControl = React.forwardRef((props, ref) => {
+    showDeprecationWarning("VolumeControl", "Use MediaPlayer compound components or MediaPlayer (all-in-one)");
+    return _jsx(VolumeControl, { ...props, ref: ref });
+});
+LegacyVolumeControl.displayName = "DeprecatedVolumeControl";
+export const LegacyFullscreenButton = React.forwardRef((props, ref) => {
+    showDeprecationWarning("FullscreenButton", "Use MediaPlayer compound components or MediaPlayer (all-in-one)");
+    return _jsx(FullscreenButton, { ...props, ref: ref });
+});
+LegacyFullscreenButton.displayName = "DeprecatedFullscreenButton";

package/src/components/media-metadata-display.d.ts

@@ -0,0 +1,11 @@
+interface MediaMetadataDisplayProps {
+    src: string;
+}
+export declare function MediaMetadataDisplay({ src }: MediaMetadataDisplayProps): import("react/jsx-runtime").JSX.Element;
+interface MediaInfoProps {
+    src: string;
+    title?: string;
+}
+export declare function MediaInfo({ src, title }: MediaInfoProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=media-metadata-display.d.ts.map

package/src/components/media-metadata-display.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-metadata-display.d.ts","sourceRoot":"","sources":["media-metadata-display.tsx"],"names":[],"mappings":"AAGA,UAAU,yBAAyB;IACjC,GAAG,EAAE,MAAM,CAAA;CACZ;AAoDD,wBAAgB,oBAAoB,CAAC,EAAE,GAAG,EAAE,EAAE,yBAAyB,2CAStE;AAGD,UAAU,cAAc;IACtB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAiBD,wBAAgB,SAAS,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,cAAc,2CAUvD"}

package/src/components/media-metadata-display.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import { useMediaMetadata, formatTime } from '../hooks/use-media-metadata';
+function MetadataSkeleton() {
+    return (_jsxs("div", { className: "animate-pulse space-y-2", children: [_jsx("div", { className: "h-4 w-3/4 rounded bg-gray-700" }), _jsx("div", { className: "h-3 w-1/2 rounded bg-gray-700" }), _jsx("div", { className: "h-3 w-2/3 rounded bg-gray-700" })] }));
+}
+function MediaMetadataContent({ src }) {
+    // Use the use() hook for async data - this will suspend until data loads
+    const metadata = useMediaMetadata(src);
+    return (_jsxs("div", { className: "media-metadata space-y-2 text-white", children: [_jsxs("div", { children: [_jsx("span", { className: "text-gray-400 text-sm", children: "Duration: " }), _jsx("span", { children: formatTime(metadata.duration) })] }), _jsxs("div", { children: [_jsx("span", { className: "text-gray-400 text-sm", children: "Format: " }), _jsx("span", { children: metadata.format })] }), metadata.width && metadata.height && (_jsxs("div", { children: [_jsx("span", { className: "text-gray-400 text-sm", children: "Resolution: " }), _jsxs("span", { children: [metadata.width, " x ", metadata.height] })] })), metadata.title && (_jsxs("div", { children: [_jsx("span", { className: "text-gray-400 text-sm", children: "Title: " }), _jsx("span", { children: metadata.title })] })), metadata.artist && (_jsxs("div", { children: [_jsx("span", { className: "text-gray-400 text-sm", children: "Artist: " }), _jsx("span", { children: metadata.artist })] }))] }));
+}
+export function MediaMetadataDisplay({ src }) {
+    return (_jsxs("div", { className: "rounded-lg bg-gray-800 p-4", children: [_jsx("h4", { className: "mb-3 font-medium text-white", children: "Media Information" }), _jsx(Suspense, { fallback: _jsx(MetadataSkeleton, {}), children: _jsx(MediaMetadataContent, { src: src }) })] }));
+}
+function MediaErrorFallback({ error, retry }) {
+    return (_jsxs("div", { className: "rounded-lg border border-red-700 bg-red-900/20 p-4", children: [_jsx("h4", { className: "mb-2 font-medium text-red-400", children: "Failed to load metadata" }), _jsx("p", { className: "mb-3 text-red-300 text-sm", children: error.message }), _jsx("button", { onClick: retry, className: "rounded bg-red-700 px-3 py-1 text-sm text-white transition-colors hover:bg-red-600", children: "Retry" })] }));
+}
+export function MediaInfo({ src, title }) {
+    return (_jsxs("div", { className: "space-y-4", children: [title && (_jsx("h3", { className: "font-semibold text-white text-xl", children: title })), _jsx(MediaMetadataDisplay, { src: src })] }));
+}

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

@@ -0,0 +1,9 @@
+import React from "react";
+export interface MediaPlayerAudioProps extends React.AudioHTMLAttributes<HTMLAudioElement> {
+    asChild?: boolean;
+}
+export declare function MediaPlayerAudio({ asChild, className, children, ...props }: MediaPlayerAudioProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaPlayerAudio {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-audio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-audio.d.ts","sourceRoot":"","sources":["media-player-audio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACzF,OAAO,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,wBAAgB,gBAAgB,CAAC,EAChC,OAAe,EACf,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,qBAAqB,2CAsBvB;yBA3Be,gBAAgB"}

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

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { useMediaContext } from "../context/media-context";
+export function MediaPlayerAudio({ asChild = false, className, children, ...props }) {
+    const context = useMediaContext();
+    if (asChild) {
+        // When asChild is true, clone the child element and add our props
+        const child = React.Children.only(children);
+        return React.cloneElement(child, {
+            ...props,
+            ref: context.mediaRef,
+            "data-slot": "media-player-audio"
+        });
+    }
+    return (_jsx("audio", { ref: context.mediaRef, "data-slot": "media-player-audio", className: className, ...props, children: children }));
+}
+MediaPlayerAudio.displayName = "MediaPlayerAudio";

package/src/components/media-player-controls.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+export interface MediaPlayerControlsProps {
+    children: React.ReactNode;
+    className?: string;
+    asChild?: boolean;
+    variant?: 'default' | 'mobile' | 'compact';
+    adaptiveLayout?: boolean;
+}
+export declare function MediaPlayerControls({ children, className, asChild, variant, adaptiveLayout, ...props }: MediaPlayerControlsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaPlayerControls {
+    var displayName: string;
+}
+export interface MediaPlayerControlsOverlayProps {
+    className?: string;
+    asChild?: boolean;
+    children?: React.ReactNode;
+    variant?: 'default' | 'mobile' | 'compact';
+}
+export declare function MediaPlayerControlsOverlay({ className, asChild, children, variant, ...props }: MediaPlayerControlsOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaPlayerControlsOverlay {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-controls.d.ts.map

package/src/components/media-player-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-controls.d.ts","sourceRoot":"","sources":["media-player-controls.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,WAAW,wBAAwB;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;IAC1C,cAAc,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,wBAAgB,mBAAmB,CAAC,EACnC,QAAQ,EACR,SAAS,EACT,OAAe,EACf,OAAO,EACP,cAAqB,EACrB,GAAG,KAAK,EACR,EAAE,wBAAwB,2CA6G1B;yBApHe,mBAAmB;;;AAyHnC,MAAM,WAAW,+BAA+B;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;CAC1C;AAED,wBAAgB,0BAA0B,CAAC,EAC1C,SAAS,EACT,OAAe,EACf,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACR,EAAE,+BAA+B,2CA0EjC;yBAhFe,0BAA0B"}

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

@@ -0,0 +1,150 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { useMediaSelector } from "../context/media-context";
+import { useDeviceInfo, useContainerQuery } from "@rp/ui/hooks/use-mobile";
+import { cn } from "../lib/utils";
+export function MediaPlayerControls({ children, className, asChild = false, variant, adaptiveLayout = true, ...props }) {
+    const isFullscreen = useMediaSelector((state) => state.isFullscreen);
+    const disabled = useMediaSelector((state) => state.error !== null);
+    const { isMobile, isTablet, isTouchDevice, orientation } = useDeviceInfo();
+    // Container ref for responsive queries
+    const containerRef = React.useRef(null);
+    const isCompactContainer = useContainerQuery(containerRef, '(max-width: 480px)');
+    // Determine the effective variant
+    const effectiveVariant = React.useMemo(() => {
+        if (variant)
+            return variant;
+        if (!adaptiveLayout)
+            return 'default';
+        // Auto-detect based on device and container size
+        if (isMobile || isCompactContainer)
+            return 'mobile';
+        if (isTablet)
+            return 'compact';
+        return 'default';
+    }, [variant, adaptiveLayout, isMobile, isTablet, isCompactContainer]);
+    // Get mobile-optimized classes
+    const getMobileClasses = () => {
+        const baseClasses = [
+            // Base mobile-first classes
+            "pointer-events-none absolute right-0 bottom-0 left-0 z-50",
+            "opacity-0 transition-opacity duration-200",
+            "data-[visible]:pointer-events-auto data-[visible]:opacity-100"
+        ];
+        switch (effectiveVariant) {
+            case 'mobile':
+                return [
+                    ...baseClasses,
+                    // Mobile-first layout with larger touch targets
+                    "flex flex-col gap-3 px-4 py-4",
+                    // Larger padding for better thumb reach
+                    "[@container(min-width:360px)]:px-6 [@container(min-width:360px)]:py-5",
+                    // Portrait orientation adjustments
+                    orientation === 'portrait' && "pb-6",
+                    // Fullscreen mobile adjustments
+                    "[:fullscreen_&]:px-8 [:fullscreen_&]:py-6",
+                    // Ensure minimum touch target sizes (44px)
+                    "[&_button]:min-h-[44px] [&_button]:min-w-[44px]",
+                    "[&_[role=slider]]:min-h-[44px]",
+                    // Better spacing for touch
+                    "[&>*]:gap-4",
+                ];
+            case 'compact':
+                return [
+                    ...baseClasses,
+                    // Tablet-optimized compact layout
+                    "flex items-center gap-2 px-4 py-3",
+                    "[:fullscreen_&]:px-6 [:fullscreen_&]:py-4",
+                    // Medium-sized touch targets (40px)
+                    "[&_button]:min-h-[40px] [&_button]:min-w-[40px]",
+                    "[&_[role=slider]]:min-h-[40px]",
+                ];
+            default:
+                return [
+                    ...baseClasses,
+                    // Desktop default layout
+                    "flex items-center gap-2 px-4 py-3",
+                    "[:fullscreen_&]:px-6 [:fullscreen_&]:py-4",
+                    // Standard button sizes for desktop
+                    "[&_button]:min-h-[36px] [&_button]:min-w-[36px]",
+                ];
+        }
+    };
+    if (asChild) {
+        const child = React.Children.only(children);
+        return React.cloneElement(child, {
+            ...props,
+            ref: containerRef,
+            "data-slot": "media-player-controls",
+            "data-state": isFullscreen ? "fullscreen" : "inline",
+            "data-disabled": disabled ? "" : undefined,
+            "data-variant": effectiveVariant,
+            "data-touch": isTouchDevice ? "" : undefined,
+            className: cn(getMobileClasses(), 
+            // Add container query support
+            "@container", className)
+        });
+    }
+    return (_jsx("div", { ref: containerRef, "data-slot": "media-player-controls", "data-state": isFullscreen ? "fullscreen" : "inline", "data-disabled": disabled ? "" : undefined, "data-variant": effectiveVariant, "data-touch": isTouchDevice ? "" : undefined, className: cn("dark", getMobileClasses(), 
+        // Add container query support
+        "@container", className), ...props, children: children }));
+}
+MediaPlayerControls.displayName = "MediaPlayerControls";
+export function MediaPlayerControlsOverlay({ className, asChild = false, children, variant, ...props }) {
+    const isFullscreen = useMediaSelector((state) => state.isFullscreen);
+    const { isMobile, isTablet, isTouchDevice } = useDeviceInfo();
+    // Determine the effective variant
+    const effectiveVariant = React.useMemo(() => {
+        if (variant)
+            return variant;
+        if (isMobile)
+            return 'mobile';
+        if (isTablet)
+            return 'compact';
+        return 'default';
+    }, [variant, isMobile, isTablet]);
+    // Get mobile-optimized gradient classes
+    const getOverlayClasses = () => {
+        const baseClasses = [
+            "-z-10 pointer-events-none absolute inset-0",
+            "opacity-0 transition-opacity duration-200 data-[visible]:opacity-100"
+        ];
+        switch (effectiveVariant) {
+            case 'mobile':
+                return [
+                    ...baseClasses,
+                    // Enhanced gradient for better readability on mobile
+                    "bg-gradient-to-t from-black/90 via-black/60 to-transparent",
+                    // Larger gradient area for mobile controls
+                    "from-0% via-40% to-70%"
+                ];
+            case 'compact':
+                return [
+                    ...baseClasses,
+                    // Medium gradient for tablet
+                    "bg-gradient-to-t from-black/85 via-black/40 to-transparent",
+                    "from-0% via-30% to-60%"
+                ];
+            default:
+                return [
+                    ...baseClasses,
+                    // Standard desktop gradient
+                    "bg-gradient-to-t from-black/80 to-transparent"
+                ];
+        }
+    };
+    if (asChild) {
+        const child = React.Children.only(children);
+        return React.cloneElement(child, {
+            ...props,
+            "data-slot": "media-player-controls-overlay",
+            "data-state": isFullscreen ? "fullscreen" : "inline",
+            "data-variant": effectiveVariant,
+            "data-touch": isTouchDevice ? "" : undefined,
+            className: cn(getOverlayClasses(), className)
+        });
+    }
+    return (_jsx("div", { "data-slot": "media-player-controls-overlay", "data-state": isFullscreen ? "fullscreen" : "inline", "data-variant": effectiveVariant, "data-touch": isTouchDevice ? "" : undefined, className: cn(getOverlayClasses(), className), ...props }));
+}
+MediaPlayerControlsOverlay.displayName = "MediaPlayerControlsOverlay";

package/src/components/media-player-error.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface MediaPlayerErrorProps {
+    error?: Error | string | null;
+    label?: string;
+    description?: string;
+    onRetry?: () => void;
+    onReload?: () => void;
+    className?: string;
+    asChild?: boolean;
+    children?: React.ReactNode;
+}
+export declare function MediaPlayerError({ error: errorProp, label, description, onRetry: onRetryProp, onReload: onReloadProp, className, asChild, children, ...props }: MediaPlayerErrorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace MediaPlayerError {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-error.d.ts.map

package/src/components/media-player-error.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-error.d.ts","sourceRoot":"","sources":["media-player-error.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,qBAAqB;IACrC,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,gBAAgB,CAAC,EAChC,KAAK,EAAE,SAAS,EAChB,KAAK,EACL,WAAW,EACX,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,EACtB,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,qBAAqB,kDAmIvB;yBA7Ie,gBAAgB"}

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

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@rp/ui/components/button";
+import { AlertTriangleIcon, RefreshCcwIcon, RotateCcwIcon } from "lucide-react";
+import React from "react";
+import { useMediaContext, useMediaSelector } from "../context/media-context";
+import { cn } from "../lib/utils";
+export function MediaPlayerError({ error: errorProp, label, description, onRetry: onRetryProp, onReload: onReloadProp, className, asChild = false, children, ...props }) {
+    const context = useMediaContext();
+    const stateError = useMediaSelector((state) => state.error);
+    const error = errorProp || stateError;
+    const [actionState, setActionState] = React.useState({
+        retryPending: false,
+        reloadPending: false
+    });
+    const handleRetry = React.useCallback(() => {
+        setActionState((prev) => ({ ...prev, retryPending: true }));
+        requestAnimationFrame(() => {
+            const mediaElement = context.mediaRef.current;
+            if (!mediaElement) {
+                setActionState((prev) => ({ ...prev, retryPending: false }));
+                return;
+            }
+            if (onRetryProp) {
+                onRetryProp();
+            }
+            else {
+                const currentSrc = mediaElement.src;
+                if (currentSrc) {
+                    mediaElement.load();
+                }
+            }
+            setActionState((prev) => ({ ...prev, retryPending: false }));
+        });
+    }, [context.mediaRef, onRetryProp]);
+    const handleReload = React.useCallback(() => {
+        setActionState((prev) => ({ ...prev, reloadPending: true }));
+        requestAnimationFrame(() => {
+            if (onReloadProp) {
+                onReloadProp();
+            }
+            else {
+                window.location.reload();
+            }
+        });
+    }, [onReloadProp]);
+    const errorLabel = React.useMemo(() => {
+        if (label)
+            return label;
+        if (error instanceof Error) {
+            return "Media Error";
+        }
+        return "Playback Error";
+    }, [label, error]);
+    const errorDescription = React.useMemo(() => {
+        if (description)
+            return description;
+        if (error instanceof Error) {
+            return error.message;
+        }
+        if (typeof error === "string") {
+            return error;
+        }
+        return "An error occurred while loading the media";
+    }, [description, error]);
+    if (!error)
+        return null;
+    const errorProps = {
+        role: "alert",
+        "aria-describedby": `${context.mediaId}-error-description`,
+        "aria-labelledby": `${context.mediaId}-error-label`,
+        "aria-live": "assertive",
+        "data-slot": "media-player-error",
+        "data-state": "error",
+        className: cn("pointer-events-auto absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/80 text-white backdrop-blur-sm", className),
+        ...props
+    };
+    const content = (_jsxs("div", { className: "flex flex-col items-center gap-4 p-6 text-center", children: [_jsx(AlertTriangleIcon, { className: "size-12 text-red-400" }), _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { id: `${context.mediaId}-error-label`, className: "font-semibold text-lg", children: errorLabel }), _jsx("p", { id: `${context.mediaId}-error-description`, className: "text-sm text-white/80", children: errorDescription })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: handleRetry, disabled: actionState.retryPending, children: [actionState.retryPending ? (_jsx(RefreshCcwIcon, { className: "mr-2 size-4 animate-spin" })) : (_jsx(RefreshCcwIcon, { className: "mr-2 size-4" })), "Try again"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handleReload, disabled: actionState.reloadPending, children: [actionState.reloadPending ? (_jsx(RotateCcwIcon, { className: "mr-2 size-4 animate-spin" })) : (_jsx(RotateCcwIcon, { className: "mr-2 size-4" })), "Reload page"] })] })] }));
+    if (asChild) {
+        const child = React.Children.only(children);
+        return React.cloneElement(child, errorProps, content);
+    }
+    return _jsx("div", { ...errorProps, children: content });
+}
+MediaPlayerError.displayName = "MediaPlayerError";

package/src/components/media-player-fullscreen.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface MediaPlayerFullscreenProps {
+    className?: string;
+    disabled?: boolean;
+    asChild?: boolean;
+    children?: React.ReactNode;
+}
+export declare function MediaPlayerFullscreen({ className, disabled, asChild, children, ...props }: MediaPlayerFullscreenProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaPlayerFullscreen {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-fullscreen.d.ts.map

package/src/components/media-player-fullscreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-fullscreen.d.ts","sourceRoot":"","sources":["media-player-fullscreen.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,MAAM,WAAW,0BAA0B;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,qBAAqB,CAAC,EACrC,SAAS,EACT,QAAgB,EAChB,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,0BAA0B,2CAgF5B;yBAtFe,qBAAqB"}

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

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "@rp/ui/components/button";
+import { Maximize2Icon, Minimize2Icon } from "lucide-react";
+import React from "react";
+import { MediaActionTypes, useMediaContext, useMediaDispatch, useMediaSelector } from "../context/media-context";
+import { MediaPlayerTooltip } from "./media-player-tooltip";
+export function MediaPlayerFullscreen({ className, disabled = false, asChild = false, children, ...props }) {
+    const context = useMediaContext();
+    const dispatch = useMediaDispatch();
+    const isFullscreen = useMediaSelector((state) => state.isFullscreen);
+    const isDisabled = disabled || useMediaSelector((state) => state.error !== null);
+    const handleClick = React.useCallback((event) => {
+        event.preventDefault();
+        if (isDisabled)
+            return;
+        dispatch({
+            type: isFullscreen ? MediaActionTypes.EXIT_FULLSCREEN : MediaActionTypes.ENTER_FULLSCREEN
+        });
+    }, [dispatch, isFullscreen, isDisabled]);
+    // Set up fullscreen API event listeners
+    React.useEffect(() => {
+        const handleFullscreenChange = () => {
+            const isCurrentlyFullscreen = !!document.fullscreenElement;
+            dispatch({
+                type: isCurrentlyFullscreen
+                    ? MediaActionTypes.ENTER_FULLSCREEN
+                    : MediaActionTypes.EXIT_FULLSCREEN
+            });
+        };
+        document.addEventListener("fullscreenchange", handleFullscreenChange);
+        return () => {
+            document.removeEventListener("fullscreenchange", handleFullscreenChange);
+        };
+    }, [dispatch]);
+    // Handle actual fullscreen API calls
+    React.useEffect(() => {
+        const rootElement = context.rootRef.current;
+        if (!rootElement)
+            return;
+        if (isFullscreen && !document.fullscreenElement) {
+            rootElement.requestFullscreen?.().catch(console.error);
+        }
+        else if (!isFullscreen && document.fullscreenElement) {
+            document.exitFullscreen?.().catch(console.error);
+        }
+    }, [isFullscreen, context.rootRef]);
+    const buttonProps = {
+        type: "button",
+        "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+        "data-disabled": isDisabled ? "" : undefined,
+        "data-slot": "media-player-fullscreen",
+        "data-state": isFullscreen ? "fullscreen" : "inline",
+        disabled: isDisabled,
+        variant: "ghost",
+        size: "icon",
+        className: "size-8",
+        onClick: handleClick,
+        ...props
+    };
+    const content = isFullscreen ? (_jsx(Minimize2Icon, { className: "size-4" })) : (_jsx(Maximize2Icon, { className: "size-4" }));
+    if (asChild) {
+        const child = React.Children.only(children);
+        return React.cloneElement(child, buttonProps, content);
+    }
+    return (_jsx(MediaPlayerTooltip, { tooltip: isFullscreen ? "Exit fullscreen" : "Enter fullscreen", shortcut: "F", children: _jsx(Button, { ...buttonProps, children: content }) }));
+}
+MediaPlayerFullscreen.displayName = "MediaPlayerFullscreen";

package/src/components/media-player-hls.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { MediaPlayerRootProps } from "./media-player-root";
+import { VideoSource, TextTrack } from "../adapters/videojs-adapter";
+import "../styles/videojs.css";
+export interface MediaPlayerHLSProps extends Omit<MediaPlayerRootProps, "children"> {
+    sources: VideoSource[];
+    poster?: string;
+    textTracks?: TextTrack[];
+    showControls?: boolean;
+    customControls?: React.ReactNode;
+    hlsConfig?: any;
+    enableQualitySelector?: boolean;
+    enableSubtitles?: boolean;
+    containerClassName?: string;
+    videoClassName?: string;
+    onPlayerReady?: (player: any) => void;
+    onPlayerError?: (error: any) => void;
+}
+export declare function MediaPlayerHLS(props: MediaPlayerHLSProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaPlayerHLS {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-hls.d.ts.map

package/src/components/media-player-hls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-hls.d.ts","sourceRoot":"","sources":["media-player-hls.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAmB,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAC3E,OAAO,EAAkB,WAAW,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAA;AAMpF,OAAO,uBAAuB,CAAA;AAE9B,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IACjF,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,SAAS,EAAE,CAAA;IACxB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAA;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;CACrC;AAgDD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CAmCxD;yBAnCe,cAAc"}

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

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MediaPlayerRoot } from "./media-player-root";
+import { VideoJSAdapter } from "../adapters/videojs-adapter";
+import { MediaPlayerLoading } from "./media-player-loading";
+import { MediaPlayerError } from "./media-player-error";
+import { useMediaSelector } from "../context/media-context";
+import { cn } from "../lib/utils";
+import "../styles/videojs.css"; // Import Video.js styles
+function MediaPlayerHLSContent({ sources, poster, textTracks = [], showControls = true, customControls, hlsConfig, enableQualitySelector = true, enableSubtitles = true, containerClassName, videoClassName, onPlayerReady, onPlayerError }) {
+    const isLoading = useMediaSelector(state => state.isLoading);
+    const isBuffering = useMediaSelector(state => state.isBuffering);
+    const error = useMediaSelector(state => state.error);
+    return (_jsxs("div", { className: cn("relative h-full w-full", containerClassName), children: [_jsx(VideoJSAdapter, { sources: sources, poster: poster, textTracks: textTracks, controls: true, autoplay: false, muted: true, preload: "auto", className: videoClassName, hlsConfig: hlsConfig, enableQualitySelector: enableQualitySelector, enableSubtitles: enableSubtitles, onReady: onPlayerReady, onError: onPlayerError }), (isLoading || isBuffering) && _jsx(MediaPlayerLoading, {}), error && _jsx(MediaPlayerError, { children: error })] }));
+}
+export function MediaPlayerHLS(props) {
+    const { sources, poster, textTracks, showControls, customControls, hlsConfig, enableQualitySelector, enableSubtitles, containerClassName, videoClassName, onPlayerReady, onPlayerError, ...rootProps } = props;
+    return (_jsx(MediaPlayerRoot, { ...rootProps, children: _jsx(MediaPlayerHLSContent, { sources: sources, poster: poster, textTracks: textTracks, showControls: showControls, customControls: customControls, hlsConfig: hlsConfig, enableQualitySelector: enableQualitySelector, enableSubtitles: enableSubtitles, containerClassName: containerClassName, videoClassName: videoClassName, onPlayerReady: onPlayerReady, onPlayerError: onPlayerError }) }));
+}
+MediaPlayerHLS.displayName = "MediaPlayerHLS";

package/src/components/media-player-loading.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface MediaPlayerLoadingProps {
+    className?: string;
+    delayMs?: number;
+    asChild?: boolean;
+    children?: React.ReactNode;
+}
+export declare function MediaPlayerLoading({ className, delayMs, asChild, children, ...props }: MediaPlayerLoadingProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace MediaPlayerLoading {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-loading.d.ts.map

package/src/components/media-player-loading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-loading.d.ts","sourceRoot":"","sources":["media-player-loading.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,uBAAuB;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,kBAAkB,CAAC,EAClC,SAAS,EACT,OAAa,EACb,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,uBAAuB,kDAqDzB;yBA3De,kBAAkB"}