fix radio

This commit is contained in:
wass08
2026-02-24 12:46:33 +09:00
parent 28b44fe92d
commit db81a62722
+15 -9
View File
@@ -75,6 +75,15 @@ export function PascalRadio() {
// Calculate effective volume (masterVolume * radioVolume, both are 0-100) // Calculate effective volume (masterVolume * radioVolume, both are 0-100)
const effectiveVolume = (masterVolume / 100) * (radioVolume / 100) const effectiveVolume = (masterVolume / 100) * (radioVolume / 100)
// Keep a ref so the track-init effect can read current volume/muted/isPlaying
// without those values being part of its dependency array (which would restart the song).
const effectiveVolumeRef = useRef(effectiveVolume)
const mutedRef = useRef(muted)
const isPlayingRef = useRef(isPlaying)
effectiveVolumeRef.current = effectiveVolume
mutedRef.current = muted
isPlayingRef.current = isPlaying
const handleNext = useCallback(() => { const handleNext = useCallback(() => {
setCurrentTrackIndex((prev) => (prev + 1) % shuffledPlaylist.length) setCurrentTrackIndex((prev) => (prev + 1) % shuffledPlaylist.length)
}, [shuffledPlaylist.length]) }, [shuffledPlaylist.length])
@@ -83,32 +92,29 @@ export function PascalRadio() {
setCurrentTrackIndex((prev) => (prev - 1 + shuffledPlaylist.length) % shuffledPlaylist.length) setCurrentTrackIndex((prev) => (prev - 1 + shuffledPlaylist.length) % shuffledPlaylist.length)
}, [shuffledPlaylist.length]) }, [shuffledPlaylist.length])
// Initialize Howler when track changes // Initialize Howler only when the track changes — not on volume/mute/play-state changes.
// Volume and mute are handled by the separate effect below.
useEffect(() => { useEffect(() => {
// Clean up previous sound
if (soundRef.current) { if (soundRef.current) {
soundRef.current.unload() soundRef.current.unload()
} }
const wasPlaying = isPlaying const wasPlaying = isPlayingRef.current
// Create new sound
soundRef.current = new Howl({ soundRef.current = new Howl({
src: [currentTrack.file], src: [currentTrack.file],
volume: muted ? 0 : effectiveVolume, volume: mutedRef.current ? 0 : effectiveVolumeRef.current,
onend: handleNext, onend: handleNext,
}) })
// If was playing, play new track if (wasPlaying && !mutedRef.current) {
if (wasPlaying && !muted) {
soundRef.current?.play() soundRef.current?.play()
} }
return () => { return () => {
soundRef.current?.unload() soundRef.current?.unload()
} }
// eslint-disable-next-line react-hooks/exhaustive-deps }, [handleNext, currentTrack.file])
}, [handleNext, currentTrack.file, muted, isPlaying, effectiveVolume])
// Update volume when settings change // Update volume when settings change
useEffect(() => { useEffect(() => {