feat(book reader): background color settings

closes #113
gotson · Mar 18, 2020 · 2c87e7b · 2c87e7b
1 parent a90b47c
commit 2c87e7b
Showing 1 changed file with 34 additions and 7 deletions.
diff --git a/komga-webui/src/views/BookReader.vue b/komga-webui/src/views/BookReader.vue
@@ -134,7 +134,9 @@
                          :transition="animations ? undefined : false"
                          :reverse-transition="animations ? undefined : false"
         >
-          <div class="full-height d-flex flex-column justify-center reader-background">
+          <div class="full-height d-flex flex-column justify-center"
+               :style="`background-color: ${backgroundColor}`"
+          >
             <div :class="`d-flex flex-row${flipDirection ? '-reverse' : ''} justify-center px-0 mx-0` ">
               <img :src="getPageUrl(p)"
                    :height="maxHeight"
@@ -180,6 +182,16 @@
           <v-list-item>
             <settings-switch v-model="animations" label="Page Transitions"></settings-switch>
           </v-list-item>
+
+          <v-list-item>
+            <settings-select
+              :items="backgroundColors"
+              v-model="backgroundColor"
+              label="Background color"
+            >
+            </settings-select>
+          </v-list-item>
+
           <v-list-item>
             <settings-select
               :items="readingDirs"
@@ -246,6 +258,7 @@ const cookieFit = 'webreader.fit'
 const cookieReadingDirection = 'webreader.readingDirection'
 const cookieDoublePages = 'webreader.doublePages'
 const cookieAnimations = 'webreader.animations'
+const cookieBackground = 'webreader.background'
 
 enum ImageFit {
   WIDTH = 'width',
@@ -280,7 +293,8 @@ export default Vue.extend({
         imageFits: Object.values(ImageFit),
         fit: ImageFit.HEIGHT,
         readingDirection: ReadingDirection.LEFT_TO_RIGHT,
-        animations: true
+        animations: true,
+        backgroundColor: 'black'
       },
       readingDirs: [
         { text: 'Left to right', value: ReadingDirection.LEFT_TO_RIGHT },
@@ -290,6 +304,10 @@ export default Vue.extend({
         { text: 'Fit to height', value: ImageFit.HEIGHT },
         { text: 'Fit to width', value: ImageFit.WIDTH },
         { text: 'Original', value: ImageFit.ORIGINAL }
+      ],
+      backgroundColors: [
+        { text: 'White', value: 'white' },
+        { text: 'Black', value: 'black' }
       ]
     }
   },
@@ -318,6 +336,11 @@ export default Vue.extend({
         this.imageFit = v
       }
     })
+    this.loadFromCookie(cookieBackground, (v) => {
+      if (v) {
+        this.backgroundColor = v
+      }
+    })
   },
   destroyed () {
     window.removeEventListener('keydown', this.keyPressed)
@@ -422,6 +445,15 @@ export default Vue.extend({
         this.$cookies.set(cookieFit, fit, Infinity)
       }
     },
+    backgroundColor: {
+      get: function (): string {
+        return this.settings.backgroundColor
+      },
+      set: function (color: string): void {
+        this.settings.backgroundColor = color
+        this.$cookies.set(cookieBackground, color, Infinity)
+      }
+    },
     doublePages: {
       get: function (): boolean {
         return this.settings.doublePages
@@ -601,11 +633,6 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-
-.reader-background {
-  background-color: white; /* TODO add a setting for this, some books might not be white */
-}
-
 .settings {
   /*position: absolute;*/
   z-index: 2;