From 8b251ba12b6b4e882440227103e2a37db2b2ea71 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 24 Jul 2024 07:23:26 +0000
Subject: [PATCH] fix: ux fixes

---
 packages/nc-gui/assets/nc-icons/globe.svg     | 12 +++
 .../components/cell/attachment/Carousel.vue   | 80 +++++++++++++------
 .../cell/attachment/Preview/MiscOffice.vue    |  2 -
 .../cell/attachment/Preview/Pdf.vue           |  6 +-
 .../cell/attachment/Preview/Video.vue         | 21 ++---
 packages/nc-gui/utils/fileUtils.ts            |  3 +-
 packages/nc-gui/utils/iconUtils.ts            |  2 +
 7 files changed, 81 insertions(+), 45 deletions(-)
 create mode 100644 packages/nc-gui/assets/nc-icons/globe.svg

diff --git a/packages/nc-gui/assets/nc-icons/globe.svg b/packages/nc-gui/assets/nc-icons/globe.svg
new file mode 100644
index 0000000000..98f1340af7
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/globe.svg
@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="globe" clip-path="url(#clip0_184_5557)">
+<path id="Vector" d="M8.00001 14.6666C11.6819 14.6666 14.6667 11.6819 14.6667 7.99998C14.6667 4.31808 11.6819 1.33331 8.00001 1.33331C4.31811 1.33331 1.33334 4.31808 1.33334 7.99998C1.33334 11.6819 4.31811 14.6666 8.00001 14.6666Z" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M1.33334 8H14.6667" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M8.00001 1.33331C9.66753 3.15888 10.6152 5.528 10.6667 7.99998C10.6152 10.472 9.66753 12.8411 8.00001 14.6666C6.33249 12.8411 5.38484 10.472 5.33334 7.99998C5.38484 5.528 6.33249 3.15888 8.00001 1.33331V1.33331Z" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_184_5557">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 03fb1bc93b..81626027b4 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -62,6 +62,20 @@ const onSelect = () => {
   emblaThumbnailApi.value.scrollTo(newSnap)
 }
 
+const goPrev = () => {
+  if (!emblaMainApi.value || !emblaThumbnailApi.value) return
+
+  emblaMainApi.value.scrollPrev()
+  emblaThumbnailApi.value.scrollPrev()
+}
+
+const goNext = () => {
+  if (!emblaMainApi.value || !emblaThumbnailApi.value) return
+
+  emblaMainApi.value.scrollNext()
+  emblaThumbnailApi.value.scrollNext()
+}
+
 watchOnce(emblaMainApi, async (emblaMainApi) => {
   if (!emblaMainApi) return
 
@@ -112,10 +126,13 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
         </h3>
       </div>
 
-      <NcCarousel class="!absolute inset-16 keep-open flex justify-center items-center" @init-api="(val) => (emblaMainApi = val)">
+      <NcCarousel
+        class="!absolute inset-y-16 inset-x-24 keep-open flex justify-center items-center"
+        @init-api="(val) => (emblaMainApi = val)"
+      >
         <NcCarouselContent>
           <NcCarouselItem v-for="(item, index) in visibleItems" :key="index">
-            <div class="w-full h-full justify-center flex items-center">
+            <div class="justify-center w-full h-full flex items-center">
               <LazyCellAttachmentPreviewImage
                 v-if="isImage(item.title, item.mimeType)"
                 class="nc-attachment-img-wrapper"
@@ -126,7 +143,7 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
 
               <LazyCellAttachmentPreviewVideo
                 v-else-if="isVideo(item.title, item.mimeType)"
-                class="!h-full flex items-center"
+                class="flex items-center w-full"
                 :src="getPossibleAttachmentSrc(item)[0]"
                 :sources="getPossibleAttachmentSrc(item).map((src) => ({ src, type: item.mimeType }))"
               />
@@ -149,9 +166,24 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
         </NcCarouselContent>
       </NcCarousel>
 
-      <div class="absolute w-full !bottom-3 max-h-18 z-30 flex items-center justify-center">
+      <div
+        v-if="emblaMainApi?.canScrollPrev()"
+        class="absolute keep-open text-gray-400 hover:text-white cursor-pointer text-white left-2 h-full flex items-center inset-y-0 my-0"
+        @click="goPrev"
+      >
+        <component :is="iconMap.arrowLeft" class="text-7xl" />
+      </div>
+      <div
+        v-if="emblaMainApi?.canScrollNext()"
+        class="absolute keep-open text-gray-400 hover:text-white cursor-pointer text-white right-2 h-full flex items-center inset-y-0 my-0"
+        @click="goNext"
+      >
+        <component :is="iconMap.arrowRight" class="text-7xl" />
+      </div>
+
+      <div class="absolute w-full !bottom-2 max-h-18 z-30 flex items-center justify-center">
         <NcCarousel class="absolute max-w-sm" @init-api="(val) => (emblaThumbnailApi = val)">
-          <NcCarouselContent class="!flex !gap-2 ml-0">
+          <NcCarouselContent class="!flex !gap-2">
             <NcCarouselItem
               v-for="(item, index) in visibleItems"
               :key="index"
@@ -198,18 +230,6 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
       </div>
 
       <div class="absolute keep-open right-2 z-30 bottom-3 transition-all gap-3 transition-ease-in-out !h-6 flex items-center">
-        <NcTooltip v-if="!isReadonly" placement="bottom">
-          <template #title> {{ $t('title.removeFile') }} </template>
-          <NcButton
-            class="!text-red-500 !hover:bg-transparent"
-            size="xsmall"
-            type="text"
-            @click="onRemoveFileClick(selectedFile.title, selectedIndex)"
-          >
-            <component :is="iconMap.delete" v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)" />
-          </NcButton>
-        </NcTooltip>
-
         <NcTooltip v-if="!isSharedForm || (!isReadonly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
           <template #title> {{ $t('title.renameFile') }} </template>
           <NcButton
@@ -222,12 +242,24 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
           </NcButton>
         </NcTooltip>
 
-        <NcButton size="small" @click="downloadFile(selectedFile)">
-          <div class="flex items-center gap-2 justify-center">
+        <NcTooltip v-if="!isReadonly" placement="bottom">
+          <template #title> {{ $t('title.downloadFile') }} </template>
+          <NcButton class="!hover:bg-transparent !text-white" size="xsmall" type="text" @click="downloadFile(selectedFile)">
             <component :is="iconMap.download" />
-            {{ $t('title.downloadFile') }}
-          </div>
-        </NcButton>
+          </NcButton>
+        </NcTooltip>
+
+        <NcTooltip v-if="!isReadonly" placement="bottom">
+          <template #title> {{ $t('title.removeFile') }} </template>
+          <NcButton
+            class="!hover:bg-transparent !text-white"
+            size="xsmall"
+            type="text"
+            @click="onRemoveFileClick(selectedFile.title, selectedIndex)"
+          >
+            <component :is="iconMap.delete" v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)" />
+          </NcButton>
+        </NcTooltip>
       </div>
       <GeneralDeleteModal v-model:visible="isModalOpen" entity-name="File" :on-delete="() => handleFileDelete(filetoDelete.i)">
         <template #entity-preview>
@@ -261,9 +293,9 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
   }
 }
 
-.vjs-fluid {
+/*.vjs-fluid {
   &:not(.vjs-audio-only-mode) {
     padding-top: 49.25% !important;
   }
-}
+}*/
 </style>
diff --git a/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue b/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue
index a760691c7f..ea6da3e269 100644
--- a/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue
+++ b/packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue
@@ -13,8 +13,6 @@ const openMethod = ref<'google' | undefined>()
   <div v-if="!openMethod" :class="props.class" class="flex flex-col text-white gap-2 items-center justify-center">
     <GeneralIcon class="w-28 h-28" icon="pdfFile" />
 
-    <h1 class="font-bold text-white text-center text-lg">Opening your file in external service exposes your data</h1>
-
     <NcButton type="secondary" @click="openMethod = 'google'">
       <div class="flex items-center gap-1">
         <GeneralIcon class="w-4 h-4" icon="googleDocs" />
diff --git a/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue b/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
index 5b4a36386f..5b9baac32f 100644
--- a/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
+++ b/packages/nc-gui/components/cell/attachment/Preview/Pdf.vue
@@ -13,12 +13,10 @@ const openMethod = ref<'browser' | 'google' | undefined>()
   <div v-if="!openMethod" :class="props.class" class="flex flex-col text-white gap-2 items-center justify-center">
     <GeneralIcon class="w-28 h-28" icon="pdfFile" />
 
-    <h1 class="font-bold text-white text-center text-lg">Opening your file in external service exposes your data</h1>
-
     <div class="flex items-center justify-center gap-2">
-      <NcButton @click="openMethod = 'browser'">
+      <NcButton type="secondary" @click="openMethod = 'browser'">
         <div class="flex items-center gap-1">
-          <GeneralIcon icon="lock" />
+          <GeneralIcon icon="globe" />
           Open in browser
         </div>
       </NcButton>
diff --git a/packages/nc-gui/components/cell/attachment/Preview/Video.vue b/packages/nc-gui/components/cell/attachment/Preview/Video.vue
index a7a7b831a5..adbe9428c3 100644
--- a/packages/nc-gui/components/cell/attachment/Preview/Video.vue
+++ b/packages/nc-gui/components/cell/attachment/Preview/Video.vue
@@ -57,7 +57,6 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   preload: 'metadata',
-  aspectRatio: '16:9',
   controls: true,
   audioOnlyMode: false,
   audioPosterMode: false,
@@ -66,18 +65,13 @@ const props = withDefaults(defineProps<Props>(), {
   enableDocumentPictireInPicture: false,
   enableSmoothSeeking: true,
   fluid: true,
-  fullScreen: {
-    options: {
-      navigationUI: 'hide',
-      id: undefined,
-    },
-  },
   language: 'en',
-  liveui: false,
+  liveui: true,
   playsinline: true,
   preferFullWindow: false,
-  responsive: false,
+  responsive: true,
   restoreEl: false,
+  class: '',
 })
 
 const emit = defineEmits<Emits>()
@@ -104,14 +98,13 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div
-    class="w-full"
+  <video
+    ref="videoPlayer"
     :class="{
       [props.class]: props.class,
     }"
-  >
-    <video ref="videoPlayer" class="video-js h-full w-full"></video>
-  </div>
+    class="video-js h-auto w-full"
+  ></video>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/packages/nc-gui/utils/fileUtils.ts b/packages/nc-gui/utils/fileUtils.ts
index 94eec1e448..e1611e71f9 100644
--- a/packages/nc-gui/utils/fileUtils.ts
+++ b/packages/nc-gui/utils/fileUtils.ts
@@ -19,6 +19,7 @@ const videoExt = [
   'webm',
   'mpg',
   'mp2',
+  'mp3',
   'mpeg',
   'ogg',
   'mp4',
@@ -33,7 +34,6 @@ const videoExt = [
   '3g2',
   'vob',
   'ts',
-  'ts',
 ]
 
 const officeExt = [
@@ -65,6 +65,7 @@ const officeExt = [
   'xps',
   'zip',
   'rar',
+  'csv',
 ]
 
 const isVideo = (name: string, mimetype?: string) => {
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 0141fc302c..d94b2d8630 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -207,6 +207,7 @@ import NcDrag from '~icons/nc-icons/drag'
 import NcRefresh from '~icons/nc-icons/refresh'
 import NcPlay from '~icons/nc-icons/play'
 import GoogleDocs from '~icons/nc-icons/google-docs'
+import NcGlobe from '~icons/nc-icons/globe'
 
 // keep it for reference
 // todo: remove it after all icons are migrated
@@ -644,6 +645,7 @@ export const iconMap = {
   play: NcPlay,
   googleDocs: GoogleDocs,
   pdfFile: MdiPdf,
+  globe: NcGlobe,
 }
 
 export const getMdiIcon = (type: string): any => {