From 3d4f0afe8b3b0fb99b8db5b3be418e0067b87ccd Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 13 Jan 2022 04:54:11 -0800
Subject: [PATCH] improvements to add to library on list item

---
 src/renderer/index.js                         |  2 +-
 .../views/components/mediaitem-list-item.ejs  | 55 ++++++++++++++++++-
 2 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/src/renderer/index.js b/src/renderer/index.js
index b158712d..607ae76a 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -2571,7 +2571,7 @@ const app = new Vue({
                 if (type.slice(-1) != "s") {
                     type += "s"
                 }
-                let id = item.playParams.catalogId ? item.playParams.catalogId : item.id
+                let id = item.attributes.playParams.catalogId ?? item.id
 
                 let index = types.findIndex(function (type) {
                     return type.type == this
diff --git a/src/renderer/views/components/mediaitem-list-item.ejs b/src/renderer/views/components/mediaitem-list-item.ejs
index d7b39fa7..c399c7d1 100644
--- a/src/renderer/views/components/mediaitem-list-item.ejs
+++ b/src/renderer/views/components/mediaitem-list-item.ejs
@@ -9,13 +9,17 @@
          :data-islibrary="this.item.attributes.playParams.isLibrary ?? false"
          :key="item.attributes.playParams.id ?? item.id"
          class="cd-mediaitem-list-item"
+         @mouseenter="checkLibrary"
+         @mouseover="showInLibrary = true"
+         @mouseleave="showInLibrary = false"
          :class="[{'mediaitem-selected': app.select_hasMediaItem(guid)}, addClasses]">
         <template v-if="isVisible">
-            <div class="isLibrary" v-if="showLibraryStatus == true">
+            <div class="isLibrary" :style="{opacity: (showInLibrary ? 1 : 0)}" v-if="showLibraryStatus == true">
                 <button @click="addToLibrary()"
-                        v-if="!app.isInLibrary(item.attributes.playParams) && !addedToLibrary">🖤
+                        v-if="!addedToLibrary">
+                    <div class="svg-icon" :style="{'--color': 'var(--keyColor)', '--url': 'url(./assets/feather/plus.svg)'}"></div>
                 </button>
-                <button v-else @click="removeFromLibrary()">❤️</button>
+                <button v-else style="opacity:0;">❤️</button>
             </div>
             <div class="artwork" v-if="showArtwork == true">
                 <mediaitem-artwork
@@ -67,6 +71,7 @@
         template: '#mediaitem-list-item',
         data: function () {
             return {
+                showInLibrary: false,
                 isVisible: false,
                 addedToLibrary: false,
                 guid: this.uuidv4(),
@@ -94,6 +99,17 @@
             this.getClasses()
         },
         methods: {
+            async checkLibrary() {
+                if(this.addedToLibrary) {return this.addedToLibrary}
+                if(this.item.type.includes("library-") || this.item.type.includes("station")) {
+                    this.addedToLibrary = true
+                    return
+                }
+                this.$root.inLibrary([this.item]).then(res => {
+                    this.addedToLibrary = res[0].attributes.inLibrary
+                })
+                return this.addedToLibrary
+            },
             getClasses() {
                 if(this.classList) {
                     this.addClasses = {}
@@ -299,6 +315,25 @@
                             },
                         ],
                         items: [
+                            {
+                                "id": "addToLibrary",
+                                "icon": "./assets/feather/plus.svg",
+                                "name": "Add to library",
+                                "hidden": false,
+                                "disabled": true,
+                                "action": function () {
+                                    self.addToLibrary()
+                                }
+                            },
+                            {
+                                "id": "removeFromLibrary",
+                                "icon": "./assets/feather/x-circle.svg",
+                                "name": "Remove from library",
+                                "hidden": true,
+                                "action": function () {
+                                    self.removeFromLibrary()
+                                }
+                            },
                             {
                                 "icon": "./assets/feather/list.svg",
                                 "name": "Add to Playlist...",
@@ -372,6 +407,20 @@
                 }
                 app.showMenuPanel(menus[useMenu], event)
 
+                try {
+                    await this.checkLibrary().then(res => {
+                        console.log(res)
+                        if(res) {
+                            menus.normal.items.find(x => x.id == 'addToLibrary').hidden = true
+                            menus.normal.items.find(x => x.id == 'removeFromLibrary').hidden = false
+                        }else{
+                            menus.normal.items.find(x => x.id == 'addToLibrary').disabled = false
+                        }
+                    })
+
+                }catch(e) {
+
+                }
                 try{
                 let rating = await app.getRating(self.item)
                 if (rating == 0) {