<script>
	import StreamPage from './StreamPage.svelte';
	import MetadataEditor from './MetadataEditor.svelte';
	import Player from './Player.svelte';
	import { dev } from '$app/environment';
	import { currentStream, updateCurrentStream } from '$lib/stores.js';

	export let data;
	$: updateCurrentStream(data.stream);
</script>

<div id="streamContainer">
	<div id="streamPage" class="panel">
		{#if dev}
			<MetadataEditor {...data} />
		{/if}
		<StreamPage />
	</div>
	<div id="player">
		<Player display={true} src="/media/tracks/{$currentStream.filename}" />
	</div>
</div>

<style>
	#streamContainer {
		display: grid;
		grid-template-rows: 1fr auto;
		height: 100%;
		gap: 0.5em;
	}

	#streamPage {
		grid-row: 1 / 2;
		overflow: auto;
		background: local url('/assets/result.png') top right / 50% no-repeat, rgba(0, 0, 0, 0.8);
	}

	#player {
		grid-row: 2 / 3;
		margin-left: 1px;
		margin-right: 1px;
		height: 100%;
	}

	@media (max-width: 575px) {
		#streamPage {
			background: local url('/assets/result.png') top right / 80% no-repeat,
				rgba(0, 0, 0, 0.8);
		}
	}
</style>
