From b49c079a21675fe895b29d0e494e973ecd4aca92 Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Sat, 25 Dec 2021 09:12:45 +0700
Subject: [PATCH] fix the top view of browse

---
 src/renderer/index.js                         |  4 ++--
 .../views/components/animatedartwork-view.ejs |  4 +---
 .../views/components/mediaitem-artwork.ejs    |  8 +++++--
 .../views/components/mediaitem-mvview-sp.ejs  | 22 ++++++++++---------
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/renderer/index.js b/src/renderer/index.js
index df2b904d..000f4043 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -1992,8 +1992,8 @@ const app = new Vue({
                 return false
             }
         },
-        getMediaItemArtwork(url, size = 64) {
-            var newurl = `${url.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', "cc")}`;
+        getMediaItemArtwork(url, height = 64, width) {
+            var newurl = `${url.replace('{w}', width ?? height).replace('{h}', height).replace('{f}', "webp").replace('{c}',(height == '516')? "sr" :"cc")}`;
             return newurl
         },
         getNowPlayingArtworkBG(size = 600) {
diff --git a/src/renderer/views/components/animatedartwork-view.ejs b/src/renderer/views/components/animatedartwork-view.ejs
index 63fe656f..321a3b04 100644
--- a/src/renderer/views/components/animatedartwork-view.ejs
+++ b/src/renderer/views/components/animatedartwork-view.ejs
@@ -10,7 +10,7 @@
     Vue.component('animatedartwork-view', {
         template: '#animatedartwork-view',
         props: ['video', 'hls'],
-        mounted() {
+        async mounted()  {
             if (this.video) {
 
                 this.$nextTick(function () {
@@ -24,7 +24,6 @@
                         capLevelToPlayerSize: true
                     };
                     if (this.hls) {
-                        console.log('detached');
                         this.hls.detachMedia();
                     } else {
 
@@ -53,7 +52,6 @@
             if(this.hls) {
                await this.hls.destroy();
                 this.hls = null
-                console.log('killed')
             }
         }
     });
diff --git a/src/renderer/views/components/mediaitem-artwork.ejs b/src/renderer/views/components/mediaitem-artwork.ejs
index 27f4a73c..24b35311 100644
--- a/src/renderer/views/components/mediaitem-artwork.ejs
+++ b/src/renderer/views/components/mediaitem-artwork.ejs
@@ -1,7 +1,7 @@
 <script type="text/x-template" id="mediaitem-artwork">
     <template v-if="type == 'artists'">
         <div class="mediaitem-artwork rounded" :key="url" :style="getStyle()">
-            <img :src="app.getMediaItemArtwork(url, size)"
+            <img :src="app.getMediaItemArtwork(url, size, width)"
                  decoding="async"
                  class="mediaitem-artwork--img">
         </div>
@@ -9,7 +9,7 @@
     <template v-else>
         <div class="mediaitem-artwork" :key="url" :style="getStyle()"
              v-observe-visibility="{callback: visibilityChanged}">
-            <img :src="app.getMediaItemArtwork(url, size)"
+            <img :src="app.getMediaItemArtwork(url, size, width)"
                  decoding="async"
                  class="mediaitem-artwork--img">
             <div v-if="video && isVisible" class="animatedartwork-view-box">
@@ -27,6 +27,10 @@
                 type: String,
                 default: '120'
             },
+            width: {
+                type: String,
+                required: false
+            },
             url: {
                 type: String,
                 default: ''
diff --git a/src/renderer/views/components/mediaitem-mvview-sp.ejs b/src/renderer/views/components/mediaitem-mvview-sp.ejs
index 2934a9a7..f0e275d7 100644
--- a/src/renderer/views/components/mediaitem-mvview-sp.ejs
+++ b/src/renderer/views/components/mediaitem-mvview-sp.ejs
@@ -1,22 +1,24 @@
 <script type="text/x-template" id="mediaitem-mvview-sp">
     <template>
         <div style="position: relative; display: inline-flex;">
-            <div @click.self='app.routeView(item)'
+            <div @click.self='app.routeView(item)' 
                  class="cd-mediaitem-mvview">
-                <div class="title-browse-sp bold " @click='app.routeView(item)'>
-                    {{ badge ? badge.designBadge : '⠀ '}}
+                <div style="height: 70px; min-height: 70px; max-height: 70px; width: 100%;"> 
+                    <div class="title-browse-sp bold " @click='app.routeView(item)' style = "color: darkgrey;">
+                        {{ badge ? badge.designBadge : ''}}
+                    </div>
+                    <div class="title-browse-sp " >
+                        {{ (badge != null && badge.designTag != null) ? badge.designTag :  (item.attributes.name ?? '') }}
+                    </div>
+                    <div class="title-browse-sp semibold" style = "color: darkgrey;" >
+                        {{ (item.attributes.artistName ?? (item.attributes.curatorName ?? '')) }}
+                    </div> 
                 </div>
-                <div class="title-browse-sp " >
-                    {{ (badge != null && badge.designTag != null) ? badge.designTag :  (item.attributes.name ?? '⠀ ') }}
-                </div>
-                <div class="title-browse-sp semibold" >
-                    {{ (item.attributes.artistName ?? (item.attributes.curatorName ?? '⠀ ')) }}
-                </div> 
                 <div class="artwork">
                     <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="imagesize ?? 300"
+                            :size="516" :width="900"
                             ></mediaitem-artwork>
                 </div>
                 <div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)'>