Media browser updates (#6801)

src/components/ha-dialog.ts

@@ -64,6 +64,7 @@ export class HaDialog extends MwcDialog {
         }
         .mdc-dialog .mdc-dialog__surface {
           position: var(--dialog-surface-position, relative);
+          top: var(--dialog-surface-top);
           min-height: var(--mdc-dialog-min-height, auto);
         }
         :host([flexContent]) .mdc-dialog .mdc-dialog__content {

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

@@ -43,7 +43,7 @@ class DialogMediaPlayerBrowse extends LitElement {
 
   public closeDialog() {
     this._params = undefined;
-    fireEvent(this, "dialog-closed", {dialog: this.localName});
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   protected render(): TemplateResult {
@@ -93,6 +93,9 @@ class DialogMediaPlayerBrowse extends LitElement {
         @media (min-width: 800px) {
           ha-dialog {
             --mdc-dialog-max-width: 800px;
+            --dialog-surface-position: fixed;
+            --dialog-surface-top: 40px;
+            --mdc-dialog-max-height: calc(100% - 72px);
           }
           ha-media-player-browse {
             width: 700px;

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

@@ -18,8 +18,10 @@ import {
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { ifDefined } from "lit-html/directives/if-defined";
+import { styleMap } from "lit-html/directives/style-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
+import { compare } from "../../common/string/compare";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
 import { debounce } from "../../common/util/debounce";
 import {
@@ -30,6 +32,7 @@ import {
   MediaPlayerBrowseAction,
 } from "../../data/media-player";
 import type { MediaPlayerItem } from "../../data/media-player";
+import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
@@ -130,7 +133,11 @@ export class HaMediaPlayerBrowse extends LitElement {
             ? html`
                 <div
                   class="img"
-                  style="background-image: url(${currentItem.thumbnail})"
+                  style=${styleMap({
+                    backgroundImage: currentItem.thumbnail
+                      ? `url(${currentItem.thumbnail})`
+                      : "none",
+                  })}
                 >
                   ${this._narrow && currentItem?.can_play
                     ? html`
@@ -218,12 +225,16 @@ export class HaMediaPlayerBrowse extends LitElement {
                     <div
                       class="child"
                       .item=${child}
-                      @click=${this._navigateForward}
+                      @click=${this._childClicked}
                     >
                       <div class="ha-card-parent">
                         <ha-card
                           outlined
-                          style="background-image: url(${child.thumbnail})"
+                          style=${styleMap({
+                            backgroundImage: child.thumbnail
+                              ? `url(${child.thumbnail})`
+                              : "none",
+                          })}
                         >
                           ${child.can_expand && !child.thumbnail
                             ? html`
@@ -333,6 +344,10 @@ export class HaMediaPlayerBrowse extends LitElement {
 
     this._fetchData(this.mediaContentId, this.mediaContentType).then(
       (itemData) => {
+        if (!itemData) {
+          return;
+        }
+
         this._mediaPlayerItems = [itemData];
       }
     );
@@ -349,13 +364,19 @@ export class HaMediaPlayerBrowse extends LitElement {
     fireEvent(this, "media-picked", { item });
   }
 
-  private async _navigateForward(ev: MouseEvent): Promise<void> {
+  private async _childClicked(ev: MouseEvent): Promise<void> {
     const target = ev.currentTarget as any;
     const item: MediaPlayerItem = target.item;
 
     if (!item) {
       return;
     }
+
+    if (!item.can_expand) {
+      this._runAction(item);
+      return;
+    }
+
     this._navigate(item);
   }
 
@@ -365,6 +386,10 @@ export class HaMediaPlayerBrowse extends LitElement {
       item.media_content_type
     );
 
+    if (!itemData) {
+      return;
+    }
+
     this.scrollTo(0, 0);
     this._mediaPlayerItems = [...this._mediaPlayerItems, itemData];
   }
@@ -372,16 +397,33 @@ export class HaMediaPlayerBrowse extends LitElement {
   private async _fetchData(
     mediaContentId?: string,
     mediaContentType?: string
-  ): Promise<MediaPlayerItem> {
+  ): Promise<MediaPlayerItem | undefined> {
-    const itemData =
+    let itemData: MediaPlayerItem | undefined;
-      this.entityId !== BROWSER_SOURCE
+    try {
-        ? await browseMediaPlayer(
+      itemData =
-            this.hass,
+        this.entityId !== BROWSER_SOURCE
-            this.entityId,
+          ? await browseMediaPlayer(
-            mediaContentId,
+              this.hass,
-            mediaContentType
+              this.entityId,
-          )
+              mediaContentId,
-        : await browseLocalMediaPlayer(this.hass, mediaContentId);
+              mediaContentType
+            )
+          : await browseLocalMediaPlayer(this.hass, mediaContentId);
+      itemData.children = itemData.children?.sort((first, second) =>
+        !first.can_expand && second.can_expand
+          ? 1
+          : first.can_expand && !second.can_expand
+          ? -1
+          : compare(first.title, second.title)
+      );
+    } catch (error) {
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.components.media-browser.media_browsing_error"
+        ),
+        text: error.message,
+      });
+    }
 
     return itemData;
   }
@@ -435,12 +477,6 @@ export class HaMediaPlayerBrowse extends LitElement {
           border-bottom: 1px solid var(--divider-color);
         }
 
-        .header_button {
-          position: relative;
-          top: 14px;
-          right: -8px;
-        }
-
         .header {
           background-color: var(--card-background-color);
           position: sticky;
@@ -539,9 +575,6 @@ export class HaMediaPlayerBrowse extends LitElement {
           );
           grid-gap: 16px;
           margin: 8px 0px;
-        }
-
-        :host(:not([narrow])) .children {
           padding: 0px 24px;
         }
 
@@ -683,8 +716,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           padding: 20px 24px 10px;
         }
 
-        :host([narrow]) .media-source,
+        :host([narrow]) .media-source {
-        :host([narrow]) .children {
           padding: 0 24px;
         }
 
@@ -703,8 +735,8 @@ export class HaMediaPlayerBrowse extends LitElement {
           -webkit-line-clamp: 1;
         }
 
-        :host(:not([narrow])[scroll]) .header-info {
+        :host(:not([narrow])[scroll]) .header:not(.no-img) mwc-icon-button {
-          height: 75px;
+          align-self: center;
         }
 
         :host([scroll]) .header-info mwc-button,

src/translations/en.json

@@ -365,6 +365,7 @@
         "audio_not_supported": "Your browser does not support the audio element.",
         "video_not_supported": "Your browser does not support the video element.",
         "media_not_supported": "The Browser Media Player does not support this type of media",
+        "media_browsing_error": "Media Browsing Error",
         "content-type": {
           "server": "Server",
           "library": "Library",