Merge pull request #390 from dermotduffy/cardmod

Create a means of re-rendering the card based on external state

README.md

@@ -156,6 +156,7 @@ view:
 | `update_force` | `false` | :heavy_multiplication_x: | Whether automated card updates/refreshes should ignore user interaction. See [card updates](#card-updates) below for behavior and usecases.|
 | `update_entities` | | :heavy_multiplication_x: | **YAML only**: A list of entity ids that should cause the view to reset to the default. See [card updates](#card-updates) below for behavior and usecases.|
 | `update_cycle_camera` | `false` | :heavy_multiplication_x: | When set to `true` the selected camera is cycled on each default view change. |
+| `render_entities` | | :heavy_multiplication_x: | **YAML only**: A list of entity ids that should cause the card to re-render 'in-place'. The view/camera is not changed. `update_*` flags to not pertain/relate to the behavior of this flag. This should **very** rarely be needed, but could be useful if the card is both setting and changing HA state of the same object as could be the case for some complex `card_mod` scenarios ([example](https://github.com/dermotduffy/frigate-hass-card/issues/343)). |
 | `actions` | | :heavy_multiplication_x: | Actions to use for all views, individual actions may be overriden by view-specific actions. See [actions](#actions) below.|
 ### Menu Options
 

src/card.ts

@@ -436,7 +436,10 @@ export class FrigateCard extends LitElement {
       }
 
       const id =
-        config.id || config.camera_entity || config.webrtc_card?.entity || config.camera_name;
+          config.id ||
+        config.camera_entity ||
+        config.webrtc_card?.entity ||
+        config.camera_name;
 
       if (!id) {
         this._setMessageAndUpdate({
@@ -680,10 +683,6 @@ export class FrigateCard extends LitElement {
    * @returns True if the card should be updated.
    */
   protected shouldUpdate(changedProps: PropertyValues): boolean {
-    if (changedProps.size > 1) {
-      return true;
-    }
-
     const oldHass = changedProps.get('_hass') as HomeAssistant | undefined;
     if (oldHass) {
       // Home Assistant pumps a lot of updates through. Re-rendering the card is
@@ -705,6 +704,14 @@ export class FrigateCard extends LitElement {
         // itself will not trigger an *additional* re-render here.
         this._changeView();
         return true;
+      } else if (
+        shouldUpdateBasedOnHass(
+          this._hass,
+          oldHass,
+          this._getConfig().view.render_entities || [],
+        )
+      ) {
+        return true;
       }
       return false;
     }
@@ -1121,6 +1128,10 @@ export class FrigateCard extends LitElement {
    * Master render method for the card.
    */
   protected render(): TemplateResult | void {
+    if (!this._hass) {
+      return;
+    }
+
     const padding = this._getAspectRatioPadding();
     const outerStyle = {};
 
@@ -1146,6 +1157,7 @@ export class FrigateCard extends LitElement {
       @frigate-card:message=${this._messageHandler}
       @frigate-card:change-view=${this._changeViewHandler}
       @frigate-card:media-show=${this._mediaShowHandler}
+      @frigate-card:render=${() => this.requestUpdate()}
     >
       ${this._getConfig().menu.mode == 'above' ? this._renderMenu() : ''}
       <div class="container outer" style="${styleMap(outerStyle)}">

src/common.ts

@@ -223,10 +223,7 @@ export function shouldUpdateBasedOnHass(
   oldHass: HomeAssistant | undefined | null,
   entities: string[] | null,
 ): boolean {
-  if (!newHass || !entities) {
+  if (!newHass || !entities || !entities.length) {
-    return false;
-  }
-  if (!entities.length) {
     return false;
   }
 

src/components/elements.ts

@@ -136,27 +136,18 @@ class FrigateCardElementsCore extends LitElement {
  */
 @customElement('frigate-card-elements')
 export class FrigateCardElements extends LitElement {
+  @property({ attribute: false })
+  public hass?: HomeAssistant & ExtendedHomeAssistant;
+
   @property({ attribute: false })
   protected elements: PictureElements;
 
   @property({ attribute: false })
   protected conditionState?: ConditionState;
 
-  protected _hass?: HomeAssistant & ExtendedHomeAssistant;
-
   @query('frigate-card-elements-core')
   _core!: FrigateCardElementsCore;
 
-  /**
-   * Set the Home Assistant object.
-   */
-  set hass(hass: HomeAssistant & ExtendedHomeAssistant) {
-    if (this._core) {
-      this._core.hass = hass;
-    }
-    this._hass = hass;
-  }
-
   /**
    * Handle a picture element to be removed from the menu.
    * @param ev The event.
@@ -221,7 +212,7 @@ export class FrigateCardElements extends LitElement {
    */
   protected render(): TemplateResult {
     return html` <frigate-card-elements-core
-      .hass=${this._hass}
+      .hass=${this.hass}
       .conditionState=${this.conditionState}
       .elements=${this.elements}
     >

src/types.ts

@@ -396,6 +396,7 @@ const viewConfigSchema = z
     update_force: z.boolean().default(viewConfigDefault.update_force),
     update_cycle_camera: z.boolean().default(viewConfigDefault.update_cycle_camera),
     update_entities: z.string().array().optional(),
+    render_entities: z.string().array().optional(),
   })
   .merge(actionsSchema)
   .default(viewConfigDefault);