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,7 +54,8 @@ class BrowseMediaTTS extends LitElement {
   private _message?: string;
 
   protected render() {
-    return html`<ha-card>
+    return html`
+      <ha-card>
         <div class="card-content">
           <ha-textarea
             autogrow
@@ -94,7 +98,25 @@ class BrowseMediaTTS extends LitElement {
             )}
           </mwc-button>
         </div>
-    </ha-card> `;
+      </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",