@therealtinhtute/baroiplayer 1.0.0

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

@@ -0,0 +1,75 @@
+"use client"
+
+import { Button } from "@rp/ui/components/button"
+import { PauseIcon, PlayIcon } from "lucide-react"
+import React from "react"
+import {
+	MediaActionTypes,
+	useMediaContext,
+	useMediaDispatch,
+	useMediaSelector
+} from "../context/media-context"
+import { MediaPlayerTooltip } from "./media-player-tooltip"
+
+export interface MediaPlayerPlayProps {
+	className?: string
+	asChild?: boolean
+	children?: React.ReactNode
+}
+
+export function MediaPlayerPlay({
+	className,
+	asChild = false,
+	children,
+	...props
+}: MediaPlayerPlayProps) {
+	const context = useMediaContext()
+	const dispatch = useMediaDispatch()
+	const isPlaying = useMediaSelector((state) => state.isPlaying)
+	const disabled = useMediaSelector((state) => state.error !== null)
+
+	const handleClick = React.useCallback(
+		(event: React.MouseEvent) => {
+			event.preventDefault()
+
+			const mediaElement = context.mediaRef.current
+			if (!mediaElement || disabled) return
+
+			dispatch({
+				type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+			})
+		},
+		[dispatch, context.mediaRef, isPlaying, disabled]
+	)
+
+	const buttonProps = {
+		type: "button" as const,
+		"aria-controls": context.mediaId,
+		"aria-label": isPlaying ? "Pause" : "Play",
+		"aria-pressed": isPlaying,
+		"data-disabled": disabled ? "" : undefined,
+		"data-slot": "media-player-play",
+		"data-state": isPlaying ? "playing" : "paused",
+		disabled,
+		variant: "ghost" as const,
+		size: "icon" as const,
+		className: "size-8 [&_svg:not([class*='fill-'])]:fill-current",
+		onClick: handleClick,
+		...props
+	}
+
+	const content = isPlaying ? <PauseIcon className="size-4" /> : <PlayIcon 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={isPlaying ? "Pause" : "Play"} shortcut="Space">
+			<Button {...buttonProps}>{content}</Button>
+		</MediaPlayerTooltip>
+	)
+}
+
+MediaPlayerPlay.displayName = "MediaPlayerPlay"

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

@@ -0,0 +1,340 @@
+"use client"
+
+import React from "react"
+import {
+	MediaActionTypes,
+	useMediaContext,
+	useMediaDispatch,
+	useMediaSelector
+} from "../context/media-context"
+import { MediaProvider } from "../context/media-provider"
+import { useMediaGestures } from "../hooks/use-touch-gestures"
+import { useMobileOptimizations, useDeviceInfo } from "@rp/ui/hooks/use-mobile"
+import { cn } from "../lib/utils"
+
+// Utility function to compose refs
+function composeRefs<T>(...refs: Array<React.Ref<T> | undefined>) {
+	return (node: T) => {
+		refs.forEach((ref) => {
+			if (typeof ref === "function") {
+				ref(node)
+			} else if (ref && typeof ref === "object") {
+				;(ref as React.MutableRefObject<T>).current = node
+			}
+		})
+	}
+}
+
+// MediaPlayer root component props
+export interface MediaPlayerRootProps {
+	children: React.ReactNode
+	className?: string
+	dir?: "ltr" | "rtl"
+	disabled?: boolean
+	asChild?: boolean
+	autoHide?: boolean
+	tooltipDelayDuration?: number
+	tooltipSideOffset?: number
+	withoutTooltip?: boolean
+
+	// Mobile-first options
+	enableGestures?: boolean
+	enableMobileOptimizations?: boolean
+
+	// Media event handlers
+	onPlay?: () => void
+	onPause?: () => void
+	onEnded?: () => void
+	onTimeUpdate?: (currentTime: number) => void
+	onVolumeChange?: (volume: number) => void
+	onMuted?: (muted: boolean) => void
+	onMediaError?: (error: string) => void
+	onPipError?: (error: Error) => void
+	onFullscreenChange?: (isFullscreen: boolean) => void
+}
+
+// Internal MediaPlayer implementation
+function MediaPlayerImpl({
+	children,
+	className,
+	dir = "ltr",
+	disabled = false,
+	asChild = false,
+	autoHide = true,
+	enableGestures = true,
+	enableMobileOptimizations = true,
+	onPlay,
+	onPause,
+	onEnded,
+	onTimeUpdate,
+	onVolumeChange,
+	onMuted,
+	onMediaError,
+	onPipError,
+	onFullscreenChange,
+	...props
+}: MediaPlayerRootProps) {
+	const context = useMediaContext()
+	const dispatch = useMediaDispatch()
+	const { isTouchDevice } = useDeviceInfo()
+
+	// Get state values
+	const isPlaying = useMediaSelector((state) => state.isPlaying)
+	const currentTime = useMediaSelector((state) => state.currentTime)
+	const volume = useMediaSelector((state) => state.volume)
+	const isMuted = useMediaSelector((state) => state.isMuted)
+	const error = useMediaSelector((state) => state.error)
+	const isFullscreen = useMediaSelector((state) => state.isFullscreen)
+	const isPictureInPicture = useMediaSelector((state) => state.isPictureInPicture)
+
+	// Enable mobile optimizations
+	useMobileOptimizations()
+
+	// Gesture handling actions - React 19 compiler will optimize this
+	const gestureActions = {
+		onPlayPause: () => {
+			if (disabled) return
+			dispatch({
+				type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+			})
+		},
+		onSeek: (direction: 'forward' | 'backward', amount: number) => {
+			if (disabled || !context.isVideo) return
+			const mediaElement = context.mediaRef.current
+			if (!mediaElement) return
+			
+			const newTime = direction === 'forward' 
+				? Math.min(mediaElement.duration || 0, currentTime + amount)
+				: Math.max(0, currentTime - amount)
+			
+			dispatch({
+				type: MediaActionTypes.SEEK,
+				detail: newTime
+			})
+		},
+		onVolumeChange: (direction: 'up' | 'down', amount: number) => {
+			if (disabled) return
+			const newVolume = direction === 'up'
+				? Math.min(1, volume + amount)
+				: Math.max(0, volume - amount)
+			
+			dispatch({
+				type: MediaActionTypes.SET_VOLUME,
+				detail: newVolume
+			})
+		},
+		onToggleFullscreen: () => {
+			if (disabled || !context.isVideo) return
+			dispatch({
+				type: isFullscreen ? MediaActionTypes.EXIT_FULLSCREEN : MediaActionTypes.ENTER_FULLSCREEN
+			})
+		},
+		onZoom: (scale: number) => {
+			// Handle video zoom - this could be implemented with CSS transforms
+			// For now, we'll just log it as a placeholder
+			console.log('Zoom gesture detected:', scale)
+		}
+	}
+
+		// Set up touch gestures for mobile devices
+		const { isGestureEnabled } = useMediaGestures(
+			context.rootRef as React.RefObject<HTMLElement>,
+			enableGestures ? gestureActions : {}
+		)
+
+	// Keyboard event handler - React 19 compiler will optimize this
+	const handleKeyDown = (event: React.KeyboardEvent) => {
+		if (disabled) return
+
+		const target = event.target as HTMLElement
+		const isInputElement =
+			target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable
+
+		if (isInputElement) return
+
+		const mediaElement = context.mediaRef.current
+		if (!mediaElement) return
+
+		switch (event.code) {
+			case "Space":
+			case "KeyK":
+				event.preventDefault()
+				dispatch({
+					type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+				})
+				break
+
+			case "KeyF":
+				event.preventDefault()
+				dispatch({
+					type: isFullscreen
+						? MediaActionTypes.EXIT_FULLSCREEN
+						: MediaActionTypes.ENTER_FULLSCREEN
+				})
+				break
+
+			case "KeyM":
+				event.preventDefault()
+				dispatch({
+					type: MediaActionTypes.TOGGLE_MUTE
+				})
+				break
+
+			case "ArrowLeft":
+				event.preventDefault()
+				if (context.isVideo && mediaElement instanceof HTMLVideoElement) {
+					dispatch({
+						type: MediaActionTypes.SEEK,
+						detail: Math.max(0, currentTime - 10)
+					})
+				}
+				break
+
+			case "ArrowRight":
+				event.preventDefault()
+				if (context.isVideo && mediaElement instanceof HTMLVideoElement) {
+					dispatch({
+						type: MediaActionTypes.SEEK,
+						detail: Math.min(mediaElement.duration || 0, currentTime + 10)
+					})
+				}
+				break
+
+			case "ArrowUp":
+				event.preventDefault()
+				dispatch({
+					type: MediaActionTypes.SET_VOLUME,
+					detail: Math.min(1, volume + 0.1)
+				})
+				break
+
+			case "ArrowDown":
+				event.preventDefault()
+				dispatch({
+					type: MediaActionTypes.SET_VOLUME,
+					detail: Math.max(0, volume - 0.1)
+				})
+				break
+		}
+	}
+
+	// Set up media element event listeners
+	React.useEffect(() => {
+		const mediaElement = context.mediaRef.current
+		if (!mediaElement) return
+
+		const handlePlay = () => {
+			dispatch({ type: MediaActionTypes.PLAY })
+			onPlay?.()
+		}
+
+		const handlePause = () => {
+			dispatch({ type: MediaActionTypes.PAUSE })
+			onPause?.()
+		}
+
+		const handleEnded = () => {
+			dispatch({ type: MediaActionTypes.PAUSE })
+			onEnded?.()
+		}
+
+		const handleTimeUpdate = () => {
+			const time = mediaElement.currentTime
+			dispatch({ type: MediaActionTypes.SET_CURRENT_TIME, detail: time })
+			onTimeUpdate?.(time)
+		}
+
+		const handleVolumeChange = () => {
+			const vol = mediaElement.volume
+			const muted = mediaElement.muted
+			dispatch({ type: MediaActionTypes.SET_VOLUME, detail: vol })
+			dispatch({ type: muted ? MediaActionTypes.MUTE : MediaActionTypes.UNMUTE })
+			onVolumeChange?.(vol)
+			onMuted?.(muted)
+		}
+
+		const handleLoadedMetadata = () => {
+			dispatch({ type: MediaActionTypes.SET_DURATION, detail: mediaElement.duration })
+			dispatch({ type: MediaActionTypes.SET_LOADING, detail: false })
+		}
+
+		const handleError = () => {
+			const errorMessage = "An error occurred while loading the media"
+			dispatch({ type: MediaActionTypes.SET_ERROR, detail: errorMessage })
+			onMediaError?.(errorMessage)
+		}
+
+		const handleLoadStart = () => {
+			dispatch({ type: MediaActionTypes.SET_LOADING, detail: true })
+		}
+
+		// Add event listeners
+		mediaElement.addEventListener("play", handlePlay)
+		mediaElement.addEventListener("pause", handlePause)
+		mediaElement.addEventListener("ended", handleEnded)
+		mediaElement.addEventListener("timeupdate", handleTimeUpdate)
+		mediaElement.addEventListener("volumechange", handleVolumeChange)
+		mediaElement.addEventListener("loadedmetadata", handleLoadedMetadata)
+		mediaElement.addEventListener("error", handleError)
+		mediaElement.addEventListener("loadstart", handleLoadStart)
+
+		return () => {
+			mediaElement.removeEventListener("play", handlePlay)
+			mediaElement.removeEventListener("pause", handlePause)
+			mediaElement.removeEventListener("ended", handleEnded)
+			mediaElement.removeEventListener("timeupdate", handleTimeUpdate)
+			mediaElement.removeEventListener("volumechange", handleVolumeChange)
+			mediaElement.removeEventListener("loadedmetadata", handleLoadedMetadata)
+			mediaElement.removeEventListener("error", handleError)
+			mediaElement.removeEventListener("loadstart", handleLoadStart)
+		}
+	}, [dispatch, onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onMuted, onMediaError])
+
+	const rootProps = {
+		"aria-labelledby": context.labelId,
+		"aria-describedby": context.descriptionId,
+		"aria-disabled": disabled,
+		"data-disabled": disabled ? "" : undefined,
+		"data-slot": "media-player",
+		"data-state": isFullscreen ? "fullscreen" : "inline",
+		dir,
+		tabIndex: disabled ? -1 : 0,
+		className: cn(
+			"dark relative isolate flex flex-col overflow-hidden rounded-lg bg-background outline-none",
+			"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+			"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"[&_video]:relative [&_video]:object-contain",
+			"data-[state=fullscreen]:[&_video]:size-full",
+			"[:fullscreen_&]:flex [:fullscreen_&]:h-full [:fullscreen_&]:max-h-screen [:fullscreen_&]:flex-col [:fullscreen_&]:justify-between",
+			// Mobile-first optimizations
+			isTouchDevice && [
+				"touch-manipulation", // Improves touch responsiveness
+				"select-none", // Prevents text selection during gestures
+				"overscroll-contain", // Prevents scroll chaining
+			],
+			// Enable hardware acceleration for smooth animations
+			"will-change-transform",
+			"transform-gpu",
+			className
+		),
+		onKeyDown: handleKeyDown,
+		...props
+	}
+
+	return (
+		<div ref={composeRefs(context.rootRef)} {...rootProps}>
+			{children}
+		</div>
+	)
+}
+
+// Main MediaPlayer component with provider
+export function MediaPlayerRoot(props: MediaPlayerRootProps) {
+	return (
+		<MediaProvider>
+			<MediaPlayerImpl {...props} />
+		</MediaProvider>
+	)
+}
+
+MediaPlayerRoot.displayName = "MediaPlayerRoot"

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

@@ -0,0 +1,168 @@
+"use client"
+
+import { Slider } from "@rp/ui/components/slider"
+import React from "react"
+import {
+	MediaActionTypes,
+	useMediaContext,
+	useMediaDispatch,
+	useMediaSelector
+} from "../context/media-context"
+import { formatTime } from "../lib/format-time"
+import { cn } from "../lib/utils"
+
+export interface MediaPlayerSeekProps {
+	className?: string
+	disabled?: boolean
+	withTime?: boolean
+	withoutTooltip?: boolean
+	tooltipTimeVariant?: "current" | "remaining" | "duration"
+	asChild?: boolean
+	children?: React.ReactNode
+}
+
+export function MediaPlayerSeek({
+	className,
+	disabled = false,
+	withTime = true,
+	withoutTooltip = false,
+	tooltipTimeVariant = "current",
+	asChild = false,
+	children,
+	...props
+}: MediaPlayerSeekProps) {
+	const context = useMediaContext()
+	const dispatch = useMediaDispatch()
+
+	const currentTime = useMediaSelector((state) => state.currentTime)
+	const duration = useMediaSelector((state) => state.duration)
+	const buffered = useMediaSelector((state) => state.buffered)
+	const isDisabled = disabled || useMediaSelector((state) => state.error !== null)
+
+	const [isDragging, setIsDragging] = React.useState(false)
+	const [previewTime, setPreviewTime] = React.useState<number | null>(null)
+
+	const seekableStart = 0
+	const seekableEnd = duration || 0
+	const progress = seekableEnd > 0 ? (currentTime / seekableEnd) * 100 : 0
+
+	// Calculate buffered ranges
+	const bufferedRanges = React.useMemo(() => {
+		if (!buffered || !seekableEnd) return []
+
+		const ranges: Array<{ start: number; end: number }> = []
+		for (let i = 0; i < buffered.length; i++) {
+			const start = (buffered.start(i) / seekableEnd) * 100
+			const end = (buffered.end(i) / seekableEnd) * 100
+			ranges.push({ start, end })
+		}
+		return ranges
+	}, [buffered, seekableEnd])
+
+	const handleValueChange = React.useCallback(
+		(values: number[]) => {
+			const time = values[0] || 0
+			setPreviewTime(time)
+
+			if (isDragging) {
+				dispatch({
+					type: MediaActionTypes.SEEK,
+					detail: time
+				})
+			}
+		},
+		[dispatch, isDragging]
+	)
+
+	const handleValueCommit = React.useCallback(
+		(values: number[]) => {
+			const time = values[0]
+			setIsDragging(false)
+			setPreviewTime(null)
+
+			dispatch({
+				type: MediaActionTypes.SEEK,
+				detail: time
+			})
+		},
+		[dispatch]
+	)
+
+	const handlePointerDown = React.useCallback(() => {
+		setIsDragging(true)
+	}, [])
+
+	const getTooltipTime = React.useCallback(
+		(time: number) => {
+			switch (tooltipTimeVariant) {
+				case "remaining":
+					return formatTime(Math.max(0, seekableEnd - time))
+				case "duration":
+					return formatTime(seekableEnd)
+				default:
+					return formatTime(time)
+			}
+		},
+		[tooltipTimeVariant, seekableEnd]
+	)
+
+	const sliderProps = {
+		"aria-controls": context.mediaId,
+		"aria-valuetext": `${formatTime(currentTime)} of ${formatTime(duration)}`,
+		"data-slot": "media-player-seek",
+		disabled: isDisabled,
+		min: seekableStart,
+		max: seekableEnd,
+		step: 0.1,
+		value: [previewTime ?? currentTime],
+		onValueChange: handleValueChange,
+		onValueCommit: handleValueCommit,
+		onPointerDown: handlePointerDown,
+		className: cn(
+			"relative flex w-full touch-none select-none items-center",
+			"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className
+		),
+		...props
+	}
+
+	const sliderContent = (
+		<>
+			{/* Track */}
+			<div className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+				{/* Buffered ranges */}
+				{bufferedRanges.map((range, index) => (
+					<div
+						key={index}
+						className="absolute h-full bg-secondary/60"
+						style={{
+							left: `${range.start}%`,
+							width: `${range.end - range.start}%`
+						}}
+					/>
+				))}
+
+				{/* Progress */}
+				<div className="h-full bg-primary transition-all" style={{ width: `${progress}%` }} />
+			</div>
+
+			{/* Thumb */}
+			<div
+				className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+				style={{
+					transform: `translateX(-50%)`,
+					left: `${progress}%`
+				}}
+			/>
+		</>
+	)
+
+	if (asChild) {
+		const child = React.Children.only(children) as React.ReactElement
+		return React.cloneElement(child, sliderProps as any, sliderContent)
+	}
+
+	return <Slider {...sliderProps}>{sliderContent}</Slider>
+}
+
+MediaPlayerSeek.displayName = "MediaPlayerSeek"

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

@@ -0,0 +1,99 @@
+"use client"
+
+import React from "react"
+import { useMediaContext, useMediaSelector } from "../context/media-context"
+import { formatTime } from "../lib/format-time"
+import { cn } from "../lib/utils"
+
+export interface MediaPlayerTimeProps {
+	variant?: "current" | "duration" | "remaining" | "current-duration"
+	className?: string
+	asChild?: boolean
+	children?: React.ReactNode
+}
+
+export function MediaPlayerTime({
+	variant = "current-duration",
+	className,
+	asChild = false,
+	children,
+	...props
+}: MediaPlayerTimeProps) {
+	const context = useMediaContext()
+	const currentTime = useMediaSelector((state) => state.currentTime)
+	const duration = useMediaSelector((state) => state.duration)
+
+	const times = React.useMemo(() => {
+		if (variant === "remaining") {
+			return {
+				remaining: formatTime(Math.max(0, duration - currentTime))
+			}
+		}
+
+		if (variant === "duration") {
+			return {
+				duration: formatTime(duration)
+			}
+		}
+
+		if (variant === "current") {
+			return {
+				current: formatTime(currentTime)
+			}
+		}
+
+		return {
+			current: formatTime(currentTime),
+			duration: formatTime(duration)
+		}
+	}, [variant, currentTime, duration])
+
+	const timeProps = {
+		"data-slot": "media-player-time",
+		"data-variant": variant,
+		dir: context.dir,
+		className: cn("text-sm text-foreground/80 tabular-nums", className),
+		...props
+	}
+
+	if (variant !== "current-duration") {
+		const content = times[variant as keyof typeof times]
+
+		if (asChild) {
+			const child = React.Children.only(children) as React.ReactElement
+			return React.cloneElement(child, timeProps as any, content)
+		}
+
+		return <time {...timeProps}>{content}</time>
+	}
+
+	const content = (
+		<>
+			<time>{times.current}</time>
+			<span className="text-foreground/60">/</span>
+			<time>{times.duration}</time>
+		</>
+	)
+
+	if (asChild) {
+		const child = React.Children.only(children) as React.ReactElement
+		return React.cloneElement(
+			child,
+			{
+				...timeProps,
+				className: cn("flex items-center gap-1 text-foreground/80 text-sm", className)
+			} as any,
+			content
+		)
+	}
+
+	return (
+		<div
+			{...timeProps}
+			className={cn("flex items-center gap-1 text-foreground/80 text-sm", className)}>
+			{content}
+		</div>
+	)
+}
+
+MediaPlayerTime.displayName = "MediaPlayerTime"