From df16909e1fa75db9bee1c4605deefe434cedba63 Mon Sep 17 00:00:00 2001
From: Core <64542347+coredev-uk@users.noreply.github.com>
Date: Wed, 25 May 2022 03:05:08 +0100
Subject: [PATCH] formatted

---
 .../views/components/mediaitem-square.ejs     | 1119 +++++++++--------
 1 file changed, 570 insertions(+), 549 deletions(-)

diff --git a/src/renderer/views/components/mediaitem-square.ejs b/src/renderer/views/components/mediaitem-square.ejs
index 44ac5ce9..def03ae3 100644
--- a/src/renderer/views/components/mediaitem-square.ejs
+++ b/src/renderer/views/components/mediaitem-square.ejs
@@ -1,573 +1,594 @@
 <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">
-        <template>
-            <div class="artwork-container">
-                <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"
-                            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)">
+         @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">
+            <template>
+                <div class="artwork-container">
+                    <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="(badge.attributes.artwork ? badge.attributes.artwork.url : '')"
-                                :size="32"></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"
+                                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>
-            <div class="info-rect" :class="{'info-rect-card': kind == 'card'}" :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 ?? (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 class="info-rect" :class="{'info-rect-card': kind == 'card'}"
+                     :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 ??
+                            (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 :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>
-        </template>
-    </div>
+            </template>
+        </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
-            },
-            '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)
-                }
-            },
-            getSubtitle() {
-                if (this.kind === 'card' || this.item.type === "playlists") {
-                    try {
+	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
+			},
+			'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)
+				}
+			},
+			getSubtitle() {
+				if (this.kind === 'card' || this.item.type === "playlists") {
+					try {
 						if (typeof this.item.attributes.description.standard != "undefined") {
 							return this.item.attributes.description.standard
 						} else 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 ''
-                        }
-                    }catch(e) {
-                        return ''
-                    }
-                } else {
-                    if (typeof this.item.attributes.artistName != "undefined") {
-                        return this.item.attributes.artistName
-                    } else {
-                        return ''
-                    }
-                }
-            },
-            getSubtitleNavigation() {
-                if (this.kind === 'card' || this.item.type === "playlists") {
-                    try {
+							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 ''
+						}
+					} catch (e) {
+						return ''
+					}
+				} else {
+					if (typeof this.item.attributes.artistName != "undefined") {
+						return this.item.attributes.artistName
+					} 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.searchAndNavigate(this.item, 'artist')
+						} else {
 							return app.routeView(this.item)
-                        }
-                    }catch(e) {
-                        return app.routeView(this.item)
-                    }
-                } else {
-                    if (typeof this.item.attributes.artistName != "undefined") {
-                        return app.searchAndNavigate(this.item,'artist')
-                    } else {
-                        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 {
-                    this.addedToLibrary = true
-                }
-            },
-            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) {
+						return app.routeView(this.item)
+					}
+				} else {
+					if (typeof this.item.attributes.artistName != "undefined") {
+						return app.searchAndNavigate(this.item, 'artist')
+					} else {
+						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 {
+					this.addedToLibrary = true
+				}
+			},
+			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
+				}
 
-                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) ? "sr" : "cc"))
-                }
-                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 ?? ''))
-                        break;
-                }
-                if (!includeUrl) {
-                    return artwork
-                } else {
-                    return `url("${artwork}")`
-                }
-            },
-            getClasses() {
-                let type = []
-                try{
-                type = this.item.type
+				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) ? "sr" : "cc"))
+				}
+				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 ?? ''))
+						break;
+				}
+				if (!includeUrl) {
+					return artwork
+				} else {
+					return `url("${artwork}")`
+				}
+			},
+			getClasses() {
+				let type = []
+				try {
+					type = this.item.type
 
-             }catch(e) {console.log('sd',this.item)}
+				} catch (e) {
+					console.log('sd', this.item)
+				}
 
-                if (this.kind != "") {
-                    type = this.kind
-                }
-                switch (type) {
-                    default:
-                        return []
-                        break;
-                    case "editorial-elements":
-                    case "card":
-                        return ["mediaitem-card"]
-                        break;
-                    case "385": // editorial
-                        return ["mediaitem-brick"]
-                        break;
-                    case "small":
-                        return ["mediaitem-small"]
-                        break;
-                    case "music-videos":
-                    case "uploadedVideo":
-                    case "uploaded-videos":
-                    case "library-music-videos":
-                        return "mediaitem-video";
-                        break;
-                }
-            },
-            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)}
-                                }
-                            }
-                        ]
-                    }
-                }
-                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)
+				if (this.kind !== "") {
+					type = this.kind
+				}
+				switch (type) {
+					default:
+						return []
+						break;
+					case "editorial-elements":
+					case "card":
+						return ["mediaitem-card"]
+						break;
+					case "385": // editorial
+						return ["mediaitem-brick"]
+						break;
+					case "small":
+						return ["mediaitem-small"]
+						break;
+					case "music-videos":
+					case "uploadedVideo":
+					case "uploaded-videos":
+					case "library-music-videos":
+						return "mediaitem-video";
+						break;
+				}
+			},
+			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)
+									}
+								}
+							}
+						]
+					}
+				}
+				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
-                        }
-                    })
+				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) {
+				} 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) {
+				}
+				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/feather/plus-circle.svg",
-                        name: app.getLz('action.follow'),
-                        action: ()=>{
-                            self.app.cfg.home.followedArtists.push(this.item.id)
-                        }
-                    },
-                    unfollow: {
-                        icon: "./assets/feather/x-circle.svg",
-                        name: app.getLz('action.unfollow'),
-                        action: ()=>{
-                            let index = self.app.cfg.home.followedArtists.indexOf(this.item.id)
-                            if (index > -1) {
-                                self.app.cfg.home.followedArtists.splice(index, 1)
-                            }
-                        }
-                    }
-                }
-                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;
-        }
-    });
+				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/feather/plus-circle.svg",
+						name: app.getLz('action.follow'),
+						action: () => {
+							self.app.cfg.home.followedArtists.push(this.item.id)
+						}
+					},
+					unfollow: {
+						icon: "./assets/feather/x-circle.svg",
+						name: app.getLz('action.unfollow'),
+						action: () => {
+							let index = self.app.cfg.home.followedArtists.indexOf(this.item.id)
+							if (index > -1) {
+								self.app.cfg.home.followedArtists.splice(index, 1)
+							}
+						}
+					}
+				}
+				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>
\ No newline at end of file