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.

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

Try to keep the browsing stack when changing players in media panel #11681

Merged
merged 2 commits into from
Feb 14, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
54 changes: 41 additions & 13 deletions src/components/media-player/ha-media-player-browse.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,14 @@ import { browseLocalMediaPlayer } from "../../data/media_source";
declare global {
interface HASSDomEvents {
"media-picked": MediaPickedEvent;
"media-browsed": { ids: MediaPlayerItemId[]; current?: MediaPlayerItem };
"media-browsed": {
// Items of the new browse stack
ids: MediaPlayerItemId[];
// Current fetched item for this browse stack
current?: MediaPlayerItem;
// If the new stack should replace the old stack
replace?: boolean;
};
}
}

Expand Down Expand Up @@ -425,8 +432,8 @@ export class HaMediaPlayerBrowse extends LitElement {

if (changedProps.has("entityId")) {
this._setError(undefined);
}
if (!changedProps.has("navigateIds")) {
} else if (!changedProps.has("navigateIds")) {
// Neither entity ID or navigateIDs changed, nothing to fetch
return;
}

Expand All @@ -435,6 +442,7 @@ export class HaMediaPlayerBrowse extends LitElement {
const oldNavigateIds = changedProps.get("navigateIds") as
| this["navigateIds"]
| undefined;
const navigateIds = this.navigateIds;

// We're navigating. Reset the shizzle.
this._content?.scrollTo(0, 0);
Expand All @@ -443,11 +451,9 @@ export class HaMediaPlayerBrowse extends LitElement {
const oldParentItem = this._parentItem;
this._currentItem = undefined;
this._parentItem = undefined;
const currentId = this.navigateIds[this.navigateIds.length - 1];
const currentId = navigateIds[navigateIds.length - 1];
const parentId =
this.navigateIds.length > 1
? this.navigateIds[this.navigateIds.length - 2]
: undefined;
navigateIds.length > 1 ? navigateIds[navigateIds.length - 2] : undefined;
let currentProm: Promise<MediaPlayerItem> | undefined;
let parentProm: Promise<MediaPlayerItem> | undefined;

Expand All @@ -456,9 +462,9 @@ export class HaMediaPlayerBrowse extends LitElement {
if (
// Check if we navigated to a child
oldNavigateIds &&
this.navigateIds.length > oldNavigateIds.length &&
navigateIds.length === oldNavigateIds.length + 1 &&
oldNavigateIds.every((oldVal, idx) => {
const curVal = this.navigateIds[idx];
const curVal = navigateIds[idx];
return (
curVal.media_content_id === oldVal.media_content_id &&
curVal.media_content_type === oldVal.media_content_type
Expand All @@ -469,8 +475,8 @@ export class HaMediaPlayerBrowse extends LitElement {
} else if (
// Check if we navigated to a parent
oldNavigateIds &&
this.navigateIds.length < oldNavigateIds.length &&
this.navigateIds.every((curVal, idx) => {
navigateIds.length === oldNavigateIds.length - 1 &&
navigateIds.every((curVal, idx) => {
const oldVal = oldNavigateIds[idx];
return (
curVal.media_content_id === oldVal.media_content_id &&
Expand All @@ -493,11 +499,33 @@ export class HaMediaPlayerBrowse extends LitElement {
(item) => {
this._currentItem = item;
fireEvent(this, "media-browsed", {
ids: this.navigateIds,
ids: navigateIds,
current: item,
});
},
(err) => this._setError(err)
(err) => {
// When we change entity ID, we will first try to see if the new entity is
// able to resolve the new path. If that results in an error, browse the root.
const isNewEntityWithSamePath =
oldNavigateIds &&
changedProps.has("entityId") &&
navigateIds.length === oldNavigateIds.length &&
oldNavigateIds.every(
(oldItem, idx) =>
navigateIds[idx].media_content_id === oldItem.media_content_id &&
navigateIds[idx].media_content_type === oldItem.media_content_type
);
if (isNewEntityWithSamePath) {
fireEvent(this, "media-browsed", {
ids: [
{ media_content_id: undefined, media_content_type: undefined },
],
replace: true,
});
} else {
this._setError(err);
}
}
);
// Fetch parent
if (!parentProm && parentId !== undefined) {
Expand Down
9 changes: 7 additions & 2 deletions src/panels/media-browser/ha-bar-media-player.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import { computeStateDomain } from "../../common/entity/compute_state_domain";
import { computeStateName } from "../../common/entity/compute_state_name";
import { domainIcon } from "../../common/entity/domain_icon";
import { supportsFeature } from "../../common/entity/supports-feature";
import { navigate } from "../../common/navigate";
import "../../components/ha-button-menu";
import "../../components/ha-icon-button";
import { UNAVAILABLE_STATES } from "../../data/entity";
Expand All @@ -47,6 +46,12 @@ import type { HomeAssistant } from "../../types";
import "../lovelace/components/hui-marquee";
import { BrowserMediaPlayer } from "./browser-media-player";

declare global {
interface HASSDomEvents {
"player-picked": { entityId: string };
}
}

@customElement("ha-bar-media-player")
class BarMediaPlayer extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
Expand Down Expand Up @@ -399,7 +404,7 @@ class BarMediaPlayer extends LitElement {

private _selectPlayer(ev: CustomEvent): void {
const entityId = (ev.currentTarget as any).player;
navigate(`/media-browser/${entityId}`, { replace: true });
fireEvent(this, "player-picked", { entityId });
}

static get styles(): CSSResultGroup {
Expand Down
35 changes: 25 additions & 10 deletions src/panels/media-browser/ha-panel-media-browser.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,16 @@ import {
isCameraMediaSource,
} from "../../data/camera";

const createMediaPanelUrl = (entityId: string, items: MediaPlayerItemId[]) => {
let path = `/media-browser/${entityId}`;
for (const item of items.slice(1)) {
path +=
"/" +
encodeURIComponent(`${item.media_content_type},${item.media_content_id}`);
}
return path;
};

@customElement("ha-panel-media-browser")
class PanelMediaBrowser extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
Expand Down Expand Up @@ -120,6 +130,7 @@ class PanelMediaBrowser extends LitElement {
.hass=${this.hass}
.entityId=${this._entityId}
.narrow=${this.narrow}
@player-picked=${this._playerPicked}
></ha-bar-media-player>
`;
}
Expand Down Expand Up @@ -179,7 +190,9 @@ class PanelMediaBrowser extends LitElement {
}

private _goBack() {
history.back();
navigate(
createMediaPanelUrl(this._entityId, this._navigateIds.slice(0, -1))
);
}

private _mediaBrowsed(ev: { detail: HASSDomEvents["media-browsed"] }) {
Expand All @@ -188,15 +201,9 @@ class PanelMediaBrowser extends LitElement {
return;
}

let path = "";
for (const item of ev.detail.ids.slice(1)) {
path +=
"/" +
encodeURIComponent(
`${item.media_content_type},${item.media_content_id}`
);
}
navigate(`/media-browser/${this._entityId}${path}`);
navigate(createMediaPanelUrl(this._entityId, ev.detail.ids), {
replace: ev.detail.replace,
});
}

private async _mediaPicked(
Expand Down Expand Up @@ -239,6 +246,14 @@ class PanelMediaBrowser extends LitElement {
});
}

private _playerPicked(ev) {
const entityId: string = ev.detail.entityId;
if (entityId === this._entityId) {
return;
}
navigate(createMediaPanelUrl(entityId, this._navigateIds));
}

private async _startUpload() {
const input = document.createElement("input");
input.type = "file";
Expand Down