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