feat: preview media attachments

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} 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>
 

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'

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'
     )

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}>

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,12 +52,14 @@
     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/')
-    )
+    return getType(contentType) !== 'other'
   }
 
   function clickHandler (e: MouseEvent): void {
@@ -70,7 +74,7 @@
     }
     closeTooltip()
     showPopup(
-      PDFViewer,
+      isPlayable(value.type) ? MediaViewer : PDFViewer,
       { file: value.file, name: value.name, contentType: value.type, value },
       isImage(value.type) ? 'centered' : 'float'
     )

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,7 @@
   $: icon = !paused ? Pause : Play
 </script>
 
-<div class="container flex-between">
+<div class="container flex-between" class:fullSize>
   <div>
     <CircleButton size="x-large" on:click={buttonClick} {icon} />
   </div>
@@ -51,5 +52,9 @@
     background-color: var(--accent-bg-color);
     border: 1px solid var(--divider-color);
     border-radius: 0.75rem;
+
+    &.fullSize {
+      width: 100%;
+    }
   }
 </style>

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

@@ -0,0 +1,112 @@
+<!--
+// 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} />
+      <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>

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'
 }