fix(shares): reserve space for file preview while it's loading

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

1 files changed, 56 insertions, 3 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index ced1222d7..8d64aa7e3 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -50,9 +50,10 @@
 				alt=""
 				:src="defaultIconUrl">
 		</div>
-		<span v-if="isLoading"
+		<span v-else-if="isLoading"
 			v-tooltip="previewTooltip"
-			class="preview loading" />
+			class="preview loading"
+			:style="imageContainerStyle" />
 		<NcButton v-if="isUploadEditor"
 			class="remove-file"
 			tabindex="1"
@@ -189,6 +190,22 @@ export default {
 		},
 
 		/**
+		 * If preview and metadata are available, return width
+		 */
+		width: {
+			type: Number,
+			default: null,
+		},
+
+		/**
+		 * If preview and metadata are available, return height
+		 */
+		height: {
+			type: Number,
+			default: null,
+		},
+
+		/**
 		 * Whether to render a small preview to embed in replies
 		 */
 		smallPreview: {
@@ -333,11 +350,15 @@ export default {
 			return OC.MimeType.getIconUrl(this.mimetype) || imagePath('core', 'filetypes/file')
 		},
 
+		mediumPreview() {
+			return !this.mimetype.startsWith('image/') && !this.mimetype.startsWith('video/')
+		},
+
 		previewImageClass() {
 			let classes = ''
 			if (this.smallPreview) {
 				classes += 'preview-small '
-			} else if (!this.mimetype.startsWith('image/') && !this.mimetype.startsWith('video/')) {
+			} else if (this.mediumPreview) {
 				classes += 'preview-medium '
 			} else {
 				classes += 'preview '
@@ -352,6 +373,37 @@ export default {
 			return classes
 		},
 
+		imageContainerStyle() {
+			// Fallback for loading mimeicons (preview for audio files is not provided)
+			if (this.previewAvailable !== 'yes' || this.mimetype.startsWith('audio/')) {
+				return {
+					width: '128px',
+					height: '128px',
+				}
+			}
+
+			const widthConstraint = this.smallPreview ? 32 : (this.mediumPreview ? 192 : 600)
+			const heightConstraint = this.smallPreview ? 32 : (this.mediumPreview ? 192 : 384)
+
+			// Fallback when no metadata available
+			if (!this.width || !this.height) {
+				return {
+					width: widthConstraint + 'px',
+					height: heightConstraint + 'px',
+				}
+			}
+
+			const sizeMultiplicator = Math.min(
+				(heightConstraint > this.height ? 1 : (heightConstraint / this.height)),
+				(widthConstraint > this.width ? 1 : (widthConstraint / this.width))
+			)
+
+			return {
+				width: this.width * sizeMultiplicator + 'px',
+				aspectRatio: this.width + '/' + this.height,
+			}
+		},
+
 		previewType() {
 			if (this.hasTemporaryImageUrl) {
 				return PREVIEW_TYPE.TEMPORARY
@@ -561,6 +613,7 @@ export default {
 	.loading {
 		display: inline-block;
 		width: 100%;
+		background-color: var(--color-background-dark);
 	}
 
 	.mimeicon {