136 lines
3.0 KiB
HTML
136 lines
3.0 KiB
HTML
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
|
|
|
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
|
|
|
|
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
|
|
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
|
|
|
|
<dom-module id="ha-voice-command-dialog">
|
|
<template>
|
|
<style>
|
|
iron-icon {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.content {
|
|
width: 300px;
|
|
min-height: 80px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.icon {
|
|
float: left;
|
|
}
|
|
|
|
.text {
|
|
margin-left: 48px;
|
|
margin-right: 24px;
|
|
}
|
|
|
|
.interimTranscript {
|
|
color: darkgrey;
|
|
}
|
|
|
|
@media all and (max-width: 450px) {
|
|
paper-dialog {
|
|
margin: 0;
|
|
width: 100%;
|
|
max-height: calc(100% - 64px);
|
|
|
|
position: fixed !important;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
overflow: scroll;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<paper-dialog id="dialog" with-backdrop opened='{{dialogOpen}}'>
|
|
<div class='content'>
|
|
<div class='icon'>
|
|
<iron-icon icon="mdi:text-to-speech" hidden$="[[isTransmitting]]"></iron-icon>
|
|
<paper-spinner active$="[[isTransmitting]]" hidden$="[[!isTransmitting]]"></paper-spinner>
|
|
</div>
|
|
<div class='text'>
|
|
<span>{{finalTranscript}}</span>
|
|
<span class='interimTranscript'>[[interimTranscript]]</span>
|
|
…
|
|
</div>
|
|
</div>
|
|
</paper-dialog>
|
|
</template>
|
|
|
|
</dom-module>
|
|
|
|
<script>
|
|
Polymer({
|
|
is: 'ha-voice-command-dialog',
|
|
|
|
behaviors: [window.hassBehavior],
|
|
|
|
properties: {
|
|
hass: {
|
|
type: Object,
|
|
},
|
|
|
|
dialogOpen: {
|
|
type: Boolean,
|
|
value: false,
|
|
observer: 'dialogOpenChanged',
|
|
},
|
|
|
|
finalTranscript: {
|
|
type: String,
|
|
bindNuclear: function (hass) {
|
|
return hass.voiceGetters.finalTranscript;
|
|
},
|
|
},
|
|
|
|
interimTranscript: {
|
|
type: String,
|
|
bindNuclear: function (hass) {
|
|
return hass.voiceGetters.extraInterimTranscript;
|
|
},
|
|
},
|
|
|
|
isTransmitting: {
|
|
type: Boolean,
|
|
bindNuclear: function (hass) {
|
|
return hass.voiceGetters.isTransmitting;
|
|
},
|
|
},
|
|
|
|
isListening: {
|
|
type: Boolean,
|
|
bindNuclear: function (hass) {
|
|
return hass.voiceGetters.isListening;
|
|
},
|
|
},
|
|
|
|
showListenInterface: {
|
|
type: Boolean,
|
|
computed: 'computeShowListenInterface(isListening, isTransmitting)',
|
|
observer: 'showListenInterfaceChanged',
|
|
},
|
|
},
|
|
|
|
computeShowListenInterface: function (isListening, isTransmitting) {
|
|
return isListening || isTransmitting;
|
|
},
|
|
|
|
dialogOpenChanged: function (newVal) {
|
|
if (!newVal && this.isListening) {
|
|
this.hass.voiceActions.stop();
|
|
}
|
|
},
|
|
|
|
showListenInterfaceChanged: function (newVal) {
|
|
if (!newVal && this.dialogOpen) {
|
|
this.dialogOpen = false;
|
|
} else if (newVal) {
|
|
this.dialogOpen = true;
|
|
}
|
|
},
|
|
});
|
|
</script> |