<script>
    let {stream, type} = $props();

    let src = $state(null);
    let data = $state(null);

    switch (type) {
        case "twitch":
            data = { channel: stream, parent: window.location.host };
            src = "https://player.twitch.tv/?" + new URLSearchParams(data);
            break;
        case "vdo":
            data = { view: stream, bitrate: 4000, proaudio: true };
            src = "https://vdo.ninja/?" + new URLSearchParams(data);
            break;
        default:
            break;
    }
</script>

<div class="stream-container">
    {#if src && data}
        <iframe title={stream} {src} allowfullscreen></iframe>
    {/if}
</div>

<style>
    .stream-container {
        width: 100%;
        height: 100%;
    }

    iframe {
        display: block;
        width: 100%;
        height: 100%;
    }
</style>
