Added reload button for songs, albums

resources/cider-ui-tests/style.css

@@ -1358,6 +1358,28 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 
 /* Cider */
 
+.reload-btn {
+    background: rgb(86 86 86 / 52%);
+    border-radius: 100%;
+    width: 32px;
+    height: 32px;
+    border: 0px;
+    appearance: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.reload-btn:hover {
+    background: rgb(86 86 86 / 80%);
+    cursor: pointer;
+}
+
+.reload-btn>svg {
+    height: 50%;
+    color: #eee;
+}
+
 .wr-btn {
     font-family: inherit;
     appearance: none;

resources/cider-ui-tests/views/main.ejs

@@ -227,6 +227,7 @@
                     <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>

resources/cider-ui-tests/views/pages/library-albums.ejs

@@ -1,6 +1,13 @@
 <template v-if="page == 'library-albums'">
     <div class="content-inner">
-        <h1 class="header-text">Albums</h1>
+        <div class="row">
+            <div class="col" style="padding:0px;">
+                <h1 class="header-text">Albums</h1>
+            </div>
+            <div class="col-auto">
+                <button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
+            </div>
+        </div>
         <div class="row">
             <div class="col" style="padding:0px;">
                 <div class="search-input-container" style="width:100%;margin: 16px 0px;">

resources/cider-ui-tests/views/pages/library-songs.ejs

@@ -1,6 +1,13 @@
 <template v-if="page == 'library-songs'">
     <div class="content-inner">
-        <h1 class="header-text">Songs</h1>
+        <div class="row">
+            <div class="col" style="padding:0px;">
+                <h1 class="header-text">Songs</h1>
+            </div>
+            <div class="col-auto">
+                <button v-if="library.songs.downloadState == 2" @click="getLibrarySongsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
+            </div>
+        </div>
         <div class="row">
             <div class="col" style="padding:0px;">
                 <div class="search-input-container" style="width:100%;margin: 16px 0px;">

resources/cider-ui-tests/views/svg/redo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M500.33 0h-47.41a12 12 0 0 0-12 12.57l4 82.76A247.42 247.42 0 0 0 256 8C119.34 8 7.9 119.53 8 256.19 8.1 393.07 119.1 504 256 504a247.1 247.1 0 0 0 166.18-63.91 12 12 0 0 0 .48-17.43l-34-34a12 12 0 0 0-16.38-.55A176 176 0 1 1 402.1 157.8l-101.53-4.87a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12h200.33a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12z"/></svg>