From a16cb05c1e9203b553a41911a698ec8b5edc9ee6 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 10 Jun 2022 01:00:38 -0700
Subject: [PATCH] added artwork fade in

---
 .../views/components/mediaitem-artwork.ejs     | 18 +++++++++++++++---
 src/renderer/views/main.ejs                    |  2 +-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/renderer/views/components/mediaitem-artwork.ejs b/src/renderer/views/components/mediaitem-artwork.ejs
index 7fa4ea0d..a58a2590 100644
--- a/src/renderer/views/components/mediaitem-artwork.ejs
+++ b/src/renderer/views/components/mediaitem-artwork.ejs
@@ -1,9 +1,10 @@
 <script type="text/x-template" id="mediaitem-artwork">
-    <div class="mediaitem-artwork" @contextmenu="contextMenu" :class="[{'rounded': (type == 'artists')}, classes]" :key="url">
+    <div class="mediaitem-artwork" :style="awStyle" @contextmenu="contextMenu" :class="[{'rounded': (type == 'artists')}, classes]" :key="url">
         <img :src="app.getMediaItemArtwork(url, size, width)"
              decoding="async"
              loading="lazy"
-             :style="{background: bgcolor}"
+             :style="imgStyle"
+             @load="imgLoaded()"
              class="mediaitem-artwork--img">
         <div v-if="video && getVideoPriority()" class="animatedartwork-view-box">
             <animatedartwork-view :priority="getVideoPriority()" :video="video"></animatedartwork-view>
@@ -50,11 +51,18 @@
         },
         data: function () {
             return {
-                app:this.$root,
+                app: this.$root,
                 isVisible: false,
                 style: {
                     "box-shadow": ""
                 },
+                awStyle: {
+                    background: this.bgcolor
+                },
+                imgStyle: {
+                    opacity: 0,
+                    transition: "opacity .25s linear"
+                },
                 classes: []
             }
         },
@@ -62,6 +70,10 @@
             this.getClasses()
         },
         methods: {
+            imgLoaded() {
+                this.imgStyle.opacity = 1
+                // this.awStyle.background = ""
+            },
             contextMenu(event) {
                 let self = this
                 app.showMenuPanel({
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index e643cb73..0eaeb79c 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -105,7 +105,7 @@
             <% } %>
 
 
-                <script async src="https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js"></script>
+                <script async src="https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" data-web-components></script>
                 <script src="index.js?v=1"></script>
 
                 <script type="text/x-template" id="am-musiccovershelf">