From 205b73dfa9d049dbf0800bc1706e2446c2f77441 Mon Sep 17 00:00:00 2001 From: JanAckermann Date: Fri, 4 Mar 2022 12:42:35 +0100 Subject: [PATCH 01/16] Load preview in projects.vue --- .../src/views/spaces/Project.vue | 38 ++++++++++++++----- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue index 28563b5a2e9..7411d2646ca 100644 --- a/packages/web-app-files/src/views/spaces/Project.vue +++ b/packages/web-app-files/src/views/spaces/Project.vue @@ -16,7 +16,7 @@ :class="{ expanded: imageExpanded }" class="space-overview-image oc-cursor-pointer" alt="" - :src="'data:' + imageContent.mimeType + ';base64,' + imageContent.data" + :src="imageContent" @click="toggleImageExpanded" /> @@ -149,6 +149,7 @@ import sanitizeHtml from 'sanitize-html' import MixinAccessibleBreadcrumb from '../../mixins/accessibleBreadcrumb' import { bus } from 'web-pkg/src/instance' import { buildResource, buildSpace, buildWebDavSpacesPath } from '../../helpers/resources' +import { loadPreview } from '../../helpers/resource' import ResourceTable, { determineSortFields } from '../../components/FilesList/ResourceTable.vue' import { createLocationSpaces } from '../../router' import { usePagination, useSort } from '../../composables' @@ -312,6 +313,7 @@ export default { 'totalFilesSize', 'currentFileOutgoingCollaborators' ]), + ...mapGetters(['user', 'getToken']), selected: { get() { @@ -376,16 +378,32 @@ export default { const path = webDavPathComponents .slice(webDavPathComponents.indexOf(this.space.id) + 1) .join('/') - this.$client.files - .getFileContents(buildWebDavSpacesPath(this.space.id, path), { - responseType: 'arrayBuffer' - }) - .then((fileContents) => { - this.imageContent = { - data: Buffer.from(fileContents).toString('base64'), - mimeType: this.space.spaceImageData.file.mimeType - } + + if (val.file.mimeType === 'image/gif') { + this.$client.files + .getFileContents(buildWebDavSpacesPath(this.space.id, path), { + responseType: 'arrayBuffer' + }) + .then((fileContents) => { + this.imageContent = `data:image/gif;base64, ${Buffer.from(fileContents).toString( + 'base64' + )}` + }) + } else { + this.$client.files.fileInfo(buildWebDavSpacesPath(this.space.id, path)).then((data) => { + const resource = buildResource(data) + loadPreview({ + resource, + isPublic: false, + dimensions: ImageDimension.Preview, + server: this.configuration.server, + userId: this.user.id, + token: this.getToken + }).then((imageBlob) => { + this.imageContent = imageBlob + }) }) + } }, deep: true }, From 88bb35e884795140a41a826e2428f8b8e5d79af6 Mon Sep 17 00:00:00 2001 From: JanAckermann Date: Fri, 4 Mar 2022 13:00:30 +0100 Subject: [PATCH 02/16] load space image as preview in space details --- .../SideBar/Details/SpaceDetails.vue | 35 ++++++++++++++----- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue index 7c6d177fc70..6a88d0ee43a 100644 --- a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue +++ b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue @@ -3,7 +3,7 @@
- +
Date: Fri, 4 Mar 2022 16:18:20 +0100 Subject: [PATCH 03/16] Thumbnails for projects.vue --- .../SideBar/Details/SpaceDetails.vue | 1 - .../src/views/spaces/Projects.vue | 51 ++++++++++++------- 2 files changed, 34 insertions(+), 18 deletions(-) diff --git a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue index 6a88d0ee43a..7bceba6b3f9 100644 --- a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue +++ b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue @@ -109,7 +109,6 @@ export default { } else { const fileInfo = yield ref.$client.files.fileInfo(buildWebDavSpacesPath(ref.space.id, path)) const resource = buildResource(fileInfo) - console.log(resource) spaceImage.value = yield loadPreview({ resource, isPublic: false, diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue index 2e2edc7ce28..137b42348b1 100644 --- a/packages/web-app-files/src/views/spaces/Projects.vue +++ b/packages/web-app-files/src/views/spaces/Projects.vue @@ -73,12 +73,7 @@ { - this.$set(this.imageContentObject, space.id, { - fileId: space.spaceImageData.id, - data: Buffer.from(fileContents).toString('base64'), - mimeType: space.spaceImageData.file.mimeType + + if (space.spaceImageData.file.mimeType === 'image/gif') { + this.$client.files + .getFileContents(buildWebDavSpacesPath(space.id, path), { + responseType: 'arrayBuffer' + }) + .then((fileContents) => { + this.$set(this.imageContentObject, space.id, { + fileId: space.spaceImageData.id, + data: `data:image/gif;base64, ${Buffer.from(fileContents).toString('base64')}` + }) + }) + } else { + this.$client.files.fileInfo(buildWebDavSpacesPath(space.id, path)).then((fileInfo) => { + const resource = buildResource(fileInfo) + loadPreview({ + resource, + isPublic: false, + dimensions: ImageDimension.Preview, + server: this.configuration.server, + userId: this.user.id, + token: this.getToken + }).then((imageBlob) => { + this.$set(this.imageContentObject, space.id, { + fileId: space.spaceImageData.id, + data: imageBlob + }) }) }) + } } }, deep: true From 5e158a2caef6267ffd84c053b74484da679f39b1 Mon Sep 17 00:00:00 2001 From: JanAckermann Date: Fri, 4 Mar 2022 16:22:58 +0100 Subject: [PATCH 04/16] Add comments --- .../src/components/SideBar/Details/SpaceDetails.vue | 3 ++- packages/web-app-files/src/views/spaces/Project.vue | 3 ++- packages/web-app-files/src/views/spaces/Projects.vue | 1 + 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue index 7bceba6b3f9..b8687b10fec 100644 --- a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue +++ b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue @@ -100,7 +100,8 @@ export default { .slice(webDavPathComponents.indexOf(ref.space.id) + 1) .join('/') - if (ref.space?.spaceImageData.file.mimeType === 'image/gif') { + if (ref.space.spaceImageData.file.mimeType === 'image/gif') { + // TODO: Remove condition as soon https://github.com/owncloud/ocis/issues/3264 is done const fileContents = yield ref.$client.files.getFileContents( buildWebDavSpacesPath(ref.space.id, path), { responseType: 'arrayBuffer' } diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue index 7411d2646ca..bff9591308e 100644 --- a/packages/web-app-files/src/views/spaces/Project.vue +++ b/packages/web-app-files/src/views/spaces/Project.vue @@ -379,7 +379,8 @@ export default { .slice(webDavPathComponents.indexOf(this.space.id) + 1) .join('/') - if (val.file.mimeType === 'image/gif') { + if (this.space.spaceImageData.file.mimeType === 'image/gif') { + // TODO: Remove condition as soon https://github.com/owncloud/ocis/issues/3264 is done this.$client.files .getFileContents(buildWebDavSpacesPath(this.space.id, path), { responseType: 'arrayBuffer' diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue index 137b42348b1..b995364adb2 100644 --- a/packages/web-app-files/src/views/spaces/Projects.vue +++ b/packages/web-app-files/src/views/spaces/Projects.vue @@ -238,6 +238,7 @@ export default { .join('/') if (space.spaceImageData.file.mimeType === 'image/gif') { + // TODO: Remove condition as soon https://github.com/owncloud/ocis/issues/3264 is done this.$client.files .getFileContents(buildWebDavSpacesPath(space.id, path), { responseType: 'arrayBuffer' From dfc243abe5ca7a28a45c6eaaaafbb567303a65ec Mon Sep 17 00:00:00 2001 From: JanAckermann Date: Fri, 4 Mar 2022 17:01:04 +0100 Subject: [PATCH 05/16] Add checks if mimetype is supported by thumbnail service --- .../components/SideBar/Actions/SpaceActions.vue | 8 +++++++- packages/web-app-files/src/constants.ts | 10 ++++++++++ .../src/mixins/spaces/actions/setImage.js | 6 +++++- .../src/mixins/spaces/actions/uploadImage.js | 14 +++++++++++++- .../web-app-files/src/views/spaces/Project.vue | 7 ++++++- 5 files changed, 41 insertions(+), 4 deletions(-) diff --git a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue index 090f5f31859..c0b94c50d11 100644 --- a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue +++ b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue @@ -13,7 +13,7 @@ name="file" multiple tabindex="-1" - accept="image/*" + :accept="supportedSpaceImageMimeTypes" @change="$_uploadImage_uploadImageSpace" /> @@ -41,6 +41,7 @@ import UploadImage from '../../../mixins/spaces/actions/uploadImage' import EditQuota from '../../../mixins/spaces/actions/editQuota' import QuotaModal from '../../Spaces/QuotaModal.vue' import ReadmeContentModal from '../../../components/Spaces/ReadmeContentModal.vue' +import { ThumbnailService } from '../../../constants' export default { name: 'SpaceActions', @@ -80,6 +81,11 @@ export default { }, quotaModalIsOpen() { return this.$data.$_editQuota_modalOpen + }, + supportedSpaceImageMimeTypes() { + return ThumbnailService.SupportedMimeTypes.filter((mimeType) => + mimeType.startsWith('image/') + ).join(',') } }, methods: { diff --git a/packages/web-app-files/src/constants.ts b/packages/web-app-files/src/constants.ts index a9c9dd9c20d..e3f3e51ecec 100644 --- a/packages/web-app-files/src/constants.ts +++ b/packages/web-app-files/src/constants.ts @@ -12,3 +12,13 @@ export abstract class ImageType { static readonly Preview: string = 'preview' static readonly Avatar: string = 'avatar' } + +export abstract class ThumbnailService { + static readonly SupportedMimeTypes: Array = [ + 'image/png', + 'image/jpg', + 'image/jpeg', + 'image/gif', + 'text/plain' + ] +} diff --git a/packages/web-app-files/src/mixins/spaces/actions/setImage.js b/packages/web-app-files/src/mixins/spaces/actions/setImage.js index b5a9d45fe1e..2ae379d8fdd 100644 --- a/packages/web-app-files/src/mixins/spaces/actions/setImage.js +++ b/packages/web-app-files/src/mixins/spaces/actions/setImage.js @@ -3,6 +3,7 @@ import { clientService } from 'web-pkg/src/services' import { mapMutations, mapActions, mapGetters } from 'vuex' import { buildResource } from '../../../helpers/resources' import { bus } from 'web-pkg/src/instance' +import { ThumbnailService } from '../../../constants' export default { computed: { @@ -20,7 +21,7 @@ export default { if (resources.length !== 1) { return false } - if (!resources[0].mimeType?.startsWith('image/')) { + if (!this.$_setSpaceImage_supportedMimeTypes.includes(resources[0].mimeType)) { return false } return isLocationSpacesActive(this.$router, 'files-spaces-project') @@ -30,6 +31,9 @@ export default { class: 'oc-files-actions-set-space-image-trigger' } ] + }, + $_setSpaceImage_supportedMimeTypes: function () { + return ThumbnailService.SupportedMimeTypes.filter((mimeType) => mimeType.startsWith('image/')) } }, methods: { diff --git a/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js b/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js index 13fd2ec631d..41e056efc9a 100644 --- a/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js +++ b/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js @@ -1,6 +1,7 @@ import { mapActions, mapGetters, mapMutations, mapState } from 'vuex' import { clientService } from 'web-pkg/src/services' import { bus } from 'web-pkg/src/instance' +import { ThumbnailService } from '../../../constants' export default { data: function () { @@ -38,10 +39,21 @@ export default { this.$data.$_uploadImage_selectedSpace = resources[0] this.$refs.spaceImageInput.click() }, - $_uploadImage_uploadImageSpace(ev) { + $_uploadImage_uploadImageSpace: function (ev) { const graphClient = clientService.graphAuthenticated(this.configuration.server, this.getToken) const file = ev.currentTarget.files[0] + if ( + !ThumbnailService.SupportedMimeTypes.filter((mimeType) => + mimeType.startsWith('image/') + ).includes(file.type) + ) { + return this.showMessage({ + title: this.$gettext('Failed to upload space image'), + status: 'danger' + }) + } + const extraHeaders = {} if (file.lastModifiedDate) { extraHeaders['X-OC-Mtime'] = '' + file.lastModifiedDate.getTime() / 1000 diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue index bff9591308e..d472b63dc38 100644 --- a/packages/web-app-files/src/views/spaces/Project.vue +++ b/packages/web-app-files/src/views/spaces/Project.vue @@ -158,7 +158,7 @@ import ListInfo from '../../components/FilesList/ListInfo.vue' import Pagination from '../../components/FilesList/Pagination.vue' import ContextActions from '../../components/FilesList/ContextActions.vue' import MixinFileActions from '../../mixins/fileActions' -import { ImageDimension, ImageType } from '../../constants' +import { ImageDimension, ImageType, ThumbnailService } from '../../constants' import debounce from 'lodash-es/debounce' import { VisibilityObserver } from 'web-pkg/src/observer' import { clientService } from 'web-pkg/src/services' @@ -357,6 +357,11 @@ export default { }, readmeContentModalIsOpen() { return this.$data.$_editReadmeContent_modalOpen + }, + supportedSpaceImageMimeTypes() { + return ThumbnailService.SupportedMimeTypes.filter((mimeType) => + mimeType.startsWith('image/') + ).join(',') } }, watch: { From 49ab6d0f7e15e2d1722c17085e91f5370d7355f2 Mon Sep 17 00:00:00 2001 From: JanAckermann Date: Sat, 5 Mar 2022 14:05:16 +0100 Subject: [PATCH 06/16] Remove gif condition, as backend proceeds fast --- .../SideBar/Details/SpaceDetails.vue | 29 +++++-------- .../src/views/spaces/Project.vue | 37 ++++++---------- .../src/views/spaces/Projects.vue | 42 +++++++------------ 3 files changed, 36 insertions(+), 72 deletions(-) diff --git a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue index b8687b10fec..9ce5c4f26d5 100644 --- a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue +++ b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue @@ -100,25 +100,16 @@ export default { .slice(webDavPathComponents.indexOf(ref.space.id) + 1) .join('/') - if (ref.space.spaceImageData.file.mimeType === 'image/gif') { - // TODO: Remove condition as soon https://github.com/owncloud/ocis/issues/3264 is done - const fileContents = yield ref.$client.files.getFileContents( - buildWebDavSpacesPath(ref.space.id, path), - { responseType: 'arrayBuffer' } - ) - spaceImage.value = `data:image/gif;base64, ${Buffer.from(fileContents).toString('base64')}` - } else { - const fileInfo = yield ref.$client.files.fileInfo(buildWebDavSpacesPath(ref.space.id, path)) - const resource = buildResource(fileInfo) - spaceImage.value = yield loadPreview({ - resource, - isPublic: false, - dimensions: ImageDimension.Preview, - server: ref.configuration.server, - userId: ref.user.id, - token: ref.getToken - }) - } + const fileInfo = yield ref.$client.files.fileInfo(buildWebDavSpacesPath(ref.space.id, path)) + const resource = buildResource(fileInfo) + spaceImage.value = yield loadPreview({ + resource, + isPublic: false, + dimensions: ImageDimension.Preview, + server: ref.configuration.server, + userId: ref.user.id, + token: ref.getToken + }) }) return { loadImageTask, spaceImage } diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue index d472b63dc38..fdfd4af9003 100644 --- a/packages/web-app-files/src/views/spaces/Project.vue +++ b/packages/web-app-files/src/views/spaces/Project.vue @@ -384,32 +384,19 @@ export default { .slice(webDavPathComponents.indexOf(this.space.id) + 1) .join('/') - if (this.space.spaceImageData.file.mimeType === 'image/gif') { - // TODO: Remove condition as soon https://github.com/owncloud/ocis/issues/3264 is done - this.$client.files - .getFileContents(buildWebDavSpacesPath(this.space.id, path), { - responseType: 'arrayBuffer' - }) - .then((fileContents) => { - this.imageContent = `data:image/gif;base64, ${Buffer.from(fileContents).toString( - 'base64' - )}` - }) - } else { - this.$client.files.fileInfo(buildWebDavSpacesPath(this.space.id, path)).then((data) => { - const resource = buildResource(data) - loadPreview({ - resource, - isPublic: false, - dimensions: ImageDimension.Preview, - server: this.configuration.server, - userId: this.user.id, - token: this.getToken - }).then((imageBlob) => { - this.imageContent = imageBlob - }) + this.$client.files.fileInfo(buildWebDavSpacesPath(this.space.id, path)).then((data) => { + const resource = buildResource(data) + loadPreview({ + resource, + isPublic: false, + dimensions: ImageDimension.Preview, + server: this.configuration.server, + userId: this.user.id, + token: this.getToken + }).then((imageBlob) => { + this.imageContent = imageBlob }) - } + }) }, deep: true }, diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue index b995364adb2..41ba1334bb6 100644 --- a/packages/web-app-files/src/views/spaces/Projects.vue +++ b/packages/web-app-files/src/views/spaces/Projects.vue @@ -237,36 +237,22 @@ export default { .slice(webDavPathComponents.indexOf(space.id) + 1) .join('/') - if (space.spaceImageData.file.mimeType === 'image/gif') { - // TODO: Remove condition as soon https://github.com/owncloud/ocis/issues/3264 is done - this.$client.files - .getFileContents(buildWebDavSpacesPath(space.id, path), { - responseType: 'arrayBuffer' - }) - .then((fileContents) => { - this.$set(this.imageContentObject, space.id, { - fileId: space.spaceImageData.id, - data: `data:image/gif;base64, ${Buffer.from(fileContents).toString('base64')}` - }) - }) - } else { - this.$client.files.fileInfo(buildWebDavSpacesPath(space.id, path)).then((fileInfo) => { - const resource = buildResource(fileInfo) - loadPreview({ - resource, - isPublic: false, - dimensions: ImageDimension.Preview, - server: this.configuration.server, - userId: this.user.id, - token: this.getToken - }).then((imageBlob) => { - this.$set(this.imageContentObject, space.id, { - fileId: space.spaceImageData.id, - data: imageBlob - }) + this.$client.files.fileInfo(buildWebDavSpacesPath(space.id, path)).then((fileInfo) => { + const resource = buildResource(fileInfo) + loadPreview({ + resource, + isPublic: false, + dimensions: ImageDimension.Preview, + server: this.configuration.server, + userId: this.user.id, + token: this.getToken + }).then((imageBlob) => { + this.$set(this.imageContentObject, space.id, { + fileId: space.spaceImageData.id, + data: imageBlob }) }) - } + }) } }, deep: true From 247bfd28c2e5fe6977452e658313c4c7433bfd25 Mon Sep 17 00:00:00 2001 From: JanAckermann Date: Sat, 5 Mar 2022 14:11:50 +0100 Subject: [PATCH 07/16] Add changelog item --- .../unreleased/enhancement-load-space-images-as-preview | 5 +++++ packages/web-app-files/src/views/spaces/Project.vue | 2 ++ 2 files changed, 7 insertions(+) create mode 100644 changelog/unreleased/enhancement-load-space-images-as-preview diff --git a/changelog/unreleased/enhancement-load-space-images-as-preview b/changelog/unreleased/enhancement-load-space-images-as-preview new file mode 100644 index 00000000000..1d80c9cda07 --- /dev/null +++ b/changelog/unreleased/enhancement-load-space-images-as-preview @@ -0,0 +1,5 @@ +Enhancement: Load space images as preview + +We've added a new logic which renders space images as preview to minimize data traffic + +https://github.com/owncloud/web/pull/6529 diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue index fdfd4af9003..18af3ef4d09 100644 --- a/packages/web-app-files/src/views/spaces/Project.vue +++ b/packages/web-app-files/src/views/spaces/Project.vue @@ -85,11 +85,13 @@

{{ space.description }}

+
+
From 2cbf991977ee695e94d964e889d281147c598c99 Mon Sep 17 00:00:00 2001 From: JanAckermann Date: Mon, 7 Mar 2022 09:05:28 +0100 Subject: [PATCH 08/16] Remove uneccerssary multiple on input file --- .../src/components/SideBar/Actions/SpaceActions.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue index c0b94c50d11..cfd36e64072 100644 --- a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue +++ b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue @@ -11,7 +11,6 @@ ref="spaceImageInput" type="file" name="file" - multiple tabindex="-1" :accept="supportedSpaceImageMimeTypes" @change="$_uploadImage_uploadImageSpace" From 5dbdaf5ee888e07bca4243e24f9af8aad37f1ea3 Mon Sep 17 00:00:00 2001 From: JanAckermann Date: Mon, 7 Mar 2022 10:33:07 +0100 Subject: [PATCH 09/16] Adjustments according to PR review --- .../src/components/SideBar/Details/SpaceDetails.vue | 2 -- packages/web-app-files/src/constants.ts | 1 + .../web-app-files/src/mixins/spaces/actions/uploadImage.js | 2 +- packages/web-app-files/src/views/spaces/Project.vue | 5 ++--- 4 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue index 9ce5c4f26d5..4826e5e2424 100644 --- a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue +++ b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue @@ -72,8 +72,6 @@ import MixinResources from '../../../mixins/resources' import { mapActions, mapGetters } from 'vuex' import { useTask } from 'vue-concurrency' import { buildResource, buildWebDavSpacesPath } from '../../../helpers/resources' -import { useStore } from 'web-pkg/src/composables' -import { clientService } from 'web-pkg/src/services' import { spaceRoleManager } from '../../../helpers/share' import SpaceQuota from '../../SpaceQuota.vue' import { loadPreview } from '../../../helpers/resource' diff --git a/packages/web-app-files/src/constants.ts b/packages/web-app-files/src/constants.ts index e3f3e51ecec..15fc13c68a7 100644 --- a/packages/web-app-files/src/constants.ts +++ b/packages/web-app-files/src/constants.ts @@ -13,6 +13,7 @@ export abstract class ImageType { static readonly Avatar: string = 'avatar' } +// FIXME: Load supported mime types of the thumbnail service via capabilities export abstract class ThumbnailService { static readonly SupportedMimeTypes: Array = [ 'image/png', diff --git a/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js b/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js index 41e056efc9a..b4d1d1f701b 100644 --- a/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js +++ b/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js @@ -49,7 +49,7 @@ export default { ).includes(file.type) ) { return this.showMessage({ - title: this.$gettext('Failed to upload space image'), + title: this.$gettext('The file type is unsupported'), status: 'danger' }) } diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue index 18af3ef4d09..a9484a1fe93 100644 --- a/packages/web-app-files/src/views/spaces/Project.vue +++ b/packages/web-app-files/src/views/spaces/Project.vue @@ -315,7 +315,7 @@ export default { 'totalFilesSize', 'currentFileOutgoingCollaborators' ]), - ...mapGetters(['user', 'getToken']), + ...mapGetters(['user']), selected: { get() { @@ -393,8 +393,7 @@ export default { isPublic: false, dimensions: ImageDimension.Preview, server: this.configuration.server, - userId: this.user.id, - token: this.getToken + userId: this.user.id }).then((imageBlob) => { this.imageContent = imageBlob }) From c079a5685dbe51c6fa22e701442e1cf7fbd0325b Mon Sep 17 00:00:00 2001 From: JanAckermann Date: Mon, 7 Mar 2022 11:18:29 +0100 Subject: [PATCH 10/16] Restore token --- .../src/components/SideBar/Details/SpaceDetails.vue | 1 + packages/web-app-files/src/views/spaces/Project.vue | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue index 4826e5e2424..fda1a7f7755 100644 --- a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue +++ b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue @@ -100,6 +100,7 @@ export default { const fileInfo = yield ref.$client.files.fileInfo(buildWebDavSpacesPath(ref.space.id, path)) const resource = buildResource(fileInfo) + spaceImage.value = yield loadPreview({ resource, isPublic: false, diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue index a9484a1fe93..18af3ef4d09 100644 --- a/packages/web-app-files/src/views/spaces/Project.vue +++ b/packages/web-app-files/src/views/spaces/Project.vue @@ -315,7 +315,7 @@ export default { 'totalFilesSize', 'currentFileOutgoingCollaborators' ]), - ...mapGetters(['user']), + ...mapGetters(['user', 'getToken']), selected: { get() { @@ -393,7 +393,8 @@ export default { isPublic: false, dimensions: ImageDimension.Preview, server: this.configuration.server, - userId: this.user.id + userId: this.user.id, + token: this.getToken }).then((imageBlob) => { this.imageContent = imageBlob }) From ffd47be7b053f0348ecc873aa245e5001485fdb2 Mon Sep 17 00:00:00 2001 From: JanAckermann Date: Mon, 7 Mar 2022 11:21:18 +0100 Subject: [PATCH 11/16] Fix space image will not be refreshed while changed in space details actions --- .../src/components/SideBar/Details/SpaceDetails.vue | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue index fda1a7f7755..b6405046e1b 100644 --- a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue +++ b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue @@ -181,6 +181,15 @@ export default { ) } }, + watch: { + 'space.spaceImageData': { + handler: function (val) { + if (!val) return + this.loadImageTask.perform(this) + }, + deep: true + } + }, mounted() { this.loadImageTask.perform(this) }, From dd4ea6dcd989114b4d2beff4fc91d12df9c7d610 Mon Sep 17 00:00:00 2001 From: JanAckermann Date: Mon, 7 Mar 2022 13:39:14 +0100 Subject: [PATCH 12/16] Update snapshots --- .../unit/views/spaces/__snapshots__/Project.spec.js.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap index 48b24954bea..e6ff66f96d2 100644 --- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap +++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap @@ -6,7 +6,7 @@ exports[`Spaces project view space image should show if given 1`] = `
-
+
@@ -79,7 +79,7 @@ exports[`Spaces project view space readme should show if given 1`] = `
-
+
From 50d49a858c3dad7beea4e01bf1a170f436d4b4b2 Mon Sep 17 00:00:00 2001 From: JanAckermann Date: Mon, 7 Mar 2022 15:53:47 +0100 Subject: [PATCH 13/16] Implement thumbnail service --- .../SideBar/Actions/SpaceActions.vue | 11 +++++--- packages/web-app-files/src/constants.ts | 11 -------- packages/web-app-files/src/index.js | 10 ++++++- .../src/mixins/spaces/actions/setImage.js | 20 ++++++++++---- .../src/mixins/spaces/actions/uploadImage.js | 11 +++----- packages/web-app-files/src/services/index.ts | 1 + .../web-app-files/src/services/thumbnail.ts | 26 +++++++++++++++++++ .../src/views/spaces/Project.vue | 14 +++++----- 8 files changed, 70 insertions(+), 34 deletions(-) create mode 100644 packages/web-app-files/src/services/thumbnail.ts diff --git a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue index cfd36e64072..808e78b3a77 100644 --- a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue +++ b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue @@ -40,7 +40,7 @@ import UploadImage from '../../../mixins/spaces/actions/uploadImage' import EditQuota from '../../../mixins/spaces/actions/editQuota' import QuotaModal from '../../Spaces/QuotaModal.vue' import ReadmeContentModal from '../../../components/Spaces/ReadmeContentModal.vue' -import { ThumbnailService } from '../../../constants' +import { thumbnailService } from '../../../services' export default { name: 'SpaceActions', @@ -58,6 +58,9 @@ export default { UploadImage, EditQuota ], + data: function () { + return { thumbnailService } + }, computed: { ...mapGetters('Files', ['highlightedFile']), resources() { @@ -82,9 +85,9 @@ export default { return this.$data.$_editQuota_modalOpen }, supportedSpaceImageMimeTypes() { - return ThumbnailService.SupportedMimeTypes.filter((mimeType) => - mimeType.startsWith('image/') - ).join(',') + return thumbnailService.capability.supportedMimeTypes + .filter((mimeType) => mimeType.startsWith('image/')) + .join(',') } }, methods: { diff --git a/packages/web-app-files/src/constants.ts b/packages/web-app-files/src/constants.ts index 15fc13c68a7..a9c9dd9c20d 100644 --- a/packages/web-app-files/src/constants.ts +++ b/packages/web-app-files/src/constants.ts @@ -12,14 +12,3 @@ export abstract class ImageType { static readonly Preview: string = 'preview' static readonly Avatar: string = 'avatar' } - -// FIXME: Load supported mime types of the thumbnail service via capabilities -export abstract class ThumbnailService { - static readonly SupportedMimeTypes: Array = [ - 'image/png', - 'image/jpg', - 'image/jpeg', - 'image/gif', - 'text/plain' - ] -} diff --git a/packages/web-app-files/src/index.js b/packages/web-app-files/src/index.js index ccf5b0faffa..0dfb8419a9a 100644 --- a/packages/web-app-files/src/index.js +++ b/packages/web-app-files/src/index.js @@ -17,7 +17,7 @@ import quickActions from './quickActions' import store from './store' import { FilterSearch, SDKSearch } from './search' import { bus } from 'web-pkg/src/instance' -import { archiverService, Registry } from './services' +import { archiverService, thumbnailService, Registry } from './services' import fileSideBars from './fileSideBars' import { buildRoutes } from './router' import get from 'lodash-es/get' @@ -138,5 +138,13 @@ export default { store.getters.configuration.server || window.location.origin, get(store, 'getters.capabilities.files.archivers', []) ) + // FIXME: Remove mock data + thumbnailService.initialize( + get(store, 'getters.capabilities.files.thumbnail', { + enabled: true, + version: 'v0.1', + supportedMimeTypes: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'text/plain'] + }) + ) } } diff --git a/packages/web-app-files/src/mixins/spaces/actions/setImage.js b/packages/web-app-files/src/mixins/spaces/actions/setImage.js index 2ae379d8fdd..8bd8d537f6b 100644 --- a/packages/web-app-files/src/mixins/spaces/actions/setImage.js +++ b/packages/web-app-files/src/mixins/spaces/actions/setImage.js @@ -3,9 +3,14 @@ import { clientService } from 'web-pkg/src/services' import { mapMutations, mapActions, mapGetters } from 'vuex' import { buildResource } from '../../../helpers/resources' import { bus } from 'web-pkg/src/instance' -import { ThumbnailService } from '../../../constants' +import { thumbnailService } from '../../../services' export default { + data: function () { + return { + $_setSpaceImage_thumbnailService: thumbnailService + } + }, computed: { ...mapGetters(['configuration']), $_setSpaceImage_items() { @@ -21,7 +26,15 @@ export default { if (resources.length !== 1) { return false } - if (!this.$_setSpaceImage_supportedMimeTypes.includes(resources[0].mimeType)) { + if (!resources[0].mimeType) { + return false + } + if ( + !this.$data.$_setSpaceImage_thumbnailService.isMimetypeSupported( + resources[0].mimeType, + true + ) + ) { return false } return isLocationSpacesActive(this.$router, 'files-spaces-project') @@ -31,9 +44,6 @@ export default { class: 'oc-files-actions-set-space-image-trigger' } ] - }, - $_setSpaceImage_supportedMimeTypes: function () { - return ThumbnailService.SupportedMimeTypes.filter((mimeType) => mimeType.startsWith('image/')) } }, methods: { diff --git a/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js b/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js index b4d1d1f701b..13cb6a2dc4f 100644 --- a/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js +++ b/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js @@ -1,12 +1,13 @@ import { mapActions, mapGetters, mapMutations, mapState } from 'vuex' import { clientService } from 'web-pkg/src/services' import { bus } from 'web-pkg/src/instance' -import { ThumbnailService } from '../../../constants' +import { thumbnailService } from '../../../services' export default { data: function () { return { - $_uploadImage_selectedSpace: null + $_uploadImage_selectedSpace: null, + $_uploadImage_thumbnailService: thumbnailService } }, computed: { @@ -43,11 +44,7 @@ export default { const graphClient = clientService.graphAuthenticated(this.configuration.server, this.getToken) const file = ev.currentTarget.files[0] - if ( - !ThumbnailService.SupportedMimeTypes.filter((mimeType) => - mimeType.startsWith('image/') - ).includes(file.type) - ) { + if (!this.$data.$_uploadImage_thumbnailService.isMimetypeSupported(file.type, true)) { return this.showMessage({ title: this.$gettext('The file type is unsupported'), status: 'danger' diff --git a/packages/web-app-files/src/services/index.ts b/packages/web-app-files/src/services/index.ts index 49585377684..9d90901a517 100644 --- a/packages/web-app-files/src/services/index.ts +++ b/packages/web-app-files/src/services/index.ts @@ -1,3 +1,4 @@ export * from './archiver' +export * from './thumbnail' export * from './cache' export { default as Registry } from './registry' diff --git a/packages/web-app-files/src/services/thumbnail.ts b/packages/web-app-files/src/services/thumbnail.ts new file mode 100644 index 00000000000..cb8ba618460 --- /dev/null +++ b/packages/web-app-files/src/services/thumbnail.ts @@ -0,0 +1,26 @@ +interface ThumbnailCapability { + enabled: boolean + version: string // version is just a major version, e.g. `v2` + supportedMimeTypes: string[] +} + +export class ThumbnailService { + serverUrl: string + capability?: ThumbnailCapability + + public initialize(thumbnailCapability: ThumbnailCapability): void { + this.capability = thumbnailCapability + } + + public get available(): boolean { + return !!this.capability?.version + } + + public isMimetypeSupported(mimeType: string, onlyImages = false) { + return onlyImages + ? mimeType.startsWith('image/') && this.capability.supportedMimeTypes.includes(mimeType) + : this.capability.supportedMimeTypes.includes(mimeType) + } +} + +export const thumbnailService = new ThumbnailService() diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue index 18af3ef4d09..0c55c15b34f 100644 --- a/packages/web-app-files/src/views/spaces/Project.vue +++ b/packages/web-app-files/src/views/spaces/Project.vue @@ -49,7 +49,7 @@ name="file" multiple tabindex="-1" - accept="image/*" + :accept="supportedSpaceImageMimeTypes" @change="$_uploadImage_uploadImageSpace" />
    @@ -160,7 +160,7 @@ import ListInfo from '../../components/FilesList/ListInfo.vue' import Pagination from '../../components/FilesList/Pagination.vue' import ContextActions from '../../components/FilesList/ContextActions.vue' import MixinFileActions from '../../mixins/fileActions' -import { ImageDimension, ImageType, ThumbnailService } from '../../constants' +import { ImageDimension, ImageType } from '../../constants' import debounce from 'lodash-es/debounce' import { VisibilityObserver } from 'web-pkg/src/observer' import { clientService } from 'web-pkg/src/services' @@ -176,6 +176,7 @@ import EditQuota from '../../mixins/spaces/actions/editQuota' import EditReadmeContent from '../../mixins/spaces/actions/editReadmeContent' import QuotaModal from '../../components/Spaces/QuotaModal.vue' import ReadmeContentModal from '../../components/Spaces/ReadmeContentModal.vue' +import { thumbnailService } from '../../services' const visibilityObserver = new VisibilityObserver() @@ -303,7 +304,8 @@ export default { showMarkdownCollapse: false, markdownResizeObserver: new ResizeObserver(this.onMarkdownResize), imageExpanded: false, - imageContent: null + imageContent: null, + thumbnailService } }, computed: { @@ -361,9 +363,9 @@ export default { return this.$data.$_editReadmeContent_modalOpen }, supportedSpaceImageMimeTypes() { - return ThumbnailService.SupportedMimeTypes.filter((mimeType) => - mimeType.startsWith('image/') - ).join(',') + return thumbnailService.capability.supportedMimeTypes + .filter((mimeType) => mimeType.startsWith('image/')) + .join(',') } }, watch: { From 2f5626aa069e0cea8a2a3654b6be02abc81bb1a1 Mon Sep 17 00:00:00 2001 From: JanAckermann Date: Mon, 7 Mar 2022 16:30:22 +0100 Subject: [PATCH 14/16] Update tests --- .../SideBar/Actions/SpaceActions.vue | 7 +-- .../src/mixins/spaces/actions/setImage.js | 12 +---- .../src/mixins/spaces/actions/uploadImage.js | 9 ++-- .../web-app-files/src/services/thumbnail.ts | 9 +++- .../src/views/spaces/Project.vue | 7 +-- .../tests/unit/mixins/spaces/setImage.spec.js | 9 ++++ .../unit/mixins/spaces/uploadImage.spec.js | 13 ++++- .../tests/unit/services/thumbnail.spec.ts | 52 +++++++++++++++++++ 8 files changed, 90 insertions(+), 28 deletions(-) create mode 100644 packages/web-app-files/tests/unit/services/thumbnail.spec.ts diff --git a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue index 808e78b3a77..8af2921ff43 100644 --- a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue +++ b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue @@ -58,9 +58,6 @@ export default { UploadImage, EditQuota ], - data: function () { - return { thumbnailService } - }, computed: { ...mapGetters('Files', ['highlightedFile']), resources() { @@ -85,9 +82,7 @@ export default { return this.$data.$_editQuota_modalOpen }, supportedSpaceImageMimeTypes() { - return thumbnailService.capability.supportedMimeTypes - .filter((mimeType) => mimeType.startsWith('image/')) - .join(',') + return thumbnailService.getSupportedMimeTypes('image/').join(',') } }, methods: { diff --git a/packages/web-app-files/src/mixins/spaces/actions/setImage.js b/packages/web-app-files/src/mixins/spaces/actions/setImage.js index 8bd8d537f6b..17a41b3f692 100644 --- a/packages/web-app-files/src/mixins/spaces/actions/setImage.js +++ b/packages/web-app-files/src/mixins/spaces/actions/setImage.js @@ -6,11 +6,6 @@ import { bus } from 'web-pkg/src/instance' import { thumbnailService } from '../../../services' export default { - data: function () { - return { - $_setSpaceImage_thumbnailService: thumbnailService - } - }, computed: { ...mapGetters(['configuration']), $_setSpaceImage_items() { @@ -29,12 +24,7 @@ export default { if (!resources[0].mimeType) { return false } - if ( - !this.$data.$_setSpaceImage_thumbnailService.isMimetypeSupported( - resources[0].mimeType, - true - ) - ) { + if (!thumbnailService.isMimetypeSupported(resources[0].mimeType, true)) { return false } return isLocationSpacesActive(this.$router, 'files-spaces-project') diff --git a/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js b/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js index 13cb6a2dc4f..42a796af154 100644 --- a/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js +++ b/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js @@ -6,8 +6,7 @@ import { thumbnailService } from '../../../services' export default { data: function () { return { - $_uploadImage_selectedSpace: null, - $_uploadImage_thumbnailService: thumbnailService + $_uploadImage_selectedSpace: null } }, computed: { @@ -44,7 +43,11 @@ export default { const graphClient = clientService.graphAuthenticated(this.configuration.server, this.getToken) const file = ev.currentTarget.files[0] - if (!this.$data.$_uploadImage_thumbnailService.isMimetypeSupported(file.type, true)) { + if (!file) { + return + } + + if (!thumbnailService.isMimetypeSupported(file.type, true)) { return this.showMessage({ title: this.$gettext('The file type is unsupported'), status: 'danger' diff --git a/packages/web-app-files/src/services/thumbnail.ts b/packages/web-app-files/src/services/thumbnail.ts index cb8ba618460..d27283de570 100644 --- a/packages/web-app-files/src/services/thumbnail.ts +++ b/packages/web-app-files/src/services/thumbnail.ts @@ -8,7 +8,7 @@ export class ThumbnailService { serverUrl: string capability?: ThumbnailCapability - public initialize(thumbnailCapability: ThumbnailCapability): void { + public initialize(thumbnailCapability: ThumbnailCapability = null): void { this.capability = thumbnailCapability } @@ -21,6 +21,13 @@ export class ThumbnailService { ? mimeType.startsWith('image/') && this.capability.supportedMimeTypes.includes(mimeType) : this.capability.supportedMimeTypes.includes(mimeType) } + + public getSupportedMimeTypes(filter?: string) { + if (!filter) { + return this.capability.supportedMimeTypes + } + return this.capability.supportedMimeTypes.filter((mimeType) => mimeType.startsWith(filter)) + } } export const thumbnailService = new ThumbnailService() diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue index 0c55c15b34f..97c9d49e0d4 100644 --- a/packages/web-app-files/src/views/spaces/Project.vue +++ b/packages/web-app-files/src/views/spaces/Project.vue @@ -304,8 +304,7 @@ export default { showMarkdownCollapse: false, markdownResizeObserver: new ResizeObserver(this.onMarkdownResize), imageExpanded: false, - imageContent: null, - thumbnailService + imageContent: null } }, computed: { @@ -363,9 +362,7 @@ export default { return this.$data.$_editReadmeContent_modalOpen }, supportedSpaceImageMimeTypes() { - return thumbnailService.capability.supportedMimeTypes - .filter((mimeType) => mimeType.startsWith('image/')) - .join(',') + return thumbnailService.getSupportedMimeTypes('image/').join(',') } }, watch: { diff --git a/packages/web-app-files/tests/unit/mixins/spaces/setImage.spec.js b/packages/web-app-files/tests/unit/mixins/spaces/setImage.spec.js index b3d4b342303..59268650e92 100644 --- a/packages/web-app-files/tests/unit/mixins/spaces/setImage.spec.js +++ b/packages/web-app-files/tests/unit/mixins/spaces/setImage.spec.js @@ -8,6 +8,7 @@ import mockAxios from 'jest-mock-axios' import sdkMock from '@/__mocks__/sdk' import fileFixtures from '__fixtures__/files' import { bus } from 'web-pkg/src/instance' +import { thumbnailService } from '../../../../src/services' const localVue = createLocalVue() localVue.use(Vuex) @@ -68,6 +69,14 @@ describe('setImage', () => { }) } + beforeAll(() => { + thumbnailService.initialize({ + enabled: true, + version: '0.1', + supportedMimeTypes: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'text/plain'] + }) + }) + afterEach(() => jest.clearAllMocks()) describe('isEnabled property', () => { diff --git a/packages/web-app-files/tests/unit/mixins/spaces/uploadImage.spec.js b/packages/web-app-files/tests/unit/mixins/spaces/uploadImage.spec.js index e4fa8c7067c..b23da1375c0 100644 --- a/packages/web-app-files/tests/unit/mixins/spaces/uploadImage.spec.js +++ b/packages/web-app-files/tests/unit/mixins/spaces/uploadImage.spec.js @@ -6,6 +6,7 @@ import { createLocationSpaces } from '../../../../src/router' import mockAxios from 'jest-mock-axios' // eslint-disable-next-line jest/no-mocks-import import sdkMock from '@/__mocks__/sdk' +import { thumbnailService } from '../../../../src/services' const localVue = createLocalVue() localVue.use(Vuex) @@ -73,6 +74,14 @@ describe('uploadImage', () => { }) } + beforeAll(() => { + thumbnailService.initialize({ + enabled: true, + version: '0.1', + supportedMimeTypes: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'text/plain'] + }) + }) + afterEach(() => jest.clearAllMocks()) describe('method "$_uploadImage_uploadImageSpace"', () => { @@ -85,7 +94,7 @@ describe('uploadImage', () => { const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage') await wrapper.vm.$_uploadImage_uploadImageSpace({ currentTarget: { - files: [{ name: 'image.png', lastModifiedDate: new Date() }] + files: [{ name: 'image.png', lastModifiedDate: new Date(), type: 'image/png' }] } }) @@ -98,7 +107,7 @@ describe('uploadImage', () => { const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage') await wrapper.vm.$_uploadImage_uploadImageSpace({ currentTarget: { - files: [{ name: 'image.png', lastModifiedDate: new Date() }] + files: [{ name: 'image.png', lastModifiedDate: new Date(), type: 'image/png' }] } }) diff --git a/packages/web-app-files/tests/unit/services/thumbnail.spec.ts b/packages/web-app-files/tests/unit/services/thumbnail.spec.ts new file mode 100644 index 00000000000..a75a9003c13 --- /dev/null +++ b/packages/web-app-files/tests/unit/services/thumbnail.spec.ts @@ -0,0 +1,52 @@ +import { thumbnailService, ThumbnailService } from '../../../src/services' + +describe('thumbnail', () => { + describe('thumbnailService', () => { + it('creates an ArchiverService instance exported as `archiverService`', () => { + expect(thumbnailService).toBeInstanceOf(ThumbnailService) + }) + describe('when not being initialized', () => { + it('is announcing itself as unavailable', () => { + expect(thumbnailService.available).toBe(false) + }) + }) + describe('when initialized', () => { + let service + beforeEach(() => { + service = new ThumbnailService() + }) + describe('without thumbnail capability', () => { + beforeEach(() => { + service.initialize(null) + }) + it('is announcing itself as unavailable', () => { + expect(service.available).toBe(false) + }) + }) + describe('with capability', () => { + const capability = { + enabled: true, + version: 'v0.1', + supportedMimeTypes: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'text/plain'] + } + beforeEach(() => { + service.initialize(capability) + }) + it('is announcing itself as available', () => { + expect(service.available).toBe(true) + }) + describe('method isMimetypeSupported', () => { + it('should be true if mimeType is supported', () => { + expect(service.isMimetypeSupported('image/png')).toBe(true) + }) + it('should be false if mimeType is not supported', () => { + expect(service.isMimetypeSupported('image/pdf')).toBe(false) + }) + it('should be false if mimeType is supported but excluded via onlyImages property', () => { + expect(service.isMimetypeSupported('text/plain', true)).toBe(false) + }) + }) + }) + }) + }) +}) From 2e3f3a799f8c68d581a0c50c0945165edac2fe42 Mon Sep 17 00:00:00 2001 From: JanAckermann Date: Mon, 7 Mar 2022 16:31:48 +0100 Subject: [PATCH 15/16] Update tests --- .../tests/unit/views/spaces/Project.spec.js | 9 +++++++++ .../unit/views/spaces/__snapshots__/Project.spec.js.snap | 4 ++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/web-app-files/tests/unit/views/spaces/Project.spec.js b/packages/web-app-files/tests/unit/views/spaces/Project.spec.js index c8bfa13aa4b..51a7e25de4f 100644 --- a/packages/web-app-files/tests/unit/views/spaces/Project.spec.js +++ b/packages/web-app-files/tests/unit/views/spaces/Project.spec.js @@ -7,12 +7,21 @@ import mockAxios from 'jest-mock-axios' import SpaceProject from '../../../../src/views/spaces/Project.vue' import Vuex from 'vuex' import { ShareTypes, spaceRoleManager } from '../../../../src/helpers/share' +import { thumbnailService } from '../../../../src/services' localVue.use(GetTextPlugin, { translations: 'does-not-matter.json', silent: true }) +beforeAll(() => { + thumbnailService.initialize({ + enabled: true, + version: '0.1', + supportedMimeTypes: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'text/plain'] + }) +}) + beforeEach(mockAxios.reset) afterEach(() => { diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap index e6ff66f96d2..759e4ad52c5 100644 --- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap +++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap @@ -14,7 +14,7 @@ exports[`Spaces project view space image should show if given 1`] = ` - +
    • @@ -87,7 +87,7 @@ exports[`Spaces project view space readme should show if given 1`] = ` - +
      • From 3e33ef59e7eb917203ec138e26e74d6ff064d5c0 Mon Sep 17 00:00:00 2001 From: JanAckermann Date: Mon, 7 Mar 2022 18:07:01 +0100 Subject: [PATCH 16/16] moved to shorthand functions --- .../src/components/SideBar/Details/SpaceDetails.vue | 6 ++++-- .../web-app-files/src/mixins/spaces/actions/uploadImage.js | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue index b6405046e1b..d868d8b7a76 100644 --- a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue +++ b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue @@ -183,8 +183,10 @@ export default { }, watch: { 'space.spaceImageData': { - handler: function (val) { - if (!val) return + handler(val) { + if (!val) { + return + } this.loadImageTask.perform(this) }, deep: true diff --git a/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js b/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js index 42a796af154..e78ec866819 100644 --- a/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js +++ b/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js @@ -39,7 +39,7 @@ export default { this.$data.$_uploadImage_selectedSpace = resources[0] this.$refs.spaceImageInput.click() }, - $_uploadImage_uploadImageSpace: function (ev) { + $_uploadImage_uploadImageSpace(ev) { const graphClient = clientService.graphAuthenticated(this.configuration.server, this.getToken) const file = ev.currentTarget.files[0]