@therealtinhtute/baroiplayer 1.0.0

package/src/components/variants/minimal/components/SeekBar.tsx

@@ -0,0 +1,131 @@
+import React, { memo, useState, useRef } from "react"
+import { cn } from "../../../../lib/utils"
+import type { BufferedRange } from "../../../../hooks/useVideoPlayer"
+
+interface SeekBarProps {
+	currentTime: number
+	duration: number
+	bufferedRanges?: BufferedRange[]
+	isSeeking?: boolean
+	onSeek: (time: number) => void
+}
+
+export const SeekBar = function SeekBar({
+	currentTime,
+	duration,
+	bufferedRanges = [],
+	isSeeking = false,
+	onSeek
+}: SeekBarProps) {
+	const [isHovering, setIsHovering] = useState(false)
+	const [hoverPosition, setHoverPosition] = useState(0)
+	const [showRipple, setShowRipple] = useState(false)
+	const [ripplePosition, setRipplePosition] = useState({ x: 0, y: 0 })
+	const seekBarRef = useRef<HTMLDivElement>(null)
+	
+	const progress = duration > 0 ? (currentTime / duration) * 100 : 0
+
+	const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+		if (duration === 0) return
+
+		const rect = e.currentTarget.getBoundingClientRect()
+		const position = (e.clientX - rect.left) / rect.width
+		const newTime = Math.max(0, Math.min(duration, position * duration))
+		
+		// Add ripple effect
+		setRipplePosition({ x: e.clientX - rect.left, y: e.clientY - rect.top })
+		setShowRipple(true)
+		setTimeout(() => setShowRipple(false), 600)
+		
+		onSeek(newTime)
+	}
+	
+	const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+		if (!seekBarRef.current) return
+		const rect = seekBarRef.current.getBoundingClientRect()
+		const position = ((e.clientX - rect.left) / rect.width) * 100
+		setHoverPosition(Math.max(0, Math.min(100, position)))
+	}
+	
+	const handleMouseEnter = () => setIsHovering(true)
+	const handleMouseLeave = () => setIsHovering(false)
+
+	return (
+		<div className="relative mb-3">
+			<div 
+				ref={seekBarRef}
+				className={cn(
+					"minimal-seekbar group relative cursor-pointer",
+					isSeeking && "minimal-seekbar-seeking"
+				)}
+				onClick={handleClick}
+				onMouseMove={handleMouseMove}
+				onMouseEnter={handleMouseEnter}
+				onMouseLeave={handleMouseLeave}
+			>
+				{/* Buffered ranges */}
+				{bufferedRanges.map((range, index) => {
+					const startPercent = duration > 0 ? (range.start / duration) * 100 : 0
+					const widthPercent = duration > 0 ? ((range.end - range.start) / duration) * 100 : 0
+					return (
+						<div
+							key={index}
+							className="minimal-seekbar-buffered"
+							style={{
+								left: `${startPercent}%`,
+								width: `${widthPercent}%`
+							}}
+						/>
+					)
+				})}
+				
+				{/* Progress bar */}
+				<div 
+					className={cn(
+						"minimal-seekbar-progress",
+						isSeeking && "minimal-seekbar-progress-seeking"
+					)}
+					style={{ width: `${progress}%` }} 
+				/>
+				
+				{/* Hover indicator */}
+				{isHovering && !isSeeking && (
+					<div
+						className="minimal-seekbar-hover-indicator"
+						style={{ left: `${hoverPosition}%` }}
+					/>
+				)}
+				
+				{/* Thumb */}
+				<div
+					className={cn(
+						"minimal-seekbar-thumb",
+						(isHovering || isSeeking) && "opacity-100",
+						isSeeking && "minimal-seekbar-thumb-seeking"
+					)}
+					style={{ left: `${progress}%` }}
+				/>
+				
+				{/* Ripple effect */}
+				{showRipple && (
+					<div
+						className="minimal-seekbar-ripple"
+						style={{
+							left: ripplePosition.x,
+							top: ripplePosition.y
+						}}
+					/>
+				)}
+			</div>
+			
+			{/* Seeking indicator */}
+			{isSeeking && (
+				<div className="-top-6 -translate-x-1/2 absolute left-1/2 transform">
+					<div className="rounded bg-black/80 px-2 py-1 text-white text-xs backdrop-blur-sm">
+						Seeking...
+					</div>
+				</div>
+			)}
+		</div>
+	)
+}

package/src/components/variants/minimal/components/SettingsDropdown.tsx

@@ -0,0 +1,70 @@
+import React, { memo, useCallback } from "react"
+import { cn } from "../../../../lib/utils"
+import { defaultMinimalIcons } from "../../../icons"
+
+interface SettingsDropdownProps {
+	showSettings: boolean
+	playbackRate: number
+	onToggleSettings: () => void
+	onChangePlaybackRate: (rate: number) => void
+}
+
+export const SettingsDropdown = function SettingsDropdown({
+	showSettings,
+	playbackRate,
+	onToggleSettings,
+	onChangePlaybackRate
+}: SettingsDropdownProps) {
+	const playbackRates = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
+
+	const handleSettingsClick = useCallback((e: React.MouseEvent) => {
+		e.stopPropagation()
+		onToggleSettings()
+	}, [onToggleSettings])
+
+	const handleDropdownClick = useCallback((e: React.MouseEvent) => {
+		e.stopPropagation()
+	}, [])
+
+	return (
+		<div className="relative" style={{ zIndex: showSettings ? 60 : "auto" }}>
+			<button
+				className={cn("minimal-btn h-9 w-9", showSettings && "text-cyan-500")}
+				onClick={handleSettingsClick}
+				aria-label="Settings"
+			>
+				{defaultMinimalIcons.settings && <defaultMinimalIcons.settings size={18} />}
+			</button>
+
+			{showSettings && (
+				<div
+					className="absolute right-0 mb-2 min-w-[200px] rounded-lg border border-gray-700 bg-gray-900 py-2 shadow-xl"
+					style={{
+						bottom: "100%",
+						zIndex: 1000
+					}}
+					onClick={handleDropdownClick}
+				>
+					<div className="px-3 py-1 text-gray-400 text-xs uppercase tracking-wider">
+						Speed
+					</div>
+					<div className="px-1">
+						{playbackRates.map((rate) => (
+							<button
+								key={rate}
+								className={cn(
+									"w-full rounded px-3 py-1.5 text-left text-sm transition-colors hover:bg-gray-800",
+									"text-white",
+									playbackRate === rate && "bg-cyan-700/20 text-cyan-400"
+								)}
+								onClick={() => onChangePlaybackRate(rate)}
+							>
+								{rate === 1 ? "Normal" : `${rate}x`}
+							</button>
+						))}
+					</div>
+				</div>
+			)}
+		</div>
+	)
+}

package/src/components/variants/minimal/components/SubtitleDisplay.tsx

@@ -0,0 +1,21 @@
+import React, { memo } from "react"
+
+interface SubtitleDisplayProps {
+	subtitlesEnabled: boolean
+	subtitleText: string
+}
+
+export const SubtitleDisplay = function SubtitleDisplay({
+	subtitlesEnabled,
+	subtitleText
+}: SubtitleDisplayProps) {
+	if (!subtitlesEnabled || !subtitleText) return null
+
+	return (
+		<div className="pointer-events-none absolute right-0 bottom-20 left-0 px-4 text-center">
+			<div className="inline-block rounded bg-black/75 px-4 py-2 font-medium text-lg text-white">
+				{subtitleText}
+			</div>
+		</div>
+	)
+}

package/src/components/variants/minimal/components/TimeDisplay.tsx

@@ -0,0 +1,18 @@
+import React, { memo } from "react"
+import { formatTime } from "../../../../lib/format-time"
+
+interface TimeDisplayProps {
+	currentTime: number
+	duration: number
+}
+
+export const TimeDisplay = function TimeDisplay({
+	currentTime,
+	duration
+}: TimeDisplayProps) {
+	return (
+		<div className="font-mono text-sm text-white">
+			{formatTime(currentTime)} / {formatTime(duration)}
+		</div>
+	)
+}

package/src/components/variants/minimal/components/VideoElement.tsx

@@ -0,0 +1,40 @@
+import React, { memo } from "react"
+
+interface VideoElementProps {
+	videoRef: React.RefObject<HTMLVideoElement | null>
+	src: string
+	poster?: string
+	subtitleSrc?: string
+	subtitlesEnabled: boolean
+	crossOrigin?: "anonymous" | "use-credentials"
+	onTogglePlay: () => void
+}
+
+export const VideoElement = function VideoElement({
+	videoRef,
+	src,
+	poster,
+	subtitleSrc,
+	subtitlesEnabled,
+	crossOrigin,
+	onTogglePlay
+}: VideoElementProps) {
+	return (
+		<video
+			ref={videoRef}
+			src={src}
+			poster={poster}
+			crossOrigin={crossOrigin}
+			className="h-full w-full object-contain"
+			onClick={onTogglePlay}
+		>
+			{subtitleSrc && (
+				<track 
+					kind="subtitles" 
+					src={subtitleSrc} 
+					default={subtitlesEnabled} 
+				/>
+			)}
+		</video>
+	)
+}

package/src/components/variants/minimal/components/VolumeControl.tsx

@@ -0,0 +1,217 @@
+import React, { memo, useCallback, useRef, useEffect } from "react"
+import { cn } from "../../../../lib/utils"
+import { defaultMinimalIcons } from "../../../icons"
+
+interface VolumeControlProps {
+	volume: number
+	isMuted: boolean
+	showVolumeSlider: boolean
+	onToggleMute: () => void
+	onVolumeChange: (volume: number) => void
+	onShowVolumeSlider: (show: boolean) => void
+	orientation?: "horizontal" | "vertical"
+	className?: string
+}
+
+export const VolumeControl = function VolumeControl({
+	volume,
+	isMuted,
+	showVolumeSlider,
+	onToggleMute,
+	onVolumeChange,
+	onShowVolumeSlider,
+	orientation = "horizontal",
+	className
+}: VolumeControlProps) {
+	const VolumeIcon = defaultMinimalIcons.volume
+	const VolumeMutedIcon = defaultMinimalIcons.volumeMuted
+	const sliderRefHorizontal = useRef<HTMLDivElement>(null)
+	const sliderRefVertical = useRef<HTMLDivElement>(null)
+	const isDragging = useRef(false)
+	const [isDraggingState, setIsDraggingState] = React.useState(false)
+	const [isHovering, setIsHovering] = React.useState(false)
+  const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+	const handleVolumeChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>) => {
+			const newVolume = parseFloat(e.target.value)
+			onVolumeChange(newVolume)
+		},
+		[onVolumeChange]
+	)
+
+	const handleSliderClick = useCallback(
+		(e: React.MouseEvent<HTMLDivElement>, isVertical: boolean) => {
+			const sliderRef = isVertical ? sliderRefVertical : sliderRefHorizontal
+			if (!sliderRef.current) return
+			const rect = sliderRef.current.getBoundingClientRect()
+			
+			let percentage: number
+			if (!isVertical) {
+				percentage = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+			} else {
+				percentage = Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height))
+			}
+			
+			onVolumeChange(percentage)
+		},
+		[onVolumeChange]
+	)
+
+	const handleMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement>, isVertical: boolean) => {
+		e.preventDefault()
+		e.stopPropagation()
+		isDragging.current = true
+		setIsDraggingState(true)
+		handleSliderClick(e, isVertical)
+	}, [handleSliderClick])
+
+	useEffect(() => {
+		const handleMouseMove = (e: MouseEvent) => {
+			if (!isDragging.current) return
+			
+			const sliderRef = orientation === "vertical" ? sliderRefVertical : sliderRefHorizontal
+			if (!sliderRef.current) return
+			
+			const rect = sliderRef.current.getBoundingClientRect()
+			let percentage: number
+			
+			if (orientation === "horizontal") {
+				percentage = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+			} else {
+				percentage = Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height))
+			}
+			
+			onVolumeChange(percentage)
+		}
+
+		const handleMouseUp = () => {
+			isDragging.current = false
+			setIsDraggingState(false)
+		}
+
+		if (isDraggingState) {
+			document.addEventListener("mousemove", handleMouseMove)
+			document.addEventListener("mouseup", handleMouseUp)
+			
+			return () => {
+				document.removeEventListener("mousemove", handleMouseMove)
+				document.removeEventListener("mouseup", handleMouseUp)
+			}
+		}
+	}, [isDraggingState, orientation, onVolumeChange])
+
+	const handleMouseEnter = useCallback(() => {
+		if (hideTimeoutRef.current) {
+			clearTimeout(hideTimeoutRef.current)
+		}
+		setIsHovering(true)
+		onShowVolumeSlider(true)
+	}, [onShowVolumeSlider])
+
+	const handleMouseLeave = useCallback(() => {
+		// Add a small delay before hiding to prevent flickering
+		hideTimeoutRef.current = setTimeout(() => {
+			if (!isDragging.current) {
+				setIsHovering(false)
+				onShowVolumeSlider(false)
+			}
+		}, 200)
+	}, [onShowVolumeSlider])
+
+	// Clean up timeout on unmount
+	useEffect(() => {
+		return () => {
+			if (hideTimeoutRef.current) {
+				clearTimeout(hideTimeoutRef.current)
+			}
+		}
+	}, [])
+
+	const volumePercentage = (isMuted ? 0 : volume) * 100
+
+	return (
+		<div
+			className={cn(
+				"volume-control-wrapper",
+				orientation === "vertical" ? "relative" : "flex items-center gap-2",
+				className
+			)}
+			onMouseEnter={handleMouseEnter}
+			onMouseLeave={handleMouseLeave}
+		>
+			{/* Volume slider for vertical orientation (appears above) */}
+			{orientation === "vertical" && (
+				<div
+					className={cn(
+						"volume-slider-vertical",
+						"-translate-x-1/2 absolute bottom-full left-1/2 mb-2",
+						"transition-all duration-300 ease-out",
+						(showVolumeSlider || isHovering || isDraggingState)
+							? "pointer-events-auto translate-y-0 opacity-100" 
+							: "pointer-events-none translate-y-2 opacity-0"
+					)}
+				>
+					<div className="rounded-lg bg-black/80 p-3 backdrop-blur-sm">
+						<div
+							ref={sliderRefVertical}
+							className="volume-slider-track-vertical group"
+							onMouseDown={(e) => handleMouseDown(e, true)}
+							onClick={(e) => handleSliderClick(e, true)}
+						>
+							<div 
+								className="volume-slider-fill-vertical pointer-events-none"
+								style={{ height: `${volumePercentage}%` }}
+							/>
+							<div 
+								className={cn("volume-slider-thumb-vertical pointer-events-none", isDraggingState && "active")}
+								style={{ bottom: `${volumePercentage}%` }}
+							/>
+						</div>
+						<div className="mt-2 text-center text-white/70 text-xs">
+							{Math.round(volumePercentage)}%
+						</div>
+					</div>
+				</div>
+			)}
+
+			{/* Volume button */}
+			<button
+				className="minimal-btn h-10 w-10"
+				onClick={onToggleMute}
+				aria-label={isMuted ? "Unmute" : "Mute"}
+			>
+				{isMuted || volume === 0
+					? VolumeMutedIcon && <VolumeMutedIcon size={20} />
+					: VolumeIcon && <VolumeIcon size={20} />}
+			</button>
+
+			{/* Volume slider for horizontal orientation (appears beside) */}
+			{orientation === "horizontal" && (
+				<div
+				className={cn(
+					"volume-slider-horizontal-wrapper",
+					"overflow-hidden transition-all duration-300 ease-out",
+					(showVolumeSlider || isHovering || isDraggingState) ? "w-24 opacity-100" : "w-0 opacity-0"
+				)}
+			>
+					<div
+						ref={sliderRefHorizontal}
+						className="volume-slider-track-horizontal group"
+						onMouseDown={(e) => handleMouseDown(e, false)}
+						onClick={(e) => handleSliderClick(e, false)}
+					>
+						<div 
+							className="volume-slider-fill-horizontal pointer-events-none"
+							style={{ width: `${volumePercentage}%` }}
+						/>
+						<div 
+							className={cn("volume-slider-thumb-horizontal pointer-events-none", isDraggingState && "active")}
+							style={{ left: `${volumePercentage}%` }}
+						/>
+					</div>
+				</div>
+			)}
+		</div>
+	)
+}

package/src/components/variants/minimal/index.ts

@@ -0,0 +1,23 @@
+export { MinimalMediaPlayer } from "./MinimalMediaPlayer"
+export type { MinimalMediaPlayerProps } from "./MinimalMediaPlayer"
+
+export { MinimalControls } from "./MinimalControls"
+export type { MinimalControlsProps } from "./MinimalControls"
+
+export { MinimalPlayButton } from "./MinimalPlayButton"
+export type { MinimalPlayButtonProps } from "./MinimalPlayButton"
+
+export { MinimalSeekBar } from "./MinimalSeekBar"
+export type { MinimalSeekBarProps } from "./MinimalSeekBar"
+
+export { MinimalVolumeControl } from "./MinimalVolumeControl"
+export type { MinimalVolumeControlProps } from "./MinimalVolumeControl"
+
+export { MinimalOverlay } from "./MinimalOverlay"
+export type { MinimalOverlayProps } from "./MinimalOverlay"
+
+export { MinimalLoading } from "./MinimalLoading"
+export type { MinimalLoadingProps } from "./MinimalLoading"
+
+export { SimpleMinimalPlayer } from "./SimpleMinimalPlayer"
+export type { SimpleMinimalPlayerProps } from "./SimpleMinimalPlayer"

package/src/components/video-player.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import { forwardRef } from "react"
+import { useKeyboardControls } from "../hooks/use-keyboard-controls"
+import { useMediaPlayer } from "../hooks/use-media-player"
+import { cn } from "../lib/utils"
+import type { VideoPlayerProps } from "../types/index"
+
+export const VideoPlayer = forwardRef<HTMLDivElement, VideoPlayerProps>(
+	(
+		{
+			src,
+			poster,
+			width = "100%",
+			height = "auto",
+			aspectRatio = "16/9",
+			className,
+			children,
+		keyboardControls = true,
+		showControls = true,
+		customControls = false,
+		crossOrigin,
+		...options
+		},
+		ref
+	) => {
+	const { state, controls, mediaRef, containerRef } = useMediaPlayer({
+		src,
+		crossOrigin,
+		...options
+	})
+
+		useKeyboardControls({
+			enabled: keyboardControls,
+			state,
+			controls
+		})
+
+		const renderSources = () => {
+			if (Array.isArray(src)) {
+				return src.map((source, index) => <source key={index} src={source} />)
+			}
+			return null
+		}
+
+		const containerStyle = {
+			width,
+			height,
+			aspectRatio: height === "auto" ? aspectRatio : undefined
+		}
+
+		const videoProps = {
+			ref: mediaRef as React.RefObject<HTMLVideoElement>,
+			controls: showControls && !customControls,
+			poster,
+			className: "w-full h-full object-contain bg-black",
+			...(Array.isArray(src) ? {} : { src })
+		}
+
+		return (
+			<div
+				ref={ref || containerRef}
+				style={containerStyle}
+				className={cn("relative overflow-hidden bg-black", "focus-within:outline-none", className)}
+				tabIndex={0}>
+				<video {...videoProps}>
+					{Array.isArray(src) && renderSources()}
+					Your browser does not support the video element.
+				</video>
+
+				{state.error && (
+					<div className="absolute inset-0 flex items-center justify-center bg-black/80">
+						<div className="text-center text-white">
+							<p className="font-semibold text-lg">Error</p>
+							<p className="text-sm opacity-80">{state.error}</p>
+						</div>
+					</div>
+				)}
+
+				{state.isLoading && (
+					<div className="absolute inset-0 flex items-center justify-center bg-black/50">
+						<div className="text-white">
+							<div className="h-8 w-8 animate-spin rounded-full border-white border-b-2"></div>
+						</div>
+					</div>
+				)}
+
+				{customControls && typeof children === "function" && (
+					<div className="pointer-events-none absolute inset-0">
+						<div className="pointer-events-auto">{children({ state, controls })}</div>
+					</div>
+				)}
+
+				{customControls && typeof children !== "function" && children}
+			</div>
+		)
+	}
+)
+
+VideoPlayer.displayName = "VideoPlayer"