both infinite and paging

src/i18n/en_US.json

@@ -88,6 +88,9 @@
   "term.size": "Size",
   "term.size.normal": "Normal",
   "term.size.compact": "Compact",
+  "term.scroll": "Scroll Mode",
+  "term.scroll.infinite": "Infinite",
+  "term.scroll.paged": "${songsPerPage} per page",
   "term.enable": "Enable",
   "term.disable": "Disable",
   "term.enabled": "Enabled",

src/main/base/store.ts

@@ -146,6 +146,7 @@ export class Store {
         },
         "libraryPrefs": {
             "songs": {
+                "scroll": "infinite",
                 "sort": "name",
                 "sortOrder": "asc",
                 "size": "normal"

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

@@ -46,6 +46,14 @@
                                 </optgroup>
                             </select>
                         </div>
+                        <div class="col">
+                            <select class="md-select" v-model="prefs.scroll">
+                                <optgroup :label="app.getLz('term.scroll')">
+                                    <option value="infinite">{{app.getLz('term.scroll.infinite')}}</option>
+                                    <option value="paged">{{app.getLz('term.scroll.paged').replace("${songsPerPage}", pageSize)}}</option>
+                                </optgroup>
+                            </select>
+                        </div>
                     </div>
                 </div>
                 <div class="col-auto flex-center">
@@ -56,7 +64,7 @@
                     </button>
                 </div>
             </div>
-            <div class="row" style="margin-bottom: 16px">
+            <div class="row" style="margin-bottom: 16px" v-if="!isInfinite">
                 <button
                     class="col md-btn page-btn"
                     :disabled="currentPage === 1"
@@ -104,7 +112,6 @@
         <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 currentSlice"></mediaitem-list-item>
         </div>
-
     </div>
 </script>
 
@@ -123,20 +130,53 @@
             }
         },
         mounted() {
+            document.querySelector("#app-content")
+                .addEventListener("scroll", this.handleScroll)
             this.$root.getLibrarySongsFull()
         },
+        destroyed() {
+            document.querySelector("#app-content")
+                .removeEventListener("scroll", this.handleScroll)
+        },
+        watch: {
+            'library.songs.displayListing.length': function () {
+                if (this.isInfinite) {
+                    // If a search reduces the number of things to show, we want to limit
+                    // the number of songs shown as well. This is to prevent you scrolling
+                    // to load your entire library, searching for one song, and then having
+                    // th re-render the entire library
+                    if (this.currentPage > this.numPages) {
+                        this.currentPage = this.numPages;
+                    }
+                }
+            },
+            'prefs.scroll': function () {
+                // When changing modes, set the page to 1. This is primarily to
+                // prevent going to a high page (e.g., 50) and then switching to infinite
+                // and showing 12.5k songs
+                this.currentPage = 1;
+            }
+        },
         computed: {
+            isInfinite: function () {
+                return this.prefs.scroll === "infinite"
+            },
             currentSlice: function () {
-                const startingPage = Math.min(this.numPages, this.currentPage);
+                if (this.isInfinite) {
+                    return this.library.songs.displayListing.slice(
+                        0, this.currentPage * this.pageSize
+                    );
+                } else {
+                    const startingPage = Math.min(this.numPages, this.currentPage);
 
-                return this.library.songs.displayListing.slice(
+                    return this.library.songs.displayListing.slice(
-                    (startingPage - 1) * this.pageSize,
+                        (startingPage - 1) * this.pageSize,
-                    startingPage * 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;
@@ -148,7 +188,6 @@
                 }
 
                 const endDifference = end - this.numPages;
-
                 if (endDifference > 0) {
                     end = this.numPages;
                     start = Math.max(1, start - endDifference);
@@ -158,14 +197,22 @@
                 for (let idx = start; idx <= end; idx++) {
                     array.push(idx);
                 }
-
                 return array;
             }
         },
         methods: {
+            // Infinite Scrolling
+            handleScroll: function (event) {
+                if (this.isInfinite &&
+                    this.currentPage < this.numPages &&
+                    event.target.scrollTop >= event.target.scrollHeight - event.target.clientHeight) {
+                    this.currentPage += 1;
+                }
+            },
+            // Pagination
             isCurrentPage: function (idx) {
                 return idx === this.currentPage ||
-                    idx === this.numPages && this.currentPage > this.numPages;
+                    (idx === this.numPages && this.currentPage > this.numPages);
             },
             changePage: function (event) {
                 const value = event.target.valueAsNumber;
@@ -190,6 +237,7 @@
             goToEnd: function () {
                 this.currentPage = this.numPages;
             },
+            // Miscellaneous
             play: function () {
                 function shuffleArray(array) {
                     for (var i = array.length - 1; i > 0; i--) {