From e96cd2a265a30a8e8fcde107ce44eefeaeee74aa Mon Sep 17 00:00:00 2001
From: Chemar Braithwaite <chemarbraithwaite@Chemars-MacBook-Pro.local>
Date: Sat, 30 Mar 2024 10:52:48 -0500
Subject: [PATCH 1/2] feat: allow preview for video and audio files

Signed-off-by: Chemar Braithwaite <chemarbraithwaite@Chemars-MacBook-Pro.local>
---
 .../src/components/PDFViewer.svelte           |   7 +-
 packages/presentation/src/index.ts            |   1 +
 .../src/components/AttachmentActions.svelte   |   3 +-
 .../AttachmentGalleryPresenter.svelte         |  17 +--
 .../src/components/AttachmentPresenter.svelte |  12 +-
 .../src/components/AudioPlayer.svelte         |   9 +-
 .../src/components/MediaViewer.svelte         | 116 ++++++++++++++++++
 plugins/attachment-resources/src/utils.ts     |   8 +-
 8 files changed, 157 insertions(+), 16 deletions(-)
 create mode 100644 plugins/attachment-resources/src/components/MediaViewer.svelte

diff --git a/packages/presentation/src/components/PDFViewer.svelte b/packages/presentation/src/components/PDFViewer.svelte
index 1198deea88b..f237fe1a674 100644
--- a/packages/presentation/src/components/PDFViewer.svelte
+++ b/packages/presentation/src/components/PDFViewer.svelte
@@ -42,6 +42,7 @@
     }
   })
   let download: HTMLAnchorElement
+  $: src = getFileUrl(file, 'full', name)
 </script>
 
 <ActionContext context={{ mode: 'browser' }} />
@@ -66,7 +67,7 @@
   </svelte:fragment>
 
   <svelte:fragment slot="utils">
-    <a class="no-line" href={getFileUrl(file, 'full', name)} download={name} bind:this={download}>
+    <a class="no-line" href={src} download={name} bind:this={download}>
       <Button
         icon={Download}
         kind={'ghost'}
@@ -80,10 +81,10 @@
 
   {#if contentType && contentType.startsWith('image/')}
     <div class="pdfviewer-content img">
-      <img class="img-fit" src={getFileUrl(file, 'full', name)} alt="" />
+      <img class="img-fit" src={src} alt="" />
     </div>
   {:else}
-    <iframe class="pdfviewer-content" src={getFileUrl(file, 'full', name) + '#view=FitH&navpanes=0'} title="" />
+    <iframe class="pdfviewer-content" src={src + '#view=FitH&navpanes=0'} title="" />
   {/if}
 </Dialog>
 
diff --git a/packages/presentation/src/index.ts b/packages/presentation/src/index.ts
index 4592aba5e71..31924c59ba5 100644
--- a/packages/presentation/src/index.ts
+++ b/packages/presentation/src/index.ts
@@ -37,6 +37,7 @@ export { default as ObjectSearchPopup } from './components/ObjectSearchPopup.sve
 export { default as IndexedDocumentPreview } from './components/IndexedDocumentPreview.svelte'
 export { default as IndexedDocumentCompare } from './components/IndexedDocumentCompare.svelte'
 export { default as NavLink } from './components/NavLink.svelte'
+export { default as IconDownload } from './components/icons/Download.svelte'
 export { default as IconForward } from './components/icons/Forward.svelte'
 export { default as Breadcrumbs } from './components/breadcrumbs/Breadcrumbs.svelte'
 export { default as BreadcrumbsElement } from './components/breadcrumbs/BreadcrumbsElement.svelte'
diff --git a/plugins/attachment-resources/src/components/AttachmentActions.svelte b/plugins/attachment-resources/src/components/AttachmentActions.svelte
index b91bad6c668..84264093537 100644
--- a/plugins/attachment-resources/src/components/AttachmentActions.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentActions.svelte
@@ -18,6 +18,7 @@
   import { PDFViewer, getFileUrl } from '@hcengineering/presentation'
   import { Action as UIAction, ActionIcon, IconMoreH, IconOpen, Menu, closeTooltip, showPopup } from '@hcengineering/ui'
   import view, { Action } from '@hcengineering/view'
+  import MediaViewer from './MediaViewer.svelte'
 
   import attachmentPlugin from '../plugin'
   import FileDownload from './icons/FileDownload.svelte'
@@ -41,7 +42,7 @@
     }
     closeTooltip()
     showPopup(
-      PDFViewer,
+      contentType.startsWith('video/') ? MediaViewer : PDFViewer,
       { file: attachment.file, name: attachment.name, contentType, value: attachment },
       contentType.startsWith('image/') ? 'centered' : 'float'
     )
diff --git a/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte b/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte
index 11e2b26ea04..80922ba6ccd 100644
--- a/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte
@@ -16,6 +16,8 @@
   import type { Attachment } from '@hcengineering/attachment'
   import { showPopup, closeTooltip } from '@hcengineering/ui'
   import { PDFViewer, getFileUrl } from '@hcengineering/presentation'
+  import MediaViewer from './MediaViewer.svelte'
+  import { getType } from '../utils'
   import filesize from 'filesize'
 
   export let value: Attachment
@@ -30,21 +32,22 @@
     return ext.substring(0, 4).toUpperCase()
   }
 
-  function isPDF (contentType: string) {
-    return contentType.includes('application/pdf')
+  function isPlayable (contentType: string) {
+    const type = getType(contentType)
+    return type === 'video' || type === 'audio'
   }
   function isImage (contentType: string) {
-    return contentType.startsWith('image/')
+    return getType(contentType) === 'image'
   }
   function isEmbedded (contentType: string) {
-    return isPDF(contentType) || isImage(contentType)
+    return getType(contentType) !== 'other'
   }
 
   function openAttachment () {
     closeTooltip()
     showPopup(
-      PDFViewer,
-      { file: value.file, name: value.name, contentType: value.type },
+      isPlayable(value.type) ? MediaViewer : PDFViewer,
+      { file: value.file, name: value.name, contentType: value.type, value },
       isImage(value.type) ? 'centered' : 'float'
     )
   }
@@ -60,7 +63,7 @@
       </div>
     {:else}
       <div class="cellMiscPreview">
-        {#if isPDF(value.type)}
+        {#if isEmbedded(value.type)}
           <!-- svelte-ignore a11y-click-events-have-key-events -->
           <!-- svelte-ignore a11y-no-static-element-interactions -->
           <div class="flex-center extensionIcon" on:click={openAttachment}>
diff --git a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
index 1e7015c7f56..3737f52d8d5 100644
--- a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
@@ -21,6 +21,8 @@
   import filesize from 'filesize'
   import core from '@hcengineering/core'
   import { permissionsStore } from '@hcengineering/view-resources'
+  import MediaViewer from './MediaViewer.svelte'
+  import { getType } from '../utils'
 
   import AttachmentName from './AttachmentName.svelte'
 
@@ -50,11 +52,15 @@
     return ext.substring(0, 4).toUpperCase()
   }
   function isImage (contentType: string): boolean {
-    return contentType.startsWith('image/')
+    return getType(contentType) === 'image'
+  }
+  function isPlayable (contentType: string) {
+    const type = getType(contentType)
+    return type === 'video' || type === 'audio'
   }
   function openEmbedded (contentType: string): boolean {
     return (
-      contentType.includes('application/pdf') || contentType.startsWith('image/') || contentType.startsWith('video/')
+      getType(contentType) !== 'other'
     )
   }
 
@@ -70,7 +76,7 @@
     }
     closeTooltip()
     showPopup(
-      PDFViewer,
+      isPlayable(value.type) ? MediaViewer : PDFViewer,
       { file: value.file, name: value.name, contentType: value.type, value },
       isImage(value.type) ? 'centered' : 'float'
     )
diff --git a/plugins/attachment-resources/src/components/AudioPlayer.svelte b/plugins/attachment-resources/src/components/AudioPlayer.svelte
index e8ed028d694..12e37975829 100644
--- a/plugins/attachment-resources/src/components/AudioPlayer.svelte
+++ b/plugins/attachment-resources/src/components/AudioPlayer.svelte
@@ -20,6 +20,7 @@
   import Pause from './icons/Pause.svelte'
 
   export let value: Attachment
+  export let fullSize = false
 
   let time = 0
   let duration = Number.POSITIVE_INFINITY
@@ -32,7 +33,9 @@
   $: icon = !paused ? Pause : Play
 </script>
 
-<div class="container flex-between">
+<div class="container flex-between"
+    class:fullSize={fullSize}
+>
   <div>
     <CircleButton size="x-large" on:click={buttonClick} {icon} />
   </div>
@@ -51,5 +54,9 @@
     background-color: var(--accent-bg-color);
     border: 1px solid var(--divider-color);
     border-radius: 0.75rem;
+
+    &.fullSize {
+      width: 100%;
+    }
   }
 </style>
diff --git a/plugins/attachment-resources/src/components/MediaViewer.svelte b/plugins/attachment-resources/src/components/MediaViewer.svelte
new file mode 100644
index 00000000000..fb8fea45ee9
--- /dev/null
+++ b/plugins/attachment-resources/src/components/MediaViewer.svelte
@@ -0,0 +1,116 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  // import { Doc } from '@hcengineering/core'
+  import { Button, Dialog } from '@hcengineering/ui'
+  import type { Attachment } from '@hcengineering/attachment'
+  import AudioPlayer from './AudioPlayer.svelte'
+  import { createEventDispatcher, onMount } from 'svelte'
+  import presentation, { ActionContext, PDFViewer, IconDownload, getFileUrl } from '@hcengineering/presentation'
+  import { getType } from '../utils'
+
+  export let value: Attachment
+  export let showIcon = true
+  export let fullSize = false
+
+  const dispatch = createEventDispatcher()
+
+  function iconLabel (name: string): string {
+    const parts = name.split('.')
+    const ext = parts[parts.length - 1]
+    return ext.substring(0, 4).toUpperCase()
+  }
+  onMount(() => {
+    if (fullSize) {
+      dispatch('fullsize')
+    }
+  })
+  let download: HTMLAnchorElement
+  $: type = getType(value.type)
+  $: src = getFileUrl(value.file, 'full', value.name)
+</script>
+
+
+
+<ActionContext context={{ mode: 'browser' }} />
+<Dialog
+  isFullSize
+  on:fullsize
+  on:close={() => {
+    console.log('close')
+    dispatch('close')
+  }}
+>
+  <svelte:fragment slot="title">
+    <div class="antiTitle icon-wrapper">
+      {#if showIcon}
+        <div class="wrapped-icon">
+          <div class="flex-center icon">
+            {iconLabel(value.name)}
+          </div>
+        </div>
+      {/if}
+      <span class="wrapped-title">{value.name}</span>
+    </div>
+  </svelte:fragment>
+
+  <svelte:fragment slot="utils">
+    <a class="no-line" href={src} download={value.name} bind:this={download}>
+      <Button
+        icon={IconDownload}
+        kind={'ghost'}
+        on:click={() => {
+          download.click()
+        }}
+        showTooltip={{ label: presentation.string.Download }}
+      />
+    </a>
+  </svelte:fragment>
+
+
+  {#if type === 'video'}
+    <video controls preload={'auto'}>
+      <source src={src} />
+      <track kind="captions" label={value.name} />
+    </video>
+  {:else if type === 'audio'}
+    <AudioPlayer {value} fullSize={true} />
+  {:else}
+    <iframe class="pdfviewer-content" src={src + '#view=FitH&navpanes=0'} title="" />
+  {/if}
+</Dialog>
+
+<style lang="scss">
+  .icon {
+    position: relative;
+    flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
+    font-weight: 500;
+    font-size: 0.625rem;
+    color: var(--primary-button-color);
+    background-color: var(--primary-button-default);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 0.5rem;
+    cursor: pointer;
+  }
+
+  video {
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 0.75rem;
+  }
+
+</style>
diff --git a/plugins/attachment-resources/src/utils.ts b/plugins/attachment-resources/src/utils.ts
index ca2cab4f23d..14591f885a6 100644
--- a/plugins/attachment-resources/src/utils.ts
+++ b/plugins/attachment-resources/src/utils.ts
@@ -105,7 +105,7 @@ export async function createAttachments (
   }
 }
 
-export function getType (type: string): 'image' | 'video' | 'audio' | 'pdf' | 'other' {
+export function getType (type: string): 'image' | 'text' | 'json' | 'video' | 'audio' | 'pdf' | 'other' {
   if (type.startsWith('image/')) {
     return 'image'
   }
@@ -118,6 +118,12 @@ export function getType (type: string): 'image' | 'video' | 'audio' | 'pdf' | 'o
   if (type.includes('application/pdf')) {
     return 'pdf'
   }
+  if (type === 'application/json') {
+    return 'json'
+  }
+  if (type.startsWith('text/')) {
+    return 'text'
+  }
 
   return 'other'
 }

From 14351b4d144fb448b5af6173ad573469ac66d19a Mon Sep 17 00:00:00 2001
From: Chemar Braithwaite <chemarbraithwaite@Chemars-MacBook-Pro.local>
Date: Sat, 30 Mar 2024 11:09:14 -0500
Subject: [PATCH 2/2] chore: update code formatting

Signed-off-by: Chemar Braithwaite <chemarbraithwaite@Chemars-MacBook-Pro.local>
---
 packages/presentation/src/components/PDFViewer.svelte       | 2 +-
 .../src/components/AttachmentPresenter.svelte               | 4 +---
 .../attachment-resources/src/components/AudioPlayer.svelte  | 4 +---
 .../attachment-resources/src/components/MediaViewer.svelte  | 6 +-----
 4 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/packages/presentation/src/components/PDFViewer.svelte b/packages/presentation/src/components/PDFViewer.svelte
index f237fe1a674..1b81ad2ca52 100644
--- a/packages/presentation/src/components/PDFViewer.svelte
+++ b/packages/presentation/src/components/PDFViewer.svelte
@@ -81,7 +81,7 @@
 
   {#if contentType && contentType.startsWith('image/')}
     <div class="pdfviewer-content img">
-      <img class="img-fit" src={src} alt="" />
+      <img class="img-fit" {src} alt="" />
     </div>
   {:else}
     <iframe class="pdfviewer-content" src={src + '#view=FitH&navpanes=0'} title="" />
diff --git a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
index 3737f52d8d5..012e34d2119 100644
--- a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
@@ -59,9 +59,7 @@
     return type === 'video' || type === 'audio'
   }
   function openEmbedded (contentType: string): boolean {
-    return (
-      getType(contentType) !== 'other'
-    )
+    return getType(contentType) !== 'other'
   }
 
   function clickHandler (e: MouseEvent): void {
diff --git a/plugins/attachment-resources/src/components/AudioPlayer.svelte b/plugins/attachment-resources/src/components/AudioPlayer.svelte
index 12e37975829..76471c3c17a 100644
--- a/plugins/attachment-resources/src/components/AudioPlayer.svelte
+++ b/plugins/attachment-resources/src/components/AudioPlayer.svelte
@@ -33,9 +33,7 @@
   $: icon = !paused ? Pause : Play
 </script>
 
-<div class="container flex-between"
-    class:fullSize={fullSize}
->
+<div class="container flex-between" class:fullSize>
   <div>
     <CircleButton size="x-large" on:click={buttonClick} {icon} />
   </div>
diff --git a/plugins/attachment-resources/src/components/MediaViewer.svelte b/plugins/attachment-resources/src/components/MediaViewer.svelte
index fb8fea45ee9..1d77b09b2bd 100644
--- a/plugins/attachment-resources/src/components/MediaViewer.svelte
+++ b/plugins/attachment-resources/src/components/MediaViewer.svelte
@@ -42,8 +42,6 @@
   $: src = getFileUrl(value.file, 'full', value.name)
 </script>
 
-
-
 <ActionContext context={{ mode: 'browser' }} />
 <Dialog
   isFullSize
@@ -79,10 +77,9 @@
     </a>
   </svelte:fragment>
 
-
   {#if type === 'video'}
     <video controls preload={'auto'}>
-      <source src={src} />
+      <source {src} />
       <track kind="captions" label={value.name} />
     </video>
   {:else if type === 'audio'}
@@ -112,5 +109,4 @@
     max-height: 100%;
     border-radius: 0.75rem;
   }
-
 </style>