From c70d769fe1a910d87e182d7c152283becb69da15 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Sat, 4 Dec 2021 16:14:55 -0800
Subject: [PATCH] adds notification for updating library

---
 resources/cider-ui-tests/index.html | 96 +++++++++++++++++------------
 resources/cider-ui-tests/style.css  | 18 ++++++
 2 files changed, 73 insertions(+), 41 deletions(-)

diff --git a/resources/cider-ui-tests/index.html b/resources/cider-ui-tests/index.html
index 6e8173d6..88c083c4 100644
--- a/resources/cider-ui-tests/index.html
+++ b/resources/cider-ui-tests/index.html
@@ -167,7 +167,8 @@
                 </transition>
                 <div class="app-sidebar-footer">
                     <input type="range" class="display--small">
-                    <button class="app-sidebar-button" style="width:100%" @click="chrome.menuOpened = !chrome.menuOpened">
+                    <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)}">
@@ -178,7 +179,9 @@
                         <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
                             <template v-if="chrome.userinfo.attributes">
                                 <div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name }}</div>
-                                <div class="handle-text text-overflow-elipsis">@{{ chrome.userinfo.attributes.handle }}</div>
+                                <div class="handle-text text-overflow-elipsis">@{{ chrome.userinfo.attributes.handle
+                                    }}
+                                </div>
                             </template>
                             <template v-else>
                                 Sign in
@@ -189,15 +192,21 @@
                         </div>
                     </button>
                 </div>
+                <div class="app-sidebar-notification" v-if="library.songs.downloadState == 1">
+                    Updating your library...<br>
+                    {{ library.songs.meta.progress }} / {{ library.songs.meta.total }}
+                </div>
             </div>
             <div id="app-content">
                 <!-- Browse -->
                 <transition name="wpfade">
                     <template v-if="page == 'browse'">
                         <div class="content-inner">
-                            <button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start MusicKit
+                            <button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start
+                                MusicKit
                             </button>
-                            <button id="apple-music-unauthorize" class="md-btn md-btn-primary" @click="unauthorize()">Stop
+                            <button id="apple-music-unauthorize" class="md-btn md-btn-primary" @click="unauthorize()">
+                                Stop
                                 MusicKit
                             </button>
                             <br>
@@ -243,7 +252,7 @@
                 <!-- Listen Now -->
                 <transition v-on:enter="getListenNow()" name="wpfade">
                     <template v-if="page == 'listen_now'" @created="console.log('listennow')">
-                         <cider-listen-now :data="listennow"></cider-listen-now>
+                        <cider-listen-now :data="listennow"></cider-listen-now>
                     </template>
                 </transition>
                 <!-- Radio -->
@@ -265,27 +274,27 @@
                 <!-- Library - Songs -->
                 <transition name="wpfade" v-on:enter="getLibrarySongsFull()">
                     <template v-if="page == 'library-songs'">
-                        <div class="content-inner">
+                        <div class="content-inner" v-if="library.songs.downloadState == 2">
                             <h1 class="header-text">Songs</h1>
-                            <template v-if="library.songs.downloadState == 1">
-                                <h1 style="text-align: center">Downloading...</h1>
-                                <h3 style="text-align: center">{{ library.songs.meta.progress }} / {{ library.songs.meta.total }}</h3>
-
-                            </template>
-                            <template v-if="library.songs.downloadState == 2">
-                                <div class="search-input-container" style="width:100%;margin: 16px 0px;">
-                                    <div class="search-input--icon"></div>
-                                    <input type="search"
-                                           style="width:100%;"
-                                           spellcheck="false"
-                                           placeholder="Search..."
-                                           @input="searchLibrarySongs"
-                                           v-model="library.songs.search"
-                                           class="search-input">
-                                </div>
-                                <mediaitem-list-item :item="item"
-                                                     v-for="item in library.songs.displayListing"></mediaitem-list-item>
-                            </template>
+                            <div class="search-input-container" style="width:100%;margin: 16px 0px;">
+                                <div class="search-input--icon"></div>
+                                <input type="search"
+                                       style="width:100%;"
+                                       spellcheck="false"
+                                       placeholder="Search..."
+                                       @input="searchLibrarySongs"
+                                       v-model="library.songs.search"
+                                       class="search-input">
+                            </div>
+                            <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>
@@ -302,7 +311,8 @@
                                        placeholder="Search..."
                                        class="search-input">
                             </div>
-                            <mediaitem-square-large :item="item" v-for="item in library.albums.listing"></mediaitem-square-large>
+                            <mediaitem-square-large :item="item"
+                                                    v-for="item in library.albums.listing"></mediaitem-square-large>
                         </div>
                     </template>
                 </transition>
@@ -347,15 +357,17 @@
                 </div>
             </div>
             <template v-if="recom.attributes.display.kind == 'MusicCoverShelf'">
-                <mediaitem-scroller-horizontal-large :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large>
+                <mediaitem-scroller-horizontal-large
+                        :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large>
             </template>
             <template v-else-if="recom.attributes.display.kind == 'MusicSuperHeroShelf'">
-            </template>    
+            </template>
             <template v-else>
-                <mediaitem-scroller-horizontal-sp :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-sp>    
+                <mediaitem-scroller-horizontal-sp
+                        :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-sp>
             </template>
         </template>
-    </div>    
+    </div>
 </script>
 
 <!-- Search -->
@@ -363,7 +375,7 @@
     <div class="content-inner">
         <div class="row">
             <div class="col-sm" style="width: auto;" v-if="getTopResult()">
-                <template >
+                <template>
                     <h3>Top Result</h3>
                     <mediaitem-square :item="getTopResult()"></mediaitem-square>
                 </template>
@@ -394,7 +406,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
+                        :items="search.results.albums.data.limit(10)"></mediaitem-scroller-horizontal>
             </template>
             <template v-if="search.results.artists">
                 <div class="row">
@@ -450,8 +463,8 @@
 <script type="text/x-template" id="mediaitem-scroller-horizontal-large">
     <template>
         <div class="cd-hmedia-scroller">
-            <mediaitem-square-large :item="item" 
-                              v-for="item in items"></mediaitem-square-large>
+            <mediaitem-square-large :item="item"
+                                    v-for="item in items"></mediaitem-square-large>
         </div>
     </template>
 </script>
@@ -461,8 +474,8 @@
 <script type="text/x-template" id="mediaitem-scroller-horizontal-sp">
     <template>
         <div class="cd-hmedia-scroller">
-            <mediaitem-square-sp :item="item" 
-                              v-for="item in items"></mediaitem-square-sp>
+            <mediaitem-square-sp :item="item"
+                                 v-for="item in items"></mediaitem-square-sp>
         </div>
     </template>
 </script>
@@ -485,7 +498,7 @@
                     <template v-if="item.attributes.artistName">
                         {{ item.attributes.artistName }}
                         <template v-if="item.attributes.albumName">
-                             - {{ item.attributes.albumName }}
+                            - {{ item.attributes.albumName }}
                         </template>
                     </template>
                 </div>
@@ -565,8 +578,8 @@
         <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-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>
@@ -577,8 +590,9 @@
             </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 ?? '')  }}
+                 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>
     </template>
diff --git a/resources/cider-ui-tests/style.css b/resources/cider-ui-tests/style.css
index 51fff955..87b184ec 100644
--- a/resources/cider-ui-tests/style.css
+++ b/resources/cider-ui-tests/style.css
@@ -205,6 +205,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     width: 100%;
 }
 
+.content-inner.centered {
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+}
 
 .app-drawer {
     width: 300px;
@@ -310,6 +317,17 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     text-align: left;
 }
 
+.app-sidebar-notification {
+    text-align: center;
+    font-size: 12px;
+    min-height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-top: 1px solid rgb(200 200 200 / 15%);
+    background: rgb(0 0 0 / 15%);
+}
+
 .app-sidebar-content {
     padding: 8px;
     overflow-y: scroll;