add pagination for library songs

src/renderer/assets/angles-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M77.25 256l137.4-137.4c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0l-160 160c-12.5 12.5-12.5 32.75 0 45.25l160 160C175.6 444.9 183.8 448 192 448s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25L77.25 256zM269.3 256l137.4-137.4c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0l-160 160c-12.5 12.5-12.5 32.75 0 45.25l160 160C367.6 444.9 375.8 448 384 448s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25L269.3 256z"/></svg>

src/renderer/assets/angles-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M246.6 233.4l-160-160c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L178.8 256l-137.4 137.4c-12.5 12.5-12.5 32.75 0 45.25C47.63 444.9 55.81 448 64 448s16.38-3.125 22.62-9.375l160-160C259.1 266.1 259.1 245.9 246.6 233.4zM438.6 233.4l-160-160c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L370.8 256l-137.4 137.4c-12.5 12.5-12.5 32.75 0 45.25C239.6 444.9 247.8 448 256 448s16.38-3.125 22.62-9.375l160-160C451.1 266.1 451.1 245.9 438.6 233.4z"/></svg>

src/renderer/assets/chevron-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"/></svg>

src/renderer/less/elements.less

@@ -162,6 +162,32 @@
   align-self: center;
 }
 
+.page-btn {
+  align-self: center;
+  height: 32px;
+}
+
+.page-btn img {
+  height: 100%;
+  align-self: center;
+}
+
+.md-ico-first {
+  content: url('./assets/angles-left.svg');
+}
+
+.md-ico-prev {
+  content: url('./assets/chevron-left.svg');
+}
+
+.md-ico-next {
+  content: url('./assets/chevron-right.svg');
+}
+
+.md-ico-last {
+  content: url('./assets/angles-right.svg');
+}
+
 .reload-btn {
   background: rgb(86 86 86 / 52%);
   border-radius: 100%;

src/renderer/style.css

@@ -10652,6 +10652,26 @@ fieldset:disabled .btn {
   margin-bottom: -1.5px;
   align-self: center;
 }
+.page-btn {
+  align-self: center;
+  height: 32px;
+}
+.page-btn img {
+  height: 100%;
+  align-self: center;
+}
+.md-ico-first {
+  content: url('./assets/angles-left.svg');
+}
+.md-ico-prev {
+  content: url('./assets/chevron-left.svg');
+}
+.md-ico-next {
+  content: url('./assets/chevron-right.svg');
+}
+.md-ico-last {
+  content: url('./assets/angles-right.svg');
+}
 .reload-btn {
   background: rgba(86, 86, 86, 0.52);
   border-radius: 100%;
@@ -16420,7 +16440,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   display: flex;
   justify-content: center;
   align-items: center;
-  --chromeHeight1: 60px;
+  --chromeHeight1: 70px;
 }
 .fullscreen-view .app-content-container {
   width: 100%;
@@ -16446,8 +16466,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   left: 0;
   right: 0;
   height: var(--chromeHeight1);
-  background: var(--color1);
-  backdrop-filter: var(--glassFilter);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -16458,8 +16476,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   border: 1px solid #323232;
   border-radius: 12px;
   display: flex;
-  height: 42px;
+  height: 55px;
   width: 90%;
+  backdrop-filter: var(--glassFilter);
 }
 .fullscreen-view .fs-header .top-nav-group .app-sidebar-item {
   background-color: #1e1e1e00;
@@ -16472,6 +16491,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   margin: 0px;
   height: 100%;
   position: relative;
+  font-size: 1.1em;
+  font-weight: 500;
 }
 .fullscreen-view .fs-header .top-nav-group .app-sidebar-item:before {
   --dist: 1px;
@@ -16812,10 +16833,25 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   font-size: 1.1em;
   font-weight: 380;
 }
+.fullscreen-view .cd-mediaitem-list-item .duration {
+  font-size: 1.2em;
+}
 .fullscreen-view .cd-mediaitem-list-item .artwork {
   width: 50px;
   height: 50px;
 }
+.fullscreen-view .cd-btn-seeall {
+  font-size: 1.2em;
+}
+.fullscreen-view h1 {
+  font-size: 3em;
+}
+.fullscreen-view h3 {
+  font-size: 1.5rem;
+}
+.fullscreen-view .home-page .well.artistfeed-well {
+  height: 512px;
+}
 .fullscreen-view .header-text {
   font-size: 3em;
   height: 3em;
@@ -16853,6 +16889,20 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   gap: 16px;
   margin-top: 40px;
 }
+.fullscreen-view .playlist-page .playlist-display .playlistInfo .playlist-hero {
+  transform: unset;
+}
+.fullscreen-view .artist-page .artist-header {
+  min-height: 60vh;
+}
+.fullscreen-view .artist-page .artist-image {
+  width: 20vh;
+  height: 20vh;
+  aspect-ratio: 1;
+}
+.fullscreen-view .artist-page.animated .artist-header {
+  min-height: 80vh;
+}
 .fullscreen-view .playlist-page .playlist-body {
   flex: 1;
 }

src/renderer/views/pages/library-songs.ejs

@@ -1,5 +1,3 @@
-
-
 <script type="text/x-template" id="cider-library-songs">
     <div class="content-inner library-page">
         <div class="library-header">
@@ -58,15 +56,52 @@
                     </button>
                 </div>
             </div>
+            <div class="row" style="margin-bottom: 16px">
+                <button
+                    class="col md-btn page-btn"
+                    :disabled="currentPage === 1"
+                    @click="goToPage(1)"
+                >
+                    <img class="md-ico-first"/>
+                </button>
+                <button
+                    class="col md-btn page-btn prev"
+                    :disabled="currentPage === 1"
+                    @click="goToPrevious()"
+                >
+                    <img class="md-ico-prev"/>
+                </button>
+                <button
+                    :class="`col md-btn page-btn${ isCurrentPage(page) ? ' md-btn-primary': ''}`"
+                    @click="goToPage(page)"
+                    v-for="page in pagesToShow">
+                    {{ page }}
+                </button>
+                <button
+                    class="col md-btn page-btn next"
+                    :disabled="currentPage === numPages"
+                    @click="goToNext()"
+                >
+                    <img class="md-ico-next"/>
+                </button>
+                <button
+                    class="col md-btn page-btn last"
+                    :disabled="currentPage === numPages"
+                    @click="goToEnd()"
+                >
+                    <img class="md-ico-last"/>
+                </button>
+            </div>
         </div>
 
         <div v-if="library.songs.downloadState == 3">Library contains no songs.</div>
         <div class="well" :key="1" v-if="prefs.size == 'compact'">
-            <mediaitem-list-item class-list="compact" :item="item" :parent="'librarysongs'" :index="index" :show-meta-data="true" :show-library-status="false" v-for="(item, index) in library.songs.displayListing"></mediaitem-list-item>
+            <mediaitem-list-item class-list="compact" :item="item" :parent="'librarysongs'" :index="index" :show-meta-data="true" :show-library-status="false" v-for="(item, index) in currentSlice"></mediaitem-list-item>
         </div>
         <div class="well" :key="2" v-else>
-            <mediaitem-list-item :item="item" :parent="'librarysongs'" :index="index" :show-meta-data="true" :show-library-status="false" v-for="(item, index) in library.songs.displayListing"></mediaitem-list-item>
+            <mediaitem-list-item :item="item" :parent="'librarysongs'" :index="index" :show-meta-data="true" :show-library-status="false" v-for="(item, index) in currentSlice"></mediaitem-list-item>
         </div>
+
     </div>
 </script>
 
@@ -75,21 +110,77 @@
         template: '#cider-library-songs',
         data: function () {
             return {
+                // currentPage is oneIndexed
+                currentPage: 1,
                 library: this.$root.library,
                 mediaItemSize: "compact",
+                pageSize: 250,
                 prefs: this.$root.cfg.libraryPrefs.songs,
-                app : this.$root
+                app: this.$root
             }
         },
         mounted() {
             this.$root.getLibrarySongsFull()
         },
+        computed: {
+            currentSlice: function () {
+                const startingPage = Math.min(this.numPages, this.currentPage);
+
+                return this.library.songs.displayListing.slice(
+                    (startingPage - 1) * this.pageSize,
+                    startingPage * this.pageSize
+                );
+            },
+            numPages: function () {
+                return Math.ceil(this.library.songs.displayListing.length / this.pageSize) || 1;
+
+            },
+            pagesToShow: function () {
+                let start = this.currentPage - 2;
+                let end = this.currentPage + 2;
+
+                if (start < 1) {
+                    end += (1 - start);
+                    start = 1;
+                }
+
+                const endDifference = end - this.numPages;
+
+                if (endDifference > 0) {
+                    end = this.numPages;
+                    start = Math.max(1, start - endDifference);
+                }
+
+                const array = [];
+                for (let idx = start; idx <= end; idx++) {
+                    array.push(idx);
+                }
+
+                return array;
+            }
+        },
         methods: {
-            sayHello: function () {
+            isCurrentPage: function (idx) {
-                alert('Hello world!');
+                return idx === this.currentPage ||
+                    idx === this.numPages && this.currentPage > this.numPages;
+            },
+            goToPage: function (page) {
+                this.currentPage = page;
+            },
+            goToPrevious: function () {
+                if (this.currentPage > 1) {
+                    this.currentPage -= 1;
+                }
+            },
+            goToNext: function () {
+                if (this.currentPage < this.numPages) {
+                    this.currentPage += 1;
+                }
+            },
+            goToEnd: function () {
+                this.currentPage = this.numPages;
             },
             play: function () {
-
                 function shuffleArray(array) {
                     for (var i = array.length - 1; i > 0; i--) {
                         var j = Math.floor(Math.random() * (i + 1));
@@ -101,11 +192,11 @@
 
                 let query = this.app.library.songs.displayListing.map(item => new MusicKit.MediaItem(item));
                 if (!app.mk.queue.isEmpty)
-                app.mk.queue.splice(0, app.mk.queue._itemIDs.length);
+                    app.mk.queue.splice(0, app.mk.queue._itemIDs.length);
                 app.mk.stop().then(() => {
-                  if (app.mk.shuffleMode == 1) {
+                    if (app.mk.shuffleMode == 1) {
-                                shuffleArray(query)
+                        shuffleArray(query)
-                            }
+                    }
                     app.mk.queue.append(query)
                     app.mk.changeToMediaAtIndex(0)
                 });