From 3fec1f052dbb8cbe33172e779ac853eeb934ee62 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <eneiluj@posteo.net>
Date: Wed, 8 Jun 2022 17:44:49 +0200
Subject: allow media file upload, handle display in ImageView

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
---
 src/nodes/ImageView.vue | 72 ++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 60 insertions(+), 12 deletions(-)

(limited to 'src/nodes/ImageView.vue')

diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue
index eb812e6d0..8519ebd58 100644
--- a/src/nodes/ImageView.vue
+++ b/src/nodes/ImageView.vue
@@ -34,10 +34,25 @@
 				@mouseleave="showIcons = false">
 				<transition name="fade">
 					<template v-if="!failed">
-						<img v-show="loaded"
-							:src="imageUrl"
-							class="image__main"
-							@load="onLoaded">
+						<div v-if="isMediaAttachment"
+							class="media">
+							<img v-show="loaded"
+								 :src="imageUrl"
+								 class="image__main"
+								 @load="onLoaded">
+							<span class="name">
+								{{ alt }}
+							</span>
+							<span class="size">
+								{{ attachmentMetadata.size }}
+							</span>
+						</div>
+						<div v-else>
+							<img v-show="loaded"
+								:src="imageUrl"
+								class="image__main"
+								@load="onLoaded">
+						</div>
 					</template>
 					<template v-else>
 						<ImageIcon class="image__main image__main--broken-icon" :size="100" />
@@ -45,7 +60,8 @@
 				</transition>
 				<transition name="fade">
 					<div v-show="loaded" class="image__caption">
-						<input ref="altInput"
+						<input v-show="!isMediaAttachment"
+							ref="altInput"
 							type="text"
 							class="image__caption__input"
 							:value="alt"
@@ -143,9 +159,14 @@ export default {
 			showIcons: false,
 			imageUrl: null,
 			errorMessage: null,
+			attachmentType: null,
+			attachmentMetadata: {},
 		}
 	},
 	computed: {
+		isMediaAttachment() {
+			return this.attachmentType !== 'image'
+		},
 		canDisplayImage() {
 			if (!this.isSupportedImage) {
 				return false
@@ -212,24 +233,31 @@ export default {
 	},
 	methods: {
 		async init() {
-			const [url, fallback] = this.$imageResolver.resolve(this.src)
-			return this.loadImage(url).catch((e) => {
-				if (fallback) {
-					return this.loadImage(fallback)
+			const candidates = this.$imageResolver.resolve(this.src)
+			return this.load(candidates)
+		},
+		async load(candidates) {
+			const candidate = candidates.shift()
+			return this.loadImage(candidate.url, candidate.type, candidate.name).catch((e) => {
+				if (candidates.length > 0) {
+					return this.load(candidates)
 					// TODO if fallback works, rewrite the url with correct document ID
 				}
-
 				return Promise.reject(e)
 			})
 		},
-
-		async loadImage(imageUrl) {
+		async loadImage(imageUrl, attachmentType, name = null) {
 			return new Promise((resolve, reject) => {
 				const img = new Image()
 				img.onload = () => {
 					this.imageUrl = imageUrl
 					this.imageLoaded = true
 					this.loaded = true
+					this.attachmentType = attachmentType
+					console.debug('SUCCESS type', attachmentType)
+					if (attachmentType === 'media') {
+						this.loadMediaMetadata(name)
+					}
 					resolve(imageUrl)
 				}
 				img.onerror = (e) => {
@@ -238,6 +266,12 @@ export default {
 				img.src = imageUrl
 			})
 		},
+		loadMediaMetadata(name) {
+			this.$imageResolver.getMediaMetadata(name).then((response) => {
+				console.debug('GOTCHAAAAAA', response.data)
+				this.attachmentMetadata = response.data
+			})
+		},
 		onImageLoadFailure(err) {
 			this.failed = true
 			this.imageLoaded = false
@@ -306,6 +340,20 @@ export default {
 		max-height: calc(100vh - 50px - 50px);
 	}
 
+	.media {
+		display: flex;
+		align-items: center;
+		img {
+			width: 32px;
+			height: 32px;
+		}
+		.name {
+			flex-grow: 1;
+			text-align: left;
+			margin-left: 8px;
+		}
+	}
+
 	.image__error-message {
 		display: block;
 		text-align: center;
-- 
cgit v1.2.3