Show voice ID in TTS media browser (#25324)

* Show voice ID in TTS media browser

* Apply suggestions from code review

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>

* Add copy button

* Now copy correct clipboard icon

* Improve styling

* GAP

---------

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>

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

@@ -2,6 +2,7 @@ import "@material/mwc-button/mwc-button";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { mdiContentCopy } from "@mdi/js";
 import { storage } from "../../common/decorators/storage";
 import { fireEvent } from "../../common/dom/fire_event";
 import type {
@@ -17,6 +18,8 @@ import "../ha-language-picker";
 import "../ha-tts-voice-picker";
 import "../ha-card";
 import { fetchCloudStatus } from "../../data/cloud";
+import { copyToClipboard } from "../../common/util/copy-clipboard";
+import { showToast } from "../../util/toast";
 
 export interface TtsMediaPickedEvent {
   item: MediaPlayerItem;
@@ -51,50 +54,69 @@ class BrowseMediaTTS extends LitElement {
   private _message?: string;
 
   protected render() {
-    return html`<ha-card>
+    return html`
-      <div class="card-content">
+      <ha-card>
-        <ha-textarea
+        <div class="card-content">
-          autogrow
+          <ha-textarea
-          .label=${this.hass.localize(
+            autogrow
-            "ui.components.media-browser.tts.message"
+            .label=${this.hass.localize(
-          )}
+              "ui.components.media-browser.tts.message"
-          .value=${this._message ||
+            )}
-          this.hass.localize(
+            .value=${this._message ||
-            "ui.components.media-browser.tts.example_message",
+            this.hass.localize(
-            {
+              "ui.components.media-browser.tts.example_message",
-              name: this.hass.user?.name || "Alice",
+              {
-            }
+                name: this.hass.user?.name || "Alice",
-          )}
+              }
-        >
+            )}
-        </ha-textarea>
+          >
-        ${this._provider?.supported_languages?.length
+          </ha-textarea>
-          ? html` <div class="options">
+          ${this._provider?.supported_languages?.length
-              <ha-language-picker
+            ? html` <div class="options">
-                .hass=${this.hass}
+                <ha-language-picker
-                .languages=${this._provider.supported_languages}
+                  .hass=${this.hass}
-                .value=${this._language}
+                  .languages=${this._provider.supported_languages}
-                required
+                  .value=${this._language}
-                @value-changed=${this._languageChanged}
+                  required
-              ></ha-language-picker>
+                  @value-changed=${this._languageChanged}
-              <ha-tts-voice-picker
+                ></ha-language-picker>
-                .hass=${this.hass}
+                <ha-tts-voice-picker
-                .value=${this._voice}
+                  .hass=${this.hass}
-                .engineId=${this._provider.engine_id}
+                  .value=${this._voice}
-                .language=${this._language}
+                  .engineId=${this._provider.engine_id}
-                required
+                  .language=${this._language}
-                @value-changed=${this._voiceChanged}
+                  required
-              ></ha-tts-voice-picker>
+                  @value-changed=${this._voiceChanged}
-            </div>`
+                ></ha-tts-voice-picker>
-          : nothing}
+              </div>`
-      </div>
+            : nothing}
-      <div class="card-actions">
+        </div>
-        <mwc-button @click=${this._ttsClicked}>
+        <div class="card-actions">
-          ${this.hass.localize(
+          <mwc-button @click=${this._ttsClicked}>
-            `ui.components.media-browser.tts.action_${this.action}`
+            ${this.hass.localize(
-          )}
+              `ui.components.media-browser.tts.action_${this.action}`
-        </mwc-button>
+            )}
-      </div>
+          </mwc-button>
-    </ha-card> `;
+        </div>
+      </ha-card>
+      ${this._voice
+        ? html`
+            <div class="footer">
+              ${this.hass.localize(
+                `ui.components.media-browser.tts.selected_voice_id`
+              )}
+              <code>${this._voice || "-"}</code>
+              <ha-icon-button
+                .path=${mdiContentCopy}
+                @click=${this._copyVoiceId}
+                title=${this.hass.localize(
+                  "ui.components.media-browser.tts.copy_voice_id"
+                )}
+              ></ha-icon-button>
+            </div>
+          `
+        : nothing}
+    `;
   }
 
   protected override willUpdate(changedProps: PropertyValues): void {
@@ -197,6 +219,14 @@ class BrowseMediaTTS extends LitElement {
     fireEvent(this, "tts-picked", { item });
   }
 
+  private async _copyVoiceId(ev) {
+    ev.preventDefault();
+    await copyToClipboard(this._voice);
+    showToast(this, {
+      message: this.hass.localize("ui.common.copied_clipboard"),
+    });
+  }
+
   static override styles = [
     buttonLinkStyle,
     css`
@@ -218,6 +248,23 @@ class BrowseMediaTTS extends LitElement {
       button.link {
         color: var(--primary-color);
       }
+      .footer {
+        font-size: var(--ha-font-size-s);
+        color: var(--secondary-text-color);
+        margin: 16px 0;
+        text-align: center;
+      }
+      .footer code {
+        font-weight: var(--ha-font-weight-bold);
+      }
+      .footer {
+        --mdc-icon-size: 14px;
+        --mdc-icon-button-size: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 6px;
+      }
     `,
   ];
 }

src/translations/en.json

@@ -920,7 +920,9 @@
           "action_play": "Say",
           "action_pick": "Select",
           "set_as_default": "Set as default options",
-          "faild_to_store_defaults": "Failed to store defaults: {error}"
+          "faild_to_store_defaults": "Failed to store defaults: {error}",
+          "selected_voice_id": "Selected voice ID",
+          "copy_voice_id": "Copy voice ID"
         },
         "pick": "Pick",
         "play": "Play",