diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue index f2e67fda37..5b1239a64a 100644 --- a/packages/nc-gui/components/cell/attachment/Carousel.vue +++ b/packages/nc-gui/components/cell/attachment/Carousel.vue @@ -145,17 +145,18 @@ watchOnce(emblaMainApi, async (emblaMainApi) => { v-else-if="isVideo(item.title, item.mimeType)" class="flex items-center w-full" :mime-type="item.mimeType" + :title="item.title" :src="getPossibleAttachmentSrc(item)" />
@@ -292,10 +293,4 @@ watchOnce(emblaMainApi, async (emblaMainApi) => { @apply items-center h-full w-full; } } - -/*.vjs-fluid { - &:not(.vjs-audio-only-mode) { - padding-top: 49.25% !important; - } -}*/ diff --git a/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue b/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue index ea6da3e269..d7ff14e017 100644 --- a/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue +++ b/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue @@ -1,11 +1,21 @@ @@ -25,10 +35,11 @@ const openMethod = ref<'google' | undefined>() diff --git a/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue b/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue index 5b9baac32f..8a6c5eda1f 100644 --- a/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue +++ b/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue @@ -1,11 +1,21 @@ @@ -30,14 +40,22 @@ const openMethod = ref<'browser' | 'google' | undefined>()
- + diff --git a/packages/nc-gui/components/cell/attachment/Preview/Video.vue b/packages/nc-gui/components/cell/attachment/Preview/Video.vue index 8304068bbf..845d4e7a1d 100644 --- a/packages/nc-gui/components/cell/attachment/Preview/Video.vue +++ b/packages/nc-gui/components/cell/attachment/Preview/Video.vue @@ -6,6 +6,7 @@ interface Props { src?: string[] mimeType?: string class?: string + title?: string } const props = withDefaults(defineProps(), { @@ -24,7 +25,9 @@ const player = ref() onMounted(() => { if (!videoPlayer.value) return - player.value = new Plyr(videoPlayer.value) + player.value = new Plyr(videoPlayer.value, { + previewThumbnails: {}, + }) emit('init', player.value) }) @@ -42,9 +45,10 @@ onBeforeUnmount(() => { crossorigin playsinline :class="{ + '!w-128 !h-72': isAudio(title ?? '', mimeType), [props.class]: props.class, }" - class="videoplayer h-auto w-full" + class="videoplayer w-full" > diff --git a/packages/nc-gui/utils/fileUtils.ts b/packages/nc-gui/utils/fileUtils.ts index e1611e71f9..005a54bdf7 100644 --- a/packages/nc-gui/utils/fileUtils.ts +++ b/packages/nc-gui/utils/fileUtils.ts @@ -68,6 +68,10 @@ const officeExt = [ 'csv', ] +const isAudio = (name: string, mimetype?: string) => { + return name?.toLowerCase().endsWith('.mp3') || mimetype?.startsWith('audio/') +} + const isVideo = (name: string, mimetype?: string) => { return videoExt.some((e) => name?.toLowerCase().endsWith(`.${e}`)) || mimetype?.startsWith('video/') } @@ -84,7 +88,7 @@ const isOffice = (name: string, mimetype?: string) => { return officeExt.some((e) => name?.toLowerCase().endsWith(`.${e}`)) } -export { isImage, imageExt, isVideo, isPdf, isOffice } +export { isImage, imageExt, isVideo, isPdf, isOffice, isAudio } // Ref : https://stackoverflow.com/a/12002275 // Tested in Mozilla Firefox browser, Chrome