@therealtinhtute/baroiplayer 1.0.8 → 1.1.0

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

@@ -5,60 +5,54 @@ import { cn } from "../../../lib/utils"
 import type { IconSet } from "../../icons"
 
 export interface MinimalOverlayProps {
-  visible: boolean
-  showCenterButton?: boolean
-  isPlaying?: boolean
-  icons: IconSet
-  onPlayPause?: () => void
-  className?: string
+	visible: boolean
+	showCenterButton?: boolean
+	isPlaying?: boolean
+	icons: IconSet
+	onPlayPause?: () => void
+	className?: string
 }
 
 export function MinimalOverlay({
-  visible,
-  showCenterButton = false,
-  isPlaying = false,
-  icons,
-  onPlayPause,
-  className,
+	visible,
+	showCenterButton = false,
+	isPlaying = false,
+	icons,
+	onPlayPause,
+	className
 }: MinimalOverlayProps) {
-  if (!visible || !showCenterButton) return null
+	if (!visible || !showCenterButton) return null
 
-  const PlayIcon = icons.play
-  const PauseIcon = icons.pause
+	const PlayIcon = icons.play
+	const PauseIcon = icons.pause
 
-  if (!PlayIcon || !PauseIcon) return null
+	if (!PlayIcon || !PauseIcon) return null
 
-  return (
-    <div
-      className={cn(
-        "absolute inset-0 z-30 flex items-center justify-center",
-        "bg-black/20 transition-opacity duration-200",
-        className
-      )}
-      onClick={onPlayPause}
-    >
-      <button
-        className={cn(
-          "minimal-center-play",
-          "h-20 w-20 rounded-full",
-          "flex items-center justify-center",
-          "text-white",
-          "transition-all duration-200",
-          "hover:scale-110",
-          "active:scale-95"
-        )}
-        onClick={(e) => {
-          e.stopPropagation()
-          onPlayPause?.()
-        }}
-        aria-label={isPlaying ? "Pause" : "Play"}
-      >
-        {isPlaying ? (
-          <PauseIcon size={48} />
-        ) : (
-          <PlayIcon size={48} className="ml-1" />
-        )}
-      </button>
-    </div>
-  )
+	return (
+		<div
+			className={cn(
+				"absolute inset-0 z-30 flex items-center justify-center",
+				"bg-black/20 transition-opacity duration-200",
+				className
+			)}
+			onClick={onPlayPause}>
+			<button
+				className={cn(
+					"minimal-center-play",
+					"h-20 w-20 rounded-full",
+					"flex items-center justify-center",
+					"text-white",
+					"transition-all duration-200",
+					"hover:scale-110",
+					"active:scale-95"
+				)}
+				onClick={(e) => {
+					e.stopPropagation()
+					onPlayPause?.()
+				}}
+				aria-label={isPlaying ? "Pause" : "Play"}>
+				{isPlaying ? <PauseIcon size={48} /> : <PlayIcon size={48} className="ml-1" />}
+			</button>
+		</div>
+	)
 }

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

@@ -1,65 +1,56 @@
 "use client"
 
 import React from "react"
-import { useMediaContext, useMediaDispatch, MediaActionTypes } from "../../../context/media-context"
+import { MediaActionTypes, useMediaContext, useMediaDispatch } from "../../../context/media-context"
 import { cn } from "../../../lib/utils"
 import type { IconSet } from "../../icons"
 
 export interface MinimalPlayButtonProps {
-  isPlaying: boolean
-  icons: IconSet
-  size?: "sm" | "md" | "lg" | "xl"
-  className?: string
+	isPlaying: boolean
+	icons: IconSet
+	size?: "sm" | "md" | "lg" | "xl"
+	className?: string
 }
 
 export function MinimalPlayButton({
-  isPlaying,
-  icons,
-  size = "md",
-  className,
+	isPlaying,
+	icons,
+	size = "md",
+	className
 }: MinimalPlayButtonProps) {
-  const dispatch = useMediaDispatch()
-  
-  const handleClick = () => {
-    dispatch({
-      type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
-    })
-  }
-
-  const sizeClasses = {
-    sm: "h-10 w-10",
-    md: "h-12 w-12 minimal-btn",
-    lg: "h-16 w-16 minimal-btn-lg",
-    xl: "h-20 w-20 minimal-btn-lg",
-  }
-
-  const iconSizes = {
-    sm: 27,
-    md: 30,
-    lg: 36,
-    xl: 42,
-  }
-
-  const PlayIcon = icons.play
-  const PauseIcon = icons.pause
-
-  if (!PlayIcon || !PauseIcon) return null
-
-  return (
-    <button
-      className={cn(
-        "minimal-btn",
-        sizeClasses[size],
-        className
-      )}
-      onClick={handleClick}
-      aria-label={isPlaying ? "Pause" : "Play"}
-    >
-      {isPlaying ? (
-        <PauseIcon size={iconSizes[size]} />
-      ) : (
-        <PlayIcon size={iconSizes[size]} />
-      )}
-    </button>
-  )
+	const dispatch = useMediaDispatch()
+
+	const handleClick = () => {
+		dispatch({
+			type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+		})
+	}
+
+	const sizeClasses = {
+		sm: "h-10 w-10",
+		md: "h-12 w-12 minimal-btn",
+		lg: "h-16 w-16 minimal-btn-lg",
+		xl: "h-20 w-20 minimal-btn-lg"
+	}
+
+	const iconSizes = {
+		sm: 27,
+		md: 30,
+		lg: 36,
+		xl: 42
+	}
+
+	const PlayIcon = icons.play
+	const PauseIcon = icons.pause
+
+	if (!PlayIcon || !PauseIcon) return null
+
+	return (
+		<button
+			className={cn("minimal-btn", sizeClasses[size], className)}
+			onClick={handleClick}
+			aria-label={isPlaying ? "Pause" : "Play"}>
+			{isPlaying ? <PauseIcon size={iconSizes[size]} /> : <PlayIcon size={iconSizes[size]} />}
+		</button>
+	)
 }

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

@@ -1,150 +1,140 @@
 "use client"
 
 import React, { useRef, useState } from "react"
-import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../../context/media-context"
+import {
+	MediaActionTypes,
+	useMediaDispatch,
+	useMediaSelector
+} from "../../../context/media-context"
 import { formatTime } from "../../../lib/format-time"
 import { cn } from "../../../lib/utils"
 
 export interface MinimalSeekBarProps {
-  thumbnails?: string
-  onSeek?: (time: number) => void
-  className?: string
+	thumbnails?: string
+	onSeek?: (time: number) => void
+	className?: string
 }
 
-export function MinimalSeekBar({
-  thumbnails,
-  onSeek,
-  className,
-}: MinimalSeekBarProps) {
-  const dispatch = useMediaDispatch()
-  const currentTime = useMediaSelector((state) => state.currentTime)
-  const duration = useMediaSelector((state) => state.duration)
-  const buffered = useMediaSelector((state) => state.buffered)
-  
-  const [isDragging, setIsDragging] = useState(false)
-  const [hoverTime, setHoverTime] = useState(0)
-  const [hoverPosition, setHoverPosition] = useState(0)
-  const seekBarRef = useRef<HTMLDivElement>(null)
-
-  const progress = duration > 0 ? (currentTime / duration) * 100 : 0
-  const bufferedProgress = buffered && buffered.length > 0 && duration > 0
-    ? (buffered.end(buffered.length - 1) / duration) * 100
-    : 0
-
-  const handleSeek = (clientX: number) => {
-    if (!seekBarRef.current || duration === 0) return
-    
-    const rect = seekBarRef.current.getBoundingClientRect()
-    const position = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))
-    const newTime = position * duration
-    
-    dispatch({
-      type: MediaActionTypes.SEEK,
-      detail: newTime
-    })
-    
-    onSeek?.(newTime)
-  }
-
-  const handleMouseDown = (e: React.MouseEvent) => {
-    e.preventDefault()
-    setIsDragging(true)
-    handleSeek(e.clientX)
-  }
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    if (!seekBarRef.current || duration === 0) return
-    
-    const rect = seekBarRef.current.getBoundingClientRect()
-    const position = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
-    const time = position * duration
-    
-    setHoverTime(time)
-    setHoverPosition((e.clientX - rect.left))
-    
-    if (isDragging) {
-      handleSeek(e.clientX)
-    }
-  }
-
-  const handleMouseUp = () => {
-    setIsDragging(false)
-  }
-
-  const handleMouseLeave = () => {
-    setIsDragging(false)
-    setHoverTime(0)
-  }
-
-  React.useEffect(() => {
-    if (isDragging) {
-      const handleGlobalMouseMove = (e: MouseEvent) => {
-        handleSeek(e.clientX)
-      }
-      
-      const handleGlobalMouseUp = () => {
-        setIsDragging(false)
-      }
-      
-      document.addEventListener("mousemove", handleGlobalMouseMove)
-      document.addEventListener("mouseup", handleGlobalMouseUp)
-      
-      return () => {
-        document.removeEventListener("mousemove", handleGlobalMouseMove)
-        document.removeEventListener("mouseup", handleGlobalMouseUp)
-      }
-    }
-  }, [isDragging])
-
-  return (
-    <div className={cn("group relative", className)}>
-      {/* Preview Tooltip */}
-      {hoverTime > 0 && (
-        <div
-          className="pointer-events-none absolute bottom-full z-50 mb-2"
-          style={{ left: `${hoverPosition}px`, transform: "translateX(-50%)" }}
-        >
-          {thumbnails && (
-            <div className="mb-1 rounded bg-black/90 p-1">
-              <div className="h-18 w-32 rounded bg-gray-800" />
-            </div>
-          )}
-          <div className="whitespace-nowrap rounded bg-black/90 px-2 py-1 text-white text-xs">
-            {formatTime(hoverTime)}
-          </div>
-        </div>
-      )}
-
-      {/* Seek Bar */}
-      <div
-        ref={seekBarRef}
-        className="minimal-seekbar"
-        onMouseDown={handleMouseDown}
-        onMouseMove={handleMouseMove}
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseLeave}
-      >
-        {/* Buffered Progress */}
-        <div
-          className="minimal-seekbar-buffered"
-          style={{ width: `${bufferedProgress}%` }}
-        />
-
-        {/* Progress */}
-        <div
-          className="minimal-seekbar-progress"
-          style={{ width: `${progress}%` }}
-        />
-
-        {/* Thumb */}
-        <div
-          className={cn(
-            "minimal-seekbar-thumb",
-            isDragging && "active"
-          )}
-          style={{ left: `${progress}%` }}
-        />
-      </div>
-    </div>
-  )
+export function MinimalSeekBar({ thumbnails, onSeek, className }: MinimalSeekBarProps) {
+	const dispatch = useMediaDispatch()
+	const currentTime = useMediaSelector((state) => state.currentTime)
+	const duration = useMediaSelector((state) => state.duration)
+	const buffered = useMediaSelector((state) => state.buffered)
+
+	const [isDragging, setIsDragging] = useState(false)
+	const [hoverTime, setHoverTime] = useState(0)
+	const [hoverPosition, setHoverPosition] = useState(0)
+	const seekBarRef = useRef<HTMLDivElement>(null)
+
+	const progress = duration > 0 ? (currentTime / duration) * 100 : 0
+	const bufferedProgress =
+		buffered && buffered.length > 0 && duration > 0
+			? (buffered.end(buffered.length - 1) / duration) * 100
+			: 0
+
+	const handleSeek = (clientX: number) => {
+		if (!seekBarRef.current || duration === 0) return
+
+		const rect = seekBarRef.current.getBoundingClientRect()
+		const position = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))
+		const newTime = position * duration
+
+		dispatch({
+			type: MediaActionTypes.SEEK,
+			detail: newTime
+		})
+
+		onSeek?.(newTime)
+	}
+
+	const handleMouseDown = (e: React.MouseEvent) => {
+		e.preventDefault()
+		setIsDragging(true)
+		handleSeek(e.clientX)
+	}
+
+	const handleMouseMove = (e: React.MouseEvent) => {
+		if (!seekBarRef.current || duration === 0) return
+
+		const rect = seekBarRef.current.getBoundingClientRect()
+		const position = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+		const time = position * duration
+
+		setHoverTime(time)
+		setHoverPosition(e.clientX - rect.left)
+
+		if (isDragging) {
+			handleSeek(e.clientX)
+		}
+	}
+
+	const handleMouseUp = () => {
+		setIsDragging(false)
+	}
+
+	const handleMouseLeave = () => {
+		setIsDragging(false)
+		setHoverTime(0)
+	}
+
+	React.useEffect(() => {
+		if (isDragging) {
+			const handleGlobalMouseMove = (e: MouseEvent) => {
+				handleSeek(e.clientX)
+			}
+
+			const handleGlobalMouseUp = () => {
+				setIsDragging(false)
+			}
+
+			document.addEventListener("mousemove", handleGlobalMouseMove)
+			document.addEventListener("mouseup", handleGlobalMouseUp)
+
+			return () => {
+				document.removeEventListener("mousemove", handleGlobalMouseMove)
+				document.removeEventListener("mouseup", handleGlobalMouseUp)
+			}
+		}
+	}, [isDragging])
+
+	return (
+		<div className={cn("group relative", className)}>
+			{/* Preview Tooltip */}
+			{hoverTime > 0 && (
+				<div
+					className="pointer-events-none absolute bottom-full z-50 mb-2"
+					style={{ left: `${hoverPosition}px`, transform: "translateX(-50%)" }}>
+					{thumbnails && (
+						<div className="mb-1 rounded bg-black/90 p-1">
+							<div className="h-18 w-32 rounded bg-gray-800" />
+						</div>
+					)}
+					<div className="whitespace-nowrap rounded bg-black/90 px-2 py-1 text-white text-xs">
+						{formatTime(hoverTime)}
+					</div>
+				</div>
+			)}
+
+			{/* Seek Bar */}
+			<div
+				ref={seekBarRef}
+				className="minimal-seekbar"
+				onMouseDown={handleMouseDown}
+				onMouseMove={handleMouseMove}
+				onMouseUp={handleMouseUp}
+				onMouseLeave={handleMouseLeave}>
+				{/* Buffered Progress */}
+				<div className="minimal-seekbar-buffered" style={{ width: `${bufferedProgress}%` }} />
+
+				{/* Progress */}
+				<div className="minimal-seekbar-progress" style={{ width: `${progress}%` }} />
+
+				{/* Thumb */}
+				<div
+					className={cn("minimal-seekbar-thumb", isDragging && "active")}
+					style={{ left: `${progress}%` }}
+				/>
+			</div>
+		</div>
+	)
 }

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

@@ -1,80 +1,75 @@
 "use client"
 
 import React, { useState } from "react"
-import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../../context/media-context"
+import {
+	MediaActionTypes,
+	useMediaDispatch,
+	useMediaSelector
+} from "../../../context/media-context"
 import { cn } from "../../../lib/utils"
 import type { IconSet } from "../../icons"
 
 export interface MinimalVolumeControlProps {
-  icons: IconSet
-  className?: string
+	icons: IconSet
+	className?: string
 }
 
-export function MinimalVolumeControl({
-  icons,
-  className,
-}: MinimalVolumeControlProps) {
-  const dispatch = useMediaDispatch()
-  const volume = useMediaSelector((state) => state.volume)
-  const isMuted = useMediaSelector((state) => state.isMuted)
-  const [isExpanded, setIsExpanded] = useState(false)
+export function MinimalVolumeControl({ icons, className }: MinimalVolumeControlProps) {
+	const dispatch = useMediaDispatch()
+	const volume = useMediaSelector((state) => state.volume)
+	const isMuted = useMediaSelector((state) => state.isMuted)
+	const [isExpanded, setIsExpanded] = useState(false)
 
-  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newVolume = parseFloat(e.target.value)
-    dispatch({
-      type: MediaActionTypes.SET_VOLUME,
-      detail: newVolume
-    })
-  }
+	const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const newVolume = parseFloat(e.target.value)
+		dispatch({
+			type: MediaActionTypes.SET_VOLUME,
+			detail: newVolume
+		})
+	}
 
-  const handleMuteToggle = () => {
-    dispatch({
-      type: MediaActionTypes.TOGGLE_MUTE
-    })
-  }
+	const handleMuteToggle = () => {
+		dispatch({
+			type: MediaActionTypes.TOGGLE_MUTE
+		})
+	}
 
-  const VolumeIcon = isMuted || volume === 0 ? icons.volumeMuted : icons.volume
+	const VolumeIcon = isMuted || volume === 0 ? icons.volumeMuted : icons.volume
 
-  if (!VolumeIcon) return null
+	if (!VolumeIcon) return null
 
-  return (
-    <div
-      className={cn(
-        "minimal-volume-group flex items-center gap-2",
-        className
-      )}
-      onMouseEnter={() => setIsExpanded(true)}
-      onMouseLeave={() => setIsExpanded(false)}
-    >
-      {/* Volume Button */}
-      <button
-        className="minimal-btn inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/20 bg-white/10 text-white transition-all duration-150 hover:border-white/30 hover:bg-white/20"
-        onClick={handleMuteToggle}
-        aria-label={isMuted ? "Unmute" : "Mute"}
-      >
-        <VolumeIcon size={18} />
-      </button>
+	return (
+		<div
+			className={cn("minimal-volume-group flex items-center gap-2", className)}
+			onMouseEnter={() => setIsExpanded(true)}
+			onMouseLeave={() => setIsExpanded(false)}>
+			{/* Volume Button */}
+			<button
+				className="minimal-btn inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/20 bg-white/10 text-white transition-all duration-150 hover:border-white/30 hover:bg-white/20"
+				onClick={handleMuteToggle}
+				aria-label={isMuted ? "Unmute" : "Mute"}>
+				<VolumeIcon size={18} />
+			</button>
 
-      {/* Volume Slider */}
-      <div
-        className={cn(
-          "overflow-hidden transition-all duration-250",
-          isExpanded ? "w-20 opacity-100" : "w-0 opacity-0"
-        )}
-      >
-        <input
-          type="range"
-          min="0"
-          max="1"
-          step="0.01"
-          value={isMuted ? 0 : volume}
-          onChange={handleVolumeChange}
-          className="minimal-volume-slider h-1 w-full cursor-pointer appearance-none rounded-full bg-white/20"
-          style={{
-            background: `linear-gradient(to right, rgb(59 130 246) 0%, rgb(59 130 246) ${(isMuted ? 0 : volume) * 100}%, rgba(255,255,255,0.2) ${(isMuted ? 0 : volume) * 100}%, rgba(255,255,255,0.2) 100%)`
-          }}
-        />
-      </div>
-    </div>
-  )
+			{/* Volume Slider */}
+			<div
+				className={cn(
+					"overflow-hidden transition-all duration-250",
+					isExpanded ? "w-20 opacity-100" : "w-0 opacity-0"
+				)}>
+				<input
+					type="range"
+					min="0"
+					max="1"
+					step="0.01"
+					value={isMuted ? 0 : volume}
+					onChange={handleVolumeChange}
+					className="minimal-volume-slider h-1 w-full cursor-pointer appearance-none rounded-full bg-white/20"
+					style={{
+						background: `linear-gradient(to right, rgb(59 130 246) 0%, rgb(59 130 246) ${(isMuted ? 0 : volume) * 100}%, rgba(255,255,255,0.2) ${(isMuted ? 0 : volume) * 100}%, rgba(255,255,255,0.2) 100%)`
+					}}
+				/>
+			</div>
+		</div>
+	)
 }