fix + add to dialog

home-assistant · Nov 28, 2023 · 682c91b · 682c91b
1 parent 8558c42
commit 682c91b
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 78 deletions.
diff --git a/src/components/media-player/dialog-media-player-browse.ts b/src/components/media-player/dialog-media-player-browse.ts
@@ -1,11 +1,20 @@
-import { mdiArrowLeft, mdiClose } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { ActionDetail } from "@material/mwc-list";
+import {
+  mdiAlphaABoxOutline,
+  mdiArrowLeft,
+  mdiClose,
+  mdiDotsVertical,
+  mdiGrid,
+  mdiListBoxOutline,
+} from "@mdi/js";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
+import { HASSDomEvent, fireEvent } from "../../common/dom/fire_event";
 import type {
   MediaPickedEvent,
   MediaPlayerBrowseAction,
   MediaPlayerItem,
+  MediaPlayerLayoutType,
 } from "../../data/media-player";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
@@ -18,6 +27,7 @@ import type {
   MediaPlayerItemId,
 } from "./ha-media-player-browse";
 import { MediaPlayerBrowseDialogParams } from "./show-media-browser-dialog";
+import { stopPropagation } from "../../common/dom/stop_propagation";
 
 @customElement("dialog-media-player-browse")
 class DialogMediaPlayerBrowse extends LitElement {
@@ -29,6 +39,8 @@ class DialogMediaPlayerBrowse extends LitElement {
 
   @state() private _params?: MediaPlayerBrowseDialogParams;
 
+  @state() _preferredLayout: MediaPlayerLayoutType = "auto";
+
   @query("ha-media-player-browse") private _browser!: HaMediaPlayerBrowse;
 
   public showDialog(params: MediaPlayerBrowseDialogParams): void {
@@ -45,6 +57,7 @@ class DialogMediaPlayerBrowse extends LitElement {
     this._params = undefined;
     this._navigateIds = undefined;
     this._currentItem = undefined;
+    this._preferredLayout = "auto";
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -84,13 +97,54 @@ class DialogMediaPlayerBrowse extends LitElement {
                 )
               : this._currentItem.title}
           </span>
-
           <ha-media-manage-button
             slot="actionItems"
             .hass=${this.hass}
             .currentItem=${this._currentItem}
             @media-refresh=${this._refreshMedia}
           ></ha-media-manage-button>
+          <ha-button-menu
+            slot="actionItems"
+            @action=${this._handleMenuAction}
+            @closed=${stopPropagation}
+            fixed
+          >
+            <ha-icon-button
+              slot="trigger"
+              .label=${this.hass.localize("ui.common.menu")}
+              .path=${mdiDotsVertical}
+            ></ha-icon-button>
+            <mwc-list-item graphic="icon">
+              ${this.hass.localize("ui.components.media-browser.auto")}
+              <ha-svg-icon
+                class=${this._preferredLayout === "auto"
+                  ? "selected_menu_item"
+                  : ""}
+                slot="graphic"
+                .path=${mdiAlphaABoxOutline}
+              ></ha-svg-icon>
+            </mwc-list-item>
+            <mwc-list-item graphic="icon">
+              ${this.hass.localize("ui.components.media-browser.grid")}
+              <ha-svg-icon
+                class=${this._preferredLayout === "grid"
+                  ? "selected_menu_item"
+                  : ""}
+                slot="graphic"
+                .path=${mdiGrid}
+              ></ha-svg-icon>
+            </mwc-list-item>
+            <mwc-list-item graphic="icon">
+              ${this.hass.localize("ui.components.media-browser.list")}
+              <ha-svg-icon
+                slot="graphic"
+                class=${this._preferredLayout === "list"
+                  ? "selected_menu_item"
+                  : ""}
+                .path=${mdiListBoxOutline}
+              ></ha-svg-icon>
+            </mwc-list-item>
+          </ha-button-menu>
           <ha-icon-button
             .label=${this.hass.localize("ui.dialogs.generic.close")}
             .path=${mdiClose}
@@ -104,6 +158,7 @@ class DialogMediaPlayerBrowse extends LitElement {
           .entityId=${this._params.entityId}
           .navigateIds=${this._navigateIds}
           .action=${this._action}
+          .preferredLayout=${this._preferredLayout}
           @close-dialog=${this.closeDialog}
           @media-picked=${this._mediaPicked}
           @media-browsed=${this._mediaBrowsed}
@@ -112,6 +167,20 @@ class DialogMediaPlayerBrowse extends LitElement {
     `;
   }
 
+  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        this._preferredLayout = "auto";
+        break;
+      case 1:
+        this._preferredLayout = "grid";
+        break;
+      case 2:
+        this._preferredLayout = "list";
+        break;
+    }
+  }
+
   private _goBack() {
     this._navigateIds = this._navigateIds?.slice(0, -1);
     this._currentItem = undefined;

diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts
@@ -448,76 +448,41 @@ export class HaMediaPlayerBrowse extends LitElement {
                     </div>
                   `
                 : isTTSMediaSource(currentItem.media_content_id)
-                ? html`
-                    <ha-browse-media-tts
-                      .item=${currentItem}
-                      .hass=${this.hass}
-                      .action=${this.action}
-                      @tts-picked=${this._ttsPicked}
-                    ></ha-browse-media-tts>
-                  `
-                : !children.length && !currentItem.not_shown
-                ? html`
-                    <div class="container no-items">
-                      ${currentItem.media_content_id ===
-                      "media-source://media_source/local/."
-                        ? html`
-                            <div class="highlight-add-button">
-                              <span>
-                                <ha-svg-icon
-                                  .path=${mdiArrowUpRight}
-                                ></ha-svg-icon>
-                              </span>
-                              <span>
-                                ${this.hass.localize(
-                                  "ui.components.media-browser.file_management.highlight_button"
-                                )}
-                              </span>
-                            </div>
-                          `
-                        : this.hass.localize(
-                            "ui.components.media-browser.no_items"
-                          )}
-                    </div>
-                  `
-                : this.preferredLayout === "grid" ||
-                  (this.preferredLayout === "auto" &&
-                    childrenMediaClass.layout === "grid")
-                ? html`
-                    <lit-virtualizer
-                      scroller
-                      .layout=${grid({
-                        itemSize: {
-                          width: "175px",
-                          height:
-                            childrenMediaClass.thumbnail_ratio === "portrait"
-                              ? "312px"
-                              : "225px",
-                        },
-                        gap: "16px",
-                        flex: { preserve: "aspect-ratio" },
-                        justify: "space-evenly",
-                        direction: "vertical",
-                      })}
-                      .items=${children}
-                      .renderItem=${this._renderGridItem}
-                      class="children ${classMap({
-                        portrait:
-                          childrenMediaClass.thumbnail_ratio === "portrait",
-                        not_shown: !!currentItem.not_shown,
-                      })}"
-                    ></lit-virtualizer>
-                    ${currentItem.not_shown
-                      ? html`
-                          <div class="grid not-shown">
-                            <div class="title">
-                              ${this.hass.localize(
-                                "ui.components.media-browser.not_shown",
-                                { count: currentItem.not_shown }
+                  ? html`
+                      <ha-browse-media-tts
+                        .item=${currentItem}
+                        .hass=${this.hass}
+                        .action=${this.action}
+                        @tts-picked=${this._ttsPicked}
+                      ></ha-browse-media-tts>
+                    `
+                  : !children.length && !currentItem.not_shown
+                    ? html`
+                        <div class="container no-items">
+                          ${currentItem.media_content_id ===
+                          "media-source://media_source/local/."
+                            ? html`
+                                <div class="highlight-add-button">
+                                  <span>
+                                    <ha-svg-icon
+                                      .path=${mdiArrowUpRight}
+                                    ></ha-svg-icon>
+                                  </span>
+                                  <span>
+                                    ${this.hass.localize(
+                                      "ui.components.media-browser.file_management.highlight_button"
+                                    )}
+                                  </span>
+                                </div>
+                              `
+                            : this.hass.localize(
+                                "ui.components.media-browser.no_items"
                               )}
                         </div>
                       `
-                    : childrenMediaClass.layout === "grid"
+                    : this.preferredLayout === "grid" ||
+                        (this.preferredLayout === "auto" &&
+                          childrenMediaClass.layout === "grid")
                       ? html`
                           <lit-virtualizer
                             scroller
@@ -951,7 +916,6 @@ export class HaMediaPlayerBrowse extends LitElement {
           overflow-y: auto;
           box-sizing: border-box;
           height: 100%;
-          position: relative;
         }
 
         /* HEADER */

diff --git a/src/panels/media-browser/ha-panel-media-browser.ts b/src/panels/media-browser/ha-panel-media-browser.ts
@@ -117,6 +117,12 @@ class PanelMediaBrowser extends LitElement {
               )
             : this._currentItem.title}
         </div>
+        <ha-media-manage-button
+          slot="actionItems"
+          .hass=${this.hass}
+          .currentItem=${this._currentItem}
+          @media-refresh=${this._refreshMedia}
+        ></ha-media-manage-button>
         <ha-button-menu slot="actionItems" @action=${this._handleMenuAction}>
           <ha-icon-button
             slot="trigger"
@@ -154,12 +160,6 @@ class PanelMediaBrowser extends LitElement {
             ></ha-svg-icon>
           </mwc-list-item>
         </ha-button-menu>
-        <ha-media-manage-button
-          slot="actionItems"
-          .hass=${this.hass}
-          .currentItem=${this._currentItem}
-          @media-refresh=${this._refreshMedia}
-        ></ha-media-manage-button>
         <ha-media-player-browse
           .hass=${this.hass}
           .entityId=${this._entityId}