Move voice recog to dialog

package.json

@@ -20,7 +20,7 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "MIT",
   "dependencies": {
-    "home-assistant-js": "git+https://github.com/balloob/home-assistant-js.git#2f69d196e841b4dd77e17a60b5b712938d9ddc0c",
+    "home-assistant-js": "git+https://github.com/balloob/home-assistant-js.git#9b10d9a7615a6a84762fb418a0b24ba9893c1829",
     "lodash": "^3.10.1",
     "moment": "^2.10.6"
   },

src/components/ha-voice-command-progress.html

@@ -1,32 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.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-progress">
-  <style>
-    :host {
-      display: block;
-    }
-
-    iron-icon {
-      margin-right: 8px;
-    }
-
-    .interimTranscript {
-      color: darkgrey;
-    }
-
-    .listening paper-spinner {
-      float: right;
-    }
-  </style>
-
-  <template>
-    <iron-icon icon="mdi:text-to-speech"></iron-icon>
-    <span>{{finalTranscript}}</span>
-    <span class='interimTranscript'>[[interimTranscript]]</span>
-    <paper-spinner active$="[[isTransmitting]]" alt="Sending voice command to Home Assistant"></paper-spinner>
-  </template>
-
-</dom-module>

src/components/ha-voice-command-progress.js

@@ -1,27 +0,0 @@
-import { voiceGetters } from '../util/home-assistant-js-instance';
-
-import Polymer from '../polymer';
-import nuclearObserver from '../util/bound-nuclear-behavior';
-
-export default new Polymer({
-  is: 'ha-voice-command-progress',
-
-  behaviors: [nuclearObserver],
-
-  properties: {
-    isTransmitting: {
-      type: Boolean,
-      bindNuclear: voiceGetters.isTransmitting,
-    },
-
-    interimTranscript: {
-      type: String,
-      bindNuclear: voiceGetters.extraInterimTranscript,
-    },
-
-    finalTranscript: {
-      type: String,
-      bindNuclear: voiceGetters.finalTranscript,
-    },
-  },
-});

src/dialogs/ha-voice-command-dialog.html

@@ -0,0 +1,64 @@
+<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">
+  <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>
+
+  <template>
+    <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>

src/dialogs/ha-voice-command-dialog.js

@@ -0,0 +1,83 @@
+import {
+  voiceActions,
+  voiceGetters,
+} from '../util/home-assistant-js-instance';
+
+import Polymer from '../polymer';
+import nuclearObserver from '../util/bound-nuclear-behavior';
+
+export default new Polymer({
+  is: 'ha-voice-command-dialog',
+
+  behaviors: [nuclearObserver],
+
+  properties: {
+    dialogOpen: {
+      type: Boolean,
+      value: false,
+      observer: 'dialogOpenChanged',
+    },
+
+    finalTranscript: {
+      type: String,
+      bindNuclear: voiceGetters.finalTranscript,
+    },
+
+    interimTranscript: {
+      type: String,
+      bindNuclear: voiceGetters.extraInterimTranscript,
+    },
+
+    isTransmitting: {
+      type: Boolean,
+      bindNuclear: voiceGetters.isTransmitting,
+    },
+
+    isListening: {
+      type: Boolean,
+      bindNuclear: voiceGetters.isListening,
+    },
+
+    showListenInterface: {
+      type: Boolean,
+      computed: 'computeShowListenInterface(isListening, isTransmitting)',
+      observer: 'showListenInterfaceChanged',
+    },
+
+    _boundOnBackdropTap: {
+      type: Function,
+      value: function bindBackdropTap() {
+        return this._onBackdropTap.bind(this);
+      },
+    },
+  },
+
+  computeShowListenInterface(isListening, isTransmitting) {
+    return isListening || isTransmitting;
+  },
+
+  dialogOpenChanged(newVal) {
+    if (newVal) {
+      this.$.dialog.backdropElement.addEventListener('click',
+                                                     this._boundOnBackdropTap);
+    } else if (!newVal && this.isListening) {
+      voiceActions.stop();
+    }
+  },
+
+  showListenInterfaceChanged(newVal) {
+    if (!newVal && this.dialogOpen) {
+      this.dialogOpen = false;
+    } else if (newVal) {
+      this.dialogOpen = true;
+    }
+  },
+
+  _onBackdropTap() {
+    this.$.dialog.backdropElement.removeEventListener('click',
+                                                      this._boundOnBackdropTap);
+    if (this.isListening) {
+      voiceActions.stop();
+    }
+  },
+});

src/layouts/home-assistant-main.html

@@ -10,6 +10,7 @@
 <link rel='import' href='../layouts/partial-dev-set-state.html'>
 <link rel='import' href='../managers/notification-manager.html'>
 <link rel="import" href="../dialogs/more-info-dialog.html">
+<link rel="import" href="../dialogs/ha-voice-command-dialog.html">
 
 <link rel='import' href='../components/ha-sidebar.html'>
 
@@ -17,6 +18,7 @@
   <template>
     <notification-manager></notification-manager>
     <more-info-dialog></more-info-dialog>
+    <ha-voice-command-dialog></ha-voice-command-dialog>
     <iron-media-query query="(max-width: 870px)" query-matches="{{narrow}}">
     </iron-media-query>
 

src/layouts/home-assistant-main.js

@@ -18,6 +18,7 @@ require('../layouts/partial-dev-fire-event');
 require('../layouts/partial-dev-set-state');
 require('../managers/notification-manager');
 require('../dialogs/more-info-dialog');
+require('../dialogs/ha-voice-command-dialog');
 
 export default new Polymer({
   is: 'home-assistant-main',

src/layouts/partial-zone.html

@@ -2,7 +2,6 @@
 <link rel="import" href="../../bower_components/paper-header-panel/paper-header-panel.html">
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 
-<link rel="import" href="../components/ha-voice-command-progress.html">
 <link rel="import" href="../components/ha-zone-cards.html">
 
 <dom-module id="partial-zone">
@@ -40,17 +39,11 @@
           on-click="handleRefresh" hidden$="[[isStreaming]]"
         ></paper-icon-button>
         <paper-icon-button
-          icon="[[computeListenButtonIcon(isListening)]]"
+          icon="mdi:microphone" hidden$='[[!canListen]]'
-          hidden$='[[!canListen]]'
           on-click="handleListenClick"></paper-icon-button>
       </paper-toolbar>
 
       <div class='content fit'>
-        <div class='listening' hidden$="[[!showListenInterface]]"
-          on-click="handleListenClick">
-          <ha-voice-command-progress></ha-voice-command-progress>
-        </div>
-
         <ha-zone-cards
           show-introduction='[[computeShowIntroduction(introductionLoaded, states)]]'
           states='[[states]]' columns='[[columns]]'></ha-zone-cards>

src/layouts/partial-zone.js

@@ -12,7 +12,6 @@ import Polymer from '../polymer';
 import nuclearObserver from '../util/bound-nuclear-behavior';
 
 require('./partial-base');
-require('../components/ha-voice-command-progress');
 require('../components/ha-zone-cards');
 
 export default new Polymer({
@@ -45,20 +44,6 @@ export default new Polymer({
       ],
     },
 
-    isListening: {
-      type: Boolean,
-      bindNuclear: voiceGetters.isListening,
-    },
-
-    showListenInterface: {
-      type: Boolean,
-      bindNuclear: [
-        voiceGetters.isListening,
-        voiceGetters.isTransmitting,
-        (isListening, isTransmitting) => isListening || isTransmitting,
-      ],
-    },
-
     introductionLoaded: {
       type: Boolean,
       bindNuclear: configGetters.isComponentLoaded('introduction'),
@@ -112,11 +97,7 @@ export default new Polymer({
   },
 
   handleListenClick() {
-    if (this.isListening) {
+    voiceActions.listen();
-      voiceActions.stop();
-    } else {
-      voiceActions.listen();
-    }
   },
 
   computeDomains(states) {
@@ -131,10 +112,6 @@ export default new Polymer({
     return states.get(domain).toArray();
   },
 
-  computeListenButtonIcon(isListening) {
-    return isListening ? 'mdi:microphone-off' : 'mdi:microphone';
-  },
-
   computeRefreshButtonClass(isFetching) {
     if (isFetching) {
       return 'ha-spin';