Skip to content

Handle media browser errors #6813

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

Merged
bramkragten merged 4 commits into from
Sep 7, 2020
Merged

Handle media browser errors #6813

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
0514033
Handle media browser errors
bramkragten Sep 7, 2020
9236fb3
Update src/components/media-player/ha-media-player-browse.ts
bramkragten Sep 7, 2020
35535c3
Change back to dialog when not root element errors
bramkragten Sep 7, 2020
530cb80
Update error message
bramkragten Sep 7, 2020
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
143 changes: 103 additions & 40 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 @@ -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;
Expand All @@ -92,11 +94,55 @@ export class HaMediaPlayerBrowse extends LitElement {
this._navigate(item);
}

private _renderError(err: { message: string; code: string }) {
if (err.message === "Media directory does not exist.") {
return html`
<h2>No local media found.</h2>
<p>
It looks like you have not yet created a media directory.
<br />Create a directory with the name <b>"media"</b> in the
configuration directory of Home Assistant
(${this.hass.config.config_dir}). <br />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.
</p>

<p>
Check the
<a
href="https://www.home-assistant.io/integrations/media_source/#local-media"
Copy link
Copy Markdown
Member

@ludeeus ludeeus Sep 7, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we use the RC site if the version contains a "b" here?
This will go to a non-exsisting site during the beta

Copy link
Copy Markdown
Member

@balloob balloob Sep 7, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we do that, we should get a helper method and apply that everywhere. I think it's fine for now.

target="_blank"
rel="noreferrer"
>documentation</a
>
for more info
</p>
`;
}
return err.message;
}

protected render(): TemplateResult {
if (this._loading) {
return html`<ha-circular-progress active></ha-circular-progress>`;
}

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`<div class="container error">
${this._renderError(this._error)}
</div>`;
}
}

if (!this._mediaPlayerItems.length) {
return html``;
}
Expand Down Expand Up @@ -216,7 +262,11 @@ export class HaMediaPlayerBrowse extends LitElement {
`
: ""}
</div>
${currentItem.children?.length
${this._error
? html`<div class="container error">
${this._renderError(this._error)}
</div>`
: currentItem.children?.length
? hasExpandableChildren
? html`
<div class="children">
Expand Down Expand Up @@ -316,7 +366,9 @@ export class HaMediaPlayerBrowse extends LitElement {
)}
</mwc-list>
`
: this.hass.localize("ui.components.media-browser.no_items")}
: html`<div class="container">
${this.hass.localize("ui.components.media-browser.no_items")}
</div>`}
`;
}

Expand All @@ -342,15 +394,22 @@ export class HaMediaPlayerBrowse extends LitElement {
return;
}

this._fetchData(this.mediaContentId, this.mediaContentType).then(
(itemData) => {
if (changedProps.has("entityId")) {
this._error = undefined;
this._mediaPlayerItems = [];
}

this._fetchData(this.mediaContentId, this.mediaContentType)
.then((itemData) => {
if (!itemData) {
return;
}

this._mediaPlayerItems = [itemData];
}
);
})
.catch((err) => {
this._error = err;
});
}

private _actionClicked(ev: MouseEvent): void {
Expand Down Expand Up @@ -381,12 +440,22 @@ export class HaMediaPlayerBrowse extends LitElement {
}

private async _navigate(item: MediaPlayerItem) {
const itemData = await this._fetchData(
item.media_content_id,
item.media_content_type
);
this._error = undefined;

let itemData: MediaPlayerItem;

if (!itemData) {
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;
}

Expand All @@ -397,33 +466,23 @@ export class HaMediaPlayerBrowse extends LitElement {
private async _fetchData(
mediaContentId?: string,
mediaContentType?: string
): Promise<MediaPlayerItem | undefined> {
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,
});
}
): Promise<MediaPlayerItem> {
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;
}
Expand Down Expand Up @@ -451,8 +510,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 {
Expand All @@ -471,6 +530,10 @@ export class HaMediaPlayerBrowse extends LitElement {
flex-direction: column;
}

.container {
padding: 16px;
}

.header {
display: flex;
justify-content: space-between;
Expand Down
8 changes: 4 additions & 4 deletions src/dialogs/generic/dialog-box.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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();
}
Expand Down