diff --git a/src/components/player/PlayerBar.tsx b/src/components/player/PlayerBar.tsx index 0151d28..d97099d 100644 --- a/src/components/player/PlayerBar.tsx +++ b/src/components/player/PlayerBar.tsx @@ -150,6 +150,23 @@ const PlayerBar = () => { } }; + const handleVolumeWheel = (e: any) => { + if (e.deltaY > 0) { + if (!isDraggingVolume) { + setIsDraggingVolume(true); + } + let vol = Number((playQueue.volume - 0.01).toFixed(2)); + vol = vol < 0 ? 0 : vol; + setLocalVolume(vol); + dispatch(setVolume(vol)); + } else { + let vol = Number((playQueue.volume + 0.01).toFixed(2)); + vol = vol > 1 ? 1 : vol; + setLocalVolume(vol); + dispatch(setVolume(vol)); + } + }; + const handleClickForward = () => { if (playQueue[currentEntryList].length > 0) { const seekForwardInterval = Number(settings.getSync('seekForwardInterval')); @@ -691,18 +708,30 @@ const PlayerBar = () => { } onClick={() => setMuted(!muted)} size="lg" - style={{ cursor: 'pointer', marginRight: '15px', padding: '0' }} - /> - + + {muted ? 'Muted' : Math.floor(localVolume * 100)} + + } + > + + diff --git a/src/components/player/styled.tsx b/src/components/player/styled.tsx index 82eabe3..800728c 100644 --- a/src/components/player/styled.tsx +++ b/src/components/player/styled.tsx @@ -114,6 +114,9 @@ export const DurationSpan = styled.span` export const VolumeIcon = styled(Icon)` color: ${(props) => props.theme.colors.layout.playerBar.color}; + cursor: pointer; + margin-right: 15px; + padding: 0; `; export const MiniViewContainer = styled.div<{ display: string }>`