Add autoclose option to popups

js/plugin/activity.ts

@@ -6,20 +6,23 @@ export const ActivityMixin = (SuperClass) => {
     constructor() {
       super();
       for (const ev of ["pointerdown", "pointermove", "keydown"]) {
-        window.addEventListener(ev, () => this.activityTrigger());
+        window.addEventListener(ev, () => this.activityTrigger(true));
       }
       this.addEventListener("fully-update", () => {
         this.activityTrigger();
       });
     }
 
-    activityTrigger() {
+    activityTrigger(touched = false) {
       if (!this.activityTriggered) {
         this.sendUpdate({
           activity: true,
         });
       }
       this.activityTriggered = true;
+      if (touched) {
+        this.fireEvent("browser-mod-activity");
+      }
       clearTimeout(this._activityTimeout);
       this._activityTimeout = setTimeout(
         () => this.activityReset(),

js/plugin/main.ts

@@ -39,16 +39,20 @@ import { BrowserIDMixin } from "./browserID";
     x ll-custom handling
     - Commands
       x popup
+        x Auto-close
       x close_popup
       x more-info
       x navigate
       - lovelace-reload?
+        - Not needed
       x window-reload
       - screensaver ?
+        - Refer to automations instead
       x sequence
       x delay
       x javascript eval
       - toast?
+        - Replaced with popups with timeout
     x Redesign services to target devices
   x frontend editor for popup cards
     - also screensavers
@@ -66,7 +70,8 @@ import { BrowserIDMixin } from "./browserID";
   - Video player?
   - Media_seek
   - Screensavers
-  - IMPORTANT: FIX DEFAULT HIDING OF ENTITIES
+  x IMPORTANT: FIX DEFAULT HIDING OF ENTITIES
+    - NOFIX. Home Assistant bug
   X Check functionality with CAST - may need to add frontend part as a lovelace resource
   */
 export class BrowserMod extends ServicesMixin(

js/plugin/popups.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from "lit";
-import { property } from "lit/decorators.js";
+import { property, query } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { provideHass, loadLoadCardHelpers, hass_base_el } from "../helpers";
 
@@ -16,27 +16,31 @@ class BrowserModPopup extends LitElement {
   @property() dismissable;
   @property({ reflect: true }) wide;
   @property({ reflect: true }) fullscreen;
+  @property() _style;
+  @query("ha-dialog") dialog: any;
+  _autoclose;
+  _autocloseListener;
   _actions;
   timeout;
   _timeoutStart;
   _timeoutTimer;
-  @property() _style;
-
   _resolveClosed;
 
-  closedCallback() {
-    this._resolveClosed?.();
-    this._resolveClosed = undefined;
-  }
-
   async closeDialog() {
     this.open = false;
-    await new Promise((resolve) => (this._resolveClosed = resolve));
     clearInterval(this._timeoutTimer);
+    if (this._autocloseListener) {
+      window.browser_mod.removeEventListener(
+        "browser-mod-activity",
+        this._autocloseListener
+      );
+      this._autocloseListener = undefined;
+    }
   }
 
   openDialog() {
     this.open = true;
+    this.dialog?.show();
     if (this.timeout) {
       this._timeoutStart = new Date().getTime();
       this._timeoutTimer = setInterval(() => {
@@ -46,6 +50,14 @@ class BrowserModPopup extends LitElement {
         if (ellapsed >= this.timeout) this._timeout();
       }, 10);
     }
+    this._autocloseListener = undefined;
+    if (this._autoclose) {
+      this._autocloseListener = this._dismiss.bind(this);
+      window.browser_mod.addEventListener(
+        "browser-mod-activity",
+        this._autocloseListener
+      );
+    }
   }
 
   async setupDialog(
@@ -62,6 +74,7 @@ class BrowserModPopup extends LitElement {
       timeout_action = undefined,
       size = undefined,
       style = undefined,
+      autoclose = false,
     } = {}
   ) {
     this.title = title;
@@ -94,6 +107,7 @@ class BrowserModPopup extends LitElement {
     this.wide = size === "wide" ? "" : undefined;
     this.fullscreen = size === "fullscreen" ? "" : undefined;
     this._style = style;
+    this._autoclose = autoclose;
   }
 
   async _primary() {
@@ -122,7 +136,6 @@ class BrowserModPopup extends LitElement {
     return html`
       <ha-dialog
         open
-        @closed=${this.closedCallback}
         .heading=${this.title !== undefined}
         ?hideActions=${this.actions === undefined}
         .scrimClickAction=${this.dismissable ? this._dismiss : ""}