Various refactors and cleanups

resources/assets/js/components/main-wrapper/extra/index.vue

@@ -65,8 +65,8 @@ export default {
      * to/from the html tag.
      * Some element's CSS can then be controlled based on this class.
      */
-    'state.showExtraPanel' (newVal) {
-      if (newVal && !isMobile.any) {
+    'state.showExtraPanel' (showingExtraPanel) {
+      if (showingExtraPanel && !isMobile.any) {
         $.addClass(document.documentElement, 'with-extra-panel')
       } else {
         $.removeClass(document.documentElement, 'with-extra-panel')

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

@@ -90,10 +90,8 @@ export default {
      * and move all of them into another album.
      * We should then go back to the album list.
      */
-    'album.songs.length' (newVal) {
-      if (!newVal) {
-        router.go('albums')
-      }
+    'album.songs.length' (newSongCount) {
+      newSongCount || router.go('albums')
     }
   },
 
@@ -110,9 +108,7 @@ export default {
         this.info.showing = false
         this.album = album
         // #530
-        this.$nextTick(() => {
-          this.$refs.songList.sort()
-        })
+        this.$nextTick(() => this.$refs.songList.sort())
       }
     })
   },

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

@@ -102,9 +102,7 @@ export default {
         this.info.showing = false
         this.artist = artist
         // #530
-        this.$nextTick(() => {
-          this.$refs.songList.sort()
-        })
+        this.$nextTick(() => this.$refs.songList.sort())
       }
     })
   },

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

@@ -75,9 +75,7 @@ export default {
       if (view === 'playlist') {
         this.playlist = playlist
         // #530
-        this.$nextTick(() => {
-          this.$refs.songList.sort()
-        })
+        this.$nextTick(() => this.$refs.songList.sort())
       }
     })
   },

resources/assets/js/components/shared/user-item.vue

@@ -53,12 +53,7 @@ export default {
      * If the user is the current logged-in user, redirect to the profile screen instead.
      */
     edit () {
-      if (this.isCurrentUser) {
-        router.go('profile')
-        return
-      }
-
-      this.$emit('editUser', this.user)
+      this.isCurrentUser ? router.go('profile') : this.$emit('editUser', this.user)
     },
 
     /**

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

@@ -217,9 +217,7 @@ export default {
   },
 
   mounted () {
-    event.on('equalizer:init', player => {
-      isAudioContextSupported() && this.init(player)
-    })
+    event.on('equalizer:init', player => isAudioContextSupported() && this.init(player))
   }
 }
 </script>

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

@@ -128,11 +128,7 @@ export default {
      * If the current song is the stub, just play the first song in the queue.
      */
     resume () {
-      if (!this.song.id) {
-        return playback.playFirstInQueue()
-      }
-
-      playback.resume()
+      this.song.id ? playback.resume() : playback.playFirstInQueue()
     },
 
     /**

resources/assets/js/mixins/has-song-list.js

@@ -2,7 +2,7 @@
  * Add necessary functionalities into a view that contains a song-list component.
  */
 
-import { assign } from 'lodash'
+import { assignIn } from 'lodash'
 import isMobile from 'ismobilejs'
 
 import { playback } from '../services'
@@ -33,7 +33,7 @@ export default {
     },
 
     updateMeta (meta) {
-      this.meta = assign(this.meta, meta)
+      assignIn(this.meta, meta)
     },
 
     shuffleAll () {

resources/assets/js/mixins/infinite-scroll.js

@@ -16,10 +16,10 @@ export default {
   },
 
   methods: {
-    scrolling (e) {
+    scrolling ({ target: { scrollTop, clientHeight, scrollHeight }}) {
       // Here we check if the user has scrolled to the end of the wrapper (or 32px to the end).
       // If that's true, load more items.
-      if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight - 32) {
+      if (scrollTop + clientHeight >= scrollHeight - 32) {
         this.displayMore()
       }
     },

resources/assets/js/services/info/album.js

@@ -16,8 +16,8 @@ export const albumInfo = {
         return
       }
 
-      http.get(`album/${album.id}/info`, response => {
-        response.data && this.merge(album, response.data)
+      http.get(`album/${album.id}/info`, ({ data }) => {
+        data && this.merge(album, data)
         resolve(album)
       }, error => reject(error))
     })

resources/assets/js/services/info/artist.js

@@ -13,8 +13,8 @@ export const artistInfo = {
         return
       }
 
-      http.get(`artist/${artist.id}/info`, response => {
-        response.data && this.merge(artist, response.data)
+      http.get(`artist/${artist.id}/info`, ({ data }) => {
+        data && this.merge(artist, data)
         resolve(artist)
       }, error => reject(error))
     })

resources/assets/js/services/playback.js

@@ -3,7 +3,7 @@ import plyr from 'plyr'
 import Vue from 'vue'
 import isMobile from 'ismobilejs'
 
-import { event } from '../utils'
+import { event, isMediaSessionSupported } from '../utils'
 import { queueStore, sharedStore, userStore, songStore, preferenceStore as preferences } from '../stores'
 import config from '../config'
 import router from '../router'
@@ -43,12 +43,7 @@ export const playback = {
         songStore.scrobble(queueStore.current)
       }
 
-      if (preferences.repeatMode === 'REPEAT_ONE') {
-        this.restart()
-        return
-      }
-
-      this.playNext()
+      preferences.repeatMode === 'REPEAT_ONE' ? this.restart() : this.playNext()
     })
 
     /**
@@ -84,7 +79,7 @@ export const playback = {
     // Init the equalizer if supported.
     event.emit('equalizer:init', this.player.media)
 
-    if ('mediaSession' in navigator) {
+    if (isMediaSessionSupported()) {
       navigator.mediaSession.setActionHandler('play', () => this.resume())
       navigator.mediaSession.setActionHandler('pause', () => this.pause())
       navigator.mediaSession.setActionHandler('previoustrack', () => this.playPrev())
@@ -189,10 +184,8 @@ export const playback = {
    * @return {Object} The song
    */
   get next () {
-    const next = queueStore.next
-
-    if (next) {
-      return next
+    if (queueStore.next) {
+      return queueStore.next
     }
 
     if (preferences.repeatMode === 'REPEAT_ALL') {
@@ -207,10 +200,8 @@ export const playback = {
    * @return {Object} The song
    */
   get previous () {
-    const prev = queueStore.previous
-
-    if (prev) {
-      return prev
+    if (queueStore.previous) {
+      return queueStore.previous
     }
 
     if (preferences.repeatMode === 'REPEAT_ALL') {
@@ -246,14 +237,9 @@ export const playback = {
     }
 
     const prev = this.previous
-
-    if (!prev && preferences.repeatMode === 'NO_REPEAT') {
-      this.stop()
-
-      return
-    }
-
-    this.play(prev)
+    !prev && preferences.repeatMode === 'NO_REPEAT'
+      ? this.stop()
+      : this.play(prev)
   },
 
   /**
@@ -262,15 +248,9 @@ export const playback = {
    */
   playNext () {
     const next = this.next
-
-    if (!next && preferences.repeatMode === 'NO_REPEAT') {
-      //  Nothing lasts forever, even cold November rain.
-      this.stop()
-
-      return
-    }
-
-    this.play(next)
+    !next && preferences.repeatMode === 'NO_REPEAT'
+      ? this.stop() //  Nothing lasts forever, even cold November rain.
+      : this.play(next)
   },
 
   /**
@@ -372,13 +352,7 @@ export const playback = {
    * If the current queue is empty, try creating it by shuffling all songs.
    */
   playFirstInQueue () {
-    if (!queueStore.all.length) {
-      this.queueAndPlay()
-
-      return
-    }
-
-    this.play(queueStore.first)
+    queueStore.all.length ? this.play(queueStore.first) : this.queueAndPlay()
   },
 
   /**
@@ -387,13 +361,10 @@ export const playback = {
    * @param  {Object}     artist   The artist object
    * @param  {Boolean=true}   shuffled Whether to shuffle the songs
    */
-  playAllByArtist (artist, shuffled = true) {
-    if (!shuffled) {
-      this.queueAndPlay(orderBy(artist.songs, 'album_id', 'track'))
-      return
-    }
-
-    this.queueAndPlay(artist.songs, true)
+  playAllByArtist ({ songs }, shuffled = true) {
+    shuffled
+      ? this.queueAndPlay(songs, true)
+      : this.queueAndPlay(orderBy(songs, 'album_id', 'track'))
   },
 
   /**
@@ -402,12 +373,9 @@ export const playback = {
    * @param  {Object}     album  The album object
    * @param  {Boolean=true}   shuffled Whether to shuffle the songs
    */
-  playAllInAlbum (album, shuffled = true) {
-    if (!shuffled) {
-      this.queueAndPlay(orderBy(album.songs, 'track'))
-      return
-    }
-
-    this.queueAndPlay(album.songs, true)
+  playAllInAlbum ({ songs }, shuffled = true) {
+    shuffled
+      ? this.queueAndPlay(songs, true)
+      : this.queueAndPlay(orderBy(songs, 'track'))
   }
 }

resources/assets/js/services/youtube.js

@@ -15,11 +15,13 @@ export const youtube = {
 
     const pageToken = song.youtube.nextPageToken || ''
     return new Promise((resolve, reject) => {
-      http.get(`youtube/search/song/${song.id}?pageToken=${pageToken}`, ({ data }) => {
-        song.youtube.nextPageToken = data.nextPageToken
-        song.youtube.items.push(...data.items)
-        resolve()
-      }, error => reject(error))
+      http.get(`youtube/search/song/${song.id}?pageToken=${pageToken}`,
+        ({ data: { nextPageToken, items }}) => {
+          song.youtube.nextPageToken = nextPageToken
+          song.youtube.items.push(...items)
+          resolve()
+        }, error => reject(error)
+      )
     })
   },
 

resources/assets/js/stores/song.js

@@ -89,9 +89,7 @@ export const songStore = {
       song.album.playCount += song.playCount
       song.artist.playCount += song.playCount
 
-      if (song.liked) {
-        favoriteStore.add(song)
-      }
+      song.liked && favoriteStore.add(song)
     })
   },
 

resources/assets/js/utils/supports.js

@@ -34,13 +34,20 @@ export function isAudioContextSupported () {
 
 /**
  * Checks if HTML5 clipboard can be used.
- *
  * @return {Boolean}
  */
 export function isClipboardSupported () {
   return 'execCommand' in document
 }
 
+/**
+ * Checks if Media Session API is supported.
+ * @return {Boolean}
+ */
+export function isMediaSessionSupported () {
+  return 'mediaSession' in navigator
+}
+
 /**
  * A simple event bus.
  *