Unbloat user menu (#264)

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

@@ -0,0 +1,47 @@
+<script type="text/x-template" id="audio-settings">
+    <template>
+        <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.audioSettings')}}</div>
+                    <button class="close-btn" @click="app.resetState()"></button>
+                </div>
+                <div class="modal-content">
+                    <button class="playlist-item"
+                            @click="openEqualizer()" style="width:100%;">
+                        <div class="icon"><%- include("../svg/speaker.svg") %></div>
+                        <div class="name">{{app.getLz('term.equalizer')}}</div>
+                    </button>
+                    <button class="playlist-item"
+                            @click="openSpacialAudio()" style="width:100%;">
+                        <div class="icon"><%- include("../svg/speaker.svg") %></div>
+                        <div class="name">{{app.getLz('settings.option.audio.enableAdvancedFunctionality.audioSpatialization')}}</div>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </template>
+</script>
+
+<script>
+    Vue.component('audio-settings', {
+        template: '#audio-settings',
+        data: function () {
+            return {
+                app: this.$root,
+            }
+        },
+        props: {},
+        mounted() {},
+        methods: {
+            openEqualizer() {
+                app.modals.equalizer = true
+                app.modals.audioSettings = false
+            },
+            openSpacialAudio() {
+                app.modals.spatialProperties = true
+                app.modals.audioSettings = false
+            },
+        }
+    });
+</script>