render voice names for Cloud voices (#25164)

src/data/cloud/tts.ts

@@ -1,8 +1,14 @@
-import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import type { HomeAssistant } from "../../types";
 
 export interface CloudTTSInfo {
-  languages: [string, string][];
+  languages: [
+    // language
+    string,
+    // voice id
+    string,
+    // voice name
+    string,
+  ][];
 }
 
 export const getCloudTTSInfo = (hass: HomeAssistant) =>
@@ -25,22 +31,3 @@ export const getCloudTtsLanguages = (info?: CloudTTSInfo) => {
   }
   return languages;
 };
-
-export const getCloudTtsSupportedVoices = (
-  language: string,
-  info: CloudTTSInfo | undefined
-) => {
-  const voices: string[] = [];
-
-  if (!info) {
-    return voices;
-  }
-
-  for (const [curLang, voice] of info.languages) {
-    if (curLang === language) {
-      voices.push(voice);
-    }
-  }
-
-  return voices.sort((a, b) => caseInsensitiveStringCompare(a, b));
-};

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

@@ -16,12 +16,30 @@ import type { CloudTTSInfo } from "../../../../data/cloud/tts";
 import {
   getCloudTTSInfo,
   getCloudTtsLanguages,
-  getCloudTtsSupportedVoices,
 } from "../../../../data/cloud/tts";
 import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
 import { showTryTtsDialog } from "./show-dialog-cloud-tts-try";
 
+export const getCloudTtsSupportedVoices = (
+  language: string,
+  info: CloudTTSInfo | undefined
+) => {
+  const voices: { voiceId: string; voiceName: string }[] = [];
+
+  if (!info) {
+    return voices;
+  }
+
+  for (const [curLang, voiceId, voiceName] of info.languages) {
+    if (curLang === language) {
+      voices.push({ voiceId, voiceName });
+    }
+  }
+
+  return voices;
+};
+
 @customElement("cloud-tts-pref")
 export class CloudTTSPref extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -77,7 +95,9 @@ export class CloudTTSPref extends LitElement {
             >
               ${voices.map(
                 (voice) =>
-                  html`<ha-list-item .value=${voice}>${voice}</ha-list-item>`
+                  html`<ha-list-item .value=${voice.voiceId}>
+                    ${voice.voiceName}
+                  </ha-list-item>`
               )}
             </ha-select>
           </div>
@@ -132,9 +152,9 @@ export class CloudTTSPref extends LitElement {
 
     const curVoice = this.cloudStatus!.prefs.tts_default_voice[1];
     const voices = this.getSupportedVoices(language, this.ttsInfo);
-    const newVoice = voices.find((item) => item === curVoice)
+    const newVoice = voices.find((item) => item.voiceId === curVoice)
       ? curVoice
-      : voices[0];
+      : voices[0].voiceId;
 
     try {
       await updateCloudPref(this.hass, {