Split inputs in inputs and applications
This commit is contained in:
parent
e89099a18c
commit
a591ed17a6
30
ui/src/lib/components/Applications.svelte
Normal file
30
ui/src/lib/components/Applications.svelte
Normal file
@ -0,0 +1,30 @@
|
||||
<script>
|
||||
import { activeSources } from '$lib/stores/sources';
|
||||
</script>
|
||||
|
||||
<ul class="list-group list-group-flush">
|
||||
{#each $activeSources as source}
|
||||
<li class="list-group-item py-3 d-flex justify-content-between">
|
||||
<div>
|
||||
<strong>{source.name}</strong>
|
||||
{#await source.currently()}
|
||||
<div class="spinner-border spinner-border-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
{:then title}
|
||||
<span class="text-muted">{title}</span>
|
||||
{/await}
|
||||
</div>
|
||||
{#if source.controlable}
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-sm btn-primary"
|
||||
on:click={() => source.playpause()}
|
||||
>
|
||||
<i class="bi bi-pause"></i>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
@ -1,42 +1,17 @@
|
||||
<script>
|
||||
import { activeInputs, inputsList } from '$lib/stores/inputs';
|
||||
import { activeSources } from '$lib/stores/sources';
|
||||
|
||||
export let showInactives = false;
|
||||
</script>
|
||||
|
||||
<ul class="list-group list-group-flush">
|
||||
{#if $activeSources.length === 0 && ((showInactives && $inputsList.length === 0) || (!showInactives && $activeInputs.length === 0))}
|
||||
{#if (showInactives && $inputsList.length === 0) || (!showInactives && $activeInputs.length === 0)}
|
||||
<li class="list-group-item py-3">
|
||||
<span class="text-muted">
|
||||
Aucune source active.
|
||||
</span>
|
||||
</li>
|
||||
{/if}
|
||||
{#each $activeSources as source}
|
||||
<li class="list-group-item py-3 d-flex justify-content-between">
|
||||
<div>
|
||||
<strong>{source.name}</strong>
|
||||
{#await source.currently()}
|
||||
<div class="spinner-border spinner-border-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
{:then title}
|
||||
<span class="text-muted">{title}</span>
|
||||
{/await}
|
||||
</div>
|
||||
{#if source.controlable}
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-sm btn-primary"
|
||||
on:click={() => source.playpause()}
|
||||
>
|
||||
<i class="bi bi-pause"></i>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
{#each $inputsList as input}
|
||||
{#if showInactives || input.active}
|
||||
<li class="list-group-item py-3 d-flex flex-column">
|
||||
|
@ -1,4 +1,5 @@
|
||||
<script>
|
||||
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';
|
||||
@ -84,6 +85,15 @@
|
||||
</div>
|
||||
|
||||
<div class="col-md">
|
||||
{#if $activeSources.length > 0}
|
||||
<div class="card my-2">
|
||||
<h4 class="card-header">
|
||||
<i class="bi bi-window-stack"></i>
|
||||
Applications
|
||||
</h4>
|
||||
<Applications />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="card my-2">
|
||||
<h4 class="card-header">
|
||||
<i class="bi bi-speaker"></i>
|
||||
|
Loading…
Reference in New Issue
Block a user