<script lang="ts">
	import videoUrl from '@assets/avsync.webm';
	import { i18n } from '$lib/i18n';
	let paused = $state(true);
</script>

<h2><i class="ti ti-time-duration-off"></i> {$i18n.t('Audio/Video Synchronization')}</h2>
<!-- svelte-ignore a11y_media_has_caption -->
<video
	class:playing={!paused}
	autoplay
	loop
	bind:paused
	src={videoUrl}
	onclick={() => (paused = false)}
></video>

<style>
	video {
		flex-grow: 1;
		min-height: 0;

		&:not(.playing) {
			opacity: 0.5;
			filter: grayscale(0.8);
		}

		transition:
			opacity 0.3s,
			filter 0.3s;
	}
</style>
