From f7d38740105565d1ff6e75419bd43e852c835d23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Mon, 18 Jul 2022 22:32:58 +0000
Subject: [PATCH] Add info boxed to browser mod panel

---
 custom_components/browser_mod/browser_mod.js  |  4 +-
 .../browser_mod/browser_mod_panel.js          | 96 ++++++++++++++-----
 js/config_panel/main.ts                       | 90 +++++++++++++----
 js/plugin/main.ts                             |  4 +-
 4 files changed, 147 insertions(+), 47 deletions(-)

diff --git a/custom_components/browser_mod/browser_mod.js b/custom_components/browser_mod/browser_mod.js
index 66fc7c0..70de728 100644
--- a/custom_components/browser_mod/browser_mod.js
+++ b/custom_components/browser_mod/browser_mod.js
@@ -1263,10 +1263,10 @@ var pjson = {
     X Timeout
     X Fullscreen
   - Motion/occupancy tracker
-  - Information about interaction requirement
+  x Information about interaction requirement
   - Information about fullykiosk
   - Commands
-    - Rename browser_mod commands to browser_mod services
+    x Rename browser_mod commands to browser_mod services
     x Framework
     - ll-custom handling
     - Commands
diff --git a/custom_components/browser_mod/browser_mod_panel.js b/custom_components/browser_mod/browser_mod_panel.js
index 2e4c9c4..7d50dc0 100644
--- a/custom_components/browser_mod/browser_mod_panel.js
+++ b/custom_components/browser_mod/browser_mod_panel.js
@@ -84,17 +84,24 @@ const loadDevTools = async () => {
 const bmWindow = window;
 loadDevTools().then(() => {
     class BrowserModPanel extends s {
+        constructor() {
+            super(...arguments);
+            this.dirty = false;
+        }
         toggleRegister() {
             var _a;
             if (!((_a = window.browser_mod) === null || _a === void 0 ? void 0 : _a.connected))
                 return;
             window.browser_mod.registered = !window.browser_mod.registered;
+            this.dirty = true;
         }
         changeBrowserID(ev) {
             window.browser_mod.browserID = ev.target.value;
+            this.dirty = true;
         }
         toggleCameraEnabled() {
             window.browser_mod.cameraEnabled = !window.browser_mod.cameraEnabled;
+            this.dirty = true;
         }
         unregister_browser(ev) {
             const browserID = ev.currentTarget.browserID;
@@ -112,18 +119,16 @@ loadDevTools().then(() => {
                 }
             };
             window.browser_mod.showPopup("Unregister browser", `Are you sure you want to unregister browser ${browserID}?`, {
-                primary_action: "Yes",
-                secondary_action: "No",
-                callbacks: {
-                    primary_action: unregisterCallback,
-                },
+                right_button: "Yes",
+                right_button_action: unregisterCallback,
+                left_button: "No",
             });
         }
         firstUpdated() {
             window.browser_mod.addEventListener("browser-mod-config-update", () => this.requestUpdate());
         }
         render() {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             return $ `
         <ha-app-layout>
           <app-header slot="header" fixed>
@@ -158,10 +163,14 @@ loadDevTools().then(() => {
               </h1>
               <div class="card-content">
                 <p>Settings that apply to this browser.</p>
-                <p>
-                  It is strongly recommended to refresh your browser window
-                  after any change to those settings.
-                </p>
+                ${this.dirty
+                ? $ `
+                      <ha-alert alert-type="warning">
+                        It is strongly recommended to refresh your browser
+                        window after changing any of the settings in this box.
+                      </ha-alert>
+                    `
+                : ""}
               </div>
               <div class="card-content">
                 <ha-settings-row>
@@ -187,21 +196,61 @@ loadDevTools().then(() => {
                   ></ha-textfield>
                 </ha-settings-row>
 
-                <ha-settings-row>
-                  <span slot="heading">Enable camera</span>
-                  <span slot="description"
-                    >Get camera input from this browser (hardware
-                    dependent)</span
-                  >
-                  <ha-switch
-                    .checked=${(_d = window.browser_mod) === null || _d === void 0 ? void 0 : _d.cameraEnabled}
-                    @change=${this.toggleCameraEnabled}
-                  ></ha-switch>
-                </ha-settings-row>
+                ${((_d = window.browser_mod) === null || _d === void 0 ? void 0 : _d.registered)
+                ? $ `
+                      ${this.hass.suspendWhenHidden
+                    ? $ `<ha-alert
+                            alert-type="warning"
+                            title="Auto closing connection"
+                          >
+                            Home Assistant will close the websocket connection
+                            to the server automatically after 5 minutes of
+                            inactivity.<br /><br />
+                            While decreasing network trafic and memory usage,
+                            this may cause problems for browser_mod operation.
+                            <br /><br />
+                            If you find that some things stop working for this
+                            Browser after a time, try going to your
+                            <a
+                              href="/profile"
+                              style="text-decoration: underline; color: var(--primary-color);"
+                              >Profile Settings</a
+                            >
+                            and disabling the option
+                            "${this.hass.localize("ui.panel.profile.suspend.header") || "Automatically close connection"}".
+                          </ha-alert>`
+                    : ""}
+                      <ha-settings-row>
+                        <span slot="heading">Enable camera</span>
+                        <span slot="description"
+                          >Get camera input from this browser (hardware
+                          dependent)</span
+                        >
+                        <ha-switch
+                          .checked=${(_e = window.browser_mod) === null || _e === void 0 ? void 0 : _e.cameraEnabled}
+                          @change=${this.toggleCameraEnabled}
+                        ></ha-switch>
+                      </ha-settings-row>
+                      <ha-alert title="Interaction requirement">
+                        For security reasons many browsers require the user to
+                        interact with a webpage before allowing audio playback
+                        or video capture. This may affect the
+                        <code>media_player</code> and
+                        <code>camera</code> components of Browser Mod.
+                        <br /><br />
+
+                        If you ever see a
+                        <ha-icon icon="mdi:gesture-tap"></ha-icon> symbol at the
+                        bottom right corner of the screen, please tap or click
+                        anywhere on the page. This should allow Browser Mod to
+                        work again.
+                      </ha-alert>
+                    `
+                : ""}
               </div>
             </ha-card>
 
-            <ha-card header="Registered browsers" outlined>
+            <ha-card header="Registered Browsers" outlined>
               <div class="card-content">
                 ${Object.keys(window.browser_mod.browsers).map((d) => $ ` <ha-settings-row>
                     <span slot="heading"> ${d} </span>
@@ -300,5 +349,8 @@ loadDevTools().then(() => {
     __decorate([
         e()
     ], BrowserModPanel.prototype, "connection", void 0);
+    __decorate([
+        e()
+    ], BrowserModPanel.prototype, "dirty", void 0);
     customElements.define("browser-mod-panel", BrowserModPanel);
 });
diff --git a/js/config_panel/main.ts b/js/config_panel/main.ts
index 20be064..9346775 100644
--- a/js/config_panel/main.ts
+++ b/js/config_panel/main.ts
@@ -9,16 +9,20 @@ loadDevTools().then(() => {
     @property() hass;
     @property() narrow;
     @property() connection;
+    @property() dirty = false;
 
     toggleRegister() {
       if (!window.browser_mod?.connected) return;
       window.browser_mod.registered = !window.browser_mod.registered;
+      this.dirty = true;
     }
     changeBrowserID(ev) {
       window.browser_mod.browserID = ev.target.value;
+      this.dirty = true;
     }
     toggleCameraEnabled() {
       window.browser_mod.cameraEnabled = !window.browser_mod.cameraEnabled;
+      this.dirty = true;
     }
 
     unregister_browser(ev) {
@@ -41,11 +45,9 @@ loadDevTools().then(() => {
         "Unregister browser",
         `Are you sure you want to unregister browser ${browserID}?`,
         {
-          primary_action: "Yes",
-          secondary_action: "No",
-          callbacks: {
-            primary_action: unregisterCallback,
-          },
+          right_button: "Yes",
+          right_button_action: unregisterCallback,
+          left_button: "No",
         }
       );
     }
@@ -91,10 +93,14 @@ loadDevTools().then(() => {
               </h1>
               <div class="card-content">
                 <p>Settings that apply to this browser.</p>
-                <p>
-                  It is strongly recommended to refresh your browser window
-                  after any change to those settings.
-                </p>
+                ${this.dirty
+                  ? html`
+                      <ha-alert alert-type="warning">
+                        It is strongly recommended to refresh your browser
+                        window after changing any of the settings in this box.
+                      </ha-alert>
+                    `
+                  : ""}
               </div>
               <div class="card-content">
                 <ha-settings-row>
@@ -120,21 +126,63 @@ loadDevTools().then(() => {
                   ></ha-textfield>
                 </ha-settings-row>
 
-                <ha-settings-row>
-                  <span slot="heading">Enable camera</span>
-                  <span slot="description"
-                    >Get camera input from this browser (hardware
-                    dependent)</span
-                  >
-                  <ha-switch
-                    .checked=${window.browser_mod?.cameraEnabled}
-                    @change=${this.toggleCameraEnabled}
-                  ></ha-switch>
-                </ha-settings-row>
+                ${window.browser_mod?.registered
+                  ? html`
+                      ${this.hass.suspendWhenHidden
+                        ? html`<ha-alert
+                            alert-type="warning"
+                            title="Auto closing connection"
+                          >
+                            Home Assistant will close the websocket connection
+                            to the server automatically after 5 minutes of
+                            inactivity.<br /><br />
+                            While decreasing network trafic and memory usage,
+                            this may cause problems for browser_mod operation.
+                            <br /><br />
+                            If you find that some things stop working for this
+                            Browser after a time, try going to your
+                            <a
+                              href="/profile"
+                              style="text-decoration: underline; color: var(--primary-color);"
+                              >Profile Settings</a
+                            >
+                            and disabling the option
+                            "${this.hass.localize(
+                              "ui.panel.profile.suspend.header"
+                            ) || "Automatically close connection"}".
+                          </ha-alert>`
+                        : ""}
+                      <ha-settings-row>
+                        <span slot="heading">Enable camera</span>
+                        <span slot="description"
+                          >Get camera input from this browser (hardware
+                          dependent)</span
+                        >
+                        <ha-switch
+                          .checked=${window.browser_mod?.cameraEnabled}
+                          @change=${this.toggleCameraEnabled}
+                        ></ha-switch>
+                      </ha-settings-row>
+                      <ha-alert title="Interaction requirement">
+                        For security reasons many browsers require the user to
+                        interact with a webpage before allowing audio playback
+                        or video capture. This may affect the
+                        <code>media_player</code> and
+                        <code>camera</code> components of Browser Mod.
+                        <br /><br />
+
+                        If you ever see a
+                        <ha-icon icon="mdi:gesture-tap"></ha-icon> symbol at the
+                        bottom right corner of the screen, please tap or click
+                        anywhere on the page. This should allow Browser Mod to
+                        work again.
+                      </ha-alert>
+                    `
+                  : ""}
               </div>
             </ha-card>
 
-            <ha-card header="Registered browsers" outlined>
+            <ha-card header="Registered Browsers" outlined>
               <div class="card-content">
                 ${Object.keys(window.browser_mod.browsers).map(
                   (d) => html` <ha-settings-row>
diff --git a/js/plugin/main.ts b/js/plugin/main.ts
index 85fc78b..4ff28c1 100644
--- a/js/plugin/main.ts
+++ b/js/plugin/main.ts
@@ -24,10 +24,10 @@ import pjson from "../../package.json";
     X Timeout
     X Fullscreen
   - Motion/occupancy tracker
-  - Information about interaction requirement
+  x Information about interaction requirement
   - Information about fullykiosk
   - Commands
-    - Rename browser_mod commands to browser_mod services
+    x Rename browser_mod commands to browser_mod services
     x Framework
     - ll-custom handling
     - Commands