Merge pull request #1073 from ciderapp/enhancement/playbackrate-slider-wheel

Implement wheel support for playback rate slider

src/main/base/store.ts

@@ -133,7 +133,7 @@ export class Store {
             "maxVolume": 1,
             "lastVolume": 1,
             "muted": false,
-            "playbackRate": '1',
+            "playbackRate": 1,
             "quality": "HIGH",
             "seamless_audio": true,
             "normalization": false,

src/preload/cider-preload.js

@@ -39,8 +39,7 @@ const MusicKitInterop = {
 			}
 
 			if (MusicKit.getInstance().nowPlayingItem) {
-				await this.sleep(1000);
+				await this.sleep(750);
-				console.log("Auto-updating Playback Rate from " + MusicKit.getInstance().playbackRate + " x to " + app.cfg.audio.playbackRate + " x");
 				MusicKit.getInstance().playbackRate = app.cfg.audio.playbackRate;
 			}
 		});

src/renderer/views/components/audio-playbackrate.ejs

@@ -15,7 +15,7 @@
                         {{playbackRate}} ×
                     </div>
                     <div class="md-option-segment md-option-segment_auto">
-                        <input type="range" :step="0.05" min="0.25" :max="2" v-model="playbackRate">
+                        <input type="range" :step="0.05" min="0.25" :max="2" @wheel="playbackRateWheel" v-model="playbackRate">
                     </div>
                 </div>
             </div>
@@ -34,10 +34,26 @@
 		},
 		watch: {
 			playbackRate: function (newValue, _oldValue) {
-				this.$root.mk.playbackRate = newValue
+                this.saveValue(newValue);
-                this.$root.cfg.audio.playbackRate = newValue
-				this.playbackRate = newValue
 			}
-		}
+		},
+        methods: {
+            playbackRateWheel(event) {
+                if (app.checkScrollDirectionIsUp(event)) {
+                    this.saveValue(this.$root.cfg.audio.playbackRate + 0.05);
+                } else {
+                    this.saveValue(this.$root.cfg.audio.playbackRate - 0.05);
+                }
+            },
+            saveValue(newValue) {
+                newValue = Number(newValue);
+                if (newValue >= 0.25 && newValue <= 2) {
+                    newValue = String(newValue).length > 4 ? newValue.toFixed(2) : newValue;
+                    this.$root.mk.playbackRate = newValue;
+                    this.$root.cfg.audio.playbackRate = newValue;
+                    this.playbackRate = newValue;
+                }
+            }
+        }
 	});
 </script>