Added assistant.google plugin in new webpanel

This commit is contained in:
Fabio Manganiello 2019-06-08 13:25:40 +02:00
parent 41d8ae48e1
commit bb4cc80262
4 changed files with 169 additions and 2 deletions

View file

@ -16,8 +16,17 @@
width: var(--width);
height: var(--height);
div:first-child { border-radius: 1rem 1rem 0 0; }
div:last-child { border-radius: 0 0 1rem 1rem; }
.header {
border-radius: 1rem 1rem 0 0;
}
.body:first-child {
border-radius: 1rem;
}
.body:not(first-child) {
border-radius: 0 0 1rem 1rem;
}
.header {
border-bottom: $modal-header-border;

View file

@ -0,0 +1,34 @@
$icon-color: #7e8;
$icon-border: 1px solid #ccc;
$icon-shadow: 2px 2px 2px #ccc;
#assistant-google-modal {
.modal {
width: 50vw;
height: 50vh;
.body {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
.icon {
font-size: 3em;
color: $icon-color;
box-shadow: $icon-shadow;
border: $icon-border;
border-radius: 3em;
padding: .7em 1em .5em 1em;
}
.text {
margin-top: 2.5em;
}
}
}
}

View file

@ -117,3 +117,13 @@ function registerEventHandler(handler, ...events) {
}
}
function onReady(handler) {
if (document.readyState === "complete" || document.readyState === "loaded") {
handler();
} else {
document.addEventListener("DOMContentLoaded", () => {
handler();
}, false);
}
}

View file

@ -0,0 +1,114 @@
const Assistant = Vue.extend({
template: `
<modal v-model="visible" id="assistant-google-modal">
<div class="icon">
<i class="fa fa-bell" v-if="state.alerting"></i>
<i class="fa fa-volume-up" v-else-if="state.responding"></i>
<i class="fa fa-comment-dots" v-else-if="state.speechRecognized"></i>
<i class="fa fa-microphone" v-else></i>
</div>
<div class="text">
<div class="listening" v-if="state.listening">
<span>Assistant listening</span>
</div>
<div class="speech-recognized" v-else-if="state.speechRecognized">
<span v-text="phrase"></span>
</div>
<div class="responding" v-else-if="state.responding">
<span v-text="responseText"></span>
</div>
</div>
</modal>
`,
data: function() {
return {
responseText: '',
phrase: '',
visible: false,
state: {
listening: false,
speechRecognized: false,
responding: false,
alerting: false,
},
};
},
methods: {
reset: function() {
this.state.listening = false;
this.state.speechRecognized = false;
this.state.responding = false;
this.state.alerting = false;
this.phrase = '';
this.responseText = '';
},
conversationStart: function() {
this.reset();
this.state.listening = true;
this.visible = true;
},
conversationEnd: function() {
this.reset();
this.visible = false;
},
speechRecognized: function(event) {
this.reset();
this.state.speechRecognized = true;
this.phrase = event.phrase;
this.visible = true;
},
response: function(event) {
this.reset();
this.state.responding = true;
this.responseText = event.response_text;
this.visible = true;
},
alertOn: function() {
this.reset();
this.state.alerting = true;
this.visible = true;
},
alertOff: function() {
this.reset();
this.state.alerting = false;
this.visible = false;
},
registerHandlers: function() {
registerEventHandler(this.conversationStart, 'platypush.message.event.assistant.ConversationStartEvent');
registerEventHandler(this.conversationStart, 'platypush.message.event.assistant.HotwordDetectedEvent');
registerEventHandler(this.alertOn, 'platypush.message.event.assistant.AlertStartedEvent');
registerEventHandler(this.alertOff, 'platypush.message.event.assistant.AlertEndEvent');
registerEventHandler(this.speechRecognized, 'platypush.message.event.assistant.SpeechRecognizedEvent');
registerEventHandler(this.response, 'platypush.message.event.assistant.ResponseEvent');
registerEventHandler(this.conversationEnd, 'platypush.message.event.assistant.ConversationEndEvent');
registerEventHandler(this.conversationEnd, 'platypush.message.event.assistant.NoResponseEvent');
registerEventHandler(this.conversationEnd, 'platypush.message.event.assistant.ConversationTimeoutEvent');
},
},
mounted: function() {
this.registerHandlers();
},
});
onReady(() => {
const container = document.createElement('div');
const containerId = 'assistant-google-container';
container.setAttribute('id', containerId);
document.querySelector('#app').appendChild(container);
new Assistant().$mount('#' + containerId);
});