feat(webui): dialog to regenerate thumbnails if size has changed

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

@@ -27,6 +27,12 @@
       <v-card-actions>
         <v-spacer/>
         <v-btn text @click="dialogCancel">{{ buttonCancel || $t('common.cancel') }}</v-btn>
+        <v-btn v-if="buttonAlternate"
+               text
+               @click="dialogAlternate"
+               :disabled="confirmText && !confirmation"
+        >{{ buttonAlternate }}
+        </v-btn>
         <v-btn :color="buttonConfirmColor"
                @click="dialogConfirm"
                :disabled="confirmText && !confirmation"
@@ -78,6 +84,10 @@ export default Vue.extend({
       type: String,
       default: 'primary',
     },
+    buttonAlternate: {
+      type: String,
+      required: false,
+    },
   },
   watch: {
     value(val) {
@@ -96,6 +106,10 @@ export default Vue.extend({
       this.$emit('confirm')
       this.$emit('input', false)
     },
+    dialogAlternate() {
+      this.$emit('alternate')
+      this.$emit('input', false)
+    },
   },
 })
 </script>

komga-webui/src/locales/en.json

@@ -851,6 +851,13 @@
     "tab_title": "Server"
   },
   "server_settings": {
+    "dialog_regenerate_thumbnails": {
+      "body": "Thumbnails size has changed. Do you want to regenerate book thumbnails?",
+      "btn_alternate": "Yes, all books",
+      "btn_cancel": "No",
+      "btn_confirm": "Yes, but only if bigger",
+      "title": "Regenerate thumbnails"
+    },
     "label_delete_empty_collections": "Delete empty collections after scan",
     "label_delete_empty_readlists": "Delete empty read lists after scan",
     "label_rememberme_duration": "Remember me duration (in days)",

komga-webui/src/services/komga-books.service.ts

@@ -16,7 +16,7 @@ const qs = require('qs')
 const API_BOOKS = '/api/v1/books'
 
 export default class KomgaBooksService {
-  private http: AxiosInstance;
+  private http: AxiosInstance
 
   constructor(http: AxiosInstance) {
     this.http = http
@@ -38,7 +38,7 @@ export default class KomgaBooksService {
         params.read_status = readStatus
       }
       if (releasedAfter) {
-        params.released_after = formatISO(releasedAfter, { representation: 'date' })
+        params.released_after = formatISO(releasedAfter, {representation: 'date'})
       }
       return (await this.http.get(API_BOOKS, {
         params: params,
@@ -292,4 +292,20 @@ export default class KomgaBooksService {
       throw new Error(msg)
     }
   }
+
+  async regenerateThumbnails(forBiggerResultOnly: boolean) {
+    try {
+      await this.http.put(`${API_BOOKS}/thumbnails`, null, {
+        params: {
+          for_bigger_result_only: forBiggerResultOnly,
+        },
+      })
+    } catch (e) {
+      let msg = 'An error occurred while trying to regenerate thumbnails'
+      if (e.response.data.message) {
+        msg += `: ${e.response.data.message}`
+      }
+      throw new Error(msg)
+    }
+  }
 }

komga-webui/src/views/ServerSettings.vue

@@ -60,6 +60,17 @@
         </v-btn>
       </v-col>
     </v-row>
+
+    <confirmation-dialog
+      v-model="dialogRegenerateThumbnails"
+      :title="$t('server_settings.dialog_regenerate_thumbnails.title')"
+      :body="$t('server_settings.dialog_regenerate_thumbnails.body')"
+      :button-confirm="$t('server_settings.dialog_regenerate_thumbnails.btn_confirm')"
+      :button-alternate="$t('server_settings.dialog_regenerate_thumbnails.btn_alternate')"
+      :button-cancel="$t('server_settings.dialog_regenerate_thumbnails.btn_cancel')"
+      @confirm="regenerateThumbnails(true)"
+      @alternate="regenerateThumbnails(false)"
+    />
   </v-container>
 </template>
 
@@ -67,9 +78,11 @@
 import {ThumbnailSizeDto} from '@/types/komga-settings'
 import Vue from 'vue'
 import {minValue, required} from 'vuelidate/lib/validators'
+import ConfirmationDialog from '@/components/dialogs/ConfirmationDialog.vue'
 
 export default Vue.extend({
   name: 'ServerSettings',
+  components: {ConfirmationDialog},
   data: () => ({
     form: {
       deleteEmptyCollections: false,
@@ -78,6 +91,14 @@ export default Vue.extend({
       renewRememberMeKey: false,
       thumbnailSize: ThumbnailSizeDto.DEFAULT,
     },
+    existingSettings: {
+      deleteEmptyCollections: false,
+      deleteEmptyReadLists: false,
+      rememberMeDurationDays: 365,
+      renewRememberMeKey: false,
+      thumbnailSize: ThumbnailSizeDto.DEFAULT,
+    },
+    dialogRegenerateThumbnails: false,
   }),
   validations: {
     form: {
@@ -118,15 +139,13 @@ export default Vue.extend({
   methods: {
     async refreshSettings() {
       const settings = await (this.$komgaSettings.getSettings())
-      this.form.deleteEmptyCollections = settings.deleteEmptyCollections
-      this.form.deleteEmptyReadLists = settings.deleteEmptyReadLists
-      this.form.rememberMeDurationDays = settings.rememberMeDurationDays
-      this.form.renewRememberMeKey = false
-      this.form.thumbnailSize = settings.thumbnailSize
+      this.$_.merge(this.form, settings)
+      this.$_.merge(this.existingSettings, settings)
       this.$v.form.$reset()
     },
     async saveSettings() {
       const newSettings = {}
+      let thumbnailSizeHasChanged = false
       if (this.$v.form?.deleteEmptyCollections?.$dirty)
         this.$_.merge(newSettings, {deleteEmptyCollections: this.form.deleteEmptyCollections})
       if (this.$v.form?.deleteEmptyReadLists?.$dirty)
@@ -135,11 +154,20 @@ export default Vue.extend({
         this.$_.merge(newSettings, {rememberMeDurationDays: this.form.rememberMeDurationDays})
       if (this.$v.form?.renewRememberMeKey?.$dirty)
         this.$_.merge(newSettings, {renewRememberMeKey: this.form.renewRememberMeKey})
-      if (this.$v.form?.thumbnailSize?.$dirty)
+      if (this.$v.form?.thumbnailSize?.$dirty) {
         this.$_.merge(newSettings, {thumbnailSize: this.form.thumbnailSize})
+        thumbnailSizeHasChanged = this.existingSettings.thumbnailSize != this.form.thumbnailSize
+      }
 
       await this.$komgaSettings.updateSettings(newSettings)
       await this.refreshSettings()
+
+      if (thumbnailSizeHasChanged) {
+        this.dialogRegenerateThumbnails = true
+      }
+    },
+    regenerateThumbnails(forBiggerResultOnly: boolean) {
+      this.$komgaBooks.regenerateThumbnails(forBiggerResultOnly)
     },
   },
 })