rtl

* Use language picker for cloud tts language

* Update ha-browse-media-tts.ts

build-scripts/list-plugins-and-polyfills.js

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+// Script to print Babel plugins and Core JS polyfills that will be used by browserslist environments
+
+import { version as babelVersion } from "@babel/core";
+import presetEnv from "@babel/preset-env";
+import compilationTargets from "@babel/helper-compilation-targets";
+import coreJSCompat from "core-js-compat";
+import { logPlugin } from "@babel/preset-env/lib/debug.js";
+import { babelOptions } from "./bundle.cjs";
+
+const detailsOpen = (heading) =>
+  `<details>\n<summary><h4>${heading}</h4></summary>\n`;
+const detailsClose = "</details>\n";
+
+const dummyAPI = {
+  version: babelVersion,
+  assertVersion: () => {},
+  caller: (callback) =>
+    callback({
+      name: "Dummy Bundler",
+      supportsStaticESM: true,
+      supportsDynamicImport: true,
+      supportsTopLevelAwait: true,
+      supportsExportNamespaceFrom: true,
+    }),
+  targets: () => ({}),
+};
+
+for (const buildType of ["Modern", "Legacy"]) {
+  const browserslistEnv = buildType.toLowerCase();
+  const babelOpts = babelOptions({ latestBuild: browserslistEnv === "modern" });
+  const presetEnvOpts = babelOpts.presets[0][1];
+
+  // Invoking preset-env in debug mode will log the included plugins
+  console.log(detailsOpen(`${buildType} Build Babel Plugins`));
+  presetEnv.default(dummyAPI, {
+    ...presetEnvOpts,
+    browserslistEnv,
+    debug: true,
+  });
+  console.log(detailsClose);
+
+  // Manually log the Core-JS polyfills using the same technique
+  if (presetEnvOpts.useBuiltIns) {
+    console.log(detailsOpen(`${buildType} Build Core-JS Polyfills`));
+    const targets = compilationTargets.default(babelOpts?.targets, {
+      browserslistEnv,
+    });
+    const polyfillList = coreJSCompat({ targets }).list;
+    console.log(
+      "The following %i polyfills may be injected by Babel:\n",
+      polyfillList.length
+    );
+    for (const polyfill of polyfillList) {
+      logPlugin(polyfill, targets, coreJSCompat.data);
+    }
+    console.log(detailsClose);
+  }
+}

build-scripts/list-preset-env-plugins.js

@@ -1,30 +0,0 @@
-#!/usr/bin/env node
-// Script to print Babel plugins that will be used by browserslist environments
-
-import { version as babelVersion } from "@babel/core";
-import presetEnv from "@babel/preset-env";
-import { babelOptions } from "./bundle.cjs";
-
-const dummyAPI = {
-  version: babelVersion,
-  assertVersion: () => {},
-  caller: (callback) =>
-    callback({
-      name: "Dummy Bundler",
-      supportsStaticESM: true,
-      supportsDynamicImport: true,
-      supportsTopLevelAwait: true,
-      supportsExportNamespaceFrom: true,
-    }),
-  targets: () => ({}),
-};
-
-for (const browserslistEnv of ["modern", "legacy"]) {
-  console.log("\nBrowsersList Environment = %s\n", browserslistEnv);
-  presetEnv.default(dummyAPI, {
-    ...babelOptions({ latestBuild: browserslistEnv === "modern" })
-      .presets[0][1],
-    browserslistEnv,
-    debug: true,
-  });
-}

hassio/src/entrypoint.ts

@@ -2,6 +2,7 @@
 import "../../src/resources/compatibility";
 import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings";
 import "../../src/resources/roboto";
+import "../../src/resources/ha-style";
 import "../../src/resources/safari-14-attachshadow-patch";
 import "./hassio-main";
 

hassio/src/hassio-main.ts

@@ -9,7 +9,6 @@ import { navigate } from "../../src/common/navigate";
 import { HassioPanelInfo } from "../../src/data/hassio/supervisor";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
 import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
-import "../../src/layouts/hass-loading-screen";
 import { HomeAssistant } from "../../src/types";
 import "./hassio-router";
 import { SupervisorBaseElement } from "./supervisor-base-element";

hassio/src/hassio-panel.ts

@@ -4,6 +4,7 @@ import {
   Supervisor,
   supervisorCollection,
 } from "../../src/data/supervisor/supervisor";
+import "../../src/layouts/hass-loading-screen";
 import { HomeAssistant, Route } from "../../src/types";
 import "./hassio-panel-router";
 

hassio/src/hassio-router.ts

@@ -5,7 +5,6 @@ import {
   HassRouterPage,
   RouterOptions,
 } from "../../src/layouts/hass-router-page";
-import "../../src/resources/ha-style";
 import { HomeAssistant } from "../../src/types";
 // Don't codesplit it, that way the dashboard always loads fast.
 import "./hassio-panel";

hassio/src/update-available/update-available-card.ts

@@ -42,9 +42,6 @@ import { updateCore } from "../../../src/data/supervisor/core";
 import { StoreAddon } from "../../../src/data/supervisor/store";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
-import "../../../src/layouts/hass-loading-screen";
-import "../../../src/layouts/hass-subpage";
-import "../../../src/layouts/hass-tabs-subpage";
 import { HomeAssistant, Route } from "../../../src/types";
 import { addonArchIsSupported, extractChangelog } from "../util/addon";
 

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20230427.0"
+version      = "20230501.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

src/components/media-player/ha-browse-media-tts.ts

@@ -21,6 +21,7 @@ import { buttonLinkStyle } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import "../ha-select";
 import "../ha-textarea";
+import "../ha-language-picker";
 
 export interface TtsMediaPickedEvent {
   item: MediaPlayerItem;
@@ -103,21 +104,17 @@ class BrowseMediaTTS extends LitElement {
 
     return html`
       <div class="cloud-options">
-        <ha-select
-          fixedMenuPosition
-          naturalMenuWidth
+        <ha-language-picker
+          .hass=${this.hass}
           .label=${this.hass.localize(
             "ui.components.media-browser.tts.language"
           )}
           .value=${selectedVoice[0]}
-          @selected=${this._handleLanguageChange}
+          .languages=${languages}
           @closed=${stopPropagation}
+          @value-changed=${this._handleLanguageChange}
         >
-          ${languages.map(
-            ([key, label]) =>
-              html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
-          )}
-        </ha-select>
+        </ha-language-picker>
 
         <ha-select
           fixedMenuPosition
@@ -184,10 +181,10 @@ class BrowseMediaTTS extends LitElement {
   }
 
   async _handleLanguageChange(ev) {
-    if (ev.target.value === this._cloudOptions![0]) {
+    if (ev.detail.value === this._cloudOptions![0]) {
       return;
     }
-    this._cloudOptions = [ev.target.value, this._cloudOptions![1]];
+    this._cloudOptions = [ev.detail.value, this._cloudOptions![1]];
   }
 
   async _handleGenderChange(ev) {
@@ -256,7 +253,8 @@ class BrowseMediaTTS extends LitElement {
         display: flex;
         justify-content: space-between;
       }
-      .cloud-options ha-select {
+      .cloud-options ha-select,
+      ha-language-picker {
         width: 48%;
       }
       ha-textarea {

src/data/cloud/tts.ts

@@ -1,6 +1,5 @@
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import { LocalizeFunc } from "../../common/translations/localize";
-import { translationMetadata } from "../../resources/translations-metadata";
 import { HomeAssistant } from "../../types";
 
 export interface CloudTTSInfo {
@@ -11,7 +10,7 @@ export const getCloudTTSInfo = (hass: HomeAssistant) =>
   hass.callWS<CloudTTSInfo>({ type: "cloud/tts/info" });
 
 export const getCloudTtsLanguages = (info?: CloudTTSInfo) => {
-  const languages: Array<[string, string]> = [];
+  const languages: string[] = [];
 
   if (!info) {
     return languages;
@@ -23,25 +22,9 @@ export const getCloudTtsLanguages = (info?: CloudTTSInfo) => {
       continue;
     }
     seen.add(lang);
-
-    let label = lang;
-
-    if (lang in translationMetadata.translations) {
-      label = translationMetadata.translations[lang].nativeName;
-    } else {
-      const [langFamily, dialect] = lang.split("-");
-      if (langFamily in translationMetadata.translations) {
-        label = `${translationMetadata.translations[langFamily].nativeName}`;
-
-        if (langFamily.toLowerCase() !== dialect.toLowerCase()) {
-          label += ` (${dialect})`;
-        }
-      }
-    }
-
-    languages.push([lang, label]);
+    languages.push(lang);
   }
-  return languages.sort((a, b) => caseInsensitiveStringCompare(a[1], b[1]));
+  return languages;
 };
 
 export const getCloudTtsSupportedGenders = (

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -1,3 +1,4 @@
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import "@material/mwc-button/mwc-button";
 import {
   mdiChevronDown,
@@ -109,7 +110,6 @@ export class HaVoiceCommandDialog extends LitElement {
     if (!this._opened) {
       return nothing;
     }
-    const supportsSTT = this._pipeline?.stt_engine && AudioRecorder.isSupported;
     return html`
       <ha-dialog
         open
@@ -202,11 +202,12 @@ export class HaVoiceCommandDialog extends LitElement {
             dialogInitialFocus
             iconTrailing
           >
-            <span slot="trailingIcon">
+            <div slot="trailingIcon">
               ${this._showSendButton
                 ? html`
                     <ha-icon-button
-                      class="listening-icon"
+                      id="microphone-button"
+                      class="move-end"
                       .path=${mdiSend}
                       @click=${this._handleSendMessage}
                       .label=${this.hass.localize(
@@ -215,8 +216,8 @@ export class HaVoiceCommandDialog extends LitElement {
                     >
                     </ha-icon-button>
                   `
-                : supportsSTT
-                ? html`
+                : this._pipeline?.stt_engine
+                ? html` <div class="move-end">
                     ${this._audioRecorder?.active
                       ? html`
                           <div class="bouncer">
@@ -226,17 +227,28 @@ export class HaVoiceCommandDialog extends LitElement {
                         `
                       : ""}
                     <ha-icon-button
-                      class="listening-icon"
-                      .path=${mdiMicrophone}
-                      @click=${this._toggleListening}
+                      id="microphone-button"
                       .label=${this.hass.localize(
                         "ui.dialogs.voice_command.start_listening"
                       )}
+                      .path=${mdiMicrophone}
+                      .disabled=${!AudioRecorder.isSupported}
+                      @click=${this._toggleListening}
                     >
                     </ha-icon-button>
-                  `
+                    ${!AudioRecorder.isSupported
+                      ? html`<simple-tooltip
+                          animation-delay="0"
+                          position="top"
+                          offset="1"
+                          >${this.hass.localize(
+                            "ui.dialogs.voice_command.stt_not_supported"
+                          )}</simple-tooltip
+                        >`
+                      : ""}
+                  </div>`
                 : ""}
-            </span>
+            </div>
           </ha-textfield>
           ${this._agentInfo && this._agentInfo.attribution
             ? html`
@@ -401,6 +413,7 @@ export class HaVoiceCommandDialog extends LitElement {
         }
       });
     }
+    this._stt_binary_handler_id = undefined;
     this._audioBuffer = [];
     const userMessage: Message = {
       who: "user",
@@ -463,6 +476,7 @@ export class HaVoiceCommandDialog extends LitElement {
           }
 
           if (event.type === "run-end") {
+            this._stt_binary_handler_id = undefined;
             unsub();
           }
 
@@ -509,6 +523,7 @@ export class HaVoiceCommandDialog extends LitElement {
       }
       // Send empty message to indicate we're done streaming.
       this._sendAudioChunk(new Int16Array());
+      this._stt_binary_handler_id = undefined;
     }
     this._audioBuffer = undefined;
   }
@@ -558,18 +573,22 @@ export class HaVoiceCommandDialog extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-icon-button.listening-icon {
+        #microphone-button {
           color: var(--secondary-text-color);
-          margin-right: -24px;
-          margin-inline-end: -24px;
-          margin-inline-start: initial;
-          direction: var(--direction);
         }
-
-        ha-icon-button.listening-icon[active] {
+        #microphone-button[active] {
           color: var(--primary-color);
         }
-
+        .move-end {
+          position: relative;
+          right: -24px;
+          inset-inline-end: -24px;
+          inset-inline-start: initial;
+          direction: var(--direction);
+        }
+        simple-tooltip {
+          top: 0;
+        }
         ha-dialog {
           --primary-action-button-flex: 1;
           --secondary-action-button-flex: 0;
@@ -619,7 +638,6 @@ export class HaVoiceCommandDialog extends LitElement {
         }
         ha-textfield {
           display: block;
-          overflow: hidden;
         }
         a.button {
           text-decoration: none;

src/html/_js_base.html.template

@@ -9,13 +9,6 @@
         script.src = src;
         return script;
       }
-      window.Polymer = {
-        lazyRegister: true,
-        useNativeCSSProperties: true,
-        dom: "shadow",
-        suppressTemplateNotifications: true,
-        suppressBindingNotifications: true,
-      };
       window.polymerSkipLoadingFontRoboto = true;
       if (!("customElements" in window &&
             "content" in document.createElement("template"))) {

src/layouts/supervisor-error-screen.ts

@@ -11,7 +11,6 @@ import { customElement, property } from "lit/decorators";
 import { atLeastVersion } from "../common/config/version";
 import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 import "../components/ha-card";
-import "../resources/ha-style";
 import { haStyle } from "../resources/styles";
 import { HomeAssistant } from "../types";
 import "./hass-subpage";

src/panels/calendar/dialog-calendar-event-editor.ts

@@ -498,12 +498,22 @@ class DialogCalendarEventEditor extends LitElement {
       this._submitting = false;
       return;
     }
+    const eventData = this._calculateData();
+    if (eventData.rrule && range === RecurrenceRange.THISEVENT) {
+      // Updates to a single instance of a recurring event by definition
+      // cannot change the recurrence rule and doing so would be invalid.
+      // It is difficult to detect if the user changed the recurrence rule
+      // since updating the date may change it implicitly (e.g. day of week
+      // of the event changes) so we just assume the users intent based on
+      // recurrence range and drop any other rrule changes.
+      eventData.rrule = undefined;
+    }
     try {
       await updateCalendarEvent(
         this.hass!,
         this._calendarId!,
         entry.uid!,
-        this._calculateData(),
+        eventData,
         entry.recurrence_id || "",
         range!
       );

src/panels/config/areas/ha-config-areas-dashboard.ts

@@ -21,7 +21,6 @@ import {
   subscribeEntityRegistry,
 } from "../../../data/entity_registry";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
-import "../../../layouts/hass-loading-screen";
 import "../../../layouts/hass-tabs-subpage";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { HomeAssistant, Route } from "../../../types";
@@ -222,10 +221,6 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
 
   static get styles(): CSSResultGroup {
     return css`
-      hass-loading-screen {
-        --app-header-background-color: var(--sidebar-background-color);
-        --app-header-text-color: var(--sidebar-text-color);
-      }
       .container {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

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

@@ -8,6 +8,7 @@ import "../../../../components/ha-card";
 import "../../../../components/ha-select";
 import "../../../../components/ha-svg-icon";
 import "../../../../components/ha-switch";
+import "../../../../components/ha-language-picker";
 import { CloudStatusLoggedIn, updateCloudPref } from "../../../../data/cloud";
 import {
   CloudTTSInfo,
@@ -54,34 +55,33 @@ export class CloudTTSPref extends LitElement {
             '"tts.cloud_say"'
           )}
           <br /><br />
+          <div class="row">
+            <ha-language-picker
+              .hass=${this.hass}
+              .label=${this.hass.localize(
+                "ui.panel.config.cloud.account.tts.default_language"
+              )}
+              .disabled=${this.savingPreferences}
+              .value=${defaultVoice[0]}
+              .languages=${languages}
+              @value-changed=${this._handleLanguageChange}
+            >
+            </ha-language-picker>
 
-          <ha-select
-            .label=${this.hass.localize(
-              "ui.panel.config.cloud.account.tts.default_language"
-            )}
-            .disabled=${this.savingPreferences}
-            .value=${defaultVoice[0]}
-            @selected=${this._handleLanguageChange}
-          >
-            ${languages.map(
-              ([key, label]) =>
-                html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
-            )}
-          </ha-select>
-
-          <ha-select
-            .label=${this.hass.localize(
-              "ui.panel.config.cloud.account.tts.default_gender"
-            )}
-            .disabled=${this.savingPreferences}
-            .value=${defaultVoice[1]}
-            @selected=${this._handleGenderChange}
-          >
-            ${genders.map(
-              ([key, label]) =>
-                html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
-            )}
-          </ha-select>
+            <ha-select
+              .label=${this.hass.localize(
+                "ui.panel.config.cloud.account.tts.default_gender"
+              )}
+              .disabled=${this.savingPreferences}
+              .value=${defaultVoice[1]}
+              @selected=${this._handleGenderChange}
+            >
+              ${genders.map(
+                ([key, label]) =>
+                  html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
+              )}
+            </ha-select>
+          </div>
         </div>
         <div class="card-actions">
           <mwc-button @click=${this._openTryDialog}>
@@ -115,11 +115,11 @@ export class CloudTTSPref extends LitElement {
   }
 
   async _handleLanguageChange(ev) {
-    if (ev.target.value === this.cloudStatus!.prefs.tts_default_voice[0]) {
+    if (ev.detail.value === this.cloudStatus!.prefs.tts_default_voice[0]) {
       return;
     }
     this.savingPreferences = true;
-    const language = ev.target.value;
+    const language = ev.detail.value;
 
     const curGender = this.cloudStatus!.prefs.tts_default_voice[1];
     const genders = this.getSupportedGenders(
@@ -185,6 +185,18 @@ export class CloudTTSPref extends LitElement {
         right: auto;
         left: 24px;
       }
+      .row {
+        display: flex;
+      }
+      .row > * {
+        flex: 1;
+      }
+      .row > *:first-child {
+        margin-right: 8px;
+      }
+      .row > *:last-child {
+        margin-left: 8px;
+      }
       .card-actions {
         display: flex;
         flex-direction: row-reverse;

src/panels/config/devices/ha-config-device-page.ts

@@ -62,7 +62,6 @@ import {
 } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-error-screen";
 import "../../../layouts/hass-subpage";
-import "../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";

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

@@ -33,7 +33,6 @@ import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { listenMediaQuery } from "../../common/dom/media_query";
 import { CloudStatus, fetchCloudStatus } from "../../data/cloud";
-import "../../layouts/hass-loading-screen";
 import { HassRouterPage, RouterOptions } from "../../layouts/hass-router-page";
 import { PageNavigation } from "../../layouts/hass-tabs-subpage";
 import { HomeAssistant, Route } from "../../types";

src/panels/config/integrations/ha-integration-card.ts

@@ -174,9 +174,11 @@ export class HaIntegrationCard extends LitElement {
         ${this.items.map(
           (item) =>
             html`<ha-list-item
+              dense
               hasMeta
               .entryId=${item.entry_id}
               @click=${this._selectConfigEntry}
+              class="config-entry"
               >${item.title ||
               this.hass.localize(
                 "ui.panel.config.integrations.config_entry.unnamed_entry"
@@ -1026,6 +1028,9 @@ export class HaIntegrationCard extends LitElement {
         ha-list-item ha-svg-icon {
           color: var(--secondary-text-color);
         }
+        .config-entry {
+          height: 36px;
+        }
         ha-icon-next {
           width: 24px;
         }

src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts

@@ -13,7 +13,6 @@ import {
   ZHADeviceEndpoint,
   ZHAGroup,
 } from "../../../../../data/zha";
-import "../../../../../layouts/hass-error-screen";
 import "../../../../../layouts/hass-subpage";
 import type { PolymerChangedEvent } from "../../../../../polymer-types";
 import type { HomeAssistant } from "../../../../../types";

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts

@@ -39,6 +39,8 @@ import {
   ZwaveJSNodeMetadata,
   ZWaveJSSetConfigParamResult,
 } from "../../../../../data/zwave_js";
+import "../../../../../layouts/hass-error-screen";
+import "../../../../../layouts/hass-loading-screen";
 import "../../../../../layouts/hass-tabs-subpage";
 import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../../../resources/styles";

src/panels/config/logs/ha-config-logs.ts

@@ -9,7 +9,6 @@ import "../../../components/search-input";
 import { LogProvider } from "../../../data/error_log";
 import { fetchHassioAddonsInfo } from "../../../data/hassio/addon";
 import "../../../layouts/hass-subpage";
-import "../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import "./error-log-card";

src/panels/config/repairs/ha-config-repairs.ts

@@ -9,7 +9,6 @@ import "../../../components/ha-list-item";
 import "../../../components/ha-svg-icon";
 import { domainToName } from "../../../data/integration";
 import type { RepairsIssue } from "../../../data/repairs";
-import "../../../layouts/hass-subpage";
 import type { HomeAssistant } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
 import { showRepairsFlowDialog } from "./show-dialog-repair-flow";

src/panels/config/voice-assistants/dialog-voice-assistant-pipeline-detail.ts

@@ -49,10 +49,10 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
   public showDialog(params: VoiceAssistantPipelineDetailsDialogParams): void {
     this._params = params;
     this._error = undefined;
+    this._cloudActive = this._params.cloudActiveSubscription;
     if (this._params.pipeline) {
       this._data = this._params.pipeline;
       this._preferred = this._params.preferred;
-      this._cloudActive = this._params.cloudActiveSubscription;
     } else {
       this._data = {
         language: (

src/panels/config/voice-assistants/entity-voice-settings.ts

@@ -1,3 +1,4 @@
+import { mdiAlertCircle } from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -32,8 +33,8 @@ import {
   updateEntityRegistryEntry,
 } from "../../../data/entity_registry";
 import {
-  GoogleEntity,
   fetchCloudGoogleEntity,
+  GoogleEntity,
 } from "../../../data/google_assistant";
 import { exposeEntities, voiceAssistants } from "../../../data/voice";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
@@ -223,7 +224,8 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
                 />
                 <span slot="heading">${voiceAssistants[key].name}</span>
                 ${!supported
-                  ? html`<div slot="description">
+                  ? html`<div slot="description" class="unsupported">
+                      <ha-svg-icon .path=${mdiAlertCircle}></ha-svg-icon>
                       ${this.hass.localize(
                         "ui.dialogs.voice-settings.unsupported"
                       )}
@@ -379,6 +381,15 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
         ha-checkbox {
           --mdc-checkbox-state-layer-size: 40px;
         }
+        .unsupported {
+          display: flex;
+          align-items: center;
+        }
+        .unsupported ha-svg-icon {
+          color: var(--error-color);
+          --mdc-icon-size: 16px;
+          margin-right: 4px;
+        }
         .header {
           margin-top: 8px;
           margin-bottom: 4px;

src/panels/config/voice-assistants/ha-config-voice-assistants-assistants.ts

@@ -11,6 +11,7 @@ import {
   ExtEntityRegistryEntry,
   getExtendedEntityRegistryEntries,
 } from "../../../data/entity_registry";
+import "../../../layouts/hass-loading-screen";
 import "../../../layouts/hass-tabs-subpage";
 import { HomeAssistant, Route } from "../../../types";
 import "./assist-pref";

src/panels/lovelace/elements/hui-image-element.ts

@@ -42,6 +42,7 @@ export class HuiImageElement extends LitElement implements LovelaceElement {
         .image=${this._config.image}
         .stateImage=${this._config.state_image}
         .cameraImage=${this._config.camera_image}
+        .cameraView=${this._config.camera_view}
         .filter=${this._config.filter}
         .stateFilter=${this._config.state_filter}
         .title=${computeTooltip(this.hass, this._config)}

src/panels/lovelace/elements/types.ts

@@ -1,6 +1,7 @@
 import { ActionConfig } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
 import { Condition } from "../common/validate-condition";
+import { HuiImage } from "../components/hui-image";
 
 interface LovelaceElementConfigBase {
   type: string;
@@ -43,6 +44,7 @@ export interface ImageElementConfig extends LovelaceElementConfigBase {
   image?: string;
   state_image?: string;
   camera_image?: string;
+  camera_view?: HuiImage["cameraView"];
   dark_mode_image?: string;
   dark_mode_filter?: string;
   filter?: string;

src/panels/lovelace/hui-root.ts

@@ -1052,10 +1052,6 @@ class HUIRoot extends LitElement {
         #view {
           position: relative;
           display: flex;
-          background: var(
-            --lovelace-background,
-            var(--primary-background-color)
-          );
           padding-top: calc(var(--header-height) + env(safe-area-inset-top));
           min-height: 100vh;
           box-sizing: border-box;
@@ -1064,6 +1060,12 @@ class HUIRoot extends LitElement {
           padding-bottom: env(safe-area-inset-bottom);
         }
         hui-view {
+          background: var(
+            --lovelace-background,
+            var(--primary-background-color)
+          );
+        }
+        #view > * {
           flex: 1 1 100%;
           max-width: 100%;
         }

src/translations/en.json

@@ -838,6 +838,7 @@
         "input_label": "Enter a request",
         "send_text": "Send text",
         "start_listening": "Start listening",
+        "stt_not_supported": "You can only use speech-to-text when using HTTPS.",
         "manage_assistants": "Manage assistants"
       },
       "generic": {
@@ -2761,7 +2762,7 @@
             "alert_password_change_required": "You need to change your password before logging in.",
             "alert_email_confirm_necessary": "You need to confirm your email before logging in.",
             "cloud_pipeline_title": "Want to use Home Assistant Cloud for your voice assistant?",
-            "cloud_pipeline_text": "We created a new assistant for you, using the great text-to-speech and speech-to-text engines from Home Assistant Cloud. Would you like to set this assistant as the preferred assistant?"
+            "cloud_pipeline_text": "We created a new assistant for you, using the superior text-to-speech and speech-to-text engines from Home Assistant Cloud. Would you like to set this assistant as the preferred assistant?"
           },
           "forgot_password": {
             "title": "Forgot password",
@@ -2813,7 +2814,7 @@
             "fetching_subscription": "Fetching subscription…",
             "tts": {
               "title": "Text-to-speech",
-              "info": "Bring personality to your home by having it speak to you by using our Text-to-Speech services. You can use this in automations and scripts by using the {service} service.",
+              "info": "Bring personality to your home by having it speak to you by using our text-to-speech services. You can use this in automations and scripts by using the {service} service.",
               "default_language": "Default language to use",
               "default_gender": "Default gender to use",
               "try": "Try",