From 051403361291a885efce943b7244ee5ec20935db Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 7 Sep 2020 13:36:54 +0200 Subject: [PATCH 1/4] Handle media browser errors --- .../media-player/ha-media-player-browse.ts | 93 +++++++++++++++---- src/dialogs/generic/dialog-box.ts | 8 +- 2 files changed, 81 insertions(+), 20 deletions(-) diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index df10572558a8..df939ec19e56 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/src/components/media-player/ha-media-player-browse.ts @@ -68,6 +68,8 @@ export class HaMediaPlayerBrowse extends LitElement { @internalProperty() private _loading = false; + @internalProperty() private _error?: { message: string; code: string }; + @internalProperty() private _mediaPlayerItems: MediaPlayerItem[] = []; private _resizeObserver?: ResizeObserver; @@ -92,11 +94,54 @@ export class HaMediaPlayerBrowse extends LitElement { this._navigate(item); } + private _renderError(err: { message: string; code: string }) { + if (err.message === "Path does not exist.") { + return html` +

No local media found.

+

+ It looks like you have not yet created a media directory. +
Create a directory with the name "media" in the + configuration directory of Home Assistant.
Place your video, + audio and image files in this directory to be able to browse and play + them in the browser or on supported media players. +

+ +

+ Check the + documentation + for more info +

+ `; + } + return err.message; + } + protected render(): TemplateResult { if (this._loading) { return html``; } + if (this._error && !this._mediaPlayerItems.length) { + if (this.dialog) { + this._closeDialogAction(); + showAlertDialog(this, { + title: this.hass.localize( + "ui.components.media-browser.media_browsing_error" + ), + text: this._renderError(this._error), + }); + } else { + return html`
+ ${this._renderError(this._error)} +
`; + } + } + if (!this._mediaPlayerItems.length) { return html``; } @@ -216,7 +261,11 @@ export class HaMediaPlayerBrowse extends LitElement { ` : ""} - ${currentItem.children?.length + ${this._error + ? html`
+ ${this._renderError(this._error)} +
` + : currentItem.children?.length ? hasExpandableChildren ? html`
@@ -316,7 +365,9 @@ export class HaMediaPlayerBrowse extends LitElement { )} ` - : this.hass.localize("ui.components.media-browser.no_items")} + : html`
+ ${this.hass.localize("ui.components.media-browser.no_items")} +
`} `; } @@ -342,6 +393,11 @@ export class HaMediaPlayerBrowse extends LitElement { return; } + if (changedProps.has("entityId")) { + this._error = undefined; + this._mediaPlayerItems = []; + } + this._fetchData(this.mediaContentId, this.mediaContentType).then( (itemData) => { if (!itemData) { @@ -381,14 +437,20 @@ export class HaMediaPlayerBrowse extends LitElement { } private async _navigate(item: MediaPlayerItem) { - const itemData = await this._fetchData( + this._error = undefined; + + const itemData = (await this._fetchData( item.media_content_id, item.media_content_type - ); - - if (!itemData) { - return; - } + )) || { + title: this.hass.localize( + "ui.components.media-browser.media_browsing_error" + ), + can_expand: false, + can_play: false, + media_content_type: "", + media_content_id: "", + }; this.scrollTo(0, 0); this._mediaPlayerItems = [...this._mediaPlayerItems, itemData]; @@ -417,12 +479,7 @@ export class HaMediaPlayerBrowse extends LitElement { : compare(first.title, second.title) ); } catch (error) { - showAlertDialog(this, { - title: this.hass.localize( - "ui.components.media-browser.media_browsing_error" - ), - text: error.message, - }); + this._error = error; } return itemData; @@ -451,8 +508,8 @@ export class HaMediaPlayerBrowse extends LitElement { this._resizeObserver.observe(this); } - private _hasExpandableChildren = memoizeOne((children) => - children.find((item: MediaPlayerItem) => item.can_expand) + private _hasExpandableChildren = memoizeOne((children?: MediaPlayerItem[]) => + children?.find((item: MediaPlayerItem) => item.can_expand) ); private _closeDialogAction(): void { @@ -471,6 +528,10 @@ export class HaMediaPlayerBrowse extends LitElement { flex-direction: column; } + .container { + padding: 16px; + } + .header { display: flex; justify-content: space-between; diff --git a/src/dialogs/generic/dialog-box.ts b/src/dialogs/generic/dialog-box.ts index b8fcea9a706b..7d63d3dd5322 100644 --- a/src/dialogs/generic/dialog-box.ts +++ b/src/dialogs/generic/dialog-box.ts @@ -5,19 +5,19 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; +import { fireEvent } from "../../common/dom/fire_event"; import "../../components/ha-dialog"; import "../../components/ha-switch"; import { PolymerChangedEvent } from "../../polymer-types"; import { haStyleDialog } from "../../resources/styles"; import { HomeAssistant } from "../../types"; import { DialogParams } from "./show-dialog-box"; -import { fireEvent } from "../../common/dom/fire_event"; @customElement("dialog-box") class DialogBox extends LitElement { @@ -114,8 +114,8 @@ class DialogBox extends LitElement { } private _dismiss(): void { - if (this._params!.cancel) { - this._params!.cancel(); + if (this._params?.cancel) { + this._params.cancel(); } this._close(); } From 9236fb3b8bfd1198a9673ee6874f45156995a48d Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 7 Sep 2020 13:47:52 +0200 Subject: [PATCH 2/4] Update src/components/media-player/ha-media-player-browse.ts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Joakim Sørensen --- src/components/media-player/ha-media-player-browse.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index df939ec19e56..a49f0e2291da 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/src/components/media-player/ha-media-player-browse.ts @@ -101,7 +101,7 @@ export class HaMediaPlayerBrowse extends LitElement {

It looks like you have not yet created a media directory.
Create a directory with the name "media" in the - configuration directory of Home Assistant.
Place your video, + configuration directory of Home Assistant (${this.hass.config.config_dir}).
Place your video, audio and image files in this directory to be able to browse and play them in the browser or on supported media players.

From 35535c3e5170ed7eca362589bcb3f28726850a1a Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 7 Sep 2020 19:48:19 +0200 Subject: [PATCH 3/4] Change back to dialog when not root element errors --- .../media-player/ha-media-player-browse.ts | 84 ++++++++++--------- 1 file changed, 43 insertions(+), 41 deletions(-) diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index a49f0e2291da..309638746870 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/src/components/media-player/ha-media-player-browse.ts @@ -101,9 +101,10 @@ export class HaMediaPlayerBrowse extends LitElement {

It looks like you have not yet created a media directory.
Create a directory with the name "media" in the - configuration directory of Home Assistant (${this.hass.config.config_dir}).
Place your video, - audio and image files in this directory to be able to browse and play - them in the browser or on supported media players. + configuration directory of Home Assistant + (${this.hass.config.config_dir}).
Place your video, audio and + image files in this directory to be able to browse and play them in + the browser or on supported media players.

@@ -398,15 +399,17 @@ export class HaMediaPlayerBrowse extends LitElement { this._mediaPlayerItems = []; } - this._fetchData(this.mediaContentId, this.mediaContentType).then( - (itemData) => { + this._fetchData(this.mediaContentId, this.mediaContentType) + .then((itemData) => { if (!itemData) { return; } this._mediaPlayerItems = [itemData]; - } - ); + }) + .catch((err) => { + this._error = err; + }); } private _actionClicked(ev: MouseEvent): void { @@ -439,18 +442,22 @@ export class HaMediaPlayerBrowse extends LitElement { private async _navigate(item: MediaPlayerItem) { this._error = undefined; - const itemData = (await this._fetchData( - item.media_content_id, - item.media_content_type - )) || { - title: this.hass.localize( - "ui.components.media-browser.media_browsing_error" - ), - can_expand: false, - can_play: false, - media_content_type: "", - media_content_id: "", - }; + let itemData: MediaPlayerItem; + + try { + itemData = await this._fetchData( + item.media_content_id, + item.media_content_type + ); + } catch (err) { + showAlertDialog(this, { + title: this.hass.localize( + "ui.components.media-browser.media_browsing_error" + ), + text: this._renderError(err), + }); + return; + } this.scrollTo(0, 0); this._mediaPlayerItems = [...this._mediaPlayerItems, itemData]; @@ -459,28 +466,23 @@ export class HaMediaPlayerBrowse extends LitElement { private async _fetchData( mediaContentId?: string, mediaContentType?: string - ): 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) { - this._error = error; - } + ): Promise { + const 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) + ); return itemData; } From 530cb80c1b36b5ae46248f4755ca1cee4c335a8c Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 7 Sep 2020 20:06:55 +0200 Subject: [PATCH 4/4] Update error message --- src/components/media-player/ha-media-player-browse.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index 309638746870..8f54e1204c4f 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/src/components/media-player/ha-media-player-browse.ts @@ -95,7 +95,7 @@ export class HaMediaPlayerBrowse extends LitElement { } private _renderError(err: { message: string; code: string }) { - if (err.message === "Path does not exist.") { + if (err.message === "Media directory does not exist.") { return html`

No local media found.