Merge remote-tracking branch 'upstream/master'

js/browser-player-editor.js

@@ -1,21 +1,30 @@
-import { LitElement, html, css } from "card-tools/src/lit-element";
 import { registerCard } from "card-tools/src/editor";
 
-class BrowserPlayerEditor extends LitElement {
-    setConfig(config) {
+const bases = [customElements.whenDefined('home-assistant-main'), customElements.whenDefined('hui-view')];
+Promise.race(bases).then(() => {
 
-    }
-    render() {
-        return html`
-        <div>
-        Nothing to configure.
-        </div>
-        `;
-    }
-}
+  const LitElement = customElements.get('home-assistant-main')
+    ? Object.getPrototypeOf(customElements.get('home-assistant-main'))
+    : Object.getPrototypeOf(customElements.get('hui-view'));
+  const html = LitElement.prototype.html;
+  const css = LitElement.prototype.css;
 
-if(!customElements.get("browser-player-editor")) {
-  customElements.define("browser-player-editor", BrowserPlayerEditor);
-  window.customCards = window.customCards || [];
-  window.customCards.push({type:"browser-player", name: "Browser Player", preview: true});
-}
+  class BrowserPlayerEditor extends LitElement {
+      setConfig(config) {
+
+      }
+      render() {
+          return html`
+          <div>
+          Nothing to configure.
+          </div>
+          `;
+      }
+  }
+
+  if(!customElements.get("browser-player-editor")) {
+    customElements.define("browser-player-editor", BrowserPlayerEditor);
+    window.customCards = window.customCards || [];
+    window.customCards.push({type:"browser-player", name: "Browser Player", preview: true});
+  }
+});

js/browser-player.js

@@ -3,6 +3,15 @@ import { deviceID } from "card-tools/src/deviceID"
 import { moreInfo } from "card-tools/src/more-info"
 import "./browser-player-editor.js"
 
+const bases = [customElements.whenDefined('home-assistant-main'), customElements.whenDefined('hui-view')];
+Promise.race(bases).then(() => {
+
+const LitElement = customElements.get('home-assistant-main')
+  ? Object.getPrototypeOf(customElements.get('home-assistant-main'))
+  : Object.getPrototypeOf(customElements.get('hui-view'));
+const html = LitElement.prototype.html;
+const css = LitElement.prototype.css;
+
 class BrowserPlayer extends LitElement {
 
   static get properties() {
@@ -39,6 +48,10 @@ class BrowserPlayer extends LitElement {
   }
 
   render() {
+    if(!window.browser_mod) {
+      window.setTimeout(() => this.requestUpdate(), 100);
+      return html``;
+    }
     const player = window.browser_mod.player;
     return html`
     <ha-card>
@@ -114,3 +127,4 @@ class BrowserPlayer extends LitElement {
 
 if(!customElements.get("browser-player"))
   customElements.define("browser-player", BrowserPlayer);
+});

js/main.js

@@ -49,12 +49,20 @@ class BrowserMod {
     }
   }
 
+  _connect() {
+    if(!window.hassConnection) {
+      window.setTimeout(() => this._connect(), 100);
+    } else {
+      window.hassConnection.then((conn) => this.connect(conn.conn));
+    }
+  }
+
   constructor() {
     this.entity_id = deviceID.replace("-","_");
     this.cast = document.querySelector("hc-main") !== null;
     if(!this.cast) {
       window.setTimeout(this._load_lovelace.bind(this), 500);
-      window.hassConnection.then((conn) => this.connect(conn.conn));
+      this._connect();
       document.querySelector("home-assistant").addEventListener("hass-more-info", this.popup_card.bind(this));
     } else {
       this.connect(hass().connection);
@@ -444,4 +452,8 @@ class BrowserMod {
 
 }
 
-window.browser_mod = window.browser_mod || new BrowserMod();
+
+const bases = [customElements.whenDefined('home-assistant-main'), customElements.whenDefined('hui-view')];
+Promise.race(bases).then(() => {
+  window.browser_mod = window.browser_mod || new BrowserMod();
+});