From 6cb95f2d10ae9acb7e327453724595ab6f00af95 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 7 Jul 2022 02:50:35 -0700
Subject: [PATCH] mediaitem square artwork res now adapts to window size

---
 src/renderer/less/elements.less               | 52 +++++++++----------
 src/renderer/main/vueapp.js                   |  1 +
 src/renderer/main/vuex-store.js               |  1 +
 .../views/components/mediaitem-artwork.ejs    | 28 +++++++++-
 .../views/components/mediaitem-square.ejs     |  1 +
 5 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index 403e38e0..975ac5b6 100644
--- a/src/renderer/less/elements.less
+++ b/src/renderer/less/elements.less
@@ -1195,41 +1195,41 @@
   }
 
   &.mediaitem-brick {
-    height: calc(200px, var(--windowRelativeScale));
-    width: calc(240px, var(--windowRelativeScale));
+    height: 200px;
+    width: 240px;
     transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 
     .artwork {
-      height: calc(123px, var(--windowRelativeScale));
-      width: calc(220px, var(--windowRelativeScale));
+      height: 123px;
+      width: 220px;
       transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
     }
 
-    // &:not(.noscale) {
-    //   @media (min-width: 1460px) {
-    //     --scaleRate: 1.1;
-    //     --scaleRateArtwork: 1.1;
-    //     width: calc(240px * var(--scaleRate));
-    //     height: calc(200px * var(--scaleRate));
+    &:not(.noscale) {
+      @media (min-width: 1460px) {
+        --scaleRate: 1.1;
+        --scaleRateArtwork: 1.1;
+        width: calc(240px * var(--scaleRate));
+        height: calc(200px * var(--scaleRate));
   
-    //     .artwork-container > .artwork {
-    //       width: calc(220px * var(--scaleRateArtwork));
-    //       height: calc(123px * var(--scaleRateArtwork));
-    //     }
-    //   }
+        .artwork-container > .artwork {
+          width: calc(220px * var(--scaleRateArtwork));
+          height: calc(123px * var(--scaleRateArtwork));
+        }
+      }
   
-    //   @media (min-width: 1550px) {
-    //     --scaleRate: 1.25;
-    //     --scaleRateArtwork: 1.25;
-    //     width: calc(240px * var(--scaleRate));
-    //     height: calc(200px * var(--scaleRate));
+      @media (min-width: 1550px) {
+        --scaleRate: 1.25;
+        --scaleRateArtwork: 1.25;
+        width: calc(240px * var(--scaleRate));
+        height: calc(200px * var(--scaleRate));
   
-    //     .artwork-container > .artwork {
-    //       width: calc(220px * var(--scaleRateArtwork));
-    //       height: calc(123px * var(--scaleRateArtwork));
-    //     }
-    //   }
-    // }
+        .artwork-container > .artwork {
+          width: calc(220px * var(--scaleRateArtwork));
+          height: calc(123px * var(--scaleRateArtwork));
+        }
+      }
+    }
   }
 
   &.mediaitem-small {
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index a5c0890e..88691a35 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -1098,6 +1098,7 @@ const app = new Vue({
         setWindowScaleFactor() {
             let scale = window.devicePixelRatio * window.innerWidth / 1280 * window.innerHeight / 720
             let desiredScale = parseFloat(app.cfg.visual.maxElementScale == -1 ? 1.6 : app.cfg.visual.maxElementScale)
+            app.$store.state.windowRelativeScale = scale
             if(scale <= 1) {
                 scale = 1
             }else if(scale >= desiredScale) {
diff --git a/src/renderer/main/vuex-store.js b/src/renderer/main/vuex-store.js
index e8934d26..8263f065 100644
--- a/src/renderer/main/vuex-store.js
+++ b/src/renderer/main/vuex-store.js
@@ -1,5 +1,6 @@
 const store = new Vuex.Store({
     state: {
+        windowRelativeScale: 1,
         library: {
             // songs: ipcRenderer.sendSync("get-library-songs"),
             // albums: ipcRenderer.sendSync("get-library-albums"),
diff --git a/src/renderer/views/components/mediaitem-artwork.ejs b/src/renderer/views/components/mediaitem-artwork.ejs
index a58a2590..3898f641 100644
--- a/src/renderer/views/components/mediaitem-artwork.ejs
+++ b/src/renderer/views/components/mediaitem-artwork.ejs
@@ -1,6 +1,7 @@
 <script type="text/x-template" id="mediaitem-artwork">
     <div class="mediaitem-artwork" :style="awStyle" @contextmenu="contextMenu" :class="[{'rounded': (type == 'artists')}, classes]" :key="url">
-        <img :src="app.getMediaItemArtwork(url, size, width)"
+        <img :src="imgSrc"
+             ref="image"
              decoding="async"
              loading="lazy"
              :style="imgStyle"
@@ -47,6 +48,10 @@
             shadow: {
                 type: String,
                 default: ''
+            },
+            upscaling: {
+                type: Boolean,
+                default: false
             }
         },
         data: function () {
@@ -63,15 +68,34 @@
                     opacity: 0,
                     transition: "opacity .25s linear"
                 },
-                classes: []
+                classes: [],
+                imgSrc: ""
+            }
+        },
+        computed: {
+            windowRelativeScale: function () {
+                return app.$store.state.windowRelativeScale;
+            }
+        },
+        watch: {
+            windowRelativeScale: function (newValue, oldValue) {
+                this.swapImage(newScale)
             }
         },
         mounted() {
             this.getClasses()
+            this.imgSrc = app.getMediaItemArtwork(this.url, this.size, this.width)
         },
         methods: {
+            swapImage(newValue) {
+                if(!this.upscaling) return
+                if (newValue > 1.5) {
+                    this.imgSrc = app.getMediaItemArtwork(this.url, parseInt(this.size * 2.0), parseInt(this.size * 2.0));
+                }
+            },
             imgLoaded() {
                 this.imgStyle.opacity = 1
+                this.swapImage(app.$store.state.windowRelativeScale)
                 // this.awStyle.background = ""
             },
             contextMenu(event) {
diff --git a/src/renderer/views/components/mediaitem-square.ejs b/src/renderer/views/components/mediaitem-square.ejs
index ab34f7ae..9e399dcd 100644
--- a/src/renderer/views/components/mediaitem-square.ejs
+++ b/src/renderer/views/components/mediaitem-square.ejs
@@ -17,6 +17,7 @@
                                 :url="getArtworkUrl()"
                                 :video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
                                 :size="size"
+								:upscaling="true"
                                 shadow="subtle"
                                 :bgcolor="getBgColor()"
                                 :video-priority="forceVideo"