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));
+        }
       `,
     ];
   }

src/data/media-player.ts

@@ -88,7 +88,7 @@ export const BROWSER_PLAYER = "browser";
 export type MediaClassBrowserSetting = {
   icon: string;
   thumbnail_ratio?: string;
-  layout?: string;
+  layout?: "grid";
   show_list_images?: boolean;
 };
 

src/panels/media-browser/ha-bar-media-player.ts

@@ -19,6 +19,7 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
@@ -152,7 +153,10 @@ class BarMediaPlayer extends LitElement {
       stateObj.attributes.entity_picture;
 
     return html`
-      <div class="info">
+      <div
+        class="info ${!isBrowser ? "pointer" : ""}"
+        @click=${this._openMoreInfo}
+      >
         ${mediaArt ? html`<img src=${this.hass.hassUrl(mediaArt)} />` : ""}
         <div class="media-info">
           <hui-marquee
@@ -309,6 +313,13 @@ class BarMediaPlayer extends LitElement {
     );
   }
 
+  private _openMoreInfo() {
+    if (this._browserPlayer) {
+      return;
+    }
+    fireEvent(this, "hass-more-info", { entityId: this.entityId });
+  }
+
   private get _showProgressBar() {
     if (!this.hass) {
       return false;
@@ -418,6 +429,10 @@ class BarMediaPlayer extends LitElement {
         overflow: hidden;
       }
 
+      .pointer {
+        cursor: pointer;
+      }
+
       .secondary,
       .progress {
         color: var(--secondary-text-color);

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

@@ -1,3 +1,4 @@
+import { mdiArrowLeft } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import {
@@ -13,9 +14,14 @@ import { LocalStorage } from "../../common/decorators/local-storage";
 import { HASSDomEvent } from "../../common/dom/fire_event";
 import { navigate } from "../../common/navigate";
 import "../../components/ha-menu-button";
+import "../../components/ha-icon-button";
 import "../../components/media-player/ha-media-player-browse";
 import type { MediaPlayerItemId } from "../../components/media-player/ha-media-player-browse";
-import { BROWSER_PLAYER, MediaPickedEvent } from "../../data/media-player";
+import {
+  BROWSER_PLAYER,
+  MediaPickedEvent,
+  MediaPlayerItem,
+} from "../../data/media-player";
 import { resolveMediaSource } from "../../data/media_source";
 import "../../layouts/ha-app-layout";
 import { haStyle } from "../../resources/styles";
@@ -32,6 +38,8 @@ class PanelMediaBrowser extends LitElement {
 
   @property() public route!: Route;
 
+  @property() _currentItem?: MediaPlayerItem;
+
   private _navigateIds: MediaPlayerItemId[] = [
     {
       media_content_id: undefined,
@@ -47,15 +55,26 @@ class PanelMediaBrowser extends LitElement {
       <ha-app-layout>
         <app-header fixed slot="header">
           <app-toolbar>
-            <ha-menu-button
-              .hass=${this.hass}
-              .narrow=${this.narrow}
-            ></ha-menu-button>
+            ${this._navigateIds.length > 1
+              ? html`
+                  <ha-icon-button
+                    .path=${mdiArrowLeft}
+                    @click=${this._goBack}
+                  ></ha-icon-button>
+                `
+              : html`
+                  <ha-menu-button
+                    .hass=${this.hass}
+                    .narrow=${this.narrow}
+                  ></ha-menu-button>
+                `}
             <div main-title class="heading">
               <div>
-                ${this.hass.localize(
-                  "ui.components.media-browser.media-player-browser"
-                )}
+                ${!this._currentItem
+                  ? this.hass.localize(
+                      "ui.components.media-browser.media-player-browser"
+                    )
+                  : this._currentItem.title}
               </div>
             </div>
           </app-toolbar>
@@ -110,13 +129,19 @@ class PanelMediaBrowser extends LitElement {
         };
       }),
     ];
+    this._currentItem = undefined;
   }
 
-  private _mediaBrowsed(ev) {
-    if (ev.detail.back) {
-      history.back();
+  private _goBack() {
+    history.back();
+  }
+
+  private _mediaBrowsed(ev: { detail: HASSDomEvents["media-browsed"] }) {
+    if (ev.detail.ids === this._navigateIds) {
+      this._currentItem = ev.detail.current;
       return;
     }
+
     let path = "";
     for (const item of ev.detail.ids.slice(1)) {
       path +=
@@ -152,6 +177,7 @@ class PanelMediaBrowser extends LitElement {
         sourceUrl: resolvedUrl.url,
         sourceType: resolvedUrl.mime_type,
         title: item.title,
+        can_play: item.can_play,
       });
     }
   }

src/panels/media-browser/show-media-player-dialog.ts

@@ -4,6 +4,7 @@ export interface WebBrowserPlayMediaDialogParams {
   sourceUrl: string;
   sourceType: string;
   title?: string;
+  can_play?: boolean;
 }
 
 export const showWebBrowserPlayMediaDialog = (