fix: extract video player to separate component (#8086)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>

common/config/rush/pnpm-lock.yaml

@@ -26158,6 +26158,7 @@ snapshots:
       eslint-plugin-promise: 6.1.1(eslint@8.56.0)
       eslint-plugin-svelte: 2.35.1(eslint@8.56.0)(svelte@4.2.19)(ts-node@10.9.2(@types/node@20.11.19)(typescript@5.3.3))
       fast-equals: 5.2.2
+      hls.js: 1.5.20
       jest: 29.7.0(@types/node@20.11.19)(ts-node@10.9.2(@types/node@20.11.19)(typescript@5.3.3))
       prettier: 3.2.5
       prettier-plugin-svelte: 3.2.2(prettier@3.2.5)(svelte@4.2.19)

packages/ui/package.json

@@ -49,7 +49,8 @@
     "date-fns-tz": "^2.0.0",
     "dompurify": "^3.1.6",
     "@hcengineering/analytics": "^0.6.0",
-    "emojibase": "^16.0.0"
+    "emojibase": "^16.0.0",
+    "hls.js": "^1.5.20"
   },
   "repository": "https://github.com/hcengineering/platform",
   "publishConfig": {

packages/ui/src/components/HlsVideo.svelte

@@ -0,0 +1,68 @@
+<!--
+// Copyright © 2025 Hardcore Engineering Inc.
+//
+// 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 HLS from 'hls.js'
+  import { onDestroy, onMount } from 'svelte'
+
+  export let src: string
+  export let hlsSrc: string
+  export let hlsThumbnail: string
+  export let name: string = ''
+  export let preload = true
+
+  let video: HTMLVideoElement
+  let hls: HLS
+
+  onMount(() => {
+    if (HLS.isSupported()) {
+      hls?.destroy()
+      hls = new HLS({ autoStartLoad: false })
+      hls.loadSource(hlsSrc)
+      hls.attachMedia(video)
+
+      video.poster = hlsThumbnail
+      video.onplay = () => {
+        // autoStartLoad disables autoplay, so we need to enable it manually
+        video.onplay = null
+        hls.startLoad()
+      }
+    } else {
+      video.src = src
+    }
+  })
+
+  onDestroy(() => {
+    hls?.destroy()
+  })
+</script>
+
+<video bind:this={video} width="100%" height="100%" preload={preload ? 'auto' : 'none'} controls>
+  <track kind="captions" label={name} />
+</video>
+
+<style lang="scss">
+  video {
+    border-radius: inherit;
+    object-fit: contain;
+  }
+
+  video::-webkit-media-controls {
+    visibility: hidden;
+  }
+
+  video::-webkit-media-controls-enclosure {
+    visibility: visible;
+  }
+</style>

packages/ui/src/components/Video.svelte

@@ -0,0 +1,40 @@
+<!--
+// Copyright © 2025 Hardcore Engineering Inc.
+//
+// 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">
+  export let src: string
+  export let name: string = ''
+  export let preload = true
+
+  let video: HTMLVideoElement
+</script>
+
+<video bind:this={video} {src} width="100%" height="100%" preload={preload ? 'auto' : 'none'} controls>
+  <track kind="captions" label={name} />
+</video>
+
+<style lang="scss">
+  video {
+    border-radius: inherit;
+    object-fit: contain;
+  }
+
+  video::-webkit-media-controls {
+    visibility: hidden;
+  }
+
+  video::-webkit-media-controls-enclosure {
+    visibility: visible;
+  }
+</style>

packages/ui/src/index.ts

@@ -284,6 +284,8 @@ export { default as NestedDropdown } from './components/NestedDropdown.svelte'
 
 export { default as Dock } from './components/Dock.svelte'
 export { default as Image } from './components/Image.svelte'
+export { default as Video } from './components/Video.svelte'
+export { default as HlsVideo } from './components/HlsVideo.svelte'
 
 export * from './types'
 export * from './location'

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

@@ -14,10 +14,9 @@
 -->
 <script lang="ts">
   import type { Attachment } from '@hcengineering/attachment'
-
   import type { WithLookup } from '@hcengineering/core'
-  import { getFileUrl } from '@hcengineering/presentation'
-  import AttachmentPresenter from './AttachmentPresenter.svelte'
+  import { getFileUrl, getVideoMeta } from '@hcengineering/presentation'
+  import { HlsVideo, Video } from '@hcengineering/ui'
 
   export let value: WithLookup<Attachment>
   export let preload = true
@@ -55,18 +54,26 @@
 
     return { width, height }
   }
+
+  function toStyle (size: 'auto' | number): string {
+    return size === 'auto' ? 'auto' : `${size}px`
+  }
 </script>
 
-<video controls width={dimensions.width} height={dimensions.height} preload={preload ? 'auto' : 'none'}>
-  <source src={getFileUrl(value.file, value.name)} />
-  <track kind="captions" label={value.name} />
-  <div class="container">
-    <AttachmentPresenter {value} />
-  </div>
-</video>
+<div class="container" style="width:{toStyle(dimensions.width)}; height:{toStyle(dimensions.height)}">
+  {#await getVideoMeta(value.file, value.name) then meta}
+    {@const src = getFileUrl(value.file, value.name)}
+
+    {#if meta && meta.status === 'ready'}
+      <HlsVideo {src} {preload} hlsSrc={meta.hls} hlsThumbnail={meta.thumbnail} name={value.name} />
+    {:else}
+      <Video {src} {preload} name={value.name} />
+    {/if}
+  {/await}
+</div>
 
 <style lang="scss">
-  video {
+  .container {
     max-width: 20rem;
     max-height: 20rem;
     min-width: 4rem;

plugins/view-resources/package.json

@@ -58,7 +58,6 @@
     "@hcengineering/text-editor-resources": "^0.6.0",
     "@hcengineering/analytics": "^0.6.0",
     "@hcengineering/query": "^0.6.12",
-    "fast-equals": "^5.2.2",
-    "hls.js": "^1.5.20"
+    "fast-equals": "^5.2.2"
   }
 }

plugins/view-resources/src/components/viewer/VideoViewer.svelte

@@ -15,68 +15,33 @@
 <script lang="ts">
   import { type Blob, type Ref } from '@hcengineering/core'
   import { getFileUrl, getVideoMeta, type BlobMetadata } from '@hcengineering/presentation'
-  import { onDestroy } from 'svelte'
-  import HLS from 'hls.js'
+  import { HlsVideo, Video } from '@hcengineering/ui'
 
   export let value: Ref<Blob>
   export let name: string
   export let metadata: BlobMetadata | undefined
   export let fit: boolean = false
 
-  let video: HTMLVideoElement
-  let hls: HLS
-
-  async function fetchVideoMeta (value: Ref<Blob>, name: string): Promise<void> {
-    const src = getFileUrl(value, name)
-    const meta = await getVideoMeta(value, name)
-    if (meta != null && meta.status === 'ready' && HLS.isSupported()) {
-      hls?.destroy()
-      hls = new HLS({ autoStartLoad: false })
-      hls.loadSource(meta.hls)
-      hls.attachMedia(video)
-
-      video.poster = meta.thumbnail
-      video.onplay = () => {
-        // autoStartLoad disables autoplay, so we need to enable it manually
-        video.onplay = null
-        hls.startLoad()
-      }
-    } else {
-      video.src = src
-    }
-  }
-
-  onDestroy(() => {
-    hls?.destroy()
-  })
-
   $: aspectRatio =
     metadata?.originalWidth && metadata?.originalHeight
       ? `${metadata.originalWidth} / ${metadata.originalHeight}`
       : '16 / 9'
   $: maxWidth = metadata?.originalWidth ? `min(${metadata.originalWidth}px, 100%)` : undefined
   $: maxHeight = metadata?.originalHeight ? `min(${metadata.originalHeight}px, 80vh)` : undefined
-  $: void fetchVideoMeta(value, name)
 </script>
 
-<video
-  bind:this={video}
-  width="100%"
+<div
   style:aspect-ratio={aspectRatio}
   style:max-width={fit ? '100%' : maxWidth}
   style:max-height={fit ? '100%' : maxHeight}
-  controls
-  preload={'auto'}
 >
-  <track kind="captions" label={name} />
-</video>
+  {#await getVideoMeta(value, name) then meta}
+    {@const src = getFileUrl(value, name)}
 
-<style lang="scss">
-  video::-webkit-media-controls {
-    visibility: hidden;
-  }
-
-  video::-webkit-media-controls-enclosure {
-    visibility: visible;
-  }
-</style>
+    {#if meta && meta.status === 'ready'}
+      <HlsVideo {src} {name} hlsSrc={meta.hls} hlsThumbnail={meta.thumbnail} />
+    {:else}
+      <Video {src} {name} />
+    {/if}
+  {/await}
+</div>