scale app to fix error on 4k screens

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"
-                          v-for="item in items"></mediaitem-square>
+        <template >
+            <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'],
-        data: function () {
-            return {
-                app: this.$root,
-            }
-        },
-        methods: {}
+        props: ['items']
     });
 </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 @click.self='app.routeView(item)'
+    <div ref="main" style="position: relative; display: inline-flex;" @contextmenu="contextMenu"  v-observe-visibility="{callback: visibilityChanged}" width="250px">
+        <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">
-            </mediaitem-square>
+            <div class="albums-square-container"> 
+                <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">
-                <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>
+           <listennow-child :recom="recom"></listennow-child>
         </template>
     </div>
 </script>