@therealtinhtute/baroiplayer 1.0.0

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

@@ -0,0 +1,226 @@
+"use client"
+
+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 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

@@ -0,0 +1,163 @@
+"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"

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

@@ -0,0 +1,109 @@
+"use client"
+
+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 interface MediaPlayerFullscreenProps {
+	className?: string
+	disabled?: boolean
+	asChild?: boolean
+	children?: React.ReactNode
+}
+
+export function MediaPlayerFullscreen({
+	className,
+	disabled = false,
+	asChild = false,
+	children,
+	...props
+}: MediaPlayerFullscreenProps) {
+	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: React.MouseEvent) => {
+			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" as const,
+		"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" as const,
+		size: "icon" as const,
+		className: "size-8",
+		onClick: handleClick,
+		...props
+	}
+
+	const content = isFullscreen ? (
+		<Minimize2Icon className="size-4" />
+	) : (
+		<Maximize2Icon className="size-4" />
+	)
+
+	if (asChild) {
+		const child = React.Children.only(children) as React.ReactElement
+		return React.cloneElement(child, buttonProps as any, content)
+	}
+
+	return (
+		<MediaPlayerTooltip
+			tooltip={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
+			shortcut="F">
+			<Button {...buttonProps}>{content}</Button>
+		</MediaPlayerTooltip>
+	)
+}
+
+MediaPlayerFullscreen.displayName = "MediaPlayerFullscreen"

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

@@ -0,0 +1,111 @@
+"use client"
+
+import React from "react"
+import { MediaPlayerRoot, MediaPlayerRootProps } from "./media-player-root"
+import { VideoJSAdapter, VideoSource, TextTrack } from "../adapters/videojs-adapter"
+import { MediaPlayerControls } from "./media-player-controls"
+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
+
+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
+}
+
+function MediaPlayerHLSContent({
+  sources,
+  poster,
+  textTracks = [],
+  showControls = true,
+  customControls,
+  hlsConfig,
+  enableQualitySelector = true,
+  enableSubtitles = true,
+  containerClassName,
+  videoClassName,
+  onPlayerReady,
+  onPlayerError
+}: MediaPlayerHLSProps) {
+  const isLoading = useMediaSelector(state => state.isLoading)
+  const isBuffering = useMediaSelector(state => state.isBuffering)
+  const error = useMediaSelector(state => state.error)
+
+  return (
+    <div className={cn("relative h-full w-full", containerClassName)}>
+      {/* Video.js Adapter */}
+      <VideoJSAdapter
+        sources={sources}
+        poster={poster}
+        textTracks={textTracks}
+        controls={true} // Enable Video.js controls
+        autoplay={false}
+        muted={true} // Muted for autoplay policy
+        preload="auto"
+        className={videoClassName}
+        hlsConfig={hlsConfig}
+        enableQualitySelector={enableQualitySelector}
+        enableSubtitles={enableSubtitles}
+        onReady={onPlayerReady}
+        onError={onPlayerError}
+      />
+
+      {/* Loading state */}
+      {(isLoading || isBuffering) && <MediaPlayerLoading />}
+
+      {/* Error state */}
+      {error && <MediaPlayerError>{error}</MediaPlayerError>}
+    </div>
+  )
+}
+
+export function MediaPlayerHLS(props: MediaPlayerHLSProps) {
+  const {
+    sources,
+    poster,
+    textTracks,
+    showControls,
+    customControls,
+    hlsConfig,
+    enableQualitySelector,
+    enableSubtitles,
+    containerClassName,
+    videoClassName,
+    onPlayerReady,
+    onPlayerError,
+    ...rootProps
+  } = props
+
+  return (
+    <MediaPlayerRoot {...rootProps}>
+      <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}
+      />
+    </MediaPlayerRoot>
+  )
+}
+
+MediaPlayerHLS.displayName = "MediaPlayerHLS"

package/src/components/media-player-loading.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import { Loader2Icon } from "lucide-react"
+import React from "react"
+import { useMediaSelector } from "../context/media-context"
+import { cn } from "../lib/utils"
+
+export interface MediaPlayerLoadingProps {
+	className?: string
+	delayMs?: number
+	asChild?: boolean
+	children?: React.ReactNode
+}
+
+export function MediaPlayerLoading({
+	className,
+	delayMs = 300,
+	asChild = false,
+	children,
+	...props
+}: MediaPlayerLoadingProps) {
+	const isLoading = useMediaSelector((state) => state.isLoading)
+	const [shouldRender, setShouldRender] = React.useState(false)
+	const timeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined)
+
+	React.useEffect(() => {
+		if (timeoutRef.current) {
+			clearTimeout(timeoutRef.current)
+			timeoutRef.current = undefined
+		}
+
+		if (isLoading) {
+			if (delayMs > 0) {
+				timeoutRef.current = setTimeout(() => {
+					setShouldRender(true)
+					timeoutRef.current = undefined
+				}, delayMs)
+			} else {
+				setShouldRender(true)
+			}
+		} else {
+			setShouldRender(false)
+		}
+
+		return () => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current)
+				timeoutRef.current = undefined
+			}
+		}
+	}, [isLoading, delayMs])
+
+	if (!shouldRender) return null
+
+	const loadingProps = {
+		role: "status",
+		"aria-live": "polite" as const,
+		"data-slot": "media-player-loading",
+		className: cn(
+			"fade-in-0 zoom-in-95 pointer-events-none absolute inset-0 z-50 flex animate-in items-center justify-center duration-200",
+			className
+		),
+		...props
+	}
+
+	const content = <Loader2Icon className="size-8 animate-spin text-white" />
+
+	if (asChild) {
+		const child = React.Children.only(children) as React.ReactElement
+		return React.cloneElement(child, loadingProps as any, content)
+	}
+
+	return <div {...loadingProps}>{content}</div>
+}
+
+MediaPlayerLoading.displayName = "MediaPlayerLoading"