<script>
import { fs_get_file_url } from "../FilesystemAPI.svelte";
import { createEventDispatcher } from 'svelte'
let dispatch = createEventDispatcher()

export let state;
</script>

<div class="container">
	{state.base.name}
	<br/><br/>
	<audio
		class="player"
		src={fs_get_file_url(state.bucket.id, state.base.path)}
		autoplay="autoplay"
		controls="controls"
		on:ended={() => { dispatch("next") }}>
		<track kind="captions"/>
	</audio>
</div>

<style>
.container {
	height: 100%;
	width: 100%;
	margin: 50px 0 0 0;
	padding: 0;
	overflow-y: auto;
	text-align: center;
}
.player {
	width: 90%;
}
</style>
