Added popup functionality.

custom_components/browser_mod/browser_mod_panel.js

@@ -65,6 +65,7 @@ const loadDevTools = async () => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     if (customElements.get("ha-config-dashboard"))
         return;
+    await customElements.whenDefined("partial-panel-resolver");
     const ppResolver = document.createElement("partial-panel-resolver");
     const routes = ppResolver.getRoutes([
         {
@@ -73,6 +74,7 @@ const loadDevTools = async () => {
         },
     ]);
     await ((_c = (_b = (_a = routes === null || routes === void 0 ? void 0 : routes.routes) === null || _a === void 0 ? void 0 : _a.a) === null || _b === void 0 ? void 0 : _b.load) === null || _c === void 0 ? void 0 : _c.call(_b));
+    await customElements.whenDefined("ha-panel-config");
     const configRouter = document.createElement("ha-panel-config");
     await ((_g = (_f = (_e = (_d = configRouter === null || configRouter === void 0 ? void 0 : configRouter.routerOptions) === null || _d === void 0 ? void 0 : _d.routes) === null || _e === void 0 ? void 0 : _e.dashboard) === null || _f === void 0 ? void 0 : _f.load) === null || _g === void 0 ? void 0 : _g.call(_f)); // Load ha-config-dashboard
     await ((_l = (_k = (_j = (_h = configRouter === null || configRouter === void 0 ? void 0 : configRouter.routerOptions) === null || _h === void 0 ? void 0 : _h.routes) === null || _j === void 0 ? void 0 : _j.cloud) === null || _k === void 0 ? void 0 : _k.load) === null || _l === void 0 ? void 0 : _l.call(_k)); // Load ha-settings-row
@@ -96,13 +98,29 @@ loadDevTools().then(() => {
         }
         unregister_device(ev) {
             const deviceID = ev.currentTarget.deviceID;
-            if (deviceID === window.browser_mod.deviceID)
+            const unregisterCallback = () => {
-                window.browser_mod.registered = false;
+                console.log(deviceID, window.browser_mod.deviceID);
-            else
+                if (deviceID === window.browser_mod.deviceID) {
-                window.browser_mod.connection.sendMessage({
+                    console.log("Unregister self");
-                    type: "browser_mod/unregister",
+                    window.browser_mod.registered = false;
-                    deviceID,
+                }
-                });
+                else {
+                    window.browser_mod.connection.sendMessage({
+                        type: "browser_mod/unregister",
+                        deviceID,
+                    });
+                }
+            };
+            window.browser_mod.showPopup("Unregister device", `Are you sure you want to unregister device ${deviceID}?`, {
+                dismissable: false,
+                primary_action: {
+                    label: "Yes",
+                    callback: unregisterCallback,
+                },
+                secondary_action: {
+                    label: "No",
+                },
+            });
         }
         firstUpdated() {
             window.browser_mod.addEventListener("browser-mod-config-update", () => this.requestUpdate());

custom_components/browser_mod/device.py

@@ -112,7 +112,7 @@ class BrowserModDevice:
         dr = device_registry.async_get(hass)
         er = entity_registry.async_get(hass)
 
-        for e in self.entities.items():
+        for e in self.entities.values():
             er.async_remove(e.entity_id)
 
         self.entities = {}
@@ -137,5 +137,5 @@ def getDevice(hass, deviceID, *, create=True):
 def deleteDevice(hass, deviceID):
     devices = hass.data[DOMAIN]["devices"]
     if deviceID in devices:
-        devices["deviceID"].delete()
+        devices[deviceID].delete(hass)
-        del devices["deviceID"]
+        del devices[deviceID]

js/config_panel/helpers.ts

@@ -2,6 +2,8 @@
 // Also provides ha-settings-row
 export const loadDevTools = async () => {
   if (customElements.get("ha-config-dashboard")) return;
+
+  await customElements.whenDefined("partial-panel-resolver");
   const ppResolver = document.createElement("partial-panel-resolver");
   const routes = (ppResolver as any).getRoutes([
     {
@@ -10,6 +12,7 @@ export const loadDevTools = async () => {
     },
   ]);
   await routes?.routes?.a?.load?.();
+  await customElements.whenDefined("ha-panel-config");
   const configRouter = document.createElement("ha-panel-config");
   await (configRouter as any)?.routerOptions?.routes?.dashboard?.load?.(); // Load ha-config-dashboard
   await (configRouter as any)?.routerOptions?.routes?.cloud?.load?.(); // Load ha-settings-row

js/config_panel/main.ts

@@ -23,13 +23,34 @@ loadDevTools().then(() => {
 
     unregister_device(ev) {
       const deviceID = ev.currentTarget.deviceID;
-      if (deviceID === window.browser_mod.deviceID)
+
-        window.browser_mod.registered = false;
+      const unregisterCallback = () => {
-      else
+        console.log(deviceID, window.browser_mod.deviceID);
-        window.browser_mod.connection.sendMessage({
+        if (deviceID === window.browser_mod.deviceID) {
-          type: "browser_mod/unregister",
+          console.log("Unregister self");
-          deviceID,
+          window.browser_mod.registered = false;
-        });
+        } else {
+          window.browser_mod.connection.sendMessage({
+            type: "browser_mod/unregister",
+            deviceID,
+          });
+        }
+      };
+
+      window.browser_mod.showPopup(
+        "Unregister device",
+        `Are you sure you want to unregister device ${deviceID}?`,
+        {
+          dismissable: false,
+          primary_action: {
+            label: "Yes",
+            callback: unregisterCallback,
+          },
+          secondary_action: {
+            label: "No",
+          },
+        }
+      );
     }
 
     firstUpdated() {

js/helpers.ts

@@ -1,4 +1,4 @@
-const TIMEOUT_ERROR = "SLECTTREE-TIMEOUT";
+const TIMEOUT_ERROR = "SELECTTREE-TIMEOUT";
 
 async function _await_el(el) {
   if (el.localName?.includes("-"))
@@ -36,7 +36,7 @@ export async function selectTree(root, path, all = false, timeout = 10000) {
   });
 }
 
-async function _hass_base_el() {
+export async function hass_base_el() {
   await Promise.race([
     customElements.whenDefined("home-assistant"),
     customElements.whenDefined("hc-main"),
@@ -52,12 +52,26 @@ async function _hass_base_el() {
 }
 
 export async function hass() {
-  const base: any = await _hass_base_el();
+  const base: any = await hass_base_el();
   while (!base.hass) await new Promise((r) => window.setTimeout(r, 100));
   return base.hass;
 }
 
 export async function provideHass(el) {
-  const base: any = await _hass_base_el();
+  const base: any = await hass_base_el();
   base.provideHass(el);
 }
+
+export const loadLoadCardHelpers = async () => {
+  if (window.loadCardHelpers !== undefined) return;
+
+  await customElements.whenDefined("partial-panel-resolver");
+  const ppResolver = document.createElement("partial-panel-resolver");
+  const routes = (ppResolver as any).getRoutes([
+    {
+      component_name: "lovelace",
+      url_path: "a",
+    },
+  ]);
+  await routes?.routes?.a?.load?.();
+};

js/plugin/browser.ts

@@ -1,6 +1,3 @@
-import { fireEvent } from "card-tools/src/event";
-import { ha_element } from "card-tools/src/hass";
-
 export const BrowserStateMixin = (SuperClass) => {
   return class BrowserStateMixinClass extends SuperClass {
     constructor() {
@@ -41,10 +38,10 @@ export const BrowserStateMixin = (SuperClass) => {
       update();
     }
 
-    do_navigate(path) {
+    // do_navigate(path) {
-      if (!path) return;
+    //   if (!path) return;
-      history.pushState(null, "", path);
+    //   history.pushState(null, "", path);
-      fireEvent("location-changed", {}, ha_element());
+    //   fireEvent("location-changed", {}, ha_element());
-    }
+    // }
   };
 };

js/plugin/main.ts

@@ -1,8 +1,3 @@
-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, hass_loaded } from "card-tools/src/hass";
 import "./browser-player";
 
 // import { BrowserModConnection } from "./connection";
@@ -12,145 +7,141 @@ import { MediaPlayerMixin } from "./mediaPlayer";
 import { CameraMixin } from "./camera";
 import { RequireInteractMixin } from "./require-interact";
 import { FullyMixin } from "./fullyKiosk";
-import { BrowserModPopupsMixin } from "./popups";
 import { BrowserStateMixin } from "./browser";
+import "./popups";
+import { PopupMixin } from "./popups";
 import pjson from "../../package.json";
 
-const ext = (baseClass, mixins) =>
+/*
-  mixins.reduceRight((base, mixin) => mixin(base), baseClass);
+  TODO:
-
+  - Popups
-// export class BrowserMod extends ext(BrowserModConnection, [
+  - Commands
-//   BrowserModBrowserMixin,
+  - Tweaks
-//   BrowserModPopupsMixin,
+  */
-//   BrowserModScreensaverMixin,
+export class BrowserMod extends PopupMixin(
-//   BrowserModCameraMixin,
+  BrowserStateMixin(
-//   FullyKioskMixin,
+    CameraMixin(
-//   BrowserModMediaPlayerMixin,
+      MediaPlayerMixin(
-// ]) {
+        ScreenSaverMixin(
-export class BrowserMod extends BrowserStateMixin(
+          FullyMixin(RequireInteractMixin(ConnectionMixin(EventTarget)))
-  CameraMixin(
+        )
-    MediaPlayerMixin(
-      ScreenSaverMixin(
-        FullyMixin(RequireInteractMixin(ConnectionMixin(EventTarget)))
       )
     )
   )
 ) {
   constructor() {
     super();
-    this.entity_id = deviceID.replace("-", "_");
-    this.cast = document.querySelector("hc-main") !== null;
     this.connect();
 
-    document.body.addEventListener("ll-custom", (ev) => {
+    // document.body.addEventListener("ll-custom", (ev) => {
-      if ((ev as CustomEvent).detail.browser_mod) {
+    //   if ((ev as CustomEvent).detail.browser_mod) {
-        this.msg_callback((ev as CustomEvent).detail.browser_mod);
+    //     this.msg_callback((ev as CustomEvent).detail.browser_mod);
-      }
+    //   }
-    });
+    // });
 
     console.info(
       `%cBROWSER_MOD ${pjson.version} IS INSTALLED
-    %cDeviceID: ${deviceID}`,
+    %cDeviceID: ${this.deviceID}`,
       "color: green; font-weight: bold",
       ""
     );
   }
 
-  async msg_callback(msg) {
+  // async msg_callback(msg) {
-    const handlers = {
+  //   const handlers = {
-      update: (msg) => this.update(msg),
+  //     update: (msg) => this.update(msg),
-      debug: (msg) => this.debug(msg),
+  //     debug: (msg) => this.debug(msg),
 
-      play: (msg) => this.player_play(msg.media_content_id),
+  //     play: (msg) => this.player_play(msg.media_content_id),
-      pause: (msg) => this.player_pause(),
+  //     pause: (msg) => this.player_pause(),
-      stop: (msg) => this.player_stop(),
+  //     stop: (msg) => this.player_stop(),
-      "set-volume": (msg) => this.player_set_volume(msg.volume_level),
+  //     "set-volume": (msg) => this.player_set_volume(msg.volume_level),
-      mute: (msg) => this.player_mute(msg.mute),
+  //     mute: (msg) => this.player_mute(msg.mute),
 
-      toast: (msg) => this.do_toast(msg.message, msg.duration),
+  //     toast: (msg) => this.do_toast(msg.message, msg.duration),
-      popup: (msg) => this.do_popup(msg),
+  //     popup: (msg) => this.do_popup(msg),
-      "close-popup": (msg) => this.do_close_popup(),
+  //     "close-popup": (msg) => this.do_close_popup(),
-      "more-info": (msg) => this.do_more_info(msg.entity_id, msg.large),
+  //     "more-info": (msg) => this.do_more_info(msg.entity_id, msg.large),
 
-      navigate: (msg) => this.do_navigate(msg.navigation_path),
+  //     navigate: (msg) => this.do_navigate(msg.navigation_path),
-      "set-theme": (msg) => this.set_theme(msg),
+  //     "set-theme": (msg) => this.set_theme(msg),
-      "lovelace-reload": (msg) => this.lovelace_reload(msg),
+  //     "lovelace-reload": (msg) => this.lovelace_reload(msg),
-      "window-reload": () => window.location.reload(),
+  //     "window-reload": () => window.location.reload(),
 
-      blackout: (msg) =>
+  //     blackout: (msg) =>
-        this.do_blackout(msg.time ? parseInt(msg.time) : undefined),
+  //       this.do_blackout(msg.time ? parseInt(msg.time) : undefined),
-      "no-blackout": (msg) => {
+  //     "no-blackout": (msg) => {
-        if (msg.brightness && this.isFully) {
+  //       if (msg.brightness && this.isFully) {
-          (window as any).fully.setScreenBrightness(msg.brightness);
+  //         (window as any).fully.setScreenBrightness(msg.brightness);
-        }
+  //       }
-        this.no_blackout();
+  //       this.no_blackout();
-      },
+  //     },
 
-      "call-service": (msg) => this.call_service(msg),
+  //     "call-service": (msg) => this.call_service(msg),
-      commands: async (msg) => {
+  //     commands: async (msg) => {
-        for (const m of msg.commands) {
+  //       for (const m of msg.commands) {
-          await this.msg_callback(m);
+  //         await this.msg_callback(m);
-        }
+  //       }
-      },
+  //     },
-      delay: async (msg) =>
+  //     delay: async (msg) =>
-        await new Promise((resolve) => {
+  //       await new Promise((resolve) => {
-          window.setTimeout(resolve, msg.seconds * 1000);
+  //         window.setTimeout(resolve, msg.seconds * 1000);
-        }),
+  //       }),
-    };
+  //   };
 
-    await handlers[msg.command.replace("_", "-")](msg);
+  //   await handlers[msg.command.replace("_", "-")](msg);
-  }
-
-  debug(msg) {
-    popUp(`deviceID`, { type: "markdown", content: `# ${deviceID}` });
-    alert(deviceID);
-  }
-
-  set_theme(msg) {
-    if (!msg.theme) msg.theme = "default";
-    fireEvent("settheme", { theme: msg.theme }, ha_element());
-  }
-
-  lovelace_reload(msg) {
-    const ll = lovelace_view();
-    if (ll) fireEvent("config-refresh", {}, ll);
-  }
-
-  call_service(msg) {
-    const _replaceThis = (data) => {
-      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]);
-      }
-      return data;
-    };
-    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);
-  }
-
-  // update(msg = null) {
-  //   if (msg) {
-  //     if (msg.name) {
-  //       this.entity_id = msg.name.toLowerCase();
-  //     }
-  //     if (msg.camera && !this.isFully) {
-  //       this.setup_camera();
-  //     }
-  //     this.config = { ...this.config, ...msg };
-  //   }
-  //   this.player_update();
-  //   this.fully_update();
-  //   this.screen_update();
-  //   this.sensor_update();
   // }
+
+  // debug(msg) {
+  //   popUp(`deviceID`, { type: "markdown", content: `# ${deviceID}` });
+  //   alert(deviceID);
+  // }
+
+  // set_theme(msg) {
+  //   if (!msg.theme) msg.theme = "default";
+  //   fireEvent("settheme", { theme: msg.theme }, ha_element());
+  // }
+
+  // lovelace_reload(msg) {
+  //   const ll = lovelace_view();
+  //   if (ll) fireEvent("config-refresh", {}, ll);
+  // }
+
+  // call_service(msg) {
+  //   const _replaceThis = (data) => {
+  //     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]);
+  //     }
+  //     return data;
+  //   };
+  //   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);
+  // }
+
+  // // update(msg = null) {
+  // //   if (msg) {
+  // //     if (msg.name) {
+  // //       this.entity_id = msg.name.toLowerCase();
+  // //     }
+  // //     if (msg.camera && !this.isFully) {
+  // //       this.setup_camera();
+  // //     }
+  // //     this.config = { ...this.config, ...msg };
+  // //   }
+  // //   this.player_update();
+  // //   this.fully_update();
+  // //   this.screen_update();
+  // //   this.sensor_update();
+  // // }
 }
 
-(async () => {
+// (async () => {
-  await hass_loaded();
+//   await hass_loaded();
 
-  if (!window.browser_mod) window.browser_mod = new BrowserMod();
+if (!window.browser_mod) window.browser_mod = new BrowserMod();
-})();
+// })();

js/plugin/popups.ts

@@ -1,85 +1,235 @@
-import { fireEvent } from "card-tools/src/event";
+import { LitElement, html, css } from "lit";
-import { load_lovelace, lovelace, ha_element } from "card-tools/src/hass";
+import { property } from "lit/decorators.js";
-import { moreInfo } from "card-tools/src/more-info";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { closePopUp, popUp } from "card-tools/src/popup";
+import { provideHass, loadLoadCardHelpers } from "../helpers";
+
+class BrowserModPopup extends LitElement {
+  @property() open;
+  @property() content;
+  @property() title;
+  @property({ reflect: true }) actions;
+  @property({ reflect: true }) card;
+  @property() primary_action;
+  @property() secondary_action;
+  @property() dismissable;
+
+  closeDialog() {
+    this.open = false;
+  }
+
+  openDialog() {
+    this.open = true;
+  }
+
+  async setupDialog(
+    title,
+    content,
+    {
+      primary_action = undefined,
+      secondary_action = undefined,
+      dismissable = true,
+    }
+  ) {
+    this.dismissable = dismissable;
+    this.title = title;
+    if (content && typeof content === "object") {
+      // Create a card from config in content
+      this.card = true;
+      const helpers = await window.loadCardHelpers();
+      const card = await helpers.createCardElement(content);
+      card.hass = window.browser_mod.hass;
+      provideHass(card);
+      this.content = card;
+    } else {
+      // Basic HTML content
+      this.content = unsafeHTML(content);
+    }
+    if (primary_action) {
+      this.primary_action = primary_action;
+      this.secondary_action = secondary_action;
+      this.actions = "";
+    } else {
+      this.primary_action = undefined;
+      this.secondary_action = undefined;
+      this.actions = undefined;
+    }
+  }
+
+  _primary_clicked() {
+    this.closeDialog();
+    const eval2 = eval;
+    this.primary_action?.callback?.();
+  }
+  _secondary_clicked() {
+    this.closeDialog();
+    const eval2 = eval;
+    this.secondary_action?.callback?.();
+  }
+
+  render() {
+    if (!this.open) return html``;
+
+    return html`
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        .heading=${this.title !== undefined}
+        ?hideActions=${this.actions === undefined}
+        .scrimClickAction=${this.dismissable ? undefined : ""}
+        .escapeKeyAction=${this.dismissable ? undefined : ""}
+      >
+        ${this.title
+          ? html`
+              <app-toolbar slot="heading">
+                ${this.dismissable
+                  ? html`
+                      <ha-icon-button dialogAction="cancel">
+                        <ha-icon .icon=${"mdi:close"}></ha-icon>
+                      </ha-icon-button>
+                    `
+                  : ""}
+                <div class="main-title">${this.title}</div>
+              </app-toolbar>
+            `
+          : html``}
+
+        <div class="content">${this.content}</div>
+
+        ${this.primary_action !== undefined
+          ? html`
+              <mwc-button
+                slot="primaryAction"
+                .label=${this.primary_action.label}
+                @click=${this._primary_clicked}
+              ></mwc-button>
+            `
+          : ""}
+        ${this.secondary_action !== undefined
+          ? html`
+              <mwc-button
+                slot="secondaryAction"
+                .label=${this.secondary_action.label}
+                @click=${this._secondary_clicked}
+              ></mwc-button>
+            `
+          : ""}
+      </ha-dialog>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-dialog {
+        --mdc-dialog-min-width: 400px;
+        --mdc-dialog-max-width: 600px;
+        --mdc-dialog-heading-ink-color: var(--primary-text-color);
+        --mdc-dialog-content-ink-color: var(--primary-text-color);
+        --justify-action-buttons: space-between;
+
+        --mdc-dialog-box-shadow: 0px 0px 0px var(--ha-card-border-width, 1px)
+          var(--ha-card-border-color, var(--divider-color, #e0e0e0));
+        --ha-dialog-border-radius: 8px;
+        --mdc-theme-surface: var(
+          --ha-card-background,
+          var(--card-background-color, white)
+        );
+      }
+
+      app-toolbar {
+        flex-shrink: 0;
+        color: var(--primary-text-color);
+        background-color: var(--sidebar-background-color);
+      }
+      ha-icon-button > * {
+        display: flex;
+      }
+      .main-title {
+        margin-left: 16px;
+        line-height: 1.3em;
+        max-height: 2.6em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .content {
+        margin: -20px -24px;
+        padding: 20px 24px;
+      }
+
+      :host([card]) .content {
+        padding: 0;
+      }
+      :host([actions]) .content {
+        border-bottom: 1px solid var(--divider-color);
+      }
+
+      @media all and (max-width: 450px), all and (max-height: 500px) {
+        ha-dialog {
+          --mdc-dialog-min-width: 100vw;
+          --mdc-dialog-max-width: 100vw;
+          --mdc-dialog-min-height: 100%;
+          --mdc-dialog-max-height: 100%;
+          --mdc-shape-medium: 0px;
+          --vertial-align-dialog: flex-end;
+        }
+      }
+    `;
+  }
+}
+
+customElements.define("browser-mod-popup", BrowserModPopup);
+
+export const PopupMixin = (SuperClass) => {
+  return class PopupMixinClass extends SuperClass {
+    private _popupEl: any;
 
-export const BrowserModPopupsMixin = (C) =>
-  class extends C {
     constructor() {
       super();
-      if (document.querySelector("home-assistant"))
-        document
-          .querySelector("home-assistant")
-          .addEventListener("hass-more-info", (ev) => this._popup_card(ev));
 
-      const isCast = document.querySelector("hc-main") !== null;
+      loadLoadCardHelpers();
-      if (!isCast) load_lovelace();
+
+      this._popupEl = document.createElement("browser-mod-popup");
+      document.body.append(this._popupEl);
+
+      // const historyListener = async (ev) => {
+      //   const popupState = ev.state?.browserModPopup;
+      //   if (popupState) {
+      //     if (popupState.open) {
+      //       this._popupEl.setupDialog(...popupState.args);
+      //       this._popupEl.openDialog();
+      //     } else {
+      //       this._popupEl.closeDialog();
+      //     }
+      //   }
+      // };
+      // window.addEventListener("popstate", historyListener);
     }
 
-    _popup_card(ev) {
+    showPopup(...args) {
-      if (!lovelace()) return;
+      // if (history.state?.browserModPopup === undefined) {
-      if (!ev.detail || !ev.detail.entityId) return;
+      //   history.replaceState(
-      const data = {
+      //     {
-        ...lovelace().config.popup_cards,
+      //       browserModPopup: {
-        ...lovelace().config.views[lovelace().current_view].popup_cards,
+      //         open: false,
-      };
+      //       },
-      const d = data[ev.detail.entityId];
+      //     },
-      if (!d) return;
+      //     ""
-
+      //   );
-      this.do_popup(d);
+      // }
-      window.setTimeout(() => {
+      // history.pushState(
-        fireEvent("hass-more-info", { entityID: "." }, ha_element());
+      //   {
-      }, 50);
+      //     browserModPopup: {
+      //       open: true,
+      //       args,
+      //     },
+      //   },
+      //   ""
+      // );
+      this._popupEl.setupDialog(...args);
+      this._popupEl.openDialog();
     }
 
-    do_popup(cfg) {
+    closePopup(...args) {
-      if (!(cfg.title || cfg.auto_close || cfg.hide_header)) {
+      this._popupEl.closeDialog();
-        console.error(
-          "browser_mod: popup: Must specify title, auto_close or hide_header."
-        );
-        return;
-      }
-      if (!cfg.card) {
-        console.error("browser_mod: popup: No card specified");
-        return;
-      }
-
-      const open = () => {
-        popUp(
-          cfg.title,
-          cfg.card,
-          cfg.large,
-          cfg.style,
-          cfg.auto_close || cfg.hide_header
-        );
-      };
-
-      if (cfg.auto_close) {
-        this.screensaver_set(open, closePopUp, cfg.time);
-      } else {
-        open();
-      }
-    }
-
-    do_close_popup() {
-      this.screensaver_stop();
-      closePopUp();
-    }
-
-    do_more_info(entity_id, large) {
-      if (!entity_id) return;
-      moreInfo(entity_id, large);
-    }
-
-    do_toast(message, duration) {
-      if (!message) return;
-      fireEvent(
-        "hass-notification",
-        {
-          message,
-          duration: parseInt(duration),
-        },
-        ha_element()
-      );
     }
   };
+};

js/plugin/screensaver.ts

@@ -95,142 +95,3 @@ export const ScreenSaverMixin = (SuperClass) => {
   }
   return ScreenSaverMixinClass;
 };
-
-// export const BrowserModScreensaverMixin = (C) =>
-//   class extends C {
-//     constructor() {
-//       super();
-//       this._blackout_panel = document.createElement("div");
-
-//       this._screenSaver = undefined;
-//       this._screenSaverTimer = undefined;
-//       this._screenSaverTimeOut = 0;
-
-//       this._screenSaver = {
-//         fn: undefined,
-//         clearfn: undefined,
-//         timer: undefined,
-//         timeout: undefined,
-//         listeners: {},
-//         active: false,
-//       };
-
-//       this._blackout_panel.style.cssText = `
-//             position: fixed;
-//             left: 0;
-//             top: 0;
-//             padding: 0;
-//             margin: 0;
-//             width: 100%;
-//             height: 100%;
-//             background: black;
-//             display: none;
-//         `;
-//       document.body.appendChild(this._blackout_panel);
-//     }
-
-//     screensaver_set(fn, clearfn, time) {
-//       this._ss_clear();
-//       this._screenSaver = {
-//         fn,
-//         clearfn,
-//         timer: undefined,
-//         timeout: time,
-//         listeners: {},
-//         active: false,
-//       };
-//       const l = () => this.screensaver_update();
-//       for (const event of ["mousemove", "mousedown", "keydown", "touchstart"]) {
-//         window.addEventListener(event, l);
-//         this._screenSaver.listeners[event] = l;
-//       }
-//       this._screenSaver.timer = window.setTimeout(
-//         () => this._ss_run(),
-//         time * 1000
-//       );
-//     }
-
-//     screensaver_update() {
-//       if (this._screenSaver.active) {
-//         this.screensaver_stop();
-//       } else {
-//         window.clearTimeout(this._screenSaver.timer);
-//         this._screenSaver.timer = window.setTimeout(
-//           () => this._ss_run(),
-//           this._screenSaver.timeout * 1000
-//         );
-//       }
-//     }
-
-//     screensaver_stop() {
-//       this._ss_clear();
-//       this._screenSaver.active = false;
-//       if (this._screenSaver.clearfn) this._screenSaver.clearfn();
-//       if (this._screenSaver.timeout) {
-//         this.screensaver_set(
-//           this._screenSaver.fn,
-//           this._screenSaver.clearfn,
-//           this._screenSaver.timeout
-//         );
-//       }
-//     }
-
-//     _ss_clear() {
-//       window.clearTimeout(this._screenSaverTimer);
-//       for (const [k, v] of Object.entries(this._screenSaver.listeners)) {
-//         window.removeEventListener(k as any, v as any);
-//       }
-//     }
-
-//     _ss_run() {
-//       this._screenSaver.active = true;
-//       this._screenSaver.fn();
-//     }
-
-//     do_blackout(timeout) {
-//       this.screensaver_set(
-//         () => {
-//           if (this.isFully) {
-//             if (this.config.screensaver) window.fully.startScreensaver();
-//             else window.fully.turnScreenOff(true);
-//           } else {
-//             this._blackout_panel.style.display = "block";
-//           }
-//           this.screen_update();
-//         },
-//         () => {
-//           if ((this._blackout_panel.style.display = "block"))
-//             this._blackout_panel.style.display = "none";
-//           if (this.isFully) {
-//             if (!window.fully.getScreenOn()) window.fully.turnScreenOn();
-//             window.fully.stopScreensaver();
-//           }
-//           this.screen_update();
-//         },
-//         timeout || 0
-//       );
-//     }
-
-//     no_blackout() {
-//       if (this.isFully) {
-//         window.fully.turnScreenOn();
-//         window.fully.stopScreensaver();
-//       }
-//       this.screensaver_stop();
-//     }
-
-//     screen_update() {
-//       this.sendUpdate({
-//         screen: {
-//           blackout: this.isFully
-//             ? this.fully_screensaver !== undefined
-//               ? this.fully_screensaver
-//               : !window.fully.getScreenOn()
-//             : Boolean(this._blackout_panel.style.display === "block"),
-//           brightness: this.isFully
-//             ? window.fully.getScreenBrightness()
-//             : undefined,
-//         },
-//       });
-//     }
-//   };

js/plugin/types.ts

@@ -33,5 +33,6 @@ declare global {
     fully?: FullyKiosk;
     hassConnection?: Promise<any>;
     customCards?: [{}?];
+    loadCardHelpers?: { () };
   }
 }