Refactor SourceSelection, display it in layout
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
207a4562e6
commit
7cedd74706
@ -1,15 +1,17 @@
|
||||
<script>
|
||||
import '../hathoris.scss'
|
||||
import '../hathoris.scss';
|
||||
import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
|
||||
import { sources } from '$lib/stores/sources';
|
||||
import { activeSources, sources } from '$lib/stores/sources';
|
||||
sources.refresh();
|
||||
setInterval(sources.refresh, 5000);
|
||||
|
||||
import { inputs } from '$lib/stores/inputs';
|
||||
import { activeInputs, inputs } from '$lib/stores/inputs';
|
||||
inputs.refresh();
|
||||
setInterval(inputs.refresh, 4500);
|
||||
|
||||
import SourceSelection from '$lib/components/SourceSelection.svelte';
|
||||
|
||||
const version = fetch('api/version', {headers: {'Accept': 'application/json'}}).then((res) => res.json())
|
||||
</script>
|
||||
|
||||
@ -18,7 +20,50 @@
|
||||
</svelte:head>
|
||||
|
||||
<div class="flex-fill d-flex flex-column">
|
||||
<div class="container-fluid flex-fill d-flex flex-column justify-content-center">
|
||||
<div class="container-fluid flex-fill d-flex flex-column justify-content-start">
|
||||
<div class="my-3">
|
||||
<SourceSelection />
|
||||
</div>
|
||||
|
||||
{#if $activeSources.length === 0 && $activeInputs.length === 0}
|
||||
<div class="text-muted text-center mt-1 mb-1">
|
||||
Aucune source active pour l'instant.
|
||||
</div>
|
||||
{:else}
|
||||
<marquee>
|
||||
{#each $activeSources as source}
|
||||
<div class="d-inline-block me-3">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
{#if source.currentTitle}
|
||||
<strong>{source.currentTitle}</strong> <span class="text-muted">@ {source.name}</span>
|
||||
{:else}
|
||||
{source.name} activée
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{#each $activeInputs as input}
|
||||
<div class="d-inline-block me-3">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
{#if input.streams.length}
|
||||
{#each Object.keys(input.streams) as idstream}
|
||||
{@const title = input.streams[idstream]}
|
||||
<strong>{title}</strong>
|
||||
{/each}
|
||||
<span class="text-muted">@ {input.name}</span>
|
||||
{:else}
|
||||
{input.name} activée
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</marquee>
|
||||
{/if}
|
||||
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -2,7 +2,6 @@
|
||||
import Applications from '$lib/components/Applications.svelte';
|
||||
import Inputs from '$lib/components/Inputs.svelte';
|
||||
import Mixer from '$lib/components/Mixer.svelte';
|
||||
import SourceSelection from '$lib/components/SourceSelection.svelte';
|
||||
import { activeSources } from '$lib/stores/sources';
|
||||
import { activeInputs } from '$lib/stores/inputs';
|
||||
|
||||
@ -10,50 +9,7 @@
|
||||
let showInactiveInputs = false;
|
||||
</script>
|
||||
|
||||
<div class="my-3">
|
||||
<SourceSelection />
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
{#if $activeSources.length === 0 && $activeInputs.length === 0}
|
||||
<div class="text-muted text-center mt-1 mb-1">
|
||||
Aucune source active pour l'instant.
|
||||
</div>
|
||||
{:else}
|
||||
<marquee>
|
||||
{#each $activeSources as source}
|
||||
<div class="d-inline-block me-3">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
{#if source.currentTitle}
|
||||
<strong>{source.currentTitle}</strong> <span class="text-muted">@ {source.name}</span>
|
||||
{:else}
|
||||
{source.name} activée
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{#each $activeInputs as input}
|
||||
<div class="d-inline-block me-3">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
{#if input.streams.length}
|
||||
{#each Object.keys(input.streams) as idstream}
|
||||
{@const title = input.streams[idstream]}
|
||||
<strong>{title}</strong>
|
||||
{/each}
|
||||
<span class="text-muted">@ {input.name}</span>
|
||||
{:else}
|
||||
{input.name} activée
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</marquee>
|
||||
{/if}
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md">
|
||||
<div class="card my-3">
|
||||
|
Loading…
Reference in New Issue
Block a user