From 10c2e746b2d2de8ce550b3c15b18e98822b93b56 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sun, 12 Jun 2022 17:56:25 -0700
Subject: [PATCH] Don't re-render the whole card for conditionState.

---
 src/card.ts                | 15 ++++++++++++++-
 src/components/elements.ts |  4 ++--
 src/components/live.ts     |  6 +++---
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/card.ts b/src/card.ts
index 9096c713..21b442d2 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -28,6 +28,7 @@ import './components/gallery.js';
 import './components/image.js';
 import { FrigateCardImage } from './components/image.js';
 import './components/live.js';
+import { FrigateCardLive } from './components/live.js';
 import './components/menu.js';
 import { FrigateCardMenu, FRIGATE_BUTTON_MENU_ICON } from './components/menu.js';
 import './components/message.js';
@@ -164,12 +165,12 @@ export class FrigateCard extends LitElement {
   @property({ attribute: false })
   protected _view?: View;
 
-  @state()
   protected _conditionState?: ConditionState;
 
   protected _refMenu: Ref<FrigateCardMenu> = createRef();
   protected _refElements: Ref<FrigateCardElements> = createRef();
   protected _refImage: Ref<FrigateCardImage> = createRef();
+  protected _refLive: Ref<FrigateCardLive> = createRef();
 
   // user interaction timer ("screensaver" functionality, return to default
   // view after user interaction).
@@ -273,6 +274,17 @@ export class FrigateCard extends LitElement {
       state: this._hass?.states,
     };
 
+    // Update the components that need the new condition state. Passed directly
+    // to them to avoid the performance hit of a entire card re-render (esp.
+    // when using card-mod).
+    // https://github.com/dermotduffy/frigate-hass-card/issues/678
+    if (this._refLive.value) {
+      this._refLive.value.conditionState = this._conditionState;
+    }
+    if (this._refElements.value) {
+      this._refElements.value.conditionState = this._conditionState;
+    }
+
     const overriddenConfig = getOverriddenConfig(
       this._config,
       this._config.overrides,
@@ -1813,6 +1825,7 @@ export class FrigateCard extends LitElement {
         this._getConfig().live.preload || (!this._message && this._view.is('live'))
           ? html`
               <frigate-card-live
+                ${ref(this._refLive)}
                 .hass=${this._hass}
                 .view=${this._view}
                 .liveConfig=${this._config.live}
diff --git a/src/components/elements.ts b/src/components/elements.ts
index b40f355c..0606d546 100644
--- a/src/components/elements.ts
+++ b/src/components/elements.ts
@@ -156,10 +156,10 @@ export class FrigateCardElements extends LitElement {
   public hass?: HomeAssistant;
 
   @property({ attribute: false })
-  protected elements: PictureElements;
+  public conditionState?: ConditionState;
 
   @property({ attribute: false })
-  protected conditionState?: ConditionState;
+  protected elements: PictureElements;
 
   protected _boundMenuRemoveHandler = this._menuRemoveHandler.bind(this);
 
diff --git a/src/components/live.ts b/src/components/live.ts
index b0182eeb..7dc24a79 100644
--- a/src/components/live.ts
+++ b/src/components/live.ts
@@ -61,6 +61,9 @@ const URL_SIGN_REFRESH_THRESHOLD_SECONDS = 1 * 60 * 60;
 
 @customElement('frigate-card-live')
 export class FrigateCardLive extends LitElement {
+  @property({ attribute: false })
+  public conditionState?: ConditionState;
+
   @property({ attribute: false })
   protected hass?: ExtendedHomeAssistant;
 
@@ -76,9 +79,6 @@ export class FrigateCardLive extends LitElement {
   @property({ attribute: false, hasChanged: contentsChanged })
   protected liveOverrides?: LiveOverrides;
 
-  @property({ attribute: false })
-  protected conditionState?: ConditionState;
-
   set preloaded(preloaded: boolean) {
     this._preloaded = preloaded;