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

Support video thumbnails

Browse source
This commit is contained in:
N-Pex 2025-07-10 09:46:07 +02:00
parent 4e755ace36
commit 035069f505
4 changed files with 124 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<template>
<div ref="thumbnailRef" style="width: 100%; height: 100%">
<v-responsive v-if="isVideo && source" :class="{ 'thumbnail-item': true, preview: previewOnly }">
<video :src="source" :controls="!previewOnly" class="w-100 h-100">
<v-responsive v-if="isVideo && (source || poster)" :class="{ 'thumbnail-item': true, preview: previewOnly }">
<video :src="source" :poster="poster" :controls="!previewOnly" class="w-100 h-100">
{{ $t("fallbacks.video_file") }}
</video>
</v-responsive>
@ -50,6 +50,26 @@ const emits = defineEmits<ThumbnailEmits>();
let { isVideo, isImage, fileTypeIcon, fileTypeIconClass, fileName, fileSize } = useThumbnail(file?.file ?? item?.event);
const fileURL: Ref<string | undefined> = ref(undefined);
const poster: Ref<string | undefined> = ref(undefined);
const updatePoster = () => {
if (props.item && isVideo.value) {
if (props.item.thumbnail) {
poster.value = props.item.thumbnail;
} else {
props.item
.loadThumbnail()
.then((url) => {
poster.value = url.data;
})
.catch(() => {
poster.value = undefined;
});
}
}
};
updatePoster();
watch(props, (props: ThumbnailProps) => {
const updates = useThumbnail(props.file?.file ?? props.item?.event);
@ -59,6 +79,7 @@ watch(props, (props: ThumbnailProps) => {
fileTypeIconClass = updates.fileTypeIconClass;
fileName = updates.fileName;
fileSize = updates.fileSize;
updatePoster();
});
const source = computed(() => {