Use lodash's each because performance

resources/assets/js/components/main-wrapper/main-content/profile.vue

@@ -104,6 +104,7 @@
 </template>
 
 <script>
+import { each } from 'lodash'
 import { userStore, preferenceStore, sharedStore } from '../../../stores'
 import { forceReloadWindow, $ } from '../../../utils'
 import { http, ls } from '../../../services'
@@ -127,13 +128,16 @@ export default {
     update () {
       // A little validation put in a small place.
       if ((this.pwd || this.confirmPwd) && this.pwd !== this.confirmPwd) {
-        document.querySelectorAll('#inputProfilePassword, #inputProfileConfirmPassword')
-          .forEach(el => $.addClass(el, 'error'))
+        each(
+          document.querySelectorAll('#inputProfilePassword, #inputProfileConfirmPassword'),
+          el => $.addClass(el, 'error')
+        )
         return
       }
 
-      document.querySelectorAll('#inputProfilePassword, #inputProfileConfirmPassword')
-          .forEach(el => $.removeClass(el, 'error'))
+      each(document.querySelectorAll('#inputProfilePassword, #inputProfileConfirmPassword'), el => {
+        $.removeClass(el, 'error')
+      })
 
       userStore.updateProfile(this.pwd).then(() => {
         this.pwd = ''

resources/assets/js/components/shared/song-menu.vue

@@ -30,8 +30,9 @@
 </template>
 
 <script>
-import songMenuMethods from '../../mixins/song-menu-methods'
+import { each } from 'lodash'
 
+import songMenuMethods from '../../mixins/song-menu-methods'
 import { event, isClipboardSupported, copyText } from '../../utils'
 import { sharedStore, songStore, queueStore, userStore, playlistStore } from '../../stores'
 import { playback, download } from '../../services'
@@ -154,7 +155,7 @@ export default {
    * they don't appear off-screen.
    */
   mounted () {
-    this.$el.querySelectorAll('.has-sub').forEach(item => {
+    each(this.$el.querySelectorAll('.has-sub'), item => {
       const submenu = item.querySelector('.submenu')
       if (!submenu) {
         return

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

@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import { map, cloneDeep } from 'lodash'
+import { map, cloneDeep, each } from 'lodash'
 import nouislider from 'nouislider'
 
 import { isAudioContextSupported, event, $ } from '../../utils'
@@ -98,7 +98,7 @@ export default {
 
       // Create 10 bands with the frequencies similar to those of Winamp and connect them together.
       const frequencies = [60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000]
-      frequencies.forEach((frequency, i) => {
+      each(frequencies, (frequency, i) => {
         const filter = context.createBiquadFilter()
 
         if (i === 0) {
@@ -135,7 +135,7 @@ export default {
      */
     createSliders () {
       const config = equalizerStore.get()
-      document.querySelectorAll('#equalizer .slider').forEach((el, i) => {
+      each(document.querySelectorAll('#equalizer .slider'), (el, i) => {
         nouislider.create(el, {
           connect: [false, true],
           // the first element is the preamp. The rest are gains.
@@ -192,7 +192,7 @@ export default {
      * Load a preset when the user select it from the dropdown.
      */
     loadPreset (preset) {
-      document.querySelectorAll('#equalizer .slider').forEach((el, i) => {
+      each(document.querySelectorAll('#equalizer .slider'), (el, i) => {
         // We treat our preamp slider differently.
         if ($.is(el.parentNode, '.preamp')) {
           this.changePreampGain(preset.preamp)

resources/assets/js/mixins/song-menu-methods.js

@@ -1,3 +1,5 @@
+import { each } from 'lodash'
+
 import { queueStore, playlistStore, favoriteStore } from '../stores'
 
 /**
@@ -22,7 +24,7 @@ export default {
      * Close all submenus.
      */
     close () {
-      this.$el.querySelectorAll('.submenu').forEach(el => {
+      each(this.$el.querySelectorAll('.submenu'), el => {
         el.style.display = 'none'
       })
       this.shown = false

resources/assets/js/router.js

@@ -1,4 +1,5 @@
 import isMobile from 'ismobilejs'
+import { each } from 'lodash'
 
 import { loadMainView } from './utils'
 import { artistStore, albumStore, songStore, queueStore, playlistStore, userStore } from './stores'
@@ -95,7 +96,7 @@ export default {
       return this.go('home')
     }
 
-    Object.keys(this.routes).forEach(route => {
+    each(Object.keys(this.routes), route => {
       const matches = window.location.hash.match(new RegExp(`^#!${route}$`))
       if (matches) {
         const [, ...params] = matches

resources/assets/js/stores/song.js

@@ -162,7 +162,7 @@ export const songStore = {
   guess (title, album) {
     title = slugify(title.toLowerCase())
     let found = false
-    album.songs.forEach(song => {
+    each(album.songs, song => {
       if (slugify(song.title.toLowerCase()) === title) {
         found = song
       }

resources/assets/js/utils/supports.js

@@ -1,5 +1,6 @@
 import isMobile from 'ismobilejs'
 import Vue from 'vue'
+import { each } from 'lodash'
 
 /**
  * Check if AudioContext is supported by the current browser.
@@ -65,7 +66,7 @@ const event = {
     if (arguments.length === 2) {
       this.bus.$on(arguments[0], arguments[1])
     } else {
-      Object.keys(arguments[0]).forEach(key => {
+      each(Object.keys(arguments[0]), key => {
         this.bus.$on(key, arguments[0][key])
       })
     }