mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-18 23:06:40 +00:00
Bar media player fixes (#18402)
This commit is contained in:
parent
81053f2e07
commit
184ef7b7ff
@ -56,6 +56,7 @@ import {
|
||||
BrowserMediaPlayer,
|
||||
ERR_UNSUPPORTED_MEDIA,
|
||||
} from "./browser-media-player";
|
||||
import { debounce } from "../../common/util/debounce";
|
||||
|
||||
declare global {
|
||||
interface HASSDomEvents {
|
||||
@ -118,8 +119,14 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
|
||||
public showResolvingNewMediaPicked() {
|
||||
this._tearDownBrowserPlayer();
|
||||
this._newMediaExpected = true;
|
||||
// Sometimes the state does not update when playing media, like with TTS, so we wait max 2 secs and then stop waiting
|
||||
this._debouncedResetMediaExpected();
|
||||
}
|
||||
|
||||
private _debouncedResetMediaExpected = debounce(() => {
|
||||
this._newMediaExpected = false;
|
||||
}, 2000);
|
||||
|
||||
public hideResolvingNewMediaPicked() {
|
||||
this._newMediaExpected = false;
|
||||
}
|
||||
@ -154,7 +161,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
|
||||
protected render() {
|
||||
if (this._newMediaExpected) {
|
||||
return html`
|
||||
<div class="controls-progress">
|
||||
<div class="controls-progress buffering">
|
||||
${until(
|
||||
// Only show spinner after 500ms
|
||||
new Promise((resolve) => {
|
||||
@ -240,9 +247,13 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls-progress">
|
||||
<div
|
||||
class="controls-progress ${stateObj.state === "buffering"
|
||||
? "buffering"
|
||||
: ""}"
|
||||
>
|
||||
${stateObj.state === "buffering"
|
||||
? html` <ha-circular-progress active></ha-circular-progress> `
|
||||
? html`<ha-circular-progress active></ha-circular-progress>`
|
||||
: html`
|
||||
<div class="controls">
|
||||
${controls === undefined
|
||||
@ -541,7 +552,8 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
|
||||
return css`
|
||||
:host {
|
||||
display: flex;
|
||||
min-height: 100px;
|
||||
height: 100px;
|
||||
box-sizing: border-box;
|
||||
background: var(
|
||||
--ha-card-background,
|
||||
var(--card-background-color, white)
|
||||
@ -627,12 +639,11 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app img {
|
||||
max-height: 68px;
|
||||
height: 68px;
|
||||
margin: 16px 0 16px 16px;
|
||||
}
|
||||
|
||||
@ -641,8 +652,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
|
||||
}
|
||||
|
||||
:host([narrow]) {
|
||||
min-height: 56px;
|
||||
max-height: 56px;
|
||||
height: 57px;
|
||||
}
|
||||
|
||||
:host([narrow]) .controls-progress {
|
||||
@ -650,6 +660,10 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
|
||||
min-width: 48px;
|
||||
}
|
||||
|
||||
:host([narrow]) .controls-progress.buffering {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
:host([narrow]) .media-info {
|
||||
padding-left: 8px;
|
||||
}
|
||||
@ -672,16 +686,6 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
:host([narrow]) img {
|
||||
max-height: 56px;
|
||||
max-width: 56px;
|
||||
}
|
||||
|
||||
:host([narrow]) .blank-image {
|
||||
height: 56px;
|
||||
width: 56px;
|
||||
}
|
||||
|
||||
:host([narrow]) mwc-linear-progress {
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
|
@ -286,7 +286,7 @@ class PanelMediaBrowser extends LitElement {
|
||||
}
|
||||
|
||||
:host([narrow]) ha-media-player-browse {
|
||||
height: calc(100vh - (80px + var(--header-height)));
|
||||
height: calc(100vh - (57px + var(--header-height)));
|
||||
}
|
||||
|
||||
ha-bar-media-player {
|
||||
|
Loading…
x
Reference in New Issue
Block a user