fix(files): preview reset handling

Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>

Author: skjnldsv

apps/files/src/components/FileEntry/FileEntryPreview.vue

@@ -15,7 +15,7 @@
 		</template>
 
 		<!-- Decorative images, should not be aria documented -->
-		<span v-else-if="previewUrl" class="files-list__row-icon-preview-container">
+		<span v-else-if="background" class="files-list__row-icon-preview-container">
 			<canvas v-if="hasBlurhash && (backgroundFailed === true || !backgroundLoaded)"
 				ref="canvas"
 				class="files-list__row-icon-blurhash"
@@ -26,8 +26,7 @@
 				class="files-list__row-icon-preview"
 				:class="{'files-list__row-icon-preview--loaded': backgroundFailed === false}"
 				loading="lazy"
-				:src="previewUrl"
-				@error="onBackgroundError"
+				:src="background"
 				@load="onBackgroundLoad">
 		</span>
 
@@ -121,6 +120,7 @@ export default defineComponent({
 
 	data() {
 		return {
+			background: '' as string | null,
 			backgroundFailed: undefined as boolean | undefined,
 			backgroundLoaded: false,
 		}
@@ -138,54 +138,6 @@ export default defineComponent({
 			return this.userConfig.crop_image_previews === true
 		},
 
-		previewUrl() {
-			if (this.source.type === FileType.Folder) {
-				return null
-			}
-
-			if (this.source.attributes['has-preview'] === false
-				&& this.source.mime
-				&& this.source.mime !== 'application/octet-stream'
-			) {
-				return generateUrl('/core/mimeicon?mime={mime}', {
-					mime: this.source.mime,
-				})
-			}
-
-			if (this.backgroundFailed === true) {
-				return null
-			}
-
-			try {
-				const previewUrl = this.source.attributes.previewUrl
-					|| (this.isPublic
-						? generateUrl('/apps/files_sharing/publicpreview/{token}?file={file}', {
-							token: this.publicSharingToken,
-							file: this.source.path,
-						})
-						: generateUrl('/core/preview?fileId={fileid}', {
-							fileid: String(this.source.fileid),
-						})
-					)
-				const url = new URL(window.location.origin + previewUrl)
-
-				// Request tiny previews
-				url.searchParams.set('x', this.gridMode ? '128' : '32')
-				url.searchParams.set('y', this.gridMode ? '128' : '32')
-				url.searchParams.set('mimeFallback', 'true')
-
-				// Etag to force refresh preview on change
-				const etag = this.source?.attributes?.etag || ''
-				url.searchParams.set('v', etag.slice(0, 6))
-
-				// Handle cropping
-				url.searchParams.set('a', this.cropPreviews === true ? '0' : '1')
-				return url.href
-			} catch (e) {
-				return null
-			}
-		},
-
 		fileOverlay() {
 			if (isLivePhoto(this.source)) {
 				return PlayCircleIcon
@@ -241,20 +193,71 @@ export default defineComponent({
 	},
 
 	mounted() {
+		this.reset()
+
 		if (this.hasBlurhash && this.$refs.canvas) {
 			this.drawBlurhash()
 		}
 	},
 
 	methods: {
 		// Called from FileEntry
-		reset() {
+		async reset() {
 			// Reset background state to cancel any ongoing requests
+			this.background = ''
 			this.backgroundFailed = undefined
 			this.backgroundLoaded = false
-			const previewImg = this.$refs.previewImg as HTMLImageElement | undefined
-			if (previewImg) {
-				previewImg.src = ''
+
+			// Then update the new background
+			await this.$nextTick()
+			this.updateBackground()
+		},
+
+		updateBackground() {
+			if (this.source.type === FileType.Folder) {
+				this.background = null
+				return
+			}
+
+			if (this.source.attributes['has-preview'] !== true
+				&& this.source.mime !== undefined
+				&& this.source.mime !== 'application/octet-stream'
+			) {
+				const previewUrl = generateUrl('/core/mimeicon?mime={mime}', {
+					mime: this.source.mime,
+				})
+				const url = new URL(window.location.origin + previewUrl)
+				this.background = url.href
+				return
+			}
+
+			try {
+				const previewUrl = this.source.attributes.previewUrl
+					|| (this.isPublic
+						? generateUrl('/apps/files_sharing/publicpreview/{token}?file={file}', {
+							token: this.publicSharingToken,
+							file: this.source.path,
+						})
+						: generateUrl('/core/preview?fileId={fileid}', {
+							fileid: String(this.source.fileid),
+						})
+					)
+				const url = new URL(window.location.origin + previewUrl)
+
+				// Request tiny previews
+				url.searchParams.set('x', this.gridMode ? '128' : '32')
+				url.searchParams.set('y', this.gridMode ? '128' : '32')
+				url.searchParams.set('mimeFallback', 'true')
+
+				// Etag to force refresh preview on change
+				const etag = this.source?.attributes?.etag || ''
+				url.searchParams.set('v', etag.slice(0, 6))
+
+				// Handle cropping
+				url.searchParams.set('a', this.cropPreviews === true ? '0' : '1')
+				this.background = url.href
+			} catch (e) {
+				this.background = null
 			}
 		},
 
@@ -265,7 +268,7 @@ export default defineComponent({
 
 		onBackgroundError(event) {
 			// Do not fail if we just reset the background
-			if (event.target?.src === '') {
+			if (event.target?.src === '' || !this.background) {
 				return
 			}
 			this.backgroundFailed = true