Use etag as cache buster

Signed-off-by: Louis Chemineau <louis@chmn.me>
nextcloud · Jun 7, 2023 · 2ebb46f · 2ebb46f
1 parent 81875b4
commit 2ebb46f
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 12 deletions.
diff --git a/js/viewer-main.js b/js/viewer-main.js
diff --git a/js/viewer-main.js.map b/js/viewer-main.js.map
diff --git a/src/components/Images.vue b/src/components/Images.vue
@@ -25,7 +25,6 @@
 		:mime="mime"
 		:src="src"
 		:fileid="fileid"
-		@updated="onUpdate"
 		@close="onClose" />
 
 	<img v-else-if="data !== null"
@@ -35,7 +34,7 @@
 			loaded,
 			zoomed: zoomRatio !== 1
 		}"
-		:src="`${data}${cacheBuster}`"
+		:src="data"
 		:style="{
 			marginTop: shiftY + 'px',
 			marginLeft: shiftX + 'px',
@@ -82,8 +81,6 @@ export default {
 			shiftY: 0,
 			zoomRatio: 1,
 			fallback: false,
-			cacheBuster: '',
-			cacheBusterCounter: 0,
 		}
 	},
 
@@ -267,10 +264,6 @@ export default {
 				this.fallback = true
 			}
 		},
-
-		onUpdate() {
-			this.cacheBuster = `?buster=${this.cacheBusterCounter++}`
-		},
 	},
 }
 </script>

diff --git a/src/mixins/PreviewUrl.js b/src/mixins/PreviewUrl.js
@@ -39,6 +39,7 @@ export default {
 				previewUrl: this.previewUrl,
 				hasPreview: this.hasPreview,
 				davPath: this.davPath,
+				etag: this.$attrs.etag,
 			})
 		},
 
@@ -65,9 +66,10 @@ export default {
 		 * @param {boolean} data.hasPreview have the file an existing preview ?
 		 * @param {string} data.davPath the absolute dav path
 		 * @param {string} data.filename the file name
+		 * @param {string} [data.etag] the etag of the file
 		 * @return {string} the absolute url
 		 */
-		getPreviewIfAny({ fileid, filename, previewUrl, hasPreview, davPath }) {
+		getPreviewIfAny({ fileid, filename, previewUrl, hasPreview, davPath, etag }) {
 			if (previewUrl) {
 				return previewUrl
 			}
@@ -76,6 +78,7 @@ export default {
 				+ `&x=${Math.floor(screen.width * devicePixelRatio)}`
 				+ `&y=${Math.floor(screen.height * devicePixelRatio)}`
 				+ '&a=true'
+				+ (etag !== undefined ? `&etag=${etag.replace(/&quot;/g, '')}` : '')
 
 			if (hasPreview) {
 				// TODO: find a nicer standard way of doing this?

diff --git a/src/services/FileInfo.js b/src/services/FileInfo.js
@@ -40,6 +40,7 @@ export default async function(path, options) {
 					<d:getlastmodified />
 					<d:getcontenttype />
 					<d:resourcetype />
+					<d:getetag />
 					<oc:fileid />
 					<oc:permissions />
 					<oc:size />

diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue
@@ -467,6 +467,7 @@ export default {
 		// React to Files' Sidebar events.
 		subscribe('files:sidebar:opened', this.handleAppSidebarOpen)
 		subscribe('files:sidebar:closed', this.handleAppSidebarClose)
+		subscribe('files:node:updated', this.handleFileUpdated)
 		subscribe('viewer:trapElements:changed', this.handleTrapElementsChange)
 		window.addEventListener('keydown', this.keyboardDeleteFile)
 		window.addEventListener('keydown', this.keyboardDownloadFile)
@@ -968,6 +969,23 @@ export default {
 			this.trapElements = []
 		},
 
+		// Update etag of updated file to break cache.
+		async handleFileUpdated({ fileid }) {
+			const index = this.fileList.findIndex(({ fileid: currentFileId }) => currentFileId === fileid)
+			const file = this.fileList[index]
+
+			if (file === undefined) {
+				return
+			}
+
+			const fetchedFile = await getFileInfo(file.basename)
+
+			this.fileList.splice(index, 1, { ...file, etag: fetchedFile.etag })
+			if (file.fileid === this.currentFile.fileid) {
+				this.currentFile.etag = fetchedFile.etag
+			}
+		},
+
 		onResize() {
 			const sidebar = document.querySelector('aside.app-sidebar')
 			if (sidebar) {