From 814fcf63a888b33046ed2664a9bee840e2cedec1 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Sun, 8 Mar 2020 09:42:59 -0700
Subject: [PATCH] Fix cardHeight (#5102)

* Fix cardHeight

* Opacity instead of changing DOM

* Better fix

* Remove guard we don't need
---
 src/components/ha-card.ts                     |  8 ++++-
 .../lovelace/cards/hui-media-control-card.ts  | 32 ++++++++++---------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts
index ace68a84f3..ed604332ab 100644
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@@ -5,8 +5,10 @@ import {
   LitElement,
   property,
   TemplateResult,
+  customElement,
 } from "lit-element";
 
+@customElement("ha-card")
 class HaCard extends LitElement {
   @property() public header?: string;
 
@@ -70,4 +72,8 @@ class HaCard extends LitElement {
   }
 }
 
-customElements.define("ha-card", HaCard);
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-card": HaCard;
+  }
+}
diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts
index c1ec87123b..5f90390161 100644
--- a/src/panels/lovelace/cards/hui-media-control-card.ts
+++ b/src/panels/lovelace/cards/hui-media-control-card.ts
@@ -90,17 +90,6 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
   @property() private _cardHeight: number = 0;
   private _progressInterval?: number;
   private _resizeObserver?: ResizeObserver;
-  private _debouncedResizeListener = debounce(
-    () => {
-      this._narrow = this.offsetWidth < 350;
-      this._veryNarrow = this.offsetWidth < 300;
-      if (this._image) {
-        this._cardHeight = this.offsetHeight;
-      }
-    },
-    250,
-    false
-  );
 
   public getCardSize(): number {
     return 3;
@@ -116,14 +105,16 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
 
   public connectedCallback(): void {
     super.connectedCallback();
+    this.updateComplete.then(() => this._measureCard());
+
     if (!this.hass || !this._config) {
-      return undefined;
+      return;
     }
 
     const stateObj = this.hass.states[this._config.entity] as MediaEntity;
 
     if (!stateObj) {
-      return undefined;
+      return;
     }
 
     if (
@@ -429,6 +420,13 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
     );
   }
 
+  private _measureCard() {
+    const card = this.shadowRoot!.querySelector("ha-card")!;
+    this._narrow = card.offsetWidth < 350;
+    this._veryNarrow = card.offsetWidth < 300;
+    this._cardHeight = card.offsetHeight;
+  }
+
   private _attachObserver(): void {
     if (typeof ResizeObserver !== "function") {
       import("resize-observer").then((modules) => {
@@ -438,8 +436,8 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
       return;
     }
 
-    this._resizeObserver = new ResizeObserver(() =>
-      this._debouncedResizeListener()
+    this._resizeObserver = new ResizeObserver(
+      debounce(() => this._measureCard(), 250, false)
     );
 
     this._resizeObserver.observe(this);
@@ -561,6 +559,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
           background-size 0.8s, opacity 0.8s linear 0.8s;
       }
 
+      .no-image .image {
+        opacity: 0;
+      }
+
       .no-img {
         background-color: var(--primary-color);
         background-size: initial;