Add option to display page at native width

This helps with low-res content as it does not interpolate the image and
thus is sharper.

frontend/src/views/Reader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="reader" v-shortkey="{left: ['arrowleft'], right: ['arrowright']}" @shortkey="navigation">
     <div class="page-container">
-      <img ref="currentImage" :style="{ width: orientation === 'vertical' ? pageWidth + '%' : '100%' }" :src="info.pages[page]" @load="setScroll(); setOrientation()">
+      <img ref="currentImage" :style="{ width: getRealPageWidth() }" :src="info.pages[page]" @load="setScroll(); setOrientation()">
       <!-- prefetching -->
       <img style="display: none;" :src="info.pages[page-1]">
       <img style="display: none;" :src="info.pages[page+1]">
@@ -11,8 +11,10 @@
       <router-link :to="'/series/' + info.series">All Volumes</router-link>
       <p>{{ page + 1 }}/{{ info.pages.length }}</p>
       <p>
-        <button v-on:click="changePageWidth(5)">+</button>
-        <button v-on:click="changePageWidth(-5)">-</button>
+        <button :disabled="originalPageWidth" v-on:click="changePageWidth(-5)">-</button>
+        <button :disabled="originalPageWidth" v-on:click="changePageWidth(5)">+</button>
+        <br/>
+        <button v-on:click="originalPageWidth = !originalPageWidth">{{ originalPageWidth ? 'fixed width' : '1:1' }}</button>
       </p>
       <button v-on:click="changeDirection">{{ direction.toUpperCase() }}</button>
       <button class="hide" v-on:click="showSidebar = false">Hide</button>
@@ -33,6 +35,7 @@ export default {
       },
       scrollPositions: [],
       pageWidth: 60,
+      originalPageWidth: false,
       showSidebar: true,
       direction: 'rtl',
       orientation: 'vertical'
@@ -111,6 +114,18 @@ export default {
       } else if (image.width === image.height) {
         this.orientation = 'square'
       }
+    },
+
+    getRealPageWidth () {
+      if (this.orientation === 'horizontal') {
+        return '100%'
+      }
+
+      if (this.originalPageWidth === true) {
+        return 'auto'
+      }
+
+      return this.pageWidth + '%'
     }
   }
 }