nemunaire/hathoris
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 11 Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
ui/src/routes/+layout.svelte
View File

@ -1,15 +1,17 @@
<script> <script>
import '../hathoris.scss' import '../hathoris.scss';
import "bootstrap-icons/font/bootstrap-icons.css"; import "bootstrap-icons/font/bootstrap-icons.css";
import { sources } from '$lib/stores/sources'; import { activeSources, sources } from '$lib/stores/sources';
sources.refresh(); sources.refresh();
setInterval(sources.refresh, 5000); setInterval(sources.refresh, 5000);
import { inputs } from '$lib/stores/inputs'; import { activeInputs, inputs } from '$lib/stores/inputs';
inputs.refresh(); inputs.refresh();
setInterval(inputs.refresh, 4500); setInterval(inputs.refresh, 4500);
import SourceSelection from '$lib/components/SourceSelection.svelte';
const version = fetch('api/version', {headers: {'Accept': 'application/json'}}).then((res) => res.json()) const version = fetch('api/version', {headers: {'Accept': 'application/json'}}).then((res) => res.json())
</script> </script>
@ -18,7 +20,50 @@
</svelte:head> </svelte:head>
<div class="flex-fill d-flex flex-column"> <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> <slot></slot>
</div> </div>
</div> </div>

44
ui/src/routes/+page.svelte
View File

@ -2,7 +2,6 @@
import Applications from '$lib/components/Applications.svelte'; import Applications from '$lib/components/Applications.svelte';
import Inputs from '$lib/components/Inputs.svelte'; import Inputs from '$lib/components/Inputs.svelte';
import Mixer from '$lib/components/Mixer.svelte'; import Mixer from '$lib/components/Mixer.svelte';
import SourceSelection from '$lib/components/SourceSelection.svelte';
import { activeSources } from '$lib/stores/sources'; import { activeSources } from '$lib/stores/sources';
import { activeInputs } from '$lib/stores/inputs'; import { activeInputs } from '$lib/stores/inputs';
@ -10,50 +9,7 @@
let showInactiveInputs = false; let showInactiveInputs = false;
</script> </script>
<div class="my-3">
<SourceSelection />
</div>
<div class="container"> <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="row">
<div class="col-md"> <div class="col-md">
<div class="card my-3"> <div class="card my-3">