71 lines
1.9 KiB
Svelte
71 lines
1.9 KiB
Svelte
<script>
|
|
import Dialog from "./Dialog.svelte";
|
|
|
|
let { add, close } = $props();
|
|
let step = $state(0);
|
|
|
|
let type = null;
|
|
let streamId = $state("doggoat");
|
|
</script>
|
|
|
|
<Dialog close={() => close?.()}>
|
|
<div class="add-stream-dialog">
|
|
{#if step === 0}
|
|
<div class="step-0">
|
|
<h2>Add stream</h2>
|
|
<div class="buttons">
|
|
<button
|
|
onclick={() => {
|
|
type = "vdo";
|
|
step = 1;
|
|
}}>vdo.ninja</button
|
|
>
|
|
<button
|
|
onclick={() => {
|
|
type = "twitch";
|
|
step = 1;
|
|
}}>Twitch</button
|
|
>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{#if step === 1}
|
|
<div class="step-1">
|
|
<h2>Add stream</h2>
|
|
<p>
|
|
Example:<br />
|
|
https://vdo.ninja/?view=<strong>doggoat</strong
|
|
>&bitrate=4500&proaudio<br />
|
|
https://www.twitch.tv/<strong>saltybet</strong>
|
|
</p>
|
|
<label
|
|
>Stream ID: <input
|
|
type="text"
|
|
bind:value={streamId}
|
|
/></label
|
|
>
|
|
<button
|
|
onclick={() => {
|
|
add?.({ type, streamId });
|
|
step = 0;
|
|
}}>Add</button
|
|
>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</Dialog>
|
|
|
|
<style>
|
|
.add-stream-dialog {
|
|
h2 {
|
|
text-align: center;
|
|
margin: 0 0 0.75rem 0;
|
|
}
|
|
|
|
.buttons {
|
|
display: grid;
|
|
justify-content: center;
|
|
gap: 0.25rem;
|
|
}
|
|
}
|
|
</style>
|