Merge pull request #141 from dermotduffy/fix-menu-buttons

Fix picture element rendering bug causing menu icons to be lost in certain circumstances

src/card.ts

@@ -119,6 +119,9 @@ export class FrigateCard extends LitElement {
   // Information about the most recently loaded media item.
   protected _mediaInfo: MediaLoadInfo | null = null;
 
+  // Array of dynamic menu buttons to be added to menu.
+  protected _dynamicMenuButtons: MenuButton[] = [];
+
   // The frigate camera name to use (may be manually specified or automatically
   // derived).
   // Values:
@@ -224,7 +227,21 @@ export class FrigateCard extends LitElement {
         icon: screenfull.isFullscreen ? 'mdi:fullscreen-exit' : 'mdi:fullscreen',
       });
     }
-    return buttons;
+    return buttons.concat(this._dynamicMenuButtons);
+  }
+
+  public _addDynamicMenuButton(button: MenuButton): void {
+    if (!this._dynamicMenuButtons.includes(button)) {
+      this._dynamicMenuButtons = [...this._dynamicMenuButtons, button];
+    }
+    this._menu.buttons = this._getMenuButtons();
+  }
+
+  public _removeDynamicMenuButton(target: MenuButton): void {
+    this._dynamicMenuButtons = this._dynamicMenuButtons.filter(
+      (button) => button != target,
+    );
+    this._menu.buttons = this._getMenuButtons();
   }
 
   protected async _getFrigateCameraName(): Promise<string | null> {
@@ -733,19 +750,22 @@ export class FrigateCard extends LitElement {
               </frigate-card-live>
             `
           : ``}
-        ${!this._message && this.config.elements
+        ${this.config.elements
           ? html`
               <frigate-card-elements
                 .hass=${this._hass}
                 .elements=${this.config.elements}
+                .view=${this._view}
                 @frigate-card:message=${this._messageHandler}
                 @frigate-card:menu-add=${(e) => {
-                  this._menu.addButton(e.detail);
+                  this._addDynamicMenuButton(e.detail);
                 }}
                 @frigate-card:menu-remove=${(e) => {
-                  this._menu.removeButton(e.detail);
+                  this._removeDynamicMenuButton(e.detail);
                 }}
                 @frigate-card:state-request=${(e) => {
+                  // State filled here must also trigger the
+                  // 'frigate-card-elements' to re-render (by being a property).
                   e.view = this._view;
                 }}
               >

src/components/elements.ts

@@ -56,6 +56,9 @@ class FrigateCardElementsCore extends LitElement {
   @property({ attribute: false })
   protected elements: PictureElements;
 
+  @property({ attribute: false })
+  protected view?: View;
+
   protected _root: HTMLElement | null = null;
   protected _hass!: HomeAssistant & ExtendedHomeAssistant;
 
@@ -72,7 +75,7 @@ class FrigateCardElementsCore extends LitElement {
     return this;
   }
 
-  protected _createRoot(): void {
+  protected _createRoot(): HTMLElement {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const elementConstructor = customElements.get('hui-conditional-element') as any;
     if (!elementConstructor) {
@@ -92,16 +95,16 @@ class FrigateCardElementsCore extends LitElement {
       console.error(e, (e as Error).stack);
       throw new Error(localize('error.invalid_elements_config'));
     }
-    this._root = element;
+    return element;
   }
 
   protected render(): TemplateResult | void {
-    if (!this._root) {
-      try {
-        this._createRoot();
-      } catch (e) {
-        return dispatchErrorMessageEvent(this, (e as Error).message);
-      }
+    try {
+      // Recreate the root on each render to ensure conditional ancestors
+      // re-fire events as necessary.
+      this._root = this._createRoot();
+    } catch (e) {
+      return dispatchErrorMessageEvent(this, (e as Error).message);
     }
     return html`${this._root || ''}`;
   }
@@ -113,6 +116,9 @@ export class FrigateCardElements extends LitElement {
   @property({ attribute: false })
   protected elements: PictureElements;
 
+  @property({ attribute: false })
+  protected view!: View;
+
   protected _hass!: HomeAssistant & ExtendedHomeAssistant;
 
   @query('frigate-card-elements-core')
@@ -168,6 +174,7 @@ export class FrigateCardElements extends LitElement {
   protected render(): TemplateResult {
     return html` <frigate-card-elements-core
       .hass=${this._hass}
+      .view=${this.view}
       .elements=${this.elements}
     >
     </frigate-card-elements-core>`;

src/components/menu.ts

@@ -33,16 +33,6 @@ export class FrigateCardMenu extends LitElement {
   @property({ attribute: false })
   public buttons: MenuButton[] = [];
 
-  public addButton(button: MenuButton): void {
-    if (!this.buttons.includes(button)) {
-      this.buttons = [...this.buttons, button];
-    }
-  }
-
-  public removeButton(target: MenuButton): void {
-    this.buttons = this.buttons.filter(button => button != target);
-  }
-
   // Call the callback.
   protected _callAction(ev: CustomEvent, button: MenuButton): void {
     if (this.menuMode.startsWith('hidden-')) {