From 086f52761ae34737aa932f583ac2e33ce24d5941 Mon Sep 17 00:00:00 2001
From: An Phan <me@phanan.net>
Date: Sat, 14 Jan 2017 21:09:38 +0800
Subject: [PATCH 1/2] Implemented virtual scroll for desktop

---
 composer.lock                                 |  54 ++-
 package.json                                  |   2 +
 .../main-wrapper/main-content/index.vue       |   2 +-
 .../assets/js/components/shared/song-item.vue |  61 ++-
 .../js/components/shared/song-list-header.vue |  44 --
 .../shared/song-list-virtual-scroller.vue     | 150 -------
 .../assets/js/components/shared/song-list.vue | 390 +++++++++---------
 resources/assets/js/main.js                   |   3 +
 resources/assets/js/services/playback.js      |   8 +-
 resources/assets/js/services/youtube.js       |   6 +-
 yarn.lock                                     | 345 ++++++++++------
 11 files changed, 509 insertions(+), 556 deletions(-)
 delete mode 100644 resources/assets/js/components/shared/song-list-header.vue
 delete mode 100644 resources/assets/js/components/shared/song-list-virtual-scroller.vue

diff --git a/composer.lock b/composer.lock
index 6ab91e75..4e92c439 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,8 +4,8 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
         "This file is @generated automatically"
     ],
-    "hash": "f79521ac890ccb2cd8adb3e05124f2ca",
-    "content-hash": "2df0199a58da73ea5f5bdd18b128bd78",
+    "hash": "2765714b2784ee8330870d671e24d978",
+    "content-hash": "257f7945ff8c69813d8e4a1afda2a884",
     "packages": [
         {
             "name": "aws/aws-sdk-php",
@@ -1493,6 +1493,56 @@
             ],
             "time": "2015-01-28 21:50:33"
         },
+        {
+            "name": "predis/predis",
+            "version": "v1.1.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/nrk/predis.git",
+                "reference": "f0210e38881631afeafb56ab43405a92cafd9fd1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/nrk/predis/zipball/f0210e38881631afeafb56ab43405a92cafd9fd1",
+                "reference": "f0210e38881631afeafb56ab43405a92cafd9fd1",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.9"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "~4.8"
+            },
+            "suggest": {
+                "ext-curl": "Allows access to Webdis when paired with phpiredis",
+                "ext-phpiredis": "Allows faster serialization and deserialization of the Redis protocol"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Predis\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Daniele Alessandri",
+                    "email": "suppakilla@gmail.com",
+                    "homepage": "http://clorophilla.net"
+                }
+            ],
+            "description": "Flexible and feature-complete Redis client for PHP and HHVM",
+            "homepage": "http://github.com/nrk/predis",
+            "keywords": [
+                "nosql",
+                "predis",
+                "redis"
+            ],
+            "time": "2016-06-16 16:22:20"
+        },
         {
             "name": "psr/http-message",
             "version": "1.0.1",
diff --git a/package.json b/package.json
index 34d79be8..277be85e 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,8 @@
     "select": "^1.0.6",
     "slugify": "^1.0.2",
     "vue": "^2.0.1",
+    "vue-virtual-scroller": "^0.5.0",
+    "vuequery": "^1.0.0",
     "youtube-player": "^3.0.4"
   },
   "devDependencies": {
diff --git a/resources/assets/js/components/main-wrapper/main-content/index.vue b/resources/assets/js/components/main-wrapper/main-content/index.vue
index 1e8ee08d..9b02bc80 100644
--- a/resources/assets/js/components/main-wrapper/main-content/index.vue
+++ b/resources/assets/js/components/main-wrapper/main-content/index.vue
@@ -147,7 +147,7 @@ export default {
     bottom: -20px;
     filter: blur(20px);
     opacity: .07;
-    z-index: 0;
+    z-index: 2;
     overflow: hidden;
     background-size: cover;
     background-position: center;
diff --git a/resources/assets/js/components/shared/song-item.vue b/resources/assets/js/components/shared/song-item.vue
index aab3b14d..0eb30024 100644
--- a/resources/assets/js/components/shared/song-item.vue
+++ b/resources/assets/js/components/shared/song-item.vue
@@ -3,14 +3,14 @@
     class="song-item"
     draggable="true"
     :data-song-id="song.id"
-    @click="clicked($event)"
+    @click="clicked"
     @dblclick.prevent="playRightAwayyyyyyy"
-    @dragstart="$parent.dragStart(song.id, $event)"
-    @dragleave="$parent.removeDroppableState($event)"
-    @dragover.prevent="$parent.allowDrop(song.id, $event)"
-    @drop.stop.prevent="$parent.handleDrop(song.id, $event)"
-    @contextmenu.prevent="$parent.openContextMenu(song.id, $event)"
-    :class="{ selected: selected, playing: playing }"
+    @dragstart="dragStart"
+    @dragleave="removeDroppableState"
+    @dragover.prevent="allowDrop"
+    @drop.stop.prevent="handleDrop"
+    @contextmenu.prevent="openContextMenu"
+    :class="{ selected: item.selected, playing: playing }"
   >
     <td class="track-number">{{ song.track || '' }}</td>
     <td class="title">{{ song.title }}</td>
@@ -27,22 +27,36 @@
 <script>
 import { playback } from '../../services'
 import { queueStore } from '../../stores'
+import $v from 'vuequery'
 
 export default {
-  props: ['song'],
+  props: ['item'],
+  name: 'song-item',
 
   data () {
     return {
-      selected: false
+      parentSongList: null
     }
   },
 
   computed: {
+    /**
+     * A shortcut to access the current vm's song (instead of this.item.song).
+     * @return {Object}
+     */
+    song () {
+      return this.item.song
+    },
+
     playing () {
       return this.song.playbackState === 'playing' || this.song.playbackState === 'paused'
     }
   },
 
+  created () {
+    this.parentSongList = $v(this).closest('song-list').vm
+  },
+
   methods: {
     /**
      * Play the song right away.
@@ -72,23 +86,33 @@ export default {
       }
     },
 
-    clicked ($e) {
-      this.$emit('itemClicked', this.song.id, $e)
+    clicked (event) {
+      this.parentSongList.rowClicked(this, event)
     },
 
-    select () {
-      this.selected = true
+    dragStart (event) {
+      this.parentSongList.dragStart(this, event)
     },
 
-    deselect () {
-      this.selected = false
+    removeDroppableState (event) {
+      this.parentSongList.removeDroppableState(event)
     },
 
     /**
-     * Toggle the "selected" state of the current component.
+     * Add a "droppable" class and set the drop effect when other songs are dragged over the row.
+     *
+     * @param {Object} event The dragover event.
      */
-    toggleSelectedState () {
-      this.selected = !this.selected
+    allowDrop (event) {
+      this.parentSongList.allowDrop(event)
+    },
+
+    handleDrop (event) {
+      this.parentSongList.handleDrop(this, event)
+    },
+
+    openContextMenu (event) {
+      this.parentSongList.openContextMenu(this, event)
     }
   }
 }
@@ -100,6 +124,7 @@ export default {
 
 .song-item {
   border-bottom: 1px solid $color2ndBgr;
+  height: 35px;
 
   html.no-touchevents &:hover {
     background: rgba(255, 255, 255, .05);
diff --git a/resources/assets/js/components/shared/song-list-header.vue b/resources/assets/js/components/shared/song-list-header.vue
deleted file mode 100644
index 6869757e..00000000
--- a/resources/assets/js/components/shared/song-list-header.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <thead>
-    <tr>
-      <th @click="sort('track')" class="track-number">#
-        <i class="fa fa-angle-down" v-show="sortKey === 'track' && order > 0"/>
-        <i class="fa fa-angle-up" v-show="sortKey === 'track' && order < 0"/>
-      </th>
-      <th @click="sort('title')" class="title">Title
-        <i class="fa fa-angle-down" v-show="sortKey === 'title' && order > 0"/>
-        <i class="fa fa-angle-up" v-show="sortKey === 'title' && order < 0"/>
-      </th>
-      <th @click="sort(['album.artist.name', 'album.name', 'track'])" class="artist">Artist
-        <i class="fa fa-angle-down" v-show="sortingByArtist && order > 0"/>
-        <i class="fa fa-angle-up" v-show="sortingByArtist && order < 0"/>
-      </th>
-      <th @click="sort(['album.name', 'track'])" class="album">Album
-        <i class="fa fa-angle-down" v-show="sortingByAlbum && order > 0"/>
-        <i class="fa fa-angle-up" v-show="sortingByAlbum && order < 0"/>
-      </th>
-      <th @click="sort('length')" class="time">Time
-        <i class="fa fa-angle-down" v-show="sortKey === 'length' && order > 0"/>
-        <i class="fa fa-angle-up" v-show="sortKey === 'length' && order < 0"/>
-      </th>
-      <th class="play"></th>
-    </tr>
-  </thead>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      sortKey: '',
-      order: 1
-    }
-  },
-
-  methods: {
-    sort (key) {
-      console.log(this.$parent.$parent)
-    }
-  }
-}
-</script>
diff --git a/resources/assets/js/components/shared/song-list-virtual-scroller.vue b/resources/assets/js/components/shared/song-list-virtual-scroller.vue
deleted file mode 100644
index 4b8713ec..00000000
--- a/resources/assets/js/components/shared/song-list-virtual-scroller.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<template>
-  <div class="virtual-scroller" @scroll="updateVisibleItems">
-    <div class="item-container" :style="itemContainerStyle">
-      <table class="items song-list-wrap">
-        <component class="item"
-          v-for="item in visibleItems"
-          :key="item.id"
-          :is="renderers[item[typeField]]"
-          :item="item" />
-      </table>
-    </div>
-
-    <iframe ref="resizeObserver" class="resize-observer" tabindex="-1"></iframe>
-  </div>
-</template>
-
-<script>
-import { debounce } from 'lodash'
-
-export default {
-  name: 'virtual-scroller',
-  props: {
-    items: {
-      type: Array,
-      required: true
-    },
-    renderers: {
-      required: true
-    },
-    itemHeight: {
-      type: [Number, String],
-      required: true
-    },
-    typeField: {
-      type: String,
-      default: 'type'
-    },
-    keyField: {
-      type: String,
-      default: 'id'
-    }
-  },
-
-  data () {
-    return {
-      visibleItems: [],
-      itemContainerStyle: null
-    }
-  },
-
-  watch: {
-    items () {
-      this.updateVisibleItems()
-    },
-  },
-
-  methods: {
-    updateVisibleItems: debounce(function () {
-      const l = this.items.length
-      const el = this.$el
-      const scroll = {
-        top: el.scrollTop,
-        bottom: el.scrollTop + el.clientHeight
-      }
-
-      this._startIndex = Math.floor(scroll.top / this.itemHeight)
-      this._endIndex = Math.ceil(scroll.bottom / this.itemHeight)
-
-      let startIndex = this._startIndex - 1
-      if (startIndex < 0) {
-        startIndex = 0
-      }
-
-      let endIndex = this._endIndex + 2
-      if (endIndex > l) {
-        endIndex = l
-      }
-
-      this.visibleItems = this.items.slice(startIndex, endIndex)
-      this.itemContainerStyle = {
-        height: l * this.itemHeight + 'px',
-        paddingTop: startIndex * this.itemHeight + 'px',
-      }
-
-      this.$forceUpdate()
-    }, 100),
-
-    scrollToItem (index) {
-      this.$el.scrollTop = index * this.itemHeight
-    },
-
-    addResizeHandlers () {
-      const iframe = this.$refs.resizeObserver
-      const w = iframe.contentWindow
-      // If the iframe is re-attached to the DOM, the resize listener is removed because the
-      // content is reloaded, so make sure to install the handler after the iframe is loaded.
-      iframe.addEventListener('load', this.refreshResizeHandlers)
-      if (w) {
-        w.addEventListener('resize', this.updateVisibleItems)
-        w.addEventListener('close', this.removeResizeHandlers)
-      }
-    },
-
-    removeResizeHandlers () {
-      const iframe = this.$refs.resizeObserver
-      const w = iframe.contentWindow
-      iframe.removeEventListener('load', this.refreshResizeHandlers)
-      if (w) {
-        w.removeEventListener('resize', this.updateVisibleItems)
-        w.removeEventListener('close', this.removeResizeHandlers)
-      }
-    },
-
-    refreshResizeHandlers () {
-      this.removeResizeHandlers()
-      this.addResizeHandlers()
-      // The iframe size might have changed while loading, which can also
-      // happen if the size has been changed while detached from the DOM.
-      this.updateVisibleItems()
-    },
-  },
-
-  mounted () {
-    this.updateVisibleItems()
-    this.addResizeHandlers()
-  }
-}
-</script>
-
-<style scoped>
-.virtual-scroller {
-  overflow-y: auto;
-  position: relative;
-}
-
-.item-container {
-  box-sizing: border-box;
-}
-
-.resize-observer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  width: 100%;
-  height: 100%;
-  border: none;
-  background-color: transparent;
-}
-</style>
diff --git a/resources/assets/js/components/shared/song-list.vue b/resources/assets/js/components/shared/song-list.vue
index 43de0827..3d486727 100644
--- a/resources/assets/js/components/shared/song-list.vue
+++ b/resources/assets/js/components/shared/song-list.vue
@@ -2,81 +2,79 @@
   <div class="song-list-wrap main-scroll-wrap" :class="type"
     ref="wrapper"
     tabindex="1"
-    @scroll="scrolling"
     @keydown.delete.prevent.stop="handleDelete"
     @keydown.enter.prevent.stop="handleEnter"
     @keydown.a.prevent="handleA"
   >
-    <table v-show="items.length">
+    <table class="song-list-header">
       <thead>
         <tr>
-          <th @click="sort('track')" class="track-number">#
-            <i class="fa fa-angle-down" v-show="sortKey === 'track' && order > 0"/>
-            <i class="fa fa-angle-up" v-show="sortKey === 'track' && order < 0"/>
+          <th @click="sort('song.track')" class="track-number">#
+            <i class="fa fa-angle-down" v-show="sortKey === 'song.track' && order > 0"/>
+            <i class="fa fa-angle-up" v-show="sortKey === 'song.track' && order < 0"/>
           </th>
-          <th @click="sort('title')" class="title">Title
-            <i class="fa fa-angle-down" v-show="sortKey === 'title' && order > 0"/>
-            <i class="fa fa-angle-up" v-show="sortKey === 'title' && order < 0"/>
+          <th @click="sort('song.title')" class="title">Title
+            <i class="fa fa-angle-down" v-show="sortKey === 'song.title' && order > 0"/>
+            <i class="fa fa-angle-up" v-show="sortKey === 'song.title' && order < 0"/>
           </th>
-          <th @click="sort(['album.artist.name', 'album.name', 'track'])" class="artist">Artist
+          <th @click="sort(['song.album.artist.name', 'song.album.name', 'song.track'])" class="artist">Artist
             <i class="fa fa-angle-down" v-show="sortingByArtist && order > 0"/>
             <i class="fa fa-angle-up" v-show="sortingByArtist && order < 0"/>
           </th>
-          <th @click="sort(['album.name', 'track'])" class="album">Album
+          <th @click="sort(['song.album.name', 'song.track'])" class="album">Album
             <i class="fa fa-angle-down" v-show="sortingByAlbum && order > 0"/>
             <i class="fa fa-angle-up" v-show="sortingByAlbum && order < 0"/>
           </th>
-          <th @click="sort('length')" class="time">Time
-            <i class="fa fa-angle-down" v-show="sortKey === 'length' && order > 0"/>
-            <i class="fa fa-angle-up" v-show="sortKey === 'length' && order < 0"/>
+          <th @click="sort('song.length')" class="time">Time
+            <i class="fa fa-angle-down" v-show="sortKey === 'song.length' && order > 0"/>
+            <i class="fa fa-angle-up" v-show="sortKey === 'song.length' && order < 0"/>
           </th>
           <th class="play"></th>
         </tr>
       </thead>
-
-      <tbody>
-        <tr is="song-item"
-          v-for="item in displayedItems"
-          @itemClicked="itemClicked"
-          :song="item"
-          :key="item.id"
-          ref="rows"/>
-      </tbody>
     </table>
 
+    <virtual-scroller
+      class="scroller"
+      content-tag="table"
+      :items="filteredItems"
+      item-height="35"
+      :renderers="renderers"
+      key-field="song"
+    />
+
     <song-menu ref="contextMenu" :songs="selectedSongs"/>
-    <to-top-button :showing="showBackToTop"/>
   </div>
 </template>
 
 <script>
-import { find, invokeMap, filter, map } from 'lodash'
 import isMobile from 'ismobilejs'
+import { each } from 'lodash'
 
-import { filterBy, orderBy, limitBy, event, pluralize, $ } from '../../utils'
+import { filterBy, orderBy, event, pluralize, $ } from '../../utils'
 import { playlistStore, queueStore, songStore, favoriteStore } from '../../stores'
 import { playback } from '../../services'
 import router from '../../router'
 import songItem from './song-item.vue'
 import songMenu from './song-menu.vue'
-import infiniteScroll from '../../mixins/infinite-scroll'
 
 export default {
   name: 'song-list',
   props: ['items', 'type', 'playlist', 'sortable'],
-  mixins: [infiniteScroll],
   components: { songItem, songMenu },
 
   data () {
     return {
+      renderers: Object.freeze({
+        song: songItem
+      }),
       lastSelectedRow: null,
       q: '', // The filter query
       sortKey: '',
       order: 1,
       sortingByAlbum: false,
       sortingByArtist: false,
-      selectedSongs: [],
-      mutatedItems: []
+      songRows: []
     }
   },
 
@@ -89,13 +87,13 @@ export default {
         this.sortKey = ''
       }
 
-      this.mutatedItems = this.items
-
       // Update the song count and duration status on parent.
       this.$parent.updateMeta({
         songCount: this.items.length,
         totalLength: songStore.getLength(this.items, true)
       })
+
+      this.generateSongRows()
     },
 
     selectedSongs (val) {
@@ -104,19 +102,53 @@ export default {
   },
 
   computed: {
-    displayedItems () {
-      return limitBy(
-        filterBy(
-          this.mutatedItems,
-          this.q,
-          'title', 'album.name', 'artist.name'
-        ),
-        this.numOfItems
+    filteredItems () {
+      return filterBy(
+        this.songRows,
+        this.q,
+        'song.title', 'song.album.name', 'song.artist.name'
       )
+    },
+
+    /**
+     * Determine if the songs in the current list can be reordered by drag-and-dropping.
+     * @return {Boolean}
+     */
+    allowSongReordering () {
+      return this.type === 'queue'
+    },
+
+    /**
+     * Songs that are currently selected (their rows are highlighted).
+     * @return {Array.<Object>}
+     */
+    selectedSongs () {
+      return this.songRows.filter(row => row.selected).map(row => row.song)
     }
   },
 
   methods: {
+    /**
+     * Generate an array of "song row" or "song wrapper" objects. Since song objects themselves are
+     * shared by all song lists, we can't use them directly to determine their selection status
+     * (selected/unselected). Therefore, for each song list, we maintain an array of "song row"
+     * objects, with each object contain the song itself, and the "selected" flag. In order to
+     * comply with virtual-scroller, a "type" attribute also presents.
+     */
+    generateSongRows () {
+      // Since this method re-generates the song wrappers, we need to keep track of  the
+      // selected songs manually.
+      const selectedSongIds = this.selectedSongs.map(song => song.id)
+
+      this.songRows = this.items.map(song => {
+        return {
+          song,
+          selected: selectedSongIds.indexOf(song.id) > -1,
+          type: 'song'
+        }
+      })
+    },
+
     /**
      * Handle sorting the song list.
      *
@@ -129,30 +161,28 @@ export default {
 
       this.sortKey = key
       this.order = 0 - this.order
-      this.sortingByAlbum = Array.isArray(this.sortKey) && this.sortKey[0] === 'album.name'
-      this.sortingByArtist = Array.isArray(this.sortKey) && this.sortKey[0] === 'album.artist.name'
-      this.mutatedItems = orderBy(this.items, this.sortKey, this.order)
+      this.sortingByAlbum = Array.isArray(this.sortKey) && this.sortKey[0] === 'song.album.name'
+      this.sortingByArtist = Array.isArray(this.sortKey) && this.sortKey[0] === 'song.album.artist.name'
+      this.songRows = orderBy(this.songRows, this.sortKey, this.order)
     },
 
     /**
      * Execute the corresponding reaction(s) when the user presses Delete.
      */
     handleDelete () {
-      const songs = this.selectedSongs
-
-      if (!songs.length) {
+      if (!this.selectedSongs.length) {
         return
       }
 
       switch (this.type) {
         case 'queue':
-          queueStore.unqueue(songs)
+          queueStore.unqueue(this.selectedSongs)
           break
         case 'favorites':
-          favoriteStore.unlike(songs)
+          favoriteStore.unlike(this.selectedSongs)
           break
         case 'playlist':
-          playlistStore.removeSongs(this.playlist, songs)
+          playlistStore.removeSongs(this.playlist, this.selectedSongs)
           break
         default:
           break
@@ -164,26 +194,23 @@ export default {
     /**
      * Execute the corresponding reaction(s) when the user presses Enter.
      *
-     * @param {Object} e The keydown event.
+     * @param {Event} event The keydown event.
      */
-    handleEnter (e) {
-      const songs = this.selectedSongs
-
-      if (!songs.length) {
+    handleEnter (event) {
+      if (!this.selectedSongs.length) {
         return
       }
 
-      if (songs.length === 1) {
+      if (this.selectedSongs.length === 1) {
         // Just play the song
-        playback.play(songs[0])
-
+        playback.play(this.selectedSongs[0])
         return
       }
 
       switch (this.type) {
         case 'queue':
           // Play the first song selected if we're in Queue screen.
-          playback.play(songs[0])
+          playback.play(this.selectedSongs[0])
           break
         case 'favorites':
         case 'playlist':
@@ -200,119 +227,93 @@ export default {
           // Also, if there's only one song selected, play it right away.
           // --------------------------------------------------------------------
           //
-          queueStore.queue(songs, false, e.shiftKey)
+          queueStore.queue(this.selectedSongs, false, event.shiftKey)
 
           this.$nextTick(() => {
             router.go('queue')
 
-            if (e.ctrlKey || e.metaKey || songs.length === 1) {
-              playback.play(songs[0])
+            if (event.ctrlKey || event.metaKey || this.selectedSongs.length === 1) {
+              playback.play(this.selectedSongs[0])
             }
           })
 
           break
       }
-
-      this.clearSelection()
-    },
-
-    /**
-     * Get the song-item component that's associated with a song ID.
-     *
-     * @param  {String} id The song ID.
-     *
-     * @return {Object}  The Vue compoenent
-     */
-    getComponentBySongId (id) {
-      return find(this.$refs.rows, { song: { id }})
     },
 
     /**
      * Capture A keydown event and select all if applicable.
      *
-     * @param {Object} e The keydown event.
+     * @param {Event} event The keydown event.
      */
-    handleA (e) {
-      if (!e.metaKey && !e.ctrlKey) {
+    handleA (event) {
+      if (!event.metaKey && !event.ctrlKey) {
         return
       }
 
-      invokeMap(this.$refs.rows, 'select')
-      this.gatherSelected()
+      this.selectAllRows()
     },
 
     /**
-     * Gather all selected songs.
-     *
-     * @return {Array.<Object>} An array of Song objects
+     * Select all rows in the current list.
      */
-    gatherSelected () {
-      const selectedRows = filter(this.$refs.rows, { selected: true })
-      const ids = map(selectedRows, row => row.song.id)
-
-      this.selectedSongs = songStore.byIds(ids)
+    selectAllRows () {
+      each(this.songRows, row => {
+        row.selected = true
+      })
     },
 
-    /**
-     * -----------------------------------------------------------
-     * The next four methods are to deal with selection.
-     *
-     * Credits: http://stackoverflow.com/a/17966381/794641 by andyb
-     * -----------------------------------------------------------
-     */
-
     /**
      * Handle the click event on a row to perform selection.
      *
-     * @param  {String} songId
-     * @param  {Object} e
+     * @param  {VueComponent} rowVm
+     * @param  {Event} e
      */
-    itemClicked (songId, e) {
-      const row = this.getComponentBySongId(songId)
-
+    rowClicked (rowVm, event) {
       // If we're on a touch device, or if Ctrl/Cmd key is pressed, just toggle selection.
       if (isMobile.any) {
-        this.toggleRow(row)
-        this.gatherSelected()
-
+        this.toggleRow(rowVm)
         return
       }
 
-      if (e.ctrlKey || e.metaKey) {
-        this.toggleRow(row)
+      if (event.ctrlKey || event.metaKey) {
+        this.toggleRow(rowVm)
       }
 
-      if (e.button === 0) {
-        if (!e.ctrlKey && !e.metaKey && !e.shiftKey) {
+      if (event.button === 0) {
+        if (!(event.ctrlKey || event.metaKey || event.shiftKey)) {
           this.clearSelection()
-          this.toggleRow(row)
+          this.toggleRow(rowVm)
         }
 
-        if (e.shiftKey && this.lastSelectedRow && this.lastSelectedRow.$el) {
-          this.selectRowsBetweenIndexes([this.lastSelectedRow.$el.rowIndex, row.$el.rowIndex])
+        if (event.shiftKey && this.lastSelectedRow) {
+          this.selectRowsBetween(this.lastSelectedRow, rowVm)
         }
       }
-
-      this.gatherSelected()
     },
 
     /**
      * Toggle select/unslect a row.
      *
-     * @param  {Object} row The song-item component
+     * @param  {VueComponent} rowVm The song-item component
      */
-    toggleRow (row) {
-      row.toggleSelectedState()
-      this.lastSelectedRow = row
+    toggleRow (rowVm) {
+      rowVm.item.selected = !rowVm.item.selected
+      this.lastSelectedRow = rowVm
     },
 
-    selectRowsBetweenIndexes (indexes) {
+    /**
+     * Select all rows between two rows.
+     *
+     * @param  {VueComponent} firstRowVm  The first row's component
+     * @param  {VueComponent} secondRowVm The second row's component
+     */
+    selectRowsBetween (firstRowVm, secondRowVm) {
+      const indexes = [this.songRows.indexOf(firstRowVm.item), this.songRows.indexOf(secondRowVm.item)]
       indexes.sort((a, b) => a - b)
 
-      const rows = this.$refs.wrapper.querySelectorAll('tbody tr')
-
       for (let i = indexes[0]; i <= indexes[1]; ++i) {
-        this.getComponentBySongId(rows[i - 1].getAttribute('data-song-id')).select()
+        this.songRows[i].selected = true
       }
     },
 
@@ -320,8 +321,9 @@ export default {
      * Clear the current selection on this song list.
      */
     clearSelection () {
-      invokeMap(this.$refs.rows, 'deselect')
-      this.gatherSelected()
+      each(this.songRows, row => {
+        row.selected = false
+      })
     },
 
     /**
@@ -329,42 +331,40 @@ export default {
      * Even though the event is triggered on one row only, we'll collect other
      * selected rows, if any, as well.
      *
-     * @param {Object} e The event.
+     * @param {VueComponent} The row's Vue component
+     * @param {Event} event The event
      */
-    dragStart (songId, e) {
+    dragStart (rowVm, event) {
       // If the user is dragging an unselected row, clear the current selection.
-      const currentRow = this.getComponentBySongId(songId)
-      if (!currentRow.selected) {
+      if (!rowVm.item.selected) {
         this.clearSelection()
-        currentRow.select()
-        this.gatherSelected()
+        rowVm.item.selected = true
       }
 
       this.$nextTick(() => {
-        const songIds = map(this.selectedSongs, 'id')
-        e.dataTransfer.setData('application/x-koel.text+plain', songIds)
-        e.dataTransfer.effectAllowed = 'move'
+        const songIds = this.selectedSongs.map(song => song.id)
+        event.dataTransfer.setData('application/x-koel.text+plain', songIds)
+        event.dataTransfer.effectAllowed = 'move'
 
         // Set a fancy drop image using our ghost element.
         const ghost = document.getElementById('dragGhost')
         ghost.innerText = `${pluralize(songIds.length, 'song')}`
-        e.dataTransfer.setDragImage(ghost, 0, 0)
+        event.dataTransfer.setDragImage(ghost, 0, 0)
       })
     },
 
     /**
      * Add a "droppable" class and set the drop effect when other songs are dragged over a row.
      *
-     * @param {String} songId
-     * @param {Object} e The dragover event.
+     * @param {Event} event The dragover event.
      */
-    allowDrop (songId, e) {
-      if (this.type !== 'queue') {
+    allowDrop (event) {
+      if (!this.allowSongReordering) {
         return
       }
 
-      $.addClass(e.target.parentNode, 'droppable')
-      e.dataTransfer.dropEffect = 'move'
+      $.addClass(event.target.parentNode, 'droppable')
+      event.dataTransfer.dropEffect = 'move'
 
       return false
     },
@@ -372,97 +372,59 @@ export default {
     /**
      * Perform reordering songs upon dropping if the current song list is of type Queue.
      *
-     * @param  {String} songId
-     * @param  {Object} e
+     * @param  {VueComponent} rowVm The row's Vue Component
+     * @param  {Event} event
      */
-    handleDrop (songId, e) {
-      if (this.type !== 'queue') {
-        return this.removeDroppableState(e) && false
+    handleDrop (rowVm, event) {
+      if (
+        !this.allowSongReordering ||
+        !event.dataTransfer.getData('application/x-koel.text+plain') ||
+        !this.selectedSongs.length
+      ) {
+        return this.removeDroppableState(event)
       }
 
-      if (!e.dataTransfer.getData('application/x-koel.text+plain')) {
-        return this.removeDroppableState(e) && false
-      }
+      queueStore.move(this.selectedSongs, rowVm.song)
 
-      const songs = this.selectedSongs
-
-      if (!songs.length) {
-        return this.removeDroppableState(e) && false
-      }
-
-      queueStore.move(songs, songStore.byId(songId))
-
-      return this.removeDroppableState(e) && false
+      return this.removeDroppableState(event)
     },
 
     /**
      * Remove the droppable state (and the styles) from a row.
      *
-     * @param  {Object} e
+     * @param  {Event} event
      */
-    removeDroppableState (e) {
-      $.removeClass(e.target.parentNode, 'droppable')
+    removeDroppableState (event) {
+      $.removeClass(event.target.parentNode, 'droppable')
+      return false
     },
 
-    openContextMenu (songId, e) {
+    /**
+     * Open the context menu.
+     *
+     * @param  {VueComponent} rowVm The right-clicked row's component
+     * @param  {Event} event
+     */
+    openContextMenu (rowVm, event) {
       // If the user is right-clicking an unselected row,
       // clear the current selection and select it instead.
-      const currentRow = this.getComponentBySongId(songId)
-      if (!currentRow.selected) {
+      if (!rowVm.item.selected) {
         this.clearSelection()
-        currentRow.select()
-        this.gatherSelected()
+        rowVm.item.selected = true
       }
 
-      this.$nextTick(() => this.$refs.contextMenu.open(e.pageY, e.pageX))
+      this.$nextTick(() => this.$refs.contextMenu.open(event.pageY, event.pageX))
     }
   },
 
   created () {
     event.on({
-      /**
-       * Listen to song:played event to do some logic.
-       *
-       * @param  {Object} song The current playing song.
-       */
-      'song:played': song => {
-        // If the song is at the end of the current displayed items, load more.
-        if (this.type === 'queue' && this.items.indexOf(song) >= this.numOfItems) {
-          this.displayMore()
-        }
-
-        // Scroll the item into view if it's lost into oblivion.
-        if (this.type === 'queue') {
-          const row = this.$refs.wrapper.querySelector(`.song-item[data-song-id="${song.id}"]`)
-
-          if (!row) {
-            return
-          }
-
-          const wrapperRec = this.$refs.wrapper.getBoundingClientRect()
-          if (wrapperRec.top + wrapperRec.height < row.getBoundingClientRect().top) {
-            this.$refs.wrapper.scrollTop = this.$refs.wrapper.scrollTop + row.offsetTop
-          }
-        }
-      },
-
       /**
        * Listen to 'filter:changed' event to filter the current list.
        */
       'filter:changed': q => {
         this.q = q
-      },
-
-      /**
-       * Clears the current list's selection if the user has switched to another view.
-       */
-      'main-content-view:load': () => this.clearSelection(),
-
-      /**
-       * Listen to 'song:selection-clear' (often broadcasted from the direct parent)
-       * to clear the selected songs.
-       */
-      'song:selection-clear': () => this.clearSelection()
+      }
     })
   }
 }
@@ -474,6 +436,18 @@ export default {
 
 .song-list-wrap {
   position: relative;
+  padding: 8px 24px;
+
+  .song-list-header {
+    position: absolute;
+    top: 0;
+    left: 24px;
+    right: 24px;
+    padding: 0 24px;
+    background: #1b1b1b;
+    z-index: 1;
+    width: calc(100% - 48px);
+  }
 
   table {
     width: 100%;
@@ -541,6 +515,20 @@ export default {
     cursor: default;
   }
 
+  .scroller {
+    overflow: auto;
+    position: absolute;
+    top: 35px;
+    left: 0;
+    bottom: 0;
+    right: 0;
+
+    .item-container {
+      position: absolute;
+      left: 24px;
+      right: 24px;
+    }
+  }
 
   @media only screen and (max-width: 768px) {
     table, tbody, tr {
diff --git a/resources/assets/js/main.js b/resources/assets/js/main.js
index 9c3478df..d5b39e5e 100644
--- a/resources/assets/js/main.js
+++ b/resources/assets/js/main.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Raven from 'raven-js'
 import RavenVue from 'raven-js/plugins/vue'
+import { VirtualScroller } from 'vue-virtual-scroller'
 
 import { event } from './utils'
 import { http } from './services'
@@ -10,6 +11,8 @@ Raven
   .addPlugin(RavenVue, Vue)
   .install()
 
+Vue.component('virtual-scroller', VirtualScroller)
+
 /**
  * For Ancelot, the ancient cross of war
  * for the holy town of Gods
diff --git a/resources/assets/js/services/playback.js b/resources/assets/js/services/playback.js
index 64fd56c4..b153733d 100644
--- a/resources/assets/js/services/playback.js
+++ b/resources/assets/js/services/playback.js
@@ -208,13 +208,13 @@ export const playback = {
    * The selected mode will be stored into local storage as well.
    */
   changeRepeatMode () {
-    let idx = this.repeatModes.indexOf(preferences.repeatMode) + 1
+    let index = this.repeatModes.indexOf(preferences.repeatMode) + 1
 
-    if (idx >= this.repeatModes.length) {
-      idx = 0
+    if (index >= this.repeatModes.length) {
+      index = 0
     }
 
-    preferences.repeatMode = this.repeatModes[idx]
+    preferences.repeatMode = this.repeatModes[index]
   },
 
   /**
diff --git a/resources/assets/js/services/youtube.js b/resources/assets/js/services/youtube.js
index 24c1a14a..a803e260 100644
--- a/resources/assets/js/services/youtube.js
+++ b/resources/assets/js/services/youtube.js
@@ -15,9 +15,9 @@ export const youtube = {
 
     const pageToken = song.youtube.nextPageToken || ''
     return new Promise((resolve, reject) => {
-      http.get(`youtube/search/song/${song.id}?pageToken=${pageToken}`, response => {
-        song.youtube.nextPageToken = response.data.nextPageToken
-        song.youtube.items.push(...response.data.items)
+      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))
     })
diff --git a/yarn.lock b/yarn.lock
index 05ca06d5..6e7dd2ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -86,12 +86,12 @@ after@0.8.2:
   resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
 
 ajv-keywords@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.2.0.tgz#676c4f087bfe1e8b12dca6fda2f3c74f417b099c"
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.0.tgz#c11e6859eafff83e0dafc416929472eca946aa2c"
 
 ajv@^4.7.0:
-  version "4.10.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.10.0.tgz#7ae6169180eb199192a8b9a19fd0f47fc9ac8764"
+  version "4.10.4"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.10.4.tgz#c0974dd00b3464984892d6010aa9c2c945933254"
   dependencies:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
@@ -225,6 +225,13 @@ array-unique@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
 
+array.prototype.find@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.0.1.tgz#1557f888df6c57e4d1256f20852d687a25b51fde"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.5.0"
+
 arraybuffer.slice@0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.6.tgz#f33b2159f0532a3f3107a272c0ccfbd1ad2979ca"
@@ -238,8 +245,8 @@ asap@~2.0.3:
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
 
 asn1.js@^4.0.0:
-  version "4.9.0"
-  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.0.tgz#f71a1243f3e79d46d7b07d7fbf4824ee73af054a"
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
   dependencies:
     bn.js "^4.0.0"
     inherits "^2.0.1"
@@ -257,6 +264,12 @@ assert-plus@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
 
+assert@^1.4.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  dependencies:
+    util "0.10.3"
+
 assert@~1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/assert/-/assert-1.3.0.tgz#03939a622582a812cc202320a0b9a56c9b815849"
@@ -324,14 +337,14 @@ autoprefixer-core@^5.0.0:
     postcss "~4.1.12"
 
 autoprefixer@^6.0.2, autoprefixer@^6.3.1:
-  version "6.5.4"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.4.tgz#1386eb6708ccff36aefff70adc694ecfd60af1b0"
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.6.1.tgz#11a4077abb4b313253ec2f6e1adb91ad84253519"
   dependencies:
-    browserslist "~1.4.0"
-    caniuse-db "^1.0.30000597"
+    browserslist "~1.5.1"
+    caniuse-db "^1.0.30000604"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
-    postcss "^5.2.6"
+    postcss "^5.2.8"
     postcss-value-parser "^3.2.3"
 
 aws-sign2@~0.6.0:
@@ -1002,12 +1015,12 @@ browser-sync-ui@0.6.2:
     weinre "^2.0.0-pre-I0Z7U9OV"
 
 browser-sync@^2.7.10:
-  version "2.18.5"
-  resolved "https://registry.yarnpkg.com/browser-sync/-/browser-sync-2.18.5.tgz#c04b10037289df5157a363d42100069d77e744e9"
+  version "2.18.6"
+  resolved "https://registry.yarnpkg.com/browser-sync/-/browser-sync-2.18.6.tgz#7b303ea8905eaa20629e6c5d3e820c32ad96bb24"
   dependencies:
     browser-sync-client "2.4.4"
     browser-sync-ui "0.6.2"
-    bs-recipes "1.3.2"
+    bs-recipes "1.3.4"
     chokidar "1.6.1"
     connect "3.5.0"
     dev-ip "^1.0.1"
@@ -1152,11 +1165,11 @@ browserify@^11.2.0:
     xtend "^4.0.0"
 
 browserify@^13.0.0:
-  version "13.1.1"
-  resolved "https://registry.yarnpkg.com/browserify/-/browserify-13.1.1.tgz#72a2310e2f706ed87db929cf0ee73a5e195d9bb0"
+  version "13.3.0"
+  resolved "https://registry.yarnpkg.com/browserify/-/browserify-13.3.0.tgz#b5a9c9020243f0c70e4675bec8223bc627e415ce"
   dependencies:
     JSONStream "^1.0.3"
-    assert "~1.3.0"
+    assert "^1.4.0"
     browser-pack "^6.0.1"
     browser-resolve "^1.11.0"
     browserify-zlib "~0.1.2"
@@ -1171,7 +1184,7 @@ browserify@^13.0.0:
     domain-browser "~1.1.0"
     duplexer2 "~0.1.2"
     events "~1.1.0"
-    glob "^5.0.15"
+    glob "^7.1.0"
     has "^1.0.0"
     htmlescape "^1.1.0"
     https-browserify "~0.0.0"
@@ -1189,7 +1202,7 @@ browserify@^13.0.0:
     readable-stream "^2.0.2"
     resolve "^1.1.4"
     shasum "^1.0.0"
-    shell-quote "^1.4.3"
+    shell-quote "^1.6.1"
     stream-browserify "^2.0.0"
     stream-http "^2.0.0"
     string_decoder "~0.10.0"
@@ -1203,11 +1216,11 @@ browserify@^13.0.0:
     vm-browserify "~0.0.1"
     xtend "^4.0.0"
 
-browserslist@^1.0.0, browserslist@^1.0.1, browserslist@~1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.4.0.tgz#9cfdcf5384d9158f5b70da2aa00b30e8ff019049"
+browserslist@^1.0.0, browserslist@^1.0.1, browserslist@~1.5.1:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.5.2.tgz#1c82fde0ee8693e6d15c49b7bff209dc06298c56"
   dependencies:
-    caniuse-db "^1.0.30000539"
+    caniuse-db "^1.0.30000604"
 
 browserslist@~0.4.0:
   version "0.4.0"
@@ -1215,9 +1228,9 @@ browserslist@~0.4.0:
   dependencies:
     caniuse-db "^1.0.30000153"
 
-bs-recipes@1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/bs-recipes/-/bs-recipes-1.3.2.tgz#aebff3bfc9dca4cab3c2938d91e43473cf41b6c1"
+bs-recipes@1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/bs-recipes/-/bs-recipes-1.3.4.tgz#0d2d4d48a718c8c044769fdc4f89592dc8b69585"
 
 buble@^0.12.0:
   version "0.12.5"
@@ -1270,9 +1283,9 @@ builtin-status-codes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-1.0.0.tgz#30637ee262978ac07174e16d7f82f0ad06e085ad"
 
-builtin-status-codes@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-2.0.0.tgz#6f22003baacf003ccd287afe6872151fddc58579"
+builtin-status-codes@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
 
 builtins@0.0.7, builtins@~0.0.3:
   version "0.0.7"
@@ -1315,7 +1328,7 @@ camelcase@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
 
-caniuse-api@^1.3.2:
+caniuse-api@^1.3.2, caniuse-api@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.5.2.tgz#8f393c682f661c0a997b77bba6e826483fb3600e"
   dependencies:
@@ -1325,9 +1338,9 @@ caniuse-api@^1.3.2:
     lodash.uniq "^4.3.0"
     shelljs "^0.7.0"
 
-caniuse-db@^1.0.30000153, caniuse-db@^1.0.30000214, caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000597:
-  version "1.0.30000601"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000601.tgz#073c9d1c62edb399ecc783a7ab40698b5694d2fe"
+caniuse-db@^1.0.30000153, caniuse-db@^1.0.30000214, caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000604:
+  version "1.0.30000604"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000604.tgz#bc139270a777564d19c0aadcd832b491d093bda5"
 
 capture-stack-trace@^1.0.0:
   version "1.0.0"
@@ -1831,8 +1844,8 @@ css@2.X:
     urix "^0.1.0"
 
 cssnano@^3.0.0, cssnano@^3.3.2:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.9.1.tgz#41422bb5390d85a94ad4db03cc1a188bf68744fe"
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
   dependencies:
     autoprefixer "^6.3.1"
     decamelize "^1.1.2"
@@ -1906,12 +1919,9 @@ date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
 
-dateformat@^1.0.11:
-  version "1.0.12"
-  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-1.0.12.tgz#9f124b67594c937ff706932e4a642cca8dbbfee9"
-  dependencies:
-    get-stdin "^4.0.1"
-    meow "^3.3.0"
+dateformat@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-2.0.0.tgz#2743e3abb5c3fc2462e527dca445e04e9f4dee17"
 
 de-indent@^1.0.2:
   version "1.0.2"
@@ -1942,8 +1952,8 @@ debug@2.3.3:
     ms "0.7.2"
 
 debug@2.X, debug@^2.1.1, debug@^2.2.0:
-  version "2.4.5"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.4.5.tgz#34c7b12a1ca96674428f41fe92c49b4ce7cd0607"
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.0.tgz#bc596bcabe7617f11d9fa15361eded5608b8499b"
   dependencies:
     ms "0.7.2"
 
@@ -1975,6 +1985,13 @@ defaults@^1.0.0:
   dependencies:
     clone "^1.0.2"
 
+define-properties@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
+  dependencies:
+    foreach "^2.0.5"
+    object-keys "^1.0.8"
+
 defined@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
@@ -2314,6 +2331,23 @@ error-ex@^1.2.0:
   dependencies:
     is-arrayish "^0.2.1"
 
+es-abstract@^1.5.0:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.6.1.tgz#bb8a2064120abcf928a086ea3d9043114285ec99"
+  dependencies:
+    es-to-primitive "^1.1.1"
+    function-bind "^1.1.0"
+    is-callable "^1.1.3"
+    is-regex "^1.0.3"
+
+es-to-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.1.1.tgz#45355248a88979034b6792e19bb81f2b7975dd0d"
+  dependencies:
+    is-callable "^1.1.1"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.1"
+
 es5-ext@^0.10.7, es5-ext@^0.10.8, es5-ext@~0.10.11, es5-ext@~0.10.2, es5-ext@~0.10.7:
   version "0.10.12"
   resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.12.tgz#aa84641d4db76b62abba5e45fd805ecbab140047"
@@ -2417,9 +2451,10 @@ eslint-plugin-html@^1.5.2:
     htmlparser2 "^3.8.2"
 
 eslint-plugin-react@^6.2.0:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-6.8.0.tgz#741ab5438a094532e5ce1bbb935d6832356f492d"
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-6.9.0.tgz#54c2e9906b76f9d10142030bdc34e9d6840a0bb2"
   dependencies:
+    array.prototype.find "^2.0.1"
     doctrine "^1.2.2"
     jsx-ast-utils "^1.3.4"
 
@@ -2431,8 +2466,8 @@ eslint-plugin-vue@^1.0.0:
     eslint-plugin-react "^6.2.0"
 
 eslint@^3.10.2:
-  version "3.12.2"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.12.2.tgz#6be5a9aa29658252abd7f91e9132bab1f26f3c34"
+  version "3.13.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.13.0.tgz#636925fd163c9babe2e8be7ae43caf518d469577"
   dependencies:
     babel-code-frame "^6.16.0"
     chalk "^1.1.3"
@@ -2464,7 +2499,7 @@ eslint@^3.10.2:
     require-uncached "^1.0.2"
     shelljs "^0.7.5"
     strip-bom "^3.0.0"
-    strip-json-comments "~1.0.1"
+    strip-json-comments "~2.0.1"
     table "^3.7.8"
     text-table "~0.2.0"
     user-home "^2.0.0"
@@ -2613,15 +2648,15 @@ extsprintf@1.0.2:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
 
 fancy-log@^1.0.0, fancy-log@^1.1.0, fancy-log@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/fancy-log/-/fancy-log-1.2.0.tgz#d5a51b53e9ab22ca07d558f2b67ae55fdb5fcbd8"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/fancy-log/-/fancy-log-1.3.0.tgz#45be17d02bb9917d60ccffd4995c999e6c8c9948"
   dependencies:
     chalk "^1.1.1"
     time-stamp "^1.0.0"
 
 fast-levenshtein@~2.0.4:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.5.tgz#bd33145744519ab1c36c3ee9f31f08e9079b67f2"
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
 
 figures@^1.3.5:
   version "1.7.0"
@@ -2799,8 +2834,8 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
 
 fsevents@^1.0.0:
-  version "1.0.15"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.0.15.tgz#fa63f590f3c2ad91275e4972a6cea545fb0aae44"
+  version "1.0.17"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.0.17.tgz#8537f3f12272678765b4fd6528c0f1f66f8f4558"
   dependencies:
     nan "^2.3.0"
     node-pre-gyp "^0.6.29"
@@ -2822,7 +2857,7 @@ fstream@^1.0.0, fstream@^1.0.2, fstream@~1.0.10:
     mkdirp ">=0.5 0"
     rimraf "2"
 
-function-bind@^1.0.2:
+function-bind@^1.0.2, function-bind@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771"
 
@@ -2949,7 +2984,7 @@ glob@^4.0.5, glob@^4.3.1:
     minimatch "^2.0.1"
     once "^1.3.0"
 
-glob@^5.0.14, glob@^5.0.15, glob@^5.0.3:
+glob@^5.0.14, glob@^5.0.3:
   version "5.0.15"
   resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
   dependencies:
@@ -2959,7 +2994,7 @@ glob@^5.0.14, glob@^5.0.15, glob@^5.0.3:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@~7.1.1:
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.0, glob@~7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
   dependencies:
@@ -3075,7 +3110,7 @@ got@^5.0.0:
     unzip-response "^1.0.2"
     url-parse-lax "^1.0.0"
 
-graceful-fs@4.X, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
+graceful-fs@4.X, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
@@ -3247,8 +3282,8 @@ gulp-shell@^0.5.0:
     through2 "^2.0.0"
 
 gulp-sourcemaps@^1.5.2:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-1.9.1.tgz#80ac2d3845d13e68dd962524d8a967a440b0b753"
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-1.9.3.tgz#df37ac54992b220a670dec1a04bf85bf7ae5efb5"
   dependencies:
     acorn "4.X"
     convert-source-map "1.X"
@@ -3275,14 +3310,14 @@ gulp-uglify@^1.5.1:
     vinyl-sourcemaps-apply "^0.2.0"
 
 gulp-util@*, gulp-util@^3.0, gulp-util@^3.0.0, gulp-util@^3.0.2, gulp-util@^3.0.6, gulp-util@^3.0.7:
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.7.tgz#78925c4b8f8b49005ac01a011c557e6218941cbb"
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
   dependencies:
     array-differ "^1.0.0"
     array-uniq "^1.0.2"
     beeper "^1.0.0"
     chalk "^1.0.0"
-    dateformat "^1.0.11"
+    dateformat "^2.0.0"
     fancy-log "^1.1.0"
     gulplog "^1.0.0"
     has-gulplog "^0.1.0"
@@ -3510,8 +3545,8 @@ ignore@^3.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.0.tgz#8d88f03c3002a0ac52114db25d2c673b0bf1e435"
 
 image-size@~0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.0.tgz#be7aed1c37b5ac3d9ba1d66a24b4c47ff8397651"
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.1.tgz#28eea8548a4b1443480ddddc1e083ae54652439f"
 
 immutable@3.8.1, immutable@^3.7.6:
   version "3.8.1"
@@ -3697,6 +3732,14 @@ is-builtin-module@^1.0.0:
   dependencies:
     builtin-modules "^1.0.0"
 
+is-callable@^1.1.1, is-callable@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
+
+is-date-object@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
+
 is-dotfile@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.2.tgz#2c132383f39199f8edc268ca01b9b007d205cc4d"
@@ -3817,6 +3860,10 @@ is-redirect@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
 
+is-regex@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.3.tgz#0d55182bddf9f2fde278220aec3a75642c908637"
+
 is-relative@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-0.2.1.tgz#d27f4c7d516d175fb610db84bbeef23c3bc97aa5"
@@ -3843,6 +3890,10 @@ is-svg@^2.0.0:
   dependencies:
     html-comment-regex "^1.1.0"
 
+is-symbol@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
+
 is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@@ -4010,8 +4061,8 @@ jsonparse@^1.2.0:
   resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.2.0.tgz#5c0c5685107160e72fe7489bddea0b44c2bc67bd"
 
 jsonpointer@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.0.tgz#6661e161d2fc445f19f98430231343722e1fcbd5"
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
 
 jsprim@^1.2.2:
   version "1.3.1"
@@ -4127,8 +4178,8 @@ lcid@^1.0.0:
     invert-kv "^1.0.0"
 
 "less@2.6.x || ^2.7.1":
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/less/-/less-2.7.1.tgz#6cbfea22b3b830304e9a5fb371d54fa480c9d7cf"
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/less/-/less-2.7.2.tgz#368d6cc73e1fb03981183280918743c5dcf9b3df"
   optionalDependencies:
     errno "^0.1.1"
     graceful-fs "^4.1.2"
@@ -4136,6 +4187,7 @@ lcid@^1.0.0:
     mime "^1.2.11"
     mkdirp "^0.5.0"
     promise "^7.1.1"
+    request "^2.72.0"
     source-map "^0.5.3"
 
 levn@^0.3.0, levn@~0.3.0:
@@ -4434,8 +4486,8 @@ lodash@^3.10.1:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
 lodash@^4.0.0, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.6.1:
-  version "4.17.2"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.2.tgz#34a3055babe04ce42467b607d700072c7ff6bf42"
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
 lodash@~1.0.1:
   version "1.0.2"
@@ -4523,7 +4575,7 @@ media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
 
-meow@^3.3.0, meow@^3.7.0:
+meow@^3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
   dependencies:
@@ -4741,8 +4793,8 @@ mute-stream@0.0.6:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.6.tgz#48962b19e169fd1dfc240b3f1e7317627bbc47db"
 
 nan@^2.3.0, nan@^2.3.2:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.4.0.tgz#fb3c59d45fe4effe215f0b890f8adf6eb32d2232"
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.5.0.tgz#aa8f1e34531d807e9e27755b234b4a6ec0c152a8"
 
 natives@^1.1.0:
   version "1.1.0"
@@ -4775,8 +4827,8 @@ next-tick@^1.0.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
 
 node-emoji@^1.4.1:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.4.3.tgz#5272f70b823c4df6d7c39f84fd8203f35b3e5d36"
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.5.0.tgz#9a0d9fe03fd43afa357d6d8e439aa31e599959b7"
   dependencies:
     string.prototype.codepointat "^0.2.0"
 
@@ -4950,7 +5002,7 @@ object-component@0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/object-component/-/object-component-0.0.3.tgz#f0c69aa50efc95b866c186f400a33769cb2f1291"
 
-object-keys@^1.0.4:
+object-keys@^1.0.4, object-keys@^1.0.8:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
 
@@ -5390,8 +5442,8 @@ postcss-colormin@^2.1.8:
     postcss-value-parser "^3.2.3"
 
 postcss-convert-values@^2.3.4:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.5.0.tgz#570aceb04b3061fb25f6f46bd0329e7ab6263c0b"
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.6.0.tgz#08c6d06130fe58a91a21ff50829e1aad6a3a1acc"
   dependencies:
     postcss "^5.0.11"
     postcss-value-parser "^3.1.2"
@@ -5523,10 +5575,12 @@ postcss-merge-longhand@^2.0.1:
     postcss "^5.0.4"
 
 postcss-merge-rules@^2.0.3:
-  version "2.0.11"
-  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.0.11.tgz#c5d7c8de5056a7377aea0dff2fd83f92cafb9b8a"
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.0.tgz#24f28e70e3bdd9d4ffcc9d2814572ba7856df217"
   dependencies:
+    caniuse-api "^1.5.2"
     postcss "^5.0.4"
+    postcss-selector-parser "^2.2.2"
     vendors "^1.0.0"
 
 postcss-message-helpers@^2.0.0:
@@ -5549,8 +5603,8 @@ postcss-minify-gradients@^1.0.1:
     postcss-value-parser "^3.3.0"
 
 postcss-minify-params@^1.0.4:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.1.0.tgz#b6093472b5872a6deda47aa3b0b5b8b973547c50"
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz#ad2ce071373b943b3d930a3fa59a358c28d6f1f3"
   dependencies:
     alphanum-sort "^1.0.1"
     postcss "^5.0.2"
@@ -5558,8 +5612,8 @@ postcss-minify-params@^1.0.4:
     uniqs "^2.0.0"
 
 postcss-minify-selectors@^2.0.4:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.0.7.tgz#bfb9248fe14db33770f036572de6b4897c48d81c"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz#b2c6a98c0072cf91b932d1a496508114311735bf"
   dependencies:
     alphanum-sort "^1.0.2"
     has "^1.0.1"
@@ -5579,8 +5633,8 @@ postcss-normalize-charset@^1.1.0:
     postcss "^5.0.5"
 
 postcss-normalize-url@^3.0.7:
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.7.tgz#6bd90d0a4bc5a1df22c26ea65c53257dc3829f4e"
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz#108f74b3f2fcdaf891a2ffa3ea4592279fc78222"
   dependencies:
     is-absolute-url "^2.0.0"
     normalize-url "^1.4.0"
@@ -5608,15 +5662,15 @@ postcss-pseudoelements@^3.0.0:
     postcss "^5.0.4"
 
 postcss-reduce-idents@^2.2.2:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.3.1.tgz#024e8e219f52773313408573db9645ba62d2d2fe"
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz#c2c6d20cc958284f6abfbe63f7609bf409059ad3"
   dependencies:
     postcss "^5.0.4"
     postcss-value-parser "^3.0.2"
 
 postcss-reduce-initial@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-1.0.0.tgz#8f739b938289ef2e48936d7101783e4741ca9bbb"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz#68f80695f045d08263a879ad240df8dd64f644ea"
   dependencies:
     postcss "^5.0.4"
 
@@ -5656,7 +5710,7 @@ postcss-selector-parser@^1.1.4:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.0:
+postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.0, postcss-selector-parser@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.2.tgz#3d70f5adda130da51c7c0c2fc023f56b1374fe08"
   dependencies:
@@ -5701,9 +5755,9 @@ postcss@^4.1.5, postcss@~4.1.12:
     js-base64 "~2.1.8"
     source-map "~0.4.2"
 
-postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.19, postcss@^5.0.2, postcss@^5.0.21, postcss@^5.0.3, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.8, postcss@^5.1.1, postcss@^5.2.0, postcss@^5.2.6:
-  version "5.2.6"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.6.tgz#a252cd67cd52585035f17e9ad12b35137a7bdd9e"
+postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.19, postcss@^5.0.2, postcss@^5.0.21, postcss@^5.0.3, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.8, postcss@^5.1.1, postcss@^5.2.0, postcss@^5.2.8:
+  version "5.2.9"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.9.tgz#282a644f92d4b871ade2d3ce8bd0ea46f18317b6"
   dependencies:
     chalk "^1.1.3"
     js-base64 "^2.1.9"
@@ -6075,7 +6129,7 @@ replace-ext@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
 
-request@2, request@^2.55.0, request@^2.61.0, request@^2.74.0, request@^2.79.0:
+request@2, request@^2.55.0, request@^2.61.0, request@^2.72.0, request@^2.74.0, request@^2.79.0:
   version "2.79.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
   dependencies:
@@ -6356,7 +6410,7 @@ shasum@^1.0.0:
     json-stable-stringify "~0.0.0"
     sha.js "~2.4.4"
 
-shell-quote@^1.4.2, shell-quote@^1.4.3:
+shell-quote@^1.4.2, shell-quote@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
   dependencies:
@@ -6370,8 +6424,8 @@ shell-quote@~0.0.1:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-0.0.1.tgz#1a41196f3c0333c482323593d6886ecf153dd986"
 
 shelljs@^0.7.0, shelljs@^0.7.5:
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.5.tgz#2eef7a50a21e1ccf37da00df767ec69e30ad0675"
+  version "0.7.6"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.6.tgz#379cccfb56b91c8601e4793356eb5382924de9ad"
   dependencies:
     glob "^7.0.0"
     interpret "^1.0.0"
@@ -6390,8 +6444,8 @@ signal-exit@^3.0.0:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
 
 sinon@^1.17.2:
-  version "1.17.6"
-  resolved "https://registry.yarnpkg.com/sinon/-/sinon-1.17.6.tgz#a43116db59577c8296356afee13fafc2332e58e1"
+  version "1.17.7"
+  resolved "https://registry.yarnpkg.com/sinon/-/sinon-1.17.7.tgz#4542a4f49ba0c45c05eb2e9dd9d203e2b8efe0bf"
   dependencies:
     formatio "1.1.1"
     lolex "1.3.2"
@@ -6415,8 +6469,8 @@ slide@^1.1.5:
   resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
 
 slugify@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.0.2.tgz#dd8e70cdcff737c599d384020eb398596ecfd348"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.1.0.tgz#7e5b0938d52b5efab1878247ef0f6a4f05db7ee0"
 
 sntp@1.x.x:
   version "1.0.9"
@@ -6503,8 +6557,8 @@ snyk-try-require@^1.1.1, snyk-try-require@^1.2.0:
     then-fs "^2.0.0"
 
 snyk@^1.14.3:
-  version "1.22.1"
-  resolved "https://registry.yarnpkg.com/snyk/-/snyk-1.22.1.tgz#11cbac142bb506ed3e4951f388cfe49c8da5183f"
+  version "1.23.3"
+  resolved "https://registry.yarnpkg.com/snyk/-/snyk-1.23.3.tgz#2375b7aec424105febd8806180ea86fd59022681"
   dependencies:
     abbrev "^1.0.7"
     ansi-escapes "^1.3.0"
@@ -6621,8 +6675,8 @@ source-map-resolve@^0.3.0:
     urix "~0.1.0"
 
 source-map-support@^0.4.2:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.6.tgz#32552aa64b458392a85eab3b0b5ee61527167aeb"
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.8.tgz#4871918d8a3af07289182e974e32844327b2e98b"
   dependencies:
     source-map "^0.5.3"
 
@@ -6740,10 +6794,10 @@ stream-http@^1.2.0:
     xtend "^4.0.0"
 
 stream-http@^2.0.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.5.0.tgz#585eee513217ed98fe199817e7313b6f772a6802"
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.6.0.tgz#adf3309ced17624ebfb7ef13e6ac4cfe405a8b12"
   dependencies:
-    builtin-status-codes "^2.0.0"
+    builtin-status-codes "^3.0.0"
     inherits "^2.0.1"
     readable-stream "^2.1.0"
     to-arraybuffer "^1.0.0"
@@ -6862,10 +6916,14 @@ strip-indent@^1.0.1:
   dependencies:
     get-stdin "^4.0.1"
 
-strip-json-comments@~1.0.1, strip-json-comments@~1.0.4:
+strip-json-comments@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
 
+strip-json-comments@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+
 subarg@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"
@@ -6971,8 +7029,8 @@ text-table@~0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
 
 tfunk@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/tfunk/-/tfunk-3.0.2.tgz#327ebc6176af2680c6cd0d6d22297c79d7f96efd"
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/tfunk/-/tfunk-3.1.0.tgz#38e4414fc64977d87afdaa72facb6d29f82f7b5b"
   dependencies:
     chalk "^1.1.1"
     object-path "^0.9.0"
@@ -7030,8 +7088,8 @@ timed-out@^2.0.0:
   resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-2.0.0.tgz#f38b0ae81d3747d628001f41dafc652ace671c0a"
 
 timed-out@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-3.1.0.tgz#43b98b14bb712c9161c28f4dc1f3068d67a04ec2"
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-3.1.3.tgz#95860bfcc5c76c277f8f8326fd0f5b2e20eba217"
 
 timers-browserify@^1.0.1:
   version "1.4.2"
@@ -7177,8 +7235,8 @@ uniq@^1.0.1:
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
 
 uniqid@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-4.1.0.tgz#33d9679f65022f48988a03fd24e7dcaf8f109eca"
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-4.1.1.tgz#89220ddf6b751ae52b5f72484863528596bb84c1"
   dependencies:
     macaddress "^0.2.8"
 
@@ -7436,23 +7494,38 @@ vue-hot-reload-api@^1.3.2:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-1.3.3.tgz#54d22d83786a878493f639cc76bca7992a23be46"
 
 vue-hot-reload-api@^2.0.1:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.0.6.tgz#817d4bfb30f55428aa1012d029499e07f3147d21"
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.0.7.tgz#45bd46cfeee7fd22550b467a76fa0c4a0ceae51b"
+
+vue-observe-visibility@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-0.1.3.tgz#c2f0fcb5c86d5ae244f53c7e28fa635a0db8ba36"
+
+vue-resize@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.1.1.tgz#4b66cd2f0ccccb8f1c926089120358d141a6154b"
 
 vue-template-compiler@^2.0.0-alpha.8:
-  version "2.1.6"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.1.6.tgz#f96f968652fc1e861bb0052f61993ba1fdc18ad3"
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.1.8.tgz#12dd1cc63793f59be580c694a61610cb9369d629"
   dependencies:
     de-indent "^1.0.2"
     he "^1.1.0"
 
 vue-template-es2015-compiler@^1.2.2:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.4.0.tgz#7b88853ca4bf8d84ae54ab9e56771de271e60198"
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.5.0.tgz#e4f672ab1718a3abf9171a080daefac31be117e1"
 
-vue@^2.0.1:
-  version "2.1.6"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.1.6.tgz#2fc0024c07479ac6bc7d34a2cd5ef9ca5e90b143"
+vue-virtual-scroller@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/vue-virtual-scroller/-/vue-virtual-scroller-0.5.1.tgz#a978420643162ed57991be94c9cc8610af72f66e"
+  dependencies:
+    vue-observe-visibility "^0.1.3"
+    vue-resize "^0.1.0"
+
+vue@^2.0.1, vue@^2.1.6:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.1.8.tgz#ae30aa86024fccf5535292ce414e7b4c221a1756"
 
 vueify-insert-css@^1.0.0:
   version "1.0.0"
@@ -7477,6 +7550,12 @@ vueify@^9.1.0:
     vue-template-compiler "^2.0.0-alpha.8"
     vue-template-es2015-compiler "^1.2.2"
 
+vuequery@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vuequery/-/vuequery-1.0.0.tgz#e61317a83c0fb1a265114ff7969a9861a99298fc"
+  dependencies:
+    vue "^2.1.6"
+
 watchify@^3.2.3:
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/watchify/-/watchify-3.8.0.tgz#a5cacc3517ca1e637d7b0af745375cafb597d6bb"
@@ -7508,8 +7587,8 @@ whatwg-encoding@^1.0.1:
     iconv-lite "0.4.13"
 
 whatwg-url@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.1.1.tgz#567074923352de781e3500d64a86aa92a971b4a4"
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.2.0.tgz#abf1a3f5ff4bc2005b3f0c2119382631789d8e44"
   dependencies:
     tr46 "~0.0.3"
     webidl-conversions "^3.0.0"
@@ -7582,10 +7661,10 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
 
 write-file-atomic@^1.1.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-1.2.0.tgz#14c66d4e4cb3ca0565c28cf3b7a6f3e4d5938fab"
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-1.3.1.tgz#7d45ba32316328dd1ec7d90f60ebc0d845bb759a"
   dependencies:
-    graceful-fs "^4.1.2"
+    graceful-fs "^4.1.11"
     imurmurhash "^0.1.4"
     slide "^1.1.5"
 
@@ -7644,8 +7723,8 @@ yargs-parser@^2.4.1:
     lodash.assign "^4.0.6"
 
 yargs-parser@^4.1.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.0.tgz#6ced869cd05a3dca6a1eaee38b68aeed4b0b4101"
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.1.tgz#29cceac0dc4f03c6c87b4a9f217dd18c9f74871c"
   dependencies:
     camelcase "^3.0.0"
 

From 6d94cdea1c57cb57c9fde2a9669029804a7b4c18 Mon Sep 17 00:00:00 2001
From: An Phan <me@phanan.net>
Date: Sat, 14 Jan 2017 21:39:08 +0800
Subject: [PATCH 2/2] Adapt virtual scroller on responsive layouts

---
 .../assets/js/components/shared/song-item.vue |  2 +-
 .../assets/js/components/shared/song-list.vue | 25 +++++++++++++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/resources/assets/js/components/shared/song-item.vue b/resources/assets/js/components/shared/song-item.vue
index 0eb30024..96ec8bfb 100644
--- a/resources/assets/js/components/shared/song-item.vue
+++ b/resources/assets/js/components/shared/song-item.vue
@@ -151,7 +151,7 @@ export default {
     background-color: rgba(255, 255, 255, .08);
   }
 
-  &.playing {
+  &.playing td {
     color: $colorHighlight;
   }
 }
diff --git a/resources/assets/js/components/shared/song-list.vue b/resources/assets/js/components/shared/song-list.vue
index 3d486727..02831fd3 100644
--- a/resources/assets/js/components/shared/song-list.vue
+++ b/resources/assets/js/components/shared/song-list.vue
@@ -522,12 +522,18 @@ export default {
     left: 0;
     bottom: 0;
     right: 0;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
 
     .item-container {
       position: absolute;
       left: 24px;
       right: 24px;
     }
+
+    .item {
+      margin-bottom: 0;
+    }
   }
 
   @media only screen and (max-width: 768px) {
@@ -539,23 +545,38 @@ export default {
       display: none;
     }
 
+    .scroller {
+      top: 0;
+      bottom: 24px;
+
+      .item-container {
+        left: 12px;
+        right: 12px;
+      }
+    }
+
     tr {
       padding: 8px 32px 8px 4px;
       position: relative;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: $color2ndText;
+      width: 100%;
     }
 
     td {
       display: inline;
       padding: 0;
       vertical-align: bottom;
-      white-space: normal;
+      color: $colorMainText;
 
       &.album, &.time, &.track-number {
         display: none;
       }
 
       &.artist {
-        opacity: .5;
+        color: $color2ndText;
         font-size: .9rem;
         padding: 0 4px;
       }