Edit Song Description (#1088)

* add editPlayListDescription

* add feature to change playlist description

* add queue history styling

* add queue features

* replay styling update

* change queue and history headers

* fixed the duration css not working

src/renderer/less/bootstrap.less

@@ -845,6 +845,7 @@
   padding         : 0.5rem 1rem;
   background-color: rgba(0, 0, 0, 0.03);
   border-top      : 1px solid rgba(0, 0, 0, 0.125);
+  text-align      : center;
 }
 
 .card-footer:last-child {

src/renderer/less/elements.less

@@ -291,8 +291,10 @@
 
 /* queue item */
 .cd-queue-item {
-  border-bottom: 1px solid rgb(200 200 200 / 10%);
+  border-bottom: 0px solid rgb(200 200 200 / 10%);
-  padding: 8px;
+  padding: 1px;
+  padding-bottom: 9px;
+  padding-top: 9px;
 
   .row,
   .col {
@@ -301,8 +303,8 @@
   }
 
   .artwork {
-    width: 32px;
+    width: 42px;
-    height: 32px;
+    height: 42px;
     flex: 0 0 auto;
   }
 
@@ -320,18 +322,46 @@
   }
 
   .queue-info {
+    justify-content: center;
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
 
     .queue-title {
       font-size: 14px;
     }
 
     .queue-subtitle {
-      font-size: 13px;
+      font-size: 0.7em;
-      opacity: 0.85;
+      opacity: 0.7;
     }
   }
+
+  .queue-duration-info {
+    display: flex;
+    flex-grow: 0;
+  }
+
+  .queue-duration {
+    font-size: 14px;
+    justify-content: center;
+    min-width: 60px;
+    height: 100%;
+  }
+
+  .queue-explicit-icon {
+    display: flex;
+    width: 24px;
+    padding: 0px;
+  }
+
+  .explicit-icon {
+    background-image: url("./assets/explicit.svg");
+    height: 12px;
+    width: 36px;
+    filter: contrast(0);
+    background-repeat: no-repeat;
+  }
 }
 
 /* horizontal media scroller */

src/renderer/less/pages.less

@@ -667,8 +667,6 @@
         .nameEdit {
           font-weight  : 700;
           font-size    : 1.6rem;
-          margin-bottom: 6px;
-          margin-right : 6px;
           flex-shrink  : unset;
           background   : transparent;
           border       : 0px;
@@ -676,6 +674,16 @@
           font-family  : inherit;
         }
 
+        .descriptionEdit {
+          font-size    : 14px;
+          flex-shrink  : unset;
+          background   : transparent;
+          border       : 0px;
+          color        : inherit;
+          font-family  : inherit;
+          width        : 60vw;
+        }
+
         .playlist-artist {
           font-size    : 20px;
           margin-bottom: 6px;

src/renderer/main/vueapp.js

@@ -1350,6 +1350,21 @@ const app = new Vue({
                 self.refreshPlaylists(false, false)
             })
         },
+        async editPlaylistDescription(id, name = app.getLz('term.newPlaylist')) {
+            let self = this
+            this.mk.api.v3.music(
+                `/v1/me/library/playlists/${id}`, {}, {
+                fetchOptions: {
+                    method: "PATCH",
+                    body: JSON.stringify({
+                        attributes: { description: name }
+                    })
+                }
+            }
+            ).then(res => {
+                self.refreshPlaylists(false, false)
+            })
+        },
         copyToClipboard(str) {
             // if (navigator.userAgent.includes('Darwin') || navigator.appVersion.indexOf("Mac") != -1) {
             // this.darwinShare(str)

src/renderer/views/components/queue.ejs

@@ -2,7 +2,8 @@
     <div class="queue-panel">
         <div class="row">
             <div class="col">
-                <h3 class="queue-header-text">{{app.getLz('term.queue')}}</h3>
+                <h3 class="queue-header-text" v-if="page == 'queue'">{{app.getLz('term.queue')}}</h3>
+                <h3 class="queue-header-text" v-if="page == 'history'">{{app.getLz('term.history')}}</h3>
             </div>
             <div class="col-auto flex-center">
                 <button class="autoplay" :style="{'background': app.mk.autoplayEnabled ? 'var(--keyColor)' : ''}"
@@ -33,6 +34,12 @@
                                 <div class="queue-title text-overflow-elipsis">{{ queueItem.item.attributes.name }}</div>
                                 <div class="queue-subtitle text-overflow-elipsis">{{ queueItem.item.attributes.artistName }} — {{ queueItem.item.attributes.albumName }}</div>
                             </div>
+                            <div class="queue-explicit-icon flex-center" v-if="queueItem.item.attributes.contentRating == 'explicit'">
+                                <div class="explicit-icon"></div>
+                            </div>
+                            <div class="col queue-duration-info">
+                                <div class="queue-duration flex-center">{{convertTimeToString(queueItem.item.attributes.durationInMillis)}}</div>
+                            </div>
                         </div>
                     </div>
                 </template>
@@ -167,6 +174,10 @@
                 this.selected = -1
                 app.mk.queue._queueItems = this.queueItems;
                 app.mk.queue._reindex()
+            },
+            convertTimeToString(timeInMilliseconds) {
+                var seconds = ((timeInMilliseconds % 60000) / 1000).toFixed(0);
+                return Math.floor(timeInMilliseconds/60000) + ":" + (seconds < 10 ? '0' : '') + seconds;
             }
         }
     });

src/renderer/views/pages/cider-playlist.ejs

@@ -54,9 +54,16 @@
                                              class="content"
                                              v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short"
                                              @click="openInfoModal()"></div>
-                                        <div v-else-if="(data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null"
+                                        <div v-else-if="((data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null) && (descriptionEditing == false)"
-                                             class="content"
+                                             @mouseover="minClass(false)" @click="editPlaylistDescription()">{{data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard}}</div>
-                                             v-html="data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard"></div>
+                                        <div v-else-if="((data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null) && (descriptionEditing)"
+                                             @mouseover="minClass(false)"><input type="text"
+                                             spellcheck="false"
+                                             class="descriptionEdit"
+                                             v-model="data.attributes.description.standard"
+                                             @blur="editPlaylist"
+                                             @change="editPlaylist"
+                                             @keydown.enter="editPlaylist"/></div>
                                         <!-- <button v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short ) != null" class="more-btn"
                                                 @click="editorialNotesExpanded = !editorialNotesExpanded">
                                             {{app.getLz('term.showMore')}}
@@ -265,6 +272,7 @@
                 editorialNotesExpanded: false,
                 drag: false,
                 nameEditing: false,
+                descriptionEditing: false,
                 inLibrary: null,
                 confirm: false,
                 app: this.$root,
@@ -412,12 +420,24 @@
             },
             editPlaylist() {
                 this.app.editPlaylist(this.data.id, this.data.attributes.name);
+                this.app.editPlaylistDescription(this.data.id, this.data.attributes.description.standard);
                 this.app.playlists.listing.forEach(playlist => {
                     if (playlist.id === this.data.id) {
                         playlist.attributes.name = this.data.attributes.name
+                        playlist.attributes.description = this.data.attributes.description.standard
                     }
                 })
                 this.nameEditing = false
+                this.descriptionEditing = false
+            },
+            editPlaylistDescription() {
+                this.app.editPlaylistDescription(this.data.id, this.data.attributes.description.standard);
+                this.app.playlists.listing.forEach(playlist => {
+                    if (playlist.id === this.data.id) {
+                        playlist.attributes.description = this.data.attributes.description.standard
+                    }
+                })
+                this.descriptionEditing = false
             },
             addToLibrary(id) {
                 app.mk.addToLibrary(id)
@@ -450,6 +470,14 @@
                     }, 100)
                 }
             },
+            editPlaylistDescription() {
+                if (this.data.attributes.canEdit && this.data.type === "library-playlists") {
+                    this.descriptionEditing = true
+                    setTimeout(() => {
+                        document.querySelector(".descriptionEdit").focus()
+                    }, 100)
+                }
+            },
             buildContextMenu(index) {
                 let self = this
                 if (!this.data.attributes.canEdit) {