From 3595fab5cbe319417210ca29d574030600f0bdd5 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Tue, 6 May 2025 03:49:35 -0400
Subject: [PATCH] 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>
---
 .../media-player/ha-browse-media-tts.ts       | 135 ++++++++++++------
 src/translations/en.json                      |   4 +-
 2 files changed, 94 insertions(+), 45 deletions(-)

diff --git a/src/components/media-player/ha-browse-media-tts.ts b/src/components/media-player/ha-browse-media-tts.ts
index e6fbdd62d7..1924af09a4 100644
--- a/src/components/media-player/ha-browse-media-tts.ts
+++ b/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>
-      <div class="card-content">
-        <ha-textarea
-          autogrow
-          .label=${this.hass.localize(
-            "ui.components.media-browser.tts.message"
-          )}
-          .value=${this._message ||
-          this.hass.localize(
-            "ui.components.media-browser.tts.example_message",
-            {
-              name: this.hass.user?.name || "Alice",
-            }
-          )}
-        >
-        </ha-textarea>
-        ${this._provider?.supported_languages?.length
-          ? html` <div class="options">
-              <ha-language-picker
-                .hass=${this.hass}
-                .languages=${this._provider.supported_languages}
-                .value=${this._language}
-                required
-                @value-changed=${this._languageChanged}
-              ></ha-language-picker>
-              <ha-tts-voice-picker
-                .hass=${this.hass}
-                .value=${this._voice}
-                .engineId=${this._provider.engine_id}
-                .language=${this._language}
-                required
-                @value-changed=${this._voiceChanged}
-              ></ha-tts-voice-picker>
-            </div>`
-          : nothing}
-      </div>
-      <div class="card-actions">
-        <mwc-button @click=${this._ttsClicked}>
-          ${this.hass.localize(
-            `ui.components.media-browser.tts.action_${this.action}`
-          )}
-        </mwc-button>
-      </div>
-    </ha-card> `;
+    return html`
+      <ha-card>
+        <div class="card-content">
+          <ha-textarea
+            autogrow
+            .label=${this.hass.localize(
+              "ui.components.media-browser.tts.message"
+            )}
+            .value=${this._message ||
+            this.hass.localize(
+              "ui.components.media-browser.tts.example_message",
+              {
+                name: this.hass.user?.name || "Alice",
+              }
+            )}
+          >
+          </ha-textarea>
+          ${this._provider?.supported_languages?.length
+            ? html` <div class="options">
+                <ha-language-picker
+                  .hass=${this.hass}
+                  .languages=${this._provider.supported_languages}
+                  .value=${this._language}
+                  required
+                  @value-changed=${this._languageChanged}
+                ></ha-language-picker>
+                <ha-tts-voice-picker
+                  .hass=${this.hass}
+                  .value=${this._voice}
+                  .engineId=${this._provider.engine_id}
+                  .language=${this._language}
+                  required
+                  @value-changed=${this._voiceChanged}
+                ></ha-tts-voice-picker>
+              </div>`
+            : nothing}
+        </div>
+        <div class="card-actions">
+          <mwc-button @click=${this._ttsClicked}>
+            ${this.hass.localize(
+              `ui.components.media-browser.tts.action_${this.action}`
+            )}
+          </mwc-button>
+        </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;
+      }
     `,
   ];
 }
diff --git a/src/translations/en.json b/src/translations/en.json
index 10d0ce38df..69b6e55f76 100644
--- a/src/translations/en.json
+++ b/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",