Hassio: select audio input/output for add-ons (#1078)

* Hassio: audio input/output for add-ons

* Lint

* Lint

* Lint...

* Pimp code

* Update to latest changes

* Lint

* Lint

* try again

* hm...

* Fix this.fire
This commit is contained in:
c727 2018-04-14 00:45:59 +02:00 committed by Pascal Vizeli
parent 57e500b109
commit 9d3b5c9d9b
3 changed files with 129 additions and 1 deletions

View File

@ -0,0 +1,119 @@
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
<link rel='import' href='../../bower_components/neon-animation/web-animations.html'>
<link rel='import' href='../../src/resources/ha-style.html'>
<link rel='import' href='../../src/util/hass-mixins.html'>
<dom-module id="hassio-addon-audio">
<template>
<style include="ha-style">
:host,
paper-card,
paper-dropdown-menu {
display: block;
}
.errors {
color: var(--google-red-500);
margin-bottom: 16px;
}
paper-item {
width: 450px;
}
.card-actions {
text-align: right;
}
</style>
<paper-card heading='Audio'>
<div class="card-content">
<template is='dom-if' if='[[error]]'>
<div class='errors'>[[error]]</div>
</template>
<paper-dropdown-menu label="Input">
<paper-listbox slot="dropdown-content" attr-for-selected="device" selected="{{selectedInput}}">
<template is='dom-repeat' items='[[inputDevices]]'>
<paper-item device$="[[item.device]]">[[item.name]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
<paper-dropdown-menu label="Output">
<paper-listbox slot="dropdown-content" attr-for-selected="device" selected="{{selectedOutput}}">
<template is='dom-repeat' items='[[outputDevices]]'>
<paper-item device$="[[item.device]]">[[item.name]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</div>
<div class="card-actions">
<paper-button
on-click='_saveSettings'
>Save</paper-button>
</div>
</paper-card>
</template>
</dom-module>
<script>
class HassioAddonAudio extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'hassio-addon-audio'; }
static get properties() {
return {
hass: Object,
addon: {
type: Object,
observer: 'addonChanged'
},
inputDevices: Array,
outputDevices: Array,
selectedInput: String,
selectedOutput: String,
error: String,
};
}
addonChanged(addon) {
this.setProperties({
selectedInput: addon.audio_input || 'null',
selectedOutput: addon.audio_output || 'null'
});
if (this.outputDevices) return;
const noDevice = [{ device: 'null', name: '-' }];
this.hass.callApi('get', 'hassio/hardware/audio').then((resp) => {
const dev = resp.data.audio;
const input = Object.keys(dev.input).map(key => ({ device: key, name: dev.input[key] }));
const output = Object.keys(dev.output).map(key => ({ device: key, name: dev.output[key] }));
this.setProperties({
inputDevices: noDevice.concat(input),
outputDevices: noDevice.concat(output)
});
}, () => {
this.setProperties({
inputDevices: noDevice,
outputDevices: noDevice
});
});
}
_saveSettings() {
this.error = null;
const path = `hassio/addons/${this.addon.slug}/options`;
this.hass.callApi('post', path, {
audio_input: this.selectedInput === 'null' ? null : this.selectedInput,
audio_output: this.selectedOutput === 'null' ? null : this.selectedOutput
}).then(() => {
this.fire('hass-api-called', { success: true, path: path });
}, (resp) => {
this.error = resp.body.message;
});
}
}
customElements.define(HassioAddonAudio.is, HassioAddonAudio);
</script>

View File

@ -10,6 +10,7 @@
<link rel="import" href="./hassio-addon-info.html">
<link rel="import" href="./hassio-addon-config.html">
<link rel="import" href="./hassio-addon-audio.html">
<link rel="import" href="./hassio-addon-network.html">
<link rel="import" href="./hassio-addon-logs.html">
<link rel='import' href='../hassio-markdown-dialog.html'>
@ -28,6 +29,7 @@
}
hassio-addon-info,
hassio-addon-network,
hassio-addon-audio,
hassio-addon-config {
margin-bottom: 24px;
}
@ -63,6 +65,13 @@
addon-slug='[[routeData.slug]]'
></hassio-addon-config>
<template is='dom-if' if='[[addon.audio]]'>
<hassio-addon-audio
hass='[[hass]]'
addon='[[addon]]'
></hassio-addon-audio>
</template>
<template is='dom-if' if='[[addon.network]]'>
<hassio-addon-network
hass='[[hass]]'

View File

@ -137,7 +137,7 @@ class HassioHostInfo extends window.hassMixins.EventsMixin(Polymer.Element) {
}
_showHardware() {
this.hass.callApi('get', 'hassio/host/hardware')
this.hass.callApi('get', 'hassio/hardware/info')
.then(
resp => this._objectToMarkdown(resp.data)
, () => 'Error getting hardware info'