From fd461aaa7791924a1be4bed007d4f758a115259c Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Thu, 5 Nov 2020 11:26:37 +0100 Subject: [PATCH 1/3] Expose file preview type as single value Implement previewType in file preview that specifies what kind of preview is being displayed. Signed-off-by: Vincent Petry --- .../Message/MessagePart/FilePreview.vue | 33 +++++++++++++++---- 1 file changed, 27 insertions(+), 6 deletions(-) diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue index 2862d7b17f7..a31fa0b8c16 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue @@ -56,6 +56,13 @@ import ProgressBar from '@nextcloud/vue/dist/Components/ProgressBar' import Close from 'vue-material-design-icons/Close' import { getCapabilities } from '@nextcloud/capabilities' +const PREVIEW_TYPE = { + TEMPORARY: 0, + MIME_ICON: 1, + DIRECT: 2, + PREVIEW: 3, +} + export default { name: 'FilePreview', @@ -158,20 +165,33 @@ export default { } return 'preview' }, - previewUrl() { - const userId = this.$store.getters.getUserId() + previewType() { if (this.hasTemporaryImageUrl) { - return this.localUrl + return PREVIEW_TYPE.TEMPORARY } if (this.previewAvailable !== 'yes') { - return OC.MimeType.getIconUrl(this.mimetype) + return PREVIEW_TYPE.MIME_ICON } - // max size of a gif for which we allow direct embedding const maxGifSize = getCapabilities()?.caps?.spreed?.config?.previews?.['max-gif-size'] || 3145728 if (this.mimetype === 'image/gif' && this.size <= maxGifSize) { - // return direct image so it can be animated + return PREVIEW_TYPE.DIRECT + } + + return PREVIEW_TYPE.PREVIEW + }, + previewUrl() { + const userId = this.$store.getters.getUserId() + + switch (this.previewType) { + case PREVIEW_TYPE.TEMPORARY: + return this.localUrl + case PREVIEW_TYPE.MIME_ICON: + return OC.MimeType.getIconUrl(this.mimetype) + // whether to embed/render the file directly + case PREVIEW_TYPE.DIRECT: + // return direct image if (userId === null) { // guest mode, use public link download URL return this.link + '/download/' + this.name @@ -181,6 +201,7 @@ export default { } } + // use preview provider URL to render a smaller preview const previewSize = Math.ceil(this.previewSize * window.devicePixelRatio) if (userId === null) { // guest mode: grab token from the link URL From 98e9d48eb74ac3c72a551d4f9c2117bc9489b31d Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Thu, 5 Nov 2020 11:27:44 +0100 Subject: [PATCH 2/3] Fix mime type icon height Whenever a mime type icon is displayed, apply min-height to make it look bigger. Signed-off-by: Vincent Petry --- .../Message/MessagePart/FilePreview.vue | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue index a31fa0b8c16..3391e378d14 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue @@ -29,12 +29,13 @@ @click="handleClick" @keydown.enter="handleClick"> Date: Fri, 6 Nov 2020 09:32:36 +0100 Subject: [PATCH 3/3] Polish preview type + mime icon logic in file preview Signed-off-by: Vincent Petry --- .../Message/MessagePart/FilePreview.vue | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue index 3391e378d14..d168859c96b 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue @@ -34,7 +34,6 @@ alt="" :src="previewUrl"> @@ -168,7 +167,7 @@ export default { classes += 'preview ' } - if (this.previewType === PREVIEW_TYPE.MIME_ICON) { + if (this.failed || this.previewType === PREVIEW_TYPE.MIME_ICON) { classes += 'mimeicon' } return classes @@ -192,13 +191,14 @@ export default { previewUrl() { const userId = this.$store.getters.getUserId() - switch (this.previewType) { - case PREVIEW_TYPE.TEMPORARY: + if (this.previewType === PREVIEW_TYPE.TEMPORARY) { return this.localUrl - case PREVIEW_TYPE.MIME_ICON: + } + if (this.previewType === PREVIEW_TYPE.MIME_ICON) { return OC.MimeType.getIconUrl(this.mimetype) + } // whether to embed/render the file directly - case PREVIEW_TYPE.DIRECT: + if (this.previewType === PREVIEW_TYPE.DIRECT) { // return direct image if (userId === null) { // guest mode, use public link download URL @@ -367,7 +367,7 @@ export default { } .mimeicon { - min-height: 120px; + min-height: 128px; } strong {