Add blackout and no-blackout commands

README.md

@@ -68,6 +68,7 @@ The `media_player` entity also has some extra attributes presenting the current
 | `visibility` | Whether the frontend is currently visible on the *device*. |
 | `userAgent` | The User Agent of the associated browser. |
 | `currentUser` | The user currently logged in on the *device*. |
+| 'blackout' | Whether the view on the *device* is currently blacked out (see below). |
 
 **NOTE: Because apple is apple; on iOS you need to touch the screen once after loading the frontend before any playback will work.**
 
@@ -161,6 +162,27 @@ service_data:
 
 will close all more-info dialogs and popups that are open on all connected *devices*.
 
+### blackout
+```
+service: browser_mod.command
+service_data:
+  command: blackout
+```
+
+Will cover the entire window (or screen if in full screen mode) with black.
+Moving the mouse, touching the screen or pressing any key will restore the view.
+
+Note: This will *not* turn off your screen backlight. Most screens will still emit light in a dark room.
+
+### no-blackout
+```
+service: browser_mod.command
+service_data:
+  command: no-blackout
+```
+
+Remove a blackout.
+
 ## `browser-player` card
 
 To control the playback in the current *device*, `browser_mod` includes a custom lovelace card. Just add
@@ -175,6 +197,10 @@ The player card also displays the `entityID`. Click it to select, so you can cop
 
 ![browser-player](https://user-images.githubusercontent.com/1299821/60288980-a4d07a80-9915-11e9-88ba-e078a3aa24f4.png)
 
+# Support
+
+[Home Assistant community forum thread](https://community.home-assistant.io/t/browser-mod-turn-your-browser-into-a-controllable-device-and-a-media-player/123806)
+
 # FAQ
 
 ### Does this replace lovelace-player and lovelace-browser-commander

js/main.js

@@ -47,7 +47,25 @@ class BrowserMod {
     document.addEventListener("visibilitychange", updater);
     window.addEventListener("location-changed", updater);
     window.addEventListener("click", this.playOnce);
+    window.addEventListener("mousemove", this.no_blackout.bind(this));
+    window.addEventListener("mousedown", this.no_blackout.bind(this));
+    window.addEventListener("keydown", this.no_blackout.bind(this));
+    window.addEventListener("touchstart", this.no_blackout.bind(this));
     provideHass(this);
+
+    this._blackout = document.createElement("div");
+    this._blackout.style.cssText = `
+    position: fixed;
+    left: 0;
+    top: 0;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    background: black;
+    visibility: hidden;
+    `;
+    document.body.appendChild(this._blackout);
   }
 
   connect(conn) {
@@ -95,6 +113,13 @@ class BrowserMod {
       case "set-theme":
         this.set_theme(msg);
         break;
+
+      case "blackout":
+        this.blackout(msg);
+        break;
+      case "no-blackout":
+        this.no_blackout(msg);
+        break;
     }
   }
 
@@ -150,6 +175,15 @@ class BrowserMod {
     fireEvent("settheme", msg.theme, document.querySelector("home-assistant"));
   }
 
+  blackout(msg){
+    this._blackout.style.visibility = "visible";
+    this.update();
+  }
+  no_blackout(msg){
+    this._blackout.style.visibility = "hidden";
+    this.update();
+  }
+
 
   update(msg=null) {
     if(!this.conn) return;
@@ -167,6 +201,7 @@ class BrowserMod {
           visibility: document.visibilityState,
           userAgent: navigator.userAgent,
           currentUser: this._hass && this._hass.user && this._hass.user.name,
+          blackout: Boolean(this._blackout.style.visibility === "visible"),
         },
         player: {
           volume: this.player.volume,