Lots of changes and modernization. WIP

js/plugin/screensaver.ts

@@ -1,3 +1,82 @@
+export const ScreenSaverMixin = (SuperClass) => {
+  class ScreenSaverMixinClass extends SuperClass {
+
+    private _panel;
+    private _listeners = {};
+    private _brightness = 255;
+
+    constructor() {
+      super();
+
+      const panel = this._panel = document.createElement("div")
+      panel.setAttribute("browser-mod", "");
+      panel.attachShadow({ mode: "open" });
+      const styleEl = document.createElement("style");
+      styleEl.innerHTML = `
+        :host {
+          background: rgba(0,0,0, var(--darkness));
+          position: fixed;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          right: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 10000;
+          display: block;
+          pointer-events: none;
+        }
+        :host([dark]) {
+          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));
+
+      this.connectionPromise.then(() => this._screen_on());
+    }
+
+    private _screen_off() {
+      this._panel.setAttribute("dark", "");
+
+      this.sendUpdate({
+        screen_on: false,
+        screen_brightness: 0,
+      });
+
+      const l = () => this._screen_on();
+      for (const ev of ["pointerdown", "pointermove", "keydown"]) {
+        this._listeners[ev] = l;
+        window.addEventListener(ev, l);
+      }
+    }
+
+    private _screen_on(ev=undefined) {
+      if (ev?.detail?.brightness) {
+        this._brightness = ev.detail.brightness;
+        this._panel.style.setProperty("--darkness", 1-ev.detail.brightness/255)
+      }
+      this._panel.removeAttribute("dark");
+      this.sendUpdate({
+        screen_on: true,
+        screen_brightness: this._brightness,
+      });
+
+      for (const ev of ["pointerdown", "pointermove", "keydown"]) {
+        if (this._listeners[ev]) {
+          window.removeEventListener(ev, this._listeners[ev])
+          this._listeners[ev] = undefined;
+        }
+      }
+    }
+
+  }
+  return ScreenSaverMixinClass
+}
+
 export const BrowserModScreensaverMixin = (C) =>
   class extends C {
     constructor() {