Add setting for enableing/disabling cloud ICE servers (#22527)

* Add setting for enable/disable cloud ICE servers

* Fix copytexts, feature URL, refactor variable

* imports

* Use toast instead of alert

---------

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
Co-authored-by: Paul Bottein <paul.bottein@gmail.com>

src/data/cloud.ts

@@ -27,6 +27,7 @@ export interface CloudPreferences {
   alexa_report_state: boolean;
   google_report_state: boolean;
   tts_default_voice: [string, string];
+  cloud_ice_servers_enabled: boolean;
 }
 
 export interface CloudStatusLoggedIn {
@@ -145,6 +146,7 @@ export const updateCloudPref = (
     tts_default_voice?: CloudPreferences["tts_default_voice"];
     remote_allow_remote_enable?: CloudPreferences["remote_allow_remote_enable"];
     strict_connection?: CloudPreferences["strict_connection"];
+    cloud_ice_servers_enabled?: CloudPreferences["cloud_ice_servers_enabled"];
   }
 ) =>
   hass.callWS({

src/panels/config/cloud/account/cloud-account.ts

@@ -28,6 +28,7 @@ import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import "../../ha-config-section";
+import "./cloud-ice-servers-pref";
 import "./cloud-remote-pref";
 import "./cloud-tts-pref";
 import "./cloud-webhooks";
@@ -199,6 +200,11 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
               .cloudStatus=${this.cloudStatus}
             ></cloud-tts-pref>
 
+            <cloud-ice-servers-pref
+              .hass=${this.hass}
+              .cloudStatus=${this.cloudStatus}
+            ></cloud-ice-servers-pref>
+
             <ha-tip .hass=${this.hass}>
               <a href="/config/voice-assistants">
                 ${this.hass.localize(

src/panels/config/cloud/account/cloud-ice-servers-pref.ts

@@ -0,0 +1,111 @@
+import { mdiHelpCircle } from "@mdi/js";
+import type { CSSResultGroup } from "lit";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-card";
+import "../../../../components/ha-icon-button";
+import "../../../../components/ha-switch";
+import type { HaSwitch } from "../../../../components/ha-switch";
+import type { CloudStatusLoggedIn } from "../../../../data/cloud";
+import { updateCloudPref } from "../../../../data/cloud";
+import type { HomeAssistant } from "../../../../types";
+import { showToast } from "../../../../util/toast";
+
+@customElement("cloud-ice-servers-pref")
+export class CloudICEServersPref extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public cloudStatus?: CloudStatusLoggedIn;
+
+  protected render() {
+    if (!this.cloudStatus) {
+      return nothing;
+    }
+
+    const { cloud_ice_servers_enabled: cloudICEServersEnabled } =
+      this.cloudStatus.prefs;
+
+    return html`
+      <ha-card
+        outlined
+        header=${this.hass.localize(
+          "ui.panel.config.cloud.account.ice_servers.title"
+        )}
+      >
+        <div class="header-actions">
+          <a
+            href="https://www.nabucasa.com/config/webrtc/"
+            target="_blank"
+            rel="noreferrer"
+            class="icon-link"
+          >
+            <ha-icon-button
+              .label=${this.hass.localize(
+                "ui.panel.config.cloud.account.ice_servers.link_learn_how_it_works"
+              )}
+              .path=${mdiHelpCircle}
+            ></ha-icon-button>
+          </a>
+          <ha-switch
+            .checked=${cloudICEServersEnabled}
+            @change=${this._toggleCloudICEServersEnabledChanged}
+          ></ha-switch>
+        </div>
+
+        <div class="card-content">
+          <p>
+            ${this.hass.localize(
+              "ui.panel.config.cloud.account.ice_servers.info"
+            )}
+          </p>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private async _toggleCloudICEServersEnabledChanged(ev) {
+    const toggle = ev.target as HaSwitch;
+
+    try {
+      await updateCloudPref(this.hass, {
+        cloud_ice_servers_enabled: toggle.checked,
+      });
+      fireEvent(this, "ha-refresh-cloud-status");
+    } catch (err: any) {
+      showToast(this, { message: err.message });
+      toggle.checked = !toggle.checked;
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      a {
+        color: var(--primary-color);
+      }
+      .header-actions {
+        position: absolute;
+        right: 16px;
+        inset-inline-end: 16px;
+        inset-inline-start: initial;
+        top: 24px;
+        display: flex;
+        flex-direction: row;
+      }
+      .header-actions .icon-link {
+        margin-top: -16px;
+        margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
+        direction: var(--direction);
+        color: var(--secondary-text-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "cloud-ice-servers-pref": CloudICEServersPref;
+  }
+}

src/panels/config/cloud/account/cloud-remote-pref.ts

@@ -250,7 +250,7 @@ export class CloudRemotePref extends LitElement {
       }
       fireEvent(this, "ha-refresh-cloud-status");
     } catch (err: any) {
-      alert(err.message);
+      showToast(this, { message: err.message });
       toggle.checked = !toggle.checked;
     }
   }
@@ -264,7 +264,7 @@ export class CloudRemotePref extends LitElement {
       });
       fireEvent(this, "ha-refresh-cloud-status");
     } catch (err: any) {
-      alert(err.message);
+      showToast(this, { message: err.message });
       toggle.checked = !toggle.checked;
     }
   }

src/translations/en.json

@@ -3929,6 +3929,11 @@
               "certificate_expire": "Certificate renewal at {date}",
               "more_info": "More details"
             },
+            "ice_servers": {
+              "title": "WebRTC connections",
+              "info": "Home Assistant Cloud provides WebRTC servers. This improves your ability to view your camera streams when you are away from home.",
+              "link_learn_how_it_works": "Learn how it works"
+            },
             "alexa": {
               "title": "Alexa",
               "info": "With the Alexa integration for Home Assistant Cloud you'll be able to control all your Home Assistant devices via any Alexa-enabled device.",