@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

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

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

@@ -1,111 +0,0 @@
-"use client"
-
-import React from "react"
-import { TextTrack, VideoJSAdapter, VideoSource } from "../adapters/videojs-adapter"
-import { useMediaSelector } from "../context/media-context"
-import { cn } from "../lib/utils"
-import { MediaPlayerControls } from "./media-player-controls"
-import { MediaPlayerError } from "./media-player-error"
-import { MediaPlayerLoading } from "./media-player-loading"
-import { MediaPlayerRoot, MediaPlayerRootProps } from "./media-player-root"
-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

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

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

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

@@ -1,338 +0,0 @@
-"use client"
-
-import { useDeviceInfo, useMobileOptimizations } from "@rp/ui/hooks/use-mobile"
-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 { 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"