Bar media player fixes (#18402)

src/panels/media-browser/ha-bar-media-player.ts

@@ -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,7 +247,11 @@ 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`
@@ -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;
+        height: 100%;
-        max-width: 100px;
       }
 
       .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;
+        height: 57px;
-        max-height: 56px;
       }
 
       :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;

src/panels/media-browser/ha-panel-media-browser.ts

@@ -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 {