Dangoware/dango-music-player
1
0
Fork 0
mirror of https://github.com/Dangoware/dango-music-player.git synced 2025-06-22 22:52:59 -05:00
Code Issues Projects Releases Packages Wiki Activity

Implement basic volume scrolling interaction

Browse source
This commit is contained in:
finsofblueimnotyou 2025-02-12 19:58:15 -05:00 committed by GitHub
parent a2637f4329
commit 23e411e78c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 427 additions and 417 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/App.tsx
View file

@ -310,6 +310,16 @@ function PlayBar({ playing, setPlaying }: PlayBarProps) {
invoke('seek', { time: Math.round(val * 1000) }).then()
};
const wheelVolume = (event: React.WheelEvent<HTMLDivElement>) => {
let x = volumeSlider.value;
if (event.deltaY < 0) {
volumeSlider.value++;
} else {
volumeSlider.value--;
}
invoke('set_volume', { volume: volumeSlider.value }).then(() => {})
};
return (
<section id="playBar" className="playBar unselectable">
<div className="seekBar" ref={ seekBarRef } onClick={ seek } onDrag={ seek }>
@ -328,7 +338,7 @@ function PlayBar({ playing, setPlaying }: PlayBarProps) {
<div className="bottomRight">
<button>🔀</button>
<button>🔁</button>
<input type="range" name="volume" id="volumeSlider" onChange={ (volume) => {
<input onWheel={wheelVolume} type="range" name="volume" id="volumeSlider" onChange={ (volume) => {
invoke('set_volume', { volume: volume.target.value }).then(() => {})
}} />
<p id="timeDisplay">