feat(webui): add page margin option in webtoon reader

Closes: #1512

komga-webui/src/components/readers/ContinuousReader.vue

@@ -10,7 +10,7 @@
            :height="calcHeight(page)"
            :width="calcWidth(page)"
            :id="`page${page.number}`"
-           style="margin: 0 auto;"
+           :style="`margin: ${i === 0 ? 0 : pageMargin}px auto;`"
            v-intersect="onIntersect"
       />
     </div>
@@ -72,6 +72,10 @@ export default Vue.extend({
       type: Number,
       required: true,
     },
+    pageMargin: {
+      type: Number,
+      required: true,
+    },
   },
   watch: {
     pages: {

komga-webui/src/functions/shortcuts/continuous-reader.ts

@@ -4,4 +4,7 @@ export const shortcutsSettingsContinuous = [
   new Shortcut('bookreader.shortcuts.cycle_side_padding',
     (ctx: any) => ctx.cycleSidePadding()
     , 'p'),
+  new Shortcut('bookreader.shortcuts.cycle_page_margin',
+    (ctx: any) => ctx.cyclePageMargin()
+    , 'n'),
 ]

komga-webui/src/locales/en.json

@@ -95,6 +95,7 @@
     "beginning_of_book": "You're at the beginning of the book.",
     "changing_reading_direction": "Changing Reading Direction to",
     "cycling_page_layout": "Cycling Page Layout",
+    "cycling_page_margin": "Cycling Page Margin",
     "cycling_scale": "Cycling Scale",
     "cycling_side_padding": "Cycling Side Padding",
     "download_current_page": "Download current page",
@@ -137,6 +138,7 @@
       "general": "General",
       "gestures": "Gestures",
       "page_layout": "Page layout",
+      "page_margin": "Page margin",
       "paged": "Paginated Reader Options",
       "reading_mode": "Reading mode",
       "scale_type": "Scale type",
@@ -148,6 +150,7 @@
       "close": "Close",
       "cycle_page_layout": "Cycle page layout",
       "cycle_scale": "Cycle scale",
+      "cycle_page_margin": "Cycle page margin",
       "cycle_side_padding": "Cycle side padding",
       "first_page": "First page",
       "fullscreen": "Enter/exit full screen",

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

@@ -13,6 +13,7 @@ export const persistedModule: Module<any, any> = {
       continuous: {
         scale: '',
         padding: '',
+        margin: '',
       },
       readingDirection: '',
       swipe: false,
@@ -99,6 +100,9 @@ export const persistedModule: Module<any, any> = {
     setWebreaderContinuousPadding(state, val) {
       state.webreader.continuous.padding = val
     },
+    setWebreaderContinuousMargin(state, val) {
+      state.webreader.continuous.margin = val
+    },
     setWebreaderReadingDirection(state, val) {
       state.webreader.readingDirection = val
     },

komga-webui/src/types/enum-reader.ts

@@ -20,3 +20,4 @@ export enum PagedReaderLayout {
 }
 
 export const PaddingPercentage: number[] = [0, 5, 10, 15, 20, 25, 30, 35, 40]
+export const MarginValues: number[] = [0, 5, 10, 15]

komga-webui/src/views/DivinaReader.vue

@@ -129,6 +129,7 @@
         :animations="animations"
         :scale="continuousScale"
         :sidePadding="sidePadding"
+        :page-margin="pageMargin"
         @menu="toggleToolbars()"
         @jump-previous="jumpToPrevious()"
         @jump-next="jumpToNext()"
@@ -221,6 +222,13 @@
                   :label="$t('bookreader.settings.side_padding')"
                 />
               </v-list-item>
+              <v-list-item>
+                <settings-select
+                  :items="marginValues"
+                  v-model="pageMargin"
+                  :label="$t('bookreader.settings.page_margin')"
+                />
+              </v-list-item>
             </template>
 
             <template v-if="!continuousReader">
@@ -323,7 +331,7 @@ import Vue from 'vue'
 import {Location} from 'vue-router'
 import PagedReader from '@/components/readers/PagedReader.vue'
 import ContinuousReader from '@/components/readers/ContinuousReader.vue'
-import {ContinuousScaleType, PaddingPercentage, PagedReaderLayout, ScaleType} from '@/types/enum-reader'
+import {ContinuousScaleType, MarginValues, PaddingPercentage, PagedReaderLayout, ScaleType} from '@/types/enum-reader'
 import {
   shortcutsLTR,
   shortcutsRTL,
@@ -387,6 +395,7 @@ export default Vue.extend({
         scale: ScaleType.SCREEN,
         continuousScale: ContinuousScaleType.WIDTH,
         sidePadding: 0,
+        pageMargin: 0,
         readingDirection: ReadingDirection.LEFT_TO_RIGHT,
         backgroundColor: 'black',
       },
@@ -416,6 +425,10 @@ export default Vue.extend({
         text: x === 0 ? this.$i18n.t('bookreader.settings.side_padding_none').toString() : `${x}%`,
         value: x,
       })),
+      marginValues: Object.values(MarginValues).map(x => ({
+        text: x === 0 ? this.$i18n.t('bookreader.settings.side_padding_none').toString() : `${x}px`,
+        value: x,
+      })),
       backgroundColors: [
         {text: this.$t('bookreader.settings.background_colors.white').toString(), value: 'white'},
         {text: this.$t('bookreader.settings.background_colors.gray').toString(), value: '#212121'},
@@ -585,6 +598,17 @@ export default Vue.extend({
         }
       },
     },
+    pageMargin: {
+      get: function (): number {
+        return this.settings.pageMargin
+      },
+      set: function (margin: number): void {
+        if (MarginValues.includes(margin)) {
+          this.settings.pageMargin = margin
+          this.$store.commit('setWebreaderContinuousMargin', margin)
+        }
+      },
+    },
     backgroundColor: {
       get: function (): string {
         return this.settings.backgroundColor
@@ -822,6 +846,14 @@ export default Vue.extend({
         this.sendNotification(`${this.$t('bookreader.cycling_side_padding')}: ${text}`)
       }
     },
+    cyclePageMargin() {
+      if (this.continuousReader) {
+        const i = (MarginValues.indexOf(this.settings.pageMargin) + 1) % (MarginValues.length)
+        this.pageMargin = MarginValues[i]
+        const text = this.pageMargin === 0 ? this.$t('bookreader.settings.side_padding_none').toString() : `${this.pageMargin}px`
+        this.sendNotification(`${this.$t('bookreader.cycling_page_margin')}: ${text}`)
+      }
+    },
     cyclePageLayout() {
       if (this.continuousReader) return
       const enumValues = Object.values(PagedReaderLayout)