Refactor interaction requirement. Add indicator

js/plugin/require-interact.ts

@@ -0,0 +1,47 @@
+export const RequireInteractMixin = (SuperClass) => {
+  return class RequireInteractMixinClass extends SuperClass {
+    private _interactionResolve;
+    public firstInteraction = new Promise((resolve) => {
+      this._interactionResolve = resolve;
+    });
+
+    constructor() {
+      super();
+
+      window.addEventListener("pointerdown", this._interactionResolve);
+
+      this.show_indicator();
+    }
+
+    async show_indicator() {
+      await this.connectionPromise;
+
+      if (!this.registered) return;
+
+      const interactSymbol = document.createElement("div");
+      document.body.append(interactSymbol);
+
+      interactSymbol.classList.add("browser-mod-require-interaction");
+      interactSymbol.attachShadow({ mode: "open" });
+
+      const styleEl = document.createElement("style");
+      interactSymbol.shadowRoot.append(styleEl);
+      styleEl.innerHTML = `
+      :host {
+        position: fixed;
+        right: 8px;
+        bottom: 8px;
+        color: var(--warning-color, red);
+        opacity: 0.5;
+        --mdc-icon-size: 48px;
+      }`;
+
+      const icon = document.createElement("ha-icon");
+      interactSymbol.shadowRoot.append(icon);
+      (icon as any).icon = "mdi:gesture-tap";
+
+      await this.firstInteraction;
+      interactSymbol.remove();
+    }
+  };
+};