Add "Add To..." button

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

@@ -21,20 +21,18 @@
                 <button class="play-shuffle" @click.prevent="shuffleSelected" v-if="selectedSongs.length > 1">
                     <i class="fa fa-random"></i> Selected
                 </button>
-                <button class="save" @click.prevent="saving = !saving" v-if="state.songs.length > 1">
+                <button class="save" 
-                    {{ saving ? 'Cancel' : 'Save' }}
+                    @click.prevent="showAddToPlaylistDialog = !showAddToPlaylistDialog" 
+                    v-if="state.songs.length > 1"
+                >
+                    {{ showAddToPlaylistDialog ? 'Cancel' : 'Add To…' }}
                 </button>
                 <button class="clear" @click.prevent="clear" v-if="state.songs.length">Clear</button>
 
-                <form class="form-save form-simple" v-show="saving" @submit.prevent="save">
+                <add-to-playlist 
-                    <input type="text" 
+                    :songs="songsToAddToPlaylist" 
-                        @keyup.esc.prevent="saving = false"
+                    :showing.sync="showAddToPlaylistDialog">
-                        v-model="playlistName" 
+                </add-to-playlist>
-                        v-koel-focus="saving"
-                        placeholder="Playlist name"
-                        required>
-                    <button type="submit" id="saveQueueSubmit"><i class="fa fa-save"></i></button>
-                </form>
             </div>
         </h1>
 
@@ -47,6 +45,7 @@
     import isMobile from 'ismobilejs';
     
     import songList from '../../shared/song-list.vue';
+    import addToPlaylist from '../../shared/add-to-playlist.vue';
     import playlistStore from '../../../stores/playlist';
     import queueStore from '../../../stores/queue';
     import playback from '../../../services/playback';
@@ -55,18 +54,29 @@
     export default {
         mixins: [shuffleSelectedMixin],
 
-        components: { songList },
+        components: { songList, addToPlaylist },
 
         data() {
             return {
                 state: queueStore.state,
-                saving: false,
+                showAddToPlaylistDialog: false,
                 playlistName: '',
                 isPhone: isMobile.phone,
                 showingControls: false,
             };
         },
 
+        computed: {
+            /**
+             * If no songs are selected, we provide all queued songs as a tribute to playlist god.
+             * 
+             * @return {Array} The songs to add into a (new) playlist
+             */
+            songsToAddToPlaylist() {
+                return this.selectedSongs.length ? this.selectedSongs : queueStore.all();
+            },
+        },
+
         watch: {
             /**
              * Watch the number of songs currently queued.
@@ -74,7 +84,7 @@
              */
             'state.songs': function () {
                 if (!queueStore.all().length) {
-                    this.saving = false;
+                    this.showAddToPlaylist = false;
                 }
             },
         },
@@ -93,23 +103,6 @@
             clear() {
                 queueStore.clear();
             },
-
-            /**
-             * Save the WHOLE queue as a playlist.
-             * As of current we don't have selective save.
-             */
-            save() {
-                this.playlistName = this.playlistName.trim();
-                
-                if (!this.playlistName) {
-                    return;
-                }
-
-                playlistStore.store(this.playlistName, _.pluck(queueStore.all(), 'id'), () => {
-                    this.playlistName = '';
-                    this.saving = false;
-                });
-            },
         },
     };
 </script>
@@ -132,10 +125,10 @@
         }
 
         button.clear {
-            background-color: $colorBlue !important;
+            background-color: $colorRed !important;
 
             &:hover {
-                background-color: darken($colorBlue, 10%) !important;
+                background-color: darken($colorRed, 10%) !important;
             }
         }
 
@@ -147,45 +140,6 @@
             }
         }
 
-        .form-save {
-            position: absolute;
-            bottom: -50px;
-            left: 0;
-            background: $colorGreen;
-            padding: 8px;
-            width: 100%;
-            border-radius: 5px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            &::before {
-                display: block;
-                content: " ";
-                width: 0;
-                height: 0;
-                border-left: 10px solid transparent;
-                border-right: 10px solid transparent;
-                border-bottom: 10px solid $colorGreen;
-                position: absolute;
-                top: -7px;
-                left: calc(50% - 10px);
-            }
-
-            input[type="text"] {
-                width: 100%;
-                border-radius: 5px 0 0 5px;
-                height: 28px;
-            }
-
-            button#saveQueueSubmit {
-                margin-top: 0;
-                border-radius: 0 5px 5px 0;
-                height: 28px;
-                margin-left: -2px;
-            }
-        }
-
         @media only screen 
         and (max-device-width : 667px) 
         and (orientation : portrait) {

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

@@ -21,6 +21,18 @@
                 <button class="play-shuffle" @click.prevent="shuffleSelected" v-if="selectedSongs.length > 1">
                     <i class="fa fa-random"></i> Selected
                 </button>
+
+                <button class="save" 
+                    @click.prevent="showAddToPlaylistDialog = !showAddToPlaylistDialog" 
+                    v-if="selectedSongs.length > 0"
+                >
+                    {{ showAddToPlaylistDialog ? 'Cancel' : 'Add To…' }}
+                </button>
+
+                <add-to-playlist 
+                    :songs="selectedSongs" 
+                    :showing.sync="showAddToPlaylistDialog">
+                </add-to-playlist>
             </div>
         </h1>
 
@@ -32,6 +44,7 @@
     import isMobile from 'ismobilejs';
 
     import songList from '../../shared/song-list.vue';
+    import addToPlaylist from '../../shared/add-to-playlist.vue';
     import songStore from '../../../stores/song';
     import playback from '../../../services/playback';
     import shuffleSelectedMixin from '../../../mixins/shuffle-selected';
@@ -39,13 +52,14 @@
     export default {
         mixins: [shuffleSelectedMixin],
 
-        components: { songList },
+        components: { songList, addToPlaylist },
 
         data() {
             return {
                 state: songStore.state,
                 isPhone: isMobile.phone,
                 showingControls: false,
+                showAddToPlaylistDialog: false,
             };
         },
 
@@ -70,6 +84,16 @@
             color: $color2ndText;
             margin-top: 16px;
         }
+
+
+
+        button.save {
+            background-color: $colorGreen !important;
+
+            &:hover {
+                background-color: darken($colorGreen, 10%) !important;
+            }
+        }
     }
 </style>
 

resources/assets/js/components/main-wrapper/sidebar/playlists.vue

@@ -194,6 +194,12 @@
 
     #playlists {
         .menu {
+            a {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            
             a::before {
                 content: "\f0f6";
             }

resources/assets/js/components/shared/add-to-playlist.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class="add-to-playlist" v-show="showing">
+        <p>Add {{ songs.length }} song{{ songs.length > 1 ? 's' : '' }} into</p>
+        <ul>
+            <li @click="addSongsToFavorite">Favorites</li>
+            <li v-for="playlist in playlistState.playlists" @click="addSongsToExisting(playlist)">{{ playlist.name }}</li>
+        </ul>
+        <p>or create a new playlist</p>
+        <form class="form-save form-simple" @submit.prevent="createNewFromSongs">
+            <input type="text" 
+                @keyup.esc.prevent="showing = false"
+                v-model="newPlaylistName" 
+                v-koel-focus="showing"
+                placeholder="Playlist name"
+                required>
+            <button type="submit"><i class="fa fa-save"></i></button>
+        </form>
+    </div>
+</template>
+
+<script>
+    import playlistStore from '../../stores/playlist';
+    import favoriteStore from '../../stores/favorite';
+
+    export default {
+        props: ['songs', 'showing'],
+
+        data() {
+            return {
+                newPlaylistName: '',
+                showing: false,
+                playlistState: playlistStore.state,
+            }
+        },
+
+        watch: {
+            songs() {
+                if (!this.songs.length) {
+                    this.showing = false;
+                }
+            },
+        },
+
+        methods: {
+            /**
+             * Add the selected songs into Favorite.
+             */
+            addSongsToFavorite() {
+                this.showing = false;
+                favoriteStore.like(this.songs, () => {
+                    // Nothing much now.
+                });
+            },
+
+            /**
+             * Add the selected songs into the chosen playlist.
+             *
+             * @param {Object} playlist The playlist.
+             */
+            addSongsToExisting(playlist) {
+                this.showing = false;
+                playlistStore.addSongs(playlist, this.songs, () => {
+                    // Nothing much now.
+                });
+            },
+
+            /**
+             * Save the selected songs as a playlist.
+             * As of current we don't have selective save.
+             */
+            createNewFromSongs() {
+                this.newPlaylistName = this.newPlaylistName.trim();
+                
+                if (!this.newPlaylistName) {
+                    return;
+                }
+
+                this.showing = false;
+
+                playlistStore.store(this.newPlaylistName, this.songs, () => {
+                    this.newPlaylistName = '';
+                });
+            },
+        },
+    };
+</script>
+
+<style lang="sass" scoped>
+    @import "resources/assets/sass/partials/_vars.scss";
+    @import "resources/assets/sass/partials/_mixins.scss";
+
+    .add-to-playlist {
+        @include context-menu();
+
+        position: absolute;
+        top: 36px;
+        left: 0;
+        width: 100%;
+        
+        p {
+            margin: 4px 0;
+            font-size: 90%;
+
+            &::first-of-type {
+                margin-top: 0;
+            }
+        }
+
+        $itemHeight: 28px;
+        $itemMargin: 2px;
+
+        ul {
+            max-height: 5 * ($itemHeight + $itemMargin);
+            overflow-y: scroll; 
+            -webkit-overflow-scrolling: touch;
+        }
+
+        li {
+            cursor: pointer;
+            background: rgba(255, 255, 255, .2);
+            height: $itemHeight;
+            line-height: $itemHeight;
+            padding: 0 8px;
+            margin: $itemMargin 0;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            border-radius: 3px;
+            background: #fff;
+
+            &:hover {
+                background: $colorHighlight;
+                color: #fff;
+            }
+        }
+
+        &::before {
+            display: block;
+            content: " ";
+            width: 0;
+            height: 0;
+            border-left: 10px solid transparent;
+            border-right: 10px solid transparent;
+            border-bottom: 10px solid rgb(232, 232, 232);
+            position: absolute;
+            top: -7px;
+            left: calc(50% - 10px);
+        }
+
+        form {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            input[type="text"] {
+                width: 100%;
+                border-radius: 5px 0 0 5px;
+                height: 28px;
+            }
+
+            button[type="submit"] {
+                margin-top: 0;
+                border-radius: 0 5px 5px 0 !important;
+                height: 28px;
+                margin-left: -2px !important;
+            }
+        }
+    }
+</style>

resources/assets/js/stores/playlist.js

@@ -31,7 +31,19 @@ export default {
         return (playlist.songs = songStore.byIds(playlist.songs));
     },
 
+    /**
+     * Create a new playlist, optionally with its songs.
+     * 
+     * @param  {string}   name  Name of the playlist
+     * @param  {Array}    songs An array of song objects
+     * @param  {Function} cb
+     */
     store(name, songs, cb = null) {
+        if (songs.length) {
+            // Extract the IDs from the song objects.
+            songs = _.pluck(songs, 'id');
+        }
+
         http.post('playlist', { name, songs }, response => {
             var playlist = response.data;
             playlist.songs = songs;

resources/assets/sass/partials/_mixins.scss

@@ -108,9 +108,12 @@
 @mixin button-group() {
     display: flex;
     position: relative;
+    min-width: 192px;
+    justify-content: flex-end;
 
     button {
         $buttonHeight: 28px;
+
         background-color: $colorHighlight;
         font-size: 12px;
         height: $buttonHeight;
@@ -143,3 +146,26 @@
         @include inset-when-pressed();
     }
 }
+
+@mixin context-menu() {
+    font-weight: $fontWeight_Thin;
+    font-size: $fontSize;
+    color: #111;
+    background-color: rgb(232, 232, 232);
+    padding: 8px;
+    border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: stretch;
+    text-align: left;
+    box-shadow: inset 0 0px 0 rgba(255,255,255,.6), 0 22px 70px 4px rgba(0,0,0,0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);
+
+    input[type="search"], input[type="text"], input[type="email"], input[type="url"] {
+        background: #fff;
+
+        &:focus {
+            background: $colorDirtyInputBgr;
+        }
+    }
+}