@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

package/dist/src/components/ui/play-button.tsx

@@ -1,107 +0,0 @@
-"use client"
-
-import { Pause, Play } from "lucide-react"
-import { forwardRef } from "react"
-import { cn } from "../../lib/utils"
-import type { PlayButtonProps } from "../../types/index"
-
-const sizeVariants = {
-	sm: { button: "size-8", icon: 16 },
-	md: { button: "size-10", icon: 20 },
-	lg: { button: "size-12", icon: 24 },
-	xl: { button: "size-16", icon: 32 }
-} as const
-
-export const PlayButton = forwardRef<HTMLButtonElement, PlayButtonProps>(
-	({ isPlaying, onToggle, disabled = false, size = "lg", className }, ref) => {
-		const sizeConfig = sizeVariants[size] || sizeVariants.lg
-		
-		return (
-			<button
-				ref={ref}
-				type="button"
-				onClick={onToggle}
-				disabled={disabled}
-				data-state={isPlaying ? "playing" : "paused"}
-				className={cn(
-					// Base styles with new design system
-					"group relative inline-flex items-center justify-center",
-					"glass-strong media-control rounded-full contain-layout",
-					"focus-ring touch-manipulation",
-					sizeConfig.button,
-					
-					// Color transitions with OKLCH
-					"text-[color:var(--media-text)] transition-all duration-300",
-					"bg-[color:var(--media-control-bg)] backdrop-blur-sm",
-					"border border-[color:var(--media-border)]/30",
-					
-					// Interactive states
-					"hover:bg-[color:var(--media-control-hover)]",
-					"hover:border-[color:var(--media-border)]/50",
-					"hover:shadow-[color:var(--media-bg)]/20 hover:shadow-lg",
-					"hover:-translate-y-0.5 hover:scale-105",
-					
-					"active:bg-[color:var(--media-control-active)]",
-					"active:translate-y-0 active:scale-100",
-					
-					// Focus state
-					"focus-visible:ring-2 focus-visible:ring-[color:var(--media-focus)]",
-					"focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--media-bg)]",
-					
-					// Disabled state
-					"disabled:cursor-not-allowed disabled:opacity-50",
-					"disabled:hover:translate-y-0 disabled:hover:scale-100",
-					"disabled:hover:bg-[color:var(--media-control-bg)]",
-					
-					className
-				)}
-				aria-label={isPlaying ? "Pause media" : "Play media"}
-				aria-pressed={isPlaying}>
-				{/* Background glow effect */}
-				<div 
-					className={cn(
-						"absolute inset-0 rounded-full opacity-0 transition-opacity duration-300",
-						"bg-gradient-to-br from-[color:var(--color-media-play)] to-[color:var(--color-media-pause)]",
-						"blur-sm group-hover:opacity-20",
-						isPlaying && "opacity-10"
-					)} 
-				/>
-				
-				{/* Icon with enhanced styling */}
-				{isPlaying ? (
-					<Pause 
-						size={sizeConfig.icon} 
-						className={cn(
-							"relative z-10 fill-current transition-all duration-200",
-							"text-[color:var(--color-media-pause)]",
-							"group-hover:scale-110 group-active:scale-95",
-							"drop-shadow-sm"
-						)} 
-					/>
-				) : (
-					<Play 
-						size={sizeConfig.icon} 
-						className={cn(
-							"relative z-10 fill-current transition-all duration-200",
-							"ml-0.5 text-[color:var(--color-media-play)]",
-							"group-hover:scale-110 group-active:scale-95",
-							"drop-shadow-sm"
-						)} 
-					/>
-				)}
-				
-				{/* Ripple effect */}
-				<div 
-					className={cn(
-						"absolute inset-0 rounded-full opacity-0",
-						"scale-75 bg-[color:var(--media-text)]/10",
-						"group-active:scale-100 group-active:opacity-100",
-						"transition-all duration-150 ease-out"
-					)}
-				/>
-			</button>
-		)
-	}
-)
-
-PlayButton.displayName = "PlayButton"

package/dist/src/components/ui/seek-bar.d.ts

@@ -1,3 +0,0 @@
-import type { SeekBarProps } from "../../types/index";
-export declare const SeekBar: import("react").ForwardRefExoticComponent<SeekBarProps & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=seek-bar.d.ts.map

package/dist/src/components/ui/seek-bar.tsx

@@ -1,161 +0,0 @@
-"use client"
-
-import * as Slider from "@radix-ui/react-slider"
-import * as Tooltip from "@radix-ui/react-tooltip"
-import { forwardRef, useCallback, useState, useMemo, useTransition, useDeferredValue, useRef } from "react"
-import { formatTime } from "../../lib/format-time"
-import { cn } from "../../lib/utils"
-import type { SeekBarProps } from "../../types/index"
-
-export const SeekBar = forwardRef<HTMLDivElement, SeekBarProps>(
-	({ currentTime, duration, buffered, onSeek, size = "sm", className }, ref) => {
-		// React 19 concurrent features
-		const [isPending, startTransition] = useTransition()
-		const [isDragging, setIsDragging] = useState(false)
-		const [previewTime, setPreviewTime] = useState(0)
-		const [isHovering, setIsHovering] = useState(false)
-
-		// Defer non-critical updates for better performance
-		const deferredHovering = useDeferredValue(isHovering)
-		const deferredPreviewTime = useDeferredValue(previewTime)
-
-		// Memoize expensive calculations
-		const progress = useMemo(() => duration > 0 ? (currentTime / duration) * 100 : 0, [currentTime, duration])
-
-		// Calculate buffered ranges with memoization
-		const bufferedRanges = useMemo(() => {
-			const ranges = []
-			if (buffered && duration > 0) {
-				for (let i = 0; i < buffered.length; i++) {
-					const start = (buffered.start(i) / duration) * 100
-					const end = (buffered.end(i) / duration) * 100
-					ranges.push({ start, end })
-				}
-			}
-			return ranges
-		}, [buffered, duration])
-
-		// Throttled seek handler with React 19 transitions
-		const seekTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
-		const lastSeekTime = useRef<number>(0)
-
-		const handleValueChange = ([value]: number[]) => {
-        				const time = ((value ?? 0) / 100) * duration
-        				setPreviewTime(time)
-        				if (isDragging) {
-        					onSeek(time)
-        				}
-        			}
-
-		const handleValueCommit = ([value]: number[]) => {
-        				const time = ((value ?? 0) / 100) * duration
-        				onSeek(time)
-        				setIsDragging(false)
-        			}
-
-		const handlePointerDown = () => {
-        			setIsDragging(true)
-        		}
-
-		return (
-			<div 
-				ref={ref} 
-				className={cn(
-					"media-container relative w-full text-[color:var(--media-text)]",
-					"touch-manipulation contain-layout",
-					className
-				)}
-				onMouseEnter={() => setIsHovering(true)}
-				onMouseLeave={() => setIsHovering(false)}>
-				<Tooltip.Provider>
-					<Tooltip.Root>
-						<Tooltip.Trigger asChild>
-							<div className="relative animate-enter">
-								<Slider.Root
-									className={cn(
-										"group relative flex w-full touch-none select-none items-center",
-										"media-md:h-4 media-sm:h-3 media-xs:h-2",
-										"focus-ring cursor-pointer"
-									)}
-									value={[progress]}
-									max={100}
-									step={0.1}
-									onValueChange={handleValueChange}
-									onValueCommit={handleValueCommit}
-									onPointerDown={handlePointerDown}
-									aria-label="Seek to position">
-									<Slider.Track
-										className={cn(
-											"relative grow overflow-hidden rounded-full",
-											"bg-[color:var(--media-control-bg)]/40 backdrop-blur-sm",
-											"border border-[color:var(--media-border)]/20",
-											"shadow-inner transition-all duration-300 ease-out",
-											"h-1 group-focus-within:h-1.5 group-hover:h-1.5",
-											"group-hover:bg-[color:var(--media-control-bg)]/60",
-											"group-hover:border-[color:var(--media-border)]/40"
-										)}>
-										{/* Buffered ranges */}
-										{bufferedRanges.map((range, index) => (
-											<div
-												key={index}
-												className={cn(
-													"absolute h-full rounded-full transition-all duration-500",
-													"bg-[color:var(--color-media-buffered)] shadow-inner",
-													"opacity-60 group-hover:opacity-80"
-												)}
-												style={{
-													left: `${range.start}%`,
-													width: `${range.end - range.start}%`
-												}}
-											/>
-										))}
-
-										{/* Progress range with gradient */}
-										<Slider.Range 
-											className={cn(
-												"absolute h-full rounded-full transition-all duration-300",
-												"bg-gradient-to-r from-[color:var(--color-media-progress)] to-[color:var(--color-brand-accent)]",
-												"shadow-[color:var(--color-brand-primary)]/20 shadow-lg",
-												"group-hover:shadow-xl"
-											)} 
-										/>
-									</Slider.Track>
-
-									<Slider.Thumb
-										className={cn(
-											"block size-4 rounded-full border-white/20 bg-white",
-											"shadow-lg hover:shadow-xl",
-											"opacity-0 group-hover:opacity-100",
-											"hover:scale-110 hover:bg-white/95 active:scale-95",
-											"focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-white/50",
-											"focus:ring-offset-2 focus:ring-offset-black/20",
-											"transition-all duration-300 ease-out",
-											isDragging && "opacity-100"
-										)}
-										aria-label="Seek"
-									/>
-								</Slider.Root>
-							</div>
-						</Tooltip.Trigger>
-
-						{isDragging && (
-							<Tooltip.Portal>
-								<Tooltip.Content
-									className={cn(
-										"rounded bg-black/80 px-2 py-1 text-sm text-white",
-										"fade-in-0 zoom-in-95 animate-in"
-									)}
-									sideOffset={10}>
-									{formatTime(previewTime)}
-									<Tooltip.Arrow className="fill-black/80" />
-								</Tooltip.Content>
-							</Tooltip.Portal>
-						)}
-					</Tooltip.Root>
-				</Tooltip.Provider>
-			</div>
-		)
-	}
-)
-
-SeekBar.displayName = "SeekBar"

package/dist/src/components/ui/slider.tsx

@@ -1,55 +0,0 @@
-import React, { forwardRef } from 'react';
-import { cn } from '../lib/utils';
-
-export interface SliderProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  min?: number;
-  max?: number;
-  step?: number;
-  value?: number[];
-  onValueChange?: (value: number[]) => void;
-}
-
-const Slider = forwardRef<HTMLInputElement, SliderProps>(
-  ({ className, min = 0, max = 100, step = 1, value = [0], onValueChange, ...props }, ref) => {
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newValue = [Number(e.target.value)];
-      onValueChange?.(newValue);
-    };
-
-    return (
-      <div className={cn('relative flex w-full touch-none select-none items-center', className)}>
-        <div className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-          <div
-            className="absolute h-full bg-primary"
-            style={{
-              left: '0%',
-              right: `${100 - ((value[0] - min) / (max - min)) * 100}%`
-            }}
-          />
-        </div>
-        <input
-          type="range"
-          min={min}
-          max={max}
-          step={step}
-          value={value[0]}
-          onChange={handleChange}
-          className="absolute h-2 w-full cursor-pointer opacity-0 outline-none"
-          ref={ref}
-          {...props}
-        />
-        <div
-          className="absolute h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-          style={{
-            left: `${((value[0] - min) / (max - min)) * 100}%`,
-            transform: 'translateX(-50%)'
-          }}
-        />
-      </div>
-    );
-  }
-);
-
-Slider.displayName = 'Slider';
-
-export { Slider };

package/dist/src/components/ui/time-display.d.ts

@@ -1,3 +0,0 @@
-import type { TimeDisplayProps } from "../../types/index";
-export declare const TimeDisplay: import("react").ForwardRefExoticComponent<TimeDisplayProps & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=time-display.d.ts.map

package/dist/src/components/ui/time-display.tsx

@@ -1,40 +0,0 @@
-"use client"
-
-import { forwardRef } from "react"
-import { formatTime } from "../../lib/format-time"
-import { cn } from "../../lib/utils"
-import type { TimeDisplayProps } from "../../types/index"
-
-export const TimeDisplay = forwardRef<HTMLDivElement, TimeDisplayProps>(
-	({ currentTime, duration, showRemaining = false, size = "sm", className }, ref) => {
-		const current = formatTime(currentTime)
-		const total = formatTime(duration)
-		const remaining = formatTime(duration - currentTime)
-
-		const sizeClasses: Record<"sm" | "md" | "lg" | "xl", string> = {
-			sm: "text-xs",
-			md: "text-sm",
-			lg: "text-base",
-			xl: "text-lg"
-		}
-
-		return (
-			<div
-				ref={ref}
-				className={cn(
-					"flex items-center font-mono text-white text-xs",
-					"rounded-lg backdrop-blur-sm",
-					"px-3 py-1.5",
-					sizeClasses[size],
-					"select-none",
-					className
-				)}>
-				<span className="tabular-nums">{current}</span>
-				<span className="mx-1 text-white">/</span>
-				<span className="tabular-nums">{showRemaining ? `-${remaining}` : total}</span>
-			</div>
-		)
-	}
-)
-
-TimeDisplay.displayName = "TimeDisplay"

package/dist/src/components/ui/tooltip.tsx

@@ -1,131 +0,0 @@
-import React, { useState, useRef, useEffect, forwardRef } from 'react';
-import { cn } from '../lib/utils';
-
-interface TooltipProviderProps {
-  children: React.ReactNode;
-  delayDuration?: number;
-}
-
-const TooltipProvider: React.FC<TooltipProviderProps> = ({ children, delayDuration = 0 }) => {
-  return <>{children}</>;
-};
-
-interface TooltipProps {
-  children: React.ReactNode;
-  content: React.ReactNode;
-  delayDuration?: number;
-  sideOffset?: number;
-}
-
-const Tooltip: React.FC<TooltipProps> = ({ children, content, delayDuration = 0, sideOffset = 0 }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-  const triggerRef = useRef<HTMLDivElement>(null);
-  const timeoutRef = useRef<NodeJS.Timeout>();
-
-  const updatePosition = () => {
-    if (triggerRef.current) {
-      const rect = triggerRef.current.getBoundingClientRect();
-      setPosition({
-        top: rect.bottom + sideOffset,
-        left: rect.left + rect.width / 2
-      });
-    }
-  };
-
-  const showTooltip = () => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-
-    if (delayDuration > 0) {
-      timeoutRef.current = setTimeout(() => {
-        setIsOpen(true);
-        updatePosition();
-      }, delayDuration);
-    } else {
-      setIsOpen(true);
-      updatePosition();
-    }
-  };
-
-  const hideTooltip = () => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    setIsOpen(false);
-  };
-
-  useEffect(() => {
-    if (isOpen) {
-      updatePosition();
-      window.addEventListener('scroll', updatePosition);
-      window.addEventListener('resize', updatePosition);
-
-      return () => {
-        window.removeEventListener('scroll', updatePosition);
-        window.removeEventListener('resize', updatePosition);
-      };
-    }
-  }, [isOpen]);
-
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-
-  return (
-    <TooltipProvider delayDuration={delayDuration}>
-      <div
-        ref={triggerRef}
-        onMouseEnter={showTooltip}
-        onMouseLeave={hideTooltip}
-        onFocus={showTooltip}
-        onBlur={hideTooltip}
-      >
-        {children}
-      </div>
-
-      {isOpen && (
-        <div
-          className={cn(
-            'fixed z-50 px-3 py-2 text-sm bg-popover text-popover-foreground shadow-md rounded-md border',
-            'max-w-xs break-words pointer-events-none'
-          )}
-          style={{
-            top: `${position.top}px`,
-            left: `${position.left}px`,
-            transform: 'translateX(-50%)'
-          }}
-        >
-          {content}
-        </div>
-      )}
-    </TooltipProvider>
-  );
-};
-
-interface TooltipContentProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-const TooltipContent: React.FC<TooltipContentProps> = ({ children, className }) => {
-  return <div className={cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md', className)}>
-    {children}
-  </div>;
-};
-
-interface TooltipTriggerProps {
-  children: React.ReactNode;
-  asChild?: boolean;
-}
-
-const TooltipTrigger: React.FC<TooltipTriggerProps> = ({ children, asChild = false }) => {
-  return <>{children}</>;
-};
-
-export { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider };

package/dist/src/components/ui/volume-control.d.ts

@@ -1,3 +0,0 @@
-import type { VolumeControlProps } from "../../types/index";
-export declare const VolumeControl: import("react").ForwardRefExoticComponent<VolumeControlProps & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=volume-control.d.ts.map

package/dist/src/components/ui/volume-control.tsx

@@ -1,143 +0,0 @@
-"use client"
-
-import * as Slider from "@radix-ui/react-slider"
-import * as Tooltip from "@radix-ui/react-tooltip"
-import { Volume1, Volume2, VolumeX } from "lucide-react"
-import { forwardRef } from "react"
-import { cn } from "../../lib/utils"
-import type { VolumeControlProps } from "../../types/index"
-
-const sizeConfig = {
-	md: {
-		button: "size-10",
-		icon: 18,
-		slider: "h-6",
-		thumb: "size-3",
-		track: "h-1"
-	},
-	lg: {
-		button: "size-12",
-		icon: 22,
-		slider: "h-7",
-		thumb: "size-4",
-		track: "h-1.5"
-	},
-	xl: {
-		button: "size-14",
-		icon: 26,
-		slider: "h-8",
-		thumb: "size-5",
-		track: "h-2"
-	}
-} as const
-
-export const VolumeControl = forwardRef<HTMLDivElement, VolumeControlProps>(
-	({ volume, isMuted, onVolumeChange, onToggleMute, size = "lg", className }, ref) => {
-		const getVolumeIcon = () => {
-			if (isMuted || volume === 0) {
-				return VolumeX
-			} else if (volume < 0.5) {
-				return Volume1
-			} else {
-				return Volume2
-			}
-		}
-
-		const VolumeIcon = getVolumeIcon()
-		const buttonSizes: Record<"md" | "lg" | "xl", string> = {
-			md: "h-11 w-11",
-			lg: "h-12 w-12",
-			xl: "h-14 w-14"
-		}
-		const iconSizes: Record<"md" | "lg" | "xl", string> = {
-			md: "h-5 w-5",
-			lg: "h-6 w-6",
-			xl: "h-7 w-7"
-		}
-		const sliderHeight: Record<"md" | "lg" | "xl", string> = {
-			md: "h-6",
-			lg: "h-7",
-			xl: "h-8"
-		}
-		const thumbSize: Record<"md" | "lg" | "xl", string> = {
-			md: "h-4 w-4",
-			lg: "h-4 w-4",
-			xl: "h-5 w-5"
-		}
-		const trackHeight: Record<"md" | "lg" | "xl", string> = {
-			md: "h-1.5",
-			lg: "h-2",
-			xl: "h-2.5"
-		}
-
-		return (
-			<div ref={ref} className={cn("flex items-center space-x-3 text-white", className)}>
-				<Tooltip.Provider>
-					<Tooltip.Root>
-						<Tooltip.Trigger asChild>
-							<button
-								type="button"
-								onClick={onToggleMute}
-								className={cn(
-									"inline-flex items-center justify-center rounded-lg bg-transparent p-0 text-white transition-all hover:text-cyan-700 active:scale-95",
-									"focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-black/20",
-									buttonSizes[size]
-								)}
-								aria-label={isMuted ? "Unmute" : "Mute"}>
-								<VolumeIcon className={cn(iconSizes[size])} />
-							</button>
-						</Tooltip.Trigger>
-						<Tooltip.Portal>
-							<Tooltip.Content
-								className={cn(
-									"rounded bg-black/80 px-2 py-1 text-sm text-white",
-									"fade-in-0 zoom-in-95 animate-in"
-								)}
-								sideOffset={5}>
-								{isMuted ? "Unmute" : "Mute"}
-								<Tooltip.Arrow className="fill-black/80" />
-							</Tooltip.Content>
-						</Tooltip.Portal>
-					</Tooltip.Root>
-				</Tooltip.Provider>
-
-				<div className="w-32">
-					<Slider.Root
-						className={cn(
-							"group relative flex w-full touch-none select-none items-center",
-							sliderHeight[size]
-						)}
-						value={[isMuted ? 0 : volume]}
-						max={1}
-						step={0.01}
-						onValueChange={([value]) => onVolumeChange(value ?? 0)}
-						aria-label="Volume">
-						<Slider.Track
-							className={cn(
-								"relative grow rounded-full bg-white/20 shadow-inner transition-all duration-300 group-hover:bg-white/30",
-								"border border-white/10",
-								trackHeight[size]
-							)}>
-							<Slider.Range className="absolute h-full rounded-full bg-white shadow-sm" />
-						</Slider.Track>
-						<Slider.Thumb
-							className={cn(
-								"block rounded-full border-2 border-white/20 bg-white shadow-lg",
-								"transition-all duration-300 ease-out hover:scale-110 hover:bg-white/95 active:scale-95",
-								"focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-black/20",
-								thumbSize[size]
-							)}
-							aria-label="Volume"
-						/>
-					</Slider.Root>
-				</div>
-
-				<span className="w-10 text-right text-sm text-white">
-					{Math.round((isMuted ? 0 : volume) * 100)}
-				</span>
-			</div>
-		)
-	}
-)
-
-VolumeControl.displayName = "VolumeControl"

package/dist/src/components/unified/base-media-player.d.ts

@@ -1,18 +0,0 @@
-/**
- * Base Media Player - Core unified functionality for video and audio
- * This consolidates the logic from MediaPlayer, VideoPlayer, and AudioPlayer
- */
-import type { MediaPlayerProps } from "../../types";
-export interface BaseMediaPlayerProps extends Omit<MediaPlayerProps, 'poster' | 'aspectRatio' | 'width' | 'height'> {
-    mediaType?: 'video' | 'audio' | 'auto';
-    poster?: string;
-    aspectRatio?: string;
-    width?: string | number;
-    height?: string | number;
-    enablePerformanceMonitoring?: boolean;
-    bufferingStrategy?: 'adaptive' | 'conservative' | 'aggressive';
-    preloadStrategy?: 'progressive' | 'eager' | 'lazy';
-    enableOptimizations?: boolean;
-}
-export declare const BaseMediaPlayer: import("react").ForwardRefExoticComponent<BaseMediaPlayerProps & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=base-media-player.d.ts.map