/
Poster.svelte
60 lines (47 loc) · 1.26 KB
/
Poster.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<svelte:options accessors />
<img
{alt}
src={$currentPoster}
use:vIf={isEnabled}
use:vShow={isActive}
bind:this={el}
/>
<script context="module">
import PluginRole from '../core/PluginRole';
export const ID = 'vPoster';
export const ROLE = PluginRole.POSTER;
</script>
<script>
import { vIf, vShow } from '@vime-js/utils';
// --------------------------------------------------------------
// Setup
// --------------------------------------------------------------
export let player;
const {
title, currentPoster, playbackStarted,
useNativeControls,
} = player.getStore();
// --------------------------------------------------------------
// Props
// --------------------------------------------------------------
let el;
export let autopilot = true;
export let isEnabled = true;
export let isActive = false;
export const getEl = () => el;
$: alt = $title ? `Poster for ${title}` : 'Media Poster';
$: if (autopilot) isEnabled = !$useNativeControls && !!$currentPoster;
$: if (autopilot) isActive = !$playbackStarted;
</script>
<style type="text/scss">
img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
object-fit: cover;
}
</style>