@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

package/dist/src/components/legacy.tsx

@@ -0,0 +1,93 @@
+/**
+ * Legacy Components (Deprecated)
+ * These components are wrapped with deprecation warnings
+ */
+
+"use client"
+
+import React from "react"
+import { showDeprecationWarning } from "../lib/deprecation"
+
+// Import current components
+import { MediaPlayer } from "./media-player"
+import { VideoPlayer } from "./video-player"
+import { AudioPlayer } from "./audio-player"
+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<any, any>((props, ref) => {
+	showDeprecationWarning(
+		"ModernMediaPlayer",
+		"MediaPlayer (the primary media player component)"
+	)
+	return <ReactPlayerWrapper {...props} ref={ref} />
+})
+
+ModernMediaPlayer.displayName = "DeprecatedModernMediaPlayer"
+
+export const SimpleVideoPlayer = React.forwardRef<any, any>((props, ref) => {
+	showDeprecationWarning(
+		"SimpleVideoPlayer",
+		"VideoPlayer (the primary video player component)"
+	)
+	return <SimpleVideoPlayerBase {...props} ref={ref} />
+})
+
+SimpleVideoPlayer.displayName = "DeprecatedSimpleVideoPlayer"
+
+// Legacy UI components with deprecation warnings
+export const LegacyPlayButton = React.forwardRef<any, any>((props, ref) => {
+	showDeprecationWarning(
+		"PlayButton",
+		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
+	)
+	return <PlayButton {...props} ref={ref} />
+})
+
+LegacyPlayButton.displayName = "DeprecatedPlayButton"
+
+export const LegacySeekBar = React.forwardRef<any, any>((props, ref) => {
+	showDeprecationWarning(
+		"SeekBar",
+		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
+	)
+	return <SeekBar {...props} ref={ref} />
+})
+
+LegacySeekBar.displayName = "DeprecatedSeekBar"
+
+export const LegacyTimeDisplay = React.forwardRef<any, any>((props, ref) => {
+	showDeprecationWarning(
+		"TimeDisplay",
+		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
+	)
+	return <TimeDisplay {...props} ref={ref} />
+})
+
+LegacyTimeDisplay.displayName = "DeprecatedTimeDisplay"
+
+export const LegacyVolumeControl = React.forwardRef<any, any>((props, ref) => {
+	showDeprecationWarning(
+		"VolumeControl",
+		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
+	)
+	return <VolumeControl {...props} ref={ref} />
+})
+
+LegacyVolumeControl.displayName = "DeprecatedVolumeControl"
+
+export const LegacyFullscreenButton = React.forwardRef<any, any>((props, ref) => {
+	showDeprecationWarning(
+		"FullscreenButton",
+		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
+	)
+	return <FullscreenButton {...props} ref={ref} />
+})
+
+LegacyFullscreenButton.displayName = "DeprecatedFullscreenButton"

package/dist/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/dist/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/dist/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/dist/src/components/media-metadata-display.tsx

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

package/dist/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/dist/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/dist/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/dist/src/components/media-player-audio.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import React from "react"
+import { useMediaContext } from "../context/media-context"
+
+export interface MediaPlayerAudioProps extends React.AudioHTMLAttributes<HTMLAudioElement> {
+	asChild?: boolean
+}
+
+export function MediaPlayerAudio({
+	asChild = false,
+	className,
+	children,
+	...props
+}: MediaPlayerAudioProps) {
+	const context = useMediaContext()
+
+	if (asChild) {
+		// When asChild is true, clone the child element and add our props
+		const child = React.Children.only(children) as React.ReactElement
+		return React.cloneElement(child, {
+			...props,
+			ref: context.mediaRef,
+			"data-slot": "media-player-audio"
+		} as any)
+	}
+
+	return (
+		<audio
+			ref={context.mediaRef as React.RefObject<HTMLAudioElement>}
+			data-slot="media-player-audio"
+			className={className}
+			{...props}>
+			{children}
+		</audio>
+	)
+}
+
+MediaPlayerAudio.displayName = "MediaPlayerAudio"

package/dist/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/dist/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/dist/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";