Dblclicking a song now queue it too

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

@@ -1,6 +1,6 @@
 <template>
     <tr 
-        @dblclick.prevent="play" 
+        @dblclick.prevent="playRighAwayyyyyyy" 
         class="song-item"
         :class="{ 'selected': selected, 'playing': playbackState === 'playing' || playbackState === 'paused' }"
 
@@ -22,6 +22,7 @@
 <script>
     import $ from 'jquery';
     import playback from '../../services/playback';
+    import queueStore from '../../stores/queue';
 
     export default {
         props: ['song'],
@@ -34,10 +35,14 @@
 
         methods: {
             /**
-             * Play the song.
+             * Play the song right away.
              */
-            play() {
-                playback.play(this.song);
+            playRighAwayyyyyyy() {
+                if (!queueStore.contains(this.song)) {
+                    queueStore.queueAfterCurrent(this.song);
+                }
+                
+                Vue.nextTick(() => playback.play(this.song));
             },
 
             pause() {

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

@@ -37,6 +37,7 @@
                         | limitBy numOfItems"
                     is="song-item" 
                     data-song-id="{{ item.id }}" 
+                    track-by="id"
                     :song="item" 
                     @click="rowClick($event)"
                     draggable="true"

resources/assets/js/stores/queue.js

@@ -5,7 +5,7 @@ import songStub from '../stubs/song';
 export default {
     state: {
         songs: [],
-        current: songStub,
+        current: null,
     },
     
     init() {
@@ -47,6 +47,16 @@ export default {
         return _.last(this.state.songs);
     },
 
+    /**
+     * Determine if the queue contains a song.
+     * 
+     * @param  {Object} song
+     * @return {Boolean}
+     */
+    contains(song) {
+        return _.includes(this.all(), song);
+    },
+
     /**
      * Add a list of songs to the end of the current queue, 
      * or replace the current queue as a whole if `replace` is true.
@@ -71,6 +81,24 @@ export default {
         }
     },
 
+    /**
+     * Queue song(s) to after the current song.
+     * 
+     * @param  {Array|Object} songs
+     */
+    queueAfterCurrent(songs) {
+        if (!Array.isArray(songs)) {
+            songs = [songs];
+        }
+
+        if (!this.state.current || !this.state.songs.length) {
+            return this.queue(songs);
+        }
+
+        var head = this.state.songs.splice(0, _.indexOf(this.state.songs, this.state.current) + 1);
+        this.state.songs = head.concat(songs, this.state.songs);
+    },
+
     /**
      * Unqueue a song, or several songs at once.
      * 
@@ -89,6 +117,7 @@ export default {
      */
     clear(cb = null) {
         this.state.songs = [];
+        this.state.current = null;
 
         if (cb) {
             cb();
@@ -101,6 +130,10 @@ export default {
      * @return {Object|Null}
      */
     getNextSong() {
+        if (!this.current()) {
+            return _.first(this.state.songs);
+        }
+
         var i = _.pluck(this.state.songs, 'id').indexOf(this.current().id) + 1;
 
         return i >= this.state.songs.length ? null : this.state.songs[i];
@@ -112,6 +145,10 @@ export default {
      * @return {Object|Null}
      */
     getPrevSong() {
+        if (!this.current()) {
+            return _.last(this.state.songs);
+        }
+
         var i = _.pluck(this.state.songs, 'id').indexOf(this.current().id) - 1;
 
         return i < 0 ? null : this.state.songs[i];