Fix equalizer bugs

package.json

@@ -42,7 +42,7 @@
     "rangeslider.js": "^2.1.1",
     "rangetouch": "0.0.9",
     "sinon": "^1.17.2",
-    "vue": "^2.0.0-alpha.6",
+    "vue": "^2.0.0-alpha.7",
     "vue-hot-reload-api": "^1.3.2",
     "vue-resource": "^0.7.0",
     "vueify": "^9.1.0",

resources/assets/js/components/site-footer/equalizer.vue

@@ -1,10 +1,9 @@
 <template>
   <div id="equalizer">
     <div class="presets">
-      <label class="select-wrapper" @change="loadPreset">
+      <label class="select-wrapper">
         <select v-model="selectedPresetIndex">
-          <option value="-1">Preset</option>
-          <option v-for="(preset, idx) in presets" :value="idx">{{ preset.name }}</option>
+          <option v-for="p in presets" :value="p.id" v-once>{{ p.name }}</option>
         </select>
       </label>
     </div>
@@ -34,14 +33,14 @@
           step="0.01"
           data-orientation="vertical"
           :value="band.filter.gain.value">
-        <label v-once="band.label"></label>
+        <label>{{ band.label }}</label>
       </span>
     </div>
   </div>
 </template>
 
 <script>
-import { map } from 'lodash';
+import { map, cloneDeep } from 'lodash';
 import $ from 'jquery';
 import rangeslider from 'rangeslider.js';
 
@@ -53,21 +52,37 @@ export default {
     return {
       idx: 0,
       bands: [],
-      selectedPresetIndex: -1,
       preampGainValue: 0,
-
-      presets: equalizerStore.presets,
+      selectedPresetIndex: -1,
     };
   },
 
+  computed: {
+    presets() {
+      let clonedPreset = cloneDeep(equalizerStore.presets);
+      // Prepend an empty option for instruction purpose.
+      clonedPreset.unshift({
+        id: -1,
+        name: 'Preset',
+      });
+      return clonedPreset;
+    },
+  },
+
   watch: {
     /**
-     * Save the selected preset (index) into local storage every time the value's changed.
-     *
-     * @param  {Number} val
+     * Watch selectedPresetIndex and trigger our logic.
+     * @param {Number} val
      */
     selectedPresetIndex(val) {
+      /**
+       * Save the selected preset (index) into local storage every time the value's changed.
+       */
       preferences.selectedPreset = val;
+
+      if (Number.parseInt(val, 10) !== -1) {
+        this.loadPreset(equalizerStore.getPresetById(val));
+      }
     },
   },
 
@@ -78,7 +93,6 @@ export default {
      * @param  {Element} player The audio player's DOM.
      */
     init(player) {
-      this.selectedPresetIndex = preferences.selectedPreset;
       const settings = equalizerStore.get();
 
       const AudioContext = window.AudioContext ||
@@ -125,6 +139,9 @@ export default {
       prevFilter.connect(context.destination);
 
       this.$nextTick(this.createRangeSliders);
+
+      // Now we set this value to trigger the audio processing.
+      this.selectedPresetIndex = preferences.selectedPreset;
     },
 
     /**
@@ -188,13 +205,7 @@ export default {
     /**
      * Load a preset when the user select it from the dropdown.
      */
-    loadPreset() {
-      if (Number.parseInt(this.selectedPresetIndex, 10) === -1) {
-        return;
-      }
-
-      const preset = this.presets[this.selectedPresetIndex];
-
+    loadPreset(preset) {
       $('#equalizer input[type=range]').each((i, input) => {
         // We treat our preamp slider differently.
         if ($(input).parents('.band').is('.preamp')) {

resources/assets/js/stores/equalizer.js

@@ -1,79 +1,99 @@
+import { find } from 'lodash';
+
 import { preferenceStore } from '.';
 
 export const equalizerStore = {
   presets: [
     {
+      id: 0,
       name: 'Default',
       preamp: 0,
       gains: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
     },
     {
+      id: 1,
       name: 'Classical',
       preamp: -1,
       gains: [-1, -1, -1, -1, -1, -1, -7, -7, -7, -9],
     },
     {
+      id: 2,
       name: 'Club',
       preamp: -6.7,
       gains: [-1, -1, 8, 5, 5, 5, 3, -1, -1, -1],
     },
     {
+      id: 3,
       name: 'Dance',
       preamp: -4.3,
       gains: [9, 7, 2, -1, -1, -5, -7, -7, -1, -1],
     },
     {
+      id: 4,
       name: 'Full Bass',
       preamp: -7.2,
       gains: [-8, 9, 9, 5, 1, -4, -8, -10, -11, -11]
     },
     {
+      id: 5,
       name: 'Full Treble',
       preamp: -12,
       gains: [-9, -9, -9, -4, 2, 11, 16, 16, 16, 16]
     },
     {
+      id: 6,
       name: 'Headphone',
       preamp: -8,
       gains: [4, 11, 5, -3, -2, 1, 4, 9, 12, 14]
     },
     {
+      id: 7,
       name: 'Large Hall',
       preamp: -7.2,
       gains: [10, 10, 5, 5, -1, -4, -4, -4, -1, -1],
     },
     {
+      id: 8,
       name: 'Live',
       preamp: -5.3,
       gains: [-4, -1, 4, 5, 5, 5, 4, 2, 2, 2],
     },
     {
+      id: 9,
       name: 'Pop',
       preamp: -6.2,
       gains: [-1, 4, 7, 8, 5, -1, -2, -2, -1, -1],
     },
     {
+      id: 10,
       name: 'Reggae',
       preamp: -8.2,
       gains: [-1, -1, -1, -5, -1, 6, 6, -1, -1, -1],
     },
     {
+      id: 11,
       name: 'Rock',
       preamp: -10,
       gains: [8, 4, -5, -8, -3, 4, 8, 11, 11, 11],
     },
     {
+      id: 12,
       name: 'Soft Rock',
       preamp: -5.3,
       gains: [4, 4, 2, -1, -4, -5, -3, -1, 2, 8],
     },
     {
+      id: 13,
       name: 'Techno',
       preamp: -7.7,
       gains: [8, 5, -1, -5, -4, -1, 8, 9, 9, 8],
     },
   ],
 
+  getPresetById(id) {
+    return find(this.presets, { id });
+  },
+
   /**
    * Get the current equalizer config.
    *
@@ -85,7 +105,7 @@ export const equalizerStore = {
     }
 
     // If the user chose a preset (instead of customizing one), just return it.
-    return this.presets[preferenceStore.selectedPreset];
+    return this.getPresetById(preferenceStore.selectedPreset)
   },
 
   /**