@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/components/legacy.tsx

@@ -1,87 +0,0 @@
-/**
- * Legacy Components (Deprecated)
- * These components are wrapped with deprecation warnings
- */
-
-"use client"
-
-import React from "react"
-import { showDeprecationWarning } from "../lib/deprecation"
-
-import { AudioPlayer } from "./audio-player"
-// Import current components
-import { MediaPlayer } from "./media-player"
-import { ModernMediaPlayer as ReactPlayerWrapper } from "./react-player-wrapper"
-import { SimpleVideoPlayer as SimpleVideoPlayerBase } from "./simple-video-player"
-import { FullscreenButton } from "./ui/fullscreen-button"
-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 { VideoPlayer } from "./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 as any)} />
-})
-
-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 as any)} />
-})
-
-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 as any)} />
-})
-
-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 as any)} />
-})
-
-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 as any)} />
-})
-
-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 as any)} />
-})
-
-LegacyFullscreenButton.displayName = "DeprecatedFullscreenButton"

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

@@ -1,99 +0,0 @@
-import { Suspense } from "react"
-import { type MediaMetadata, formatTime, useMediaMetadata } 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/src/components/media-player-audio.tsx

@@ -1,39 +0,0 @@
-"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/src/components/media-player-controls.tsx

@@ -1,223 +0,0 @@
-"use client"
-
-import { useContainerQuery, useDeviceInfo } from "@rp/ui/hooks/use-mobile"
-import React from "react"
-import { useMediaSelector } from "../context/media-context"
-import { cn } from "../lib/utils"
-
-export interface MediaPlayerControlsProps {
-	children: React.ReactNode
-	className?: string
-	asChild?: boolean
-	variant?: "default" | "mobile" | "compact"
-	adaptiveLayout?: boolean
-}
-
-export function MediaPlayerControls({
-	children,
-	className,
-	asChild = false,
-	variant,
-	adaptiveLayout = true,
-	...props
-}: MediaPlayerControlsProps) {
-	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<HTMLDivElement>(null)
-	const isCompactContainer = useContainerQuery(
-		containerRef as React.RefObject<HTMLElement>,
-		"(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) as React.ReactElement
-		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
-			)
-		} as any)
-	}
-
-	return (
-		<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}
-		</div>
-	)
-}
-
-MediaPlayerControls.displayName = "MediaPlayerControls"
-
-// Controls overlay for background gradient
-export interface MediaPlayerControlsOverlayProps {
-	className?: string
-	asChild?: boolean
-	children?: React.ReactNode
-	variant?: "default" | "mobile" | "compact"
-}
-
-export function MediaPlayerControlsOverlay({
-	className,
-	asChild = false,
-	children,
-	variant,
-	...props
-}: MediaPlayerControlsOverlayProps) {
-	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) as React.ReactElement
-		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)
-		} as any)
-	}
-
-	return (
-		<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.tsx

@@ -1,163 +0,0 @@
-"use client"
-
-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 interface MediaPlayerErrorProps {
-	error?: Error | string | null
-	label?: string
-	description?: string
-	onRetry?: () => void
-	onReload?: () => void
-	className?: string
-	asChild?: boolean
-	children?: React.ReactNode
-}
-
-export function MediaPlayerError({
-	error: errorProp,
-	label,
-	description,
-	onRetry: onRetryProp,
-	onReload: onReloadProp,
-	className,
-	asChild = false,
-	children,
-	...props
-}: MediaPlayerErrorProps) {
-	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" as const,
-		"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 = (
-		<div className="flex flex-col items-center gap-4 p-6 text-center">
-			<AlertTriangleIcon className="size-12 text-red-400" />
-			<div className="space-y-2">
-				<h3 id={`${context.mediaId}-error-label`} className="font-semibold text-lg">
-					{errorLabel}
-				</h3>
-				<p id={`${context.mediaId}-error-description`} className="text-sm text-white/80">
-					{errorDescription}
-				</p>
-			</div>
-			<div className="flex items-center gap-2">
-				<Button
-					variant="outline"
-					size="sm"
-					onClick={handleRetry}
-					disabled={actionState.retryPending}>
-					{actionState.retryPending ? (
-						<RefreshCcwIcon className="mr-2 size-4 animate-spin" />
-					) : (
-						<RefreshCcwIcon className="mr-2 size-4" />
-					)}
-					Try again
-				</Button>
-				<Button
-					variant="outline"
-					size="sm"
-					onClick={handleReload}
-					disabled={actionState.reloadPending}>
-					{actionState.reloadPending ? (
-						<RotateCcwIcon className="mr-2 size-4 animate-spin" />
-					) : (
-						<RotateCcwIcon className="mr-2 size-4" />
-					)}
-					Reload page
-				</Button>
-			</div>
-		</div>
-	)
-
-	if (asChild) {
-		const child = React.Children.only(children) as React.ReactElement
-		return React.cloneElement(child, errorProps as any, content)
-	}
-
-	return <div {...errorProps}>{content}</div>
-}
-
-MediaPlayerError.displayName = "MediaPlayerError"