butter/keanu-weblite
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Fix thumbnail view updating

Browse source 
Issue #662
This commit is contained in:
N-Pex 2025-07-15 10:02:14 +02:00
parent 6b56fe61fa
commit 33c6e7cb64
1 changed files with 29 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/components/file_mode/ThumbnailView.vue
View file

@ -26,9 +26,9 @@
import utils from "../../plugins/utils"; import utils from "../../plugins/utils";
import { computed, inject, onBeforeUnmount, onMounted, Ref, ref, useTemplateRef, watch } from "vue"; import { computed, inject, onBeforeUnmount, onMounted, Ref, ref, useTemplateRef, watch } from "vue";
import { EventAttachment } from "../../models/eventAttachment"; import { EventAttachment } from "../../models/eventAttachment";
import ImageWithProgress from "../ImageWithProgress";
import { useThumbnail } from "../messages/composition/useThumbnail"; import { useThumbnail } from "../messages/composition/useThumbnail";
import { Attachment } from "../../models/attachment"; import { Attachment } from "../../models/attachment";
import ImageWithProgress from "../ImageWithProgress.vue";
const $$sanitize: any = inject("globalSanitize"); const $$sanitize: any = inject("globalSanitize");
@ -50,8 +50,33 @@ const emits = defineEmits<ThumbnailEmits>();
let { isVideo, isImage, fileTypeIcon, fileTypeIconClass, fileName, fileSize } = useThumbnail(file?.file ?? item?.event); let { isVideo, isImage, fileTypeIcon, fileTypeIconClass, fileName, fileSize } = useThumbnail(file?.file ?? item?.event);
const fileURL: Ref<string | undefined> = ref(undefined); const fileURL: Ref<string | undefined> = ref(undefined);
const source: Ref<string | undefined> = ref(undefined);
const poster: Ref<string | undefined> = ref(undefined); const poster: Ref<string | undefined> = 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 = () => { const updatePoster = () => {
if (props.item && isVideo.value) { if (props.item && isVideo.value) {
if (props.item.thumbnail) { if (props.item.thumbnail) {
@ -69,8 +94,10 @@ const updatePoster = () => {
} }
}; };
updateSource();
updatePoster(); updatePoster();
watch(props, (props: ThumbnailProps) => { watch(props, (props: ThumbnailProps) => {
const updates = useThumbnail(props.file?.file ?? props.item?.event); const updates = useThumbnail(props.file?.file ?? props.item?.event);
isVideo.value = updates.isVideo.value; isVideo.value = updates.isVideo.value;
@ -79,24 +106,10 @@ watch(props, (props: ThumbnailProps) => {
fileTypeIconClass = updates.fileTypeIconClass; fileTypeIconClass = updates.fileTypeIconClass;
fileName = updates.fileName; fileName = updates.fileName;
fileSize = updates.fileSize; fileSize = updates.fileSize;
updateSource();
updatePoster(); 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(() => { const loadingProgress = computed(() => {
if (item) { if (item) {
return previewOnly ? item.thumbnailProgress : item.srcProgress; return previewOnly ? item.thumbnailProgress : item.srcProgress;