diff options
author | Julien Veyssier <eneiluj@posteo.net> | 2022-06-08 18:44:49 +0300 |
---|---|---|
committer | Julien Veyssier <eneiluj@posteo.net> | 2022-09-06 15:44:53 +0300 |
commit | 3fec1f052dbb8cbe33172e779ac853eeb934ee62 (patch) | |
tree | 9cbdb5e28225dce8e45b14b06829668615fb6f55 /src/nodes | |
parent | 3af1eb84126c4bb9396b701c963ee229cdc26c66 (diff) |
allow media file upload, handle display in ImageView
Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
Diffstat (limited to 'src/nodes')
-rw-r--r-- | src/nodes/ImageView.vue | 72 |
1 files changed, 60 insertions, 12 deletions
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; |