<script>
    import { onMount } from "svelte";
    let streams = [];
    let fracsX = 0;
    let fracsY = 0;
    let containerElement;
    let showButtons = false;

    onMount(() => {
        streams = new URLSearchParams(window.location.search).getAll("streams");
        fracsX = Math.max(Math.ceil(streams.length / 2), 2);
        fracsY = Math.max(Math.ceil(streams.length / 2), 2);

        if (streams.length === 1) {
            fracsY = 1;
            fracsX = 1;
        } else if (streams.length === 2) {
            fracsY = Math.max(Math.ceil(streams.length / 2), 2);
            fracsX = 1;
        } else {
            fracsX = Math.max(Math.ceil(streams.length / 2), 2);
        }
    });
</script>

<main>
    <div class="buttons">
        <button
            on:click={() => {
                showButtons = !showButtons;
            }}>[{showButtons ? "x" : " "}]</button
        >
        {#if showButtons}
            <button
                on:click={() => {
                    if (containerElement) {
                        containerElement.requestFullscreen();
                    }
                }}>Fullscreen</button
            >
            <!--<button>Placeholder</button>-->
        {/if}
    </div>
    <div
        bind:this={containerElement}
        class="streams"
        style={"grid-template-rows: repeat(" +
            fracsY +
            ", 1fr); grid-template-columns: repeat(" +
            fracsX +
            ", 1fr)"}
    >
        {#if streams}
            {#each streams as stream}
                <iframe title={stream} src={"https://vdo.ninja/?view=" + stream}
                ></iframe>
            {/each}
        {/if}
    </div>
</main>

<style>
    .buttons {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
    }

    .streams {
        display: grid;
        height: 100vh;
        width: 100vw;
    }

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