From 09825e93d3c6c5b36f87954ec385d11cc07d8a9e Mon Sep 17 00:00:00 2001
From: Core <64542347+coredev-uk@users.noreply.github.com>
Date: Thu, 17 Feb 2022 00:19:14 +0000
Subject: [PATCH] Created audio controls menu

---
 src/i18n/README.md                            |  6 ++
 src/i18n/en_US.jsonc                          |  3 +
 src/main/base/browserwindow.ts                |  1 +
 src/renderer/style.less                       | 20 +++++
 src/renderer/views/app/panels.ejs             |  3 +
 src/renderer/views/app/sidebar.ejs            |  2 +-
 .../views/components/audio-controls.ejs       | 87 +++++++++++++++++++
 .../views/components/audio-settings.ejs       |  9 ++
 src/renderer/views/components/fullscreen.ejs  |  2 +-
 src/renderer/views/pages/settings.ejs         | 10 +++
 10 files changed, 141 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/views/components/audio-controls.ejs

diff --git a/src/i18n/README.md b/src/i18n/README.md
index f474d134..6552894c 100644
--- a/src/i18n/README.md
+++ b/src/i18n/README.md
@@ -116,3 +116,9 @@ Update 12/02/2022 12:00 UTC
 * `settings.notyf.visual.theme.install.error`: Added for `en_US`.
 * `term.defaultPresets`: Added for `en_US`.
 * `term.userPresets`: Added for `en_US`.
+
+Update 16/02/2022 21:45 UTC
+
+* `term.audioControls`: Added for `en_US`.
+* `settings.option.audio.volumeStep`: Added for `en_US`.
+* `settings.option.audio.maxVolume`: Added for `en_US`.`
\ No newline at end of file
diff --git a/src/i18n/en_US.jsonc b/src/i18n/en_US.jsonc
index 6f09a2fc..037cbe9c 100644
--- a/src/i18n/en_US.jsonc
+++ b/src/i18n/en_US.jsonc
@@ -109,6 +109,7 @@
   "term.fullscreenView": "Fullscreen View",
   "term.defaultView": "Default View",
   "term.audioSettings": "Audio Settings",
+  "term.audioControls": "Audio Controls",
   "term.clearAll": "Clear All",
   "term.recentStations": "Recent Stations",
   "term.language": "Language",
@@ -251,6 +252,8 @@
   // Settings - Audio
   "settings.header.audio": "Audio",
   "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.quality": "Audio Quality", // Dropdown
   "settings.header.audio.quality.hireslossless": "Hi-Res Lossless",
   "settings.header.audio.quality.hireslossless.description": "up to 24-bit/192 kHz",
diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts
index cbe6547d..a586b662 100644
--- a/src/main/base/browserwindow.ts
+++ b/src/main/base/browserwindow.ts
@@ -53,6 +53,7 @@ export class BrowserWindow {
                 "components/sidebar-playlist",
                 "components/spatial-properties",
                 "components/audio-settings",
+                "components/audio-controls",
                 "components/qrcode-modal",
                 "components/equalizer",
                 "components/add-to-playlist",
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 9df52a9b..4b4d957c 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -3134,5 +3134,25 @@ body[platform='darwin'] {
   }
 }
 
+.percent {
+  display: inline-block;
+  position: relative;
+}
+
+.percent::after {
+  position: relative;
+  right: 2em;
+  transition: all .05s ease-in-out;
+}
+
+.percent:hover::after,
+.percent:focus-within::after {
+  right: 3.5em;
+}
+
+.percent::after {
+  content: '%';
+}
+
 
 @import url("less/compact.less");
diff --git a/src/renderer/views/app/panels.ejs b/src/renderer/views/app/panels.ejs
index af2b76f9..85227a31 100644
--- a/src/renderer/views/app/panels.ejs
+++ b/src/renderer/views/app/panels.ejs
@@ -16,6 +16,9 @@
 <transition name="modal">
     <spatial-properties v-if="modals.spatialProperties"></spatial-properties>
 </transition>
+<transition name="modal">
+    <audio-controls v-if="modals.audioControls"></audio-controls>
+</transition>
 <transition name="modal">
     <audio-settings v-if="modals.audioSettings"></audio-settings>
 </transition>
diff --git a/src/renderer/views/app/sidebar.ejs b/src/renderer/views/app/sidebar.ejs
index 4cae1592..fbad26eb 100644
--- a/src/renderer/views/app/sidebar.ejs
+++ b/src/renderer/views/app/sidebar.ejs
@@ -152,7 +152,7 @@
                 <div class="input-container">
                     <button class="volume-button--small volume" @click="muteButtonPressed()"
                             :class="{'active': this.cfg.audio.volume == 0}"></button>
-                    <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0"
+                    <input type="range" class="" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0"
                            :max="cfg.audio.maxVolume"
                            v-model="mk.volume" v-if="typeof mk.volume != 'undefined'"
                            @change="checkMuteChange()">
diff --git a/src/renderer/views/components/audio-controls.ejs b/src/renderer/views/components/audio-controls.ejs
new file mode 100644
index 00000000..57a174e6
--- /dev/null
+++ b/src/renderer/views/components/audio-controls.ejs
@@ -0,0 +1,87 @@
+<script type="text/x-template" id="audio-controls">
+    <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('term.audioControls')}}</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('term.volume')}}
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto percent">
+                        <input type="number"
+                               style="width: 100%; text-align: center; margin-right: 5px;" min="0"
+                               step="5" v-model="volume"/>
+                    </div>
+                </div>
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        {{app.getLz('settings.option.audio.volumeStep')}}
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto percent">
+                        <input type="number" style="width: 100%; text-align: center; margin-right: 5px;" min="0"
+                               v-model="volumeStep"/>
+                    </div>
+                </div>
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        {{app.getLz('settings.option.audio.maxVolume')}}
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto percent">
+                        <input type="number" style="width: 100%; text-align: center; margin-right: 5px;" min="0"
+                               v-model="maxVolume"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</script>
+
+<script>
+	Vue.component('audio-controls', {
+		template: '#audio-controls',
+		data: function () {
+			return {
+				app: this.$root,
+				maxVolume: this.$root.cfg.audio.maxVolume * 100,
+				volumeStep: this.$root.cfg.audio.volumeStep * 100,
+				volume: this.$root.cfg.audio.volume * 100
+			}
+		},
+		watch: {
+			maxVolume: function (newValue, _oldValue) {
+				if (newValue > 100) {
+					newValue = 100
+				} else {
+					newValue = Math.round(newValue)
+				}
+				this.$root.cfg.audio.maxVolume = newValue / 100
+                this.maxVolume = newValue
+				console.log(newValue, _oldValue)
+			},
+			volume: function (newValue, _oldValue) {
+				if (newValue > this.maxVolume) {
+					newValue = 100
+				} else {
+					newValue = Math.round(newValue)
+				}
+				this.$root.mk.volume = newValue / 100
+				this.volume = newValue
+				console.log(newValue, _oldValue)
+			},
+			volumeStep: function (newValue, _oldValue) {
+				if (newValue > this.maxVolume) {
+					newValue = 100
+				} else {
+					newValue = Math.round(newValue)
+				}
+				this.$root.cfg.audio.volumeStep = newValue / 100
+				this.volumeStep = newValue
+				console.log(newValue, _oldValue)
+            }
+		}
+	});
+</script>
\ No newline at end of file
diff --git a/src/renderer/views/components/audio-settings.ejs b/src/renderer/views/components/audio-settings.ejs
index 512db50e..aadab781 100644
--- a/src/renderer/views/components/audio-settings.ejs
+++ b/src/renderer/views/components/audio-settings.ejs
@@ -17,6 +17,11 @@
                         <div class="icon"><%- include("../svg/speaker.svg") %></div>
                         <div class="name">{{app.getLz('settings.option.audio.enableAdvancedFunctionality.audioSpatialization')}}</div>
                     </button>
+                    <button class="playlist-item"
+                            @click="openAudioControls" style="width:100%;">
+                        <div class="icon"><%- include("../svg/speaker.svg") %></div>
+                        <div class="name">{{app.getLz('term.audioControls')}}</div>
+                    </button>
                 </div>
             </div>
         </div>
@@ -46,6 +51,10 @@
                     notyf.error(app.getLz('spatial.notTurnedOn'))
                 }
             },
+            openAudioControls() {
+	            app.modals.audioControls = true
+	            app.modals.audioSettings = false
+            }
         }
     });
 </script>
\ No newline at end of file
diff --git a/src/renderer/views/components/fullscreen.ejs b/src/renderer/views/components/fullscreen.ejs
index 733a4b0c..6572ff97 100644
--- a/src/renderer/views/components/fullscreen.ejs
+++ b/src/renderer/views/components/fullscreen.ejs
@@ -80,7 +80,7 @@
                     <div class="app-chrome-item volume display--large">
                         <div class="input-container">
                         <button class="volume-button--small volume" @click="app.muteButtonPressed()" :class="{'active': app.cfg.audio.volume == 0}"></button>
-                        <input type="range" class="slider" @wheel="app.volumeWheel" :step="app.cfg.audio.volumeStep" min="0" :max="$root.cfg.audio.maxVolume" v-model="app.mk.volume"
+                        <input type="range" class="slider" @wheel="app.volumeWheel" :step="app.cfg.audio.volumeStep" min="0" :max="app.cfg.audio.maxVolume" v-model="app.mk.volume"
                                v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()">
                         </div>       
                     </div>
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs
index 23292ff0..32a50e46 100644
--- a/src/renderer/views/pages/settings.ejs
+++ b/src/renderer/views/pages/settings.ejs
@@ -42,6 +42,16 @@
                         </select>
                     </div>
                 </div>
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        {{$root.getLz('term.audioControls')}}
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto">
+                        <button class="md-btn" onclick="app.modals.audioControls = true">
+                            {{$root.getLz('term.audioControls')}}
+                        </button>
+                    </div>
+                </div>
                 <div class="md-option-line">
                     <div class="md-option-segment">
                         {{$root.getLz('settings.option.audio.seamlessTransition')}}