Merge pull request #3187 from owncloud/filelist-previews

Added file previews

apps/files/src/components/AllFilesList.vue

@@ -48,9 +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)"
-          :filename="item.name" :key="item.id"/>
+        <file-item
+          @click.native.stop="item.type === 'folder' ? navigateTo(item.path.substr(1)) : openFileActionBar(item)"
+          :item="item"
+          :dav-url="davUrl"
+          :show-path="$_isFavoritesList"
+          class="file-row-name"
+          :key="item.viewId"/>
         <oc-spinner
           v-if="actionInProgress(item)"
           size="small"
@@ -112,6 +116,7 @@
 <script>
 import FileList from './FileList.vue'
 import Indicators from './FilesLists/Indicators.vue'
+import FileItem from './FileItem.vue'
 import NoContentMessage from './NoContentMessage.vue'
 import { mapGetters, mapActions, mapState } from 'vuex'
 
@@ -127,6 +132,7 @@ export default {
   components: {
     FileList,
     Indicators,
+    FileItem,
     NoContentMessage,
     SortableColumnHeader
   },
@@ -188,6 +194,26 @@ export default {
       return Object.keys(shareTypes).map(shareType => parseInt(shareType, 10))
     },
 
+    davUrl () {
+      let davUrl
+      // FIXME: use SDK once it switches to DAV v2
+      if (this.publicPage()) {
+        davUrl = [
+          '..',
+          'dav',
+          'public-files'
+        ].join('/')
+      } else {
+        davUrl = [
+          '..',
+          'dav',
+          'files',
+          this.$store.getters.user.id
+        ].join('/')
+      }
+      return this.$client.files.getFileUrl(davUrl)
+    },
+
     $_isFavoritesList () {
       return (this.$route.name === 'files-favorites')
     },
@@ -269,14 +295,6 @@ export default {
         file: item
       })
     },
-    $_ocFileName (item) {
-      if (this.$_isFavoritesList) {
-        const pathSplit = item.path.substr(1).split('/')
-        if (pathSplit.length === 2) return `${pathSplit[pathSplit.length - 2]}/${item.basename}`
-        if (pathSplit.length > 2) return `…/${pathSplit[pathSplit.length - 2]}/${item.basename}`
-      }
-      return item.basename
-    },
 
     isActionEnabled (item, action) {
       return action.isEnabled(item, this.parentFolder)

apps/files/src/components/Collaborators/SharedFilesList.vue

@@ -45,9 +45,12 @@
     </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" />
+        <file-item
+          @click.native.stop="item.type === 'folder' ? navigateTo(item.path.substr(1)) : openFileActionBar(item)"
+          :item="item"
+          :dav-url="davUrl"
+          class="file-row-name"
+          :key="item.path" />
         <oc-spinner
           v-if="actionInProgress(item)"
           size="small"
@@ -110,6 +113,7 @@ import { mapGetters, mapActions } from 'vuex'
 import Mixins from '../../mixins'
 import FileActions from '../../fileactions'
 import FileList from '../FileList.vue'
+import FileItem from '../FileItem.vue'
 import NoContentMessage from '../NoContentMessage.vue'
 import SortableColumnHeader from '../FilesLists/SortableColumnHeader.vue'
 import { shareTypes } from '../../helpers/shareTypes'
@@ -119,6 +123,7 @@ export default {
   name: 'SharedFilesList',
   components: {
     FileList,
+    FileItem,
     NoContentMessage,
     SortableColumnHeader
   },
@@ -145,7 +150,19 @@ export default {
 
     $_isSharedWithMe () {
       return (this.$route.name === 'files-shared-with-me')
+    },
+
+    davUrl () {
+      // FIXME: use SDK once it switches to DAV v2
+      const davUrl = [
+        '..',
+        'dav',
+        'files',
+        this.$store.getters.user.id
+      ].join('/')
+      return this.$client.files.getFileUrl(davUrl)
     }
+
   },
   watch: {
     $route () {

apps/files/src/components/FileItem.vue

@@ -0,0 +1,111 @@
+<template>
+  <oc-file
+    :name="fileName"
+    :extension="item.extension"
+    :icon="previewIcon"
+    :iconUrl="previewUrl"
+    :filename="item.name"
+    :data-preview-loaded="previewLoaded"
+    />
+</template>
+<script>
+import queryString from 'query-string'
+import Mixins from '../mixins'
+
+export default {
+  name: 'FileItem',
+  mixins: [
+    Mixins
+  ],
+  props: {
+    item: {
+      type: Object
+    },
+    // override for file name
+    name: {
+      type: String
+    },
+    davUrl: {
+      type: String
+    },
+    showPath: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function () {
+    return {
+      previewUrl: this.item.previewUrl,
+      // 'false' while the preview is loading (needs string for Vue.js to render the attribute)
+      // true when the preview loading process is done,
+      // even if we fell back to the mime type icon
+      previewLoaded: 'false'
+    }
+  },
+  computed: {
+    fileName () {
+      if (this.name) {
+        return this.name
+      }
+      if (this.showPath) {
+        const pathSplit = this.item.path.substr(1).split('/')
+        if (pathSplit.length === 2) return `${pathSplit[pathSplit.length - 2]}/${this.item.basename}`
+        if (pathSplit.length > 2) return `…/${pathSplit[pathSplit.length - 2]}/${this.item.basename}`
+      }
+      return this.item.basename
+    },
+    previewIcon () {
+      return this.fileTypeIcon(this.item)
+    }
+  },
+  mounted () {
+    this.loadPreview()
+  },
+  methods: {
+    loadPreview () {
+      if (this.item.previewUrl) {
+        this.previewUrl = this.item.previewUrl
+        this.previewLoaded = true
+        return
+      }
+
+      // TODO: check if previews are globally enabled (requires capability entry)
+      // don't load previews for pending or rejected shares (status)
+      if (!this.davUrl || this.item.type === 'folder' || (typeof this.item.status !== 'undefined' && this.item.status !== 0)) {
+        this.previewLoaded = true
+        return
+      }
+
+      const query = {
+        x: this.thumbDimensions,
+        y: this.thumbDimensions,
+        scalingup: 0,
+        preview: 1,
+        a: 1
+      }
+
+      if (this.item.etag) {
+        // add etag for URL based caching
+        // strip double quotes from etag
+        query.c = this.item.etag.substr(2, this.item.etag.length - 2)
+      }
+
+      let itemPath = this.item.path
+      if (itemPath.charAt(0) === '/') {
+        itemPath = itemPath.substr(1)
+      }
+
+      const previewUrl = this.davUrl + '/' + this.encodePath(itemPath) + '?' + queryString.stringify(query)
+
+      this.mediaSource(previewUrl, 'url', this.requestHeaders).then(dataUrl => {
+        // cache inside item
+        this.previewUrl = this.item.previewUrl = dataUrl
+        this.previewLoaded = true
+      }).catch((e) => {
+        this.previewUrl = null
+        this.previewLoaded = true
+      })
+    }
+  }
+}
+</script>

apps/files/src/components/Trashbin.vue

@@ -32,9 +32,12 @@
         </template>
         <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"/>
+            <file-item
+              :item="item"
+              :name="$_ocTrashbin_fileName(item)"
+              class="file-row-name"
+              :key="item.viewId"
+            />
           </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) }}
@@ -58,6 +61,7 @@
 import { mapGetters, mapActions } from 'vuex'
 import Mixins from '../mixins'
 import FileList from './FileList.vue'
+import FileItem from './FileItem.vue'
 import NoContentMessage from './NoContentMessage.vue'
 import OcDialogPrompt from './ocDialogPrompt.vue'
 import SortableColumnHeader from './FilesLists/SortableColumnHeader.vue'
@@ -69,6 +73,7 @@ export default {
   components: {
     OcDialogPrompt,
     FileList,
+    FileItem,
     NoContentMessage,
     SortableColumnHeader
   },

apps/files/src/mixins.js

@@ -46,6 +46,21 @@ export default {
 
     _sidebarOpen () {
       return this.highlightedFile !== null
+    },
+
+    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: {

apps/files/src/store/mutations.js

@@ -265,6 +265,12 @@ export default {
 
   CLEAR_CURRENT_FILES_LIST (state) {
     state.currentFolder = null
+    // release blob urls
+    state.files.forEach(item => {
+      if (item.previewUrl && item.previewUrl.startsWith('blob:')) {
+        window.URL.revokeObjectURL(item.previewUrl)
+      }
+    })
     state.files = []
   }
 }

apps/media-viewer/src/Mediaviewer.vue

@@ -98,7 +98,8 @@ export default {
       const query = queryString.stringify({
         x: this.thumbDimensions,
         y: this.thumbDimensions,
-        c: this.activeMediaFile.etag,
+        // strip double quotes from etag
+        c: this.activeMediaFile.etag.substr(1, this.activeMediaFile.etag.length - 2),
         scalingup: 0,
         preview: 1,
         a: 1

changelog/unreleased/276

@@ -0,0 +1,7 @@
+Enhancement: Added thumbnails in file list
+
+Thumbnails are now displayed in the file list for known file types.
+When no thumbnail was returned, fall back to the file type icon.
+
+https://github.com/owncloud/phoenix/issues/276
+https://github.com/owncloud/phoenix/pull/3187

package.json

@@ -84,6 +84,7 @@
     "owncloud-design-system": "^1.1.1",
     "owncloud-sdk": "^1.0.0-523",
     "p-limit": "^2.2.1",
+    "p-queue": "^6.1.1",
     "parse-json": "^5.0.0",
     "path": "^0.12.7",
     "requirejs": "^2.3.6",

src/plugins/mediaSource.js

@@ -1,4 +1,5 @@
 import store from '../store'
+const { default: PQueue } = require('p-queue')
 
 export default {
   install (Vue) {
@@ -11,6 +12,10 @@ export default {
         headers.append('X-Requested-With', 'XMLHttpRequest')
 
         fetch(source, { headers }).then(response => {
+          if (!response.ok) {
+            reject(response)
+            return
+          }
           response.blob().then(blob => {
             if (returnAs === 'base64') {
               const reader = new FileReader()
@@ -44,9 +49,14 @@ export default {
     })
 
     Vue.mixin({
+      data: function () {
+        return {
+          mediaSourceQueue: new PQueue({ concurrency: 2 })
+        }
+      },
       methods: {
         mediaSource (source, returnAs = 'url', headers = null) {
-          return _mediaSource(source, returnAs, headers)
+          return this.mediaSourceQueue.add(() => _mediaSource(source, returnAs, headers))
         }
       }
     })

src/plugins/phoenix.js

@@ -100,6 +100,19 @@ export default {
          */
         isIE11 () {
           return !!window.MSInputMethodContext && !!document.documentMode
+        },
+        /**
+         * URI-Encodes a file path but keep the path slashes.
+         *
+         * @param path path
+         * @return encoded path
+         */
+        encodePath: function (path) {
+          if (!path) {
+            return path
+          }
+          var parts = path.split('/').map(part => encodeURIComponent(part))
+          return parts.join('/')
         }
       }
     })