Merge remote-tracking branch 'upstream/master'

custom_components/browser_mod/__init__.py

@@ -10,6 +10,7 @@ _LOGGER = logging.getLogger(__name__)
 
 async def async_setup(hass, config):
 
+    await setup_connection(hass, config)
     setup_view(hass)
 
     aliases = {}
@@ -31,7 +32,6 @@ async def async_setup(hass, config):
     await hass.helpers.discovery.async_load_platform("light", DOMAIN, {}, config)
     await hass.helpers.discovery.async_load_platform("camera", DOMAIN, {}, config)
 
-    await setup_connection(hass, config)
 
     await setup_service(hass)
 

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "browser_mod",
   "private": true,
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "",
   "scripts": {
     "build": "webpack",

test/configuration.yaml

@@ -0,0 +1,16 @@
+default_config:
+
+demo:
+
+browser_mod:
+
+lovelace:
+  mode: yaml
+  resources:
+    - url: /local/card-mod.js
+      type: module
+  dashboards:
+    lovelace-yaml:
+      mode: yaml
+      title: yaml
+      filename: lovelace.yaml

test/docker-compose.yml

@@ -0,0 +1,59 @@
+#
+# Docker services for testing Home Assistant integrations and plugins
+#
+# Automaatically sets up configuration adds a user and skips the onboarding
+#
+# Username: dev
+# Password: dev
+#
+# Two services, 'prod' and 'dev' run the latest production and dev docker images respectively.
+#
+# Start with
+# $ docker-compose up prod
+# or
+# $ docker-compose up dev
+#
+# When done, clean up with
+# $ docker-compose rm -f
+#
+
+x-files: &x-files
+  - ../custom_components:/config/custom_components
+  - ./configuration.yaml:/config/configuration.yaml
+  - ./lovelace.yaml:/config/lovelace.yaml
+  - ./views:/config/views
+
+x-command: &x-command |
+  bash -c '
+  mkdir /config/www/
+  curl https://raw.githubusercontent.com/thomasloven/lovelace-card-mod/master/card-mod.js --output /config/www/card-mod.js &&
+  hass --script ensure_config -c /config &&
+  hass --script auth -c /config add dev dev &&
+  echo "
+    {
+      \"data\": {
+        \"done\": [
+          \"user\",
+          \"core_config\",
+          \"integration\"
+        ]
+      },
+      \"key\": \"onboarding\",
+      \"version\": 3
+    }
+    " > /config/.storage/onboarding &&
+  hass -v -c /config'
+
+version: '3.5'
+services:
+
+  prod: &base_service
+    image: homeassistant/home-assistant:latest
+    volumes: *x-files
+    ports:
+      - "5001:8123"
+    command: *x-command
+
+  dev:
+    <<: *base_service
+    image: homeassistant/home-assistant:dev

test/lovelace.yaml

@@ -0,0 +1,18 @@
+name: browser_mod
+views:
+  - title: Player
+    cards:
+      - type: custom:browser-player
+      - type: button
+        entity: sun.sun
+        name: popup
+        tap_action:
+          action: call-service
+          service: browser_mod.popup
+          service_data:
+            deviceID: this
+            title: Test
+            card:
+              type: markdown
+              content: Hello!
+