Browse Source

Add volume slider improvements (#112)

- Tooltip volume value
- Hover mouse wheel control
master
jeffvli 3 years ago
committed by Jeff
parent
commit
e98106c5e5
  1. 51
      src/components/player/PlayerBar.tsx
  2. 3
      src/components/player/styled.tsx

51
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 = () => { const handleClickForward = () => {
if (playQueue[currentEntryList].length > 0) { if (playQueue[currentEntryList].length > 0) {
const seekForwardInterval = Number(settings.getSync('seekForwardInterval')); const seekForwardInterval = Number(settings.getSync('seekForwardInterval'));
@ -691,18 +708,30 @@ const PlayerBar = () => {
} }
onClick={() => setMuted(!muted)} onClick={() => setMuted(!muted)}
size="lg" size="lg"
style={{ cursor: 'pointer', marginRight: '15px', padding: '0' }}
/>
<CustomSlider
tabIndex={0}
progress
value={Math.floor(localVolume * 100)}
$isDragging={isDraggingVolume}
tooltip={false}
style={{ width: '100px', marginRight: '10px' }}
onChange={handleVolumeSlider}
onKeyDown={handleVolumeKey}
/> />
<Whisper
trigger="hover"
placement="top"
delay={200}
preventOverflow
speaker={
<StyledPopover>
{muted ? 'Muted' : Math.floor(localVolume * 100)}
</StyledPopover>
}
>
<CustomSlider
tabIndex={0}
progress
value={Math.floor(localVolume * 100)}
$isDragging={isDraggingVolume}
tooltip={false}
style={{ width: '100px', marginRight: '10px' }}
onChange={handleVolumeSlider}
onKeyDown={handleVolumeKey}
onWheel={handleVolumeWheel}
/>
</Whisper>
</Row> </Row>
</Grid> </Grid>
</PlayerColumn> </PlayerColumn>

3
src/components/player/styled.tsx

@ -114,6 +114,9 @@ export const DurationSpan = styled.span`
export const VolumeIcon = styled(Icon)` export const VolumeIcon = styled(Icon)`
color: ${(props) => props.theme.colors.layout.playerBar.color}; color: ${(props) => props.theme.colors.layout.playerBar.color};
cursor: pointer;
margin-right: 15px;
padding: 0;
`; `;
export const MiniViewContainer = styled.div<{ display: string }>` export const MiniViewContainer = styled.div<{ display: string }>`

Loading…
Cancel
Save