diff --git a/src/components/file_mode/ThumbnailView.vue b/src/components/file_mode/ThumbnailView.vue index 0e58dc1..ac00161 100644 --- a/src/components/file_mode/ThumbnailView.vue +++ b/src/components/file_mode/ThumbnailView.vue @@ -26,9 +26,9 @@ import utils from "../../plugins/utils"; import { computed, inject, onBeforeUnmount, onMounted, Ref, ref, useTemplateRef, watch } from "vue"; import { EventAttachment } from "../../models/eventAttachment"; -import ImageWithProgress from "../ImageWithProgress"; import { useThumbnail } from "../messages/composition/useThumbnail"; import { Attachment } from "../../models/attachment"; +import ImageWithProgress from "../ImageWithProgress.vue"; const $$sanitize: any = inject("globalSanitize"); @@ -50,8 +50,33 @@ const emits = defineEmits(); let { isVideo, isImage, fileTypeIcon, fileTypeIconClass, fileName, fileSize } = useThumbnail(file?.file ?? item?.event); const fileURL: Ref = ref(undefined); +const source: Ref = ref(undefined); const poster: Ref = ref(undefined); +const updateSource = () => { + if (props.item) { + if (isVideo.value || props.item.src) { + source.value = props.item.src; + } else if (previewOnly) { + props.item.loadThumbnail().then((url) => { + source.value = url.data; + }) + } else if (isImage.value) { + props.item.loadSrc().then((url) => { + source.value = url.data; + }) + } + } else if (props.file) { + if (fileURL.value) { + URL.revokeObjectURL(fileURL.value); + } + fileURL.value = URL.createObjectURL(props.file.file); + source.value = fileURL.value; + } else { + source.value = undefined; + } +}; + const updatePoster = () => { if (props.item && isVideo.value) { if (props.item.thumbnail) { @@ -69,8 +94,10 @@ const updatePoster = () => { } }; +updateSource(); updatePoster(); + watch(props, (props: ThumbnailProps) => { const updates = useThumbnail(props.file?.file ?? props.item?.event); isVideo.value = updates.isVideo.value; @@ -79,24 +106,10 @@ watch(props, (props: ThumbnailProps) => { fileTypeIconClass = updates.fileTypeIconClass; fileName = updates.fileName; fileSize = updates.fileSize; + updateSource(); updatePoster(); }); -const source = computed(() => { - if (item) { - if (isVideo.value) { - return item.src; - } - return item.src ? item.src : item.thumbnail; - } else if (file) { - if (!fileURL.value) { - fileURL.value = URL.createObjectURL(file.file); - } - return fileURL.value; - } - return undefined; -}); - const loadingProgress = computed(() => { if (item) { return previewOnly ? item.thumbnailProgress : item.srcProgress;