Thumbnail service redesign

changelog/unreleased/bugfix-load-only-supported-thumbnails

@@ -0,0 +1,6 @@
+Bugfix: Load only supported thumbnails (configurable)
+
+We've fixed a bug where web was trying to load thumbnails for files that are not supported.
+Due to configurable values, we avoid unnecessary requests.
+
+https://github.com/owncloud/web/pull/7474

config/config.json.sample-ocis

@@ -23,5 +23,13 @@
       "id": "settings",
       "path": "https://localhost:9200/settings.js"
     }
-  ]
+  ],
+  "options" : {
+    "previewFileMimeTypes" : [
+      "image/gif",
+      "image/png",
+      "image/jpeg",
+      "text/plain"
+    ]
+  }
 }

dev/docker/ocis.web.config.json

@@ -16,7 +16,13 @@
       "shares": {
         "showAllOnLoad": true
       }
-    }
+    },
+    "previewFileMimeTypes": [
+      "image/gif",
+      "image/png",
+      "image/jpeg",
+      "text/plain"
+    ]
   },
   "apps": [
     "files",

docs/getting-started.md

@@ -47,7 +47,7 @@ variables of the user object to come up with a user specific home path. This use
 substring of a value of the authenticated user. Examples are `/Shares`, `/{{.Id}}` and `/{{substr 0 3 .Id}}/{{.Id}`.
 - `options.disablePreviews` Set this option to `true` to disable previews in all the different file listing views. The only list view that is not affected
   by this is the trash bin, as that doesn't allow showing previews at all.
-- `options.previewFileExtensions` Specifies which filetypes will be previewed in the ui. For example to only preview jpg and txt files set this option to `["jpg", "txt"]`.
+- `options.previewFileMimeTypes` Specifies which mimeTypes will be previewed in the ui. For example to only preview jpg and text files set this option to `["image/jpeg", "text/plain"]`.
 - `options.disableFeedbackLink` Set this option to `true` to disable the feedback link in the topbar. Keeping it enabled (value `false` or absence of the option)
   allows ownCloud to get feedback from your user base through a dedicated survey website.
 - `options.feedbackLink` This accepts an object with the following optional fields to customize the feedback link in the topbar:

packages/web-app-files/src/index.js

@@ -136,12 +136,12 @@ export default {
         }
       ])
     )
-    // FIXME: Remove mock data
+    // FIXME: Use capability data only as soon as available
     thumbnailService.initialize(
       get(store, 'getters.capabilities.files.thumbnail', {
         enabled: true,
         version: 'v0.1',
-        supportedMimeTypes: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'text/plain']
+        supportedMimeTypes: store.getters.configuration?.options?.previewFileMimeTypes || []
       })
     )
   }

packages/web-app-files/src/services/thumbnail.ts

@@ -21,6 +21,10 @@ export class ThumbnailService {
   }
 
   public isMimetypeSupported(mimeType: string, onlyImages = false) {
+    if (!this.supportedMimeTypes.length) {
+      return true
+    }
+
     const mimeTypes = this.getSupportedMimeTypes(onlyImages ? 'image/' : null)
     return mimeTypes.includes(mimeType)
   }

packages/web-app-files/src/store/actions.ts

@@ -19,6 +19,7 @@ import { ShareTypes } from 'web-client/src/helpers/share'
 import { sortSpaceMembers } from '../helpers/space'
 import get from 'lodash-es/get'
 import { ClipboardActions } from '../helpers/clipboardActions'
+import { thumbnailService } from '../services'
 
 const allowSharePermissions = (getters) => {
   return get(getters, `capabilities.files_sharing.resharing`, true)
@@ -738,10 +739,7 @@ export default {
   },
 
   async loadPreview({ commit, rootGetters }, { resource, isPublic, dimensions, type }) {
-    if (
-      rootGetters.previewFileExtensions.length &&
-      !rootGetters.previewFileExtensions.includes(resource.extension.toLowerCase())
-    ) {
+    if (!thumbnailService.available || !thumbnailService.isMimetypeSupported(resource.mimeType)) {
       return
     }
 

packages/web-runtime/src/store/config.js

@@ -52,7 +52,7 @@ const state = {
         showAllOnLoad: false
       }
     },
-    previewFileExtensions: [],
+    previewFileMimeTypes: [],
     runningOnEos: false,
     cernFeatures: false,
     sharingRecipientsPerPage: 200
@@ -110,9 +110,9 @@ const getters = {
   configuration: (state) => {
     return state
   },
-  previewFileExtensions: (state) => {
-    const extensions = state.options.previewFileExtensions
-    return (Array.isArray(extensions) ? extensions : [])
+  previewFileMimeTypes: (state) => {
+    const mimeTypes = state.options.previewFileMimeTypes
+    return (Array.isArray(mimeTypes) ? mimeTypes : [])
       .filter(Boolean)
       .map((ext) => ext.toLowerCase())
   },