UBERF-4738: Fix attachments preview (#4259)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

plugins/attachment-resources/src/components/AttachmentActions.svelte

@@ -15,9 +15,9 @@
 <script lang="ts">
   import type { Attachment } from '@hcengineering/attachment'
   import { getResource } from '@hcengineering/platform'
-  import { showPopup, ActionIcon, IconMoreH, Menu } from '@hcengineering/ui'
-  import { Action } from '@hcengineering/view'
-  import { getFileUrl } from '@hcengineering/presentation'
+  import { PDFViewer, getFileUrl } from '@hcengineering/presentation'
+  import { ActionIcon, IconMoreH, IconOpen, Menu, closeTooltip, showPopup } from '@hcengineering/ui'
+  import view, { Action } from '@hcengineering/view'
 
   import attachmentPlugin from '../plugin'
   import FileDownload from './icons/FileDownload.svelte'
@@ -27,6 +27,25 @@
 
   let download: HTMLAnchorElement
 
+  $: contentType = attachment?.type ?? ''
+  $: openable =
+    contentType.includes('application/pdf') || contentType.startsWith('image/') || contentType.startsWith('video/')
+
+  function showPreview (e: MouseEvent): void {
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.metaKey || e.ctrlKey) {
+      window.open((e.target as HTMLAnchorElement).href, '_blank')
+      return
+    }
+    closeTooltip()
+    showPopup(
+      PDFViewer,
+      { file: attachment.file, name: attachment.name, contentType, value: attachment },
+      contentType.startsWith('image/') ? 'centered' : 'float'
+    )
+  }
+
   $: saveAttachmentAction = isSaved
     ? ({
         label: attachmentPlugin.string.RemoveAttachmentFromSaved,
@@ -42,17 +61,28 @@
       Menu,
       {
         actions: [
+          ...(openable
+            ? [
+                {
+                  label: view.string.Open,
+                  icon: IconOpen,
+                  action: async (props: any, evt: MouseEvent) => {
+                    showPreview(evt)
+                  }
+                }
+              ]
+            : []),
           {
             label: saveAttachmentAction.label,
             icon: saveAttachmentAction.icon,
-            action: async (evt: MouseEvent) => {
+            action: async (props: any, evt: MouseEvent) => {
               const impl = await getResource(saveAttachmentAction.action)
               await impl(attachment, evt)
             }
           },
           {
             label: attachmentPlugin.string.DeleteFile,
-            action: async (evt: MouseEvent) => {
+            action: async (props: any, evt: MouseEvent) => {
               const impl = await getResource(attachmentPlugin.actionImpl.DeleteAttachment)
               await impl(attachment, evt)
             }
@@ -66,19 +96,28 @@
 
 <div class="flex">
   <a
-    class="mr-1"
+    class="mr-1 flex-row-center gap-2 p-1"
     href={getFileUrl(attachment.file, 'full', attachment.name)}
     download={attachment.name}
     bind:this={download}
     on:click|stopPropagation
   >
+    {#if openable}
+      <ActionIcon
+        icon={IconOpen}
+        size={'medium'}
+        action={(evt) => {
+          showPreview(evt)
+        }}
+      />
+    {/if}
     <ActionIcon
       icon={FileDownload}
-      size={'small'}
+      size={'medium'}
       action={() => {
         download.click()
       }}
     />
   </a>
-  <ActionIcon icon={IconMoreH} size={'small'} action={showMenu} />
+  <ActionIcon icon={IconMoreH} size={'medium'} action={showMenu} />
 </div>

plugins/attachment-resources/src/components/AttachmentPresenter.svelte

@@ -37,14 +37,16 @@
     const ext = parts[parts.length - 1]
     return ext.substring(0, 4).toUpperCase()
   }
-  function isImage (contentType: string) {
+  function isImage (contentType: string): boolean {
     return contentType.startsWith('image/')
   }
-  function openEmbedded (contentType: string) {
-    return contentType.includes('application/pdf') || contentType.startsWith('image/')
+  function openEmbedded (contentType: string): boolean {
+    return (
+      contentType.includes('application/pdf') || contentType.startsWith('image/') || contentType.startsWith('video/')
+    )
   }
 
-  function clickHandler (e: MouseEvent) {
+  function clickHandler (e: MouseEvent): void {
     if (!openEmbedded(value.type)) return
     e.preventDefault()
     e.stopPropagation()
@@ -60,7 +62,7 @@
     )
   }
 
-  function middleClickHandler (e: MouseEvent) {
+  function middleClickHandler (e: MouseEvent): void {
     if (e.button !== 1) return
     e.preventDefault()
     e.stopPropagation()