From 272d3392a1815f6aab79fd66f18bf4f2f4a63fc8 Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Sat, 26 Mar 2022 19:04:00 +0700
Subject: [PATCH] improved artist page

---
 src/main/base/browserwindow.ts                |   9 +-
 src/renderer/less/pages.less                  | 188 +++++++++++
 src/renderer/main/vueapp.js                   |   2 +-
 src/renderer/views/app/app-content.ejs        |   7 +-
 .../components/inline-collection-list.ejs     | 132 ++++++++
 .../views/pages/library-artists copy.ejs      |  49 +++
 src/renderer/views/pages/library-artists.ejs  | 306 +++++++++++++++---
 7 files changed, 643 insertions(+), 50 deletions(-)
 create mode 100644 src/renderer/views/components/inline-collection-list.ejs
 create mode 100644 src/renderer/views/pages/library-artists copy.ejs

diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts
index e71b12c7..999858dd 100644
--- a/src/main/base/browserwindow.ts
+++ b/src/main/base/browserwindow.ts
@@ -42,6 +42,7 @@ export class BrowserWindow {
                 "pages/apple-account-settings",
                 "pages/library-songs",
                 "pages/library-albums",
+                "pages/library-artists",
                 "pages/browse",
                 "pages/settings",
                 "pages/listen_now",
@@ -83,7 +84,7 @@ export class BrowserWindow {
                 "components/mediaitem-hrect",
                 "components/mediaitem-square",
                 "components/mediaitem-mvview",
-                "components/libraryartist-item",
+                // "components/libraryartist-item",
                 "components/listennow-child",
                 "components/mediaitem-mvview-sp",
                 "components/animatedartwork-view",
@@ -94,6 +95,7 @@ export class BrowserWindow {
                 "components/castmenu",
                 "components/artist-chip",
                 "components/hello-world",
+                "components/inline-collection-list",
             ],
             appRoutes: [
                 {
@@ -186,6 +188,11 @@ export class BrowserWindow {
                     component: `<cider-library-albums :data="library.songs"></cider-library-albums>`,
                     condition: `page == 'library-albums'`,
                     onEnter: `getLibraryAlbumsFull(null, 1); getAlbumSort(); searchLibraryAlbums(1); getLibrarySongsFull() ;searchLibraryAlbums(1);`
+                }, {
+                    page: "library-artists",
+                    component: `<cider-library-artists></cider-library-artists>`,
+                    condition: `page == 'library-artists'`,
+                    onEnter: `getLibraryArtistsFull(null, 0);`
                 }, {
                     page: "appleCurator",
                     component: `<cider-applecurator :data="appleCurator"></cider-applecurator>`,
diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index bf79c2b6..91338f8d 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -278,6 +278,194 @@
 
 }
 
+// Podcast Page
+.content-inner.library-artists-page {
+  // top: 0;
+  height: calc(100% - var(--navigationBarHeight));
+  padding: 0px;
+  .inner-container {
+    display: flex;
+    height : calc(100% - var(--navigationBarHeight));
+    padding: 0px;
+    height: 100%;
+
+    .list-flat {
+      border-radius: 0px;
+    }
+
+    .podcast-artwork {
+      width : 200px;
+      margin: 16px auto;
+      height: 200px;
+    }
+
+    .podcasts-list {
+      height      : 100%;
+      width       : 280px;
+      background  : rgb(200 200 200 / 10%);
+      overflow-y  : overlay;
+      border-right: 1px solid var(--color2);
+      flex        : none;
+      overflow-x  : hidden;
+
+      .podcast-list-header {
+        border-bottom : 1px solid var(--color2);
+        font-size     : 0.7em;
+        padding       : 6px;
+        background    : #ffffff17;
+        text-transform: uppercase;
+        font-weight   : 600;
+        opacity       : 0.5;
+      }
+
+      .podcasts-search {
+        padding      : 10px;
+        position     : sticky;
+        top          : 0;
+        left         : 0;
+        width        : 100%;
+        border-bottom: 1px solid var(--color2);
+        z-index      : 2;
+        background   : #303030;
+      }
+    }
+
+    .episodes-list {
+      height    : 100%;
+      width     : 100%;
+      background: rgb(200 200 200 / 6%);
+      overflow-y: overlay;
+      overflow-x: hidden;
+
+      .episodes-inline-info {
+        padding: 14px 14px 0px 14px;
+
+        .podcast-show-info {
+          display        : flex;
+          justify-content: center;
+          flex-direction : column;
+        }
+
+        .podcast-show-description {
+          margin     : 32px 6px;
+          font-size  : 0.8rem;
+          white-space: pre-wrap;
+          display    : block;
+        }
+
+        .podcast-artwork {
+          width : 120px;
+          margin: 0px auto;
+          height: 120px;
+        }
+      }
+
+      .podcast-no-search-results {
+        text-align: center;
+        margin-top: 40px;
+      }
+    }
+
+    .podcasts-details {
+      width         : 300px;
+      flex          : none;
+      background    : rgb(255 255 255 / 5%);
+      overflow-y    : overlay;
+      overflow-x    : hidden;
+      top           : 2%;
+      z-index       : 2;
+      border-left   : 1px solid var(--color2);
+      padding-bottom: 1em;
+
+      .meta-btn {
+        font-size: 0.75em;
+      }
+
+      .podcasts-details-header {
+        display        : flex;
+        justify-content: end;
+        align-items    : center;
+        position       : sticky;
+        top            : 0;
+        z-index        : 2;
+      }
+
+      .close-btn {
+        width              : 50px;
+        height             : 42px;
+        background-image   : var(--gfx-closeBtn);
+        background-position: center;
+        background-repeat  : no-repeat;
+        -webkit-app-region : no-drag;
+        appearance         : none;
+        border             : 0;
+        background-color   : transparent;
+        position           : absolute;
+        top                : 0;
+        right              : 0;
+
+        &:hover {
+          background-color: rgb(196, 43, 28)
+        }
+      }
+
+      .podcast-genre {
+        text-align : center;
+        margin     : 6px;
+        font-size  : 0.8em;
+        font-weight: 500;
+        opacity    : 0.8;
+      }
+
+      .podcast-metainfo {
+        text-align: center;
+        font-size : 0.7em;
+        opacity   : 0.8;
+      }
+
+      .podcast-header {
+        text-align: center;
+      }
+
+      .podcast-play-btn {
+        width  : 50%;
+        display: block;
+        margin : 0 auto;
+      }
+
+      .podcast-description {
+        margin     : 12px;
+        font-size  : 0.75em;
+        white-space: pre-wrap;
+        display    : block;
+        line-break : anywhere;
+      }
+
+
+    }
+
+  }
+
+  @media only screen and (max-width: 1230px) {
+    .content-inner.podcasts-page {
+      .podcasts-details {
+        height       : 96%;
+        width        : 300px;
+        flex         : none;
+        background   : rgb(20 20 20 / 97%);
+        overflow-y   : overlay;
+        overflow-x   : hidden;
+        position     : absolute;
+        right        : 2%;
+        top          : 2%;
+        border-radius: 10px;
+        box-shadow   : var(--ciderShadow-Generic);
+        z-index      : 2;
+      }
+    }
+  }
+}
+
 @media only screen and (max-width: 1230px) {
   .content-inner.podcasts-page {
     .podcasts-details {
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index e3449711..7cf7e515 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -222,7 +222,7 @@ const app = new Vue({
         pluginPages: {
             page: "hello-world",
             pages: [],
-        }
+        },
     },
     watch: {
         cfg: {
diff --git a/src/renderer/views/app/app-content.ejs b/src/renderer/views/app/app-content.ejs
index 3912c46f..4c220be4 100644
--- a/src/renderer/views/app/app-content.ejs
+++ b/src/renderer/views/app/app-content.ejs
@@ -46,11 +46,6 @@
         </template>
     </transition>
     <!-- Library - Artists-->
-    <transition :name="chrome.desiredPageTransition" v-on:enter="getLibraryArtistsFull(null, 0);">
-        <template v-if="page == 'library-artists'">
-            <%- include('../pages/library-artists') %>');
-            %>
-        </template>
-    </transition>
+
 
 </div>
\ No newline at end of file
diff --git a/src/renderer/views/components/inline-collection-list.ejs b/src/renderer/views/components/inline-collection-list.ejs
new file mode 100644
index 00000000..3f70c930
--- /dev/null
+++ b/src/renderer/views/components/inline-collection-list.ejs
@@ -0,0 +1,132 @@
+<script type="text/x-template" id="inline-collection-list">
+    <div class="collection-page">
+        <h3 class="header-text" v-observe-visibility="{callback: headerVisibility}">{{ title }}</h3>
+        <div v-if="data['data'] != 'null'" class="well itemContainer">
+            <template v-for="(item, key) in data.data">
+                <template v-if="item.type == 'artists'">
+                    <mediaitem-square :item="item"></mediaitem-square>
+                </template>
+            <template v-else>
+                    <mediaitem-list-item
+                            v-if="getKind(item) == 'song'"
+                            :index="key"
+                            :item="item"></mediaitem-list-item>
+                    <mediaitem-square v-else :item="item" :type="getKind(item)"></mediaitem-square>
+                </template>
+            </template>
+            <button v-if="triggerEnabled" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">{{this.app.getLz('term.showMore')}}
+            </button>
+        </div>
+        <transition name="fabfade">
+            <button class="top-fab" v-show="showFab" @click="scrollToTop()">
+                <%- include("../svg/arrow-up.svg") %>
+            </button>
+        </transition>
+        <div class="well itemContainer" v-show="loading">
+            <div class="spinner"></div>
+        </div>
+    </div>
+</script>
+<script>
+    Vue.component('inline-collection-list', {
+        template: "#inline-collection-list",
+        props: {
+            data: {
+                required: true
+            },
+            title: {
+                type: String,
+                required: false
+            },
+            type: {
+                type: String,
+                required: false,
+                default: "artists"
+            }
+        },
+        data: function() {
+            return {
+                triggerEnabled: true,
+                canSeeTrigger: false,
+                showFab: false,
+                commonKind: "song",
+                api: this.$root.mk.api,
+                loading: false,
+                app: this.$root,
+            }
+        },
+        watch:{
+            data: function(newVal, oldVal) {
+            console.log("newdata",newVal);
+            },
+        
+        },
+        methods: {
+            getKind(item) {
+                if (typeof item.kind != "undefined") {
+                    this.commonKind = item.kind;
+                    return item.kind
+                }
+                if (typeof item.attributes.playParams != "undefined") {
+                    this.commonKind = item.attributes.playParams.kind
+                    return item.attributes.playParams.kind
+                }
+                return this.commonKind
+            },
+            scrollToTop() {
+                let target = document.querySelector(".header-text")
+                document.querySelector("#app-content").scrollTo({
+                    top: 0,
+                    left: 0,
+                    behavior: 'smooth'
+                })
+            },
+            getNext() {
+                let self = this
+                this.triggerEnabled = false;
+                if (typeof this.data.next == "undefined") {
+                    return
+                }
+                this.loading = true
+
+                this.api.v3.music(this.data.next, app.collectionList.requestBody).then((response) => {
+                    console.log(response)
+                    if (!app.collectionList.response.groups) {
+                        this.data.data = this.data.data.concat(response.data.data);
+                        if (response.data.next) {
+                            this.data.next = response.data.next;
+                            this.triggerEnabled = true;
+                        }
+                        this.loading = false
+                    } else {
+                        if (!response.data.results[app.collectionList.response.groups]) {
+                            this.loading = false
+                            return
+                        }
+                        this.data.data = this.data.data.concat(response.data.results[app.collectionList.response.groups].data);
+                        if (response.data.results[app.collectionList.response.groups].next) {
+                            this.data.next = response.data.results[app.collectionList.response.groups].next;
+                            this.triggerEnabled = true;
+                            this.loading = false
+                        }
+                    }
+                })
+            },
+            headerVisibility: function(isVisible, entry) {
+                if (isVisible) {
+                    this.showFab = false;
+                } else {
+                    this.showFab = true;
+                }
+            },
+            visibilityChanged: function(isVisible, entry) {
+                if (isVisible) {
+                    this.canSeeTrigger = true;
+                    this.getNext();
+                } else {
+                    this.canSeeTrigger = false;
+                }
+            }
+        }
+    })
+</script>
\ No newline at end of file
diff --git a/src/renderer/views/pages/library-artists copy.ejs b/src/renderer/views/pages/library-artists copy.ejs
new file mode 100644
index 00000000..f1871d04
--- /dev/null
+++ b/src/renderer/views/pages/library-artists copy.ejs	
@@ -0,0 +1,49 @@
+<div class="content-inner">
+    <div class="row">
+        <div class="col" style="padding:0;">
+            <h1 class="header-text">{{$root.getLz('term.artists')}}</h1>
+        </div>
+
+    </div>
+    <div class="row">
+        <div class="col" style="padding:0;">
+            <div class="search-input-container" style="width:100%;margin: 16px 0;">
+                <div class="search-input--icon"></div>
+                <input type="search" style="width:100%;" spellcheck="false" :placeholder="$root.getLz('term.search') + '...'" @input="searchLibraryArtists" v-model="library.artists.search" class="search-input">
+            </div>
+        </div>
+        <div class="col-auto flex-center">
+            <div class="row">
+                <!-- <div class="col">
+                        <select class="md-select" v-model="library.artists.sorting[1]" @change="searchLibraryArtists(1)">
+                            <optgroup label="Sort By">
+                                <option v-for="(sort, index) in library.artists.sortingOptions" :value="index">{{ sort }}</option>
+                            </optgroup>
+                        </select>
+                    </div> -->
+                <div class="col">
+                    <select class="md-select" v-model="library.artists.sortOrder[1]" @change="searchLibraryArtists(1)">
+                            <optgroup :label="$root.getLz('term.sortOrder')">
+                                <option value="asc">{{$root.getLz('term.sortOrder.ascending')}}</option>
+                                <option value="desc">{{$root.getLz('term.sortOrder.descending')}}</option>
+                            </optgroup>
+                        </select>
+                </div>
+                <!-- <div class="col">
+                        <select class="md-select" v-model="library.artists.viewAs">
+                            <optgroup label="View As">
+                                <option value="covers">Cover Art</option>
+                                <option value="list">List</option>
+                            </optgroup>
+                        </select>
+                    </div> -->
+            </div>
+        </div>
+    </div>
+    <div class="well">
+        <!-- <mediaitem-square v-if="library.artists.viewAs == 'covers'" :item="item" v-for="item in library.artists.displayListing">
+            </mediaitem-square> -->
+        <libraryartist-item :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.artists.displayListing">
+        </libraryartist-item>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/renderer/views/pages/library-artists.ejs b/src/renderer/views/pages/library-artists.ejs
index f1871d04..2a4397e8 100644
--- a/src/renderer/views/pages/library-artists.ejs
+++ b/src/renderer/views/pages/library-artists.ejs
@@ -1,49 +1,271 @@
-<div class="content-inner">
-    <div class="row">
-        <div class="col" style="padding:0;">
-            <h1 class="header-text">{{$root.getLz('term.artists')}}</h1>
+<script type="text/x-template" id="cider-library-artists">
+    <div class="content-inner library-artists-page">
+        <!-- <div class="row">
+            <div class="col" style="padding:0;">
+                <h1 class="header-text">{{$root.getLz('term.artists')}}</h1>
+            </div>
+    
+        </div> -->
+        <div class="inner-container">
+            <div class="podcasts-list">
+                <libraryartist-item :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.artists.displayListing">
+                </libraryartist-item>
+            </div>
+            <div class="episodes-list" >   
+                <div class="episodes-inline-info">        
+                <inline-collection-list v-if="clresponse != []" :data="clresponse" :type="cltype" :title="cltitle"></inline-collection-list>
+                </div>    
+            </div>
         </div>
 
     </div>
-    <div class="row">
-        <div class="col" style="padding:0;">
-            <div class="search-input-container" style="width:100%;margin: 16px 0;">
-                <div class="search-input--icon"></div>
-                <input type="search" style="width:100%;" spellcheck="false" :placeholder="$root.getLz('term.search') + '...'" @input="searchLibraryArtists" v-model="library.artists.search" class="search-input">
+</script>
+<script>
+    Vue.component('cider-library-artists', {
+        template: '#cider-library-artists',
+        data: function () {
+            return {
+                library: this.$root.library,
+                app: this.$root,
+                ciderPodcasts: [],
+                podcasts: [],
+                episodes: [],
+                search: {
+                    term: "",
+                    loading: false,
+                    results: [],
+                    resultsLibrary: [],
+                    next: ""
+                },
+                podcastSelected: {
+                    id: -1
+                },
+                selected: {
+                    id: -1
+                },
+                collectionList: {
+                    response: null, title: null, type: null, requestBody: null
+                },
+                clresponse: [],
+                cltitle: '',
+                cltype: "artists",
+
+            }
+        },
+        mounted() {
+            let self = this;
+            this.$root.$on('ap-inlinecollection', function(e){
+                console.log("hey",e)
+                self.clresponse = e.response;
+                self.cltitle = e.title ?? '';
+                self.cltype = e.type ;
+                
+            })
+        },
+        methods: {
+            getInlineCollection(e){
+                console.log("hey",e);
+            }
+        }
+    });
+</script>
+<script type="text/x-template" id="libraryartist-item">
+    <div v-observe-visibility="{callback: visibilityChanged}"      
+         @click="select"
+         class="cd-mediaitem-list-item"
+         :class="{'mediaitem-selected': app.select_hasMediaItem(guid)}"
+         @contextmenu="contextMenu">
+        <template v-if="isVisible">
+            <div class="artwork" v-if="showArtwork == true">
+                <mediaitem-artwork
+                        :url="getArtwork()"
+                        size="50"
+                        :type="item.type"></mediaitem-artwork>
             </div>
-        </div>
-        <div class="col-auto flex-center">
-            <div class="row">
-                <!-- <div class="col">
-                        <select class="md-select" v-model="library.artists.sorting[1]" @change="searchLibraryArtists(1)">
-                            <optgroup label="Sort By">
-                                <option v-for="(sort, index) in library.artists.sortingOptions" :value="index">{{ sort }}</option>
-                            </optgroup>
-                        </select>
-                    </div> -->
-                <div class="col">
-                    <select class="md-select" v-model="library.artists.sortOrder[1]" @change="searchLibraryArtists(1)">
-                            <optgroup :label="$root.getLz('term.sortOrder')">
-                                <option value="asc">{{$root.getLz('term.sortOrder.ascending')}}</option>
-                                <option value="desc">{{$root.getLz('term.sortOrder.descending')}}</option>
-                            </optgroup>
-                        </select>
+            <div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}"
+                 @dblclick="app.routeView(item)">
+                <div class="title text-overflow-elipsis">
+                    {{ item.attributes.name }}
                 </div>
-                <!-- <div class="col">
-                        <select class="md-select" v-model="library.artists.viewAs">
-                            <optgroup label="View As">
-                                <option value="covers">Cover Art</option>
-                                <option value="list">List</option>
-                            </optgroup>
-                        </select>
-                    </div> -->
             </div>
-        </div>
+        </template>
     </div>
-    <div class="well">
-        <!-- <mediaitem-square v-if="library.artists.viewAs == 'covers'" :item="item" v-for="item in library.artists.displayListing">
-            </mediaitem-square> -->
-        <libraryartist-item :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.artists.displayListing">
-        </libraryartist-item>
-    </div>
-</div>
\ No newline at end of file
+</script>
+
+<script>
+    Vue.component('libraryartist-item', {
+        template: '#libraryartist-item',
+        data: function () {
+            return {
+                isVisible: false,
+                addedToLibrary: false,
+                guid: this.uuidv4(),
+                app: this.$root,
+            }
+        },
+        props: {
+            'item': {type: Object, required: true},
+            'parent': {type: String, required: false},
+            'index': {type: Number, required: false, default: -1},
+            'show-artwork': {type: Boolean, default: true},
+            'show-library-status': {type: Boolean, default: true},
+            'show-meta-data': {type: Boolean, default: false},
+            'show-duration': {type: Boolean, default: true},
+            'contextExt': {type: Object, required: false},
+        },
+        methods: {
+            uuidv4() {
+                return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+                    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+                );
+            },
+            msToMinSec(ms) {
+                var minutes = Math.floor(ms / 60000);
+                var seconds = ((ms % 60000) / 1000).toFixed(0);
+                return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
+            },
+            getDataType() {
+                return this.item.type
+            },
+            async select(e)  {
+               let u = this.item
+               let u1 = await app.mk.api.v3.music(`/v1/me/library/artists/${u.id}/albums`, {
+                    "platform": "web",
+                    "include[library-albums]": "artists,tracks",
+                    "include[library-artists]": "catalog",
+                    "fields[artists]": "url",
+                    "includeOnly": "catalog,artists"
+                })
+                this.showCollection({data : Object.assign({},u1.data.data)}, u.attributes.name?? '', '');
+               //app.select_selectMediaItem(u.id, this.getDataType(), this.index, this.guid, true)
+            },
+            showCollection(response, title, type, requestBody = {}){
+                console.log(response, title, type, requestBody);
+                this.$root.$emit('ap-inlinecollection', {
+                    response: response, title: title, type: type, requestBody: {}}
+                );
+            },
+            getArtwork(){
+                let u = ""
+                try{
+                u = this.item.relationships.catalog.data[0].attributes.artwork.url}
+                catch (e){};
+                return u;
+            },
+            contextMenu(event) {
+
+                let self = this
+                let data_type = this.getDataType()
+               
+                let item = self.item
+                item.attributes.artistName = item.attributes.name;
+
+                let useMenu = "normal"
+                if (app.selectedMediaItems.length <= 1) {
+                    app.selectedMediaItems = []
+                    app.select_selectMediaItem(this.item.id, data_type, this.index, this.guid, true)
+                } else {
+                    useMenu = "multiple"
+                }
+
+                let menus = {
+                    multiple: {
+                        items: [] //
+                    },
+                    normal: {
+                        items: [
+                            {
+                                "name": app.getLz('action.goToArtist'),
+                                "icon": "./assets/feather/user.svg",
+                                "action": function () {
+                                    app.searchAndNavigate(self.item, 'artist')
+                                    console.log(self.item)
+                                }
+                            },
+                            {
+                                "icon": "./assets/feather/radio.svg",
+                                "name": app.getLz('action.startRadio'),
+                                "action": function () {
+                                    app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => {
+                                        app.mk.play()
+                                        app.selectedMediaItems = []
+                                    })
+                                }
+                            },
+                            {
+                                "icon": "./assets/feather/share.svg",
+                                "name": app.getLz('action.share'),
+                                "action": function () {
+                                    if (!self.item.attributes.url && self.item.relationships){
+                                        if (self.item.relationships.catalog){
+                                            app.mkapi(self.item.attributes.playParams.kind, false, self.item.relationships.catalog.data[0].id).then(u => {self.app.copyToClipboard((u.data.data.length && u.data.data.length > 0)? u.data.data[0].attributes.url : u.data.data.attributes.url)})
+                                        }
+                                    } else {
+                                    self.app.copyToClipboard(self.item.attributes.url)}
+                                }
+                            },
+                        ]
+                    }
+                }
+                if (this.contextExt) {
+                    // if this.context-ext.normal is true append all options to the 'normal' menu which is a kvp of arrays
+                    if (this.contextExt.normal) {
+                        menus.normal.items = menus.normal.items.concat(this.contextExt.normal)
+                    }
+                    if (this.contextExt.multiple) {
+                        menus.multiple.items = menus.multiple.items.concat(this.contextExt.multiple)
+                    }
+                }
+                //CiderContextMenu.Create(event, menus[useMenu]); // Depreciated Context Menu
+                app.showMenuPanel(menus[useMenu], event);
+
+            },
+            visibilityChanged: function (isVisible, entry) {
+                this.isVisible = isVisible
+            },
+            addToLibrary() {
+                let item = this.item
+                if (item.attributes.playParams.id) {
+                    console.log('adding to library', item.attributes.playParams.id)
+                    app.addToLibrary(item.attributes.playParams.id.toString())
+                    this.addedToLibrary = true
+                } else if (item.id) {
+                    console.log('adding to library', item.id)
+                    app.addToLibrary(item.id.toString())
+                    this.addedToLibrary = true
+                }
+            },
+            async removeFromLibrary() {
+                let item = this.item
+                let params = {"fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library"}
+                let id = item.id ?? item.attributes.playParams.id
+                let res = await app.mkapi(item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.playParams.id ?? item.id, params);
+                if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
+                    id = res.relationships.library.data[0].id
+                }
+                let kind = this.item.attributes.playParams.kind ?? this.data.item ?? '';
+                let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
+                if (item.attributes.playParams.id) {
+                    console.log('remove from library', id)
+                    app.removeFromLibrary(truekind, id)
+                    this.addedToLibrary = false
+                } else if (item.id) {
+                    console.log('remove from library', id)
+                    app.removeFromLibrary(truekind, id)
+                    this.addedToLibrary = false
+                }
+            },
+            playTrack() {
+                let item = this.item
+                let parent = this.parent
+                let childIndex = this.index
+                console.log(item, parent, childIndex)
+                if (parent != null && childIndex != null) {
+                    app.queueParentandplayChild(parent, childIndex, item);
+                } else {
+                    app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)
+                }
+            }
+        }
+    });
+</script>
\ No newline at end of file