<script>
    import StreamPage from './StreamPage.svelte';
    import MetadataEditor from './MetadataEditor.svelte';
    import Player from './Player.svelte';
    import { page } from '$app/stores';
    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">
        {#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: 85% 15%;
        height: 100vh;
    }

    #streamPage {
        grid-row: 1 / 2;
        overflow: auto;
    }

    #player {
        grid-row: 2 / 3;
    }
</style>
