From 5c94430d207e0dfc82a0e221cfe22735c2768a1b Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Mon, 6 Dec 2021 22:55:15 +0700
Subject: [PATCH] pretty usable ngl

---
 resources/cider-ui-tests/index.html | 24 +++++++++++++-----------
 resources/cider-ui-tests/index.js   |  6 ++++--
 resources/cider-ui-tests/style.css  | 13 +++++++++++++
 3 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/resources/cider-ui-tests/index.html b/resources/cider-ui-tests/index.html
index 30552567..7ef140fd 100644
--- a/resources/cider-ui-tests/index.html
+++ b/resources/cider-ui-tests/index.html
@@ -199,7 +199,7 @@
                 </div>
             </div>
             <div id="app-content">
-                <!-- Playlist page-->
+                <!-- Playlist / Album page-->
                 <transition name="wpfade" >
                     <template v-if="page.includes('playlist_')" >
                       <cider-playlist :data="showingPlaylist"></cider-playlist>
@@ -210,6 +210,7 @@
                       <cider-playlist :data="showingPlaylist"></cider-playlist>
                     </template>
                 </transition>
+                </transition>
                 <!-- Browse -->
                 <transition name="wpfade">
                     <template v-if="page == 'browse'">
@@ -382,11 +383,12 @@
     </div>
 </script>
 
+<!-- Album / Playlist View -->
 <script type="text/x-template" id="cider-playlist">
     <div class="content-inner">
         <template v-if="data != [] && data.attributes != []">
         <div class="playlist-display row">
-            <div class="col artwork" 
+            <div class="col playlist-artwork" 
             :style="{'--artwork': app.getMediaItemArtwork((data.attributes != null && data.attributes.artwork != null) ? data.attributes.artwork.url : (data.relationships.tracks.data.length > 0 ? data.relationships.tracks.data[0].attributes.artwork.url ?? '':''), 300)}
            "></div>
             <div class="playlist-info">
@@ -408,7 +410,7 @@
             <div class="col-sm" style="width: auto;" v-if="getTopResult()">
                 <template>
                     <h3>Top Result</h3>
-                    <mediaitem-square :item="getTopResult()"></mediaitem-square>
+                    <mediaitem-square-large :item="getTopResult()"></mediaitem-square>
                 </template>
             </div>
             <div class="col" v-if="search.results.songs">
@@ -437,8 +439,8 @@
                         <button class="cd-btn-seeall">See All</button>
                     </div>
                 </div>
-                <mediaitem-scroller-horizontal
-                        :items="search.results.albums.data.limit(10)"></mediaitem-scroller-horizontal>
+                <mediaitem-scroller-horizontal-large
+                        :items="search.results.albums.data.limit(10)"></mediaitem-scroller-horizontal-large>
             </template>
             <template v-if="search.results.artists">
                 <div class="row">
@@ -461,8 +463,8 @@
                         <button class="cd-btn-seeall">See All</button>
                     </div>
                 </div>
-                <mediaitem-square :item="item"
-                                  v-for="item in search.results.playlists.data.limit(10)"></mediaitem-square>
+                <mediaitem-square-large :item="item"
+                                  v-for="item in search.results.playlists.data.limit(10)"></mediaitem-square-large>
             </template>
         </template>
     </div>
@@ -600,7 +602,7 @@
                     <div class="button" style = "
                     border-radius: 50%;
                     background: rgba(50,50,50,0.7);"
-                    :style = "[((item.attributes.playParams.kind ?? item.type) != 'radioStation') ? {'margin': '140px',
+                    :style = "[(!(item.attributes.playParams.kind ?? item.type).includes('radioStation') && !(item.attributes.playParams.kind ?? item.type).includes('song')) ? {'margin': '140px',
                         width: '40px',
                         height: '40px',} :
                         {margin: '35px',
@@ -621,7 +623,7 @@
                 <div class="button" style = "
                 border-radius: 50%;
                 background: rgba(50,50,50,0.7);"
-                :style = "[((item.attributes.playParams.kind ?? item.type) != 'radioStation') ? {'margin': '140px',
+                :style = "[(!(item.attributes.playParams.kind ?? item.type).includes('radioStation') && !(item.attributes.playParams.kind ?? item.type).includes('song')) ? {'margin': '140px',
                     width: '40px',
                     height: '40px',} :
                     {margin: '35px',
@@ -648,7 +650,7 @@
                  <div class="button" style = "
                     border-radius: 50%;
                     background: rgba(50,50,50,0.7);"
-                    :style = "[((item.attributes.playParams.kind ?? item.type) != 'radioStation') ? {'margin': '140px',
+                    :style = "[(!(item.attributes.playParams.kind ?? item.type).includes('radioStation') && !(item.attributes.playParams.kind ?? item.type).includes('song')) ? {'margin': '140px',
                         width: '40px',
                         height: '40px',} :
                         {margin: '35px',
@@ -674,7 +676,7 @@
             <div class="button" style = "
                border-radius: 50%;
                background: rgba(50,50,50,0.7);"
-               :style = "[((item.attributes.playParams.kind ?? item.type) != 'radioStation') ? {'margin': '140px',
+               :style = "[(!(item.attributes.playParams.kind ?? item.type).includes('radioStation') && !(item.attributes.playParams.kind ?? item.type).includes('song')) ? {'margin': '140px',
                    width: '40px',
                    height: '40px',} :
                    {margin: '35px',
diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index f1c4347f..7cb42e7d 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -253,10 +253,12 @@ const app = new Vue({
             let id = item.attributes.playParams.id ?? item.id;
             let isLibrary = item.attributes.playParams.isLibrary ?? false;
             console.log(kind, id, isLibrary)
-            if(kind.toString() !== "radioStation")
+            if(!kind.toString().includes("radioStation") && !kind.toString().includes("song"))
             {app.page = (kind) + "_"+ (id); 
             console.log("oks");
-            app.getTypeFromID((kind),(id), (isLibrary));}
+            app.getTypeFromID((kind),(id), (isLibrary));} else {
+                app.playMediaItemById((kind),(id), (isLibrary), item.attributes.url ?? '')
+            }
         },
         async getTypeFromID(kind,id, isLibrary = false){
             
diff --git a/resources/cider-ui-tests/style.css b/resources/cider-ui-tests/style.css
index 1f135e0d..27539a60 100644
--- a/resources/cider-ui-tests/style.css
+++ b/resources/cider-ui-tests/style.css
@@ -721,6 +721,19 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 30%);
 }
 
+.playlist-artwork {
+    height: 190px;
+    width: 190px;
+    background: blue;
+    border-radius: 6px;
+    background: var(--artwork);
+    background-size: cover;
+    box-shadow: var(--mediaItemShadow);
+    flex: 0 0 auto; 
+    margin: 6px;
+    margin-top: 0px;
+}
+
 .media-item--small .text {
     font-weight: 600;
     font-size: 0.90em;