diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index 4459efb5b3..8c34add0e3 100644 --- a/src/components/ha-dialog.ts +++ b/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 { diff --git a/src/components/media-player/dialog-media-player-browse.ts b/src/components/media-player/dialog-media-player-browse.ts index 9f0c07436f..311536844f 100644 --- a/src/components/media-player/dialog-media-player-browse.ts +++ b/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; diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index 5b3d637812..df10572558 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/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`
${this._narrow && currentItem?.can_play ? html` @@ -218,12 +225,16 @@ export class HaMediaPlayerBrowse extends LitElement {
${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 { + private async _childClicked(ev: MouseEvent): Promise { 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 { - const itemData = - this.entityId !== BROWSER_SOURCE - ? await browseMediaPlayer( - this.hass, - this.entityId, - mediaContentId, - mediaContentType - ) - : await browseLocalMediaPlayer(this.hass, mediaContentId); + ): Promise { + let itemData: MediaPlayerItem | undefined; + try { + itemData = + this.entityId !== BROWSER_SOURCE + ? await browseMediaPlayer( + this.hass, + this.entityId, + 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]) .children { + :host([narrow]) .media-source { padding: 0 24px; } @@ -703,8 +735,8 @@ export class HaMediaPlayerBrowse extends LitElement { -webkit-line-clamp: 1; } - :host(:not([narrow])[scroll]) .header-info { - height: 75px; + :host(:not([narrow])[scroll]) .header:not(.no-img) mwc-icon-button { + align-self: center; } :host([scroll]) .header-info mwc-button, diff --git a/src/translations/en.json b/src/translations/en.json index 436dd97a9e..cd234428f5 100755 --- a/src/translations/en.json +++ b/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",