Make page size configurable

src/i18n/en_US.json

@@ -359,6 +359,8 @@
   "settings.prompt.general.keybindings.update.success": "Keybind updated successfully. Press OK to relaunch Cider",
   "settings.option.general.themeUpdateNotification": "Automatically check for theme updates",
   "settings.option.general.showLovedTracksInline": "Show loved tracks inline",
+  "settings.option.general.pagination": "Items to show per page",
+  "settings.options.general.pagination.description": "This determines how many songs/albums to show initially for infinite scrolling, or how many songs/albums to show for a single page",
   "settings.description.search": "Search",
   "settings.description.albums": "Library Albums",
   "settings.description.artists": "Library Artists",

src/main/base/store.ts

@@ -161,7 +161,8 @@ export class Store {
             "playlists": {
                 "scroll": "infinite"
             },
-            "localPaths": []
+            "localPaths": [],
+            "pageSize": 250
         },
         "audio": {
             "volume": 1,

src/renderer/views/components/settings-window.ejs

@@ -1347,6 +1347,26 @@
                                     </label>
                                 </div>
                             </div>
+                            <div class="md-option-line">
+                                <div class="md-option-segment">
+                                    {{$root.getLz('settings.option.general.pagination')}}<br>
+                                    <small>
+                                        {{$root.getLz('settings.options.general.pagination.description')}}<br>
+                                    </small>
+                                </div>
+                                <div class="md-option-segment md-option-segment_auto">
+                                    <label>
+                                        <select class="md-select" style="width:180px;"
+                                                v-model.number="$root.cfg.libraryPrefs.pageSize" type="number">
+                                            <option value="50">50</option>
+                                            <option value="100">100</option>
+                                            <option value="250">250</option>
+                                            <option value="500">500</option>
+                                            <option value="1000">1000</option>
+                                        </select>
+                                    </label>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>

src/renderer/views/pages/cider-playlist.ejs

@@ -299,7 +299,7 @@
         props: ["data"],
 
         data: function () {
-            const pageSize = 250;
+            const pageSize = this.$root.cfg.libraryPrefs.pageSize;
             return {
                 editorialNotesExpanded: false,
                 drag: false,

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

@@ -81,7 +81,7 @@
     Vue.component('cider-library-albums', {
         template: '#cider-library-albums',
         data: function () {
-            const pageSize = 250;
+            const pageSize = this.$root.cfg.libraryPrefs.pageSize;
             return {
                 library: this.$root.library,
                 mediaItemSize: "compact",

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

@@ -87,7 +87,7 @@
     Vue.component('cider-library-songs', {
         template: '#cider-library-songs',
         data: function () {
-            const pageSize = 250;
+            const pageSize = this.$root.cfg.libraryPrefs.pageSize;
             return {
                 // currentPage is oneIndexed
                 library: this.$root.library,

src/renderer/views/pages/settings.ejs

@@ -1268,6 +1268,26 @@
                                 </label>
                             </div>
                         </div>
+                        <div class="md-option-line">
+                            <div class="md-option-segment">
+                                {{$root.getLz('settings.option.general.pagination')}}<br>
+                                <small>
+                                    {{$root.getLz('settings.options.general.pagination.description')}}<br>
+                                </small>
+                            </div>
+                            <div class="md-option-segment md-option-segment_auto">
+                                <label>
+                                    <select class="md-select" style="width:180px;"
+                                            v-model.number="$root.cfg.libraryPrefs.pageSize" type="number">
+                                        <option value="50">50</option>
+                                        <option value="100">100</option>
+                                        <option value="250">250</option>
+                                        <option value="500">500</option>
+                                        <option value="1000">1000</option>
+                                    </select>
+                                </label>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </b-tab>