Add a button to show inactive inputs + refined

This commit is contained in:
nemunaire 2023-11-15 11:31:25 +01:00
parent b8bff830ca
commit 5d32f30a54

View File

@ -7,9 +7,10 @@
import { activeInputs } from '$lib/stores/inputs'; import { activeInputs } from '$lib/stores/inputs';
let mixerAdvanced = false; let mixerAdvanced = false;
let showInactiveInputs = false;
</script> </script>
<div class="my-2"> <div class="my-3">
<SourceSelection /> <SourceSelection />
</div> </div>
@ -37,19 +38,15 @@
<div class="d-inline-block me-3"> <div class="d-inline-block me-3">
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-center">
<div> <div>
{#await input.streams()} {#if input.streams.length}
<div class="spinner-border spinner-border-sm" role="status"> {#each Object.keys(input.streams) as idstream}
<span class="visually-hidden">Loading...</span> {@const title = input.streams[idstream]}
</div> <span class="text-muted">@ {input.name}</span>
{:then streams}
{#each Object.keys(streams) as idstream}
{@const title = streams[idstream]}
<strong>{title}</strong> <strong>{title}</strong>
{/each} {/each}
<span class="text-muted">@ {input.name}</span> <span class="text-muted">@ {input.name}</span>
{:catch error} {:else}
{input.name} activée {input.name} activée
{/await} {/if}
</div> </div>
</div> </div>
</div> </div>
@ -59,7 +56,7 @@
<div class="row"> <div class="row">
<div class="col-md"> <div class="col-md">
<div class="card my-2"> <div class="card my-3">
<h4 class="card-header"> <h4 class="card-header">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<div> <div>
@ -82,20 +79,36 @@
<div class="col-md"> <div class="col-md">
{#if $activeSources.length > 0} {#if $activeSources.length > 0}
<div class="card my-2"> <div class="card my-3">
<h4 class="card-header"> <h4 class="card-header">
<div class="d-flex justify-content-between">
<div>
<i class="bi bi-window-stack"></i> <i class="bi bi-window-stack"></i>
Applications Applications
</div>
</div>
</h4> </h4>
<Applications /> <Applications />
</div> </div>
{/if} {/if}
<div class="card my-2"> <div class="card my-3">
<h4 class="card-header"> <h4 class="card-header">
<div class="d-flex justify-content-between">
<div>
<i class="bi bi-speaker"></i> <i class="bi bi-speaker"></i>
Sources Sources
</div>
<button
class="btn btn-sm"
class:btn-info={showInactiveInputs}
class:btn-secondary={!showInactiveInputs}
on:click={() => { showInactiveInputs = !showInactiveInputs; }}
>
<i class="bi bi-eye-fill"></i>
</button>
</div>
</h4> </h4>
<Inputs /> <Inputs showInactive={showInactiveInputs} />
</div> </div>
</div> </div>
</div> </div>