Dangoware/dango-music-player
1
0
Fork 0
mirror of https://github.com/Dangoware/dango-music-player.git synced 2025-05-07 10:12:54 -05:00
Code Issues Projects Releases Packages Wiki Activity

Implement basic volume scrolling interaction

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.gitattributes vendored
View file

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

2
README.md
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

12
src/App.tsx
View file

@ -310,6 +310,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">
<div className="seekBar" ref={ seekBarRef } onClick={ seek } onDrag={ seek }> <div className="seekBar" ref={ seekBarRef } onClick={ seek } onDrag={ seek }>
@ -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">