feat(webui): add UI setting to stretch poster to fit card

Closes: #1825

Author: gotson

komga-webui/src/components/ItemCard.vue

@@ -12,7 +12,8 @@
           :src="thumbnailUrl"
           :lazy-src="thumbnailError ? coverBase64 : undefined"
           aspect-ratio="0.7071"
-          contain
+          :contain="!isStretch"
+          :position="isStretch ? 'top' : undefined"
           @error="thumbnailError = true"
           @load="thumbnailError = false"
         >
@@ -272,6 +273,9 @@ export default Vue.extend({
     this.$eventHub.$off(THUMBNAILCOLLECTION_DELETED, this.thumbnailCollectionChanged)
   },
   computed: {
+    isStretch(): boolean {
+      return this.$store.getters.getClientSettingPosterStretch
+    },
     canReadPages(): boolean {
       return this.$store.getters.mePageStreaming && this.computedItem.type() === ItemTypes.BOOK
     },

komga-webui/src/locales/en.json

@@ -1027,6 +1027,7 @@
   "ui_settings": {
     "label_oauth2_auto_login": "Automatic OAuth2 login",
     "label_oauth2_hide_login": "Hide login fields if OAuth2 is enabled",
+    "label_poster_stretch": "Stretch poster to fit card",
     "tooltip_oauth2_auto_login": "Requires a single OAuth2 provider, and 'hide login fields' enabled"
   },
   "updates": {

komga-webui/src/plugins/komga-settings.plugin.ts

@@ -3,7 +3,7 @@ import _Vue from 'vue'
 import KomgaSettingsService from '@/services/komga-settings.service'
 import {Module} from 'vuex'
 import {LibraryDto} from '@/types/komga-libraries'
-import {ClientSettingDto} from '@/types/komga-clientsettings'
+import {CLIENT_SETTING, ClientSettingDto} from '@/types/komga-clientsettings'
 
 let service = KomgaSettingsService
 
@@ -15,6 +15,9 @@ const vuexModule: Module<any, any> = {
     getClientSettingByKey: (state) => (key: string) => {
       return state.clientSettings.find((it: ClientSettingDto) => it.key === key)
     },
+    getClientSettingPosterStretch(state): boolean {
+      return state.clientSettings.find((it: ClientSettingDto) => it.key === CLIENT_SETTING.WEBUI_POSTER_STRETCH)?.value === 'true'
+    },
   },
   mutations: {
     setClientSettings(state, settings) {

komga-webui/src/types/komga-clientsettings.ts

@@ -19,4 +19,5 @@ export interface ClientSettingUserUpdateDto {
 export enum CLIENT_SETTING {
   WEBUI_OAUTH2_HIDE_LOGIN = 'webui.oauth2.hide_login',
   WEBUI_OAUTH2_AUTO_LOGIN = 'webui.oauth2.auto_login',
+  WEBUI_POSTER_STRETCH = 'webui.poster.stretch'
 }

komga-webui/src/views/UISettings.vue

@@ -26,6 +26,13 @@
           </template>
 
         </v-checkbox>
+
+        <v-checkbox
+          v-model="form.posterStretch"
+          @change="$v.form.posterStretch.$touch()"
+          :label="$t('ui_settings.label_poster_stretch')"
+          hide-details
+        />
       </v-col>
     </v-row>
     <v-row>
@@ -48,27 +55,26 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import {helpers} from 'vuelidate/lib/validators'
 import ConfirmationDialog from '@/components/dialogs/ConfirmationDialog.vue'
 import FileBrowserDialog from '@/components/dialogs/FileBrowserDialog.vue'
 import {CLIENT_SETTING, ClientSettingDto} from '@/types/komga-clientsettings'
 
-const contextPath = helpers.regex('contextPath', /^\/[-a-zA-Z0-9_\/]*[a-zA-Z0-9]$/)
-
 export default Vue.extend({
   name: 'UISettings',
   components: {FileBrowserDialog, ConfirmationDialog},
   data: () => ({
     form: {
       oauth2HideLogin: false,
       oauth2AutoLogin: false,
+      posterStretch: false,
     },
     existingSettings: [] as ClientSettingDto[],
   }),
   validations: {
     form: {
       oauth2HideLogin: {},
       oauth2AutoLogin: {},
+      posterStretch: {},
     },
   },
   mounted() {
@@ -87,6 +93,7 @@ export default Vue.extend({
       await this.$store.dispatch('getClientSettings')
       this.form.oauth2HideLogin = this.$store.getters.getClientSettingByKey(CLIENT_SETTING.WEBUI_OAUTH2_HIDE_LOGIN)?.value === 'true'
       this.form.oauth2AutoLogin = this.$store.getters.getClientSettingByKey(CLIENT_SETTING.WEBUI_OAUTH2_AUTO_LOGIN)?.value === 'true'
+      this.form.posterStretch = this.$store.getters.getClientSettingByKey(CLIENT_SETTING.WEBUI_POSTER_STRETCH)?.value === 'true'
       this.$v.form.$reset()
     },
     async saveSettings() {
@@ -104,6 +111,13 @@ export default Vue.extend({
           allowUnauthorized: true,
         })
 
+      if (this.$v.form?.posterStretch?.$dirty)
+        await this.$komgaSettings.updateClientSettingGlobal({
+          key: CLIENT_SETTING.WEBUI_POSTER_STRETCH,
+          value: this.form.posterStretch ? 'true' : 'false',
+          allowUnauthorized: false,
+        })
+
       await this.refreshSettings()
     },
   },