Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a Grid/List toggle for Media Browser #18256

Merged
merged 4 commits into from
Nov 28, 2023
Merged

Add a Grid/List toggle for Media Browser #18256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e79d42d
Add a Grid/List toggle for Media Browser
karwosts Oct 16, 2023
4c7e4ee
add auto to selection list
karwosts Oct 24, 2023
8558c42
Improve list view
bramkragten Oct 25, 2023
682c91b
fix + add to dialog
bramkragten Nov 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 73 additions & 4 deletions src/components/media-player/dialog-media-player-browse.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 });
}

Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand All @@ -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;
Expand Down
74 changes: 46 additions & 28 deletions src/components/media-player/ha-media-player-browse.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import {
MediaClassBrowserSettings,
MediaPickedEvent,
MediaPlayerBrowseAction,
MediaPlayerLayoutType,
} from "../../data/media-player";
import { browseLocalMediaPlayer } from "../../data/media_source";
import { isTTSMediaSource } from "../../data/tts";
Expand Down Expand Up @@ -87,6 +88,8 @@ export class HaMediaPlayerBrowse extends LitElement {

@property() public action: MediaPlayerBrowseAction = "play";

@property() public preferredLayout: MediaPlayerLayoutType = "auto";

@property({ type: Boolean }) public dialog = false;

@property() public navigateIds!: MediaPlayerItemId[];
Expand Down Expand Up @@ -477,7 +480,9 @@ export class HaMediaPlayerBrowse extends LitElement {
)}
</div>
`
: childrenMediaClass.layout === "grid"
: this.preferredLayout === "grid" ||
(this.preferredLayout === "auto" &&
childrenMediaClass.layout === "grid")
? html`
<lit-virtualizer
scroller
Expand Down Expand Up @@ -569,11 +574,12 @@ export class HaMediaPlayerBrowse extends LitElement {
${child.thumbnail
? html`
<div
class="${["app", "directory"].includes(child.media_class)
? "centered-image"
: ""} ${isBrandUrl(child.thumbnail)
? "brand-image"
: ""} image"
class="${classMap({
"centered-image": ["app", "directory"].includes(
child.media_class
),
"brand-image": isBrandUrl(child.thumbnail),
})} image"
style="background-image: ${until(backgroundImage, "")}"
></div>
`
Expand Down Expand Up @@ -634,26 +640,37 @@ export class HaMediaPlayerBrowse extends LitElement {
.graphic=${mediaClass.show_list_images ? "medium" : "avatar"}
dir=${computeRTLDirection(this.hass)}
>
<div
class=${classMap({
graphic: true,
thumbnail: mediaClass.show_list_images === true,
})}
style="background-image: ${until(backgroundImage, "")}"
slot="graphic"
>
<ha-icon-button
class="play ${classMap({
show: !mediaClass.show_list_images || !child.thumbnail,
})}"
.item=${child}
.label=${this.hass.localize(
`ui.components.media-browser.${this.action}-media`
)}
.path=${this.action === "play" ? mdiPlay : mdiPlus}
@click=${this._actionClicked}
></ha-icon-button>
</div>
${backgroundImage === "none" && !child.can_play
? html`<ha-svg-icon
.path=${MediaClassBrowserSettings[
child.media_class === "directory"
? child.children_media_class || child.media_class
: child.media_class
].icon}
slot="graphic"
></ha-svg-icon>`
: html`<div
class=${classMap({
graphic: true,
thumbnail: mediaClass.show_list_images === true,
})}
style="background-image: ${until(backgroundImage, "")}"
slot="graphic"
>
${child.can_play
? html`<ha-icon-button
class="play ${classMap({
show: !mediaClass.show_list_images || !child.thumbnail,
})}"
.item=${child}
.label=${this.hass.localize(
`ui.components.media-browser.${this.action}-media`
)}
.path=${this.action === "play" ? mdiPlay : mdiPlus}
@click=${this._actionClicked}
></ha-icon-button>`
: nothing}
</div>`}
<span class="title">${child.title}</span>
</mwc-list-item>
`;
Expand Down Expand Up @@ -899,7 +916,6 @@ export class HaMediaPlayerBrowse extends LitElement {
overflow-y: auto;
box-sizing: border-box;
height: 100%;
position: relative;
}

/* HEADER */
Expand All @@ -913,7 +929,7 @@ export class HaMediaPlayerBrowse extends LitElement {
top: 0;
right: 0;
left: 0;
z-index: 5;
z-index: 3;
padding: 16px;
}
.header_button {
Expand Down Expand Up @@ -1154,6 +1170,8 @@ export class HaMediaPlayerBrowse extends LitElement {

mwc-list-item .graphic {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border-radius: 2px;
display: flex;
align-content: center;
Expand Down
20 changes: 15 additions & 5 deletions src/data/media-player.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,8 @@ export type MediaPlayerBrowseAction = "pick" | "play";

export const BROWSER_PLAYER = "browser";

export type MediaPlayerLayoutType = "grid" | "list" | "auto";

export type MediaClassBrowserSetting = {
icon: string;
thumbnail_ratio?: string;
Expand All @@ -117,12 +119,13 @@ export const MediaClassBrowserSettings: {
[type: string]: MediaClassBrowserSetting;
} = {
album: { icon: mdiAlbum, layout: "grid" },
app: { icon: mdiApplication, layout: "grid" },
app: { icon: mdiApplication, layout: "grid", show_list_images: true },
artist: { icon: mdiAccountMusic, layout: "grid", show_list_images: true },
channel: {
icon: mdiTelevisionClassic,
thumbnail_ratio: "portrait",
layout: "grid",
show_list_images: true,
},
composer: {
icon: mdiAccountMusicOutline,
Expand All @@ -139,22 +142,29 @@ export const MediaClassBrowserSettings: {
icon: mdiTelevisionClassic,
layout: "grid",
thumbnail_ratio: "portrait",
show_list_images: true,
},
game: {
icon: mdiGamepadVariant,
layout: "grid",
thumbnail_ratio: "portrait",
},
genre: { icon: mdiDramaMasks, layout: "grid", show_list_images: true },
image: { icon: mdiImage, layout: "grid" },
movie: { icon: mdiMovie, thumbnail_ratio: "portrait", layout: "grid" },
music: { icon: mdiMusic },
image: { icon: mdiImage, layout: "grid", show_list_images: true },
movie: {
icon: mdiMovie,
thumbnail_ratio: "portrait",
layout: "grid",
show_list_images: true,
},
music: { icon: mdiMusic, show_list_images: true },
playlist: { icon: mdiPlaylistMusic, layout: "grid", show_list_images: true },
podcast: { icon: mdiPodcast, layout: "grid" },
season: {
icon: mdiTelevisionClassic,
layout: "grid",
thumbnail_ratio: "portrait",
show_list_images: true,
},
track: { icon: mdiFileMusic },
tv_show: {
Expand All @@ -163,7 +173,7 @@ export const MediaClassBrowserSettings: {
thumbnail_ratio: "portrait",
},
url: { icon: mdiWeb },
video: { icon: mdiVideo, layout: "grid" },
video: { icon: mdiVideo, layout: "grid", show_list_images: true },
};

export interface MediaPickedEvent {
Expand Down
Loading
Loading