Refactor interaction requirement. Add indicator

js/plugin/camera.ts

@@ -8,30 +8,37 @@ export const CameraMixin = (SuperClass) => {
       super();
       this._framerate = 2;
 
-      window.addEventListener(
-        "pointerdown",
-        () => {
-          this._setup_camera();
-        },
-        { once: true }
-      );
+      this._setup_camera();
     }
 
     async _setup_camera() {
       if (this._video) return;
       await this.connectionPromise;
+      await this.firstInteraction;
       if (!this.cameraEnabled) return;
+
+      const div = document.createElement("div");
+      document.body.append(div);
+      div.classList.add("browser-mod-camera");
+      div.attachShadow({ mode: "open" });
+
+      const styleEl = document.createElement("style");
+      div.shadowRoot.append(styleEl);
+      styleEl.innerHTML = `
+      :host {
+        display: none;
+      }`;
+
       const video = (this._video = document.createElement("video"));
+      div.shadowRoot.append(video);
       video.autoplay = true;
       video.playsInline = true;
       video.style.display = "none";
 
       const canvas = (this._canvas = document.createElement("canvas"));
+      div.shadowRoot.append(canvas);
       canvas.style.display = "none";
 
-      document.body.appendChild(video);
-      document.body.appendChild(canvas);
-
       if (!navigator.mediaDevices) return;
 
       const stream = await navigator.mediaDevices.getUserMedia({

js/plugin/main.ts

@@ -10,6 +10,7 @@ import { ConnectionMixin } from "./connection";
 import { ScreenSaverMixin } from "./screensaver";
 import { MediaPlayerMixin } from "./mediaPlayer";
 import { CameraMixin } from "./camera";
+import { RequireInteractMixin } from "./require-interact";
 import { FullyKioskMixin } from "./fullyKiosk";
 import { BrowserModScreensaverMixin } from "./screensaver";
 import { BrowserModPopupsMixin } from "./popups";
@@ -28,7 +29,9 @@ const ext = (baseClass, mixins) =>
 //   BrowserModMediaPlayerMixin,
 // ]) {
 export class BrowserMod extends CameraMixin(
-  MediaPlayerMixin(ScreenSaverMixin(ConnectionMixin(EventTarget)))
+  MediaPlayerMixin(
+    ScreenSaverMixin(RequireInteractMixin(ConnectionMixin(EventTarget)))
+  )
 ) {
   constructor() {
     super();

js/plugin/mediaPlayer.ts

@@ -13,14 +13,10 @@ export const MediaPlayerMixin = (SuperClass) => {
         this.player.addEventListener(ev, () => this._player_update());
       }
 
-      window.addEventListener(
-        "pointerdown",
-        () => {
-          this._player_enabled = true;
-          if (!this.player.ended) this.player.play();
-        },
-        { once: true }
-      );
+      this.firstInteraction.then(() => {
+        this._player_enabled = true;
+        if (!this.player.ended) this.player.play();
+      });
 
       this.addEventListener("command-player-play", (ev) => {
         if (ev.detail?.media_content_id)

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();
+    }
+  };
+};

js/plugin/screensaver.ts

@@ -8,9 +8,12 @@ export const ScreenSaverMixin = (SuperClass) => {
       super();
 
       const panel = (this._panel = document.createElement("div"));
-      panel.setAttribute("browser-mod", "");
+      document.body.append(panel);
+      panel.classList.add("browser-mod-blackout");
       panel.attachShadow({ mode: "open" });
+
       const styleEl = document.createElement("style");
+      panel.shadowRoot.append(styleEl);
       styleEl.innerHTML = `
         :host {
           background: rgba(0,0,0, var(--darkness));
@@ -29,8 +32,6 @@ export const ScreenSaverMixin = (SuperClass) => {
           background: rgba(0,0,0,1);
         }
       `;
-      panel.shadowRoot.appendChild(styleEl);
-      document.body.appendChild(panel);
 
       this.addEventListener("command-screen_off", () => this._screen_off());
       this.addEventListener("command-screen_on", (ev) => this._screen_on(ev));