Implement basic volume scrolling interaction

This commit is contained in:
finsofblueimnotyou 2025-02-25 03:34:55 -05:00 committed by MrDulfin
parent 78413861ec
commit 2714d5f6f9
4 changed files with 35 additions and 20 deletions

5
.gitattributes vendored
View file

@ -1 +1,6 @@
* text=auto * text=auto
* text eol=lf
*.png binary
*.ico binary
*.icns binary

View file

@ -1,6 +1,6 @@
# Dango Music Player # Dango Music Player
![Dango Music Player logo](https://github.com/Dangoware/dango-music-player/blob/main/src-tauri/icons/128x128.png?raw=true)
![Dango Music Player logo](https://github.com/Dangoware/dango-music-player/blob/main/src-tauri/icons/icon.png)
### Dango Music Player is an easy to use Music Player for all users to enjoy their music! ### Dango Music Player is an easy to use Music Player for all users to enjoy their music!
## Features ## Features

34
dmp-core/.gitignore vendored
View file

@ -1,18 +1,18 @@
# Rust binary output dir # Rust binary output dir
target/ target/
test-config/ test-config/
# Rust configuration # Rust configuration
Cargo.lock Cargo.lock
.cargo/ .cargo/
# Database files # Database files
*.db3* *.db3*
music_database* music_database*
# Storage formats # Storage formats
*.kate-swp* *.kate-swp*
*.m3u *.m3u
*.m3u8 *.m3u8
*.json *.json
*.zip *.zip
*.xml *.xml

View file

@ -309,6 +309,16 @@ function PlayBar({ playing, setPlaying }: PlayBarProps) {
invoke('seek', { time: Math.round(val * 1000) }).then() 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 ( return (
<section id="playBar" className="playBar unselectable"> <section id="playBar" className="playBar unselectable">
@ -328,7 +338,7 @@ function PlayBar({ playing, setPlaying }: PlayBarProps) {
<div className="bottomRight"> <div className="bottomRight">
<button>🔀</button> <button>🔀</button>
<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(() => {}) invoke('set_volume', { volume: volume.target.value }).then(() => {})
}} /> }} />
<p id="timeDisplay"> <p id="timeDisplay">