Finish Playlist download, starting Fav download

app/Http/Controllers/API/Download/PlaylistController.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Controllers\API\Download;
+
+use App\Http\Requests\API\Download\Request;
+use App\Models\Playlist;
+use Download;
+
+class PlaylistController extends Controller
+{
+    /**
+     * Download all songs in a playlist.
+     *
+     * @param Request  $request
+     * @param Playlist $playlist
+     *
+     * @return
+     */
+    public function download(Request $request, Playlist $playlist)
+    {
+        return response()->download(Download::from($playlist));
+    }
+}

app/Http/routes.php

@@ -57,6 +57,7 @@ Route::group(['prefix' => 'api', 'namespace' => 'API'], function () {
             Route::get('songs', 'SongController@download');
             Route::get('album/{album}', 'AlbumController@download');
             Route::get('artist/{artist}', 'ArtistController@download');
+            Route::get('playlist/{playlist}', 'PlaylistController@download');
         });
     });
 });

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

@@ -13,6 +13,13 @@
                     {{ meta.songCount }} {{ meta.songCount | pluralize 'song' }}
                     •
                     {{ meta.totalLength }}
+                    <template v-if="sharedState.allowDownload && state.songs.length">
+                        •
+                        <a href="#" @click.prevent="download"
+                            title="Download all songs in playlist">
+                            Download
+                        </a>
+                    </template>
                 </span>
             </span>
 
@@ -57,7 +64,9 @@
     import isMobile from 'ismobilejs';
 
     import favoriteStore from '../../../stores/favorite';
+    import sharedStore from '../../../stores/shared';
     import playback from '../../../services/playback';
+    import download from '../../../services/download';
     import hasSongList from '../../../mixins/has-song-list';
 
     export default {
@@ -66,6 +75,7 @@
         data () {
             return {
                 state: favoriteStore.state,
+                sharedState: sharedStore.state,
                 isPhone: isMobile.phone,
                 showingControls: false,
             };
@@ -78,6 +88,13 @@
             shuffle() {
                 playback.queueAndPlay(this.state.songs, true);
             },
+
+            /**
+             * Download all favorite songs.
+             */
+            download() {
+                download.fromFavorites();
+            },
         },
     };
 </script>

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

@@ -115,6 +115,14 @@
                 font-size: $fontSize;
                 color: $color2ndText;
                 margin: 12px 0 0 2px;
+
+                a {
+                    color: #fff;
+
+                    &:hover {
+                        color: $colorHighlight;
+                    }
+                }
             }
 
             .buttons {

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

@@ -13,6 +13,13 @@
                     {{ meta.songCount }} {{ meta.songCount | pluralize 'song' }}
                     •
                     {{ meta.totalLength }}
+                    <template v-if="sharedState.allowDownload && playlist.songs.length">
+                        •
+                        <a href="#" @click.prevent="download"
+                            title="Download all songs in playlist">
+                            Download
+                        </a>
+                    </template>
                 </span>
             </span>
 
@@ -57,7 +64,9 @@
     import isMobile from 'ismobilejs';
 
     import playlistStore from '../../../stores/playlist';
+    import sharedStore from '../../../stores/shared';
     import playback from '../../../services/playback';
+    import download from '../../../services/download';
     import hasSongList from '../../../mixins/has-song-list';
 
     export default {
@@ -66,6 +75,7 @@
         data() {
             return {
                 playlist: playlistStore.stub,
+                sharedState: sharedStore.state,
                 isPhone: isMobile.phone,
                 showingControls: false,
             };
@@ -107,6 +117,13 @@
                     this.$root.loadMainView('queue');
                 });
             },
+
+            /**
+             * Download all songs in the current playlist.
+             */
+            download() {
+                return download.fromPlaylist(this.playlist);
+            },
         },
     };
 </script>

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

@@ -22,10 +22,10 @@
                     {{ album.playCount }} {{ album.playCount | pluralize 'play' }}
                 </span>
                 <span class="right">
-                    <a href="#" @click="shuffle" title="Shuffle">
+                    <a href="#" @click.prevent="shuffle" title="Shuffle">
                         <i class="fa fa-random"></i>
                     </a>
-                    <a href="#" @click="download" v-if="sharedState.allowDownload" title="Download all songs in album">
+                    <a href="#" @click.prevent="download" v-if="sharedState.allowDownload" title="Download all songs in album">
                         <i class="fa fa-download"></i>
                     </a>
                 </span>

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

@@ -16,7 +16,7 @@
                     {{ artist.playCount }} {{ artist.playCount | pluralize 'play' }}
                 </span>
                 <span class="right">
-                    <a href="#" @click="download" v-if="sharedState.allowDownload" title="Download all songs in album">
+                    <a href="#" @click.prevent="download" v-if="sharedState.allowDownload" title="Download all songs in album">
                         <i class="fa fa-download"></i>
                     </a>
                 </span>

resources/assets/js/stores/playlist.js

@@ -20,7 +20,7 @@ export default {
 
     init(playlists) {
         this.all = playlists;
-        each(this.all, this.getSongs);
+        each(this.all, this.objectifySongs);
     },
 
     /**
@@ -41,13 +41,25 @@ export default {
         this.state.playlists = value;
     },
 
+    /**
+     * Objectify all songs in the playlist.
+     * (Initially, a playlist only contain the song IDs).
+     *
+     * @param  {Object} playlist
+     */
+    objectifySongs(playlist) {
+        playlist.songs = songStore.byIds(playlist.songs);
+    },
+
     /**
      * Get all songs in a playlist.
      *
+     * @param {Object}
+     *
      * return {Array.<Object>}
      */
     getSongs(playlist) {
-        return (playlist.songs = songStore.byIds(playlist.songs));
+        return playlist.songs;
     },
 
     /**
@@ -86,7 +98,7 @@ export default {
         http.post('playlist', { name, songs }, response => {
             const playlist = response.data;
             playlist.songs = songs;
-            this.getSongs(playlist);
+            this.objectifySongs(playlist);
             this.add(playlist);
 
             cb && cb();