@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

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

@@ -1,5 +1,5 @@
 import React, { memo } from "react"
-import { defaultMinimalIcons, MinimalBackward10Icon, MinimalForward10Icon } from "../../../icons"
+import { MinimalBackward10Icon, MinimalForward10Icon, defaultMinimalIcons } from "../../../icons"
 
 interface PlaybackControlsProps {
 	isPlaying: boolean
@@ -22,19 +22,15 @@ export const PlaybackControls = function PlaybackControls({
 			<button
 				className="minimal-btn size-15"
 				onClick={onTogglePlay}
-				aria-label={isPlaying ? "Pause" : "Play"}
-			>
-				{isPlaying
-					? PauseIcon && <PauseIcon size={32} />
-					: PlayIcon && <PlayIcon size={32} />}
+				aria-label={isPlaying ? "Pause" : "Play"}>
+				{isPlaying ? PauseIcon && <PauseIcon size={32} /> : PlayIcon && <PlayIcon size={32} />}
 			</button>
 
 			<button
 				className="minimal-btn h-9 w-9"
 				onClick={onSeekBackward}
 				aria-label="Backward 10 seconds"
-				title="Backward 10s (J)"
-			>
+				title="Backward 10s (J)">
 				<MinimalBackward10Icon size={18} />
 			</button>
 
@@ -42,10 +38,9 @@ export const PlaybackControls = function PlaybackControls({
 				className="minimal-btn h-9 w-9"
 				onClick={onSeekForward}
 				aria-label="Forward 10 seconds"
-				title="Forward 10s (L)"
-			>
+				title="Forward 10s (L)">
 				<MinimalForward10Icon size={18} />
 			</button>
 		</div>
 	)
-}
+}

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

@@ -1,10 +1,6 @@
 import React, { memo, useState, useRef, useEffect } from "react"
 import { cn } from "../../../../lib/utils"
-import {
-	MinimalSubtitleIcon,
-	MinimalScreenshotIcon,
-	defaultMinimalIcons
-} from "../../../icons"
+import { MinimalScreenshotIcon, MinimalSubtitleIcon, defaultMinimalIcons } from "../../../icons"
 import { SettingsDropdown } from "./SettingsDropdown"
 
 interface RightControlsProps {
@@ -87,8 +83,7 @@ export const RightControls = function RightControls({
 						)}
 						onClick={handleSubtitleClick}
 						aria-label="Subtitles"
-						title={subtitleLoadError ? "Subtitle Error" : "Subtitles (C)"}
-					>
+						title={subtitleLoadError ? "Subtitle Error" : "Subtitles (C)"}>
 						<MinimalSubtitleIcon size={18} />
 					</button>
 
@@ -96,7 +91,7 @@ export const RightControls = function RightControls({
 					{showSubtitleMenu && subtitleTracks && subtitleTracks.length > 0 && (
 						<div className="absolute right-0 bottom-full mb-2 w-48 rounded-md bg-gray-900/95 py-2 shadow-lg backdrop-blur-sm">
 							<div className="px-3 py-1 font-semibold text-gray-400 text-xs">Subtitles</div>
-							
+
 							{/* Off Option */}
 							<button
 								className={cn(
@@ -106,8 +101,7 @@ export const RightControls = function RightControls({
 								onClick={() => {
 									onSelectSubtitleTrack?.(null)
 									setShowSubtitleMenu(false)
-								}}
-							>
+								}}>
 								Off
 							</button>
 
@@ -122,8 +116,7 @@ export const RightControls = function RightControls({
 									onClick={() => {
 										onSelectSubtitleTrack?.(track.id)
 										setShowSubtitleMenu(false)
-									}}
-								>
+									}}>
 									<span>{track.label}</span>
 									{track.language && (
 										<span className="ml-2 text-gray-500 text-xs">({track.language})</span>
@@ -146,8 +139,7 @@ export const RightControls = function RightControls({
 				className="minimal-btn h-9 w-9"
 				onClick={(e) => onTakeScreenshot(e.ctrlKey || e.metaKey)}
 				aria-label="Take Screenshot"
-				title="Screenshot (S) - Ctrl+Click to copy"
-			>
+				title="Screenshot (S) - Ctrl+Click to copy">
 				<MinimalScreenshotIcon size={18} />
 			</button>
 
@@ -162,12 +154,11 @@ export const RightControls = function RightControls({
 				className="minimal-btn h-9 w-9"
 				onClick={onToggleFullscreen}
 				aria-label={isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
-				title="Fullscreen (F)"
-			>
+				title="Fullscreen (F)">
 				{isFullscreen
 					? ExitFullscreenIcon && <ExitFullscreenIcon size={18} />
 					: FullscreenIcon && <FullscreenIcon size={18} />}
 			</button>
 		</div>
 	)
-}
+}

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

@@ -1,6 +1,6 @@
 import React, { memo, useState, useRef } from "react"
-import { cn } from "../../../../lib/utils"
 import type { BufferedRange } from "../../../../hooks/useVideoPlayer"
+import { cn } from "../../../../lib/utils"
 
 interface SeekBarProps {
 	currentTime: number
@@ -22,7 +22,7 @@ export const SeekBar = function SeekBar({
 	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>) => {
@@ -31,28 +31,28 @@ export const SeekBar = function SeekBar({
 		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 
+			<div
 				ref={seekBarRef}
 				className={cn(
 					"minimal-seekbar group relative cursor-pointer",
@@ -61,8 +61,7 @@ export const SeekBar = function SeekBar({
 				onClick={handleClick}
 				onMouseMove={handleMouseMove}
 				onMouseEnter={handleMouseEnter}
-				onMouseLeave={handleMouseLeave}
-			>
+				onMouseLeave={handleMouseLeave}>
 				{/* Buffered ranges */}
 				{bufferedRanges.map((range, index) => {
 					const startPercent = duration > 0 ? (range.start / duration) * 100 : 0
@@ -78,24 +77,21 @@ export const SeekBar = function SeekBar({
 						/>
 					)
 				})}
-				
+
 				{/* Progress bar */}
-				<div 
+				<div
 					className={cn(
 						"minimal-seekbar-progress",
 						isSeeking && "minimal-seekbar-progress-seeking"
 					)}
-					style={{ width: `${progress}%` }} 
+					style={{ width: `${progress}%` }}
 				/>
-				
+
 				{/* Hover indicator */}
 				{isHovering && !isSeeking && (
-					<div
-						className="minimal-seekbar-hover-indicator"
-						style={{ left: `${hoverPosition}%` }}
-					/>
+					<div className="minimal-seekbar-hover-indicator" style={{ left: `${hoverPosition}%` }} />
 				)}
-				
+
 				{/* Thumb */}
 				<div
 					className={cn(
@@ -105,7 +101,7 @@ export const SeekBar = function SeekBar({
 					)}
 					style={{ left: `${progress}%` }}
 				/>
-				
+
 				{/* Ripple effect */}
 				{showRipple && (
 					<div
@@ -117,7 +113,7 @@ export const SeekBar = function SeekBar({
 					/>
 				)}
 			</div>
-			
+
 			{/* Seeking indicator */}
 			{isSeeking && (
 				<div className="-top-6 -translate-x-1/2 absolute left-1/2 transform">

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

@@ -17,10 +17,13 @@ export const SettingsDropdown = function SettingsDropdown({
 }: 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 handleSettingsClick = useCallback(
+		(e: React.MouseEvent) => {
+			e.stopPropagation()
+			onToggleSettings()
+		},
+		[onToggleSettings]
+	)
 
 	const handleDropdownClick = useCallback((e: React.MouseEvent) => {
 		e.stopPropagation()
@@ -31,8 +34,7 @@ export const SettingsDropdown = function SettingsDropdown({
 			<button
 				className={cn("minimal-btn h-9 w-9", showSettings && "text-cyan-500")}
 				onClick={handleSettingsClick}
-				aria-label="Settings"
-			>
+				aria-label="Settings">
 				{defaultMinimalIcons.settings && <defaultMinimalIcons.settings size={18} />}
 			</button>
 
@@ -43,11 +45,8 @@ export const SettingsDropdown = function SettingsDropdown({
 						bottom: "100%",
 						zIndex: 1000
 					}}
-					onClick={handleDropdownClick}
-				>
-					<div className="px-3 py-1 text-gray-400 text-xs uppercase tracking-wider">
-						Speed
-					</div>
+					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
@@ -57,8 +56,7 @@ export const SettingsDropdown = function SettingsDropdown({
 									"text-white",
 									playbackRate === rate && "bg-cyan-700/20 text-cyan-400"
 								)}
-								onClick={() => onChangePlaybackRate(rate)}
-							>
+								onClick={() => onChangePlaybackRate(rate)}>
 								{rate === 1 ? "Normal" : `${rate}x`}
 							</button>
 						))}
@@ -67,4 +65,4 @@ export const SettingsDropdown = function SettingsDropdown({
 			)}
 		</div>
 	)
-}
+}

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

@@ -18,4 +18,4 @@ export const SubtitleDisplay = function SubtitleDisplay({
 			</div>
 		</div>
 	)
-}
+}

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

@@ -6,13 +6,10 @@ interface TimeDisplayProps {
 	duration: number
 }
 
-export const TimeDisplay = function TimeDisplay({
-	currentTime,
-	duration
-}: TimeDisplayProps) {
+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

@@ -26,15 +26,8 @@ export const VideoElement = function VideoElement({
 			poster={poster}
 			crossOrigin={crossOrigin}
 			className="h-full w-full object-contain"
-			onClick={onTogglePlay}
-		>
-			{subtitleSrc && (
-				<track 
-					kind="subtitles" 
-					src={subtitleSrc} 
-					default={subtitlesEnabled} 
-				/>
-			)}
+			onClick={onTogglePlay}>
+			{subtitleSrc && <track kind="subtitles" src={subtitleSrc} default={subtitlesEnabled} />}
 		</video>
 	)
-}
+}

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

@@ -30,7 +30,7 @@ export const VolumeControl = function VolumeControl({
 	const isDragging = useRef(false)
 	const [isDraggingState, setIsDraggingState] = React.useState(false)
 	const [isHovering, setIsHovering] = React.useState(false)
-  const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+	const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
 	const handleVolumeChange = useCallback(
 		(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -45,43 +45,46 @@ export const VolumeControl = function VolumeControl({
 			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])
+	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)
 		}
 
@@ -93,7 +96,7 @@ export const VolumeControl = function VolumeControl({
 		if (isDraggingState) {
 			document.addEventListener("mousemove", handleMouseMove)
 			document.addEventListener("mouseup", handleMouseUp)
-			
+
 			return () => {
 				document.removeEventListener("mousemove", handleMouseMove)
 				document.removeEventListener("mouseup", handleMouseUp)
@@ -138,8 +141,7 @@ export const VolumeControl = function VolumeControl({
 				className
 			)}
 			onMouseEnter={handleMouseEnter}
-			onMouseLeave={handleMouseLeave}
-		>
+			onMouseLeave={handleMouseLeave}>
 			{/* Volume slider for vertical orientation (appears above) */}
 			{orientation === "vertical" && (
 				<div
@@ -147,24 +149,25 @@ export const VolumeControl = function VolumeControl({
 						"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" 
+						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 
+							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")}
+							<div
+								className={cn(
+									"volume-slider-thumb-vertical pointer-events-none",
+									isDraggingState && "active"
+								)}
 								style={{ bottom: `${volumePercentage}%` }}
 							/>
 						</div>
@@ -179,8 +182,7 @@ export const VolumeControl = function VolumeControl({
 			<button
 				className="minimal-btn h-10 w-10"
 				onClick={onToggleMute}
-				aria-label={isMuted ? "Unmute" : "Mute"}
-			>
+				aria-label={isMuted ? "Unmute" : "Mute"}>
 				{isMuted || volume === 0
 					? VolumeMutedIcon && <VolumeMutedIcon size={20} />
 					: VolumeIcon && <VolumeIcon size={20} />}
@@ -189,24 +191,25 @@ export const VolumeControl = function VolumeControl({
 			{/* 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"
-				)}
-			>
+					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 
+						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")}
+						<div
+							className={cn(
+								"volume-slider-thumb-horizontal pointer-events-none",
+								isDraggingState && "active"
+							)}
 							style={{ left: `${volumePercentage}%` }}
 						/>
 					</div>

package/src/components/video-player.tsx

@@ -16,19 +16,19 @@ export const VideoPlayer = forwardRef<HTMLDivElement, VideoPlayerProps>(
 			aspectRatio = "16/9",
 			className,
 			children,
-		keyboardControls = true,
-		showControls = true,
-		customControls = false,
-		crossOrigin,
-		...options
+			keyboardControls = true,
+			showControls = true,
+			customControls = false,
+			crossOrigin,
+			...options
 		},
 		ref
 	) => {
-	const { state, controls, mediaRef, containerRef } = useMediaPlayer({
-		src,
-		crossOrigin,
-		...options
-	})
+		const { state, controls, mediaRef, containerRef } = useMediaPlayer({
+			src,
+			crossOrigin,
+			...options
+		})
 
 		useKeyboardControls({
 			enabled: keyboardControls,