-
Notifications
You must be signed in to change notification settings - Fork 2.3k
/
Video.svelte
66 lines (59 loc) 路 1.23 KB
/
Video.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
61
62
63
64
65
66
<script lang="ts">
import { playable, Video } from "../shared";
export let type: "gallery" | "table";
export let selected = false;
export let value: string;
export let samples_dir: string;
let video: HTMLVideoElement;
async function init(): Promise<void> {
video.muted = true;
video.playsInline = true;
video.controls = false;
video.setAttribute("muted", "");
await video.play();
video.pause();
}
</script>
{#if playable()}
<div
class="container"
class:table={type === "table"}
class:gallery={type === "gallery"}
class:selected
>
<Video
muted
playsinline
bind:node={video}
on:loadeddata={init}
on:mouseover={video.play.bind(video)}
on:mouseout={video.pause.bind(video)}
src={samples_dir + value}
/>
</div>
{:else}
<div>{value}</div>
{/if}
<style>
.container {
flex: none;
border: 2px solid var(--border-color-primary);
border-radius: var(--radius-lg);
max-width: none;
}
.container:hover,
.container.selected {
border-color: var(--border-color-accent);
}
.container.table {
margin: 0 auto;
width: var(--size-20);
height: var(--size-20);
object-fit: cover;
}
.container.gallery {
height: var(--size-20);
max-height: var(--size-20);
object-fit: cover;
}
</style>