Update media player more info (#11734)

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -5,7 +5,6 @@ import {
   mdiLoginVariant,
   mdiMusicNote,
   mdiPlayBoxMultiple,
-  mdiSend,
   mdiVolumeHigh,
   mdiVolumeMinus,
   mdiVolumeOff,
@@ -13,7 +12,7 @@ import {
 } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
@@ -22,7 +21,7 @@ import "../../../components/ha-icon-button";
 import "../../../components/ha-slider";
 import "../../../components/ha-svg-icon";
 import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
-import { UNAVAILABLE, UNAVAILABLE_STATES, UNKNOWN } from "../../../data/entity";
+import { UNAVAILABLE, UNKNOWN } from "../../../data/entity";
 import {
   computeMediaControls,
   MediaPickedEvent,
@@ -43,8 +42,6 @@ class MoreInfoMediaPlayer extends LitElement {
 
   @property({ attribute: false }) public stateObj?: MediaPlayerEntity;
 
-  @query("#ttsInput") private _ttsInput?: HTMLInputElement;
-
   protected render(): TemplateResult {
     if (!this.stateObj) {
       return html``;
@@ -75,13 +72,17 @@ class MoreInfoMediaPlayer extends LitElement {
               </div>
               ${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA)
                 ? html`
-                    <ha-icon-button
+                    <mwc-button
                       .label=${this.hass.localize(
                         "ui.card.media_player.browse_media"
                       )}
-                      .path=${mdiPlayBoxMultiple}
                       @click=${this._showBrowseMedia}
-                    ></ha-icon-button>
+                    >
+                      <ha-svg-icon
+                        .path=${mdiPlayBoxMultiple}
+                        slot="icon"
+                      ></ha-svg-icon>
+                    </mwc-button>
                   `
                 : ""}
             </div>
@@ -183,20 +184,7 @@ class MoreInfoMediaPlayer extends LitElement {
       supportsFeature(stateObj, SUPPORT_PLAY_MEDIA)
         ? html`
             <div class="tts">
-              <paper-input
+              Text to speech has moved to the media browser.
-                id="ttsInput"
-                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
-                .label=${this.hass.localize(
-                  "ui.card.media_player.text_to_speak"
-                )}
-                @keydown=${this._ttsCheckForEnter}
-              ></paper-input>
-              <ha-icon-button
-                .path=${mdiSend}
-                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
-                @click=${this._sendTTS}
-              ></ha-icon-button>
-            </div>
             </div>
           `
         : ""}
@@ -207,14 +195,14 @@ class MoreInfoMediaPlayer extends LitElement {
     return css`
       ha-icon-button[action="turn_off"],
       ha-icon-button[action="turn_on"],
-      ha-slider,
+      ha-slider {
-      #ttsInput {
         flex-grow: 1;
       }
 
       .controls {
         display: flex;
         align-items: center;
+        --mdc-theme-primary: currentColor;
       }
 
       .basic-controls {
@@ -223,8 +211,7 @@ class MoreInfoMediaPlayer extends LitElement {
 
       .volume,
       .source-input,
-      .sound-input,
+      .sound-input {
-      .tts {
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -241,6 +228,15 @@ class MoreInfoMediaPlayer extends LitElement {
         margin-left: 10px;
         flex-grow: 1;
       }
+
+      .tts {
+        margin-top: 16px;
+        font-style: italic;
+      }
+
+      mwc-button > ha-svg-icon {
+        vertical-align: text-bottom;
+      }
     `;
   }
 
@@ -295,32 +291,6 @@ class MoreInfoMediaPlayer extends LitElement {
     });
   }
 
-  private _ttsCheckForEnter(e: KeyboardEvent) {
-    if (e.keyCode === 13) this._sendTTS();
-  }
-
-  private _sendTTS() {
-    const ttsInput = this._ttsInput;
-    if (!ttsInput) {
-      return;
-    }
-
-    const services = this.hass.services.tts;
-    const serviceKeys = Object.keys(services).sort();
-
-    const service = serviceKeys.find((key) => key.indexOf("_say") !== -1);
-
-    if (!service) {
-      return;
-    }
-
-    this.hass.callService("tts", service, {
-      entity_id: this.stateObj!.entity_id,
-      message: ttsInput.value,
-    });
-    ttsInput.value = "";
-  }
-
   private _showBrowseMedia(): void {
     showMediaBrowserDialog(this, {
       action: "play",