Migrate to use websocket client (#158)

* Migrate to websocket client HA-JS

* Bump dependency to 0.1.4

* Upgrade HA-JS

* Fix missing import

home-assistant-js

@@ -1 +1 @@
-Subproject commit 81cffe128889577eb703a81b9d6fcc3ad5f04aec
+Subproject commit 0203764d05dab62d896585e3a84936ba7dde614c

package.json

@@ -28,9 +28,10 @@
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "MIT",
-  "_depComment": "keymirror, nuclear-js, object-assign are for ha-js",
+  "_depComment": "keymirror, nuclear-js, object-assign, ha-js-ws are for ha-js",
   "dependencies": {
     "classnames": "^2.2.5",
+    "home-assistant-js-websocket": "0.1.4",
     "keymirror": "^0.1.1",
     "nuclear-js": "^1.3.0",
     "object-assign": "^4.1.0"

src/components/ha-sidebar.html

@@ -3,12 +3,12 @@
 <link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
 <link rel='import' href='../../bower_components/paper-menu/paper-menu.html'>
 <link rel='import' href='../../bower_components/paper-item/paper-item.html'>
+<link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
 <link rel='import' href='../../bower_components/paper-item/paper-icon-item.html'>
 <link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
 
 <link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 
-<link rel='import' href='../components/stream-status.html'>
 <link rel='import' href='../util/hass-behavior.html'>
 
 <dom-module id='ha-sidebar'>
@@ -130,11 +130,6 @@
         </paper-item>
       </template>
 
-      <paper-item class='horizontal layout justified'>
-        <div class='setting'>Streaming updates</div>
-        <stream-status hass='[[hass]]'></stream-status>
-      </paper-item>
-
       <div class='divider'></div>
 
       <div class='subheader'>Developer Tools</div>

src/components/stream-status.html

@@ -1,69 +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-toggle-button/paper-toggle-button.html">
-
-<link rel='import' href='../util/hass-behavior.html'>
-
-<dom-module id="stream-status">
-  <template>
-    <style>
-      :host {
-        display: inline-block;
-        height: 24px;
-      }
-
-      paper-toggle-button {
-        vertical-align: middle;
-      }
-
-      iron-icon {
-        opacity: var(--dark-primary-opacity);
-      }
-
-      [hidden] {
-        display: none !important;
-      }
-    </style>
-
-    <iron-icon icon="mdi:alert" hidden$="[[!hasError]]"></iron-icon>
-    <paper-toggle-button
-      id="toggle"
-      on-change='toggleChanged'
-      checked$='[[isStreaming]]'
-      hidden$="[[hasError]]"
-    ></paper-toggle-button>
-  </template>
-</dom-module>
-
-<script>
-Polymer({
-  is: 'stream-status',
-
-  behaviors: [window.hassBehavior],
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    isStreaming: {
-      type: Boolean,
-      bindNuclear: function (hass) { return hass.streamGetters.isStreamingEvents; },
-    },
-
-    hasError: {
-      type: Boolean,
-      bindNuclear: function (hass) { return hass.streamGetters.hasStreamingEventsError; },
-    },
-  },
-
-  toggleChanged: function () {
-    if (this.isStreaming) {
-      this.hass.streamActions.stop();
-    } else {
-      this.hass.streamActions.start();
-    }
-  },
-});
-</script>

src/layouts/partial-cards.html

@@ -42,11 +42,6 @@
         <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <div main-title>[[computeTitle(views, locationName)]]</div>
-          <paper-icon-button
-            icon="mdi:refresh"
-            class$="[[computeRefreshButtonClass(isFetching)]]"
-            on-tap="handleRefresh" hidden$="[[isStreaming]]"
-          ></paper-icon-button>
           <paper-icon-button
             icon="mdi:microphone" hidden$='[[!canListen]]'
             on-tap="handleListenClick"></paper-icon-button>
@@ -143,20 +138,6 @@ Polymer({
       value: 1,
     },
 
-    isFetching: {
-      type: Boolean,
-      bindNuclear: function (hass) {
-        return hass.syncGetters.isFetching;
-      },
-    },
-
-    isStreaming: {
-      type: Boolean,
-      bindNuclear: function (hass) {
-        return hass.streamGetters.isStreamingEvents;
-      },
-    },
-
     canListen: {
       type: Boolean,
       bindNuclear: function (hass) {
@@ -278,10 +259,6 @@ Polymer({
     }).call(this);
   },
 
-  handleRefresh: function () {
-    this.hass.syncActions.fetchAll();
-  },
-
   handleListenClick: function () {
     this.hass.voiceActions.listen();
   },
@@ -296,10 +273,6 @@ Polymer({
     }
   },
 
-  computeRefreshButtonClass: function (isFetching) {
-    return isFetching ? 'ha-spin' : '';
-  },
-
   computeTitle: function (views, locationName) {
     return views.length > 0 ? 'Home Assistant' : locationName;
   },

src/managers/notification-manager.html

@@ -13,6 +13,11 @@
     </style>
 
     <paper-toast id="toast" text='{{text}}' no-cancel-on-outside-click='[[neg]]'></paper-toast>
+    <paper-toast
+      duration='0'
+      text='Connection lost. Reconnecting…'
+      opened='[[!isStreaming]]'
+    ></paper-toast>
   </template>
 </dom-module>
 
@@ -27,6 +32,11 @@ Polymer({
       type: Object,
     },
 
+    isStreaming: {
+      type: Boolean,
+      bindNuclear: function (hass) { return hass.streamGetters.isStreamingEvents; },
+    },
+
     // Otherwise we cannot close a modal when a notification is being shown.
     neg: {
       type: Boolean,

src/resources/ha-style.html

@@ -54,32 +54,6 @@
     --light-secondary-opacity: 0.7;
     --light-primary-opacity: 1.0;
   }
-
-  @-webkit-keyframes ha-spin {
-    0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-    100% {
-      -webkit-transform: rotate(359deg);
-      transform: rotate(359deg);
-    }
-  }
-  @keyframes ha-spin {
-    0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-    100% {
-      -webkit-transform: rotate(359deg);
-      transform: rotate(359deg);
-    }
-  }
-
-  .ha-spin {
-    -webkit-animation: ha-spin 2s infinite linear;
-    animation: ha-spin 2s infinite linear;
-  }
 </style>
 
 <dom-module id='ha-style'>