diff --git a/App.tsx b/App.tsx index 1a2bf0e..5233de8 100644 --- a/App.tsx +++ b/App.tsx @@ -707,17 +707,21 @@ function AppContent() { ? (Number(status.progress) > 1 ? Number(status.progress) / 100 : Number(status.progress)) : undefined; - setSongs(prev => prev.map(s => { - if (s.id === tempId) { - return { - ...s, - queuePosition: status.status === 'queued' ? status.queuePosition : undefined, - progress: normalizedProgress ?? s.progress, - stage: status.stage ?? s.stage, - }; + setSongs(prev => { + const song = prev.find(s => s.id === tempId); + if (!song) return prev; + const newQueuePos = status.status === 'queued' ? status.queuePosition : undefined; + const newProgress = normalizedProgress ?? song.progress; + const newStage = status.stage ?? song.stage; + // Skip update if nothing changed to avoid unnecessary re-renders + if (newProgress === song.progress && newStage === song.stage && newQueuePos === song.queuePosition) { + return prev; } - return s; - })); + return prev.map(s => { + if (s.id !== tempId) return s; + return { ...s, queuePosition: newQueuePos, progress: newProgress, stage: newStage }; + }); + }); if (status.status === 'succeeded' && status.result) { cleanupJob(jobId, tempId); diff --git a/components/Player.tsx b/components/Player.tsx index 331abbb..2fd3950 100644 --- a/components/Player.tsx +++ b/components/Player.tsx @@ -69,6 +69,7 @@ export const Player: React.FC = ({ const progressBarRef = useRef(null); const fullscreenProgressRef = useRef(null); const [isHoveringVolume, setIsHoveringVolume] = useState(false); + const volumeHideTimer = useRef | null>(null); const [showDropdown, setShowDropdown] = useState(false); const [isFullscreen, setIsFullscreen] = useState(false); const [shareModalOpen, setShareModalOpen] = useState(false); @@ -755,8 +756,13 @@ export const Player: React.FC = ({ {/* Volume Control with Vertical Slider */}
setIsHoveringVolume(true)} - onMouseLeave={() => setIsHoveringVolume(false)} + onMouseEnter={() => { + if (volumeHideTimer.current) clearTimeout(volumeHideTimer.current); + setIsHoveringVolume(true); + }} + onMouseLeave={() => { + volumeHideTimer.current = setTimeout(() => setIsHoveringVolume(false), 400); + }} >