1  <script lang="ts">
 2      import type { Video } from '@jet-app/app-store/api/models';
 3      import VideoPlayer from '../VideoPlayer.svelte';
 4      import HlsJsDecorator from '../decorators/HlsJSDecorator.svelte';
 5      import { buildPoster } from '~/utils/video-poster';
 6      import { generateUuid } from '@amp/web-apps-utils/src';
 7      import type { NamedProfile } from 'src/config/components/artwork';
 8      import type { Profile } from '@amp/web-app-components/src/components/Artwork/types';
 9      import mediaQueries from '~/utils/media-queries';
10      import { colorAsString } from '~/utils/color';
11  
12      export let video: Video;
13      export let autoplay: boolean = false;
14      export let loop: boolean = false;
15      export let muted: boolean = true;
16      export let useControls: boolean = true;
17      export let profile: NamedProfile | Profile;
18      export let autoplayVisibilityThreshold: number = 0;
19      export let videoPlayerRef: InstanceType<typeof VideoPlayer> | null = null;
20      export let shouldSuperimposePosterImage: boolean = false;
21  
22      $: poster =
23          video.preview && buildPoster(video.preview, profile, $mediaQueries);
24      $: backgroundColor = video.preview.backgroundColor
25          ? colorAsString(video.preview.backgroundColor)
26          : '#f1f1f1';
27  
28      $: metricsTemplate = video?.templateMediaEvent ?? {};
29      const uuid = generateUuid();
30  </script>
31  
32  <HlsJsDecorator let:HLS>
33      <VideoPlayer
34          {HLS}
35          {loop}
36          {muted}
37          {autoplay}
38          {useControls}
39          {autoplayVisibilityThreshold}
40          {metricsTemplate}
41          {shouldSuperimposePosterImage}
42          id={uuid}
43          src={video.videoUrl}
44          poster={poster ?? undefined}
45          --aspect-ratio={video.preview.width / video.preview.height}
46          bind:this={videoPlayerRef}
47      />
48  
49      <div
50          class="loader"
51          slot="loading-component"
52          style:--aspect-ratio={video.preview.width / video.preview.height}
53          style:--background-image={`url(${poster})`}
54          style:--background-color={backgroundColor}
55      />
56  </HlsJsDecorator>
57  
58  <style>
59      .loader {
60          aspect-ratio: var(--aspect-ratio);
61          width: 100%;
62          background-image: var(--background-image);
63          background-color: var(--background-color);
64          background-size: cover;
65      }
66  </style>