From f8491848fd6e33ff45eb47e8640961af8a2610ba Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Mon, 20 Dec 2021 23:48:32 -0800
Subject: [PATCH] merged mediaitem-square and mediaitem-square-large into the
 same element

added observed visibility to mediaitem-square.
fixed artist page animated artwork not changing when navigation to another artist with animated artwork
---
 src/renderer/style.less                       | 203 ++++++++++++------
 .../mediaitem-scroller-horizontal-large.ejs   |   4 +-
 .../components/mediaitem-square-large.ejs     |  25 +--
 .../views/components/mediaitem-square.ejs     | 127 +++++++++--
 src/renderer/views/main.ejs                   |   2 -
 src/renderer/views/pages/artist.ejs           |   2 +-
 src/renderer/views/pages/collection-list.ejs  |   4 +-
 src/renderer/views/pages/library-albums.ejs   |   4 +-
 .../views/pages/library-recentlyadded.ejs     |   4 +-
 src/renderer/views/pages/madeforyou.ejs       |   4 +-
 src/renderer/views/pages/recordLabel.ejs      |  12 +-
 src/renderer/views/pages/search.ejs           |   2 +-
 12 files changed, 283 insertions(+), 110 deletions(-)

diff --git a/src/renderer/style.less b/src/renderer/style.less
index 90bc74f4..5fb7832a 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -315,7 +315,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   align-items: center;
 
   &.active {
-    background:rgb(200 200 200 / 15%);
+    background: rgb(200 200 200 / 15%);
     animation: usermenuBtnClick .30s cubic-bezier(0.36, 0, 0.66, -0.56);
   }
 }
@@ -324,9 +324,11 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   0% {
     transform: translateY(0px);
   }
+
   50% {
     transform: translateY(-6px);
   }
+
   100% {
     transform: translateY(0px);
   }
@@ -387,6 +389,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     padding: 10px;
     z-index: 1;
   }
+
   .body {
     background: #242424;
     padding: 6px;
@@ -394,6 +397,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     width: 100%;
     box-shadow: var(--mediaItemShadow-Shadow);
   }
+
   .item {
     background: transparent;
     display: block;
@@ -407,6 +411,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     appearance: none;
     border-radius: 6px;
     margin: 2px 0px;
+
     &:hover {
       background: var(--keyColor);
     }
@@ -416,8 +421,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 .search-hints-container {
   top: 44px;
   #cmenu.container();
+
   .search-hints {
     #cmenu.body();
+
     .search-hint {
       #cmenu.item();
     }
@@ -427,8 +434,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 .usermenu-container {
   bottom: 66px;
   #cmenu.container();
+
   .usermenu-body {
     #cmenu.body();
+
     .usermenu-item {
       #cmenu.item();
     }
@@ -469,12 +478,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     padding: 6px;
     border-radius: 6px;
     box-shadow: var(--mediaItemShadow-Shadow);
+
     &.context-menu-open {
       animation-duration: .10s;
       animation-name: contextMenuIn;
       animation-iteration-count: 1;
       animation-easings: var(--appleEase);
     }
+
     &.context-menu-close {
       animation-duration: .10s;
       animation-name: contextMenuOut;
@@ -489,6 +500,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     transform: scale(0.9);
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     opacity: 1;
@@ -500,6 +512,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     transform: scale(1);
     opacity: 1;
   }
+
   100% {
     transform: scale(0.9);
     opacity: 0;
@@ -793,6 +806,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   bottom: 0px;
   left: 0px;
   background: @bgColor;
+
   &:hover {
     >input[type=range] {
       &::-webkit-slider-thumb {
@@ -802,6 +816,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
       }
     }
   }
+
   >input[type=range] {
     appearance: none;
     width: 100%;
@@ -1389,11 +1404,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   margin-right: 0px;
 }
 
-.lyric-line.active .verse{
+.lyric-line.active .verse {
   opacity: 0.6;
 }
 
-.lyric-line.active .verse.verse-active{
+.lyric-line.active .verse.verse-active {
   opacity: 1;
 }
 
@@ -1517,6 +1532,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   backdrop-filter: blur(16px) saturate(180%);
   box-shadow: 0px 1px 0px rgba(185, 185, 185, 0.08);
   mix-blend-mode: hard-light;
+
   .nav-item {
     appearance: none;
     border: 0px;
@@ -1531,18 +1547,21 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     margin: 2px;
     border-radius: 6px;
     transition: transform .10s var(--appleEase);
+
     &:active {
       background: var(--selected-click);
       transform: scale(0.96);
       transition: transform 0s var(--appleEase);
     }
-    > svg {
+
+    >svg {
       width: 8px;
       pointer-events: none;
     }
 
     &:hover {
       background: var(--selected);
+
       >svg {
         color: rgba(200, 200, 200, 1.0);
       }
@@ -1705,6 +1724,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 // Collection Page
 .collection-page {
   padding-bottom: 128px;
+
   .top-fab {
     height: 52px;
     width: 52px;
@@ -1730,6 +1750,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       background: var(--keyColor);
     }
   }
+
   .header-text {
     margin-bottom: 32px;
   }
@@ -1739,7 +1760,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 .artist-page {
   padding: 0px;
-  top:0;
+  top: 0;
 
   .artist-header {
     background: linear-gradient(45deg, var(--keyColor), #0e0e0e);
@@ -1762,9 +1783,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       border: 0px;
       cursor: pointer;
       z-index: 5;
+
       &:hover {
         background: var(--keyColor-rollover);
       }
+
       &:active {
         background: var(--keyColor-pressed);
       }
@@ -1800,30 +1823,34 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     height: 200px;
     margin: 32px;
     position: relative;
+
     .overlay-play {
       position: absolute;
-      top:0;
-      left:0;
-      width:100%;
-      height:100%;
-      opacity:0;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
       background: rgb(0 0 0 / 50%);
       transition: opacity 0.1s var(--appleEase);
       border-radius: 100%;
-      z-index:1;
+      z-index: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       appearance: none;
-      border:0px;
-      padding:0px;
+      border: 0px;
+      padding: 0px;
+
       &:hover {
-        opacity:1;
+        opacity: 1;
       }
+
       &:active {
         background: var(--selected-click);
       }
+
       >svg {
         width: 70%;
       }
@@ -1841,16 +1868,19 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       display: none;
       cursor: pointer;
       appearance: none;
-      border:0px;
-      padding:0px;
+      border: 0px;
+      padding: 0px;
       transform: translateY(3px);
+
       &:hover {
         background: var(--keyColor-rollover);
       }
+
       &:active {
         background: var(--keyColor-pressed);
       }
     }
+
     &.artist-animation-on {
       width: 100%;
       flex: unset;
@@ -1858,6 +1888,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       color: whitesmoke;
       position: absolute;
       bottom: 0;
+
       .artist-play {
         display: block;
       }
@@ -1929,6 +1960,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
   &.rounded {
     border-radius: 100%;
+
     &::after {
       border-radius: 100%;
     }
@@ -1970,9 +2002,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 
   .queue-footer {
-    width:100%;
+    width: 100%;
     padding: 12px;
   }
+
   .autoplay {
     background: rgb(200 200 200 / 15%);
     appearance: none;
@@ -1988,10 +2021,13 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 .cd-queue-item {
   border-bottom: 1px solid rgb(200 200 200 / 10%);
   padding: 8px;
-  .row, .col {
-    padding:0px;
-    margin:0px;
+
+  .row,
+  .col {
+    padding: 0px;
+    margin: 0px;
   }
+
   .artwork {
     width: 32px;
     height: 32px;
@@ -2008,12 +2044,13 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 
   .queue-info {
-    display:flex;
+    display: flex;
     flex-direction: column;
 
     .queue-title {
       font-size: 14px;
     }
+
     .queue-subtitle {
       font-size: 13px;
       opacity: 0.85;
@@ -2077,9 +2114,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       padding: 0px;
       z-index: 5;
       cursor: pointer;
+
       &:hover {
         opacity: 1;
       }
+
       &:active {
         background: var(--selected-click);
       }
@@ -2152,16 +2191,17 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
   &:hover {
     background: rgb(200 200 200 / 10%);
+
     .overlay-play {
       opacity: 1;
     }
   }
 
   &.mediaitem-selected {
-    background: var(--selected);    
+    background: var(--selected);
   }
 
-  
+
   &:active {
     background: var(--selected-click);
     color: #eee;
@@ -2264,6 +2304,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
   >.cd-mediaitem-square-large-overlay {
     z-index: 3;
+
     &:hover {
       opacity: 1;
     }
@@ -2275,7 +2316,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
   &:hover+.cd-mediaitem-square-large-overlay {
     opacity: 1;
-  
+
   }
 
   &:hover {
@@ -2456,8 +2497,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 /* mediaitem-square */
 .cd-mediaitem-square {
-  width: 200px;
-  height: 190px;
+  width: 220px;
+  height: 260px;
   display: inline-flex;
   flex: 0 0 auto;
   flex-direction: column;
@@ -2465,40 +2506,74 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   justify-content: center;
   align-items: center;
   border-radius: 6px;
-  cursor: pointer;
-}
 
-.cd-mediaitem-square:hover {
-  background: rgb(200 200 200 / 10%);
-}
+  .artwork-container {
+    position: relative;
 
-.cd-mediaitem-square .artwork {
-  height: 128px;
-  width: 128px;
-  background: blue;
-  border-radius: var(--mediaItemRadius);
-  background: var(--artwork);
-  background-size: cover;
-  box-shadow: var(--mediaItemShadow);
-  flex: 0 0 auto;
-  margin: 6px;
-}
+    .artwork {
+      height: 190px;
+      width: 190px;
+      background: blue;
+      border-radius: var(--mediaItemRadius);
+      background: var(--artwork);
+      background-size: cover;
+      flex: 0 0 auto;
+      margin: 6px;
+      cursor: pointer;
 
-.cd-mediaitem-square .artwork.round {
-  border-radius: var(--mediaItemRadiusRound);
-}
+      &.round {
+        border-radius: var(--mediaItemRadiusRound);
+      }
+    }
 
-.cd-mediaitem-square .title {
-  width: 90%;
-  text-align: center;
-}
+    >.play-btn,
+    >.menu-btn {
+      display: none;
+      appearance: none;
+      padding:0px;
+      border:0px;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: rgba(50, 50, 50, 0.7);
+      cursor: pointer;
+      backdrop-filter: blur(32px) saturate(180%);
+    }
 
-.cd-mediaitem-square .subtitle {
-  width: 100%;
-  text-align: center;
-  font-size: 12px;
-}
+    >.play-btn {
+      position: absolute;
+      bottom: 16px;
+      right: 16px;
+      z-index: 2;
+    }
 
+    >.menu-btn {
+      position: absolute;
+      bottom: 16px;
+      left: 16px;
+      z-index: 2;
+    }
+
+    &:hover {
+      >.play-btn,
+      >.menu-btn {
+        display: block;
+      }
+    }
+  }
+
+
+  .title {
+    width: 90%;
+    text-align: center;
+  }
+
+  .subtitle {
+    width: 100%;
+    text-align: center;
+    font-size: 12px;
+  }
+}
 
 .cd-btn-seeall {
   background: transparent;
@@ -2509,6 +2584,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   font-size: 16px;
   border-radius: 4px;
   padding: 6px;
+
   &:hover {
     cursor: pointer;
     background: rgb(200 200 200 / 10%)
@@ -2672,21 +2748,21 @@ div#captions {
 }
 
 .item-navigate:hover {
-    text-decoration: underline;
-    cursor: pointer;
+  text-decoration: underline;
+  cursor: pointer;
 }
 
-.title-browse-sp{
-    width: 100%;
-    text-align: left;
-    margin-bottom: 2px;
+.title-browse-sp {
+  width: 100%;
+  text-align: left;
+  margin-bottom: 2px;
 }
 
-.bold{
+.bold {
   font-weight: bold;
 }
 
-.semibold{
+.semibold {
   font-weight: 500;
 }
 
@@ -2720,6 +2796,7 @@ input[type=checkbox][switch]:checked {
   &:hover {
     background: var(--keyColor-rollover);
   }
+
   &:active {
     background: var(--keyColor-pressed);
   }
@@ -2761,6 +2838,6 @@ input[type=checkbox][switch]:checked:active::before {
 
 /* End Switch Checkbox */
 
-.madeforyou-body{
+.madeforyou-body {
   margin-top: 15px;
 }
\ No newline at end of file
diff --git a/src/renderer/views/components/mediaitem-scroller-horizontal-large.ejs b/src/renderer/views/components/mediaitem-scroller-horizontal-large.ejs
index c7f5b9b1..849dbdb6 100644
--- a/src/renderer/views/components/mediaitem-scroller-horizontal-large.ejs
+++ b/src/renderer/views/components/mediaitem-scroller-horizontal-large.ejs
@@ -1,8 +1,8 @@
 <script type="text/x-template" id="mediaitem-scroller-horizontal-large">
     <template>
         <div class="cd-hmedia-scroller">
-            <mediaitem-square-large :item="item"
-                                    v-for="item in items"></mediaitem-square-large>
+            <mediaitem-square :item="item"
+                                    v-for="item in items"></mediaitem-square>
         </div>
     </template>
 </script>
diff --git a/src/renderer/views/components/mediaitem-square-large.ejs b/src/renderer/views/components/mediaitem-square-large.ejs
index 0eb21cb8..4c6f8753 100644
--- a/src/renderer/views/components/mediaitem-square-large.ejs
+++ b/src/renderer/views/components/mediaitem-square-large.ejs
@@ -74,22 +74,22 @@
     Vue.component('mediaitem-square-large', {
         template: '#mediaitem-square-large',
         props: ['item'],
-        methods: { 
-             clickContext() {
-                var evt =  document.createEvent('MouseEvent');
+        methods: {
+            clickContext() {
+                var evt = document.createEvent('MouseEvent');
                 var rect = this.$refs.main2.getBoundingClientRect();
                 evt.initMouseEvent(
                     "contextmenu",
                     true /* bubble */, true /* cancelable */,
                     window, null,
-                    0, 0, rect.x + 100, rect.y +100,  /* coordinates */
+                    0, 0, rect.x + 100, rect.y + 100,  /* coordinates */
                     false, false, false, false, /* modifier keys */
                     0 /*left*/, null
                 );
                 this.$refs.main.dispatchEvent(evt);
-             }
-            ,contextMenu(event) {
-                if (!event){event = this.$refs.main} else {console.log(event)}
+            }
+            , contextMenu(event) {
+                if (!event) { event = this.$refs.main } else { console.log(event) }
                 let self = this
                 let useMenu = "normal"
                 if (app.selectedMediaItems.length <= 1) {
@@ -115,7 +115,7 @@
                                     for (let kind in itemsToPlay) {
                                         let ids = itemsToPlay[kind]
                                         if (ids.length > 0) {
-                                            app.mk.playNext({[kind + "s"]: itemsToPlay[kind]})
+                                            app.mk.playNext({ [kind + "s"]: itemsToPlay[kind] })
                                         }
                                     }
                                     console.log(itemsToPlay)
@@ -136,7 +136,7 @@
                                     for (let kind in itemsToPlay) {
                                         let ids = itemsToPlay[kind]
                                         if (ids.length > 0) {
-                                            app.mk.playLater({[kind + "s"]: itemsToPlay[kind]})
+                                            app.mk.playLater({ [kind + "s"]: itemsToPlay[kind] })
                                         }
                                     }
                                     app.selectedMediaItems = []
@@ -149,7 +149,7 @@
                             {
                                 "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.playNext({ [self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id })
                                     app.mk.queue._reindex()
                                     app.selectedMediaItems = []
                                 }
@@ -157,7 +157,7 @@
                             {
                                 "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.playLater({ [self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id })
                                     app.mk.queue._reindex()
                                     app.selectedMediaItems = []
                                 }
@@ -166,6 +166,7 @@
                     }
                 }
                 CiderContextMenu.Create(event, menus[useMenu])
-            },}
+            },
+        }
     });
 </script>
\ No newline at end of file
diff --git a/src/renderer/views/components/mediaitem-square.ejs b/src/renderer/views/components/mediaitem-square.ejs
index a83bc7d2..8caeaf28 100644
--- a/src/renderer/views/components/mediaitem-square.ejs
+++ b/src/renderer/views/components/mediaitem-square.ejs
@@ -1,19 +1,26 @@
 <script type="text/x-template" id="mediaitem-square">
     <template>
-        <div tabindex="0" @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
-             class="cd-mediaitem-square">
-            <div class="artwork">
-                <mediaitem-artwork
-                        :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
-                        size="300"
-                        :type="item.type"></mediaitem-artwork>
-            </div>
-            <div class="title text-overflow-elipsis">
-                {{ item.attributes.name }}
-            </div>
-            <div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
-                {{ item.attributes.artistName }}
-            </div>
+        <div tabindex="0"
+             class="cd-mediaitem-square" @contextmenu="contextMenu" v-observe-visibility="{callback: visibilityChanged}">
+            <template v-if="isVisible">
+                    <div class="artwork-container">
+                        <div class="artwork" @click='app.routeView(item)'>
+                            <mediaitem-artwork
+                                    :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                                    :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="300"
+                                    :type="item.type"></mediaitem-artwork>
+                        </div>
+                        <button class="menu-btn" v-if="item.type != 'artists' && item.type != 'stations'" @click="contextMenu"><%- include("../svg/more.svg") %></button>
+                        <button class="play-btn" @click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
+                    </div>
+                    <div class="title item-navigate text-overflow-elipsis" @click.self='app.routeView(item)'>
+                        {{ item.attributes.name }}
+                    </div>
+                    <div class="subtitle item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')" v-if="item.attributes.artistName">
+                        {{ item.attributes.artistName }}
+                    </div>
+            </template>
         </div>
     </template>
 </script>
@@ -22,6 +29,96 @@
     Vue.component('mediaitem-square', {
         template: '#mediaitem-square',
         props: ['item'],
-        methods: {}
+        data: function () {
+            return {
+                isVisible: false,
+                addedToLibrary: false,
+                guid: uuidv4()
+            }
+        },
+        methods: {
+            visibilityChanged: function (isVisible, entry) {
+                this.isVisible = isVisible
+            },
+            contextMenu(event) {
+                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)
+                } else {
+                    useMenu = "multiple"
+                }
+                let menus = {
+                    multiple: {
+                        items: [
+                            {
+                                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": "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 = []
+                                }
+                            },
+                        ]
+                    }
+                }
+                CiderContextMenu.Create(event, menus[useMenu])
+            },
+        }
     });
 </script>
\ No newline at end of file
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 2aa41e66..f5e6d37a 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -503,8 +503,6 @@
 <%- include('components/mediaitem-hrect') %>
 <!-- MediaItem Square -->
 <%- include('components/mediaitem-square') %>
-<!-- MediaItem Square (Large) -->
-<%- include('components/mediaitem-square-large') %>
 <!-- MediaItem Square SP -->
 <%- include('components/mediaitem-square-sp') %>
 <!-- MediaItem MusicVideo -->
diff --git a/src/renderer/views/pages/artist.ejs b/src/renderer/views/pages/artist.ejs
index b9c2a49d..a49f8f5d 100644
--- a/src/renderer/views/pages/artist.ejs
+++ b/src/renderer/views/pages/artist.ejs
@@ -1,6 +1,6 @@
 <script type="text/x-template" id="cider-artist">
     <div class="content-inner artist-page">
-        <div class="artist-header" :style="getArtistPalette(data)">
+        <div class="artist-header" :style="getArtistPalette(data)" :key="data.id">
             <animatedartwork-view
                     v-if="data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)"
                     :video="data.attributes.editorialVideo.motionArtistWide16x9.video ?? (data.attributes.editorialVideo.motionArtistFullscreen16x9.video ?? '')">
diff --git a/src/renderer/views/pages/collection-list.ejs b/src/renderer/views/pages/collection-list.ejs
index a704daff..4283a7a2 100644
--- a/src/renderer/views/pages/collection-list.ejs
+++ b/src/renderer/views/pages/collection-list.ejs
@@ -4,7 +4,7 @@
         <div v-if="data['data'] != 'null'" class="well">
             <template v-for="(item, key) in data.data">
                 <template v-if="item.type == 'artists'">
-                    <mediaitem-square-large :item="item"></mediaitem-square-large>
+                    <mediaitem-square :item="item"></mediaitem-square>
                 </template>
                 <template v-else>
                     <mediaitem-list-item
@@ -12,7 +12,7 @@
                             :index="key"
                             :item="item"></mediaitem-list-item>
                     <mediaitem-mvview v-else-if="item.attributes.playParams.kind == 'musicVideo'" :item="item"></mediaitem-mvview>
-                    <mediaitem-square-large v-else :item="item"></mediaitem-square-large>
+                    <mediaitem-square v-else :item="item"></mediaitem-square>
                 </template>
             </template>
             <button v-if="triggerEnabled" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">Show More</button>
diff --git a/src/renderer/views/pages/library-albums.ejs b/src/renderer/views/pages/library-albums.ejs
index 643da2e1..bd617f79 100644
--- a/src/renderer/views/pages/library-albums.ejs
+++ b/src/renderer/views/pages/library-albums.ejs
@@ -48,8 +48,8 @@
                 </div>
             </div>
         </div>
-        <mediaitem-square-large v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
-        </mediaitem-square-large>
+        <mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
+        </mediaitem-square>
         <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>
diff --git a/src/renderer/views/pages/library-recentlyadded.ejs b/src/renderer/views/pages/library-recentlyadded.ejs
index ed1b33e1..747a9733 100644
--- a/src/renderer/views/pages/library-recentlyadded.ejs
+++ b/src/renderer/views/pages/library-recentlyadded.ejs
@@ -41,8 +41,8 @@
                 </div>
             </div>
         </div>
-        <mediaitem-square-large v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
-        </mediaitem-square-large>
+        <mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
+        </mediaitem-square>
         <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>
diff --git a/src/renderer/views/pages/madeforyou.ejs b/src/renderer/views/pages/madeforyou.ejs
index 3dc85e79..66676aba 100644
--- a/src/renderer/views/pages/madeforyou.ejs
+++ b/src/renderer/views/pages/madeforyou.ejs
@@ -5,7 +5,7 @@
             </div>
         </div> 
         <div class="madeforyou-body">  
-            <mediaitem-square-large :item="item" v-for="item in madeforyou.data">
-            </mediaitem-square-large>  
+            <mediaitem-square :item="item" v-for="item in madeforyou.data">
+            </mediaitem-square>  
         </div>                   
     </div>
\ No newline at end of file
diff --git a/src/renderer/views/pages/recordLabel.ejs b/src/renderer/views/pages/recordLabel.ejs
index 1939b844..da7487c5 100644
--- a/src/renderer/views/pages/recordLabel.ejs
+++ b/src/renderer/views/pages/recordLabel.ejs
@@ -36,8 +36,8 @@
                     <button class="cd-btn-seeall" @click="app.showRecordLabelView(data.id, data.attributes.name + ' -  Latest Releases', 'latest-releases')">See All</button>
                 </div>
             </div>
-            <mediaitem-square-large :item="item" v-for="item in data.views['latest-releases'].data">
-            </mediaitem-square-large>
+            <mediaitem-square :item="item" v-for="item in data.views['latest-releases'].data">
+            </mediaitem-square>
             </template>
             <template v-if="data.views && data.views['top-releases']">
             <div class="row">
@@ -48,8 +48,8 @@
                     <button class="cd-btn-seeall" @click="app.showRecordLabelView(data.id, data.attributes.name + ' -  Top Releases', 'top-releases')">See All</button>
                 </div>
             </div>
-            <mediaitem-square-large :item="item" v-for="item in data.views['top-releases'].data">
-            </mediaitem-square-large>
+            <mediaitem-square :item="item" v-for="item in data.views['top-releases'].data">
+            </mediaitem-square>
             </template>
             <template v-if="data.relationships && data.relationships.playlists && data.relationships.playlists.data.length > 0">
             <div class="row">
@@ -60,8 +60,8 @@
                     <button class="cd-btn-seeall" @click="app.showCollection(data.relationships.playlists, data.attributes.name + ' -  Playlists', 'curator')">See All</button>
                 </div>
             </div>
-            <mediaitem-square-large :item="item" v-for="item in data.relationships.playlists.data.limit(5)">
-            </mediaitem-square-large>
+            <mediaitem-square :item="item" v-for="item in data.relationships.playlists.data.limit(5)">
+            </mediaitem-square>
             </template>
         </div>
     </div>
diff --git a/src/renderer/views/pages/search.ejs b/src/renderer/views/pages/search.ejs
index 981fe6d9..d3b6ec74 100644
--- a/src/renderer/views/pages/search.ejs
+++ b/src/renderer/views/pages/search.ejs
@@ -4,7 +4,7 @@
             <div class="col-sm" style="width: auto;" v-if="getTopResult()">
                 <template>
                     <h3>Top Result</h3>
-                    <mediaitem-square-large :item="getTopResult()"></mediaitem-square-large>
+                    <mediaitem-square :item="getTopResult()"></mediaitem-square>
                 </template>
             </div>
             <div class="col" v-if="search.results.song">