From 2553fce33d5af62f53f6f0aaa97046b4de49029d Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Wed, 3 Aug 2022 22:09:11 -0700
Subject: [PATCH] fixed square

---
 .../views/components/mediaitem-square.ejs     | 1109 ++++++++---------
 1 file changed, 554 insertions(+), 555 deletions(-)

diff --git a/src/renderer/views/components/mediaitem-square.ejs b/src/renderer/views/components/mediaitem-square.ejs
index 30e4db5c..838477f3 100644
--- a/src/renderer/views/components/mediaitem-square.ejs
+++ b/src/renderer/views/components/mediaitem-square.ejs
@@ -1,221 +1,202 @@
 <script type="text/x-template" id="mediaitem-square">
-    <div tabindex="0" class="cd-mediaitem-square-container"
-         @click.self="app.routeView(item)"
-         @controller-click="app.routeView(item)"
-         @contextmenu.self="getContextMenu"
-         v-observe-visibility="{callback: visibilityChanged}"
-    >
-        <div v-if="reasonShown" class="reasonSP ">{{item?.meta?.reason?.stringForDisplay ?? ''}}</div>
-        <div style="{'--spcolor': getBgColor()}"
-             class="cd-mediaitem-square" :class="getClasses()" @contextmenu="getContextMenu">
-            <div class="artwork-container" v-show="isVisible">
-                <div class="unavailable-overlay" v-if="unavailable">
-                    <div class="codicon codicon-circle-slash"></div>
-                </div>
-                <div class="artwork" @click='app.routeView(item)'>
-                    <mediaitem-artwork
-                            :url="getArtworkUrl()"
-                            :video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
-                            :size="size"
-                            :upscaling="true"
-                            shadow="subtle"
-                            :bgcolor="getBgColor()"
-                            :video-priority="forceVideo"
-                            :type="item.type"></mediaitem-artwork>
-                </div>
-                <button class="menu-btn" v-if="!nomenu.includes(item.type)"
-                        @click="getContextMenu" :aria-label="$root.getLz('term.more')">
-                    <%- include("../svg/more.svg") %>
-                </button>
-                <button class="play-btn" v-if="!noplay.includes(item.type)"
-                        @click="app.playMediaItem(item)" :aria-label="$root.getLz('term.play')">
-                    <%- include("../svg/play.svg") %>
-                </button>
-                <div class="badge-container" v-if="itemBadges.length != 0">
-                    <div class="socialBadge" v-for="badge in itemBadges.limit(1)">
-                        <mediaitem-artwork
-                                :url="(badge.attributes.artwork ? badge.attributes.artwork.url : '')"
-                                :size="32"></mediaitem-artwork>
-                    </div>
-                </div>
-            </div>
-            <div class="info-rect" :class="{'info-rect-card': kind == 'card'}"
-                 v-show="isVisible"
-                 :style="{'--bgartwork': getArtworkUrl(size, true)}">
-                <div class="title"
-                     :title="item.attributes?.name ?? (item.relationships?.contents?.data[0]?.attributes?.name ?? (item.attributes?.editorialNotes?.name ?? ''))"
-                     v-if="item.attributes.artistNames == null || kind != 'card'" @click='app.routeView(item)'>
-                    <div class="item-navigate text-overflow-elipsis">{{ item.attributes?.name.replace(/&nbsp;/g, '
-                        ').replace(/Apple Music |^Apple |/g, '') ??
-                        (item.relationships?.contents?.data[0]?.attributes?.name ??
-                        (item.attributes?.editorialNotes?.name ?? '')) }}
-                    </div>
-                    <div class="explicit-icon" v-if="item.attributes && item.attributes.contentRating == 'explicit'"
-                         style="background-image: url(./assets/explicit.svg);height: 12px;width: 12px;filter: contrast(0);background-repeat: no-repeat;margin-top: 2.63px;margin-left: 4px;"></div>
-                </div>
-                <div :title="getSubtitle()" class="subtitle item-navigate text-overflow-elipsis"
-                     @click="getSubtitleNavigation()"
-                     v-if="getSubtitle() != ''">
-                    {{ getSubtitle() }}
-                </div>
-                <div class="subtitle" v-if="getSubtitle() == '' && kind != 'card'">&nbsp;</div>
-            </div>
-        </div>
-    </div>
+  <div tabindex="0" class="cd-mediaitem-square-container"
+       @click.self="app.routeView(item)"
+       @controller-click="app.routeView(item)"
+       @contextmenu.self="getContextMenu"
+       v-observe-visibility="{callback: visibilityChanged}"
+  >
+      <div v-if="reasonShown" class="reasonSP ">{{item?.meta?.reason?.stringForDisplay ?? ''}}</div>
+      <div style="{'--spcolor': getBgColor()}"
+           class="cd-mediaitem-square" :class="getClasses()" @contextmenu="getContextMenu">
+              <div class="artwork-container" v-show="isVisible">
+                  <div class="unavailable-overlay" v-if="unavailable">
+                      <div class="codicon codicon-circle-slash"></div>
+                  </div>
+                  <div class="artwork" @click='app.routeView(item)'>
+                      <mediaitem-artwork
+                              :url="getArtworkUrl()"
+                              :video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
+                              :size="size"
+              :upscaling="true"
+                              shadow="subtle"
+                              :bgcolor="getBgColor()"
+                              :video-priority="forceVideo"
+                              :type="item.type"></mediaitem-artwork>
+                  </div>
+                  <button class="menu-btn" v-if="!nomenu.includes(item.type)"
+                          @click="getContextMenu" :aria-label="$root.getLz('term.more')">
+                      <%- include("../svg/more.svg") %>
+                  </button>
+                  <button class="play-btn" v-if="!noplay.includes(item.type)"
+                          @click="app.playMediaItem(item)" :aria-label="$root.getLz('term.play')">
+                      <%- include("../svg/play.svg") %>
+                  </button>
+                  <div class="badge-container" v-if="itemBadges.length != 0">
+                      <div class="socialBadge" v-for="badge in itemBadges.limit(1)">
+                          <mediaitem-artwork
+                                  :url="(badge.attributes.artwork ? badge.attributes.artwork.url : '')"
+                                  :size="32"></mediaitem-artwork>
+                      </div>
+                  </div>
+              </div>
+              <div class="info-rect" :class="{'info-rect-card': kind == 'card'}"
+        v-show="isVisible"
+                   :style="{'--bgartwork': getArtworkUrl(size, true)}">
+                  <div class="title"
+                       :title="item.attributes?.name ?? (item.relationships?.contents?.data[0]?.attributes?.name ?? (item.attributes?.editorialNotes?.name ?? ''))"
+                       v-if="item.attributes.artistNames == null || kind != 'card'" @click='app.routeView(item)'>
+                      <div class="item-navigate text-overflow-elipsis">{{ item.attributes?.name.replace(/&nbsp;/g, ' ').replace(/Apple Music |^Apple |/g, '') ??
+                          (item.relationships?.contents?.data[0]?.attributes?.name ??
+                          (item.attributes?.editorialNotes?.name ?? '')) }}
+                      </div>
+                      <div class="explicit-icon" v-if="item.attributes && item.attributes.contentRating == 'explicit'"
+                           style="background-image: url(./assets/explicit.svg);height: 12px;width: 12px;filter: contrast(0);background-repeat: no-repeat;margin-top: 2.63px;margin-left: 4px;"></div>
+                  </div>
+                  <div :title="getSubtitle()" class="subtitle item-navigate text-overflow-elipsis"
+                       @click="getSubtitleNavigation()"
+                       v-if="getSubtitle() != ''">
+                      {{ getSubtitle() }}
+                  </div>
+                  <div class="subtitle" v-if="getSubtitle() == '' && kind != 'card'">&nbsp;</div>
+              </div>
+      </div>
+  </div>
 </script>
 
 <script>
-  Vue.component('mediaitem-square', {
-    template: '#mediaitem-square',
-    props: {
-      item: {
-        type: Object,
-        required: true
-      },
-      kind: {
-        type: String,
-        default: ''
-      },
-      size: {
-        type: String,
-        default: '190'
-      },
-      forceVideo: {
-        type: Boolean,
-        default: false
-      },
-      reasonShown: {
-        type: Boolean,
-        default: false,
-        required: false
-      },
-      noScale: {
-        type: Boolean,
-        default: false,
-        required: false
-      },
-      imageformat: {
-        type: String,
-        default: 'cc',
-        required: false
-      },
-      'contextExt': { type: Object, required: false },
+Vue.component('mediaitem-square', {
+  template: '#mediaitem-square',
+  props: {
+    item: {
+      type: Object,
+      required: true
     },
-    data: function() {
-      return {
-        isVisible: false,
-        addedToLibrary: false,
-        guid: this.uuidv4(),
-        noplay: ["apple-curators", "editorial-elements", "editorial-items"],
-        nomenu: ["stations", "apple-curators", "editorial-elements", "editorial-items"],
-        app: this.$root,
-        badges: this.$root.socialBadges.badgeMap,
-        itemBadges: [],
-        unavailable: false
+    kind: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: '190'
+    },
+    forceVideo: {
+      type: Boolean,
+      default: false
+    },
+    reasonShown: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+          noScale: {
+              type: Boolean,
+              default: false,
+              required: false
+          },
+    imageformat: {
+              type: String,
+              default: 'cc',
+              required: false
+          },
+    'contextExt': { type: Object, required: false },
+  },
+  data: function () {
+    return {
+      isVisible: false,
+      addedToLibrary: false,
+      guid: this.uuidv4(),
+      noplay: ["apple-curators", "editorial-elements", "editorial-items"],
+      nomenu: ["stations", "apple-curators", "editorial-elements", "editorial-items"],
+      app: this.$root,
+      badges: this.$root.socialBadges.badgeMap,
+      itemBadges: [],
+      unavailable: false
+    }
+  },
+  async mounted() {
+    await this.getBadges()
+    if (typeof this.item.attributes.playParams == "object") {
+      if (this.item.attributes.playParams.kind.includes("radioStation") && (this.item.attributes.playParams.streamingKind == 1)) {
+        this.unavailable = true
+      }
+    } else {
+      if (this.item.type == "music-movies" || this.item.type == "tv-episodes") {
+        this.unavailable = true
+      }
+    }
+  },
+  methods: {
+    getBgColor() {
+      return `#${(this.item.attributes.artwork != null && this.item.attributes.artwork.bgColor != null) ? (this.item.attributes.artwork.bgColor) : ``}`
+    },
+    getContextMenu(event) {
+      if (this.item.type === "artists") {
+        return this.artistMenu(event)
+      } else {
+        return this.contextMenu(event)
       }
     },
-    async mounted() {
-      await this.getBadges()
-      if (typeof this.item.attributes.playParams == "object") {
-        if (this.item.attributes.playParams.kind.includes("radioStation") && (this.item.attributes.playParams.streamingKind == 1)) {
-          this.unavailable = true
+    getSubtitle() {
+      if (this.kind == "card") {
+        if (typeof this.item.attributes.artistNames != "undefined") {
+          return this.item.attributes.artistNames
+        } else if (typeof this.item.attributes.editorialNotes != "undefined") {
+          return this.item?.attributes?.editorialNotes?.short ?? (this.item.attributes?.editorialNotes?.name ?? '')
+        } else if (typeof this.item.attributes.artistName != "undefined") {
+          return this.item.attributes.artistName
+        } else {
+          return ''
         }
       } else {
-        if (this.item.type == "music-movies" || this.item.type == "tv-episodes") {
-          this.unavailable = true
+        if (typeof this.item.attributes.artistName != "undefined") {
+          return this.item.attributes.artistName
+        } else if (typeof this.item.attributes.artist != "undefined") {
+          return this.item.attributes.artist.attributes.name
+        } else if (typeof this.item.attributes.curatorName != "undefined") {
+          return this.item.attributes.curatorName
+        } else {
+          return ''
         }
       }
     },
-    methods: {
-      getBgColor() {
-        return `#${(this.item.attributes.artwork != null && this.item.attributes.artwork.bgColor != null) ? (this.item.attributes.artwork.bgColor) : ``}`
-      },
-      getContextMenu(event) {
-        if (this.item.type === "artists") {
-          return this.artistMenu(event)
-        } else {
-          return this.contextMenu(event)
-        }
-      },
-      getSubtitle() {
-        if (this.kind == "card") {
-          if (typeof this.item.attributes.artistNames != "undefined") {
-            return this.item.attributes.artistNames
-          } else if (typeof this.item.attributes.editorialNotes != "undefined") {
-            return this.item?.attributes?.editorialNotes?.short ?? (this.item.attributes?.editorialNotes?.name ?? '')
-          } else if (typeof this.item.attributes.artistName != "undefined") {
-            return this.item.attributes.artistName
-          } else {
-            return ''
-          }
-        } else {
-          if (typeof this.item.attributes.artistName != "undefined") {
-            return this.item.attributes.artistName
-          } else if (typeof this.item.attributes.artist != "undefined") {
-            return this.item.attributes.artist.attributes.name
-          } else if (typeof this.item.attributes.curatorName != "undefined") {
-            return this.item.attributes.curatorName
-          } else {
-            return ''
-          }
-        }
-      },
-      getSubtitleNavigation() {
-        if (this.kind === 'card' || this.item.type === "playlists") {
-          try {
-            if (typeof this.item.attributes.artistName != "undefined") {
-              return app.searchAndNavigate(this.item, 'artist')
-            } else {
-              return app.routeView(this.item)
-            }
-          } catch (e) {
-            return app.routeView(this.item)
-          }
-        } else {
+    getSubtitleNavigation() {
+      if (this.kind === 'card' || this.item.type === "playlists") {
+        try {
           if (typeof this.item.attributes.artistName != "undefined") {
             return app.searchAndNavigate(this.item, 'artist')
           } else {
             return app.routeView(this.item)
           }
+        } catch (e) {
+          return app.routeView(this.item)
         }
-      },
-      async getBadges() {
-        const self = this
-        const id = ((this.item.attributes?.playParams ?? false) ? this.item.attributes?.playParams.id : null) || this.item.id
-        if (id && this.badges[id]) {
-          let friends = this.badges[id]
-          if (friends) {
-            friends.forEach(function(friend) {
-              self.app.mk.api.v3.music(`/v1/social/${app.mk.storefrontId}/social-profiles/${friend}`).then(data => {
-                self.itemBadges.push(data.data.data[0])
-              })
-            })
-          }
-        }
-      },
-      revisedRandId() {
-        return Math.random().toString(36).replace(/[^a-z]+/g, '').slice(2, 10);
-      },
-      async isInLibrary() {
-        if (this.item.type && !this.item.type.includes("library")) {
-          let params = {
-            relate: "library",
-            "fields": "inLibrary",
-            "extend": this.revisedRandId()
-          }
-          let kind = this.item.type ?? this.item.attributes.playParams.kind
-          let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
-          if (truekind === "musicVideos") {
-            truekind = "music-videos"
-          }
-          let res = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/?ids[${truekind}]=${this.item.attributes.playParams.id ?? this.item.id}`, params);
-          res = res.data.data[0]
-          this.addedToLibrary = (res && res.attributes && res.attributes.inLibrary) ? res.attributes.inLibrary : false
+      } else {
+        if (typeof this.item.attributes.artistName != "undefined") {
+          return app.searchAndNavigate(this.item, 'artist')
         } else {
-          this.addedToLibrary = true
+          return app.routeView(this.item)
         }
-      },
-      async removeFromLibrary(id) {
+      }
+    },
+    async getBadges() {
+      const self = this
+      const id = ((this.item.attributes?.playParams ?? false) ? this.item.attributes?.playParams.id : null) || this.item.id
+      if (id && this.badges[id]) {
+        let friends = this.badges[id]
+        if (friends) {
+          friends.forEach(function (friend) {
+            self.app.mk.api.v3.music(`/v1/social/${app.mk.storefrontId}/social-profiles/${friend}`).then(data => {
+              self.itemBadges.push(data.data.data[0])
+            })
+          })
+        }
+      }
+    },
+    revisedRandId() {
+      return Math.random().toString(36).replace(/[^a-z]+/g, '').slice(2, 10);
+    },
+    async isInLibrary() {
+      if (this.item.type && !this.item.type.includes("library")) {
         let params = {
           relate: "library",
           "fields": "inLibrary",
@@ -223,383 +204,401 @@
         }
         let kind = this.item.type ?? this.item.attributes.playParams.kind
         let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
-        if (truekind == "musicVideos") {
+        if (truekind === "musicVideos") {
           truekind = "music-videos"
         }
         let res = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/?ids[${truekind}]=${this.item.attributes.playParams.id ?? this.item.id}`, params);
         res = res.data.data[0]
-        if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
-          id = res.relationships.library.data[0].id
-        }
-
-        app.mk.api.v3.music(`v1/me/library/${truekind}/${id.toString()}`, {},
-          {
-            fetchOptions: {
-              method: "DELETE"
-            }
-          })
+        this.addedToLibrary = (res && res.attributes && res.attributes.inLibrary) ? res.attributes.inLibrary : false
+      } else {
         this.addedToLibrary = true
-      },
-      uuidv4() {
-        return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
-          (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
-        );
-      },
-      getArtworkUrl(size = -1, includeUrl = false) {
-        let artwork = this.item?.attributes?.artwork ? this.item?.attributes?.artwork?.url : (this.item?.attributes?.editorialArtwork?.subscriptionCover?.url ?? '')
-        if (size != -1) {
-          artwork = artwork.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', (size === 900 || size === 380 || size === 600) ? "sr" : this.imageformat);
-        }
-        switch (this.kind) {
-          case "385":
-            artwork = (this.item.attributes.editorialArtwork?.subscriptionHero?.url ?? (this.item.attributes.artwork?.url ?? (this.item.relationships?.contents?.data[0]?.attributes?.editorialArtwork?.subscriptionHero?.url ?? ''))).replace('{c}', (size === 900 || size === 380 || size === 600) ? "sr" : this.imageformat);
-            break;
-        }
-        if (!includeUrl) {
-          return artwork
-        } else {
-          return `url("${artwork}")`
-        }
-      },
-      getClasses() {
-        let type = []
-        let classes = []
-        if (this.noScale) {
-          classes.push("noscale")
-        }
-        try {
-          type = this.item.type
+      }
+    },
+    async removeFromLibrary(id) {
+      let params = {
+        relate: "library",
+        "fields": "inLibrary",
+        "extend": this.revisedRandId()
+      }
+      let kind = this.item.type ?? this.item.attributes.playParams.kind
+      let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
+      if (truekind == "musicVideos") {
+        truekind = "music-videos"
+      }
+      let res = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/?ids[${truekind}]=${this.item.attributes.playParams.id ?? this.item.id}`, params);
+      res = res.data.data[0]
+      if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
+        id = res.relationships.library.data[0].id
+      }
 
-        } catch (e) {
-          console.log('sd', this.item)
-        }
-
-        if (this.kind !== "") {
-          type = this.kind
-        }
-        switch (type) {
-          default:
-
-            break;
-          case "editorial-elements":
-          case "card":
-            classes.push("mediaitem-card")
-            break;
-          case "385": // editorial
-            classes.push("mediaitem-brick")
-            break;
-          case "small":
-            classes.push("mediaitem-small")
-            break;
-          case "music-videos":
-          case "uploadedVideo":
-          case "uploaded-videos":
-          case "library-music-videos":
-            classes.push("mediaitem-video")
-            break;
-        }
-        return classes
-      },
-      visibilityChanged: function(isVisible, entry) {
-        this.isVisible = isVisible
-      },
-      async contextMenu(event) {
-        if (this.nomenu.includes(this.item.type)) {
-          return
-        }
-        if (!event) {
-          event = this.$refs.main
-        } else {
-          console.log(event)
-        }
-        let self = this
-        let useMenu = "normal"
-        if (app.selectedMediaItems.length <= 1) {
-          app.selectedMediaItems = []
-          app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid, this.item.attributes.playParams.isLibrary ?? false)
-        } else {
-          useMenu = "multiple"
-        }
-        let menus = {
-          multiple: {
-            items: [
-              {
-                name: app.getLz('action.playTracksNext').replace("${app.selectedMediaItems.length}", app.selectedMediaItems.length),
-                "icon": "./assets/arrow-bend-up.svg",
-                action: () => {
-                  let itemsToPlay = {}
-                  app.selectedMediaItems.forEach(item => {
-                    if (!itemsToPlay[item.kind]) {
-                      itemsToPlay[item.kind] = []
-                    }
-                    itemsToPlay[item.kind].push(item.id)
-                  })
-                  // loop through itemsToPlay
-                  for (let kind in itemsToPlay) {
-                    let ids = itemsToPlay[kind]
-                    if (ids.length > 0) {
-                      app.mk.playNext({ [kind + "s"]: itemsToPlay[kind] })
-                    }
-                  }
-                  console.log(itemsToPlay)
-                  app.selectedMediaItems = []
-                }
-              },
-              {
-                name: app.getLz('action.playTracksLater').replace("${app.selectedMediaItems.length}", app.selectedMediaItems.length),
-                "icon": "./assets/arrow-bend-down.svg",
-                action: () => {
-                  let itemsToPlay = {}
-                  app.selectedMediaItems.forEach(item => {
-                    if (!itemsToPlay[item.kind]) {
-                      itemsToPlay[item.kind] = []
-                    }
-                    itemsToPlay[item.kind].push(item.id)
-                  })
-                  // loop through itemsToPlay
-                  for (let kind in itemsToPlay) {
-                    let ids = itemsToPlay[kind]
-                    if (ids.length > 0) {
-                      app.mk.playLater({ [kind + "s"]: itemsToPlay[kind] })
-                    }
-                  }
-                  app.selectedMediaItems = []
-                }
-              },
-            ]
-          },
-          normal: {
-            headerItems: [
-              {
-                "icon": "./assets/feather/heart.svg",
-                "id": "love",
-                "name": app.getLz('action.love'),
-                "hidden": false,
-                "disabled": true,
-                "action": function() {
-                  app.love(self.item)
-                }
-              },
-              {
-                "icon": "./assets/feather/heart.svg",
-                "id": "unlove",
-                "active": true,
-                "name": app.getLz('action.unlove'),
-                "hidden": true,
-                "action": function() {
-                  app.unlove(self.item)
-                }
-              },
-              {
-                "icon": "./assets/feather/thumbs-down.svg",
-                "id": "dislike",
-                "name": app.getLz('action.dislike'),
-                "hidden": false,
-                "disabled": true,
-                "action": function() {
-                  app.dislike(self.item)
-                }
-              },
-              {
-                "icon": "./assets/feather/thumbs-down.svg",
-                "id": "undo_dislike",
-                "name": app.getLz('action.undoDislike'),
-                "active": true,
-                "hidden": true,
-                "action": function() {
-                  app.unlove(self.item)
-                }
-              },
-            ],
-            items: [
-              {
-                "icon": "./assets/feather/list.svg",
-                "id": "addToPlaylist",
-                "name": app.getLz('action.addToPlaylist'),
-                "action": function() {
-                  app.promptAddToPlaylist()
-                }
-              },
-              {
-                "id": "addToLibrary",
-                "icon": "./assets/feather/plus.svg",
-                "name": app.getLz('action.addToLibrary'),
-                "hidden": false,
-                "disabled": true,
-                "action": function() {
-                  let item_id = self.item.attributes.playParams.id ?? self.item.id;
-                  let data_type = self.item.attributes.playParams.kind ?? self.item.type;
-                  app.addToLibrary(item_id);
-                  self.addedToLibrary = true;
-                }
-              },
-              {
-                "id": "removeFromLibrary",
-                "icon": "./assets/feather/x-circle.svg",
-                "name": app.getLz('action.removeFromLibrary'),
-                "hidden": true,
-                "action": async function() {
-                  console.log("remove");
-                  let item_id = self.item.attributes.playParams.id ?? self.item.id;
-                  let data_type = self.item.attributes.playParams.kind ?? self.item.type;
-                  await self.removeFromLibrary(item_id);
-                  self.addedToLibrary = false
-                }
-              },
-              {
-                "name": app.getLz('action.playNext'),
-                "icon": "./assets/arrow-bend-up.svg",
-                "action": function() {
-                  app.mk.playNext({ [self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id })
-                  app.mk.queue._reindex()
-                  app.selectedMediaItems = []
-                }
-              },
-              {
-                "name": app.getLz('action.playLater'),
-                "icon": "./assets/arrow-bend-down.svg",
-                "action": function() {
-                  app.mk.playLater({ [self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id })
-                  app.mk.queue._reindex()
-                  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)
-                  }
-                }
-              },
-              {
-                "icon": "./assets/feather/share.svg",
-                "name": `${app.getLz('action.share')} (song.link)`,
-                "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.songLinkShare((u.data.data.length && u.data.data.length > 0) ? u.data.data[0].attributes.url : u.data.data.attributes.url)
-                      })
-                    }
-                  } else {
-                    self.app.songLinkShare(self.item.attributes.url)
-                  }
-                }
+      app.mk.api.v3.music(`v1/me/library/${truekind}/${id.toString()}`, {},
+        {
+          fetchOptions: {
+            method: "DELETE"
+          }
+        })
+      this.addedToLibrary = true
+    },
+    uuidv4() {
+      return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+        (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+      );
+    },
+    getArtworkUrl(size = -1, includeUrl = false) {
+      let artwork = this.item?.attributes?.artwork ? this.item?.attributes?.artwork?.url : (this.item?.attributes?.editorialArtwork?.subscriptionCover?.url ?? '')
+      if (size != -1) {
+        artwork = artwork.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', (size === 900 || size === 380 || size === 600 ) ? "sr" : this.imageformat);
+      }
+      switch (this.kind) {
+        case "385":
+          artwork = (this.item.attributes.editorialArtwork?.subscriptionHero?.url ?? (this.item.attributes.artwork?.url ?? (this.item.relationships?.contents?.data[0]?.attributes?.editorialArtwork?.subscriptionHero?.url ?? ''))).replace('{c}', (size === 900 || size === 380 || size === 600 ) ? "sr" : this.imageformat);
+          break;
+      }
+      if (!includeUrl) {
+        return artwork
+      } else {
+        return `url("${artwork}")`
+      }
+    },
+    getClasses() {
+      let type = []
+              let classes = []
+              if(this.noScale) {
+                  classes.push("noscale")
               }
-            ]
-          }
-        }
-        if ((self.item.attributes.playParams.kind ?? self.item.type).includes("playlist")) {
-          // remove the add to playlist option by id "addToPlaylist" using the .filter() method
-          menus.normal.items = menus.normal.items.filter(function(item) {
-            return item.id != "addToPlaylist"
-          })
-        }
-        app.showMenuPanel(menus[useMenu], event)
+      try {
+        type = this.item.type
 
-        try {
-          await this.isInLibrary().then((_) => {
-            if (self.addedToLibrary) {
-              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) {
+        console.log('sd', this.item)
+      }
 
-        } catch (e) {
+      if (this.kind !== "") {
+        type = this.kind
+      }
+      switch (type) {
+        default:
 
-        }
-        try {
-          let rating = await app.getRating(self.item)
-          if (rating == 0) {
-            menus.normal.headerItems.find(x => x.id == 'love').disabled = false
-            menus.normal.headerItems.find(x => x.id == 'dislike').disabled = false
-          } else if (rating == 1) {
-            menus.normal.headerItems.find(x => x.id == 'unlove').hidden = false
-            menus.normal.headerItems.find(x => x.id == 'love').hidden = true
-          } else if (rating == -1) {
-            menus.normal.headerItems.find(x => x.id == 'undo_dislike').hidden = false
-            menus.normal.headerItems.find(x => x.id == 'dislike').hidden = true
-          }
-        } catch (err) {
-
-        }
-
-        if (this.contextExt) {
-          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)
-          }
-        }
-      },
-      async artistMenu(event) {
-        console.debug(this.item)
-        let self = this
-        let followAction = "follow"
-        let followActions = {
-          follow: {
-            icon: "./assets/star.svg",
-            name: app.getLz('action.favorite'),
-            action: () => {
-              self.$root.setArtistFavorite(this.item.id, true)
-            }
-          },
-          unfollow: {
-            icon: "./assets/star.svg",
-            name: app.getLz('action.removeFavorite'),
-            action: () => {
-              self.$root.setArtistFavorite(this.item.id, false)
-            }
-          }
-        }
-        if (self.app.cfg.home.followedArtists.includes(this.item.id)) {
-          followAction = "unfollow"
-        }
-        app.showMenuPanel({
+          break;
+        case "editorial-elements":
+        case "card":
+          classes.push("mediaitem-card")
+          break;
+        case "385": // editorial
+                      classes.push("mediaitem-brick")
+          break;
+        case "small":
+          classes.push("mediaitem-small")
+          break;
+        case "music-videos":
+        case "uploadedVideo":
+        case "uploaded-videos":
+        case "library-music-videos":
+          classes.push("mediaitem-video")
+          break;
+      }
+              return classes
+    },
+    visibilityChanged: function (isVisible, entry) {
+      this.isVisible = isVisible
+    },
+    async contextMenu(event) {
+      if (this.nomenu.includes(this.item.type)) {
+        return
+      }
+      if (!event) {
+        event = this.$refs.main
+      } else {
+        console.log(event)
+      }
+      let self = this
+      let useMenu = "normal"
+      if (app.selectedMediaItems.length <= 1) {
+        app.selectedMediaItems = []
+        app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid, this.item.attributes.playParams.isLibrary ?? false)
+      } else {
+        useMenu = "multiple"
+      }
+      let menus = {
+        multiple: {
           items: [
             {
-              icon: "./assets/feather/play.svg",
-              name: app.getLz('action.startRadio'),
+              name: app.getLz('action.playTracksNext').replace("${app.selectedMediaItems.length}", app.selectedMediaItems.length),
+              "icon": "./assets/arrow-bend-up.svg",
               action: () => {
-                app.mk.setStationQueue({ artist: this.item.id }).then(() => {
-                  app.mk.play()
+                let itemsToPlay = {}
+                app.selectedMediaItems.forEach(item => {
+                  if (!itemsToPlay[item.kind]) {
+                    itemsToPlay[item.kind] = []
+                  }
+                  itemsToPlay[item.kind].push(item.id)
                 })
-              }
-            },
-            followActions[followAction],
-            {
-              icon: "./assets/feather/share.svg",
-              name: app.getLz('term.share'),
-              action: () => {
-                self.app.copyToClipboard(this.item.id.attributes.url)
+                // loop through itemsToPlay
+                for (let kind in itemsToPlay) {
+                  let ids = itemsToPlay[kind]
+                  if (ids.length > 0) {
+                    app.mk.playNext({ [kind + "s"]: itemsToPlay[kind] })
+                  }
+                }
+                console.log(itemsToPlay)
+                app.selectedMediaItems = []
               }
             },
             {
-              icon: "./assets/feather/external-link.svg",
-              name: app.getLz('action.openArtworkInBrowser'),
+              name: app.getLz('action.playTracksLater').replace("${app.selectedMediaItems.length}", app.selectedMediaItems.length),
+              "icon": "./assets/arrow-bend-down.svg",
               action: () => {
-                window.open(app.getMediaItemArtwork(this.getArtworkUrl(), 1024, 1024))
+                let itemsToPlay = {}
+                app.selectedMediaItems.forEach(item => {
+                  if (!itemsToPlay[item.kind]) {
+                    itemsToPlay[item.kind] = []
+                  }
+                  itemsToPlay[item.kind].push(item.id)
+                })
+                // loop through itemsToPlay
+                for (let kind in itemsToPlay) {
+                  let ids = itemsToPlay[kind]
+                  if (ids.length > 0) {
+                    app.mk.playLater({ [kind + "s"]: itemsToPlay[kind] })
+                  }
+                }
+                app.selectedMediaItems = []
+              }
+            },
+          ]
+        },
+        normal: {
+          headerItems: [
+            {
+              "icon": "./assets/feather/heart.svg",
+              "id": "love",
+              "name": app.getLz('action.love'),
+              "hidden": false,
+              "disabled": true,
+              "action": function () {
+                app.love(self.item)
+              }
+            },
+            {
+              "icon": "./assets/feather/heart.svg",
+              "id": "unlove",
+              "active": true,
+              "name": app.getLz('action.unlove'),
+              "hidden": true,
+              "action": function () {
+                app.unlove(self.item)
+              }
+            },
+            {
+              "icon": "./assets/feather/thumbs-down.svg",
+              "id": "dislike",
+              "name": app.getLz('action.dislike'),
+              "hidden": false,
+              "disabled": true,
+              "action": function () {
+                app.dislike(self.item)
+              }
+            },
+            {
+              "icon": "./assets/feather/thumbs-down.svg",
+              "id": "undo_dislike",
+              "name": app.getLz('action.undoDislike'),
+              "active": true,
+              "hidden": true,
+              "action": function () {
+                app.unlove(self.item)
+              }
+            },
+          ],
+          items: [
+            {
+              "icon": "./assets/feather/list.svg",
+              "id": "addToPlaylist",
+              "name": app.getLz('action.addToPlaylist'),
+              "action": function () {
+                app.promptAddToPlaylist()
+              }
+            },
+            {
+              "id": "addToLibrary",
+              "icon": "./assets/feather/plus.svg",
+              "name": app.getLz('action.addToLibrary'),
+              "hidden": false,
+              "disabled": true,
+              "action": function () {
+                let item_id = self.item.attributes.playParams.id ?? self.item.id;
+                let data_type = self.item.attributes.playParams.kind ?? self.item.type;
+                app.addToLibrary(item_id);
+                self.addedToLibrary = true;
+              }
+            },
+            {
+              "id": "removeFromLibrary",
+              "icon": "./assets/feather/x-circle.svg",
+              "name": app.getLz('action.removeFromLibrary'),
+              "hidden": true,
+              "action": async function () {
+                console.log("remove");
+                let item_id = self.item.attributes.playParams.id ?? self.item.id;
+                let data_type = self.item.attributes.playParams.kind ?? self.item.type;
+                await self.removeFromLibrary(item_id);
+                self.addedToLibrary = false
+              }
+            },
+            {
+              "name": app.getLz('action.playNext'),
+              "icon": "./assets/arrow-bend-up.svg",
+              "action": function () {
+                app.mk.playNext({ [self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id })
+                app.mk.queue._reindex()
+                app.selectedMediaItems = []
+              }
+            },
+            {
+              "name": app.getLz('action.playLater'),
+              "icon": "./assets/arrow-bend-down.svg",
+              "action": function () {
+                app.mk.playLater({ [self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id })
+                app.mk.queue._reindex()
+                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)
+                }
+              }
+            },
+            {
+              "icon": "./assets/feather/share.svg",
+              "name": `${app.getLz('action.share')} (song.link)`,
+              "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.songLinkShare((u.data.data.length && u.data.data.length > 0) ? u.data.data[0].attributes.url : u.data.data.attributes.url)
+                    })
+                  }
+                } else {
+                  self.app.songLinkShare(self.item.attributes.url)
+                }
               }
             }
           ]
-        }, event)
-      },
+        }
+      }
+      if ((self.item.attributes.playParams.kind ?? self.item.type).includes("playlist")) {
+        // remove the add to playlist option by id "addToPlaylist" using the .filter() method
+        menus.normal.items = menus.normal.items.filter(function (item) {
+          return item.id != "addToPlaylist"
+        })
+      }
+      app.showMenuPanel(menus[useMenu], event)
+
+      try {
+        await this.isInLibrary().then((_) => {
+          if (self.addedToLibrary) {
+            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) {
+          menus.normal.headerItems.find(x => x.id == 'love').disabled = false
+          menus.normal.headerItems.find(x => x.id == 'dislike').disabled = false
+        } else if (rating == 1) {
+          menus.normal.headerItems.find(x => x.id == 'unlove').hidden = false
+          menus.normal.headerItems.find(x => x.id == 'love').hidden = true
+        } else if (rating == -1) {
+          menus.normal.headerItems.find(x => x.id == 'undo_dislike').hidden = false
+          menus.normal.headerItems.find(x => x.id == 'dislike').hidden = true
+        }
+      } catch (err) {
+
+      }
+
+      if (this.contextExt) {
+        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)
+        }
+      }
     },
-    beforeDestroy: function() {
-      // this.item = null;
-      // this.kind = null;
-      // this.size = null;
-    }
-  });
+    async artistMenu(event) {
+      console.debug(this.item)
+      let self = this
+      let followAction = "follow"
+      let followActions = {
+        follow: {
+          icon: "./assets/star.svg",
+          name: app.getLz('action.favorite'),
+          action: () => {
+            self.$root.setArtistFavorite(this.item.id, true)
+          }
+        },
+        unfollow: {
+          icon: "./assets/star.svg",
+          name: app.getLz('action.removeFavorite'),
+          action: () => {
+            self.$root.setArtistFavorite(this.item.id, false)
+          }
+        }
+      }
+      if (self.app.cfg.home.followedArtists.includes(this.item.id)) {
+        followAction = "unfollow"
+      }
+      app.showMenuPanel({
+        items: [
+          {
+            icon: "./assets/feather/play.svg",
+            name: app.getLz('action.startRadio'),
+            action: () => {
+              app.mk.setStationQueue({ artist: this.item.id }).then(() => {
+                app.mk.play()
+              })
+            }
+          },
+          followActions[followAction],
+          {
+            icon: "./assets/feather/share.svg",
+            name: app.getLz('term.share'),
+            action: () => {
+              self.app.copyToClipboard(this.item.id.attributes.url)
+            }
+          },
+          {
+            icon: "./assets/feather/external-link.svg",
+            name: app.getLz('action.openArtworkInBrowser'),
+            action: () => {
+              window.open(app.getMediaItemArtwork(this.getArtworkUrl(), 1024, 1024))
+            }
+          }
+        ]
+      }, event)
+    },
+  },
+  beforeDestroy: function () {
+    // this.item = null;
+    // this.kind = null;
+    // this.size = null;
+  }
+});
 </script>