1 files changed, 67 insertions, 0 deletions
diff --git a/src/lib/Player/FrameSlider.svelte b/src/lib/Player/FrameSlider.svelte
new file mode 100644
index 0000000..a632aa9
--- /dev/null
+++ b/src/lib/Player/FrameSlider.svelte
@@ -0,0 +1,67 @@
+<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={() => {
+				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>