Added file previews

owncloud · Mar 16, 2020 · 24dfe94 · 24dfe94
1 parent 48ceee7
commit 24dfe94
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 7 deletions.
diff --git a/apps/files/src/components/AllFilesList.vue b/apps/files/src/components/AllFilesList.vue
@@ -48,8 +48,13 @@
         <oc-star class="uk-display-block" @click.native.stop="toggleFileFavorite(item)" :shining="item.starred" />
       </div>
       <div class="uk-text-truncate uk-width-expand" :ref="index === 0 ? 'firstRowNameColumn' : null">
-        <oc-file @click.native.stop="item.type === 'folder' ? navigateTo(item.path.substr(1)) : openFileActionBar(item)"
-          :name="$_ocFileName(item)" :extension="item.extension" class="file-row-name" :icon="fileTypeIcon(item)"
+        <oc-file
+          @click.native.stop="item.type === 'folder' ? navigateTo(item.path.substr(1)) : openFileActionBar(item)"
+          :name="$_ocFileName(item)"
+          :extension="item.extension"
+          class="file-row-name"
+          :icon="fileTypeIcon(item)"
+          :iconUrl="previewUrl(item)"
           :filename="item.name" :key="item.id"/>
         <oc-spinner
           v-if="actionInProgress(item)"

diff --git a/apps/files/src/components/Collaborators/SharedFilesList.vue b/apps/files/src/components/Collaborators/SharedFilesList.vue
@@ -45,9 +45,15 @@
     </template>
     <template #rowColumns="{ item }">
       <div class="uk-text-truncate uk-width-expand">
-        <oc-file @click.native.stop="item.type === 'folder' ? navigateTo(item.path.substr(1)) : openFileActionBar(item)"
-          :name="item.basename" :extension="item.extension" class="file-row-name" :icon="fileTypeIcon(item)"
-          :filename="item.name" :key="item.path" />
+        <oc-file
+          @click.native.stop="item.type === 'folder' ? navigateTo(item.path.substr(1)) : openFileActionBar(item)"
+          :name="item.basename"
+          :extension="item.extension"
+          class="file-row-name"
+          :icon="fileTypeIcon(item)"
+          :iconUrl="previewUrl(item)"
+          :filename="item.name"
+          :key="item.path" />
         <oc-spinner
           v-if="actionInProgress(item)"
           size="small"

diff --git a/apps/files/src/components/Trashbin.vue b/apps/files/src/components/Trashbin.vue
@@ -33,8 +33,13 @@
         <template #rowColumns="{ item }">
           <div class="uk-text-truncate uk-width-expand">
             <oc-file
-              :name="$_ocTrashbin_fileName(item)" :extension="item.extension" class="file-row-name" :icon="fileTypeIcon(item)"
-              :filename="item.name" :key="item.id"/>
+              :name="$_ocTrashbin_fileName(item)"
+              :extension="item.extension"
+              class="file-row-name"
+              :icon="fileTypeIcon(item)"
+              :filename="item.name"
+              :key="item.id"
+            />
           </div>
           <div class="uk-text-meta uk-text-nowrap uk-width-small uk-text-right" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-hidden'  : _sidebarOpen }">
             {{ formDateFromNow(item.deleteTimestamp) }}

diff --git a/apps/files/src/mixins.js b/apps/files/src/mixins.js
@@ -2,6 +2,7 @@ import filesize from 'filesize'
 import pathUtil from 'path'
 import moment from 'moment'
 import fileTypeIconMappings from './fileTypeIconMappings.json'
+import queryString from 'query-string'
 import { mapActions, mapGetters } from 'vuex'
 const { default: PQueue } = require('p-queue')
 
@@ -46,6 +47,26 @@ export default {
 
     _sidebarOpen () {
       return this.highlightedFile !== null
+    },
+
+    isPreviewsEnabled () {
+      // FIXME: retrieve from capabilities when ready
+      return true
+    },
+
+    requestHeaders () {
+      if (!this.publicPage()) {
+        return null
+      }
+
+      const headers = new Headers()
+      headers.append('X-Requested-With', 'XMLHttpRequest')
+
+      const password = this.publicLinkPassword
+      if (password) {
+        headers.append('Authorization', 'Basic ' + Buffer.from('public:' + password).toString('base64'))
+      }
+      return headers
     }
   },
   methods: {
@@ -88,6 +109,52 @@ export default {
       }
       return 'x-office-document'
     },
+    loadPreviewUrl (file) {
+      if (!this.isPreviewsEnabled || file.type === 'folder') {
+        return null
+      }
+      const query = queryString.stringify({
+        x: this.thumbDimensions,
+        y: this.thumbDimensions,
+        c: file.etag,
+        scalingup: 0,
+        preview: 1,
+        a: 1
+      })
+
+      let previewPath
+      if (this.publicPage()) {
+        previewPath = [
+          '..',
+          'dav',
+          'public-files',
+          file.path
+        ].join('/')
+      } else {
+        previewPath = [
+          '..',
+          'dav',
+          'files',
+          this.$store.getters.user.id,
+          file.path
+        ].join('/')
+      }
+      const previewUrl = this.$client.files.getFileUrl(previewPath) + '?' + query
+      return this.mediaSource(previewUrl, 'url', this.requestHeaders)
+    },
+
+    previewUrl (file) {
+      if (!file._previewPromise) {
+        file._previewPromise = this.loadPreviewUrl(file)
+        if (file._previewPromise) {
+          file._previewPromise.then(imageUrl => {
+            file.previewData = imageUrl
+          })
+        }
+      }
+      return file.previewData
+    },
+
     label (string) {
       const cssClass = ['uk-label']