blob: 099a2c4195b8382f9241726748dbd02fa122d6dc (
plain) (
blame)
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
67
68
69
70
71
72
73
|
<script lang="ts">
import RangeSlider from '../vendor/svelte-range-slider/range-slider.svelte';
let {
frame = $bindable(),
frameCount,
playing = $bindable(),
playbackStarted = $bindable()
}: {
frame: number;
frameCount: number;
playing: boolean;
playbackStarted: number;
} = $props();
</script>
<div class="w-full flex items-center justify-center pt-2">
<div class="p-2 pr-1">
<button
onclick={(e) => {
e.stopPropagation();
playing = !playing;
}}
onkeydown={(e) => {
e.stopPropagation();
e.preventDefault();
if (e.key === 'Enter' || e.key === ' ') playing = !playing;
}}
aria-label={playing ? 'pause' : 'play'}
class="flex items-center justify-center"
><svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d={!playing
? 'M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z'
: 'M15.75 5.25v13.5m-7.5-13.5v13.5'}
/>
</svg></button
>
</div>
<div class="flex-1">
<RangeSlider bind:value={frame} min={0} max={frameCount} />
</div>
<div class="label p-2 pl-1">
<input
type="number"
bind:value={frame}
class="w-16 appearance-none text-right"
style="-moz-appearance:textfield;"
max={frameCount}
onkeypress={(e) => {
e.stopPropagation();
}}
onkeydown={(e) => {
e.stopPropagation();
}}
/>
of {frameCount}
<!-- <input
type="number"
bind:value={frameCount}
class="w-8 appearance-none"
style="-moz-appearance:textfield;"
/> -->
</div>
</div>
|
