Refactor SourceSelection, display it in layout
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
nemunaire 2024-10-09 09:04:52 +02:00
parent 207a4562e6
commit 7cedd74706
2 changed files with 49 additions and 48 deletions

View File

@ -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>

View File

@ -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">