80 lines
1.9 KiB
Svelte
80 lines
1.9 KiB
Svelte
<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>
|