refactor: introduce ImageResolver

Prepare for injecting the image resolver.
Make it easy to test the logic of which url to query for an image.

Signed-off-by: Max <max@nextcloud.com>

1 files changed, 18 insertions, 117 deletions

diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue
index 1d186c546..86035bba0 100644
--- a/src/nodes/ImageView.vue
+++ b/src/nodes/ImageView.vue
@@ -81,6 +81,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 import { NodeViewWrapper } from '@tiptap/vue-2'
 import ClickOutside from 'vue-click-outside'
 import TrashCanIcon from 'vue-material-design-icons/TrashCan.vue'
+import ImageResolver from './ImageResolver.js'
 import store from './../mixins/store.js'
 
 const imageMimes = [
@@ -135,78 +136,13 @@ export default {
 		}
 	},
 	computed: {
-		currentSession() {
-			return this.$store.state.currentSession
-		},
-		davUrl() {
-			if (getCurrentUser()) {
-				const uid = getCurrentUser().uid
-				const encoded = encodeURI(this.filePath)
-				return generateRemoteUrl(`dav/files/${uid}${encoded}`)
-			} else {
-				return generateUrl('/s/{token}/download?path={dirname}&files={basename}',
-					{
-						token: this.token,
-						dirname: this.extension.options.currentDirectory,
-						basename: this.basename,
-					})
-			}
-		},
-		isRemoteUrl() {
-			return this.src.startsWith('http://')
-				|| this.src.startsWith('https://')
-		},
-		isPreviewUrl() {
-			return this.src.match(/^(\/index.php)?\/core\/preview/)
-				|| this.src.match(/^(\/index.php)?\/apps\/files_sharing\/publicpreview\//)
-		},
-		isDataUrl() {
-			return this.src.startsWith('data:')
-		},
-		isDirectUrl() {
-			return (this.isRemoteUrl || this.isPreviewUrl || this.isDataUrl)
-		},
-		basename() {
-			return decodeURI(this.src.split('?')[0])
-		},
 		imageFileId() {
 			return getQueryVariable(this.src, 'fileId')
 		},
-		filePath() {
-			const f = [
-				this.extension.options.currentDirectory,
-				this.basename,
-			].join('/')
-			return path.normalize(f)
-		},
-		hasPreview() {
-			return getQueryVariable(this.src, 'hasPreview') === 'true'
-		},
-		previewUrl() {
-			const fileQuery = (this.imageFileId)
-				? `?fileId=${this.imageFileId}&file=${encodeURIComponent(this.filePath)}`
-				: `?file=${encodeURIComponent(this.filePath)}`
-			const query = fileQuery + '&x=1024&y=1024&a=true'
-
-			if (getCurrentUser()) {
-				return generateUrl('/core/preview') + query
-			} else {
-				return generateUrl(`/apps/files_sharing/publicpreview/${this.token}${query}`)
-			}
-		},
-		mime() {
-			return getQueryVariable(this.src, 'mimetype')
-		},
-		mimeIcon() {
-			if (this.mime) {
-				const mimeIconUrl = window.OC.MimeType.getIconUrl(this.mime)
-				return { backgroundImage: `url(${mimeIconUrl})` }
-			}
-			return {}
-		},
 		isSupportedImage() {
-			return typeof this.mime === 'undefined'
-				|| imageMimes.indexOf(this.mime) !== -1
+			const mime = getQueryVariable(this.src, 'mimetype')
+			return typeof mime === 'undefined'
+				|| imageMimes.indexOf(mime) !== -1
 		},
 		internalLinkOrImage() {
 			if (this.imageFileId) {
@@ -256,34 +192,21 @@ export default {
 	},
 	methods: {
 		async init() {
-			if (this.src.startsWith('text://')) {
-				const imageFileName = getQueryVariable(this.src, 'imageFileName')
-				return this.loadImage(this.getAttachmentUrl(imageFileName))
-			}
-			if (this.src.startsWith(`.attachments.${this.currentSession?.documentId}/`)) {
-				const imageFileName = decodeURIComponent(this.src.replace(`.attachments.${this.currentSession?.documentId}/`, '').split('?')[0])
-				return this.loadImage(this.getAttachmentUrl(imageFileName))
-			}
-			if (this.isDirectUrl) {
-				return this.loadImage(this.src)
-			}
-			if (this.hasPreview && this.mime !== 'image/gif') {
-				return this.loadImage(this.previewUrl)
-			}
-			// if it starts with '.attachments.1234/'
-			if (this.src.match(/^\.attachments\.\d+\//)) {
-				// try the webdav url
-				return this.loadImage(this.davUrl).catch((e) => {
-					// try the attachment API
-					const imageFileName = decodeURIComponent(this.src.replace(/\.attachments\.\d+\//, '').split('?')[0])
-					const attachmentUrl = this.getAttachmentUrl(imageFileName)
-					return this.loadImage(attachmentUrl).then(() => {
-						// TODO if attachment works, rewrite the url with correct document ID
-					})
-				})
-			}
-			this.loadImage(this.davUrl)
+			const imageResolver = new ImageResolver({
+				currentDirectory: this.extension.options.currentDirectory,
+				user: getCurrentUser(),
+				session: this.$store.state.currentSession,
+				shareToken: this.token,
+			})
+			const [url, fallback] = imageResolver.resolve(this.src)
+			this.loadImage(url).catch((e) => {
+				if (fallback) {
+					this.loadImage(fallback)
+					// TODO if fallback works, rewrite the url with correct document ID
+				}
+			})
 		},
+
 		async loadImage(imageUrl) {
 			return new Promise((resolve, reject) => {
 				const img = new Image()
@@ -312,28 +235,6 @@ export default {
 				this.editor.commands.scrollIntoView()
 			})
 		},
-		getAttachmentUrl(imageFileName) {
-			const documentId = this.currentSession?.documentId
-			const sessionId = this.currentSession?.id
-			const sessionToken = this.currentSession?.token
-			if (getCurrentUser() || !this.token) {
-				return generateUrl('/apps/text/image?documentId={documentId}&sessionId={sessionId}&sessionToken={sessionToken}&imageFileName={imageFileName}',
-					{
-						documentId,
-						sessionId,
-						sessionToken,
-						imageFileName,
-					})
-			}
-			return generateUrl('/apps/text/image?documentId={documentId}&sessionId={sessionId}&sessionToken={sessionToken}&imageFileName={imageFileName}&shareToken={shareToken}',
-				{
-					documentId,
-					sessionId,
-					sessionToken,
-					imageFileName,
-					shareToken: this.token,
-				})
-		},
 	},
 }
 </script>