{"version":3,"file":"index-BIlTQ25Q.mjs","sources":["../../src/hooks/useAudioPlayer.ts","../../src/renderers/Audio/index.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useCallback } from 'react';\n\ninterface UseAudioPlayerOptions {\n url: string;\n skipSeconds?: number;\n}\n\ninterface UseAudioPlayerReturn {\n audioRef: React.RefObject;\n isPlaying: boolean;\n isLoading: boolean;\n isLoop: boolean;\n currentTime: number;\n duration: number;\n volume: number;\n isMuted: boolean;\n error: string | null;\n togglePlay: () => void;\n seek: (time: number) => void;\n skip: (seconds: number) => void;\n setVolume: (vol: number) => void;\n toggleMute: () => void;\n toggleLoop: () => void;\n formatTime: (time: number) => string;\n}\n\nexport function useAudioPlayer({\n url,\n}: UseAudioPlayerOptions): UseAudioPlayerReturn {\n const audioRef = useRef(null);\n const [isPlaying, setIsPlaying] = useState(false);\n const [isLoading, setIsLoading] = useState(true);\n const [currentTime, setCurrentTime] = useState(0);\n const [duration, setDuration] = useState(0);\n const [volume, setVolumeState] = useState(1);\n const [isMuted, setIsMuted] = useState(false);\n const [isLoop, setIsLoop] = useState(false);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n const audio = audioRef.current;\n if (!audio) return;\n\n // 重置加载状态\n setIsLoading(true);\n setError(null);\n\n const onTimeUpdate = () => {\n if (!isNaN(audio.currentTime)) {\n setCurrentTime(audio.currentTime);\n }\n };\n\n const onDurationChange = () => {\n if (!isNaN(audio.duration) && isFinite(audio.duration)) {\n setDuration(audio.duration);\n }\n };\n\n const onCanPlay = () => {\n setIsLoading(false);\n onDurationChange();\n };\n\n const onWaiting = () => setIsLoading(true);\n const onPlaying = () => {\n setIsLoading(false);\n setIsPlaying(true);\n };\n\n // 由 audio 事件驱动播放状态，而非手动设置\n const onPlay = () => setIsPlaying(true);\n const onPause = () => setIsPlaying(false);\n const onEnded = () => setIsPlaying(false);\n\n const onError = () => {\n setError('音频加载失败');\n setIsLoading(false);\n };\n\n audio.addEventListener('timeupdate', onTimeUpdate);\n audio.addEventListener('loadedmetadata', onDurationChange);\n audio.addEventListener('durationchange', onDurationChange);\n audio.addEventListener('canplay', onCanPlay);\n audio.addEventListener('waiting', onWaiting);\n audio.addEventListener('playing', onPlaying);\n audio.addEventListener('play', onPlay);\n audio.addEventListener('pause', onPause);\n audio.addEventListener('ended', onEnded);\n audio.addEventListener('error', onError);\n\n // 如果 audio 已经就绪\n if (audio.readyState >= 3) {\n setIsLoading(false);\n onDurationChange();\n } else if (audio.readyState >= 1) {\n onDurationChange();\n }\n\n return () => {\n audio.removeEventListener('timeupdate', onTimeUpdate);\n audio.removeEventListener('loadedmetadata', onDurationChange);\n audio.removeEventListener('durationchange', onDurationChange);\n audio.removeEventListener('canplay', onCanPlay);\n audio.removeEventListener('waiting', onWaiting);\n audio.removeEventListener('playing', onPlaying);\n audio.removeEventListener('play', onPlay);\n audio.removeEventListener('pause', onPause);\n audio.removeEventListener('ended', onEnded);\n audio.removeEventListener('error', onError);\n };\n }, [url]);\n\n const togglePlay = useCallback(() => {\n const audio = audioRef.current;\n if (!audio) return;\n\n if (audio.paused) {\n audio.play().catch(() => {\n // 浏览器自动播放策略拒绝\n });\n } else {\n audio.pause();\n }\n }, []);\n\n const seek = useCallback((time: number) => {\n const audio = audioRef.current;\n if (!audio) return;\n audio.currentTime = time;\n setCurrentTime(time);\n }, []);\n\n const skip = useCallback(\n (seconds: number) => {\n const audio = audioRef.current;\n if (!audio) return;\n audio.currentTime = Math.max(\n 0,\n Math.min(audio.currentTime + seconds, audio.duration || Infinity)\n );\n },\n []\n );\n\n const setVolume = useCallback((vol: number) => {\n const audio = audioRef.current;\n if (!audio) return;\n const clamped = Math.max(0, Math.min(1, vol));\n audio.volume = clamped;\n setVolumeState(clamped);\n if (clamped > 0) {\n audio.muted = false;\n setIsMuted(false);\n }\n }, []);\n\n const toggleMute = useCallback(() => {\n const audio = audioRef.current;\n if (!audio) return;\n audio.muted = !audio.muted;\n setIsMuted(audio.muted);\n }, []);\n\n const toggleLoop = useCallback(() => {\n const audio = audioRef.current;\n if (!audio) return;\n const next = !audio.loop;\n audio.loop = next;\n setIsLoop(next);\n }, []);\n\n const formatTime = useCallback((time: number) => {\n if (!isFinite(time) || isNaN(time) || time < 0) return '0:00';\n const minutes = Math.floor(time / 60);\n const seconds = Math.floor(time % 60);\n return `${minutes}:${seconds.toString().padStart(2, '0')}`;\n }, []);\n\n return {\n audioRef,\n isPlaying,\n isLoading,\n isLoop,\n currentTime,\n duration,\n volume,\n isMuted,\n error,\n togglePlay,\n seek,\n skip,\n setVolume,\n toggleMute,\n toggleLoop,\n formatTime,\n };\n}\n","import { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Play, Pause, Volume2, VolumeX, Volume1, SkipBack, SkipForward, Repeat } from 'lucide-react';\nimport { useAudioPlayer } from '../../hooks/useAudioPlayer';\nimport { useTranslator } from '../../i18n/LocaleContext';\nimport { RendererError } from '../RendererError';\nimport type { RendererHandle } from '../base.types';\n\n/** 文本溢出时自动横向滚动 */\nconst MarqueeText: React.FC<{\n text: string;\n className?: string;\n style?: React.CSSProperties;\n}> = ({ text, className = '', style }) => {\n const containerRef = useRef(null);\n const innerRef = useRef(null);\n const [overflow, setOverflow] = useState(false);\n const [scrollDist, setScrollDist] = useState(0);\n\n useEffect(() => {\n const check = () => {\n const container = containerRef.current;\n const inner = innerRef.current;\n if (!container || !inner) return;\n const cw = container.clientWidth;\n const tw = inner.scrollWidth;\n setOverflow(tw > cw);\n setScrollDist(tw);\n };\n check();\n const observer = new ResizeObserver(check);\n if (containerRef.current) observer.observe(containerRef.current);\n return () => observer.disconnect();\n }, [text]);\n\n const gap = 60;\n const totalScroll = scrollDist + gap;\n const dur = totalScroll / 40;\n\n return (\n \n {overflow ? (\n \n {text}\n \n {text}\n \n ) : null}\n {/* 始终渲染用于测量的隐藏层 */}\n \n {text}\n \n \n );\n};\n\n/** SVG 唱臂组件 */\nconst Tonearm: React.FC<{ isPlaying: boolean }> = ({ isPlaying }) => (\n \n \n {/* 底座阴影 */}\n \n {/* 底座外圈 */}\n \n {/* 底座内圈 */}\n \n {/* 底座中心轴 */}\n \n\n {/* 臂杆 */}\n \n {/* 臂杆高光 */}\n \n\n {/* 唱头座 (Headshell) */}\n \n {/* 唱头 (Cartridge) */}\n \n {/* 唱针 (Stylus) */}\n \n \n\n {/* 渐变定义 */}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\ninterface AudioRendererProps {\n url: string;\n fileName: string;\n}\n\nexport const AudioRenderer = forwardRef(({ url, fileName }, ref) => {\n const t = useTranslator();\n const {\n audioRef,\n isPlaying,\n isLoading,\n isLoop,\n currentTime,\n duration,\n volume,\n isMuted,\n error,\n togglePlay,\n seek,\n skip,\n setVolume,\n toggleMute,\n toggleLoop,\n formatTime,\n } = useAudioPlayer({ url });\n\n const [showVolume, setShowVolume] = useState(false);\n const [isCompact, setIsCompact] = useState(false);\n const [controlScale, setControlScale] = useState(1);\n const [isDragging, setIsDragging] = useState(false);\n const [dragTime, setDragTime] = useState(0);\n const containerRef = useRef(null);\n const volumeRef = useRef(null);\n const volumeTimerRef = useRef>();\n\n const displayTime = isDragging ? dragTime : currentTime;\n const progress = duration > 0 ? displayTime / duration : 0;\n\n // 监听容器尺寸，自适应调整布局\n useEffect(() => {\n const checkSize = () => {\n if (containerRef.current) {\n const height = containerRef.current.clientHeight;\n const width = containerRef.current.clientWidth;\n // 高度小于 580px 时启用紧凑模式\n setIsCompact(height < 580);\n // 控制面板宽度自适应缩放\n // 基础宽度 448px (max-w-md)，最小视觉宽度 320px，即最小 scale ≈ 0.714\n const baseWidth = 464; // 448 + 左右各 8px 呼吸空间\n const minVisualWidth = 320;\n const minScale = minVisualWidth / baseWidth;\n const scale = width >= baseWidth\n ? 1\n : Math.max(minScale, width / baseWidth);\n setControlScale(scale);\n }\n };\n checkSize();\n const observer = new ResizeObserver(checkSize);\n if (containerRef.current) {\n observer.observe(containerRef.current);\n }\n return () => observer.disconnect();\n }, []);\n\n useEffect(() => {\n const handleClickOutside = (e: MouseEvent) => {\n if (volumeRef.current && !volumeRef.current.contains(e.target as Node)) {\n setShowVolume(false);\n }\n };\n if (showVolume) {\n document.addEventListener('mousedown', handleClickOutside);\n }\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [showVolume]);\n\n const handleVolumeEnter = () => {\n clearTimeout(volumeTimerRef.current);\n setShowVolume(true);\n };\n\n const handleVolumeLeave = () => {\n volumeTimerRef.current = setTimeout(() => setShowVolume(false), 300);\n };\n\n const VolumeIcon = isMuted || volume === 0 ? VolumeX : volume < 0.5 ? Volume1 : Volume2;\n\n // 暴露接口给父组件\n useImperativeHandle(ref, () => ({\n getToolbarGroups: () => [],\n }), []);\n\n if (error) {\n return ;\n }\n\n // 根据紧凑模式动态计算尺寸\n const vinylScale = isCompact ? 0.72 : 1;\n const vinylBase = 260;\n const vinylHeightBase = 240;\n\n // 唱片跟随控制面板同步缩放，避免头重脚轻\n const finalVinylScale = vinylScale * controlScale;\n\n return (\n \n {/* 唱片机整体 */}\n \n {/* 外圈光晕 */}\n \n\n {/* 唱片主体 */}\n \n {/* 中心标签 */}\n \n \n \n \n\n {isLoading && (\n \n )}\n \n\n {/* 唱臂 */}\n \n \n\n {/* 文件名 */}\n
\n \n
\n\n {/* 控制面板 wrapper：按容器宽度整体缩放，保底视觉宽度 320px */}\n \n \n {/* 进度条 */}\n
\n
\n
\n \n 0 ? duration : currentTime || 100}\n step=\"any\"\n value={displayTime}\n onPointerDown={() => {\n setDragTime(currentTime);\n setIsDragging(true);\n }}\n onChange={(e) => {\n const value = parseFloat(e.target.value);\n if (isDragging) {\n setDragTime(value);\n } else {\n seek(value);\n }\n }}\n onPointerUp={(e) => {\n const value = parseFloat((e.target as HTMLInputElement).value);\n seek(value);\n setIsDragging(false);\n }}\n onPointerCancel={() => setIsDragging(false)}\n disabled={duration <= 0}\n aria-label={t('audio.aria.progress')}\n className=\"audio-slider rfp-absolute rfp-w-full\"\n />\n
\n
\n {formatTime(displayTime)}\n {duration > 0 ? formatTime(duration) : '--:--'}\n
\n
\n\n {/* 控制按钮 */}\n
\n {/* 循环 */}\n \n \n \n\n {/* 后退 */}\n skip(-10)}\n whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 0.92 }}\n aria-label={t('audio.aria.backward_10')}\n className={`rfp-rounded-full rfp-flex rfp-items-center rfp-justify-center rfp-transition-colors rfp-bg-surface-2 rfp-text-fg-secondary rfp-flex-shrink-0 ${\n isCompact ? 'rfp-w-9 rfp-h-9' : 'rfp-w-10 rfp-h-10'\n }`}\n >\n \n \n\n {/* 播放/暂停 */}\n \n {isPlaying ? (\n \n ) : (\n \n )}\n \n\n {/* 前进 */}\n skip(10)}\n whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 0.92 }}\n aria-label={t('audio.aria.forward_10')}\n className={`rfp-rounded-full rfp-flex rfp-items-center rfp-justify-center rfp-transition-colors rfp-bg-surface-2 rfp-text-fg-secondary rfp-flex-shrink-0 ${\n isCompact ? 'rfp-w-9 rfp-h-9' : 'rfp-w-10 rfp-h-10'\n }`}\n >\n \n \n\n {/* 音量 */}\n \n \n \n \n\n \n {showVolume && (\n \n
\n
\n \n \n setVolume(parseFloat(e.target.value))}\n aria-label={t('audio.aria.volume')}\n className=\"volume-slider-vertical rfp-absolute\"\n style={{\n width: '80px',\n height: '24px',\n transform: 'rotate(-90deg)',\n transformOrigin: 'center center',\n }}\n />\n
\n \n {Math.round((isMuted ? 0 : volume) * 100)}\n \n
\n \n )}\n \n
\n
\n \n {/* wrapper 闭合 */}\n \n\n