feat: pdf viewer

packages/nc-gui/components/cell/attachment/Carousel.vue

@@ -88,7 +88,7 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
         >
           <NcCarouselContent>
             <NcCarouselItem v-for="(item, index) in visibleItems" :key="index">
-              <div class="w-full flex items-center">
+              <div class="w-full h-full justify-center flex items-center">
                 <LazyCellAttachmentPreviewImage
                   v-if="isImage(item.title, item.mimeType)"
                   class="nc-attachment-img-wrapper"
@@ -99,10 +99,14 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
 
                 <LazyCellAttachmentPreviewVideo
                   v-else-if="isVideo(item.title, item.mimeType)"
-                  class="!h-full"
+                  class="!h-full flex items-center"
                   :src="getPossibleAttachmentSrc(item)[0]"
                   :sources="getPossibleAttachmentSrc(item).map((src) => ({ src, type: item.mimeType }))"
                 />
+                <LazyCellAttachmentPreviewPdf
+                  v-else-if="isPdf(item.title, item.mimeType)"
+                  :src="getPossibleAttachmentSrc(item)[0]"
+                />
                 <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" />
                   <div class="text-gray-800 text-sm">{{ item.title }}</div>
@@ -143,6 +147,7 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
                   >
                     <GeneralIcon class="text-white" icon="play" />
                   </div>
+
                   <div v-else class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200">
                     <GeneralIcon class="text-white" icon="file" />
                   </div>
@@ -162,7 +167,11 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
 }
 
 .carousel-container {
-  @apply !w-full;
+  @apply !w-full flex items-center h-full;
+
+  .embla__container {
+    @apply items-center h-full w-full;
+  }
 }
 
 .vjs-fluid {

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+interface Props {
+  src: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <iframe :src="props.src" width="100%" height="100%"></iframe>
+</template>
+
+<style scoped lang="scss"></style>

packages/nc-gui/components/nc/Carousel/Item.vue

@@ -11,7 +11,7 @@ const props = defineProps<WithClassAsProps>()
     :class="{
       [props.class]: props.class,
     }"
-    class="min-w-0 shrink-0 flex justify-center items-center embla__slide grow-0 basis-full"
+    class="min-w-0 shrink-0 flex justify-center items-center embla__slide h-full grow-0 basis-full"
   >
     <slot />
   </div>

packages/nc-gui/utils/fileUtils.ts

@@ -44,7 +44,11 @@ const isImage = (name: string, mimetype?: string) => {
   return imageExt.some((e) => name?.toLowerCase().endsWith(`.${e}`)) || mimetype?.startsWith('image/')
 }
 
-export { isImage, imageExt, isVideo }
+const isPdf = (name: string, mimetype?: string) => {
+  return name?.toLowerCase().endsWith('.pdf') || mimetype?.startsWith('application/pdf')
+}
+
+export { isImage, imageExt, isVideo, isPdf }
 // Ref : https://stackoverflow.com/a/12002275
 
 // Tested in Mozilla Firefox browser, Chrome