<script lang="ts">
	let {
		frame = $bindable(),
		frameCount,
		fps,
		playing = $bindable(),
		playbackStarted = $bindable()
	}: {
		frame: number;
		frameCount: number;
		fps: number | undefined;
		playing: boolean;
		playbackStarted: number;
	} = $props();
</script>

<svelte:window
	onkeypress={(e) => {
		switch (e.key) {
			case ' ':
				e.preventDefault();
				playing = !playing;
				break;

			// default:
			// 	if (dev) console.debug('Keypress:', e.key);
			// 	break;
		}
	}}
	onkeydown={(e) => {
		switch (e.key) {
			case 'ArrowLeft':
				e.preventDefault();
				frame = Math.max(frame - (e.ctrlKey ? (fps ?? 60) : 1), 0);
				break;
			case 'ArrowRight':
				e.preventDefault();
				frame = Math.min(frame + (e.ctrlKey ? (fps ?? 60) : 1), frameCount);
				break;

			// default:
			// 	if (dev) console.debug('Keydown:', e.key);
			// 	break;
		}
	}}
/>
