Added more options on big play buttons, see #8

src/audio/queue.js

@@ -89,18 +89,27 @@ class Queue {
     }
     cache.set('volume', newValue)
   }
-  append (track) {
-    this.tracks.push(track)
+  append (track, index) {
+    index = index || this.tracks.length - 1
+    if (index > this.tracks.length - 1) {
+      // we simply push to the end
+      this.tracks.push(track)
+    } else {
+      // we insert the track at given position
+      this.tracks.splice(index, 0, track)
+    }
     if (this.currentIndex < 0) {
       this.play(0)
     }
     this.cache()
   }
 
-  appendMany (tracks) {
+  appendMany (tracks, index) {
     let self = this
+    index = index || this.tracks.length - 1
     tracks.forEach((t) => {
-      self.append(t)
+      self.append(t, index)
+      index += 1
     })
   }
 

src/components/audio/PlayButton.vue

+<template>
+  <div :class="['ui', {'teal': !discrete}, {'tiny': discrete}, 'buttons']">
+    <button title="Add to current queue" @click="add" :class="['ui', {'mini': discrete}, 'icon', {'labeled': !discrete}, 'button']">
+      <i class="ui play icon"></i>
+      <template v-if="!discrete"><slot>Play</slot></template>
+    </button>
+    <div v-if="!discrete" class="ui floating dropdown icon button">
+      <i class="dropdown icon"></i>
+      <div class="menu">
+        <div class="item"@click="add"><i class="plus icon"></i> Add to queue</div>
+        <div class="item"@click="addNext()"><i class="step forward icon"></i> Play next</div>
+        <div class="item"@click="addNext(true)"><i class="arrow down icon"></i> Play now</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import logger from '@/logging'
+import queue from '@/audio/queue'
+import jQuery from 'jquery'
+
+export default {
+  props: {
+    // we can either have a single or multiple tracks to play when clicked
+    tracks: {type: Array, required: false},
+    track: {type: Object, required: false},
+    discrete: {type: Boolean, default: false}
+  },
+  created () {
+    if (!this.track & !this.tracks) {
+      logger.default.error('You have to provide eigher a track or tracks property')
+    }
+  },
+  mounted () {
+    if (!this.discrete) {
+      jQuery(this.$el).find('.ui.dropdown').dropdown()
+    }
+  },
+  methods: {
+    add () {
+      if (this.track) {
+        queue.append(this.track)
+      } else {
+        queue.appendMany(this.tracks)
+      }
+    },
+    addNext (next) {
+      if (this.track) {
+        queue.append(this.track, queue.currentIndex + 1)
+      } else {
+        queue.appendMany(this.tracks, queue.currentIndex + 1)
+      }
+      if (next) {
+        queue.next()
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+i {
+  cursor: pointer;
+}
+</style>

src/components/audio/album/Card.vue

@@ -16,9 +16,7 @@
             <tbody>
               <tr v-for="track in tracks">
                 <td>
-                  <button @click="queue.append(track)" class="ui tiny icon button">
-                    <i class="play icon"></i>
-                  </button>
+                  <play-button :track="track" :discrete="true"></play-button>
                 </td>
                 <td colspan="6">{{ track.title }}</td>
                 <td>
@@ -34,10 +32,7 @@
         </div>
       </div>
       <div class="extra content">
-        <button @click="queue.appendMany(album.tracks)" class="ui mini icon right floated teal labeled button">
-          <i class="ui play icon"></i>
-          Play
-        </button>
+        <play-button class="mini right floated" :tracks="album.tracks">Play all</play-button>
         <span>
           <i class="music icon"></i>
           {{ album.tracks.length }} tracks
@@ -50,6 +45,7 @@
 import queue from '@/audio/queue'
 import backend from '@/audio/backend'
 import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
+import PlayButton from '@/components/audio/PlayButton'
 
 export default {
   props: {
@@ -57,7 +53,8 @@ export default {
     mode: {type: String, default: 'rich'}
   },
   components: {
-    TrackFavoriteIcon
+    TrackFavoriteIcon,
+    PlayButton
   },
   data () {
     return {

src/components/audio/artist/Card.vue

@@ -9,7 +9,7 @@
         <div class="description">
           <table class="ui compact very basic fixed single line table">
             <tbody>
-              <tr v-for="album in artist.albums.slice(0, 3)">
+              <tr v-for="album in albums">
                 <td>
                   <img class="ui mini image" v-if="album.cover" :src="backend.absoluteUrl(album.cover)">
                   <img class="ui mini image" v-else src="../../../assets/audio/default-cover.png">
@@ -19,19 +19,19 @@
                   {{ album.tracks.length }} tracks
                 </td>
                 <td>
-                  <button @click="queue.appendMany(album.tracks)" class="ui mini icon right floated teal button">
-                    <i class="ui play icon"></i>
-                  </button>
+                  <play-button class="right floated" :discrete="true" :tracks="album.tracks"></play-button>
                 </td>
               </tr>
             </tbody>
           </table>
+          <div class="center aligned segment" v-if="artist.albums.length > initialAlbums">
+            <em v-if="!showAllAlbums" @click="showAllAlbums = true" class="expand">Show {{ artist.albums.length - initialAlbums }} more albums</em>
+            <em v-else @click="showAllAlbums = false" class="expand">Collapse</em>
+          </div>
         </div>
     </div>
     <div class="extra content">
-        <!-- <button @click="queue.appendMany(artist.tracks)" class="ui right floated button">
-          Play
-        </button> -->
+        <play-button class="mini right floated" :tracks="tracks">Play all</play-button>
         <span>
           <i class="sound icon"></i>
           {{ artist.albums.length }} albums
@@ -41,15 +41,36 @@
 </template>
 
 <script>
-import queue from '@/audio/queue'
 import backend from '@/audio/backend'
+import PlayButton from '@/components/audio/PlayButton'
 
 export default {
   props: ['artist'],
+  components: {
+    PlayButton
+  },
   data () {
     return {
       backend: backend,
-      queue: queue
+      initialAlbums: 3,
+      showAllAlbums: false
+    }
+  },
+  computed: {
+    albums () {
+      if (this.showAllAlbums) {
+        return this.artist.albums
+      }
+      return this.artist.albums.slice(0, this.initialAlbums)
+    },
+    allTracks () {
+      let tracks = []
+      this.artist.albums.forEach(album => {
+        album.tracks.forEach(track => {
+          tracks.push(track)
+        })
+      })
+      return tracks
     }
   }
 }

src/components/audio/track/Table.vue

@@ -13,9 +13,7 @@
     <tbody>
       <tr v-for="track in tracks">
         <td>
-          <button @click="queue.append(track)" class="ui tiny icon button">
-            <i class="play icon"></i>
-          </button>
+          <play-button :discrete="true" :track="track"></play-button>
         </td>
         <td>
           <img class="ui mini image" v-if="track.album.cover" :src="backend.absoluteUrl(track.album.cover)">
@@ -39,19 +37,19 @@
 </template>
 
 <script>
-import queue from '@/audio/queue'
 import backend from '@/audio/backend'
 import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
+import PlayButton from '@/components/audio/PlayButton'
 
 export default {
   props: ['tracks'],
   components: {
-    TrackFavoriteIcon
+    TrackFavoriteIcon,
+    PlayButton
   },
   data () {
     return {
-      backend: backend,
-      queue: queue
+      backend: backend
     }
   }
 }

src/components/browse/Artist.vue

@@ -11,10 +11,8 @@
         <div class="ui hidden divider"></div>
         <radio-button type="artist" :object-id="artist.id"></radio-button>
         </button>
-        <button class="ui labeled teal icon button" @click="playAllALbums">
-          <i class="play icon"></i>
-          Play all albums
-        </button>
+        <play-button :tracks="allTracks">Play all albums</play-button>
+
         <a :href="wikipediaUrl" target="_blank" class="ui labeled icon button">
           <i class="wikipedia icon"></i>
           Search on wikipedia
@@ -41,6 +39,7 @@ import backend from '@/audio/backend'
 import queue from '@/audio/queue'
 import AlbumCard from '@/components/audio/album/Card'
 import RadioButton from '@/components/radios/Button'
+import PlayButton from '@/components/audio/PlayButton'
 import config from '@/config'
 
 const FETCH_URL = config.API_URL + 'artists/'
@@ -49,7 +48,8 @@ export default {
   props: ['id'],
   components: {
     AlbumCard,
-    RadioButton
+    RadioButton,
+    PlayButton
   },
   data () {
     return {
@@ -94,6 +94,15 @@ export default {
     },
     musicbrainzUrl () {
       return 'https://musicbrainz.org/artist/' + this.artist.mbid
+    },
+    allTracks () {
+      let tracks = []
+      this.albums.forEach(album => {
+        album.tracks.forEach(track => {
+          tracks.push(track)
+        })
+      })
+      return tracks
     }
   }
 }