Add option to disable suspend connection when hidden (#6304)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

src/fake_data/provide_hass.ts

@@ -203,6 +203,7 @@ export const provideHass = (
     translationMetadata: translationMetadata as any,
     dockedSidebar: "auto",
     vibrate: true,
+    suspendWhenHidden: false,
     moreInfoEntityId: null as any,
     // @ts-ignore
     async callService(domain, service, data) {

src/layouts/home-assistant.ts

@@ -11,6 +11,7 @@ import {
 } from "../util/register-service-worker";
 import "./ha-init-page";
 import "./home-assistant-main";
+import { storeState } from "../util/ha-pref-storage";
 
 @customElement("home-assistant")
 export class HomeAssistantAppEl extends HassElement {
@@ -55,6 +56,10 @@ export class HomeAssistantAppEl extends HassElement {
     import(
       /* webpackChunkName: "polyfill-web-animations-next" */ "web-animations-js/web-animations-next-lite.min"
     );
+    this.addEventListener("hass-suspend-when-hidden", (ev) => {
+      this._updateHass({ suspendWhenHidden: ev.detail.suspend });
+      storeState(this.hass!);
+    });
   }
 
   protected updated(changedProps: PropertyValues): void {
@@ -76,8 +81,6 @@ export class HomeAssistantAppEl extends HassElement {
     // @ts-ignore
     this._loadHassTranslations(this.hass!.language, "state");
 
-    this.addEventListener("unsuspend-app", () => this._onVisible(), false);
-
     document.addEventListener(
       "visibilitychange",
       () => this._checkVisibility(),
@@ -170,15 +173,17 @@ export class HomeAssistantAppEl extends HassElement {
         this._visiblePromiseResolve = resolve;
       })
     );
-    // We close the connection to Home Assistant after being hidden for 5 minutes
-    this._hiddenTimeout = window.setTimeout(() => {
-      this._hiddenTimeout = undefined;
-      // setTimeout can be delayed in the background and only fire
-      // when we switch to the tab or app again (Hey Android!)
-      if (!document.hidden) {
-        this._suspendApp();
-      }
-    }, 300000);
+    if (this.hass!.suspendWhenHidden !== false) {
+      // We close the connection to Home Assistant after being hidden for 5 minutes
+      this._hiddenTimeout = window.setTimeout(() => {
+        this._hiddenTimeout = undefined;
+        // setTimeout can be delayed in the background and only fire
+        // when we switch to the tab or app again (Hey Android!)
+        if (!document.hidden) {
+          this._suspendApp();
+        }
+      }, 300000);
+    }
     window.addEventListener("focus", () => this._onVisible(), { once: true });
   }
 

src/layouts/partial-panel-resolver.ts

@@ -162,6 +162,10 @@ class PartialPanelResolver extends HassRouterPage {
   }
 
   private _checkVisibility() {
+    if (this.hass.suspendWhenHidden === false) {
+      return;
+    }
+
     if (document.hidden) {
       this._onHidden();
     } else {

src/panels/profile/ha-panel-profile.ts

@@ -35,6 +35,7 @@ import "./ha-pick-theme-row";
 import "./ha-push-notifications-row";
 import "./ha-refresh-tokens-card";
 import "./ha-set-vibrate-row";
+import "./ha-set-suspend-row";
 
 class HaPanelProfile extends LitElement {
   @property() public hass!: HomeAssistant;
@@ -137,6 +138,10 @@ class HaPanelProfile extends LitElement {
                   ></ha-advanced-mode-row>
                 `
               : ""}
+            <ha-set-suspend-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-set-suspend-row>
 
             <div class="card-actions">
               <mwc-button class="warning" @click=${this._handleLogOut}>

src/panels/profile/ha-set-suspend-row.ts

@@ -0,0 +1,65 @@
+import {
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
+import "../../components/ha-switch";
+import type { HaSwitch } from "../../components/ha-switch";
+import type { HomeAssistant } from "../../types";
+import "./ha-settings-row";
+
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "hass-suspend-when-hidden": { suspend: HomeAssistant["suspendWhenHidden"] };
+  }
+  // for add event listener
+  interface HTMLElementEventMap {
+    "hass-suspend-when-hidden": HASSDomEvent<{
+      suspend: HomeAssistant["suspendWhenHidden"];
+    }>;
+  }
+}
+
+@customElement("ha-set-suspend-row")
+class HaSetSuspendRow extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public narrow!: boolean;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-settings-row .narrow=${this.narrow}>
+        <span slot="heading">
+          ${this.hass.localize("ui.panel.profile.suspend.header")}
+        </span>
+        <span slot="description">
+          ${this.hass.localize("ui.panel.profile.suspend.description")}
+        </span>
+        <ha-switch
+          .checked=${this.hass.suspendWhenHidden}
+          @change=${this._checkedChanged}
+        ></ha-switch>
+      </ha-settings-row>
+    `;
+  }
+
+  private async _checkedChanged(ev: Event) {
+    const suspend = (ev.target as HaSwitch).checked;
+    if (suspend === this.hass.suspendWhenHidden) {
+      return;
+    }
+    fireEvent(this, "hass-suspend-when-hidden", {
+      suspend,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-set-suspend-row": HaSetSuspendRow;
+  }
+}

src/state/connection-mixin.ts

@@ -47,6 +47,7 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
         translationMetadata,
         dockedSidebar: "docked",
         vibrate: true,
+        suspendWhenHidden: true,
         moreInfoEntityId: null,
         hassUrl: (path = "") => new URL(path, auth.data.hassUrl).toString(),
         callService: async (domain, service, serviceData = {}) => {

src/translations/en.json

@@ -2106,6 +2106,10 @@
           "header": "Vibrate",
           "description": "Enable or disable vibration on this device when controlling devices."
         },
+        "suspend": {
+          "header": "Automatically close connection",
+          "description": "Should we close the connection to the server after being hidden for 5 minutes?"
+        },
         "push_notifications": {
           "header": "Push Notifications",
           "description": "Send notifications to this device.",

src/types.ts

@@ -209,7 +209,7 @@ export interface HomeAssistant {
   resources: Resources;
   localize: LocalizeFunc;
   translationMetadata: TranslationMetadata;
-
+  suspendWhenHidden: boolean;
   vibrate: boolean;
   dockedSidebar: "docked" | "always_hidden" | "auto";
   defaultPanel: string;

src/util/ha-pref-storage.ts

@@ -5,6 +5,7 @@ const STORED_STATE = [
   "selectedTheme",
   "selectedLanguage",
   "vibrate",
+  "suspendWhenHidden",
   "defaultPanel",
 ];
 const STORAGE = window.localStorage || {};