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 }>`