Force media player browser dialog re-layout after open animation (#18910)

This commit is contained in:
Bram Kragten 2023-12-06 14:14:14 +01:00 committed by GitHub
parent b4ab0fc10b
commit 1330558819
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -58,6 +58,7 @@ class DialogMediaPlayerBrowse extends LitElement {
this._navigateIds = undefined; this._navigateIds = undefined;
this._currentItem = undefined; this._currentItem = undefined;
this._preferredLayout = "auto"; this._preferredLayout = "auto";
this.classList.remove("opened");
fireEvent(this, "dialog-closed", { dialog: this.localName }); fireEvent(this, "dialog-closed", { dialog: this.localName });
} }
@ -79,6 +80,7 @@ class DialogMediaPlayerBrowse extends LitElement {
) )
: this._currentItem.title} : this._currentItem.title}
@closed=${this.closeDialog} @closed=${this.closeDialog}
@opened=${this._dialogOpened}
> >
<ha-dialog-header show-border slot="heading"> <ha-dialog-header show-border slot="heading">
${this._navigateIds.length > 1 ${this._navigateIds.length > 1
@ -167,6 +169,10 @@ class DialogMediaPlayerBrowse extends LitElement {
`; `;
} }
private _dialogOpened() {
this.classList.add("opened");
}
private async _handleMenuAction(ev: CustomEvent<ActionDetail>) { private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
switch (ev.detail.index) { switch (ev.detail.index) {
case 0: case 0:
@ -217,10 +223,13 @@ class DialogMediaPlayerBrowse extends LitElement {
ha-media-player-browse { ha-media-player-browse {
--media-browser-max-height: calc(100vh - 65px); --media-browser-max-height: calc(100vh - 65px);
height: calc(100vh - 65px);
direction: ltr; direction: ltr;
} }
:host(.opened) ha-media-player-browse {
height: calc(100vh - 65px);
}
@media (min-width: 800px) { @media (min-width: 800px) {
ha-dialog { ha-dialog {
--mdc-dialog-max-width: 800px; --mdc-dialog-max-width: 800px;
@ -231,7 +240,6 @@ class DialogMediaPlayerBrowse extends LitElement {
ha-media-player-browse { ha-media-player-browse {
position: initial; position: initial;
--media-browser-max-height: 100vh - 137px; --media-browser-max-height: 100vh - 137px;
height: 100vh - 137px;
width: 700px; width: 700px;
} }
} }