Media player visual improvements (#6817)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

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

@@ -335,6 +335,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                       .item=${child}
                       graphic="avatar"
                       hasMeta
+                      dir=${computeRTLDirection(this.hass)}
                     >
                       <div
                         class="graphic"
@@ -360,7 +361,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                           ></ha-svg-icon>
                         </mwc-icon-button>
                       </div>
-                      <span>${child.title}</span>
+                      <span class="title">${child.title}</span>
                     </mwc-list-item>
                     <li divider role="separator"></li>
                   `
@@ -620,6 +621,7 @@ export class HaMediaPlayerBrowse extends LitElement {
 
         mwc-list {
           --mdc-list-vertical-padding: 0;
+          --mdc-list-item-graphic-margin: 0;
           --mdc-theme-text-icon-on-background: var(--secondary-text-color);
           margin-top: 10px;
         }
@@ -728,6 +730,14 @@ export class HaMediaPlayerBrowse extends LitElement {
           background-color: transparent;
         }
 
+        mwc-list-item .title {
+          margin-left: 16px;
+        }
+        mwc-list-item[dir="rtl"] .title {
+          margin-right: 16px;
+          margin-left: 0;
+        }
+
         /* ============= Narrow ============= */
 
         :host([narrow]) {

src/panels/media-browser/ha-panel-media-browser.ts

@@ -64,14 +64,12 @@ class PanelMediaBrowser extends LitElement {
                 "ui.components.media-browser.media-player-browser"
               )}
             </div>
-            <mwc-icon-button
+              <mwc-button @click=${this._showSelectMediaPlayerDialog}>
-              .label=${this.hass.localize(
+                <ha-svg-icon .path=${mdiPlayNetwork}></ha-svg-icon>
-                "ui.components.media-browser.choose-player"
+                ${this.hass.localize(
-              )}
+                  "ui.components.media-browser.choose_player"
-              @click=${this._showSelectMediaPlayerDialog}
+                )}
-            >
+              </mwc-button>
-              <ha-svg-icon .path=${mdiPlayNetwork}></ha-svg-icon>
-            </mwc-icon-button>
           </app-toolbar>
         </app-header>
         <div class="content">

src/panels/media-browser/hui-dialog-select-media-player.ts

@@ -40,8 +40,6 @@ export class HuiDialogSelectMediaPlayer extends LitElement {
     return html`
       <ha-dialog
         open
-        scrimClickAction
-        escapeKeyAction
         hideActions
         .heading=${createCloseHeading(
           this.hass,

src/panels/media-browser/hui-dialog-web-browser-play-media.ts

@@ -40,8 +40,6 @@ export class HuiDialogWebBrowserPlayMedia extends LitElement {
     return html`
       <ha-dialog
         open
-        scrimClickAction
-        escapeKeyAction
         hideActions
         .heading=${createCloseHeading(
           this.hass,