Leverage typescript functionality

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,

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);
 })();

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,
           },
         });

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,

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();
+})();

js/types.ts

@@ -30,5 +30,7 @@ declare global {
   interface Window {
     browser_mod?: BrowserMod;
     fully?: FullyKiosk;
+    hassConnection?: Promise<any>;
+    customCards?: [{}?];
   }
 }