diff --git a/custom_components/browser_mod/browser_mod.js b/custom_components/browser_mod/browser_mod.js index 1acbd0f..d71e68e 100644 --- a/custom_components/browser_mod/browser_mod.js +++ b/custom_components/browser_mod/browser_mod.js @@ -36,6 +36,14 @@ function ha_element() { return document.querySelector("home-assistant"); } +async function hass_loaded() { + await Promise.race([ + customElements.whenDefined("home-assistant"), + customElements.whenDefined("hc-main") + ]); + return true; +} + function hass() { if(document.querySelector('hc-main')) return document.querySelector('hc-main').hass; @@ -123,7 +131,6 @@ async function load_lovelace() { if(p.hass === undefined) { await new Promise(resolve => { window.addEventListener('connection-status', (ev) => { - console.log(ev); resolve(); }, {once: true}); }); @@ -509,10 +516,7 @@ class BrowserPlayerEditor extends s { } } (async () => { - var _a; - while (((_a = customElements.get("home-assistant")) !== null && _a !== void 0 ? _a : customElements.get("hc-main")) === - undefined) - await new Promise((resolve) => window.setTimeout(resolve, 100)); + await hass_loaded(); if (!customElements.get("browser-player-editor")) { customElements.define("browser-player-editor", BrowserPlayerEditor); window.customCards = window.customCards || []; @@ -641,37 +645,30 @@ __decorate([ e() ], BrowserPlayer.prototype, "hass", void 0); (async () => { - var _a; - while (((_a = customElements.get("home-assistant")) !== null && _a !== void 0 ? _a : customElements.get("hc-main")) === - undefined) - await new Promise((resolve) => window.setTimeout(resolve, 100)); + await hass_loaded(); if (!customElements.get("browser-player")) customElements.define("browser-player", BrowserPlayer); })(); -const hassWindow = window; class BrowserModConnection { async connect() { const isCast = document.querySelector("hc-main") !== null; if (!isCast) { - while (!hassWindow.hassConnection) + while (!window.hassConnection) await new Promise((resolve) => window.setTimeout(resolve, 100)); - this._connection = (await hassWindow.hassConnection).conn; + this.connection = (await window.hassConnection).conn; } else { - this._connection = hass().connection; + this.connection = hass().connection; } - this._connection.subscribeMessage((msg) => this.msg_callback(msg), { + this.connection.subscribeMessage((msg) => this.msg_callback(msg), { type: "browser_mod/connect", deviceID: deviceID, }); provideHass(this); } - set hass(hass) { - this._hass = hass; - } get connected() { - return this._connection !== undefined; + return this.connection !== undefined; } msg_callback(message) { console.log(message); @@ -679,7 +676,7 @@ class BrowserModConnection { sendUpdate(data) { if (!this.connected) return; - this._connection.sendMessage({ + this.connection.sendMessage({ type: "browser_mod/update", deviceID, data, @@ -1072,21 +1069,21 @@ const BrowserModBrowserMixin = (C) => class extends C { } sensor_update() { const update = async () => { - var _a, _b, _c, _d, _e, _f; + var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l; const battery = (_b = (_a = navigator).getBattery) === null || _b === void 0 ? void 0 : _b.call(_a); this.sendUpdate({ browser: { path: window.location.pathname, visibility: document.visibilityState, userAgent: navigator.userAgent, - currentUser: this._hass && this._hass.user && this._hass.user.name, + currentUser: (_d = (_c = this.hass) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.name, fullyKiosk: this.isFully, width: window.innerWidth, height: window.innerHeight, - battery_level: (_d = (_c = window.fully) === null || _c === void 0 ? void 0 : _c.getBatteryLevel()) !== null && _d !== void 0 ? _d : (battery === null || battery === void 0 ? void 0 : battery.level) * 100, - charging: (_f = (_e = window.fully) === null || _e === void 0 ? void 0 : _e.isPlugged()) !== null && _f !== void 0 ? _f : battery === null || battery === void 0 ? void 0 : battery.charging, - darkMode: this._hass && this._hass.themes && this._hass.themes.darkMode, - userData: this._hass && this._hass.user, + battery_level: (_f = (_e = window.fully) === null || _e === void 0 ? void 0 : _e.getBatteryLevel()) !== null && _f !== void 0 ? _f : (battery === null || battery === void 0 ? void 0 : battery.level) * 100, + charging: (_h = (_g = window.fully) === null || _g === void 0 ? void 0 : _g.isPlugged()) !== null && _h !== void 0 ? _h : battery === null || battery === void 0 ? void 0 : battery.charging, + darkMode: (_k = (_j = this.hass) === null || _j === void 0 ? void 0 : _j.themes) === null || _k === void 0 ? void 0 : _k.darkMode, + userData: (_l = this.hass) === null || _l === void 0 ? void 0 : _l.user, config: this.config, }, }); @@ -1214,7 +1211,7 @@ class BrowserMod extends ext(BrowserModConnection, [ } call_service(msg) { const _replaceThis = (data) => { - if (typeof data === "string" && data === "this") + if (data === "this") return deviceID; if (Array.isArray(data)) return data.map(_replaceThis); @@ -1226,7 +1223,7 @@ class BrowserMod extends ext(BrowserModConnection, [ }; const [domain, service] = msg.service.split(".", 2); let service_data = _replaceThis(JSON.parse(JSON.stringify(msg.service_data))); - this._hass.callService(domain, service, service_data); + this.hass.callService(domain, service, service_data); } update(msg = null) { if (msg) { @@ -1244,15 +1241,10 @@ class BrowserMod extends ext(BrowserModConnection, [ this.sensor_update(); } } -const bases = [ - customElements.whenDefined("home-assistant"), - customElements.whenDefined("hc-main"), -]; -Promise.race(bases).then(() => { - window.setTimeout(() => { - window.browser_mod = - window.browser_mod || new BrowserMod(); - }, 1000); -}); +(async () => { + await hass_loaded(); + if (!window.browser_mod) + window.browser_mod = new BrowserMod(); +})(); export { BrowserMod }; diff --git a/js/browser-player-editor.ts b/js/browser-player-editor.ts index 646f37b..0be7f97 100644 --- a/js/browser-player-editor.ts +++ b/js/browser-player-editor.ts @@ -1,4 +1,5 @@ import { LitElement, html } from "lit"; +import { hass_loaded } from "card-tools/src/hass"; class BrowserPlayerEditor extends LitElement { setConfig(config) {} @@ -8,15 +9,12 @@ class BrowserPlayerEditor extends LitElement { } (async () => { - while ( - (customElements.get("home-assistant") ?? customElements.get("hc-main")) === - undefined - ) - await new Promise((resolve) => window.setTimeout(resolve, 100)); + await hass_loaded(); + if (!customElements.get("browser-player-editor")) { customElements.define("browser-player-editor", BrowserPlayerEditor); - (window as any).customCards = (window as any).customCards || []; - (window as any).customCards.push({ + window.customCards = window.customCards || []; + window.customCards.push({ type: "browser-player", name: "Browser Player", preview: true, diff --git a/js/browser-player.ts b/js/browser-player.ts index f1a7938..9e99787 100644 --- a/js/browser-player.ts +++ b/js/browser-player.ts @@ -3,6 +3,7 @@ import { property } from "lit/decorators.js"; import { deviceID, setDeviceID } from "card-tools/src/deviceID"; import { fireEvent } from "card-tools/src/event"; +import { hass_loaded } from "card-tools/src/hass"; import "./browser-player-editor.ts"; @@ -132,11 +133,8 @@ class BrowserPlayer extends LitElement { } (async () => { - while ( - (customElements.get("home-assistant") ?? customElements.get("hc-main")) === - undefined - ) - await new Promise((resolve) => window.setTimeout(resolve, 100)); + await hass_loaded(); + if (!customElements.get("browser-player")) customElements.define("browser-player", BrowserPlayer); })(); diff --git a/js/browser.ts b/js/browser.ts index e6c47a3..1614b73 100644 --- a/js/browser.ts +++ b/js/browser.ts @@ -19,16 +19,15 @@ export const BrowserModBrowserMixin = (C) => path: window.location.pathname, visibility: document.visibilityState, userAgent: navigator.userAgent, - currentUser: this._hass && this._hass.user && this._hass.user.name, + currentUser: this.hass?.user?.name, fullyKiosk: this.isFully, width: window.innerWidth, height: window.innerHeight, battery_level: window.fully?.getBatteryLevel() ?? battery?.level * 100, charging: window.fully?.isPlugged() ?? battery?.charging, - darkMode: - this._hass && this._hass.themes && this._hass.themes.darkMode, - userData: this._hass && this._hass.user, + darkMode: this.hass?.themes?.darkMode, + userData: this.hass?.user, config: this.config, }, }); diff --git a/js/connection.ts b/js/connection.ts index a918cd1..1a487d4 100644 --- a/js/connection.ts +++ b/js/connection.ts @@ -1,23 +1,21 @@ import { deviceID } from "card-tools/src/deviceID"; import { hass, provideHass } from "card-tools/src/hass"; -const hassWindow: any = window; - export class BrowserModConnection { - _connection; - _hass; + hass; + connection; async connect() { const isCast = document.querySelector("hc-main") !== null; if (!isCast) { - while (!hassWindow.hassConnection) + while (!window.hassConnection) await new Promise((resolve) => window.setTimeout(resolve, 100)); - this._connection = (await hassWindow.hassConnection).conn; + this.connection = (await window.hassConnection).conn; } else { - this._connection = hass().connection; + this.connection = hass().connection; } - this._connection.subscribeMessage((msg) => this.msg_callback(msg), { + this.connection.subscribeMessage((msg) => this.msg_callback(msg), { type: "browser_mod/connect", deviceID: deviceID, }); @@ -25,12 +23,8 @@ export class BrowserModConnection { provideHass(this); } - set hass(hass) { - this._hass = hass; - } - get connected() { - return this._connection !== undefined; + return this.connection !== undefined; } msg_callback(message) { @@ -39,7 +33,7 @@ export class BrowserModConnection { sendUpdate(data) { if (!this.connected) return; - this._connection.sendMessage({ + this.connection.sendMessage({ type: "browser_mod/update", deviceID, data, diff --git a/js/main.ts b/js/main.ts index b511d1d..e85a94a 100644 --- a/js/main.ts +++ b/js/main.ts @@ -2,7 +2,7 @@ import { deviceID } from "card-tools/src/deviceID"; import { lovelace_view } from "card-tools/src/hass"; import { popUp } from "card-tools/src/popup"; import { fireEvent } from "card-tools/src/event"; -import { ha_element } from "card-tools/src/hass"; +import { ha_element, hass_loaded } from "card-tools/src/hass"; import "./browser-player"; import { BrowserModConnection } from "./connection"; @@ -107,7 +107,7 @@ export class BrowserMod extends ext(BrowserModConnection, [ call_service(msg) { const _replaceThis = (data) => { - if (typeof data === "string" && data === "this") return deviceID; + if (data === "this") return deviceID; if (Array.isArray(data)) return data.map(_replaceThis); if (data.constructor == Object) { for (const key in data) data[key] = _replaceThis(data[key]); @@ -118,7 +118,7 @@ export class BrowserMod extends ext(BrowserModConnection, [ let service_data = _replaceThis( JSON.parse(JSON.stringify(msg.service_data)) ); - this._hass.callService(domain, service, service_data); + this.hass.callService(domain, service, service_data); } update(msg = null) { @@ -138,13 +138,8 @@ export class BrowserMod extends ext(BrowserModConnection, [ } } -const bases = [ - customElements.whenDefined("home-assistant"), - customElements.whenDefined("hc-main"), -]; -Promise.race(bases).then(() => { - window.setTimeout(() => { - (window as any).browser_mod = - (window as any).browser_mod || new BrowserMod(); - }, 1000); -}); +(async () => { + await hass_loaded(); + + if (!window.browser_mod) window.browser_mod = new BrowserMod(); +})(); diff --git a/js/types.ts b/js/types.ts index 34491ae..26199b2 100644 --- a/js/types.ts +++ b/js/types.ts @@ -30,5 +30,7 @@ declare global { interface Window { browser_mod?: BrowserMod; fully?: FullyKiosk; + hassConnection?: Promise; + customCards?: [{}?]; } }