Implement basic volume scrolling interaction

.gitattributes

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

README.md

@@ -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!
 
 ## Features

dmp-core/.gitignore

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

src/App.tsx

@@ -309,6 +309,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">
@@ -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">