feat: add fallback mechanism,

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)"
               />
               <LazyCellAttachmentPreviewPdf
                 v-else-if="isPdf(item.title, item.mimeType)"
                 class="keep-open"
-                :src="getPossibleAttachmentSrc(item)[0]"
+                :src="getPossibleAttachmentSrc(item)"
               />
               <LazyCellAttachmentPreviewMiscOffice
                 v-else-if="isOffice(item.title, item.mimeType)"
                 class="keep-open"
-                :src="getPossibleAttachmentSrc(item)[0]"
+                :src="getPossibleAttachmentSrc(item)"
               />
               <div v-else class="bg-white h-full flex flex-col justify-center rounded-md gap-1 items-center w-full">
                 <component :is="iconMap.file" class="text-gray-600 w-20 h-20" />
@@ -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;
-  }
-}*/
 </style>

packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue

@@ -1,11 +1,21 @@
 <script setup lang="ts">
 interface Props {
-  src: string
+  src: string[]
   class?: string
 }
 
 const props = defineProps<Props>()
 
+const currentIndex = ref(0)
+
+const handleError = () => {
+  if (currentIndex.value < props.src.length - 1) {
+    currentIndex.value = currentIndex.value + 1
+  } else {
+    currentIndex.value = -1
+  }
+}
+
 const openMethod = ref<'google' | undefined>()
 </script>
 
@@ -25,10 +35,11 @@ const openMethod = ref<'google' | undefined>()
   <iframe
     v-else-if="openMethod === 'google'"
     :class="props.class"
-    :src="`https://docs.google.com/viewer?url=${encodeURIComponent(src)}&embedded=true`"
+    :src="`https://docs.google.com/viewer?url=${encodeURIComponent(src[currentIndex])}&embedded=true`"
     width="100%"
     height="100%"
     frameborder="0"
+    @error="handleError"
   ></iframe>
 </template>
 

packages/nc-gui/components/cell/attachment/Preview/Pdf.vue

@@ -1,11 +1,21 @@
 <script setup lang="ts">
 interface Props {
-  src: string
+  src: string[]
   class?: string
 }
 
 const props = defineProps<Props>()
 
+const currentIndex = ref(0)
+
+const handleError = () => {
+  if (currentIndex.value < props.src.length - 1) {
+    currentIndex.value = currentIndex.value + 1
+  } else {
+    currentIndex.value = -1
+  }
+}
+
 const openMethod = ref<'browser' | 'google' | undefined>()
 </script>
 
@@ -30,14 +40,22 @@ const openMethod = ref<'browser' | 'google' | undefined>()
     </div>
   </div>
 
-  <iframe v-if="openMethod === 'browser'" :class="props.class" :src="props.src" width="100%" height="100%"></iframe>
+  <iframe
+    v-if="openMethod === 'browser'"
+    :class="props.class"
+    :src="src[currentIndex]"
+    width="100%"
+    height="100%"
+    @error="handleError"
+  ></iframe>
   <iframe
     v-else-if="openMethod === 'google'"
     :class="props.class"
-    :src="`https://docs.google.com/viewer?url=${encodeURIComponent(src)}&embedded=true`"
+    :src="`https://docs.google.com/viewer?url=${encodeURIComponent(src[currentIndex])}&embedded=true`"
     width="100%"
     height="100%"
     frameborder="0"
+    @error="handleError"
   ></iframe>
 </template>
 

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<Props>(), {
@@ -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"
   >
     <source v-for="(src, id) in props.src" :key="id" :src="src" :type="mimeType" />
   </video>

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