Add a Grid/List toggle for Media Browser (#18256)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

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;