Do not show preview if none available

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Signed-off-by: npmbuildbot[bot] <npmbuildbot[bot]@users.noreply.github.com>

1 files changed, 18 insertions, 4 deletions

diff --git a/src/components/FolderTagPreview.vue b/src/components/FolderTagPreview.vue
index 49415cd0..d791823a 100644
--- a/src/components/FolderTagPreview.vue
+++ b/src/components/FolderTagPreview.vue
@@ -28,14 +28,15 @@
 		<!-- Images preview -->
 		<transition name="fade">
 			<div v-show="loaded"
-				:class="`folder-content--grid-${fileList.length}`"
+				:class="`folder-content--grid-${previewList.length}`"
 				class="folder-content"
 				role="none">
-				<img v-for="file in fileList"
+				<img v-for="file in previewList"
 					:key="file.fileid"
 					:src="generateImgSrc(file)"
 					alt=""
-					@load="loaded = true">
+					@load="loaded = true"
+					@error="onPreviewFail(file)">
 			</div>
 		</transition>
 
@@ -85,13 +86,14 @@ export default {
 	data() {
 		return {
 			loaded: false,
+			failed: [],
 		}
 	},
 
 	computed: {
 		// folder is empty
 		isEmpty() {
-			return this.fileList.length === 0
+			return this.previewList.length === 0
 		},
 
 		ariaUuid() {
@@ -102,6 +104,15 @@ export default {
 		},
 
 		/**
+		 * Previews list without the failed ones
+		 * @returns {Object[]} the previews fileinfo
+		 */
+		previewList() {
+			return this.fileList
+				.filter(file => this.failed.indexOf(file.fileid) === -1)
+		},
+
+		/**
 		 * We do not want encoded slashes when browsing by folder
 		 * so we generate a new valid route object based on the
 		 * current named route, get the final url back, decode it
@@ -129,6 +140,9 @@ export default {
 			// use etag to force cache reload if file changed
 			return generateUrl(`/core/preview?fileId=${fileid}&x=${256}&y=${256}&a=true&v=${etag}`)
 		},
+		onPreviewFail({ fileid }) {
+			this.failed.push(fileid)
+		},
 	},
 }
 </script>