Merge pull request #38467 from nextcloud/artonge/fix/files_versions_preview

Add fallback when a there is no preview for a version

1 files changed, 20 insertions, 7 deletions

diff --git a/apps/files_versions/src/components/Version.vue b/apps/files_versions/src/components/Version.vue
index a368720bb51..def5abbcf48 100644
--- a/apps/files_versions/src/components/Version.vue
+++ b/apps/files_versions/src/components/Version.vue
@@ -23,12 +23,15 @@
 			:force-display-actions="true"
 			data-files-versions-version>
 			<template #icon>
-				<img lazy="true"
+				<img v-if="!previewError"
 					:src="previewURL"
 					alt=""
-					height="256"
-					width="256"
+					class="version__image"
+					@error="previewError = true">
+				<div v-else
 					class="version__image">
+					<ImageOffOutline :size="20" />
+				</div>
 			</template>
 			<template #subtitle>
 				<div class="version__info">
@@ -112,6 +115,7 @@ import Download from 'vue-material-design-icons/Download.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
+import ImageOffOutline from 'vue-material-design-icons/ImageOffOutline.vue'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
 import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
@@ -139,6 +143,7 @@ export default {
 		Pencil,
 		Check,
 		Delete,
+		ImageOffOutline,
 	},
 	directives: {
 		tooltip: Tooltip,
@@ -183,6 +188,7 @@ export default {
 			showVersionLabelForm: false,
 			formVersionLabelValue: this.version.label,
 			capabilities: loadState('core', 'capabilities', { files: { version_labeling: false, version_deletion: false } }),
+			previewError: false,
 		}
 	},
 	computed: {
@@ -190,19 +196,21 @@ export default {
 		 * @return {string}
 		 */
 		versionLabel() {
+			const label = this.version.label ?? ''
+
 			if (this.isCurrent) {
-				if (this.version.label === undefined || this.version.label === '') {
+				if (label === '') {
 					return translate('files_versions', 'Current version')
 				} else {
-					return `${this.version.label} (${translate('files_versions', 'Current version')})`
+					return `${label} (${translate('files_versions', 'Current version')})`
 				}
 			}
 
-			if (this.isFirstVersion && this.version.label === '') {
+			if (this.isFirstVersion && label === '') {
 				return translate('files_versions', 'Initial version')
 			}
 
-			return this.version.label
+			return label
 		},
 
 		/**
@@ -281,6 +289,11 @@ export default {
 		height: 3rem;
 		border: 1px solid var(--color-border);
 		border-radius: var(--border-radius-large);
+
+		// Useful to display no preview icon.
+		display: flex;
+		justify-content: center;
+		color: var(--color-text-light);
 	}
 }