From 9b8f515858656dfe6e638189c29df7f5d638f967 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Mon, 6 Dec 2021 14:29:17 -0800
Subject: [PATCH] Added library-songs caching, Added mediaitem-artwork element

---
 resources/cider-ui-tests/index.html | 257 +++++++++++++++++-----------
 resources/cider-ui-tests/index.js   |  28 ++-
 resources/cider-ui-tests/style.css  |  63 +++++--
 3 files changed, 229 insertions(+), 119 deletions(-)

diff --git a/resources/cider-ui-tests/index.html b/resources/cider-ui-tests/index.html
index a93a4be2..8b56cf83 100644
--- a/resources/cider-ui-tests/index.html
+++ b/resources/cider-ui-tests/index.html
@@ -99,7 +99,9 @@
                     <button class="playback-button--small queue"></button>
                 </div>
                 <div class="app-chrome-item generic">
-                    <button class="playback-button--small lyrics" @click="drawertest = !drawertest; lyricon =!lyricon; if(drawertest == true){loadLyrics();}"></button>
+                    <button class="playback-button--small lyrics"
+                            @click="drawertest = !drawertest; lyricon =!lyricon; if(drawertest == true){loadLyrics();}"
+                    ></button>
                 </div>
                 <div class="app-chrome-item full-height">
                     <div class="window-controls">
@@ -142,7 +144,8 @@
                     <div class="app-sidebar-header-text">
                         Playlists
                     </div>
-                    <button class="app-sidebar-item"  v-for="item in playlists.listing" :key="item.id" :href="item.href" @click='app.page=`playlist_` + item.id ; showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'>
+                    <button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id" :href="item.href"
+                            @click='app.page=`playlist_` + item.id ; showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'>
                         {{ item.attributes.name }}
                     </button>
                 </div>
@@ -170,10 +173,10 @@
                     <button class="app-sidebar-button" style="width:100%"
                             @click="chrome.menuOpened = !chrome.menuOpened">
                         <template v-if="chrome.userinfo.attributes">
-                            <div class="sidebar-user-icon"
-                                 :style="{'--artwork': getMediaItemArtwork(chrome.userinfo.attributes['artwork']['url'], 26)}">
+                            <img class="sidebar-user-icon" loading="lazy"
 
-                            </div>
+                                 :src="getMediaItemArtwork(chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : '', 26)"
+                            />
                         </template>
 
                         <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
@@ -195,19 +198,22 @@
                 <div class="app-sidebar-notification" v-if="library.songs.downloadState == 1">
                     <div>Updating your library...</div>
                     <div>{{ library.songs.meta.progress }} / {{ library.songs.meta.total }}</div>
-                    <div style="width: 100%"><progress style="width: 80%;" :value="library.songs.meta.progress" :max="library.songs.meta.total"></progress></div>
+                    <div style="width: 100%">
+                        <progress style="width: 80%;" :value="library.songs.meta.progress"
+                                  :max="library.songs.meta.total"></progress>
+                    </div>
                 </div>
             </div>
             <div id="app-content">
                 <!-- Playlist / Album page-->
-                <transition name="wpfade" >
-                    <template v-if="page.includes('playlist_')" >
-                      <cider-playlist :data="showingPlaylist"></cider-playlist>
+                <transition name="wpfade">
+                    <template v-if="page.includes('playlist_')">
+                        <cider-playlist :data="showingPlaylist"></cider-playlist>
                     </template>
                 </transition>
-                <transition name="wpfade" >
-                    <template v-if="page.includes('album_')" >
-                      <cider-playlist :data="showingPlaylist"></cider-playlist>
+                <transition name="wpfade">
+                    <template v-if="page.includes('album_')">
+                        <cider-playlist :data="showingPlaylist"></cider-playlist>
                     </template>
                 </transition>
                 </transition>
@@ -287,7 +293,7 @@
                 <!-- Library - Songs -->
                 <transition name="wpfade" v-on:enter="getLibrarySongsFull()">
                     <template v-if="page == 'library-songs'">
-                        <div class="content-inner" v-if="library.songs.downloadState == 2">
+                        <div class="content-inner">
                             <h1 class="header-text">Songs</h1>
                             <div class="search-input-container" style="width:100%;margin: 16px 0px;">
                                 <div class="search-input--icon"></div>
@@ -302,13 +308,6 @@
                             <mediaitem-list-item :item="item"
                                                  v-for="item in library.songs.displayListing"></mediaitem-list-item>
                         </div>
-                        <div class="content-inner" v-if="library.songs.downloadState == 0">
-                        </div>
-                        <div class="content-inner centered" v-if="library.songs.downloadState == 1">
-                            <h1 style="text-align: center">Updating your library</h1>
-                            <h3 style="text-align: center">{{ library.songs.meta.progress }} / {{
-                                library.songs.meta.total }}</h3>
-                        </div>
                     </template>
                 </transition>
                 <!-- Library - Albums -->
@@ -330,9 +329,11 @@
                     </template>
                 </transition>
             </div>
-            <div class="app-drawer" v-if="drawertest">
-                <lyrics-view v-if="drawertest && lyricon" :time="lyriccurrenttime" :lyrics="lyrics" ></lyrics-view>
-            </div>
+            <transition name="drawertransition">
+                <div class="app-drawer" v-if="drawertest">
+                    <lyrics-view v-if="drawertest && lyricon" :time="lyriccurrenttime" :lyrics="lyrics"></lyrics-view>
+                </div>
+            </transition>
         </div>
     </div>
     <transition name="wpfade">
@@ -347,6 +348,23 @@
 
 </div>
 
+<script type="text/x-template" id="mediaitem-artwork">
+    <template v-if="type == 'artists'">
+        <div class="mediaitem-artwork rounded"
+             >
+            <img :src="app.getMediaItemArtwork(url, size)"
+                 class="mediaitem-artwork--img">
+        </div>
+    </template>
+    <template v-else>
+        <div class="mediaitem-artwork"
+             >
+            <img :src="app.getMediaItemArtwork(url, size)"
+                 class="mediaitem-artwork--img">
+        </div>
+    </template>
+</script>
+
 <!-- Generic Collection of MediaItems -->
 <script type="text/x-template" id="collection-view-generic">
     <template>
@@ -387,22 +405,28 @@
 <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 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">
-                <div class="playlist-name">{{data.attributes.name ?? (data.attributes.title ?? '') ?? ''}}</div>
-                <div class="playlist-artist" v-if="data.attributes.artistName">{{data.attributes.artistName ??  ''}}</div>
-                <div class="playlist-desc" v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.short ?? (data.attributes.editorialNotes.standard ?? '') ) : (data.attributes.description ? (data.attributes.description.short ?? (data.attributes.description.standard ?? '')) : ''))"></div>
-            </div>    
-        </div>
-        <mediaitem-list-item :item="item"
-                            v-for="item in data.relationships.tracks.data"></mediaitem-list-item>
-        <div class="playlist-time" >{{app.getTotalTime()}}</div>
+            <div class="playlist-display row">
+                <div class="col-auto">
+                    <mediaitem-artwork
+                        :url="(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 ?? '':'')"
+                        size="200"
+                    ></mediaitem-artwork>
+                </div>
+                <div class="col playlist-info">
+                    <div class="playlist-name">{{data.attributes.name ?? (data.attributes.title ?? '') ?? ''}}</div>
+                    <div class="playlist-artist" v-if="data.attributes.artistName">{{data.attributes.artistName ??
+                        ''}}
+                    </div>
+                    <div class="playlist-desc"
+                         v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.short ?? (data.attributes.editorialNotes.standard ?? '') ) : (data.attributes.description ? (data.attributes.description.short ?? (data.attributes.description.standard ?? '')) : ''))"></div>
+                </div>
+            </div>
+            <mediaitem-list-item :item="item"
+                                 v-for="item in data.relationships.tracks.data"></mediaitem-list-item>
+            <div class="playlist-time">{{app.getTotalTime()}}</div>
         </template>
 
-    </div>    
+    </div>
 </script>
 
 <!-- Search -->
@@ -454,7 +478,7 @@
                     </div>
                 </div>
                 <mediaitem-square-large :item="item"
-                                  v-for="item in search.results.artists.data.limit(5)"></mediaitem-square-large>
+                                        v-for="item in search.results.artists.data.limit(5)"></mediaitem-square-large>
             </template>
             <template v-if="search.results.playlists">
                 <div class="row">
@@ -466,7 +490,7 @@
                     </div>
                 </div>
                 <mediaitem-square-large :item="item"
-                                  v-for="item in search.results.playlists.data.limit(10)"></mediaitem-square-large>
+                                        v-for="item in search.results.playlists.data.limit(10)"></mediaitem-square-large>
             </template>
         </template>
     </div>
@@ -521,10 +545,13 @@
     <template>
         <div @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-list-item">
-            <div class="artwork" v-if="item.attributes.artwork"
-                 :class="{'round': item.type == 'artists'}"
-                 :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork ? item.attributes.artwork.url : '', 34)}
-                "></div>
+            <div class="artwork">
+                <mediaitem-artwork
+                        :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                        size="34"
+                        :type="item.type"
+                ></mediaitem-artwork>
+            </div>
             <div class="info-rect">
                 <div class="title text-overflow-elipsis">
                     {{ item.attributes.name }}
@@ -550,10 +577,13 @@
     <template>
         <div @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-hrect">
-            <div class="artwork"
-                 :class="{'round': item.type == 'artists'}"
-                 :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 70)}
-                "></div>
+            <div class="artwork">
+                <mediaitem-artwork
+                        :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                        size="70"
+                        :type="item.type"
+                ></mediaitem-artwork>
+            </div>
             <div class="info-rect">
                 <div class="title text-overflow-elipsis">
                     {{ item.attributes.name }}
@@ -575,9 +605,13 @@
     <template>
         <div @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"
-                 :class="{'round': item.type == 'artists'}"
-                 :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300)}"></div>
+            <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>
@@ -594,45 +628,53 @@
     <template>
         <div style="position: relative; display: inline-flex;">
             <div @click.self='app.routeView(item)'
-                class="cd-mediaitem-square-large">
-                <div class="artwork"
-                    :class="{'round': item.type == 'artists'}"
-                    :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300)}"              
-                    >
+                 class="cd-mediaitem-square-large">
+                <div class="artwork">
+                    <mediaitem-artwork
+                            :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                            size="300"
+                            :type="item.type"
+                    ></mediaitem-artwork>
                 </div>
-                <div class="cd-mediaitem-square-large-overlay"  @click.self='app.routeView(item)'>
-                    <div class="button" style = "
+                <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
+                    <div class="button" style="
                     border-radius: 50%;
                     background: rgba(50,50,50,0.7);"
-                    :style = "[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
+                         :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
                         width: '40px',
                         height: '40px',} :
                         {margin: '35px',
                         width: '120px',
                         height: '120px',}]"
-                    @click="app.playMediaItem(item)">
-                    <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div>
+                         @click="app.playMediaItem(item)">
+                        <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
+                            <path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path>
+                        </svg>
+                    </div>
                 </div>
-                <div class="title text-overflow-elipsis"  @click='app.routeView(item)'>
+                <div class="title text-overflow-elipsis" @click='app.routeView(item)'>
                     {{ item.attributes.name ?? '' }}
                 </div>
                 <div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
                     {{ item.attributes.artistName ?? '' }}
                 </div>
-               
+
             </div>
-            <div class="cd-mediaitem-square-large-overlay"  @click.self='app.routeView(item)'>
-                <div class="button" style = "
+            <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
+                <div class="button" style="
                 border-radius: 50%;
                 background: rgba(50,50,50,0.7);"
-                :style = "[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
+                     :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
                     width: '40px',
                     height: '40px',} :
                     {margin: '35px',
                     width: '120px',
                     height: '120px',}]"
-                @click="app.playMediaItem(item)">
-                <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div>
+                     @click="app.playMediaItem(item)">
+                    <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
+                        <path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path>
+                    </svg>
+                </div>
             </div>
         </div>
     </template>
@@ -641,53 +683,63 @@
 <!-- MediaItem Square SP -->
 <script type="text/x-template" id="mediaitem-square-sp">
     <template>
-    <div style="position: relative; display: inline-flex;">
-        <div @click.self='app.routeView(item)'
-             class="cd-mediaitem-square-sp"
-             :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}">
-            <div class="artwork"
-                 :class="{'round': item.type == 'artists'}"
-                 :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300) }"></div>
-            <div class="cd-mediaitem-square-large-overlay"  @click.self='app.routeView(item)'>
-                 <div class="button" style = "
+        <div style="position: relative; display: inline-flex;">
+            <div @click.self='app.routeView(item)'
+                 class="cd-mediaitem-square-sp"
+                 :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}">
+                <div class="artwork">
+                    <mediaitem-artwork
+                            :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                            size="300"
+                            :type="item.type"
+                    ></mediaitem-artwork>
+                </div>
+                <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
+                    <div class="button" style="
                     border-radius: 50%;
                     background: rgba(50,50,50,0.7);"
-                    :style = "[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
+                         :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
                         width: '40px',
                         height: '40px',} :
                         {margin: '35px',
                         width: '120px',
                         height: '120px',}]"
-                    @click="app.playMediaItem(item)">
-                    <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div>
-            </div>     
-            <div class="title text-overflow-elipsis"
-                 :style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}"
-                 style="font-weight: 600">
-                {{ item.attributes.name }}
-            </div>
-            <div class="subtitle text-overflow-elipsis"
-                 :style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}"
-                 style="padding-left: 4px;padding-right: 4px; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;white-space: normal;">
-                {{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short
-                :(item.attributes.artistName ?? '') }}
-            </div>
+                         @click="app.playMediaItem(item)">
+                        <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
+                            <path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path>
+                        </svg>
+                    </div>
+                </div>
+                <div class="title text-overflow-elipsis"
+                     :style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}"
+                     style="font-weight: 600">
+                    {{ item.attributes.name }}
+                </div>
+                <div class="subtitle text-overflow-elipsis"
+                     :style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}"
+                     style="padding-left: 4px;padding-right: 4px; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;white-space: normal;">
+                    {{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short
+                    :(item.attributes.artistName ?? '') }}
+                </div>
 
-        </div>
-        <div class="cd-mediaitem-square-large-overlay"  @click.self='app.routeView(item)'>
-            <div class="button" style = "
+            </div>
+            <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
+                <div class="button" style="
                border-radius: 50%;
                background: rgba(50,50,50,0.7);"
-               :style = "[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
+                     :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
                    width: '40px',
                    height: '40px',} :
                    {margin: '35px',
                    width: '120px',
                    height: '120px',}]"
-               @click="app.playMediaItem(item)">
-               <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div>
-       </div>     
-    </div>
+                     @click="app.playMediaItem(item)">
+                    <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
+                        <path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path>
+                    </svg>
+                </div>
+            </div>
+        </div>
     </template>
 </script>
 <script type="text/x-template" id="lyrics-view">
@@ -699,13 +751,14 @@
                     {{ lyric.line }}
                     <div class="lyrics-translation" v-if="lyric.translation && lyric.translation != ''">
                         {{ lyric.translation }}
-                    <div>    
+                        <div>
                 </h3>
             </template>
             <template v-else>
-                <h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)" :start="lyric.startTime" :end="lyric.endTime"
+                <h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)" :start="lyric.startTime"
+                    :end="lyric.endTime"
                     v-bind:class="{ active: app.getLyricClass(lyric.startTime, lyric.endTime)}">
-                    <div class="lyricWaiting" >
+                    <div class="lyricWaiting">
                         <div class='WaitingDot1'></div>
                         <div class='WaitingDot2'></div>
                         <div class='WaitingDot3'></div>
diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index 44812331..83546e9e 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -1,3 +1,16 @@
+Vue.component('mediaitem-artwork', {
+    template: '#mediaitem-artwork',
+    props: ['size', 'url', 'type'],
+    methods: {
+        getArtworkStyle() {
+            return {
+                width: this.size + 'px',
+                height: this.size + 'px'
+            };
+        }
+    }
+});
+
 Vue.component('sidebar-library-item', {
     template: '#sidebar-library-item',
     props: ['name', 'page', 'cd-click'],
@@ -148,7 +161,9 @@ const app = new Vue({
             artworkReady: false,
             userinfo: {},
             menuOpened: false,
-            maximized: false
+            maximized: false,
+            drawerOpened: false,
+            drawerState: "queue"
         },
         page: "browse"
     },
@@ -322,6 +337,10 @@ const app = new Vue({
             if (this.library.songs.downloadState == 2 || this.library.songs.downloadState == 1) {
                 return
             }
+            if(localStorage.getItem("librarySongs") != null) {
+                this.library.songs.listing = JSON.parse(localStorage.getItem("librarySongs"))
+                this.library.songs.displayListing = this.library.songs.listing
+            }
             this.library.songs.downloadState = 1
 
             function downloadChunk() {
@@ -343,6 +362,10 @@ const app = new Vue({
                 self.library.songs.meta.progress = library.length
                 if(typeof downloaded.next == "undefined") {
                     console.log("downloaded.next is undefined")
+                    self.library.songs.listing = library
+                    self.library.songs.downloadState = 2
+                    self.searchLibrarySongs()
+                    localStorage.setItem("librarySongs", JSON.stringify(library))
                 }
                 if (downloaded.meta.total > library.length || typeof downloaded.meta.next != "undefined") {
                     console.log(`downloading next chunk - ${library.length} songs so far`)
@@ -351,6 +374,7 @@ const app = new Vue({
                     self.library.songs.listing = library
                     self.library.songs.downloadState = 2
                     self.searchLibrarySongs()
+                    localStorage.setItem("librarySongs", JSON.stringify(library))
                     console.log(library)
                 }
             }
@@ -741,7 +765,7 @@ const app = new Vue({
             }
         },
         getMediaItemArtwork(url, size = 64) {
-            return `url("${url.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', "cc")}")`;
+            return `${url.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', "cc")}`;
         },
         getNowPlayingArtworkBG(size = 600) {
             if (!this.mkReady()) {
diff --git a/resources/cider-ui-tests/style.css b/resources/cider-ui-tests/style.css
index 1c8a2ca3..a8b2f51a 100644
--- a/resources/cider-ui-tests/style.css
+++ b/resources/cider-ui-tests/style.css
@@ -1338,6 +1338,41 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     text-overflow: ellipsis;
 }
 
+.mediaitem-artwork {
+    border-radius: var(--mediaItemRadius);
+    overflow: hidden;
+    flex: 0 0 auto;
+    position:relative;
+    width: 100%;
+    height: 100%;
+}
+
+.mediaitem-artwork.rounded {
+    border-radius: 100%;
+}
+
+.mediaitem-artwork::after {
+    content: "";
+    box-shadow: var(--mediaItemShadow);
+    z-index: 1;
+    width:100%;
+    height:100%;
+    position: absolute;
+    top:0;
+    left:0;
+    border-radius: inherit;
+}
+
+.mediaitem-artwork.rounded::after {
+    border-radius: 100%;
+}
+
+.mediaitem-artwork>img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
 /* horizontal media scroller */
 .cd-hmedia-scroller {
     margin: 0 auto;
@@ -1375,14 +1410,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 .cd-mediaitem-list-item .artwork {
     height: 34px;
     width: 34px;
-    background: blue;
     border-radius: var(--mediaItemRadius);
-    background: var(--artwork);
-    background-size: contain;
-    box-shadow: var(--mediaItemShadow);
+    object-fit: cover;
+    object-position: center;
     flex: 0 0 auto;
     background-repeat: no-repeat;
     margin: 12px;
+    border: 0px;
+    outline: none;
 }
 
 .cd-mediaitem-list-item .artwork.round {
@@ -1439,7 +1474,6 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     border-radius: var(--mediaItemRadius);
     background: var(--artwork);
     background-size: contain;
-    box-shadow: var(--mediaItemShadow);
     flex: 0 0 auto;
     background-repeat: no-repeat;
     margin: 18px;
@@ -1493,8 +1527,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     border-top-right-radius: 6px;
     background: var(--artwork);
     background-size: cover;
-    box-shadow: var(--mediaItemShadow);
-    flex: 0 0 auto; 
+    flex: 0 0 auto;
     margin: 6px;
     margin-top: 0px;
 }
@@ -1507,8 +1540,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     border-top-right-radius: 6px;
     background: var(--artwork);
     background-size: cover;
-    box-shadow: var(--mediaItemShadow);
-    flex: 0 0 auto; 
+    flex: 0 0 auto;
     margin: 6px;
     margin-top: 0px;
 }
@@ -1581,8 +1613,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     border-top-right-radius: 6px;
     background: var(--artwork);
     background-size: cover;
-    box-shadow: var(--mediaItemShadow);
-    flex: 0 0 auto; 
+    flex: 0 0 auto;
     margin: 6px;
     margin-top: 0px;
 }
@@ -1709,6 +1740,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 .wpfade-leave-to {
     opacity: 0;
 }
+/* Transitions End */
 
 @media (prefers-color-scheme: light) {
     :root {
@@ -1731,13 +1763,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 
 .playlist-display {
     flex-wrap: nowrap;
+    margin-bottom: 32px;
 }
 
 .playlist-info{ 
     flex-shrink: unset;
 }
 
-.playlist-name {
+.playlist-info .playlist-name {
     font-weight: 700;
     font-size: 1.6rem;
     margin-bottom: 6px;
@@ -1745,21 +1778,21 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     flex-shrink: unset;
 
 }
-.playlist-artist {
+.playlist-info .playlist-artist {
     font-weight: 500;
     font-size: 1.6rem;
     margin-bottom: 6px;
     margin-right: 6px;
     flex-shrink: unset;
 }
-.playlist-desc {
+.playlist-info .playlist-desc {
     box-sizing: border-box;
     font-size: 1.1rem;
     flex-shrink: unset;
     margin-right: 5px;
 }
 
-.playlist-time {
+.playlist-info .playlist-time {
     margin: 6px;
     opacity: 0.7;
 }
\ No newline at end of file