nemunaire/hathoris
1
0
Fork 0
Code Issues Pull requests Projects Releases 13 Packages Wiki Activity

Able to control stream volume

Browse source
This commit is contained in:
nemunaire 2023-11-15 11:31:48 +01:00
commit d2090bee67
5 changed files with 190 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

79
ui/src/lib/components/Inputs.svelte
View file

@ -1,7 +1,16 @@
<script>
import { activeInputs, inputsList } from '$lib/stores/inputs';
import { activeInputs, inputs, inputsList } from '$lib/stores/inputs';
export let showInactives = false;
let altering_mixer = null;
async function alterMixer(input, streamid, volume) {
if (altering_mixer) altering_mixer.abort();
altering_mixer = setTimeout(() => {
fetch(`api/inputs/${input.name}/streams/${streamid}/volume`, {headers: {'Accept': 'application/json'}, method: 'POST', body: JSON.stringify({'volume': volume ? volume : input.mixer[streamid].volume})}).then(() => inputs.refresh());
altering_mixer = null;
}, 450);
}
</script>
<ul class="list-group list-group-flush">
@ -12,35 +21,49 @@
</span>
</li>
{/if}
{#each $inputsList as input}
{#each $inputsList as input, iid}
{#if showInactives || input.active}
<li class="list-group-item py-3 d-flex flex-column">
<strong>{input.name}</strong>
{#await input.streams()}
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
{:then streams}
{#each Object.keys(streams) as idstream}
{@const title = streams[idstream]}
<div class="d-flex justify-content-between">
<div>
<span class="text-muted">{title}</span>
</div>
{#if input.controlable}
<div>
<button
class="btn btn-sm btn-primary"
on:click={() => input.playpause(idstream)}
>
<i class="bi bi-pause"></i>
</button>
</div>
{/if}
{#each Object.keys(input.streams) as idstream}
{@const title = input.streams[idstream]}
<li class="list-group-item py-3 d-flex flex-column">
<div class="d-flex justify-content-between align-items-center">
<div>
<label for={'input' + iid + 'stream' + idstream} class="form-label d-inline">{title}</label>
<span class="text-muted">({input.name})</span>
</div>
{/each}
{/await}
</li>
{#if input.controlable}
<div>
<button
class="btn btn-sm btn-primary"
on:click={() => input.playpause(idstream)}
>
<i class="bi bi-pause"></i>
</button>
</div>
{:else if input.mixable && input.mixer[idstream]}
<div
class="badge bg-primary"
title={input.mixer[idstream].volume_percent}
>
{input.mixer[idstream].volume_db}
</div>
{/if}
</div>
{#if input.mixable && input.mixer[idstream]}
<div>
<input
type="range"
class="form-range"
id={'input' + iid + 'stream' + idstream}
min={0}
max={65536}
bind:value={input.mixer[idstream].volume}
on:change={() => alterMixer(input, idstream)}
>
</div>
{/if}
</li>
{/each}
{/if}
{/each}
</ul>

7
ui/src/lib/input.js
View file

@ -6,13 +6,16 @@ export class Input {
}
}
update({ name, active, controlable }) {
update({ name, active, controlable, streams, mixable, mixer }) {
this.name = name;
this.active = active;
this.controlable = controlable;
this.streams = streams;
this.mixable = mixable;
this.mixer = mixer;
}
async streams() {
async getStreams() {
const data = await fetch(`api/inputs/${this.id}/streams`, {headers: {'Accept': 'application/json'}});
if (data.status == 200) {
return await data.json();