From 3c5bc1a12c064e7914637622d4c86293308abfcb Mon Sep 17 00:00:00 2001 From: Lachezar Lechev Date: Fri, 21 Mar 2025 20:55:34 +0200 Subject: [PATCH] chore: ControlBar & VolumeChangeIndicator show volume=0 with muted icon Signed-off-by: Lachezar Lechev --- src/routes/Player/ControlBar/ControlBar.js | 7 ++++--- .../VolumeChangeIndicator/VolumeChangeIndicator.js | 9 +++++---- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js index 745e2bd49..f31c708ac 100644 --- a/src/routes/Player/ControlBar/ControlBar.js +++ b/src/routes/Player/ControlBar/ControlBar.js @@ -129,9 +129,10 @@ const ControlBar = ({ name={ (typeof muted === 'boolean' && muted) ? 'volume-mute' : (volume === null || isNaN(volume)) ? 'volume-off' : - volume < 30 ? 'volume-low' : - volume < 70 ? 'volume-medium' : - 'volume-high' + volume === 0 ? 'volume-mute' : + volume < 30 ? 'volume-low' : + volume < 70 ? 'volume-medium' : + 'volume-high' } /> diff --git a/src/routes/Player/VolumeChangeIndicator/VolumeChangeIndicator.js b/src/routes/Player/VolumeChangeIndicator/VolumeChangeIndicator.js index cfba89c59..979106a55 100644 --- a/src/routes/Player/VolumeChangeIndicator/VolumeChangeIndicator.js +++ b/src/routes/Player/VolumeChangeIndicator/VolumeChangeIndicator.js @@ -14,11 +14,12 @@ const VolumeChangeIndicator = React.memo(({ muted, volume }) => { const prevVolume = React.useRef(volume); const iconName = React.useMemo(() => { - return typeof muted === 'boolean' && muted ? 'volume-mute' : + return (typeof muted === 'boolean' && muted) ? 'volume-mute' : volume === null || isNaN(volume) ? 'volume-off' : - volume < 30 ? 'volume-low' : - volume < 70 ? 'volume-medium' : - 'volume-high'; + volume === 0 ? 'volume-mute' : + volume < 30 ? 'volume-low' : + volume < 70 ? 'volume-medium' : + 'volume-high'; }, [muted, volume]); React.useEffect(() => {