feat: add image thumbnails support (#980)

* set max image preview size to 1080x1080px

frontend/src/components/files/ListingItem.vue

@@ -13,7 +13,8 @@
   :aria-label="name"
   :aria-selected="isSelected">
     <div>
-      <i class="material-icons">{{ icon }}</i>
+      <img v-if="type==='image'" :src="thumbnailUrl">
+      <i v-else class="material-icons">{{ icon }}</i>
     </div>
 
     <div>
@@ -30,6 +31,7 @@
 </template>
 
 <script>
+import { baseURL } from '@/utils/constants'
 import { mapMutations, mapGetters, mapState } from 'vuex'
 import filesize from 'filesize'
 import moment from 'moment'
@@ -44,7 +46,7 @@ export default {
   },
   props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
   computed: {
-    ...mapState(['selected', 'req', 'user']),
+    ...mapState(['selected', 'req', 'user', 'jwt']),
     ...mapGetters(['selectedCount']),
     isSelected () {
       return (this.selected.indexOf(this.index) !== -1)
@@ -69,6 +71,10 @@ export default {
       }
 
       return true
+    },
+    thumbnailUrl () {
+      const path = this.url.replace(/^\/files\//, '')
+      return `${baseURL}/api/preview/thumb/${path}?auth=${this.jwt}&inline=true`
     }
   },
   methods: {

frontend/src/components/files/Preview.vue

@@ -86,8 +86,14 @@ export default {
     download () {
       return `${baseURL}/api/raw${this.req.path}?auth=${this.jwt}`
     },
+    previewUrl () {
+      if (this.req.type === 'image') {
+        return `${baseURL}/api/preview/big${this.req.path}?auth=${this.jwt}`
+      }
+      return `${baseURL}/api/raw${this.req.path}?auth=${this.jwt}`
+    },
     raw () {
-      return `${this.download}&inline=true`
+      return `${this.previewUrl}&inline=true`
     }
   },
   async mounted () {

frontend/src/css/listing.css

@@ -52,6 +52,13 @@
   vertical-align: bottom;
 }
 
+#listing .item img {
+  width: 4em;
+  height: 4em;
+  margin-right: 0.1em;
+  vertical-align: bottom;
+}
+
 .message {
   text-align: center;
   font-size: 2em;
@@ -129,6 +136,11 @@
   font-size: 2em;
 }
 
+#listing.list .item div:first-of-type img {
+  width: 2em;
+  height: 2em;
+}
+
 #listing.list .item div:last-of-type {
   width: calc(100% - 3em);
   display: flex;