Frontend: extract voice command status component

homeassistant/components/frontend/www_static/polymer/components/ha-voice-command-progress.html

@@ -0,0 +1,61 @@
+<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="av:hearing"></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>
+
+<script>
+(function(){
+  var voiceGetters = window.hass.voiceGetters;
+
+  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,
+      },
+    },
+  });
+})();
+</script>

homeassistant/components/frontend/www_static/polymer/layouts/partial-states.html

@@ -1,11 +1,11 @@
 <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-icon-button/paper-icon-button.html">
 
 <link rel="import" href="./partial-base.html">
 
 <link rel="import" href="../components/state-cards.html">
+<link rel="import" href="../components/ha-voice-command-progress.html">
 
 <dom-module id="partial-states">
   <style>
@@ -58,9 +58,7 @@
       <div class='content-wrapper'>
         <div class='listening' hidden$="[[!showListenInterface]]"
           on-click="handleListenClick">
-          <iron-icon icon="av:hearing"></iron-icon> <span>{{finalTranscript}}</span>
+          <ha-voice-command-progress></ha-voice-command-progress>
-          <span class='interimTranscript'>[[interimTranscript]]</span>
-          <paper-spinner active$="[[isTransmitting]]" alt="Sending voice command to Home Assistant"></paper-spinner>
         </div>
 
         <state-cards states="[[states]]">
@@ -134,21 +132,6 @@
         bindNuclear: voiceGetters.isListening,
       },
 
-      isTransmitting: {
-        type: Boolean,
-        bindNuclear: voiceGetters.isTransmitting,
-      },
-
-      interimTranscript: {
-        type: String,
-        bindNuclear: voiceGetters.extraInterimTranscript,
-      },
-
-      finalTranscript: {
-        type: String,
-        bindNuclear: voiceGetters.finalTranscript,
-      },
-
       showListenInterface: {
         type: Boolean,
         bindNuclear: [