Fix thumbnail loading

Issue #678
This commit is contained in:
N-Pex 2025-09-02 10:15:13 +02:00
parent 2dfaef9b8f
commit 77f3b81e21

View file

@ -8,7 +8,7 @@
<ImageWithProgress v-if="attachment" <ImageWithProgress v-if="attachment"
:aspect-ratio="16 / 9" :aspect-ratio="16 / 9"
ref="image" ref="image"
:src="attachment.src ? attachment.src : attachment.thumbnail" :src="imageSource"
:cover="cover" :cover="cover"
:contain="contain" :contain="contain"
:loadingProgress="attachment.thumbnailProgress" :loadingProgress="attachment.thumbnailProgress"
@ -22,7 +22,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { singleOrDoubleTapRecognizer } from "@/plugins/touch"; import { singleOrDoubleTapRecognizer } from "@/plugins/touch";
import { computed, inject, onMounted, ref, useTemplateRef, watch } from "vue"; import { computed, inject, onMounted, Ref, ref, useTemplateRef, watch } from "vue";
import MessageIncoming from "./MessageIncoming.vue"; import MessageIncoming from "./MessageIncoming.vue";
import MessageOutgoing from "./MessageOutgoing.vue"; import MessageOutgoing from "./MessageOutgoing.vue";
import ImageWithProgress from "../../ImageWithProgress.vue"; import ImageWithProgress from "../../ImageWithProgress.vue";
@ -58,13 +58,17 @@ const {
attachment, attachment,
} = useMessage($matrix, t, props, undefined, undefined); } = useMessage($matrix, t, props, undefined, undefined);
const imageSource: Ref<string | undefined> = ref(undefined)
const rootComponent = computed(() => { const rootComponent = computed(() => {
return isIncoming.value ? MessageIncoming : MessageOutgoing; return isIncoming.value ? MessageIncoming : MessageOutgoing;
}) })
watch([isVisible, attachment], ([_v, _a]: [_v: boolean, _a: EventAttachment | undefined]) => { watch([isVisible, attachment], ([_v, _a]: [_v: boolean, _a: EventAttachment | undefined]) => {
if (_v && _a) { if (_v && _a) {
_a.loadThumbnail(); _a.loadThumbnail().then(() => {
imageSource.value = attachment.value?.src ? attachment.value.src : attachment.value?.thumbnail;
})
} }
}); });