Display vertical pages at full width

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 :style="{ width: pageWidth + '%' }" :src="info.pages[page]" @load="setScroll">
+      <img ref="currentImage" :style="{ width: orientation === 'vertical' ? pageWidth + '%' : '100%' }" :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]">
@@ -34,7 +34,8 @@ export default {
       scrollPositions: [],
       pageWidth: 60,
       showSidebar: true,
-      direction: 'rtl'
+      direction: 'rtl',
+      orientation: 'vertical'
     }
   },
   computed: {
@@ -98,6 +99,18 @@ export default {
       } else {
         throw new Error('cannot change reading direction: invalid direction currently set')
       }
+    },
+
+    setOrientation () {
+      let image = this.$refs.currentImage
+
+      if (image.width < image.height) {
+        this.orientation = 'vertical'
+      } else if (image.width > image.height) {
+        this.orientation = 'horizonal'
+      } else if (image.width === image.height) {
+        this.orientation = 'square'
+      }
     }
   }
 }