scale app to fix error on 4k screens

src/main/cider-base.js

@@ -1,4 +1,4 @@
-const {BrowserWindow, ipcMain, shell, app} = require("electron")
+const {BrowserWindow, ipcMain, shell, app, screen} = require("electron")
 const {join} = require("path")
 const getPort = require("get-port");
 const express = require("express");
@@ -189,6 +189,14 @@ const CiderBase = {
             }
         })
 
+        // Set scale
+        ipcMain.on('setScreenScale', (event, scale) => {
+            win.webContents.setZoomFactor(parseFloat(scale))
+        }) 
+        var mainScreen = screen.getPrimaryDisplay();
+        var dimensions = mainScreen.size;
+        var screenWidth = dimensions.width;
+        win.webContents.setZoomFactor(screenWidth / 1536)
         return win
     },
 

src/renderer/hlscider.js

@@ -3316,7 +3316,7 @@ typeof window !== "undefined" &&
 
                             _this3.tick();
                         }).catch(function (reason) {
-                            _this3.warn(reason);
+                          //  _this3.warn(reason);
 
                             _this3.resetFragmentLoading(frag);
                         });

src/renderer/index.js

@@ -40,7 +40,7 @@ var CiderContextMenu = {
 
         // for each item in menudata create a menu item
         for (var i = 0; i < menudata.items.length; i++) {
-            var item = document.createElement("button")
+            let item = document.createElement("button")
             item.tabIndex = 0
             item.classList.add("context-menu-item")
             item.innerHTML = menudata.items[i].name
@@ -79,11 +79,11 @@ Array.prototype.limit = function (n) {
     return this.slice(0, n);
 };
 
-function msToMinSec(ms) {
+// function msToMinSec(ms) {
-    var minutes = Math.floor(ms / 60000);
+//     let minutes = Math.floor(ms / 60000);
-    var seconds = ((ms % 60000) / 1000).toFixed(0);
+//     let seconds = ((ms % 60000) / 1000).toFixed(0);
-    return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
+//     return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
-}
+// }
 
 class NavigationEvent {
     constructor(page, onnavigate, scrollPosition) {
@@ -180,6 +180,22 @@ const app = new Vue({
                 displayListing: [],
                 downloadState: 0 // 0 = not started, 1 = in progress, 2 = complete, 3 = empty library
             },
+            artists: {
+                sortingOptions: {
+                    "artistName": "Artist",
+                    "name": "Name",
+                    "genre": "Genre",
+                    "releaseDate": "Release Date"
+                },
+                viewAs: 'covers',
+                sorting: ["dateAdded", "name"], // [0] = recentlyadded page, [1] = albums page
+                sortOrder: ["desc", "asc"], // [0] = recentlyadded page, [1] = albums page
+                listing: [],
+                meta: { total: 0, progress: 0 },
+                search: "",
+                displayListing: [],
+                downloadState: 0 // 0 = not started, 1 = in progress, 2 = complete, 3 = empty library
+            },
         },
         playlists: {
             listing: [],
@@ -369,8 +385,8 @@ const app = new Vue({
                let queue = window.localStorage.getItem("currentQueue")
                 if (lastItem != null) {
                     lastItem = JSON.parse(lastItem)
-                    var kind = lastItem.attributes.playParams.kind;
+                    let kind = lastItem.attributes.playParams.kind;
-                    var truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
+                    let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
                     app.mk.setQueue({ [truekind]: [lastItem.attributes.playParams.id] })
                     app.mk.mute()
                     setTimeout(() =>{
@@ -384,7 +400,7 @@ const app = new Vue({
                                 queue = JSON.parse(queue)
                                 if (queue && queue.length > 0){
                                         let ids = queue.map ( e => (e.playParams ? e.playParams.id : (e.attributes.playParams ? e.attributes.playParams.id : '') ))
-                                        var i = 0;
+                                        let i = 0;
                                         if (ids.length > 0) {
                                             for (id of ids){
                                                 if (!(i == 0 && ids[0] == lastItem.attributes.playParams.id)){
@@ -689,7 +705,7 @@ const app = new Vue({
 
         },
         async getArtistFromID(id) {
-            var artistData = await this.mkapi("artists", false, id, {
+            const artistData = await this.mkapi("artists", false, id, {
                 "views": "featured-release,full-albums,appears-on-albums,featured-albums,featured-on-albums,singles,compilation-albums,live-albums,latest-release,top-music-videos,similar-artists,top-songs,playlists,more-to-hear,more-to-see",
                 "extend": "artistBio,bornOrFormed,editorialArtwork,editorialVideo,isGroup,origin,hero",
                 "extend[playlists]": "trackCount",
@@ -764,7 +780,7 @@ const app = new Vue({
             return `${mins}:${seconds.replace("0.", "")}`
         },
         hashCode(str) {
-            var hash = 0, i, chr;
+            let hash = 0, i, chr;
             if (str.length === 0) return hash;
             for (i = 0; i < str.length; i++) {
                 chr = str.charCodeAt(i);
@@ -975,18 +991,6 @@ const app = new Vue({
             document.getElementById("apple-music-video-container").style.display = "none";
         },
         getArtistInfo(id, isLibrary) {
-            var query = {
-                "omit[resource]": "autos",
-                views: ["featured-release", "full-albums", "appears-on-albums", "featured-albums", "featured-on-albums", "singles", "compilation-albums", "live-albums", "latest-release", "top-music-videos", "similar-artists", "top-songs", "playlists", "more-to-hear", "more-to-see"],
-                extend: ["artistBio", "bornOrFormed", "editorialArtwork", "editorialVideo", "isGroup", "origin", "hero"],
-                "extend[playlists]": ["trackCount"],
-                "omit[resource:songs]": "relationships",
-                "fields[albums]": [...["fields[albums]"], "trackCount"],
-                limit: {
-                    "artists:top-songs": 20
-                },
-                "art[url]": "f"
-            };
             this.getArtistFromID(id)
             //this.getTypeFromID("artist",id,isLibrary,query)
         },
@@ -1005,7 +1009,7 @@ const app = new Vue({
             }
         },
         async getTypeFromID(kind, id, isLibrary = false, params = {}) {
-            var a;
+            let a;
             if (kind == "album" | kind == "albums") {
                 params["include"] = "tracks,artists,record-labels";
             }
@@ -1164,6 +1168,71 @@ const app = new Vue({
                 sortAlbums()
             }
         },
+                // make a copy of searchLibrarySongs except use Albums instead of Songs
+                searchLibraryArtists(index) {
+                    let self = this
+        
+                    function sortArtists() {
+                        // sort this.library.albums.displayListing by album.attributes[self.library.albums.sorting[index]] in descending or ascending order based on alphabetical order and numeric order
+                        // check if album.attributes[self.library.albums.sorting[index]] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
+                        self.library.artists.displayListing.sort((a, b) => {
+                            let aa = a.attributes[self.library.artists.sorting[index]]
+                            let bb = b.attributes[self.library.artists.sorting[index]]
+                            if (self.library.artists.sorting[index] == "genre") {
+                                aa = a.attributes.genreNames[0]
+                                bb = b.attributes.genreNames[0]
+                            }
+                            if (aa == null) {
+                                aa = ""
+                            }
+                            if (bb == null) {
+                                bb = ""
+                            }
+                            if (self.library.artists.sortOrder[index] == "asc") {
+                                if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
+                                    return aa - bb
+                                } else {
+                                    return aa.toString().toLowerCase().localeCompare(bb.toString().toLowerCase())
+                                }
+                            } else if (self.library.artists.sortOrder[index] == "desc") {
+                                if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
+                                    return bb - aa
+                                } else {
+                                    return bb.toString().toLowerCase().localeCompare(aa.toString().toLowerCase())
+                                }
+                            }
+                        })
+                    }
+        
+                    if (this.library.artists.search == "") {
+                        this.library.artists.displayListing = this.library.artists.listing
+                        sortArtists()
+                    } else {
+                        this.library.artists.displayListing = this.library.artists.listing.filter(item => {
+                            let itemName = item.attributes.name.toLowerCase()
+                            let searchTerm = this.library.albums.search.toLowerCase()
+                            let artistName = ""
+                            let albumName = ""
+                            if (item.attributes.artistName != null) {
+                                artistName = item.attributes.artistName.toLowerCase()
+                            }
+                            if (item.attributes.albumName != null) {
+                                albumName = item.attributes.albumName.toLowerCase()
+                            }
+        
+                            // remove any non-alphanumeric characters and spaces from search term and item name
+                            searchTerm = searchTerm.replace(/[^a-z0-9 ]/gi, "")
+                            itemName = itemName.replace(/[^a-z0-9 ]/gi, "")
+                            artistName = artistName.replace(/[^a-z0-9 ]/gi, "")
+                            albumName = albumName.replace(/[^a-z0-9 ]/gi, "")
+        
+                            if (itemName.includes(searchTerm) || artistName.includes(searchTerm) || albumName.includes(searchTerm)) {
+                                return item
+                            }
+                        })
+                        sortArtists()
+                    }
+                },
         getSidebarItemClass(page) {
             if (this.page == page) {
                 return ["active"]
@@ -1352,6 +1421,83 @@ const app = new Vue({
 
             downloadChunk()
         },
+        // copy the getLibrarySongsFull function except change Songs to Albums
+        async getLibraryArtistsFull(force = false, index) {
+            let self = this
+            let library = []
+            let downloaded = null;
+            if ((this.library.artists.downloadState == 2 || this.library.artists.downloadState == 1) && !force) {
+                return
+            }
+            if (localStorage.getItem("libraryArtists") != null) {
+                this.library.artists.listing = JSON.parse(localStorage.getItem("libraryArtists"))
+                this.searchLibraryArtists(index)
+            }
+            if (this.songstest) {
+                return
+            }
+            this.library.artists.downloadState = 1
+            this.library.downloadNotification.show = true
+            this.library.downloadNotification.message = "Updating library albums..."
+
+            function downloadChunk() {
+                self.library.artists.downloadState = 1
+                const params = {
+                    include: "catalog",
+                    // "include[library-artists]": "catalog,artists,albums",
+                    // "fields[artists]": "name,url,id",
+                    // "fields[albums]": "name,url,id",
+                    platform: "web",
+                    // "fields[catalog]": "artistUrl,albumUrl",
+                    // "fields[artists]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url",
+                    limit: 100,
+                }
+                if (downloaded == null) {
+                    app.mk.api.library.artists("", params, { includeResponseMeta: !0 }).then((response) => {
+                        processChunk(response)
+                    })
+                } else {
+                    downloaded.next("", "artists", { includeResponseMeta: !0 }).then((response) => {
+                        processChunk(response)
+                    })
+                }
+            }
+
+            function processChunk(response) {
+                downloaded = response
+                library = library.concat(downloaded.data)
+                self.library.downloadNotification.show = true
+                self.library.downloadNotification.message = "Updating library albums..."
+                self.library.downloadNotification.total = downloaded.meta.total
+                self.library.downloadNotification.progress = library.length
+                if (downloaded.meta.total == 0) {
+                    self.library.albums.downloadState = 3
+                    return
+                }
+                if (typeof downloaded.next == "undefined") {
+                    console.log("downloaded.next is undefined")
+                    self.library.artists.listing = library
+                    self.library.artists.downloadState = 2
+                    self.library.artists.show = false
+                    localStorage.setItem("libraryArtists", JSON.stringify(library))
+                    self.searchLibraryArtists(index)
+                }
+                if (downloaded.meta.total > library.length || typeof downloaded.meta.next != "undefined") {
+                    console.log(`downloading next chunk - ${library.length
+                        } artists so far`)
+                    downloadChunk()
+                } else {
+                    self.library.artists.listing = library
+                    self.library.artists.downloadState = 2
+                    self.library.downloadNotification.show = false
+                    localStorage.setItem("libraryArtists", JSON.stringify(library))
+                    self.searchLibraryArtists(index)
+                    console.log(library)
+                }
+            }
+
+            downloadChunk()
+        },
         getTotalTime() {
             try {
                 if (app.showingPlaylist.relationships.tracks.data.length > 0) {
@@ -1363,12 +1509,12 @@ const app = new Vue({
             }
         },
         async getLibrarySongs() {
-            var response = await this.mkapi("songs", true, "", { limit: 100 }, { includeResponseMeta: !0 })
+            let response = await this.mkapi("songs", true, "", { limit: 100 }, { includeResponseMeta: !0 })
             this.library.songs.listing = response.data
             this.library.songs.meta = response.meta
         },
         async getLibraryAlbums() {
-            var response = await this.mkapi("albums", true, "", { limit: 100 }, { includeResponseMeta: !0 })
+            let response = await this.mkapi("albums", true, "", { limit: 100 }, { includeResponseMeta: !0 })
             this.library.albums.listing = response.data
             this.library.albums.meta = response.meta
         },
@@ -1416,7 +1562,7 @@ const app = new Vue({
                 return
             }
             try {
-                var browse = await this.mk.api.groupings("",
+                let browse = await this.mk.api.groupings("",
                     {
                         platform: "web",
                         name: "music",
@@ -1507,18 +1653,16 @@ const app = new Vue({
             const artist = (this.mk.nowPlayingItem != null) ? this.mk.nowPlayingItem.artistName ?? '' : '';
             const time = (this.mk.nowPlayingItem != null) ? (Math.round((this.mk.nowPlayingItem.attributes["durationInMillis"] ?? -1000) / 1000) ?? -1) : -1;
             ipcRenderer.invoke('getYTLyrics', track, artist).then((result) => {
-                var response = result;
                 if (result.length > 0) {
-                    var rawtime = this.toMS(result[0].duration_raw)
+                    let ytid = result[0]['id']['videoId'];
-                    var ytid = result[0]['id']['videoId'];
                     if (app.cfg.lyrics.enable_yt) {
                         loadYT(ytid, app.cfg.lyrics.mxm_language ?? "en")
                     } else { app.loadMXM() }
                 } else { app.loadMXM() }
                 
                 function loadYT(id, lang) {
-                    var req = new XMLHttpRequest();
+                    let req = new XMLHttpRequest();
-                    var url = `https://www.youtube.com/watch?&v=${id}`;
+                    let url = `https://www.youtube.com/watch?&v=${id}`;
                     req.open('GET', url, true);
                     req.onerror = function (e) {
                         this.loadMXM();
@@ -1526,13 +1670,13 @@ const app = new Vue({
                     req.onload = function () {
                         // console.log(this.responseText);
                         res = this.responseText;
-                        var captionurl1 = res.substring(res.indexOf(`{"playerCaptionsRenderer":{"baseUrl":"`) + (`{"playerCaptionsRenderer":{"baseUrl":"`).length);
+                        let captionurl1 = res.substring(res.indexOf(`{"playerCaptionsRenderer":{"baseUrl":"`) + (`{"playerCaptionsRenderer":{"baseUrl":"`).length);
-                        var captionurl = captionurl1.substring(0, captionurl1.indexOf(`"`));
+                        let captionurl = captionurl1.substring(0, captionurl1.indexOf(`"`));
                         if (captionurl.includes("timedtext")) {
-                            var json = JSON.parse(`{"url": "${captionurl}"}`);
+                            let json = JSON.parse(`{"url": "${captionurl}"}`);
-                            var newurl = json.url + `&lang=${lang}&format=ttml`
+                            let newurl = json.url + `&lang=${lang}&format=ttml`
     
-                            var req2 = new XMLHttpRequest();
+                            let req2 = new XMLHttpRequest();
     
                             req2.open('GET', newurl, true);
                             req2.onerror = function (e) {
@@ -1567,8 +1711,8 @@ const app = new Vue({
             const track = encodeURIComponent((this.mk.nowPlayingItem != null) ? this.mk.nowPlayingItem.title ?? '' : '');
             const artist = encodeURIComponent((this.mk.nowPlayingItem != null) ? this.mk.nowPlayingItem.artistName ?? '' : '');
             const time = encodeURIComponent((this.mk.nowPlayingItem != null) ? (Math.round((this.mk.nowPlayingItem.attributes["durationInMillis"] ?? -1000) / 1000) ?? -1) : -1);
-            var lrcfile = "";
+            let lrcfile = "";
-            var richsync = [];
+            let richsync = [];
             const lang = app.cfg.lyrics.mxm_language //  translation language
             function revisedRandId() {
                 return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
@@ -1619,18 +1763,18 @@ const app = new Vue({
             }
 
             function getMXMSubs(track, artist, token, lang, time) {
-                var usertoken = encodeURIComponent(token);
+                let usertoken = encodeURIComponent(token);
-                var richsyncQuery =  (app.cfg.lyrics.mxm_karaoke) ? "&optional_calls=track.richsync" : ""
+                let richsyncQuery =  (app.cfg.lyrics.mxm_karaoke) ? "&optional_calls=track.richsync" : ""
-                var timecustom = (!time || (time && time < 0)) ? '' : `&f_subtitle_length=${time}&q_duration=${time}&f_subtitle_length_max_deviation=40`;
+                let timecustom = (!time || (time && time < 0)) ? '' : `&f_subtitle_length=${time}&q_duration=${time}&f_subtitle_length_max_deviation=40`;
-                var url = "https://apic-desktop.musixmatch.com/ws/1.1/macro.subtitles.get?format=json&namespace=lyrics_richsynched"+ richsyncQuery +"&subtitle_format=lrc&q_artist=" + artist + "&q_track=" + track + "&usertoken=" + usertoken + timecustom + "&app_id=web-desktop-app-v1.0&t=" + revisedRandId();
+                let url = "https://apic-desktop.musixmatch.com/ws/1.1/macro.subtitles.get?format=json&namespace=lyrics_richsynched"+ richsyncQuery +"&subtitle_format=lrc&q_artist=" + artist + "&q_track=" + track + "&usertoken=" + usertoken + timecustom + "&app_id=web-desktop-app-v1.0&t=" + revisedRandId();
-                var req = new XMLHttpRequest();
+                let req = new XMLHttpRequest();
                 req.overrideMimeType("application/json");
                 req.open('GET', url, true);
                 req.setRequestHeader("authority", "apic-desktop.musixmatch.com");
                 req.onload = function () {
-                    var jsonResponse = JSON.parse(this.responseText);
+                    let jsonResponse = JSON.parse(this.responseText);
                     console.log(jsonResponse);
-                    var status1 = jsonResponse["message"]["header"]["status_code"];
+                    let status1 = jsonResponse["message"]["header"]["status_code"];
 
                     if (status1 == 200) {
                         let id = '';
@@ -1804,13 +1948,13 @@ const app = new Vue({
 
         },
         parseLyrics() {
-            var xml = this.stringToXml(this.lyricsMediaItem)
+            let xml = this.stringToXml(this.lyricsMediaItem)
-            var json = xmlToJson(xml);
+            let json = xmlToJson(xml);
             this.lyrics = json
         },
         stringToXml(st) {
             // string to xml
-            var xml = (new DOMParser()).parseFromString(st, "text/xml");
+            let xml = (new DOMParser()).parseFromString(st, "text/xml");
             return xml;
 
         },
@@ -1821,17 +1965,17 @@ const app = new Vue({
             this.mk.seekToTime(time);
         },
         parseTime(value) {
-            var minutes = Math.floor(value / 60000);
+            let minutes = Math.floor(value / 60000);
-            var seconds = ((value % 60000) / 1000).toFixed(0);
+            let seconds = ((value % 60000) / 1000).toFixed(0);
             return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
         },
         parseTimeDecimal(value) {
-            var minutes = Math.floor(value / 60000);
+            let minutes = Math.floor(value / 60000);
-            var seconds = ((value % 60000) / 1000).toFixed(0);
+            let seconds = ((value % 60000) / 1000).toFixed(0);
             return minutes + "." + (seconds < 10 ? '0' : '') + seconds;
         },
         hmsToSecondsOnly(str) {
-            var p = str.split(':'),
+            let p = str.split(':'),
                 s = 0,
                 m = 1;
 
@@ -1843,11 +1987,11 @@ const app = new Vue({
             return s;
         },
         getLyricBGStyle(start, end) {
-            var currentTime = this.getCurrentTime();
+            let currentTime = this.getCurrentTime();
-            var duration = this.mk.nowPlayingItem.attributes.durationInMillis
+            // let duration = this.mk.nowPlayingItem.attributes.durationInMillis
-            var start2 = this.hmsToSecondsOnly(start)
+            let start2 = this.hmsToSecondsOnly(start)
-            var end2 = this.hmsToSecondsOnly(end)
+            let end2 = this.hmsToSecondsOnly(end)
-            var currentProgress = ((100 * (currentTime)) / (end2))
+            // let currentProgress = ((100 * (currentTime)) / (end2))
             // check if currenttime is between start and end
             this.player.lyricsDebug.start = start2
             this.player.lyricsDebug.end = end2
@@ -1861,7 +2005,7 @@ const app = new Vue({
             }
         },
         playMediaItemById(id, kind, isLibrary, raurl = "") {
-            var truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
+            let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
             console.log(id, truekind, isLibrary)
             try {
                 if (truekind.includes("artist")) {
@@ -1883,9 +2027,9 @@ const app = new Vue({
             }
         },
         queueParentandplayChild(parent, childIndex, item) {
-            var kind = parent.substring(0, parent.indexOf(":"))
+            let kind = parent.substring(0, parent.indexOf(":"))
-            var id = parent.substring(parent.indexOf(":") + 1, parent.length)
+            let id = parent.substring(parent.indexOf(":") + 1, parent.length)
-            var truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
+            let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
             console.log(truekind, id)
 
             try {
@@ -2027,7 +2171,7 @@ const app = new Vue({
             } else if (playParams["id"]) {
                 id = playParams["id"]
             }
-            var found = this.library.songs.listing.filter((item) => {
+            let found = this.library.songs.listing.filter((item) => {
                 if (item["attributes"]) {
                     if (item["attributes"]["playParams"] && (item["attributes"]["playParams"]["catalogId"] == id)) {
                         return item;
@@ -2048,7 +2192,7 @@ const app = new Vue({
             }
         },
         getMediaItemArtwork(url, height = 64, width) {
-            var newurl = `${url.replace('{w}', width ?? height).replace('{h}', height).replace('{f}', "webp").replace('{c}', ((width === 900)? "sr" :"cc"))}`;
+            let newurl = `${url.replace('{w}', width ?? height).replace('{h}', height).replace('{f}', "webp").replace('{c}', ((width === 900)? "sr" :"cc"))}`;
             
             if (newurl.includes("900x516")){newurl = newurl.replace("900x516cc","900x516sr").replace("900x516bb","900x516sr");}
             return newurl
@@ -2371,14 +2515,14 @@ refreshFocus();
 function xmlToJson(xml) {
 
     // Create the return object
-    var obj = {};
+    let obj = {};
 
     if (xml.nodeType == 1) { // element
         // do attributes
         if (xml.attributes.length > 0) {
             obj["@attributes"] = {};
             for (var j = 0; j < xml.attributes.length; j++) {
-                var attribute = xml.attributes.item(j);
+                let attribute = xml.attributes.item(j);
                 obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
             }
         }

src/renderer/style.less

@@ -2769,6 +2769,106 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+/* mediaitem-square */
+.albums-square-containeru > * > .cd-mediaitem-square {
+  --frame: max(220px, 15vw  ); 
+  width: var(--frame);
+  height: calc(var(--frame) * 13 / 11);
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  font-size: calc(var(--frame) / 220 * 14);
+  justify-content: center;
+  align-items: center;
+  border-radius: calc(var(--frame) / 220 * 6);
+
+  .artwork-container {
+    position: relative;
+
+    .artwork {
+      height: calc(var(--frame) * 19 / 22);
+      width: calc(var(--frame) * 19 / 22);
+      background: blue;
+      border-radius: var(--mediaItemRadius);
+      background: var(--artwork);
+      background-size: cover;
+      flex: 0 0 auto;
+      margin: calc(var(--frame) / 220 * 6);
+      cursor: pointer;
+
+      &.round {
+        border-radius: var(--mediaItemRadiusRound);
+      }
+    }
+
+    >.play-btn,
+    >.menu-btn {
+      opacity: 0;
+      appearance: none;
+      padding:0px;
+      border:0px;
+      width:  calc(var(--frame) / 220 * 30);
+      height: calc(var(--frame) / 220 * 30);
+      border-radius: 50%;
+      background: rgba(50, 50, 50, 0.7);
+      cursor: pointer;
+      backdrop-filter: blur(32px) saturate(180%);
+      transition: opacity 0.1s var(--appleEase);
+    }
+
+    >.play-btn {
+      position: absolute;
+      bottom: calc(var(--frame) / 220 * 14);
+      left:  calc(var(--frame) / 220 * 14);
+      z-index: 2;
+    }
+
+    >.menu-btn {
+      position: absolute;
+      bottom: calc(var(--frame) / 220 * 14);
+      right: calc(var(--frame) / 220 * 14);
+      z-index: 2;
+    }
+
+    &:hover {
+      >.play-btn,
+      >.menu-btn {
+        opacity: 1;
+      }
+    }
+  }
+
+
+  .title {
+    width: 90%;
+    text-align: center;
+  }
+
+  .subtitle {
+    width: 100%;
+    text-align: center;
+    font-size: calc(var(--frame) / 220 * 12);
+  }
+
+  &.mediaitem-video {
+    height:calc(var(--frame) / 220 * 200);
+    width: calc(var(--frame) / 220 * 240);
+    .artwork {
+      height:calc(var(--frame) / 220 * 120);
+      width: calc(var(--frame) / 220 * 212);
+    }
+  }
+
+  &.mediaitem-brick {
+    height: calc(var(--frame) / 220 * 200);
+    width: calc(var(--frame) / 220 * 240);
+    .artwork {
+      height: calc(var(--frame) / 220 * 123);
+      width: calc(var(--frame)  );
+    }
+  }
+}
+
 .cd-btn-seeall {
   background: transparent;
   border: 0px;
@@ -3059,3 +3159,7 @@ input[type=checkbox][switch]:checked:active::before {
 .madeforyou-body {
   margin-top: 15px;
 }
+
+.albums-square-container {
+  text-align: center;
+}

src/renderer/views/components/libraryartist-item.ejs

@@ -0,0 +1,283 @@
+<script type="text/x-template" id="libraryartist-item">
+    <div v-observe-visibility="{callback: visibilityChanged}"
+       
+         @click="select"
+         :data-id="item.id"
+         :data-type="artists"
+         :data-index="index"
+         :data-guid="guid"
+         :data-islibrary="true"
+         class="cd-mediaitem-list-item"
+         :class="{'mediaitem-selected': app.select_hasMediaItem(guid)}">
+        <template v-if="isVisible">
+            <!-- <div class="isLibrary" v-if="showLibraryStatus == true">
+                <button @click="addToLibrary()"
+                        v-if="!app.isInLibrary(item.attributes.playParams) && !addedToLibrary">🖤
+                </button>
+                <button v-else @click="removeFromLibrary()">❤️</button>
+            </div> -->
+            <div class="artwork" v-if="showArtwork == true">
+                <mediaitem-artwork
+                        :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                        size="50"
+                        :type="item.type"></mediaitem-artwork>
+                <button class="overlay-play" @click="playTrack()"><%- include("../svg/play.svg") %></button>
+            </div>
+            <div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}"
+                 @dblclick="app.routeView(item)">
+                <div class="title text-overflow-elipsis">
+                    {{ item.attributes.name }}
+                </div>
+                <div class="subtitle text-overflow-elipsis" style="-webkit-box-orient: horizontal;">
+                    <template v-if="item.attributes.name">
+                        <div class="artist item-navigate text-overflow-elipsis"
+                             @click="app.searchAndNavigate(item,'artist')">
+                            {{ item.attributes.artistName }}
+                        </div>
+                        <!-- <template v-if="item.attributes.albumName">&nbsp;-&nbsp;</template>
+                        <template v-if="item.attributes.albumName">
+                            <div class="artist item-navigate text-overflow-elipsis"
+                             //    @click="app.searchAndNavigate(item,'album')"
+                                 >
+                                {{ item.attributes.albumName }}
+                            </div>
+                        </template> -->
+                    </template>
+                </div>
+            </div>
+            <!-- <div class="content-rating" v-if="item.attributes.contentRating" @dblclick="app.routeView(item)">
+                {{ item.attributes.contentRating }}
+            </div>
+            <template v-if="showMetaData == true" @dblclick="app.routeView(item)">
+                <div class="metainfo">
+                    {{ item.attributes.releaseDate ? new Date(item.attributes.releaseDate).toLocaleDateString()
+                    : "" }}
+                </div>
+                <div class="metainfo">
+                    {{ item.attributes.genreNames[0] ?? "" }}
+                </div>
+            </template>
+            <div class="duration" v-if="showDuration" @dblclick="app.routeView(item)">
+                {{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
+            </div> -->
+        </template>
+    </div>
+</script>
+
+<script>
+    Vue.component('libraryartist-item', {
+        template: '#libraryartist-item',
+        data: function () {
+            return {
+                isVisible: false,
+                addedToLibrary: false,
+                guid: this.uuidv4(),
+                app: this.$root
+            }
+        },
+        props: {
+            'item': {type: Object, required: true},
+            'parent': {type: String, required: false},
+            'index': {type: Number, required: false, default: -1},
+            'show-artwork': {type: Boolean, default: true},
+            'show-library-status': {type: Boolean, default: true},
+            'show-meta-data': {type: Boolean, default: false},
+            'show-duration': {type: Boolean, default: true},
+            'contextExt': {type: Object, required: false},
+        },
+        methods: {
+            uuidv4() {
+                return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+                    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+                );
+            },
+            msToMinSec(ms) {
+                var minutes = Math.floor(ms / 60000);
+                var seconds = ((ms % 60000) / 1000).toFixed(0);
+                return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
+            },
+            getDataType() {
+                if (this.item.attributes.playParams.isLibrary) {
+                    return this.item.type
+                } else {
+                    return this.item.attributes.playParams.kind
+                }
+            },
+            select(e) {
+               let u = this.item
+               u.attributes.playParams = {id : this.id, kind: "artists", isLibrary: true}
+               app.routeView(u)
+            },
+            contextMenu(event) {
+                let self = this
+                let data_type = this.getDataType()
+                let item_id = this.item.attributes.playParams.id ?? this.item.id
+                let isLibrary = this.item.attributes.playParams.isLibrary ?? false
+
+                let useMenu = "normal"
+                if (app.selectedMediaItems.length <= 1) {
+                    app.selectedMediaItems = []
+                    app.select_selectMediaItem(item_id, data_type, this.index, this.guid, isLibrary)
+                } else {
+                    useMenu = "multiple"
+                }
+                let menus = {
+                    multiple: {
+                        items: [
+                            {
+                                "name": "Add to Playlist...",
+                                "action": function () {
+                                    app.promptAddToPlaylist()
+                                }
+                            },
+                            {
+                                name: `Play ${app.selectedMediaItems.length} tracks next`,
+                                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: `Play ${app.selectedMediaItems.length} tracks later`,
+                                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: {
+                        items: [
+                            {
+                                "name": "Add to Playlist...",
+                                "action": function () {
+                                    app.promptAddToPlaylist()
+                                }
+                            },
+                            {
+                                "name": "Start Radio",
+                                "action": function () {
+                                    app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => {
+                                        app.mk.play()
+                                        app.selectedMediaItems = []
+                                    })
+                                }
+                            },
+                            {
+                                "name": "Play Next",
+                                "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": "Play Later",
+                                "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 = []
+                                }
+                            },
+                            {
+                                "name": "Go to Artist",
+                                "action": function () {
+                                    app.searchAndNavigate(self.item, 'artist')
+                                }
+                            },
+                            {
+                                "name": "Go to Album",
+                                "action": function () {
+                                    app.searchAndNavigate(self.item, 'album')
+                                }
+                            },
+                        ]
+                    }
+                }
+                if (this.contextExt) {
+                    // if this.context-ext.normal is true append all options to the 'normal' menu which is a kvp of arrays
+                    if (this.contextExt.normal) {
+                        menus.normal.items = menus.normal.items.concat(this.contextExt.normal)
+                    }
+                    if (this.contextExt.multiple) {
+                        menus.multiple.items = menus.multiple.items.concat(this.contextExt.multiple)
+                    }
+                }
+                CiderContextMenu.Create(event, menus[useMenu])
+            },
+            visibilityChanged: function (isVisible, entry) {
+                this.isVisible = isVisible
+            },
+            addToLibrary() {
+                let item = this.item
+                if (item.attributes.playParams.id) {
+                    console.log('adding to library', item.attributes.playParams.id)
+                    app.addToLibrary(item.attributes.playParams.id.toString())
+                    this.addedToLibrary = true
+                } else if (item.id) {
+                    console.log('adding to library', item.id)
+                    app.addToLibrary(item.id.toString())
+                    this.addedToLibrary = true
+                }
+            },
+            async removeFromLibrary() {
+                let item = this.item
+                let params = {"fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library"}
+                let id = item.id ?? item.attributes.playParams.id
+                let res = await app.mkapi(item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.playParams.id ?? item.id, params);
+                if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
+                    id = res.relationships.library.data[0].id
+                }
+                let kind = this.item.attributes.playParams.kind ?? this.data.item ?? '';
+                let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
+                if (item.attributes.playParams.id) {
+                    console.log('remove from library', id)
+                    app.removeFromLibrary(truekind, id)
+                    this.addedToLibrary = false
+                } else if (item.id) {
+                    console.log('remove from library', id)
+                    app.removeFromLibrary(truekind, id)
+                    this.addedToLibrary = false
+                }
+            },
+            playTrack() {
+                let item = this.item
+                let parent = this.parent
+                let childIndex = this.index
+                console.log(item, parent, childIndex)
+                if (parent != null && childIndex != null) {
+                    app.queueParentandplayChild(parent, childIndex, item);
+                } else {
+                    app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)
+                }
+            }
+        }
+    });
+</script>

src/renderer/views/components/listennow-child.ejs

@@ -0,0 +1,42 @@
+<script type="text/x-template" id="listennow-child">
+    <div v-observe-visibility="{callback: visibilityChanged}">
+    <template v-if="isVisible && recom.attributes.display.kind != 'MusicSuperHeroShelf'">    
+        <div class="row">
+            <div class="col">
+                <h3>{{ recom.attributes.title ? recom.attributes.title.stringForDisplay : ""}}</h3>
+            </div>
+            <div class="col-auto flex-center" v-if="recom.relationships.contents.data.length >= 10">
+                        <button class="cd-btn-seeall" @click="app.showCollection(recom.relationships.contents, recom.attributes.title ? recom.attributes.title.stringForDisplay : '', 'listen_now')" >See All</button>
+            </div>
+        </div>
+        <template v-if="recom.attributes.display.kind == 'MusicCoverShelf'">
+            <mediaitem-scroller-horizontal-large
+                            :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large>
+        </template>
+        <template v-else>
+            <mediaitem-scroller-horizontal-sp
+                            :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-sp>
+        </template>
+    </template> 
+    <template v-else-if="recom.attributes.display.kind != 'MusicSuperHeroShelf'">
+        <div style="height:330px"> </div>
+    </template>    
+
+    </div>            
+</script>
+<script>
+    Vue.component('listennow-child', {
+        template: "#listennow-child",
+        props: ["recom"],
+        data: function () {
+            return {
+                isVisible: true
+            }
+        },
+        methods: {
+            visibilityChanged: function (isVisible, entry) {
+                this.isVisible = isVisible
+            },
+        }
+    })    
+</script>

src/renderer/views/components/mediaitem-artwork.ejs

@@ -2,7 +2,7 @@
     <div class="mediaitem-artwork" :class="{'rounded': (type == 'artists')}" :key="url" :style="getStyle()"
          v-observe-visibility="{callback: visibilityChanged}">
         <img :src="app.getMediaItemArtwork(url, size, width)"
-             decoding="async"
+             decoding="async" loading="lazy"
              class="mediaitem-artwork--img">
         <div v-if="video && isVisible && getVideoPriority()" class="animatedartwork-view-box">
             <animatedartwork-view :priority="getVideoPriority()" :video="video"></animatedartwork-view>

src/renderer/views/components/mediaitem-list-item.ejs

@@ -70,7 +70,7 @@
             return {
                 isVisible: false,
                 addedToLibrary: false,
-                guid: uuidv4(),
+                guid: this.uuidv4(),
                 app: this.$root
             }
         },
@@ -85,6 +85,11 @@
             'contextExt': {type: Object, required: false},
         },
         methods: {
+            uuidv4() {
+                return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+                    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+                );
+            },
             msToMinSec(ms) {
                 var minutes = Math.floor(ms / 60000);
                 var seconds = ((ms % 60000) / 1000).toFixed(0);

src/renderer/views/components/mediaitem-scroller-horizontal-large.ejs

@@ -1,7 +1,9 @@
 <script type="text/x-template" id="mediaitem-scroller-horizontal-large">
     <div class="cd-hmedia-scroller">
-        <mediaitem-square :item="item"
+        <template >
-                          v-for="item in items"></mediaitem-square>
+            <mediaitem-square :item="item" 
+                            v-for="item in items"></mediaitem-square>
+        </template>                  
     </div>
 </script>
 
@@ -9,12 +11,6 @@
 <script>
     Vue.component('mediaitem-scroller-horizontal-large', {
         template: '#mediaitem-scroller-horizontal-large',
-        props: ['items'],
+        props: ['items']
-        data: function () {
-            return {
-                app: this.$root,
-            }
-        },
-        methods: {}
     });
 </script>

src/renderer/views/components/mediaitem-square-sp.ejs

@@ -1,6 +1,6 @@
 <script type="text/x-template" id="mediaitem-square-sp">
-    <div ref="main" style="position: relative; display: inline-flex;" @contextmenu="contextMenu">
+    <div ref="main" style="position: relative; display: inline-flex;" @contextmenu="contextMenu"  v-observe-visibility="{callback: visibilityChanged}" width="250px">
-        <div @click.self='app.routeView(item)'
+        <div @click.self='app.routeView(item)' v-if="isVisible"
              class="cd-mediaitem-square-sp" ref="main2"
              :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}">
             <div class="artwork">
@@ -50,7 +50,7 @@
             </div>
 
         </div>
-        <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)' tabindex="0">
+        <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)' tabindex="0" v-if="isVisible">
             <div class="button" style="
                border-radius: 50%;
                background: rgba(50,50,50,0.7);"
@@ -84,6 +84,7 @@
         data: function () {
             return {
                 app: this.$root,
+                isVisible: true,
             }
         },
         methods: {
@@ -103,7 +104,11 @@
                 );
                 this.$refs.main.dispatchEvent(evt);
             }
-            , contextMenu(event) {
+            ,
+            visibilityChanged: function (isVisible, entry) {
+                this.isVisible = isVisible
+            },
+            contextMenu(event) {
                 if (!event) {
                     event = this.$refs.main
                 } else {

src/renderer/views/components/mediaitem-square.ejs

@@ -50,13 +50,18 @@
             return {
                 isVisible: false,
                 addedToLibrary: false,
-                guid: uuidv4(),
+                guid: this.uuidv4(),
                 noplay: ["apple-curators"],
                 nomenu: ["artists", "stations", "apple-curators"],
                 app: this.$root
             }
         },
         methods: {
+            uuidv4() {
+                return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+                    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+                );
+            },
             getArtworkUrl() {
                 let artwork = this.item.attributes.artwork ? this.item.attributes.artwork.url : ''
                 switch (this.kind) {
@@ -174,6 +179,11 @@
                 }
                 CiderContextMenu.Create(event, menus[useMenu])
             },
+        },
+        beforeDestroy: function () {
+            this.item = null;
+            this.kind = null;
+            this.size = null;
         }
     });
 </script>

src/renderer/views/components/queue-item.ejs

@@ -54,7 +54,12 @@
                         }
                     }]
                 });
-            }
+            },
+            msToMinSec(ms) {
+                var minutes = Math.floor(ms / 60000);
+                var seconds = ((ms % 60000) / 1000).toFixed(0);
+                return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
+            },
         }
     });
 </script>

src/renderer/views/main.ejs

@@ -298,6 +298,7 @@
                         <cider-recordlabel :data="showingPlaylist"></cider-recordlabel>
                     </template>
                 </transition>
+                
                 <transition name="wpfade">
                     <template v-if="page.includes('curator_')">
                         <cider-recordlabel :data="showingPlaylist"></cider-recordlabel>
@@ -399,13 +400,20 @@
                     <%- include('pages/library-albums') %>');
                     %>
                 </transition>
-                <!-- Library - Albums -->
+                <!-- Library - Made For You -->
                 <transition name="wpfade" v-on:enter="getMadeForYou()">
                     <template v-if="page == 'library-madeforyou'" >
                     <%- include('pages/madeforyou') %>');
                     %>
                    </template>
                 </transition>
+                 <!-- Library - Artists-->
+                <!-- <transition name="wpfade" v-on:enter="getLibraryArtistsFull(null, 0);">
+                    <template v-if="page == 'library-artists'">
+                        <%- include('pages/library-artists') %>');
+                    %>
+                    </template>
+                </transition> -->
                 <transition name="wpfade">
                     <template v-if="page.includes('appleCurator')" >
                         <cider-applecurator :data="appleCurator"></cider-applecurator>
@@ -523,6 +531,9 @@
 <%- include('components/mediaitem-square-sp') %>
 <!-- MediaItem MusicVideo -->
 <%- include('components/mediaitem-mvview') %>
+<!-- MediaItem MusicVideo -->
+<%- include('components/libraryartist-item') %>
+<%- include('components/listennow-child') %>
 <!-- MediaItem MusicVideo SP -->
 <%- include('components/mediaitem-mvview-sp') %>
 <!-- Animated Artwork View -->

src/renderer/views/pages/library-albums.ejs

@@ -49,8 +49,12 @@
             </div>
         </div>
         <div class="well">
-            <mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
+            <div class="albums-square-container"> 
-            </mediaitem-square>
+                <div> 
+                    <mediaitem-square v-if="library.albums.viewAs == 'covers'" :size="'150'" :item="item" v-for="item in library.albums.displayListing">
+                    </mediaitem-square>
+                </div>   
+            </div>
             <mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.albums.displayListing">
             </mediaitem-list-item>
         </div>

src/renderer/views/pages/library-artists.ejs

@@ -0,0 +1,54 @@
+    <div class="content-inner">
+        <div class="row">
+            <div class="col" style="padding:0px;">
+                <h1 class="header-text">Artists</h1>
+            </div>
+            
+        </div>
+        <div class="row">
+            <div class="col" style="padding:0px;">
+                <div class="search-input-container" style="width:100%;margin: 16px 0px;">
+                    <div class="search-input--icon"></div>
+                    <input type="search"
+                           style="width:100%;"
+                           spellcheck="false"
+                           placeholder="Search..."
+                           @input="searchLibraryAlbums"
+                           v-model="library.artists.search" class="search-input">
+                </div>
+            </div>
+            <div class="col-auto flex-center">
+                <div class="row">
+                    <div class="col">
+                        <select class="md-select" v-model="library.artists.sorting[1]" @change="searchLibraryAlbums(1)">
+                            <optgroup label="Sort By">
+                                <option v-for="(sort, index) in library.artists.sortingOptions" :value="index">{{ sort }}</option>
+                            </optgroup>
+                        </select>
+                    </div>
+                    <div class="col">
+                        <select class="md-select" v-model="library.artists.sortOrder[1]" @change="searchLibraryAlbums(1)">
+                            <optgroup label="Sort Order">
+                                <option value="asc">Ascending</option>
+                                <option value="desc">Descending</option>
+                            </optgroup>
+                        </select>
+                    </div>
+                    <div class="col">
+                        <select class="md-select" v-model="library.artists.viewAs">
+                            <optgroup label="View As">
+                                <option value="covers">Cover Art</option>
+                                <option value="list">List</option>
+                            </optgroup>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="well">
+            <!-- <mediaitem-square v-if="library.artists.viewAs == 'covers'" :item="item" v-for="item in library.artists.displayListing">
+            </mediaitem-square> -->
+            <libraryartist-item :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.artists.displayListing">
+            </libraryartist-item>
+        </div>
+    </div>

src/renderer/views/pages/listen_now.ejs

@@ -2,24 +2,7 @@
     <div class="content-inner">
         <h1 class="header-text">Listen Now</h1>
         <template v-for="recom in data.data">
-            <div class="row">
+           <listennow-child :recom="recom"></listennow-child>
-                <div class="col">
-                    <h3>{{ recom.attributes.title ? recom.attributes.title.stringForDisplay : ""}}</h3>
-                </div>
-                <div class="col-auto flex-center" v-if="recom.relationships.contents.data.length >= 10">
-                    <button class="cd-btn-seeall" @click="app.showCollection(recom.relationships.contents, recom.attributes.title ? recom.attributes.title.stringForDisplay : '', 'listen_now')" >See All</button>
-                </div>
-            </div>
-            <template v-if="recom.attributes.display.kind == 'MusicCoverShelf'">
-                <mediaitem-scroller-horizontal-large
-                        :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large>
-            </template>
-            <template v-else-if="recom.attributes.display.kind == 'MusicSuperHeroShelf'">
-            </template>
-            <template v-else>
-                <mediaitem-scroller-horizontal-sp
-                        :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-sp>
-            </template>
         </template>
     </div>
 </script>