From 7c5a78a1cf692eeac3757ddbae2080ae10bf7401 Mon Sep 17 00:00:00 2001
From: Philip Allgaier <mail@spacegaier.de>
Date: Tue, 8 Sep 2020 23:36:44 +0200
Subject: [PATCH] Media player visual improvements (#6817)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 .../media-player/ha-media-player-browse.ts         | 12 +++++++++++-
 src/panels/media-browser/ha-panel-media-browser.ts | 14 ++++++--------
 .../hui-dialog-select-media-player.ts              |  2 --
 .../hui-dialog-web-browser-play-media.ts           |  2 --
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts
index 0d9cde1946..ad80b0d524 100644
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/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]) {
diff --git a/src/panels/media-browser/ha-panel-media-browser.ts b/src/panels/media-browser/ha-panel-media-browser.ts
index 33cd43dd0c..a58243857e 100644
--- a/src/panels/media-browser/ha-panel-media-browser.ts
+++ b/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
-              .label=${this.hass.localize(
-                "ui.components.media-browser.choose-player"
-              )}
-              @click=${this._showSelectMediaPlayerDialog}
-            >
-              <ha-svg-icon .path=${mdiPlayNetwork}></ha-svg-icon>
-            </mwc-icon-button>
+              <mwc-button @click=${this._showSelectMediaPlayerDialog}>
+                <ha-svg-icon .path=${mdiPlayNetwork}></ha-svg-icon>
+                ${this.hass.localize(
+                  "ui.components.media-browser.choose_player"
+                )}
+              </mwc-button>
           </app-toolbar>
         </app-header>
         <div class="content">
diff --git a/src/panels/media-browser/hui-dialog-select-media-player.ts b/src/panels/media-browser/hui-dialog-select-media-player.ts
index 0c45026e81..d19cebe0ee 100644
--- a/src/panels/media-browser/hui-dialog-select-media-player.ts
+++ b/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,
diff --git a/src/panels/media-browser/hui-dialog-web-browser-play-media.ts b/src/panels/media-browser/hui-dialog-web-browser-play-media.ts
index d528bec1e4..ea04f9033e 100644
--- a/src/panels/media-browser/hui-dialog-web-browser-play-media.ts
+++ b/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,