feat: preview size button

frontend/src/components/files/Preview.vue

@@ -9,6 +9,7 @@
         <span>{{ this.name }}</span>
       </div>
 
+      <preview-size-button v-if="isResizeEnabled && this.req.type === 'image'" @change-size="toggleSize" v-bind:size="fullSize" :disabled="loading"></preview-size-button>
       <button @click="openMore" id="more" :aria-label="$t('buttons.more')" :title="$t('buttons.more')" class="action">
         <i class="material-icons">more_vert</i>
       </button>
@@ -65,8 +66,9 @@
 <script>
 import { mapState } from 'vuex'
 import url from '@/utils/url'
-import { baseURL } from '@/utils/constants'
+import { baseURL, resizePreview } from '@/utils/constants'
 import { files as api } from '@/api'
+import PreviewSizeButton from '@/components/buttons/PreviewSize'
 import InfoButton from '@/components/buttons/Info'
 import DeleteButton from '@/components/buttons/Delete'
 import RenameButton from '@/components/buttons/Rename'
@@ -83,6 +85,7 @@ const mediaTypes = [
 export default {
   name: 'preview',
   components: {
+    PreviewSizeButton,
     InfoButton,
     DeleteButton,
     RenameButton,
@@ -95,7 +98,8 @@ export default {
       nextLink: '',
       listing: null,
       name: '',
-      subtitles: []
+      subtitles: [],
+      fullSize: false
     }
   },
   computed: {
@@ -110,7 +114,7 @@ export default {
       return `${baseURL}/api/raw${url.encodePath(this.req.path)}?auth=${this.jwt}`
     },
     previewUrl () {
-      if (this.req.type === 'image') {
+      if (this.req.type === 'image' && !this.fullSize) {
         return `${baseURL}/api/preview/big${url.encodePath(this.req.path)}?auth=${this.jwt}`
       }
       return `${baseURL}/api/raw${url.encodePath(this.req.path)}?auth=${this.jwt}`
@@ -120,6 +124,9 @@ export default {
     },
     showMore () {
       return this.$store.state.show === 'more'
+    },
+    isResizeEnabled () {
+      return resizePreview
     }
   },
   watch: {
@@ -206,6 +213,9 @@ export default {
     },
     resetPrompts () {
       this.$store.commit('closeHovers')
+    },
+    toggleSize () {
+      this.fullSize = !this.fullSize
     }
   }
 }