Switch to typescript

2022-04-18 18:49:31 +00:00
parent df6bada119
commit 089ca8dc08
18 changed files with 1455 additions and 276 deletions
--- a/js/browser-player-editor.js
+++ b/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,
-    });
-  }
-});
--- a/js/browser-player-editor.ts
+++ b/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,
+    });
+  }
+})();
--- a/js/browser-player.js
+++ b/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);
-});
--- a/js/browser-player.ts
+++ b/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);
+})();
--- a/js/browser.ts
+++ b/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
-          ? await navigator.getBattery()
-          : undefined;
+        const battery = (<any>navigator).getBattery?.();
        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
-              ? window.fully.getBatteryLevel()
-              : battery
-              ? battery.level * 100
-              : undefined,
-            charging: this.isFully
-              ? window.fully.isPlugged()
-              : battery
-              ? battery.charging
-              : undefined,
+            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,
@@ -47,10 +39,6 @@ export const BrowserModBrowserMixin = (C) =>
    do_navigate(path) {
      if (!path) return;
      history.pushState(null, "", path);
-      fireEvent(
-        "location-changed",
-        {},
-        document.querySelector("home-assistant")
-      );
+      fireEvent("location-changed", {}, ha_element());
    }
  };
--- a/js/camera.ts
+++ b/js/camera.ts
--- a/js/connection.ts
+++ b/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) {
-        window.setTimeout(() => this.connect(), 100);
-        return;
-      } else {
-        this._connection = (await window.hassConnection).conn;
-      }
+      while (!hassWindow.hassConnection)
+        await new Promise((resolve) => window.setTimeout(resolve, 100));
+      this._connection = (await hassWindow.hassConnection).conn;
    } else {
      this._connection = hass().connection;
    }
@@ -20,7 +22,6 @@ export class BrowserModConnection {
      deviceID: deviceID,
    });

-    this._hass_patched = false;
    provideHass(this);
  }

--- a/js/fullyKiosk.ts
+++ b/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);
--- a/js/main.ts
+++ b/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) {
-        this.msg_callback(ev.detail.browser_mod);
+      if ((ev as CustomEvent).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(
-      "settheme",
-      { theme: msg.theme },
-      document.querySelector("home-assistant")
-    );
+    fireEvent("settheme", { theme: msg.theme }, ha_element());
  }

  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);
 });
--- a/js/mediaPlayer.ts
+++ b/js/mediaPlayer.ts
@@ -19,7 +19,7 @@ export const BrowserModMediaPlayerMixin = (C) =>
      );
    }

-    player_update(ev) {
+    player_update(ev?) {
      this.sendUpdate({
        player: {
          volume: this.player.volume,
--- a/js/popups.ts
+++ b/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(
-          "hass-more-info",
-          { entityID: "." },
-          document.querySelector("home-assistant")
-        );
+        fireEvent("hass-more-info", { entityID: "." }, ha_element());
      }, 50);
    }

@@ -83,7 +79,7 @@ export const BrowserModPopupsMixin = (C) =>
          message,
          duration: parseInt(duration),
        },
-        document.querySelector("home-assistant")
+        ha_element()
      );
    }
  };
--- a/js/screensaver.ts
+++ b/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);
      }
    }

--- a/js/types.ts
+++ b/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;
+  }
+}