Added Playback Rate functionality (#933)

* Add () to openAudioControls function call

* Duplicate new placeholder modal

* Add to app.modals

* Make modal do something

* Changed input to slider

* Change i18n string name and remove con.log

* Finalized i18n strings

* Add to store.ts and update i18n hehe

* Save rate to cfg

* fuck off

* AAHH

* Make auto-set more reliable

* no nightcore stuff here

Co-authored-by: cryptofyre <cryptofyre@cryptofyre.org>

src/i18n/README.md

@@ -271,6 +271,12 @@ Update 22/04/2022 16:00 UTC
 
 * `settings.option.visual.theme.github.openfolder`: Added for `en_US`
 
+Update 24/04/2022 19:00 UTC
+
+* `settings.option.audio.changePlaybackRate`: Added for `en_US`
+* `settings.option.audio.playbackRate`: Added for `en_US`
+* `settings.option.audio.playbackRate.change`: Added for `en_US`
+
 Update 25/04/2022 00:21 UTC
 
 *  `settings.description.search`: Added for `en_US`
@@ -284,4 +290,3 @@ Update 25/04/2022 00:21 UTC
 *  `settings.description.cast`: Added for `en_US`
 *  `settings.description.settings`: Added for `en_US`
 *  `settings.description.developer`: Added for `en_US`
-

src/i18n/en_US.json

@@ -300,6 +300,9 @@
   "settings.header.audio.description": "Adjust the audio settings for Cider.",
   "settings.option.audio.volumeStep": "Volume Step",
   "settings.option.audio.maxVolume": "Max Volume",
+  "settings.option.audio.changePlaybackRate": "Change Playback Rate",
+  "settings.option.audio.playbackRate": "Playback Rate",
+  "settings.option.audio.playbackRate.change": "Change",
   "settings.option.audio.quality": "Audio Quality",
   "settings.header.audio.quality.hireslossless": "Hi-Res Lossless",
   "settings.header.audio.quality.hireslossless.description": "up to 24-bit/192 kHz",

src/i18n/hu_HU.json

@@ -289,6 +289,9 @@
   "settings.header.audio.description": "A Cider hangbeállításainak módosítása.",
   "settings.option.audio.volumeStep": "Hangerő lépték",
   "settings.option.audio.maxVolume": "Maximum hangerő",
+  "settings.option.audio.changePlaybackRate": "Lejátszási sebesség módosítása",
+  "settings.option.audio.playbackRate": "Sebesség",
+  "settings.option.audio.playbackRate.change": "Módosítás",
   "settings.option.audio.quality": "Hangminőség",
   "settings.header.audio.quality.hireslossless": "Nagy felbontású veszteségmentes",
   "settings.header.audio.quality.hireslossless.description": "max. 24-bit/192 kHz sebességen",

src/i18n/source/en_US.json

@@ -300,6 +300,9 @@
   "settings.header.audio.description": "Adjust the audio settings for Cider.",
   "settings.option.audio.volumeStep": "Volume Step",
   "settings.option.audio.maxVolume": "Max Volume",
+  "settings.option.audio.changePlaybackRate": "Change Playback Rate",
+  "settings.option.audio.playbackRate": "Playback Rate",
+  "settings.option.audio.playbackRate.change": "Change",
   "settings.option.audio.quality": "Audio Quality",
   "settings.header.audio.quality.hireslossless": "Hi-Res Lossless",
   "settings.header.audio.quality.hireslossless.description": "up to 24-bit/192 kHz",

src/main/base/browserwindow.ts

@@ -72,6 +72,7 @@ export class BrowserWindow {
                 "components/audio-settings",
                 "components/plugin-menu",
                 "components/audio-controls",
+                "components/audio-playbackrate",
                 "components/qrcode-modal",
                 "components/moreinfo-modal",
                 "components/equalizer",

src/main/base/store.ts

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

src/preload/cider-preload.js

@@ -37,6 +37,12 @@ const MusicKitInterop = {
 			if (trackFilter || !app.cfg.lastfm.filterLoop) {
 				global.ipcRenderer.send('nowPlayingItemDidChangeLastFM', attributes);
 			}
+
+			if (MusicKit.getInstance().nowPlayingItem) {
+				await this.sleep(1000);
+				console.log("Auto-updating Playback Rate from " + MusicKit.getInstance().playbackRate + " x to " + app.cfg.audio.playbackRate + " x");
+				MusicKit.getInstance().playbackRate = app.cfg.audio.playbackRate;
+			}
 		});
 
 		MusicKit.getInstance().addEventListener(MusicKit.Events.authorizationStatusDidChange, () => {
@@ -47,6 +53,13 @@ const MusicKitInterop = {
 			console.warn(`[mediaPlaybackError] ${e}`);
 		})
 	},
+
+	sleep(ms) {
+		return new Promise((resolve) => {
+		  setTimeout(resolve, ms);
+		});
+	},
+
 	async modifyNamesOnLocale() {
 		if (app.mklang === '' || app.mklang == null) {
 			return;

src/renderer/main/vueapp.js

@@ -203,6 +203,7 @@ const app = new Vue({
             audioSettings: false,
             pluginMenu: false,
             audioControls: false,
+            audioPlaybackRate: false,
             showPlaylist: false,
             castMenu: false,
             moreInfo: false,

src/renderer/style.css

@@ -12954,6 +12954,10 @@ body[platform='darwin'] .app-chrome .app-chrome-item > .app-mainmenu {
 .percent::after {
   content: '%';
 }
+.playbackrate-text {
+  align-items: end;
+  margin-right: 5px;
+}
 .spatialproperties-panel.modal-fullscreen {
   flex-direction: column;
 }

src/renderer/style.less

@@ -3294,6 +3294,11 @@ body[platform='darwin'] {
   content: '%';
 }
 
+.playbackrate-text {
+  align-items: end;
+  margin-right: 5px;
+}
+
 .modal .close {
   color: transparent;
 }

src/renderer/views/app/panels.ejs

@@ -19,6 +19,9 @@
 <transition name="modal">
     <audio-controls v-if="modals.audioControls"></audio-controls>
 </transition>
+<transition name="modal">
+    <audio-playbackrate v-if="modals.audioPlaybackRate"></audio-playbackrate>
+</transition>
 <transition name="modal">
     <audio-settings v-if="modals.audioSettings"></audio-settings>
 </transition>

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

@@ -0,0 +1,43 @@
+<script type="text/x-template" id="audio-playbackrate">
+    <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()"
+         @contextmenu.self="app.resetState()">
+        <div class="modal-window">
+            <div class="modal-header">
+                <div class="modal-title">{{app.getLz('settings.option.audio.changePlaybackRate')}}</div>
+                <button class="close-btn" @click="app.resetState()"></button>
+            </div>
+            <div class="modal-content">
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        {{app.getLz('settings.option.audio.playbackRate')}}
+                    </div>
+                    <div class="md-option-segment playbackrate-text" v-if="this.playbackRate">
+                        {{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">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</script>
+
+<script>
+	Vue.component('audio-playbackrate', {
+		template: '#audio-playbackrate',
+		data: function () {
+			return {
+				app: this.$root,
+				playbackRate: this.$root.cfg.audio.playbackRate
+			}
+		},
+		watch: {
+			playbackRate: function (newValue, _oldValue) {
+				this.$root.mk.playbackRate = newValue
+                this.$root.cfg.audio.playbackRate = newValue
+				this.playbackRate = newValue
+			}
+		}
+	});
+</script>

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

@@ -18,10 +18,15 @@
                         <div class="name">{{app.getLz('settings.option.audio.enableAdvancedFunctionality.audioSpatialization')}}</div>
                     </button>
                     <button class="playlist-item"
-                            @click="openAudioControls" style="width:100%;">
+                            @click="openAudioControls()" style="width:100%;">
                         <div class="icon"><%- include("../svg/speaker.svg") %></div>
                         <div class="name">{{app.getLz('term.audioControls')}}</div>
                     </button>
+                    <button class="playlist-item"
+                            @click="openAudioPlaybackRate()" style="width:100%;">
+                        <div class="icon"><%- include("../svg/speaker.svg") %></div>
+                        <div class="name">{{app.getLz('settings.option.audio.changePlaybackRate')}}</div>
+                    </button>
                     <button class="playlist-item"
                             @click="$root.appRoute('audiolabs')" style="width:100%;">
                         <div class="icon"><%- include("../svg/speaker.svg") %></div>
@@ -60,6 +65,10 @@
 	            app.modals.audioControls = true
 	            app.modals.audioSettings = false
             },
+            openAudioPlaybackRate() {
+                app.modals.audioPlaybackRate = true
+                app.modals.audioSettings = false
+            },
             },
         }
     );

src/renderer/views/pages/settings.ejs

@@ -259,6 +259,16 @@
                                 </button>
                             </div>
                         </div>
+                        <div class="md-option-line">
+                            <div class="md-option-segment">
+                                {{$root.getLz('settings.option.audio.changePlaybackRate')}}
+                            </div>
+                            <div class="md-option-segment md-option-segment_auto">
+                                <button class="md-btn" onclick="app.modals.audioPlaybackRate = true">
+                                    {{$root.getLz('settings.option.audio.playbackRate.change')}}
+                                </button>
+                            </div>
+                        </div>
                         <div class="md-option-line">
                             <div class="md-option-segment">
                                 {{$root.getLz('settings.option.audio.seamlessTransition')}}