<script lang="ts">
	import videoUrl from '@assets/avsync.webm';
	let paused = true;
</script>

<h2><i class="ti ti-time-duration-off"></i> Audio/Video Synchronization</h2>
<!-- svelte-ignore a11y-media-has-caption -->
<video
	class:playing={!paused}
	autoplay
	loop
	bind:paused
	src={videoUrl}
	on:click={() => (paused = false)}
></video>

<style>
	video {
		flex-grow: 1;

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

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