Merge pull request #262 from Swiftzerr/main

Added create new playlist option to Add To Playlist context menu

src/renderer/index.js

@@ -473,6 +473,46 @@ const app = new Vue({
         promptAddToPlaylist() {
             app.modals.addToPlaylist = true;
         },
+        async addSelectedToNewPlaylist() {
+            let self = this
+            let pl_items = []
+            for (let i = 0; i < self.selectedMediaItems.length; i++) {
+                if (self.selectedMediaItems[i].kind == "song" || self.selectedMediaItems[i].kind == "songs") {
+                    self.selectedMediaItems[i].kind = "songs"
+                    pl_items.push({
+                        id: self.selectedMediaItems[i].id,
+                        type: self.selectedMediaItems[i].kind
+                    })
+                } else if ((self.selectedMediaItems[i].kind == "album" || self.selectedMediaItems[i].kind == "albums") && self.selectedMediaItems[i].isLibrary != true) {
+                    self.selectedMediaItems[i].kind = "albums"
+                    let res = await self.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/albums/${self.selectedMediaItems[i].id}/tracks`);
+                    let ids = res.data.data.map(function (i) {
+                        return {id: i.id, type: i.type}
+                    })
+                    pl_items = pl_items.concat(ids)
+                } else if (self.selectedMediaItems[i].kind == "library-song" || self.selectedMediaItems[i].kind == "library-songs") {
+                    self.selectedMediaItems[i].kind = "library-songs"
+                    pl_items.push({
+                        id: self.selectedMediaItems[i].id,
+                        type: self.selectedMediaItems[i].kind
+                    })
+                } else if ((self.selectedMediaItems[i].kind == "library-album" || self.selectedMediaItems[i].kind == "library-albums") || (self.selectedMediaItems[i].kind == "album" && self.selectedMediaItems[i].isLibrary == true)) {
+                    self.selectedMediaItems[i].kind = "library-albums"
+                    let res = await self.mk.api.v3.music(`/v1/me/library/albums/${self.selectedMediaItems[i].id}/tracks`);
+                    let ids = res.data.data.map(function (i) {
+                        return {id: i.id, type: i.type}
+                    })
+                    pl_items = pl_items.concat(ids)
+                } else {
+                    pl_items.push({
+                        id: self.selectedMediaItems[i].id,
+                        type: self.selectedMediaItems[i].kind
+                    })
+                }
+            }
+            this.modals.addToPlaylist = false
+            app.newPlaylist("New Playlist", pl_items)
+        },
         async addSelectedToPlaylist(playlist_id) {
             let self = this
             let pl_items = []

src/renderer/views/components/add-to-playlist.ejs

@@ -1,15 +1,23 @@
 <script type="text/x-template" id="add-to-playlist">
     <template>
-        <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()"
-             @contextmenu.self="app.resetState()">
+        <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" @contextmenu.self="app.resetState()">
             <div class="modal-window">
                 <div class="modal-header">
-                    <div class="modal-title">{{app.getLz('action.addToPlaylist')}}</div>
+                    <div class="modal-title">{{app.getLz('action.addToPlaylist')}</div>
                     <button class="close-btn" @click="app.resetState()"></button>
                 </div>
                 <div class="modal-content">
-                    <sidebar-playlist :playlist-select="playlistSelect" v-for="item in $root.getPlaylistFolderChildren('p.playlistsroot')" :item="item">
-                    </sidebar-playlist>
+                    <button class="playlist-item"
+                            @click="app.addSelectedToNewPlaylist()" style="width:100%;">
+                        <div class="icon"><%- include("../svg/plus.svg") %></div>
+                        <div class="name">{{app.getLz('action.createPlaylist')}</div>
+                    </button>
+                    <button class="playlist-item" 
+                    :class="{ focused: playlist.id == focused }"
+                    @click="addToPlaylist(playlist.id)" style="width:100%;" v-for="playlist in playlistSorted" v-if="playlist.attributes.canEdit && playlist.type != 'library-playlist-folders'">
+                        <div class="icon"><%- include("../svg/playlist.svg") %></div>
+                        <div class="name">{{ playlist.attributes.name }}</div>
+                    </button>
                 </div>
                 <div class="modal-search">
                     <div class="search-input-container" style="width:100%;margin: 16px 0;">
@@ -18,7 +26,7 @@
                                ref="searchInput"
                                style="width:100%;"
                                spellcheck="false"
-                               :placeholder="app.getLz('term.search') + '...'"
+                               placeholder="app.getLz('term.search') + '...'"
                                v-model="searchQuery"
                                @input="search()"
                                class="search-input">

src/renderer/views/svg/plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>