Switch to typescript

js/browser-player-editor.js

@@ -1,28 +0,0 @@
-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 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-editor.ts

@@ -0,0 +1,25 @@
+import { LitElement, html } from "lit";
+
+class BrowserPlayerEditor extends LitElement {
+  setConfig(config) {}
+  render() {
+    return html` <div>Nothing to configure.</div> `;
+  }
+}
+
+(async () => {
+  while (
+    (customElements.get("home-assistant") ?? customElements.get("hc-main")) ===
+    undefined
+  )
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+  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({
+      type: "browser-player",
+      name: "Browser Player",
+      preview: true,
+    });
+  }
+})();

js/browser-player.js

@@ -1,142 +0,0 @@
-import { deviceID, setDeviceID } 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() {
-      return {
-        hass: {},
-      };
-    }
-
-    static getConfigElement() {
-      return document.createElement("browser-player-editor");
-    }
-    static getStubConfig() {
-      return {};
-    }
-
-    async setConfig(config) {
-      this._config = config;
-      while (!window.browser_mod) {
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-      }
-      for (const event of [
-        "play",
-        "pause",
-        "ended",
-        "volumechange",
-        "canplay",
-        "loadeddata",
-      ])
-        window.browser_mod.player.addEventListener(event, () =>
-          this.requestUpdate()
-        );
-    }
-    handleMute(ev) {
-      window.browser_mod.player_mute();
-    }
-    handleVolumeChange(ev) {
-      const vol = parseFloat(ev.target.value);
-      window.browser_mod.player_set_volume(vol);
-    }
-    handleMoreInfo(ev) {
-      moreInfo("media_player." + window.browser_mod.entity_id);
-    }
-    handlePlayPause(ev) {
-      if (window.browser_mod.player.paused) window.browser_mod.player_play();
-      else window.browser_mod.player_pause();
-    }
-    setDeviceID() {
-      const newID = prompt("Set deviceID", deviceID);
-      if (newID !== deviceID) {
-        setDeviceID(newID);
-        this.requestUpdate();
-      }
-    }
-
-    render() {
-      if (!window.browser_mod) {
-        window.setTimeout(() => this.requestUpdate(), 100);
-        return html``;
-      }
-      const player = window.browser_mod.player;
-      return html`
-        <ha-card>
-          <div class="card-content">
-            <ha-icon-button @click=${this.handleMute}>
-              <ha-icon
-                .icon=${player.muted ? "mdi:volume-off" : "mdi:volume-high"}
-              ></ha-icon>
-            </ha-icon-button>
-            <ha-slider
-              min="0"
-              max="1"
-              step="0.01"
-              ?disabled=${player.muted}
-              value=${player.volume}
-              @change=${this.handleVolumeChange}
-            ></ha-slider>
-
-            ${window.browser_mod.player_state === "stopped"
-              ? html`<div class="placeholder"></div>`
-              : html`
-                  <ha-icon-button @click=${this.handlePlayPause} highlight>
-                    <ha-icon
-                      .icon=${player.paused ? "mdi:play" : "mdi:pause"}
-                    ></ha-icon>
-                  </ha-icon-button>
-                `}
-            <ha-icon-button @click=${this.handleMoreInfo}>
-              <ha-icon .icon=${"mdi:cog"}></ha-icon>
-            </ha-icon-button>
-          </div>
-
-          <div class="device-id" @click=${this.setDeviceID}>${deviceID}</div>
-        </ha-card>
-      `;
-    }
-
-    static get styles() {
-      return css`
-        paper-icon-button[highlight] {
-          color: var(--accent-color);
-        }
-        .card-content {
-          display: flex;
-          justify-content: center;
-        }
-        .placeholder {
-          width: 24px;
-          padding: 8px;
-        }
-        .device-id {
-          opacity: 0.7;
-          font-size: xx-small;
-          margin-top: -10px;
-          user-select: all;
-          -webkit-user-select: all;
-          -moz-user-select: all;
-          -ms-user-select: all;
-        }
-        ha-icon-button ha-icon {
-          display: flex;
-        }
-      `;
-    }
-  }
-
-  if (!customElements.get("browser-player"))
-    customElements.define("browser-player", BrowserPlayer);
-});

js/browser-player.ts

@@ -0,0 +1,142 @@
+import { LitElement, html, css } from "lit";
+import { property } from "lit/decorators.js";
+
+import { deviceID, setDeviceID } from "card-tools/src/deviceID";
+import { fireEvent } from "card-tools/src/event";
+
+import "./browser-player-editor.ts";
+
+import "./types";
+
+class BrowserPlayer extends LitElement {
+  @property() hass;
+
+  static getConfigElement() {
+    return document.createElement("browser-player-editor");
+  }
+  static getStubConfig() {
+    return {};
+  }
+
+  async setConfig(config) {
+    while (!window.browser_mod) {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+    }
+    for (const event of [
+      "play",
+      "pause",
+      "ended",
+      "volumechange",
+      "canplay",
+      "loadeddata",
+    ])
+      window.browser_mod.player.addEventListener(event, () =>
+        this.requestUpdate()
+      );
+  }
+  handleMute(ev) {
+    window.browser_mod.player_mute();
+  }
+  handleVolumeChange(ev) {
+    const vol = parseFloat(ev.target.value);
+    window.browser_mod.player_set_volume(vol);
+  }
+  handleMoreInfo(ev) {
+    fireEvent(
+      "hass-more-info",
+      { entityId: `media_player.${window.browser_mod.entity_id}` },
+      this
+    );
+  }
+  handlePlayPause(ev) {
+    if (window.browser_mod.player.paused) window.browser_mod.player_play();
+    else window.browser_mod.player_pause();
+  }
+  setDeviceID() {
+    const newID = prompt("Set deviceID", deviceID);
+    if (newID !== deviceID) {
+      setDeviceID(newID);
+      this.requestUpdate();
+    }
+  }
+
+  render() {
+    if (!window.browser_mod) {
+      window.setTimeout(() => this.requestUpdate(), 100);
+      return html``;
+    }
+    const player = window.browser_mod.player;
+    return html`
+      <ha-card>
+        <div class="card-content">
+          <ha-icon-button @click=${this.handleMute}>
+            <ha-icon
+              .icon=${player.muted ? "mdi:volume-off" : "mdi:volume-high"}
+            ></ha-icon>
+          </ha-icon-button>
+          <ha-slider
+            min="0"
+            max="1"
+            step="0.01"
+            ?disabled=${player.muted}
+            value=${player.volume}
+            @change=${this.handleVolumeChange}
+          ></ha-slider>
+
+          ${window.browser_mod.player_state === "stopped"
+            ? html`<div class="placeholder"></div>`
+            : html`
+                <ha-icon-button @click=${this.handlePlayPause} highlight>
+                  <ha-icon
+                    .icon=${player.paused ? "mdi:play" : "mdi:pause"}
+                  ></ha-icon>
+                </ha-icon-button>
+              `}
+          <ha-icon-button @click=${this.handleMoreInfo}>
+            <ha-icon .icon=${"mdi:cog"}></ha-icon>
+          </ha-icon-button>
+        </div>
+
+        <div class="device-id" @click=${this.setDeviceID}>${deviceID}</div>
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      paper-icon-button[highlight] {
+        color: var(--accent-color);
+      }
+      .card-content {
+        display: flex;
+        justify-content: center;
+      }
+      .placeholder {
+        width: 24px;
+        padding: 8px;
+      }
+      .device-id {
+        opacity: 0.7;
+        font-size: xx-small;
+        margin-top: -10px;
+        user-select: all;
+        -webkit-user-select: all;
+        -moz-user-select: all;
+        -ms-user-select: all;
+      }
+      ha-icon-button ha-icon {
+        display: flex;
+      }
+    `;
+  }
+}
+
+(async () => {
+  while (
+    (customElements.get("home-assistant") ?? customElements.get("hc-main")) ===
+    undefined
+  )
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+  if (!customElements.get("browser-player"))
+    customElements.define("browser-player", BrowserPlayer);
+})();

js/browser.ts

@@ -1,4 +1,5 @@
 import { fireEvent } from "card-tools/src/event";
+import { ha_element } from "card-tools/src/hass";
 
 export const BrowserModBrowserMixin = (C) =>
   class extends C {
@@ -12,9 +13,7 @@ export const BrowserModBrowserMixin = (C) =>
 
     sensor_update() {
       const update = async () => {
-        const battery = navigator.getBattery
+        const battery = (<any>navigator).getBattery?.();
-          ? await navigator.getBattery()
-          : undefined;
         this.sendUpdate({
           browser: {
             path: window.location.pathname,
@@ -24,16 +23,9 @@ export const BrowserModBrowserMixin = (C) =>
             fullyKiosk: this.isFully,
             width: window.innerWidth,
             height: window.innerHeight,
-            battery_level: this.isFully
+            battery_level:
-              ? window.fully.getBatteryLevel()
+              window.fully?.getBatteryLevel() ?? battery?.level * 100,
-              : battery
+            charging: window.fully?.isPlugged() ?? battery?.charging,
-              ? battery.level * 100
-              : undefined,
-            charging: this.isFully
-              ? window.fully.isPlugged()
-              : battery
-              ? battery.charging
-              : undefined,
             darkMode:
               this._hass && this._hass.themes && this._hass.themes.darkMode,
             userData: this._hass && this._hass.user,
@@ -47,10 +39,6 @@ export const BrowserModBrowserMixin = (C) =>
     do_navigate(path) {
       if (!path) return;
       history.pushState(null, "", path);
-      fireEvent(
+      fireEvent("location-changed", {}, ha_element());
-        "location-changed",
-        {},
-        document.querySelector("home-assistant")
-      );
     }
   };

js/connection.ts

@@ -1,16 +1,18 @@
 import { deviceID } from "card-tools/src/deviceID";
 import { hass, provideHass } from "card-tools/src/hass";
 
+const hassWindow: any = window;
+
 export class BrowserModConnection {
+  _connection;
+  _hass;
+
   async connect() {
     const isCast = document.querySelector("hc-main") !== null;
     if (!isCast) {
-      if (!window.hassConnection) {
+      while (!hassWindow.hassConnection)
-        window.setTimeout(() => this.connect(), 100);
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
-        return;
+      this._connection = (await hassWindow.hassConnection).conn;
-      } else {
-        this._connection = (await window.hassConnection).conn;
-      }
     } else {
       this._connection = hass().connection;
     }
@@ -20,7 +22,6 @@ export class BrowserModConnection {
       deviceID: deviceID,
     });
 
-    this._hass_patched = false;
     provideHass(this);
   }
 

js/fullyKiosk.ts

@@ -37,7 +37,7 @@ export const FullyKioskMixin = (C) =>
       this._keepingAlive = false;
     }
 
-    fully_update(event) {
+    fully_update(event?) {
       if (!this.isFully) return;
       if (event === "screenOn") {
         window.clearTimeout(this._keepAliveTimer);

js/main.ts

@@ -2,6 +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 "./browser-player";
 
 import { BrowserModConnection } from "./connection";
@@ -16,7 +17,7 @@ import pjson from "../package.json";
 const ext = (baseClass, mixins) =>
   mixins.reduceRight((base, mixin) => mixin(base), baseClass);
 
-class BrowserMod extends ext(BrowserModConnection, [
+export class BrowserMod extends ext(BrowserModConnection, [
   BrowserModBrowserMixin,
   BrowserModPopupsMixin,
   BrowserModScreensaverMixin,
@@ -31,8 +32,8 @@ class BrowserMod extends ext(BrowserModConnection, [
     this.connect();
 
     document.body.addEventListener("ll-custom", (ev) => {
-      if (ev.detail.browser_mod) {
+      if ((ev as CustomEvent).detail.browser_mod) {
-        this.msg_callback(ev.detail.browser_mod);
+        this.msg_callback((ev as CustomEvent).detail.browser_mod);
       }
     });
 
@@ -69,7 +70,7 @@ class BrowserMod extends ext(BrowserModConnection, [
         this.do_blackout(msg.time ? parseInt(msg.time) : undefined),
       "no-blackout": (msg) => {
         if (msg.brightness && this.isFully) {
-          window.fully.setScreenBrightness(msg.brightness);
+          (window as any).fully.setScreenBrightness(msg.brightness);
         }
         this.no_blackout();
       },
@@ -96,11 +97,7 @@ class BrowserMod extends ext(BrowserModConnection, [
 
   set_theme(msg) {
     if (!msg.theme) msg.theme = "default";
-    fireEvent(
+    fireEvent("settheme", { theme: msg.theme }, ha_element());
-      "settheme",
-      { theme: msg.theme },
-      document.querySelector("home-assistant")
-    );
   }
 
   lovelace_reload(msg) {
@@ -147,6 +144,7 @@ const bases = [
 ];
 Promise.race(bases).then(() => {
   window.setTimeout(() => {
-    window.browser_mod = window.browser_mod || new BrowserMod();
+    (window as any).browser_mod =
+      (window as any).browser_mod || new BrowserMod();
   }, 1000);
 });

js/mediaPlayer.ts

@@ -19,7 +19,7 @@ export const BrowserModMediaPlayerMixin = (C) =>
       );
     }
 
-    player_update(ev) {
+    player_update(ev?) {
       this.sendUpdate({
         player: {
           volume: this.player.volume,

js/popups.ts

@@ -1,5 +1,5 @@
 import { fireEvent } from "card-tools/src/event";
-import { load_lovelace, lovelace } from "card-tools/src/hass";
+import { load_lovelace, lovelace, ha_element } from "card-tools/src/hass";
 import { moreInfo } from "card-tools/src/more-info";
 import { closePopUp, popUp } from "card-tools/src/popup";
 
@@ -28,11 +28,7 @@ export const BrowserModPopupsMixin = (C) =>
 
       this.do_popup(d);
       window.setTimeout(() => {
-        fireEvent(
+        fireEvent("hass-more-info", { entityID: "." }, ha_element());
-          "hass-more-info",
-          { entityID: "." },
-          document.querySelector("home-assistant")
-        );
       }, 50);
     }
 
@@ -83,7 +79,7 @@ export const BrowserModPopupsMixin = (C) =>
           message,
           duration: parseInt(duration),
         },
-        document.querySelector("home-assistant")
+        ha_element()
       );
     }
   };

js/screensaver.ts

@@ -80,7 +80,7 @@ export const BrowserModScreensaverMixin = (C) =>
     _ss_clear() {
       window.clearTimeout(this._screenSaverTimer);
       for (const [k, v] of Object.entries(this._screenSaver.listeners)) {
-        window.removeEventListener(k, v);
+        window.removeEventListener(k as any, v as any);
       }
     }
 

js/types.ts

@@ -0,0 +1,34 @@
+const a = {};
+
+import { BrowserMod } from "./main";
+
+interface FullyKiosk {
+  // Get device info
+  getIp4Address: { (): String };
+  getDeviceId: { (): String };
+  getBatteryLevel: { (): Number };
+  getScreenBrightness: { (): Number };
+  getScreenOn: { (): Boolean };
+  isPlugged: { (): Boolean };
+
+  // Controll device, show notifications, send network data etc.
+  turnScreenOn: { () };
+  turnScreenOff: { (keepAlive?: Boolean) };
+
+  // Control fully and browsing
+  startScreensaver: { () };
+  stopScreensaver: { () };
+
+  // Respond to events
+  bind: { (event: String, action: String) };
+
+  // Motion detection
+  getCamshotJpgBase64: { (): String };
+}
+
+declare global {
+  interface Window {
+    browser_mod?: BrowserMod;
+    fully?: FullyKiosk;
+  }
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "browser_mod",
-  "version": "1.5.1",
+  "version": "1.5.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -346,6 +346,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "@lit/reactive-element": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.3.1.tgz",
+      "integrity": "sha512-nOJARIr3pReqK3hfFCSW2Zg/kFcFsSAlIE7z4a0C9D2dPrgD/YSn3ZP2ET/rxKB65SXyG7jJbkynBRm+tGlacw==",
+      "dev": true
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -413,6 +419,12 @@
         "@types/node": "*"
       }
     },
+    "@types/trusted-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
+      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==",
+      "dev": true
+    },
     "@yarn-tool/resolve-package": {
       "version": "1.0.46",
       "resolved": "https://registry.npmjs.org/@yarn-tool/resolve-package/-/resolve-package-1.0.46.tgz",
@@ -751,6 +763,36 @@
         "universalify": "^2.0.0"
       }
     },
+    "lit": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.2.2.tgz",
+      "integrity": "sha512-eN3+2QRHn/erxYB88AXiiRgQA6RltE9MhzySCwX+ACOxA/MLWN3VdXvcbZD9PN09zmUwlgzDvW3T84YWj2Sa0A==",
+      "dev": true,
+      "requires": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-element": "^3.2.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "lit-element": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.0.tgz",
+      "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==",
+      "dev": true,
+      "requires": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "lit-html": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.2.2.tgz",
+      "integrity": "sha512-cJofCRXuizwyaiGt9pJjJOcauezUlSB6t87VBXsPwRhbzF29MgD8GH6fZ0BuZdXAAC02IRONZBd//VPUuU8QbQ==",
+      "dev": true,
+      "requires": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",

package.json

@@ -16,6 +16,7 @@
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.2.1",
+    "lit": "^2.2.2",
     "rollup": "^2.70.2",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",

rollup.config.js

@@ -1,13 +1,13 @@
 import nodeResolve from "@rollup/plugin-node-resolve";
 import json from "@rollup/plugin-json";
-// import typescript from "rollup-plugin-typescript2";
+import typescript from "rollup-plugin-typescript2";
 import { terser } from "rollup-plugin-terser";
 import babel from "@rollup/plugin-babel";
 
 const dev = process.env.ROLLUP_WATCH;
 
 export default {
-  input: "js/main.js",
+  input: "js/main.ts",
   output: {
     file: "custom_components/browser_mod/browser_mod.js",
     format: "es",
@@ -15,7 +15,7 @@ export default {
   plugins: [
     nodeResolve(),
     json(),
-    // typescript(),
+    typescript(),
     babel({
       exclude: "node_modules/**",
     }),

tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true
+  }
+}