Split inputs in inputs and applications

This commit is contained in:
nemunaire 2023-11-15 10:10:24 +01:00
parent e89099a18c
commit a591ed17a6
3 changed files with 41 additions and 26 deletions

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

View File

@ -1,42 +1,17 @@
<script> <script>
import { activeInputs, inputsList } from '$lib/stores/inputs'; import { activeInputs, inputsList } from '$lib/stores/inputs';
import { activeSources } from '$lib/stores/sources';
export let showInactives = false; export let showInactives = false;
</script> </script>
<ul class="list-group list-group-flush"> <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"> <li class="list-group-item py-3">
<span class="text-muted"> <span class="text-muted">
Aucune source active. Aucune source active.
</span> </span>
</li> </li>
{/if} {/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} {#each $inputsList as input}
{#if showInactives || input.active} {#if showInactives || input.active}
<li class="list-group-item py-3 d-flex flex-column"> <li class="list-group-item py-3 d-flex flex-column">

View File

@ -1,4 +1,5 @@
<script> <script>
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 SourceSelection from '$lib/components/SourceSelection.svelte';
@ -84,6 +85,15 @@
</div> </div>
<div class="col-md"> <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"> <div class="card my-2">
<h4 class="card-header"> <h4 class="card-header">
<i class="bi bi-speaker"></i> <i class="bi bi-speaker"></i>