From a81aeb4da96b04213a88d69f2d4c06ad3bd53ebb Mon Sep 17 00:00:00 2001
From: maikirakiwi <stella@mai.kiwi>
Date: Sun, 3 Apr 2022 14:18:36 -0700
Subject: [PATCH] [Audio] IntelliGainComp

---
 src/renderer/audio/audio.js                 |  79 +-
 src/renderer/main/vueapp.js                 |  21 +-
 src/renderer/views/components/equalizer.ejs | 850 ++++++++++----------
 3 files changed, 493 insertions(+), 457 deletions(-)

diff --git a/src/renderer/audio/audio.js b/src/renderer/audio/audio.js
index 5473dcb4..cb1aa5ca 100644
--- a/src/renderer/audio/audio.js
+++ b/src/renderer/audio/audio.js
@@ -10,6 +10,7 @@ const CiderAudio = {
         llpw: null,
         analogWarmth: null,
         recorderNode: null,
+        intelliGainComp: null,
     },
     ccON: false,
     mediaRecorder: null,
@@ -37,7 +38,9 @@ const CiderAudio = {
                     audioBands: null,
                     vibrantbassNode: null,
                     llpw: null,
-                    analogWarmth: null
+                    analogWarmth: null,
+                    recorderNode: null,
+                    intelliGainComp: null,
                 }
             } catch (e) { }
             CiderAudio.source.connect(CiderAudio.context.destination);
@@ -51,7 +54,9 @@ const CiderAudio = {
             CiderAudio.source = CiderAudio.context.createMediaElementSource(mediaElem);
         } else { try { CiderAudio.source.disconnect(CiderAudio.context.destination) } catch (e) { } }
         CiderAudio.audioNodes.gainNode = CiderAudio.context.createGain()
-        CiderAudio.source.connect(CiderAudio.audioNodes.gainNode);
+        CiderAudio.audioNodes.intelliGainComp = CiderAudio.context.createGain();
+        CiderAudio.source.connect(CiderAudio.audioNodes.intelliGainComp);
+        CiderAudio.audioNodes.intelliGainComp.connect(CiderAudio.audioNodes.gainNode);
         if (app.cfg.audio.normalization) {
             CiderAudio.normalizerOn()
         }
@@ -137,6 +142,48 @@ const CiderAudio = {
     spatialOff: function () {
         CiderAudio.hierarchical_loading();
     },
+    intelliGainComp_h0_0: function () {
+        let filters = []; const precisionHz = 12;
+        if (CiderAudio.audioNodes.audioBands !== null) {filters = filters.concat(CiderAudio.audioNodes.audioBands)}
+        if (CiderAudio.audioNodes.vibrantbassNode !== null) {filters = filters.concat(CiderAudio.audioNodes.vibrantbassNode)}
+        if (CiderAudio.audioNodes.llpw !== null && CiderAudio.audioNodes.llpw.length > 1) {filters = filters.concat(CiderAudio.audioNodes.llpw);}
+        if (!filters || filters.length === 0) {CiderAudio.audioNodes.intelliGainComp.gain.value = 1; return}     
+        filters.shift();
+        let steps = Math.ceil(96000 / precisionHz);
+        // Generate input array for getFrequencyResponse method
+        let frequencies = new Float32Array(steps);
+        for (let i = 0; i < steps; i++) {
+            frequencies[i] = (i + 1) * precisionHz;
+        }
+        // Here we will store combined amplitude response
+        let totalAmplitudeResp = new Float32Array(steps);
+        for (let i = 0; i < steps; i++) {
+            totalAmplitudeResp[i] = 1;
+        }
+        // Temporary container for every filter response
+        let amplitudeResp = new Float32Array(steps), phaseResp = new Float32Array(steps);
+        for (let i = filters.length - 1; i >= 0; i--) {
+            let filter = filters[i];
+            // Get filter response and convolve it with existing response
+            filter.getFrequencyResponse(frequencies, amplitudeResp, phaseResp);
+            for (let j = 0; j < steps; j++) {
+                totalAmplitudeResp[j] *= amplitudeResp[j];
+            }
+        }
+        // Find max gain
+        let maxGain = -120;
+        for (let i = 0; i < steps; i++) {
+            let gain = totalAmplitudeResp[i];
+            if (gain > maxGain)
+                maxGain = gain;
+        }
+        if (maxGain == -120) {maxGain = 1}
+        if (CiderAudio.audioNodes.llpw !== null && CiderAudio.audioNodes.llpw[0].buffer !== null) {maxGain = maxGain * 0.9440608762859234}
+        if (app.cfg.audio.maikiwiAudio.spatial === true) {maxGain = maxGain * 0.5956621435290105}
+        maxGain = Math.pow(10, (-1 * (20 * Math.log10(maxGain))) / 20).toFixed(4);
+        maxGain > 1.0 ? CiderAudio.audioNodes.intelliGainComp.gain.value = 1 : CiderAudio.audioNodes.intelliGainComp.gain.value = maxGain;
+        console.debug(`[Cider][Audio] IntelliGainComp: ${maxGain > 1.0 ? 0 : (20 * Math.log10(maxGain)).toFixed(2)} dB (${maxGain > 1.0 ? 1 : maxGain})`);
+    },
     sendAudio: function () {
         if (!CiderAudio.ccON) {
             CiderAudio.ccON = true
@@ -146,7 +193,8 @@ const CiderAudio = {
                     //     mimeType: 'audio/webm; codecs=opus'
                     // };
                     // var destnode = CiderAudio.context.createMediaStreamDestination();
-                    // CiderAudio.audioNodes.gainNode.connect(destnode)
+                    // CiderAudio.audioNodes.intelliGainComp.connect(CiderAudio.audioNodes.gainNode);
+                    //            CiderAudio.audioNodes.gainNode.connect(destnode)
                     // CiderAudio.mediaRecorder = new MediaRecorder(destnode.stream, options);
                     // CiderAudio.mediaRecorder.start(1);
                     // CiderAudio.mediaRecorder.ondataavailable = function (e) {
@@ -277,7 +325,7 @@ const CiderAudio = {
                                 }
                             }
                             CiderAudio.audioNodes.recorderNode.parameters.get('isRecording').setValueAtTime(1, CiderAudio.context.currentTime);
-                            CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.recorderNode);
+                                CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.recorderNode);
 
                         });
                     clearInterval(searchInt);
@@ -400,7 +448,7 @@ const CiderAudio = {
 
                     }
 
-                    console.debug("[Cider][Audio] CAP - MaikiwiSignature Mode");
+                    console.debug("[Cider][Audio] CAP - Maikiwi Signature Mode");
                     break;
 
                 case "NATURAL":
@@ -517,6 +565,7 @@ const CiderAudio = {
     hierarchical_unloading: function () {
         try { CiderAudio.audioNodes.spatialNode.output.disconnect(); } catch (e) { }
         try { CiderAudio.audioNodes.spatialNode.disconnect(); } catch (e) { }
+        try {CiderAudio.audioNodes.intelliGainComp.disconnect();} catch (e) { }
         try { CiderAudio.audioNodes.gainNode.disconnect(); } catch (e) { }
         try { for (var i of CiderAudio.audioNodes.analogWarmth) { i.disconnect(); } CiderAudio.audioNodes.analogWarmth = null } catch (e) { }
         try { for (var i of CiderAudio.audioNodes.llpw) { i.disconnect(); } CiderAudio.audioNodes.llpw = null } catch (e) { }
@@ -528,6 +577,7 @@ const CiderAudio = {
     },
     hierarchical_loading: function () {
         CiderAudio.hierarchical_unloading();
+        CiderAudio.audioNodes.intelliGainComp.connect(CiderAudio.audioNodes.gainNode);
 
         if (Math.max(...app.cfg.audio.equalizer.gain) != 0) {
             CiderAudio.equalizer(true, 0);
@@ -542,20 +592,20 @@ const CiderAudio = {
                         CiderAudio.analogWarmth_h2_3(true, 3);
 
                         if (app.cfg.audio.spatial === true) {
-                            if (app.cfg.audio.maikiwiAudio.spatial === true) {  // Vibrant Bass, CAP, Analog Warmth, Maikiwi Spatial
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {  // Vibrant Bass, CAP, Analog Warmth, Maikiwi Spatial                              
                                 app.cfg.audio.normalization = true;
                                 CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
                                 CiderAudio.audioNodes.spatialNode.connect(CiderAudio.audioNodes.analogWarmth[0]);
                                 console.debug('[Cider][Audio] Equalizer, Vibrant Bass, CAP, Analog Warmth, Maikiwi Spatial')
                             }
-                            else {                                              // Vibrant Bass, CAP, Analog Warmth, Spatial
+                            else {                          // Vibrant Bass, CAP, Analog Warmth, Spatial
                                 app.cfg.audio.normalization = true;
                                 CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialInput.input);
                                 CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.audioNodes.analogWarmth[0]);
                                 console.debug('[Cider][Audio] Equalizer, Vibrant Bass, CAP, Analog Warmth, Spatial')
                             }
                         }
-                        else {
+                        else {                           
                             app.cfg.audio.normalization = true;
                             CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.analogWarmth[0]);
                             console.debug('[Cider][Audio] Equalizer, Vibrant Bass, CAP, Analog Warmth')
@@ -575,7 +625,7 @@ const CiderAudio = {
                                 console.debug('[Cider][Audio] Equalizer, Vibrant Bass, CAP, Spatial')
                             }
                         }
-                        else {
+                        else {         
                             app.cfg.audio.normalization = true;
                             CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.llpw[0]);
                             console.debug('[Cider][Audio] Equalizer, Vibrant Bass, CAP')
@@ -599,7 +649,7 @@ const CiderAudio = {
                                 console.debug('[Cider][Audio] Equalizer, Vibrant Bass, Analog Warmth, Spatial')
                             }
                         }
-                        else {
+                        else {      
                             app.cfg.audio.normalization = true;
                             CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.analogWarmth[0]);
                             console.debug('[Cider][Audio] Equalizer, Vibrant Bass, Analog Warmth')
@@ -607,7 +657,7 @@ const CiderAudio = {
                     }
                     else {
                         if (app.cfg.audio.spatial === true) {
-                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {                                
                                 app.cfg.audio.normalization = true;
                                 CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
                                 CiderAudio.audioNodes.spatialNode.connect(CiderAudio.audioNodes.vibrantbassNode[0]);
@@ -710,7 +760,7 @@ const CiderAudio = {
                             }
                         }
                         else {
-                            CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.audioBands[0]);
+                                CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.audioBands[0]);
                             console.debug('[Cider][Audio] Equalizer')
                         }
                     }
@@ -734,7 +784,7 @@ const CiderAudio = {
                                 CiderAudio.audioNodes.spatialNode.connect(CiderAudio.audioNodes.analogWarmth[0]);
                                 console.debug('[Cider][Audio] Vibrant Bass, CAP, Analog Warmth, Maikiwi Spatial')
                             }
-                            else {                                              // Vibrant Bass, CAP, Analog Warmth, Spatial
+                            else {                                  // Vibrant Bass, CAP, Analog Warmth, Spatial
                                 app.cfg.audio.normalization = true;
                                 CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialInput.input);
                                 CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.audioNodes.analogWarmth[0]);
@@ -743,7 +793,7 @@ const CiderAudio = {
                         }
                         else {
                             app.cfg.audio.normalization = true;
-                            CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.analogWarmth[0]);
+                                CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.analogWarmth[0]);
                             console.debug('[Cider][Audio] Vibrant Bass, CAP, Analog Warmth')
                         }
                     }
@@ -903,6 +953,7 @@ const CiderAudio = {
                 }
             }
         }
+        CiderAudio.intelliGainComp_h0_0();
         console.debug("[Cider][Audio] Finished hierarchical loading");
 
     },
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index 1abe4076..54840aaa 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -773,8 +773,8 @@ const app = new Vue({
                         }
                         numbers.shift()
                         let peak = Math.max(numbers[6], numbers[7]) / 32768.0
-                        let gain = Math.pow(10, ((-7.63 - (Math.log10(peak) * 20)) / 20))// EBU R 128 Compliant
-                        console.debug(`[Cider][MaikiwiSoundCheck] Peak Gain: '${Math.log10(peak) * 20}' dB | Adjusting '${Math.log10(gain) * 20}' dB`)
+                        let gain = Math.pow(10, ((-2 - (Math.log10(peak) * 20)) / 20))// EBU R 128 Compliant
+                        console.debug(`[Cider][MaikiwiSoundCheck] Peak Gain: '${(Math.log10(peak) * 20).toFixed(2)}' dB | Adjusting '${(Math.log10(gain) * 20).toFixed(2)}' dB`)
                         try {
                             //CiderAudio.audioNodes.gainNode.gain.value = (Math.min(Math.pow(10, (replaygain.gain / 20)), (1 / replaygain.peak)))
                             CiderAudio.audioNodes.gainNode.gain.value = gain
@@ -3857,23 +3857,6 @@ const app = new Vue({
                 element.onclick = app.LastFMDeauthorize;
             });
         },
-        /**
-         parseSCTagToRG: function (tag) {
-            let soundcheck = tag.split(" ")
-            let numbers = []
-            for (item of soundcheck) {
-                numbers.push(parseInt(item, 16))
-
-            }
-            numbers.shift()
-            //let gain = Math.log10((Math.max(numbers[0], numbers[1]) ?? 1000) / 1000.0) * -10
-            let peak = Math.max(numbers[6], numbers[7]) / 32768.0
-            let gain = Math.pow(10, ((-7.63 - (Math.log10(peak) * 20)) / 20))// EBU R 128 Compliant
-            return {
-                gain: gain,
-                peak: peak
-            }
-        },*/
         fullscreen(flag) {
             if (flag) {
                 ipcRenderer.send('setFullScreen', true);
diff --git a/src/renderer/views/components/equalizer.ejs b/src/renderer/views/components/equalizer.ejs
index 17890854..73082a36 100644
--- a/src/renderer/views/components/equalizer.ejs
+++ b/src/renderer/views/components/equalizer.ejs
@@ -1,425 +1,427 @@
-<script type="text/x-template" id="eq-view">
-    <div class="modal-fullscreen equalizer-panel" @click.self="close()" @contextmenu.self="close()">
-        <div class="modal-window" >
-            <div class="modal-header">
-                <div class="modal-title">{{$root.getLz('term.equalizer')}}</div>
-                <button class="close-btn" @click="close()"></button>
-                <div class="md-option-segment md-option-segment_auto">
-                    <select class="md-select" style="width:220px;text-align:center;margin-right:245px" v-model="$root.cfg.audio.equalizer.preset" v-on:change="changePreset($root.cfg.audio.equalizer.preset)">
-                        <optgroup :label="$root.getLz('term.userPresets')">
-                            <option v-for="preset in $root.cfg.audio.equalizer.presets" :value="preset.preset">{{preset.name}}</option>
-                        </optgroup>
-                        <optgroup :label="$root.getLz('term.defaultPresets')">
-                            <option v-for="preset in defaultPresets" :value="preset.preset">{{preset.name}}</option>
-                        </optgroup>
-                    </select>
-                </div>
-            </div>
-            <div class="modal-content">
-                <!-- BANDS = [60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000]; -->
-                <div class="inputs-container">
-                    <div class="input-container mini">
-                        {{$root.cfg.audio.equalizer.vibrantBass}}
-                        <input tabindex="0" type="range" class="eq-slider mini" orient="vertical" min="-15" max="15" step="1" v-model="$root.cfg.audio.equalizer.vibrantBass" @change="changeVibrantBass()">
-                        Vibrant Bass
-                    </div>
-                    <div class="input-container mini">
-                        {{$root.cfg.audio.equalizer.mix}}
-                        <input tabindex="0" type="range" class="eq-slider mini" orient="vertical" min="0" max="2" step="0.1" v-model="$root.cfg.audio.equalizer.mix" @change="changeMix()">
-                        Mix
-                    </div>
-                    <div class="input-container header mini">
-                        Gain
-                        <input type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" >
-                        <div class="freq-header">Freq</div>
-                        <div>Q</div>
-                    </div>
-                    <div class="input-container">
-                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[0]" @change="changeGain(0)">
-                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[0]" @change="changeGain(0)">
-                        <input type="number" class="eq-freq" orient="vertical" min="22" max="44" step="2" v-model="$root.cfg.audio.equalizer.frequencies[0]" @change="changeFreq(0)">
-                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[0]" @change="changeQ(0)">
-                    </div>
-                    <div class="input-container">
-                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[1]" @change="changeGain(1)">
-                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[1]" @change="changeGain(1)">
-                        <input type="number" class="eq-freq" orient="vertical" min="44" max="88" step="4" v-model="$root.cfg.audio.equalizer.frequencies[1]" @change="changeFreq(1)">
-                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[1]" @change="changeQ(1)">
-                    </div>
-                    <div class="input-container">
-                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[2]" @change="changeGain(2)">
-                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[2]" @change="changeGain(2)">
-                        <input type="number" class="eq-freq" orient="vertical" min="88" max="177" step="8" v-model="$root.cfg.audio.equalizer.frequencies[2]" @change="changeFreq(2)">
-                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[2]" @change="changeQ(2)">    
-                    </div>
-                    <div class="input-container">
-                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[3]" @change="changeGain(3)">
-                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[3]" @change="changeGain(3)">
-                        <input type="number" class="eq-freq" orient="vertical" min="177" max="355" step="16" v-model="$root.cfg.audio.equalizer.frequencies[3]" @change="changeFreq(3)">
-                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[3]" @change="changeQ(3)">
-                    </div>
-                    <div class="input-container">
-                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[4]" @change="changeGain(4)">
-                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[4]" @change="changeGain(4)">
-                        <input type="number" class="eq-freq" orient="vertical" min="355" max="710" step="32" v-model="$root.cfg.audio.equalizer.frequencies[4]" @change="changeFreq(4)">
-                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[4]" @change="changeQ(4)">
-                    </div>
-                    <div class="input-container">
-                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[5]" @change="changeGain(5)">
-                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[5]" @change="changeGain(5)">
-                        <input type="number" class="eq-freq" orient="vertical" min="710" max="1420" step="64" v-model="$root.cfg.audio.equalizer.frequencies[5]" @change="changeFreq(5)">
-                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[5]" @change="changeQ(5)">
-                    </div>
-                    <div class="input-container">
-                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[6]" @change="changeGain(6)">
-                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[6]" @change="changeGain(6)">
-                        <input type="number" class="eq-freq" orient="vertical" min="1420" max="2840" step="128" v-model="$root.cfg.audio.equalizer.frequencies[6]" @change="changeFreq(6)">
-                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[6]" @change="changeQ(6)">
-                    </div>
-                    <div class="input-container">
-                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[7]" @change="changeGain(7)">
-                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[7]" @change="changeGain(7)">
-                        <input type="number" class="eq-freq" orient="vertical" min="2840" max="5680" step="256" v-model="$root.cfg.audio.equalizer.frequencies[7]" @change="changeFreq(7)">
-                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[7]" @change="changeQ(7)">
-                    </div>
-                    <div class="input-container">
-                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[8]" @change="changeGain(8)">
-                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[8]" @change="changeGain(8)">
-                        <input type="number" class="eq-freq" orient="vertical" min="5680" max="11360" step="512" v-model="$root.cfg.audio.equalizer.frequencies[8]" @change="changeFreq(8)">
-                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[8]" @change="changeQ(8)">
-                    </div>
-                    <div class="input-container">
-                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[9]" @change="changeGain(9)">
-                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[9]" @change="changeGain(9)">
-                        <input type="number" class="eq-freq" orient="vertical" min="11360" max="22720" step="1024" v-model="$root.cfg.audio.equalizer.frequencies[9]" @change="changeFreq(9)">
-                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[9]" @change="changeQ(9)">
-                    </div>
-                </div>
-                
-            </div>    
-            <div class="modal-lowercontent">
-                <div class="row">
-                    <div class="col">
-                        <button class="md-btn" style="width:100%" @click="resetGain()">{{$root.getLz('term.reset')}}</button>
-                    </div>
-                    <div class="col">
-                        <button class="md-btn" style="width:100%" @click="presetOptions($event)">{{$root.getLz('term.menu')}}</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</script>
-
-<script>
-    Vue.component('eq-view', {
-        template: '#eq-view',
-        data: function () {
-            return {
-                // app: this.$root,
-                eqPreset: function () {
-                    this.preset = uuidv4()
-                    this.name = ""
-                    this.frequencies = []
-                    this.gain = []
-                    this.Q = []
-                    this.mix = 1
-                    this.vibrantBass = 0
-                    this.userGenerated = true
-                },
-                defaultPresets: [
-                    {
-                    'preset': 'default',
-                    'name': 'Default',
-                    'frequencies': [32, 63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000],
-                    'gain': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-                    'Q': [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
-                    'mix': 1,
-                    'vibrantBass': 0,
-                    'userGenerated': false
-                }, {
-                    'preset': 'boostAiriness',
-                    'name': 'Boost Airiness',
-                    'frequencies': [1169, 1733, 5962, 8688, 14125, 18628, 18628, 19000, 19500, 20000],
-                    'gain': [-1.41, 0.25, 3.33, 0.22, -0.53, 0.2, 3.64, 0, 0, 0],
-                    'Q': [0.405, 2.102, 0.025, 2.5, 7.071, 1.768, 1.146, 1, 1, 1],
-                    'mix': 1,
-                    'vibrantBass': 0,
-                    'userGenerated': false
-                }, {
-                    'preset': 'acoustic',
-                    'name': 'Acoustic',
-                    'frequencies': [32, 75, 125, 220, 700, 1000, 2000, 4000, 10000, 16000],
-                    'gain': [0, -8, 0, -0.1, -3, 0, 0, 0, 4, 0],
-                    'Q': [1, 0.2, 1, 2.0, 1.4, 1, 1, 1, 0.1, 1],
-                    'mix': 1,
-                    'vibrantBass': 0,
-                    'userGenerated': false
-                }, {
-                    'preset': 'clearVocal',
-                    'name': 'Clear Vocal',
-                    'frequencies': [20, 63, 125, 250, 400, 1000, 2000, 4000, 8000, 20000],
-                    'gain': [-22, 0, 0, 0, -3, 0, 1.8, 0, 0, 3.5],
-                    'Q': [0.3, 1, 1, 1, 2.0, 1, 0.7, 1, 1, 0.8],
-                    'mix': 1,
-                    'vibrantBass': 0,
-                    'userGenerated': false
-                }, {
-                    'preset': 'instrumentClarity',
-                    'name': 'Instrument Clarity',
-                    'frequencies': [20, 63, 155, 250, 500, 1000, 2000, 5000, 11000, 16000],
-                    'gain': [-15, 0, -3, 0, 0, 0, 0, 3.1, 0, 0],
-                    'Q': [0.5, 1, 2, 1, 1, 1, 1, 1.5, 0.1, 1],
-                    'mix': 1,
-                    'vibrantBass': 0,
-                    'userGenerated': false
-                }, {
-                    'preset': 'reduceHarshness',
-                    'name': 'Reduce Harshness',
-                    'frequencies': [32, 63, 125, 250, 500, 1128, 2000, 4057, 8000, 16000],
-                    'gain': [0, 0, 0, 0, 0, 2, 0, -6.4, 0, 0],
-                    'Q': [1, 1, 1, 1, 1, 2, 1, 1, 1, 1],
-                    'mix': 1,
-                    'vibrantBass': 0,
-                    'userGenerated': false
-                }, {
-                    'preset': 'smileyFace',
-                    'name': 'Smiley Face',
-                    'frequencies': [35, 63, 125, 250, 500, 800, 2000, 4000, 8000, 20000],
-                    'gain': [5, 0, 0, 0, 0, -5, 0, 0, 0, 5],
-                    'Q': [0.1, 1, 1, 1, 1, 0.6, 1, 1, 1, 0.2],
-                    'mix': 1,
-                    'vibrantBass': 0,
-                    'userGenerated': false
-                }, 
-                {
-                    'preset': 'bassBoostSurgical',
-                    'name': 'Surgical Bass Boost',
-                    'frequencies': [32, 63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000],
-                    'gain': [2.7, 2.2, 1.6, 1.4, 0.6, 0, 0, 0, 0, 0],
-                    'Q': [1.4, 1.4, 1.4, 1.4, 1.4, 1, 1, 1, 1, 1],
-                    'mix': 1,
-                    'vibrantBass': 0,
-                    'userGenerated': false
-                }, {
-                    'preset': 'bassBoostClassic',
-                    'name': 'Classic Bass Boost',
-                    'frequencies': [32, 63, 160, 250, 500, 1000, 2000, 3500, 8000, 20000],
-                    'gain': [2.7, 2.2, 1.6, 1.4, 0.6, 0, 0, 0, 0, 0],
-                    'Q': [0.7, 0.7, 0.7, 0.7, 0.7, 1, 1, 1, 1, 1],
-                    'mix': 1,
-                    'vibrantBass': 0,
-                    'userGenerated': false
-                }]
-            }
-        },
-        props: ["src", "url"],
-        mounted() {
-        },
-        methods: {
-            presetOptions(event) {
-                let menu = {
-                    items: {
-                        "new": {
-                            "icon": "./assets/feather/plus.svg",
-                            "name": app.getLz('action.newpreset'),
-                            action: () => {
-                                this.addPreset()
-                            }
-                        },
-                        "delete": {
-                            "icon": "./assets/feather/x-circle.svg",
-                            "name": app.getLz('action.deletepreset'),
-                            action: () => {
-                                this.deletePreset()
-                            }
-                        },
-                        "import": {
-                            "icon": "./assets/feather/share.svg",
-                            "name": app.getLz('action.import'),
-                            action: () => {
-                                notyf.error("Not implemented yet")
-                            }
-                        },
-                        "export": {
-                            "icon": "./assets/feather/share.svg",
-                            "name": app.getLz('action.export'),
-                            action: () => {
-                                notyf.error("Not implemented yet")
-                            }
-                        },
-                    }
-                }
-
-                if(!this.$root.cfg.audio.equalizer.userGenerated) {
-                    delete menu.items.delete
-                }
-
-                app.showMenuPanel(menu, event)
-            },
-            sharePreset(event) {
-                let menu = {
-                    items: [
-                        {
-                            "icon": "./assets/feather/share.svg",
-                            "name": app.getLz('action.import'),
-                            "action": function () {
-                                notyf.error("Not implemented yet")
-                            }
-                        },
-                        {
-                            "icon": "./assets/feather/share.svg",
-                            "name": app.getLz('action.export'),
-                            "action": function () {
-                                notyf.error("Not implemented yet")
-                            }
-                        },
-                    ]
-                }
-                app.showMenuPanel(menu, event)
-            },
-            deletePreset() {
-                let presets = this.$root.cfg.audio.equalizer.presets
-                bootbox.confirm(app.getLz('term.deletepreset.warn'), (result) => {
-                    if (result) {
-                        this.changePreset("default")
-                        // find the preset by id (preset) and remove it
-                        let index = presets.findIndex(p => p.preset == this.preset)
-                        presets.splice(index, 1)
-                        notyf.success(app.getLz('term.deletedpreset'))
-                    }
-                })
-            },
-            close() {
-                app.resetState()
-            },
-            changeVibrantBass() {
-                if (app.cfg.audio.equalizer.vibrantBass !== '0') {
-                    try {
-                    for (var i = 0; i < 21; i++) {
-                    CiderAudio.audioNodes.vibrantbassNode[i].gain.value = app.cfg.audio.maikiwiAudio.vibrantBass.gain[i] * (app.cfg.audio.equalizer.vibrantBass / 10);
-                    }}
-                    catch(e) {
-                        CiderAudio.hierarchical_loading();
-                    }
-                }
-                
-                else {
-                    CiderAudio.hierarchical_loading();
-                }
-            },
-            changeMix() {
-                if (Math.max(...app.cfg.audio.equalizer.gain) != 0) {
-                    try {
-                        for (var i = 0; i < 10; i++) {
-                        CiderAudio.audioNodes.audioBands[i].gain.value = app.cfg.audio.equalizer.gain[i] * app.cfg.audio.equalizer.mix
-                        }
-                    } catch(e) {CiderAudio.hierarchical_loading();}
-                }
-            },
-            changeGain(i) {
-                if (Math.max(...app.cfg.audio.equalizer.gain) != 0) {
-                    try {CiderAudio.audioNodes.audioBands[i].gain.value = app.cfg.audio.equalizer.gain[i] * app.cfg.audio.equalizer.mix}
-                    catch(e){CiderAudio.hierarchical_loading();}
-                }
-                else {
-                    CiderAudio.hierarchical_loading();
-                }
-            },
-            changeFreq(i) {
-                CiderAudio.audioNodes.audioBands[i].frequency.value = app.cfg.audio.equalizer.frequencies[i]
-            },
-            changeQ(i) {
-                CiderAudio.audioNodes.audioBands[i].Q.value = app.cfg.audio.equalizer.Q[i]
-            },
-            resetGain() {
-                this.applyPreset({
-                    'frequencies': [32, 63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000],
-                    'gain': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-                    'Q': [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
-                    'mix': 1,
-                    'vibrantBass': 0,
-                })
-                if (app.cfg.audio.equalizer.userGenerated) {
-                    this.saveSelectedPreset()
-                }
-            },
-            addPreset() {
-                let self = this
-                bootbox.prompt(app.getLz('term.newpreset.name'), (res) => {
-                    if (res) {
-                        let eqSettings = Clone(app.cfg.audio.equalizer)
-                        let newPreset = new self.eqPreset()
-                        newPreset.name = res
-                        newPreset.frequencies = eqSettings.frequencies
-                        newPreset.gain = eqSettings.gain
-                        newPreset.Q = eqSettings.Q
-                        newPreset.mix = eqSettings.mix
-                        newPreset.vibrantBass = eqSettings.vibrantBass
-                        app.cfg.audio.equalizer.presets.push(newPreset)
-                        notyf.success(app.getLz('term.addedpreset'))
-                        self.changePreset(newPreset.preset)
-                    }
-                })
-            },
-            saveSelectedPreset() {
-                // Save the current settings to the selected preset
-                let self = this
-                //let preset = app.cfg.audio.equalizer.presets[app.cfg.audio.equalizer.preset]
-                // find the preset by its id (preset)
-                let preset = app.cfg.audio.equalizer.presets.find(p => p.preset == app.cfg.audio.equalizer.preset)
-                preset.frequencies = app.cfg.audio.equalizer.frequencies
-                preset.gain = app.cfg.audio.equalizer.gain
-                preset.Q = app.cfg.audio.equalizer.Q
-                preset.mix = app.cfg.audio.equalizer.mix
-                preset.vibrantBass = app.cfg.audio.equalizer.vibrantBass
-                notyf.success("Saved Preset")
-            },
-            exportPreset() {
-                const preset = app.cfg.audio.equalizer.presets.find(p => p.preset == app.cfg.audio.equalizer.preset)
-                const jsonObj = {"name": preset.name, "author": app.chrome.userinfo.attributes.name, "frequency": preset.frequencies, "gain": preset.gain, "q": preset.Q, "mix": preset.mix, "vibrantBass": preset.vibrantBass};
-                ipcRenderer.send("export-eq", jsonObj)
-            },
-            importPreset() {
-                ipcRenderer.sendSync("import-eq").then((result) => {
-                    let newPreset = new self.eqPreset()
-                    newPreset.name = result.name
-                    newPreset.author = result.author
-                    newPreset.frequencies = result.frequency
-                    newPreset.gain = result.gain
-                    newPreset.Q = result.q
-                    newPreset.mix = result.mix
-                    newPreset.vibrantBass = result.vibrantBass
-                    app.cfg.audio.equalizer.presets.push(newPreset)
-                    notyf.success("Imported preset " + result.name)
-                }).catch(err => {
-                    console.error("[EQ Import] " + err)
-                    notyf.error("Could not import preset")
-                })
-            },
-            applyPreset(preset) {
-                Object.assign(this.$root.cfg.audio.equalizer, preset)
-                this.changeVibrantBass()
-                for (var i = 0; i < 10; i++) {
-                    this.changeGain(i)
-                    this.changeFreq(i)
-                    this.changeQ(i)
-                }
-            },
-            changePreset(id) {
-                let userPresets = app.cfg.audio.equalizer.presets
-                let defaultPresets = Clone(this.defaultPresets)
-
-                let presets = defaultPresets.concat(userPresets)
-                console.log(presets)
-                let preset = presets.find(p => p.preset == id)
-
-                console.log(preset)
-
-                if (preset) {
-                    this.applyPreset(preset)
-                }
-            }
-        }
-    });
+<script type="text/x-template" id="eq-view">
+    <div class="modal-fullscreen equalizer-panel" @click.self="close()" @contextmenu.self="close()">
+        <div class="modal-window" >
+            <div class="modal-header">
+                <div class="modal-title">{{$root.getLz('term.equalizer')}}</div>
+                <button class="close-btn" @click="close()"></button>
+                <div class="md-option-segment md-option-segment_auto">
+                    <select class="md-select" style="width:220px;text-align:center;margin-right:245px" v-model="$root.cfg.audio.equalizer.preset" v-on:change="changePreset($root.cfg.audio.equalizer.preset)">
+                        <optgroup :label="$root.getLz('term.userPresets')">
+                            <option v-for="preset in $root.cfg.audio.equalizer.presets" :value="preset.preset">{{preset.name}}</option>
+                        </optgroup>
+                        <optgroup :label="$root.getLz('term.defaultPresets')">
+                            <option v-for="preset in defaultPresets" :value="preset.preset">{{preset.name}}</option>
+                        </optgroup>
+                    </select>
+                </div>
+            </div>
+            <div class="modal-content">
+                <!-- BANDS = [60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000]; -->
+                <div class="inputs-container">
+                    <div class="input-container mini">
+                        {{$root.cfg.audio.equalizer.vibrantBass}}
+                        <input tabindex="0" type="range" class="eq-slider mini" orient="vertical" min="-15" max="15" step="1" v-model="$root.cfg.audio.equalizer.vibrantBass" @change="changeVibrantBass()">
+                        Vibrant Bass
+                    </div>
+                    <div class="input-container mini">
+                        {{$root.cfg.audio.equalizer.mix}}
+                        <input tabindex="0" type="range" class="eq-slider mini" orient="vertical" min="0" max="2" step="0.1" v-model="$root.cfg.audio.equalizer.mix" @change="changeMix()">
+                        Mix
+                    </div>
+                    <div class="input-container header mini">
+                        Gain
+                        <input type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" >
+                        <div class="freq-header">Freq</div>
+                        <div>Q</div>
+                    </div>
+                    <div class="input-container">
+                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[0]" @change="changeGain(0)">
+                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[0]" @change="changeGain(0)">
+                        <input type="number" class="eq-freq" orient="vertical" min="22" max="44" step="2" v-model="$root.cfg.audio.equalizer.frequencies[0]" @change="changeFreq(0)">
+                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[0]" @change="changeQ(0)">
+                    </div>
+                    <div class="input-container">
+                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[1]" @change="changeGain(1)">
+                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[1]" @change="changeGain(1)">
+                        <input type="number" class="eq-freq" orient="vertical" min="44" max="88" step="4" v-model="$root.cfg.audio.equalizer.frequencies[1]" @change="changeFreq(1)">
+                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[1]" @change="changeQ(1)">
+                    </div>
+                    <div class="input-container">
+                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[2]" @change="changeGain(2)">
+                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[2]" @change="changeGain(2)">
+                        <input type="number" class="eq-freq" orient="vertical" min="88" max="177" step="8" v-model="$root.cfg.audio.equalizer.frequencies[2]" @change="changeFreq(2)">
+                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[2]" @change="changeQ(2)">    
+                    </div>
+                    <div class="input-container">
+                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[3]" @change="changeGain(3)">
+                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[3]" @change="changeGain(3)">
+                        <input type="number" class="eq-freq" orient="vertical" min="177" max="355" step="16" v-model="$root.cfg.audio.equalizer.frequencies[3]" @change="changeFreq(3)">
+                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[3]" @change="changeQ(3)">
+                    </div>
+                    <div class="input-container">
+                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[4]" @change="changeGain(4)">
+                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[4]" @change="changeGain(4)">
+                        <input type="number" class="eq-freq" orient="vertical" min="355" max="710" step="32" v-model="$root.cfg.audio.equalizer.frequencies[4]" @change="changeFreq(4)">
+                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[4]" @change="changeQ(4)">
+                    </div>
+                    <div class="input-container">
+                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[5]" @change="changeGain(5)">
+                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[5]" @change="changeGain(5)">
+                        <input type="number" class="eq-freq" orient="vertical" min="710" max="1420" step="64" v-model="$root.cfg.audio.equalizer.frequencies[5]" @change="changeFreq(5)">
+                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[5]" @change="changeQ(5)">
+                    </div>
+                    <div class="input-container">
+                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[6]" @change="changeGain(6)">
+                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[6]" @change="changeGain(6)">
+                        <input type="number" class="eq-freq" orient="vertical" min="1420" max="2840" step="128" v-model="$root.cfg.audio.equalizer.frequencies[6]" @change="changeFreq(6)">
+                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[6]" @change="changeQ(6)">
+                    </div>
+                    <div class="input-container">
+                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[7]" @change="changeGain(7)">
+                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[7]" @change="changeGain(7)">
+                        <input type="number" class="eq-freq" orient="vertical" min="2840" max="5680" step="256" v-model="$root.cfg.audio.equalizer.frequencies[7]" @change="changeFreq(7)">
+                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[7]" @change="changeQ(7)">
+                    </div>
+                    <div class="input-container">
+                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[8]" @change="changeGain(8)">
+                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[8]" @change="changeGain(8)">
+                        <input type="number" class="eq-freq" orient="vertical" min="5680" max="11360" step="512" v-model="$root.cfg.audio.equalizer.frequencies[8]" @change="changeFreq(8)">
+                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[8]" @change="changeQ(8)">
+                    </div>
+                    <div class="input-container">
+                        <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[9]" @change="changeGain(9)">
+                        <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[9]" @change="changeGain(9)">
+                        <input type="number" class="eq-freq" orient="vertical" min="11360" max="22720" step="1024" v-model="$root.cfg.audio.equalizer.frequencies[9]" @change="changeFreq(9)">
+                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[9]" @change="changeQ(9)">
+                    </div>
+                </div>
+                
+            </div>    
+            <div class="modal-lowercontent">
+                <div class="row">
+                    <div class="col">
+                        <button class="md-btn" style="width:100%" @click="resetGain()">{{$root.getLz('term.reset')}}</button>
+                    </div>
+                    <div class="col">
+                        <button class="md-btn" style="width:100%" @click="presetOptions($event)">{{$root.getLz('term.menu')}}</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</script>
+
+<script>
+    Vue.component('eq-view', {
+        template: '#eq-view',
+        data: function () {
+            return {
+                // app: this.$root,
+                eqPreset: function () {
+                    this.preset = uuidv4()
+                    this.name = ""
+                    this.frequencies = []
+                    this.gain = []
+                    this.Q = []
+                    this.mix = 1
+                    this.vibrantBass = 0
+                    this.userGenerated = true
+                },
+                defaultPresets: [
+                    {
+                    'preset': 'default',
+                    'name': 'Default',
+                    'frequencies': [32, 63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000],
+                    'gain': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+                    'Q': [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+                    'mix': 1,
+                    'vibrantBass': 0,
+                    'userGenerated': false
+                }, {
+                    'preset': 'boostAiriness',
+                    'name': 'Boost Airiness',
+                    'frequencies': [1169, 1733, 5962, 8688, 14125, 18628, 18628, 19000, 19500, 20000],
+                    'gain': [-1.41, 0.25, 3.33, 0.22, -0.53, 0.2, 3.64, 0, 0, 0],
+                    'Q': [0.405, 2.102, 0.025, 2.5, 7.071, 1.768, 1.146, 1, 1, 1],
+                    'mix': 1,
+                    'vibrantBass': 0,
+                    'userGenerated': false
+                }, {
+                    'preset': 'acoustic',
+                    'name': 'Acoustic',
+                    'frequencies': [32, 75, 125, 220, 700, 1000, 2000, 4000, 10000, 16000],
+                    'gain': [0, -8, 0, -0.1, -3, 0, 0, 0, 4, 0],
+                    'Q': [1, 0.2, 1, 2.0, 1.4, 1, 1, 1, 0.1, 1],
+                    'mix': 1,
+                    'vibrantBass': 0,
+                    'userGenerated': false
+                }, {
+                    'preset': 'clearVocal',
+                    'name': 'Clear Vocal',
+                    'frequencies': [20, 63, 125, 250, 400, 1000, 2000, 4000, 8000, 20000],
+                    'gain': [-22, 0, 0, 0, -3, 0, 1.8, 0, 0, 3.5],
+                    'Q': [0.3, 1, 1, 1, 2.0, 1, 0.7, 1, 1, 0.8],
+                    'mix': 1,
+                    'vibrantBass': 0,
+                    'userGenerated': false
+                }, {
+                    'preset': 'instrumentClarity',
+                    'name': 'Instrument Clarity',
+                    'frequencies': [20, 63, 155, 250, 500, 1000, 2000, 5000, 11000, 16000],
+                    'gain': [-15, 0, -3, 0, 0, 0, 0, 3.1, 0, 0],
+                    'Q': [0.5, 1, 2, 1, 1, 1, 1, 1.5, 0.1, 1],
+                    'mix': 1,
+                    'vibrantBass': 0,
+                    'userGenerated': false
+                }, {
+                    'preset': 'reduceHarshness',
+                    'name': 'Reduce Harshness',
+                    'frequencies': [32, 63, 125, 250, 500, 1128, 2000, 4057, 8000, 16000],
+                    'gain': [0, 0, 0, 0, 0, 2, 0, -6.4, 0, 0],
+                    'Q': [1, 1, 1, 1, 1, 2, 1, 1, 1, 1],
+                    'mix': 1,
+                    'vibrantBass': 0,
+                    'userGenerated': false
+                }, {
+                    'preset': 'smileyFace',
+                    'name': 'Smiley Face',
+                    'frequencies': [35, 63, 125, 250, 500, 800, 2000, 4000, 8000, 20000],
+                    'gain': [5, 0, 0, 0, 0, -5, 0, 0, 0, 5],
+                    'Q': [0.1, 1, 1, 1, 1, 0.6, 1, 1, 1, 0.2],
+                    'mix': 1,
+                    'vibrantBass': 0,
+                    'userGenerated': false
+                }, 
+                {
+                    'preset': 'bassBoostSurgical',
+                    'name': 'Surgical Bass Boost',
+                    'frequencies': [32, 63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000],
+                    'gain': [2.7, 2.2, 1.6, 1.4, 0.6, 0, 0, 0, 0, 0],
+                    'Q': [1.4, 1.4, 1.4, 1.4, 1.4, 1, 1, 1, 1, 1],
+                    'mix': 1,
+                    'vibrantBass': 0,
+                    'userGenerated': false
+                }, {
+                    'preset': 'bassBoostClassic',
+                    'name': 'Classic Bass Boost',
+                    'frequencies': [32, 63, 160, 250, 500, 1000, 2000, 3500, 8000, 20000],
+                    'gain': [2.7, 2.2, 1.6, 1.4, 0.6, 0, 0, 0, 0, 0],
+                    'Q': [0.7, 0.7, 0.7, 0.7, 0.7, 1, 1, 1, 1, 1],
+                    'mix': 1,
+                    'vibrantBass': 0,
+                    'userGenerated': false
+                }]
+            }
+        },
+        props: ["src", "url"],
+        mounted() {
+        },
+        methods: {
+            presetOptions(event) {
+                let menu = {
+                    items: {
+                        "new": {
+                            "icon": "./assets/feather/plus.svg",
+                            "name": app.getLz('action.newpreset'),
+                            action: () => {
+                                this.addPreset()
+                            }
+                        },
+                        "delete": {
+                            "icon": "./assets/feather/x-circle.svg",
+                            "name": app.getLz('action.deletepreset'),
+                            action: () => {
+                                this.deletePreset()
+                            }
+                        },
+                        "import": {
+                            "icon": "./assets/feather/share.svg",
+                            "name": app.getLz('action.import'),
+                            action: () => {
+                                notyf.error("Not implemented yet")
+                            }
+                        },
+                        "export": {
+                            "icon": "./assets/feather/share.svg",
+                            "name": app.getLz('action.export'),
+                            action: () => {
+                                notyf.error("Not implemented yet")
+                            }
+                        },
+                    }
+                }
+
+                if(!this.$root.cfg.audio.equalizer.userGenerated) {
+                    delete menu.items.delete
+                }
+
+                app.showMenuPanel(menu, event)
+            },
+            sharePreset(event) {
+                let menu = {
+                    items: [
+                        {
+                            "icon": "./assets/feather/share.svg",
+                            "name": app.getLz('action.import'),
+                            "action": function () {
+                                notyf.error("Not implemented yet")
+                            }
+                        },
+                        {
+                            "icon": "./assets/feather/share.svg",
+                            "name": app.getLz('action.export'),
+                            "action": function () {
+                                notyf.error("Not implemented yet")
+                            }
+                        },
+                    ]
+                }
+                app.showMenuPanel(menu, event)
+            },
+            deletePreset() {
+                let presets = this.$root.cfg.audio.equalizer.presets
+                bootbox.confirm(app.getLz('term.deletepreset.warn'), (result) => {
+                    if (result) {
+                        this.changePreset("default")
+                        // find the preset by id (preset) and remove it
+                        let index = presets.findIndex(p => p.preset == this.preset)
+                        presets.splice(index, 1)
+                        notyf.success(app.getLz('term.deletedpreset'))
+                    }
+                })
+            },
+            close() {
+                app.resetState()
+            },
+            changeVibrantBass() {
+                if (app.cfg.audio.equalizer.vibrantBass !== '0') {
+                    try {
+                    for (var i = 0; i < 21; i++) {
+                    CiderAudio.audioNodes.vibrantbassNode[i].gain.value = app.cfg.audio.maikiwiAudio.vibrantBass.gain[i] * (app.cfg.audio.equalizer.vibrantBass / 10);
+                    CiderAudio.intelliGainComp_h0_0();}}                   
+                    catch(e) {
+                        CiderAudio.hierarchical_loading();
+                    }
+                }
+                
+                else {
+                    CiderAudio.hierarchical_loading();
+                }
+            },
+            changeMix() {
+                if (Math.max(...app.cfg.audio.equalizer.gain) != 0) {
+                    try {
+                        for (var i = 0; i < 10; i++) {
+                        CiderAudio.audioNodes.audioBands[i].gain.value = app.cfg.audio.equalizer.gain[i] * app.cfg.audio.equalizer.mix
+                        }
+                        CiderAudio.intelliGainComp_h0_0();
+                    } catch(e) {CiderAudio.hierarchical_loading(); }
+                }
+            },
+            changeGain(i) {
+                if (Math.max(...app.cfg.audio.equalizer.gain) != 0) {
+                    try {CiderAudio.audioNodes.audioBands[i].gain.value = app.cfg.audio.equalizer.gain[i] * app.cfg.audio.equalizer.mix
+                        CiderAudio.intelliGainComp_h0_0();}
+                    catch(e){CiderAudio.hierarchical_loading();}
+                }
+                else {
+                    CiderAudio.hierarchical_loading();
+                }
+            },
+            changeFreq(i) {
+                CiderAudio.audioNodes.audioBands[i].frequency.value = app.cfg.audio.equalizer.frequencies[i]
+            },
+            changeQ(i) {
+                CiderAudio.audioNodes.audioBands[i].Q.value = app.cfg.audio.equalizer.Q[i]
+            },
+            resetGain() {
+                this.applyPreset({
+                    'frequencies': [32, 63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000],
+                    'gain': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+                    'Q': [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+                    'mix': 1,
+                    'vibrantBass': 0,
+                })
+                if (app.cfg.audio.equalizer.userGenerated) {
+                    this.saveSelectedPreset()
+                }
+            },
+            addPreset() {
+                let self = this
+                bootbox.prompt(app.getLz('term.newpreset.name'), (res) => {
+                    if (res) {
+                        let eqSettings = Clone(app.cfg.audio.equalizer)
+                        let newPreset = new self.eqPreset()
+                        newPreset.name = res
+                        newPreset.frequencies = eqSettings.frequencies
+                        newPreset.gain = eqSettings.gain
+                        newPreset.Q = eqSettings.Q
+                        newPreset.mix = eqSettings.mix
+                        newPreset.vibrantBass = eqSettings.vibrantBass
+                        app.cfg.audio.equalizer.presets.push(newPreset)
+                        notyf.success(app.getLz('term.addedpreset'))
+                        self.changePreset(newPreset.preset)
+                    }
+                })
+            },
+            saveSelectedPreset() {
+                // Save the current settings to the selected preset
+                let self = this
+                //let preset = app.cfg.audio.equalizer.presets[app.cfg.audio.equalizer.preset]
+                // find the preset by its id (preset)
+                let preset = app.cfg.audio.equalizer.presets.find(p => p.preset == app.cfg.audio.equalizer.preset)
+                preset.frequencies = app.cfg.audio.equalizer.frequencies
+                preset.gain = app.cfg.audio.equalizer.gain
+                preset.Q = app.cfg.audio.equalizer.Q
+                preset.mix = app.cfg.audio.equalizer.mix
+                preset.vibrantBass = app.cfg.audio.equalizer.vibrantBass
+                notyf.success("Saved Preset")
+            },
+            exportPreset() {
+                const preset = app.cfg.audio.equalizer.presets.find(p => p.preset == app.cfg.audio.equalizer.preset)
+                const jsonObj = {"name": preset.name, "author": app.chrome.userinfo.attributes.name, "frequency": preset.frequencies, "gain": preset.gain, "q": preset.Q, "mix": preset.mix, "vibrantBass": preset.vibrantBass};
+                ipcRenderer.send("export-eq", jsonObj)
+            },
+            importPreset() {
+                ipcRenderer.sendSync("import-eq").then((result) => {
+                    let newPreset = new self.eqPreset()
+                    newPreset.name = result.name
+                    newPreset.author = result.author
+                    newPreset.frequencies = result.frequency
+                    newPreset.gain = result.gain
+                    newPreset.Q = result.q
+                    newPreset.mix = result.mix
+                    newPreset.vibrantBass = result.vibrantBass
+                    app.cfg.audio.equalizer.presets.push(newPreset)
+                    notyf.success("Imported preset " + result.name)
+                }).catch(err => {
+                    console.error("[EQ Import] " + err)
+                    notyf.error("Could not import preset")
+                })
+            },
+            applyPreset(preset) {
+                Object.assign(this.$root.cfg.audio.equalizer, preset)
+                this.changeVibrantBass()
+                for (var i = 0; i < 10; i++) {
+                    this.changeGain(i)
+                    this.changeFreq(i)
+                    this.changeQ(i)
+                }
+            },
+            changePreset(id) {
+                let userPresets = app.cfg.audio.equalizer.presets
+                let defaultPresets = Clone(this.defaultPresets)
+
+                let presets = defaultPresets.concat(userPresets)
+                console.log(presets)
+                let preset = presets.find(p => p.preset == id)
+
+                console.log(preset)
+
+                if (preset) {
+                    this.applyPreset(preset)
+                }
+            }
+        }
+    });
 </script>
\ No newline at end of file