Update Media Browser to styling from Mockup (#11424)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>
Co-authored-by: Bram Kragten <mail@bramkragten.nl>

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

@@ -1,9 +1,13 @@
+import "../ha-header-bar";
+import { mdiArrowLeft, mdiClose } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
+import { computeRTLDirection } from "../../common/util/compute_rtl";
 import type {
   MediaPickedEvent,
   MediaPlayerBrowseAction,
+  MediaPlayerItem,
 } from "../../data/media-player";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
@@ -16,6 +20,8 @@ import { MediaPlayerBrowseDialogParams } from "./show-media-browser-dialog";
 class DialogMediaPlayerBrowse extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @state() private _currentItem?: MediaPlayerItem;
+
   @state() private _navigateIds?: MediaPlayerItemId[];
 
   @state() private _params?: MediaPlayerBrowseDialogParams;
@@ -33,11 +39,12 @@ class DialogMediaPlayerBrowse extends LitElement {
   public closeDialog() {
     this._params = undefined;
     this._navigateIds = undefined;
+    this._currentItem = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   protected render(): TemplateResult {
-    if (!this._params) {
+    if (!this._params || !this._navigateIds) {
       return html``;
     }
 
@@ -48,8 +55,36 @@ class DialogMediaPlayerBrowse extends LitElement {
         escapeKeyAction
         hideActions
         flexContent
+        .heading=${true}
         @closed=${this.closeDialog}
       >
+        <ha-header-bar slot="heading">
+          ${this._navigateIds.length > 1
+            ? html`
+                <ha-icon-button
+                  slot="navigationIcon"
+                  .path=${mdiArrowLeft}
+                  @click=${this._goBack}
+                ></ha-icon-button>
+              `
+            : ""}
+          <span slot="title">
+            ${!this._currentItem
+              ? this.hass.localize(
+                  "ui.components.media-browser.media-player-browser"
+                )
+              : this._currentItem.title}
+          </span>
+
+          <ha-icon-button
+            .label=${this.hass.localize("ui.dialogs.generic.close")}
+            .path=${mdiClose}
+            dialogAction="close"
+            slot="actionItems"
+            class="header_button"
+            dir=${computeRTLDirection(this.hass)}
+          ></ha-icon-button>
+        </ha-header-bar>
         <ha-media-player-browse
           dialog
           .hass=${this.hass}
@@ -64,8 +99,14 @@ class DialogMediaPlayerBrowse extends LitElement {
     `;
   }
 
-  private _mediaBrowsed(ev) {
+  private _goBack() {
+    this._navigateIds = this._navigateIds?.slice(0, -1);
+    this._currentItem = undefined;
+  }
+
+  private _mediaBrowsed(ev: { detail: HASSDomEvents["media-browsed"] }) {
     this._navigateIds = ev.detail.ids;
+    this._currentItem = ev.detail.current;
   }
 
   private _mediaPicked(ev: HASSDomEvent<MediaPickedEvent>): void {
@@ -89,7 +130,7 @@ class DialogMediaPlayerBrowse extends LitElement {
         }
 
         ha-media-player-browse {
-          --media-browser-max-height: 100vh;
+          --media-browser-max-height: calc(100vh - 65px);
         }
 
         @media (min-width: 800px) {
@@ -101,10 +142,17 @@ class DialogMediaPlayerBrowse extends LitElement {
           }
           ha-media-player-browse {
             position: initial;
-            --media-browser-max-height: 100vh - 72px;
+            --media-browser-max-height: 100vh - 137px;
             width: 700px;
           }
         }
+
+        ha-header-bar {
+          --mdc-theme-on-primary: var(--primary-text-color);
+          --mdc-theme-primary: var(--mdc-theme-surface);
+          flex-shrink: 0;
+          border-bottom: 1px solid var(--divider-color, rgba(0, 0, 0, 0.12));
+        }
       `,
     ];
   }