<script lang="ts">
	import { createEventDispatcher, onMount } from 'svelte';
	const dispatch = createEventDispatcher<{ end: void }>();

	export let src: string;
	export let left = false;
	export let center = false;
	export let right = false;
	export let lfe = false;

	let currentTime = 0;
	let paused = true;
	function play() {
		currentTime = 0;
		paused = false;
	}
</script>

<button
	class="speaker"
	class:left
	class:right
	class:center
	class:lfe
	class:playing={!paused}
	on:click={play}
>
	{#if !lfe}
		<i class="ti ti-volume"></i>
	{:else}
		<i class="ti ti-wave-sine"></i>
	{/if}
	<label><slot /></label>
	<audio bind:currentTime bind:paused {src}></audio>
</button>

<style>
	.speaker {
		border: none;
		background: transparent;

		display: inline-flex;
		flex-direction: column;
		text-align: center;

		& .ti {
			font-size: 3em;
		}

		&.right .ti {
			display: block;
			transform: rotate(180deg);
		}

		&.center .ti {
			display: block;
			transform: rotate(90deg);
		}

		&:disabled {
			opacity: 0.33;
		}

		&.playing {
			opacity: 0.66;
		}
	}
</style>
