@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

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

@@ -1,15 +1,15 @@
 "use client"
 
+import { useContainerQuery, useDeviceInfo } from "@rp/ui/hooks/use-mobile"
 import React from "react"
 import { useMediaSelector } from "../context/media-context"
-import { useDeviceInfo, useContainerQuery } from "../hooks/use-mobile"
 import { cn } from "../lib/utils"
 
 export interface MediaPlayerControlsProps {
 	children: React.ReactNode
 	className?: string
 	asChild?: boolean
-	variant?: 'default' | 'mobile' | 'compact'
+	variant?: "default" | "mobile" | "compact"
 	adaptiveLayout?: boolean
 }
 
@@ -24,22 +24,25 @@ export function MediaPlayerControls({
 	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)')
-	
+	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'
-		
+		if (!adaptiveLayout) return "default"
+
 		// Auto-detect based on device and container size
-		if (isMobile || isCompactContainer) return 'mobile'
-		if (isTablet) return 'compact'
-		return 'default'
+		if (isMobile || isCompactContainer) return "mobile"
+		if (isTablet) return "compact"
+		return "default"
 	}, [variant, adaptiveLayout, isMobile, isTablet, isCompactContainer])
-	
+
 	// Get mobile-optimized classes
 	const getMobileClasses = () => {
 		const baseClasses = [
@@ -48,9 +51,9 @@ export function MediaPlayerControls({
 			"opacity-0 transition-opacity duration-200",
 			"data-[visible]:pointer-events-auto data-[visible]:opacity-100"
 		]
-		
+
 		switch (effectiveVariant) {
-			case 'mobile':
+			case "mobile":
 				return [
 					...baseClasses,
 					// Mobile-first layout with larger touch targets
@@ -58,17 +61,17 @@ export function MediaPlayerControls({
 					// 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",
+					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",
+					"[&>*]:gap-4"
 				]
-			
-			case 'compact':
+
+			case "compact":
 				return [
 					...baseClasses,
 					// Tablet-optimized compact layout
@@ -76,9 +79,9 @@ export function MediaPlayerControls({
 					"[:fullscreen_&]:px-6 [:fullscreen_&]:py-4",
 					// Medium-sized touch targets (40px)
 					"[&_button]:min-h-[40px] [&_button]:min-w-[40px]",
-					"[&_[role=slider]]:min-h-[40px]",
+					"[&_[role=slider]]:min-h-[40px]"
 				]
-			
+
 			default:
 				return [
 					...baseClasses,
@@ -86,7 +89,7 @@ export function MediaPlayerControls({
 					"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]",
+					"[&_button]:min-h-[36px] [&_button]:min-w-[36px]"
 				]
 		}
 	}
@@ -138,7 +141,7 @@ export interface MediaPlayerControlsOverlayProps {
 	className?: string
 	asChild?: boolean
 	children?: React.ReactNode
-	variant?: 'default' | 'mobile' | 'compact'
+	variant?: "default" | "mobile" | "compact"
 }
 
 export function MediaPlayerControlsOverlay({
@@ -150,24 +153,24 @@ export function MediaPlayerControlsOverlay({
 }: 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'
+		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':
+			case "mobile":
 				return [
 					...baseClasses,
 					// Enhanced gradient for better readability on mobile
@@ -175,15 +178,15 @@ export function MediaPlayerControlsOverlay({
 					// Larger gradient area for mobile controls
 					"from-0% via-40% to-70%"
 				]
-			
-			case 'compact':
+
+			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,
@@ -201,10 +204,7 @@ export function MediaPlayerControlsOverlay({
 			"data-state": isFullscreen ? "fullscreen" : "inline",
 			"data-variant": effectiveVariant,
 			"data-touch": isTouchDevice ? "" : undefined,
-			className: cn(
-				getOverlayClasses(),
-				className
-			)
+			className: cn(getOverlayClasses(), className)
 		} as any)
 	}
 
@@ -214,10 +214,7 @@ export function MediaPlayerControlsOverlay({
 			data-state={isFullscreen ? "fullscreen" : "inline"}
 			data-variant={effectiveVariant}
 			data-touch={isTouchDevice ? "" : undefined}
-			className={cn(
-				getOverlayClasses(),
-				className
-			)}
+			className={cn(getOverlayClasses(), className)}
 			{...props}
 		/>
 	)

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

@@ -1,7 +1,7 @@
 "use client"
 
-import { Button } from "../components/ui/button"
-import { AlertTriangleIcon, RefreshCcwIcon, RotateCcwIcon } from "../components/ui/icons"
+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"

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

@@ -1,7 +1,7 @@
 "use client"
 
-import { Button } from "../components/ui/button"
-import { Maximize2Icon, Minimize2Icon } from "../components/ui/icons"
+import { Button } from "@rp/ui/components/button"
+import { Maximize2Icon, Minimize2Icon } from "lucide-react"
 import React from "react"
 import {
 	MediaActionTypes,

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

@@ -1,111 +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 { 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
+	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
+	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)
+	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}
-      />
+	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 />}
+			{/* Loading state */}
+			{(isLoading || isBuffering) && <MediaPlayerLoading />}
 
-      {/* Error state */}
-      {error && <MediaPlayerError>{error}</MediaPlayerError>}
-    </div>
-  )
+			{/* 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
+	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>
-  )
+	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-play.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { Button } from "../components/ui/button"
-import { PauseIcon, PlayIcon } from "../components/ui/icons"
+import { Button } from "@rp/ui/components/button"
+import { PauseIcon, PlayIcon } from "lucide-react"
 import React from "react"
 import {
 	MediaActionTypes,

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

@@ -1,5 +1,6 @@
 "use client"
 
+import { useDeviceInfo, useMobileOptimizations } from "@rp/ui/hooks/use-mobile"
 import React from "react"
 import {
 	MediaActionTypes,
@@ -9,7 +10,6 @@ import {
 } from "../context/media-context"
 import { MediaProvider } from "../context/media-provider"
 import { useMediaGestures } from "../hooks/use-touch-gestures"
-import { useMobileOptimizations, useDeviceInfo } from "../hooks/use-mobile"
 import { cn } from "../lib/utils"
 
 // Utility function to compose refs
@@ -98,26 +98,26 @@ function MediaPlayerImpl({
 				type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
 			})
 		},
-		onSeek: (direction: 'forward' | 'backward', amount: number) => {
+		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)
-			
+
+			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) => {
+		onVolumeChange: (direction: "up" | "down", amount: number) => {
 			if (disabled) return
-			const newVolume = direction === 'up'
-				? Math.min(1, volume + amount)
-				: Math.max(0, volume - amount)
-			
+			const newVolume =
+				direction === "up" ? Math.min(1, volume + amount) : Math.max(0, volume - amount)
+
 			dispatch({
 				type: MediaActionTypes.SET_VOLUME,
 				detail: newVolume
@@ -132,15 +132,15 @@ function MediaPlayerImpl({
 		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)
+			console.log("Zoom gesture detected:", scale)
 		}
 	}
 
-		// Set up touch gestures for mobile devices
-		const { isGestureEnabled } = useMediaGestures(
-			context.rootRef as React.RefObject<HTMLElement>,
-			enableGestures ? gestureActions : {}
-		)
+	// 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) => {
@@ -167,9 +167,7 @@ function MediaPlayerImpl({
 			case "KeyF":
 				event.preventDefault()
 				dispatch({
-					type: isFullscreen
-						? MediaActionTypes.EXIT_FULLSCREEN
-						: MediaActionTypes.ENTER_FULLSCREEN
+					type: isFullscreen ? MediaActionTypes.EXIT_FULLSCREEN : MediaActionTypes.ENTER_FULLSCREEN
 				})
 				break
 
@@ -310,7 +308,7 @@ function MediaPlayerImpl({
 			isTouchDevice && [
 				"touch-manipulation", // Improves touch responsiveness
 				"select-none", // Prevents text selection during gestures
-				"overscroll-contain", // Prevents scroll chaining
+				"overscroll-contain" // Prevents scroll chaining
 			],
 			// Enable hardware acceleration for smooth animations
 			"will-change-transform",

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

@@ -1,6 +1,6 @@
 "use client"
 
-import { Slider } from "../components/ui/slider"
+import { Slider } from "@rp/ui/components/slider"
 import React from "react"
 import {
 	MediaActionTypes,

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

@@ -1,6 +1,6 @@
 "use client"
 
-import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@rp/ui/components/tooltip"
 import React from "react"
 import { useMediaContext } from "../context/media-context"
 

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

@@ -3,6 +3,19 @@
 import React from "react"
 import { useMediaContext } from "../context/media-context"
 
+// 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) {
+				;(ref as React.MutableRefObject<T>).current = node
+			}
+		})
+	}
+}
+
 export interface MediaPlayerVideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {
 	asChild?: boolean
 }
@@ -15,22 +28,31 @@ export function MediaPlayerVideo({
 }: MediaPlayerVideoProps) {
 	const context = useMediaContext()
 
+	// Create a ref that will be composed with the context mediaRef when mounted
+	const [combinedRef, setCombinedRef] = React.useState<React.RefCallback<HTMLVideoElement> | null>(
+		() => {
+			// This runs once during initialization to create the combined ref
+			return composeRefs(context.mediaRef)
+		}
+	)
+
+	// Update combined ref when context changes (but this won't trigger render)
+	React.useEffect(() => {
+		setCombinedRef(() => composeRefs(context.mediaRef))
+	}, [context.mediaRef])
+
 	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,
+			ref: combinedRef,
 			"data-slot": "media-player-video"
 		} as any)
 	}
 
 	return (
-		<video
-			ref={context.mediaRef as React.RefObject<HTMLVideoElement>}
-			data-slot="media-player-video"
-			className={className}
-			{...props}>
+		<video ref={combinedRef} data-slot="media-player-video" className={className} {...props}>
 			{children}
 		</video>
 	)

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

@@ -1,8 +1,8 @@
 "use client"
 
-import { Button } from "../components/ui/button"
-import { Slider } from "../components/ui/slider"
-import { Volume1Icon, Volume2Icon, VolumeXIcon } from "../components/ui/icons"
+import { Button } from "@rp/ui/components/button"
+import { Slider } from "@rp/ui/components/slider"
+import { Volume1Icon, Volume2Icon, VolumeXIcon } from "lucide-react"
 import React from "react"
 import {
 	MediaActionTypes,