diff --git a/src/data/cloud.ts b/src/data/cloud.ts index cde961db034f..5b1569f534f5 100644 --- a/src/data/cloud.ts +++ b/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({ diff --git a/src/panels/config/cloud/account/cloud-account.ts b/src/panels/config/cloud/account/cloud-account.ts index 2d5244f97466..0cabad210d16 100644 --- a/src/panels/config/cloud/account/cloud-account.ts +++ b/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} > + + ${this.hass.localize( diff --git a/src/panels/config/cloud/account/cloud-ice-servers-pref.ts b/src/panels/config/cloud/account/cloud-ice-servers-pref.ts new file mode 100644 index 000000000000..76fc62ac225c --- /dev/null +++ b/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` + + + + + + + + + + + ${this.hass.localize( + "ui.panel.config.cloud.account.ice_servers.info" + )} + + + + `; + } + + 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; + } +} diff --git a/src/panels/config/cloud/account/cloud-remote-pref.ts b/src/panels/config/cloud/account/cloud-remote-pref.ts index baace154bd14..3bf946b05734 100644 --- a/src/panels/config/cloud/account/cloud-remote-pref.ts +++ b/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; } } diff --git a/src/translations/en.json b/src/translations/en.json index ea07a3b19397..db5e1e046443 100644 --- a/src/translations/en.json +++ b/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.",
+ ${this.hass.localize( + "ui.panel.config.cloud.account.ice_servers.info" + )} +