feat(webui): choose number of thumbnails to display in webreader

Closes: #1540

komga-webui/src/components/PageSizeSelect.vue

@@ -5,7 +5,7 @@
         <v-icon>mdi-view-grid-plus</v-icon>
       </v-btn>
     </template>
-    <v-list>
+    <v-list :dark="dark">
       <v-list-item-group v-model="selection">
 
         <v-list-item v-for="(item, index) in items"
@@ -38,6 +38,10 @@ export default Vue.extend({
       type: Number,
       required: true,
     },
+    dark: {
+      type: Boolean,
+      default: false,
+    },
   },
   watch: {
     value: {

komga-webui/src/components/dialogs/ThumbnailExplorerDialog.vue

@@ -9,6 +9,12 @@
           :total-visible="perPage"
           :length="Math.ceil(thumbnails.length/perPage)"
         ></v-pagination>
+
+        <page-size-select
+          v-model="perPage"
+          dark
+          :items="[10, 20, 50, 100]"
+        />
       </v-card-title>
       <v-card-text>
         <v-container fluid>
@@ -29,7 +35,7 @@
                 @click="input = false; goTo(((page - 1 ) * perPage + i + 1))"
                 style="cursor: pointer"
               />
-              <div class="white--text text-center font-weight-bold">{{ (page - 1 ) * perPage + i + 1 }}</div>
+              <div class="white--text text-center font-weight-bold">{{ (page - 1) * perPage + i + 1 }}</div>
             </div>
 
           </v-row>
@@ -42,9 +48,11 @@
 <script lang="ts">
 import Vue from 'vue'
 import {bookPageThumbnailUrl} from '@/functions/urls'
+import PageSizeSelect from '@/components/PageSizeSelect.vue'
 
 export default Vue.extend({
   name: 'ThumbnailExplorerDialog',
+  components: {PageSizeSelect},
   props: {
     pagesCount: {
       type: Number,
@@ -60,39 +68,45 @@ export default Vue.extend({
     return {
       input: '',
       page: 1,
-      perPage: 8,
+      perPage: 10,
     }
   },
   watch: {
-    value (val) {
+    value(val) {
       this.input = val
     },
-    input (val) {
+    input(val) {
       !val && this.$emit('input', false)
     },
+    perPage(val) {
+      this.$store.commit('setThumbnailsPageSize', val)
+    },
+  },
+  mounted() {
+    this.perPage = this.$store.state.persistedState.thumbnailsPageSize || this.perPage
   },
   computed: {
-    thumbnails (): string[] {
+    thumbnails(): string[] {
       let thumbnails = []
       for (let p = 1; p <= this.pagesCount; p++) {
         thumbnails.push(this.getThumbnailUrl(p))
       }
       return thumbnails
     },
-    visibleThumbnails (): String[] {
+    visibleThumbnails(): String[] {
       let a: number = (this.page - 1) * this.perPage
       let b: number = this.page * this.perPage
       return this.thumbnails.slice(a, b)
     },
   },
   methods: {
-    updateInput () {
+    updateInput() {
       this.$emit('input', this.input)
     },
-    goTo (page: number) {
+    goTo(page: number) {
       this.$emit('go', page)
     },
-    getThumbnailUrl (page: number): string {
+    getThumbnailUrl(page: number): string {
       return bookPageThumbnailUrl(this.bookId, page)
     },
   },

komga-webui/src/plugins/persisted-state.ts

@@ -22,6 +22,7 @@ export const persistedModule: Module<any, any> = {
     },
     epubreader: {},
     browsingPageSize: undefined as unknown as number,
+    thumbnailsPageSize: undefined as unknown as number,
     collection: {
       filter: {},
     },
@@ -119,6 +120,9 @@ export const persistedModule: Module<any, any> = {
     setBrowsingPageSize(state, val) {
       state.browsingPageSize = val
     },
+    setThumbnailsPageSize(state, val) {
+      state.thumbnailsPageSize = val
+    },
     setCollectionFilter(state, {id, filter}) {
       state.collection.filter[id] = filter
     },