Add menu conditions.

src/action-handler-directive.ts

@@ -25,7 +25,7 @@ declare global {
 }
 
 class ActionHandler extends HTMLElement implements ActionHandler {
-  public holdTime = 500;
+  public holdTime = 400;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public ripple: any;

src/card-condition.ts

@@ -0,0 +1,68 @@
+import type { FrigateCardCondition } from './types';
+import { View } from './view';
+
+export interface ConditionState {
+  view?: View;
+  fullscreen?: boolean;
+}
+
+class ConditionStateRequestEvent extends Event {
+  public conditionState?: ConditionState;
+}
+
+export function evaluateCondition(
+  condition?: FrigateCardCondition,
+  state?: ConditionState,
+): boolean {
+  let result = true;
+  if (condition?.view?.length && state?.view) {
+    result &&= condition?.view.includes(state?.view.view);
+  }
+  if (condition?.fullscreen !== undefined && state?.fullscreen !== undefined) {
+    result &&= condition?.fullscreen == state?.fullscreen;
+  }
+  return result;
+}
+
+/**
+ * Evaluate whether a frigateCardCondition is met using an event to fetch state.
+ * @returns A boolean indicating whether the condition is met.
+ */
+export function fetchStateAndEvaluateCondition(
+  node: HTMLElement,
+  condition?: FrigateCardCondition,
+): boolean {
+  if (!condition) {
+    return true;
+  }
+
+  const stateEvent = new ConditionStateRequestEvent(
+    `frigate-card:condition-state-request`,
+    {
+      bubbles: true,
+      composed: true,
+    },
+  );
+
+  /* Special note on what's going on here:
+   *
+   * Some parts of the card (e.g. <frigate-card-elements>) may have arbitrary
+   * complexity and layers (that this card doesn't control) between that master
+   * element and the element that needs to evaluate the condition. In these
+   * cases there's no clean way to pass state from the rest of card down
+   * through these layers. Instead, an event is dispatched as a "request for
+   * state" (StateRequestEvent) upwards which is caught by the outer card
+   * and state added to the event object. Because event propagation is handled
+   * synchronously, the state will be added to the event before the flow
+   * proceeds.
+   */
+  node.dispatchEvent(stateEvent);
+  return evaluateCondition(condition, stateEvent.conditionState);
+}
+
+export function conditionStateRequestHandler(
+  ev: ConditionStateRequestEvent,
+  conditionState?: ConditionState,
+): void {
+  ev.conditionState = conditionState;
+}

src/card.ts

@@ -12,7 +12,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { until } from 'lit/directives/until.js';
 import {
-  ActionConfig,
   HomeAssistant,
   LovelaceCardEditor,
   getLovelace,
@@ -76,6 +75,7 @@ import { ResolvedMediaCache } from './resolved-media.js';
 import { BrowseMediaUtil } from './browse-media-util.js';
 import { isConfigUpgradeable } from './config-mgmt.js';
 import { actionHandler } from './action-handler-directive.js';
+import { ConditionState, conditionStateRequestHandler } from './card-condition.js';
 
 /** A note on media callbacks:
  *
@@ -136,6 +136,9 @@ export class FrigateCard extends LitElement {
   @property({ attribute: false })
   protected _view: View = new View();
 
+  @state()
+  protected _conditionState?: ConditionState;
+
   @query('frigate-card-menu')
   _menu!: FrigateCardMenu;
 
@@ -212,6 +215,16 @@ export class FrigateCard extends LitElement {
     } as FrigateCardConfig;
   }
 
+  /**
+   * Generate the state used to evaluate conditions.
+   */
+  protected _generateConditionState(): void {
+    this._conditionState = {
+      view: this._view,
+      fullscreen: screenfull.isEnabled && screenfull.isFullscreen,
+    };
+  }
+
   /**
    * Get a FrigateCard MenuButton given a set of parameters.
    * @param params Menu button parameters.
@@ -500,7 +513,7 @@ export class FrigateCard extends LitElement {
     this._changeView();
   }
 
-  protected _changeView(view?: View | undefined): void {
+  protected _changeView(view?: View): void {
     this._message = null;
 
     if (view === undefined) {
@@ -508,6 +521,7 @@ export class FrigateCard extends LitElement {
     } else {
       this._view = view;
     }
+    this._generateConditionState();
   }
 
   /**
@@ -719,6 +733,7 @@ export class FrigateCard extends LitElement {
         .hass=${this._hass}
         .menuConfig=${this.config.menu}
         .buttons=${this._getMenuButtons()}
+        .conditionState=${this._conditionState}
         class="${classMap(classes)}"
       ></frigate-card-menu>
     `;
@@ -811,6 +826,7 @@ export class FrigateCard extends LitElement {
    * Handler called when fullscreen is toggled.
    */
   protected _fullScreenHandler(): void {
+    this._generateConditionState();
     // Re-render after a change to fullscreen mode to take advantage of
     // the expanded screen real-estate (vs staying in aspect-ratio locked
     // modes).
@@ -889,11 +905,11 @@ export class FrigateCard extends LitElement {
     if (this._view.is('live')) {
       specificActions = this.config.live.actions;
     } else if (this._view.isGalleryView()) {
-      specificActions = this.config.event_gallery?.actions; 
+      specificActions = this.config.event_gallery?.actions;
     } else if (this._view.isViewerView()) {
-      specificActions = this.config.event_viewer.actions; 
+      specificActions = this.config.event_viewer.actions;
     } else if (this._view.is('image')) {
-      specificActions = this.config.image?.actions; 
+      specificActions = this.config.image?.actions;
     }
     return { ...this.config.view.actions, ...specificActions };
   }
@@ -951,8 +967,7 @@ export class FrigateCard extends LitElement {
         hasHold: hasAction(actions.hold_action),
         hasDoubleClick: hasAction(actions.double_tap_action),
       })}
-      @action=${(ev: CustomEvent) =>
-        this._actionHandler(ev, actions)}
+      @action=${(ev: CustomEvent) => this._actionHandler(ev, actions)}
       @ll-custom=${this._cardActionHandler.bind(this)}
     >
       ${this.config.menu.mode == 'above' ? this._renderMenu() : ''}
@@ -1072,7 +1087,7 @@ export class FrigateCard extends LitElement {
               <frigate-card-elements
                 .hass=${this._hass}
                 .elements=${this.config.elements}
-                .view=${this._view}
+                .conditionState=${this._conditionState}
                 @frigate-card:message=${this._messageHandler}
                 @frigate-card:menu-add=${(e) => {
                   this._addDynamicMenuButton(e.detail);
@@ -1080,10 +1095,8 @@ export class FrigateCard extends LitElement {
                 @frigate-card:menu-remove=${(e) => {
                   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;
+                @frigate-card:condition-state-request=${(ev) => {
+                  conditionStateRequestHandler(ev, this._conditionState)
                 }}
               >
               </frigate-card-elements>

src/components/elements.ts

@@ -17,7 +17,7 @@ import {
 
 import elementsStyle from '../scss/elements.scss';
 import { localize } from '../localize/localize.js';
-import { View } from '../view.js';
+import { ConditionState, fetchStateAndEvaluateCondition } from '../card-condition.js';
 
 /* A note on picture element rendering:
  *
@@ -59,12 +59,19 @@ class FrigateCardElementsCore extends LitElement {
   @property({ attribute: false })
   protected elements: PictureElements;
 
+  /**
+   * Need to ensure card re-renders when conditionState changes, hence having it
+   * as a property even though it is not currently directly used by this class.
+   */
   @property({ attribute: false })
-  protected view?: View;
+  protected conditionState?: ConditionState;
 
   protected _root: HTMLElement | null = null;
-  protected _hass!: HomeAssistant & ExtendedHomeAssistant;
+  protected _hass?: HomeAssistant & ExtendedHomeAssistant;
 
+  /**
+   * Set Home Assistant object.
+   */
   set hass(hass: HomeAssistant & ExtendedHomeAssistant) {
     if (this._root) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -73,15 +80,21 @@ class FrigateCardElementsCore extends LitElement {
     this._hass = hass;
   }
 
-  // Transparent to elements.
+  /**
+   * Create a transparent render root.
+   */
   createRenderRoot(): LitElement {
     return this;
   }
 
+  /**
+   * Create the root node for our picture elements.
+   * @returns 
+   */
   protected _createRoot(): HTMLElement {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const elementConstructor = customElements.get('hui-conditional-element') as any;
-    if (!elementConstructor) {
+    if (!elementConstructor || !this._hass) {
       throw new Error(localize('error.could_not_render_elements'));
     }
 
@@ -101,6 +114,10 @@ class FrigateCardElementsCore extends LitElement {
     return element;
   }
 
+  /**
+   * Render the elements.
+   * @returns A rendered template or void.
+   */
   protected render(): TemplateResult | void {
     try {
       // Recreate the root on each render to ensure conditional ancestors
@@ -113,20 +130,25 @@ class FrigateCardElementsCore extends LitElement {
   }
 }
 
-// THe master <frigate-card-elements> class, handles event listeners and styles.
+/**
+ * The master <frigate-card-elements> class, handles event listeners and styles.
+ */
 @customElement('frigate-card-elements')
 export class FrigateCardElements extends LitElement {
   @property({ attribute: false })
   protected elements: PictureElements;
 
   @property({ attribute: false })
-  protected view!: View;
+  protected conditionState?: ConditionState;
 
-  protected _hass!: HomeAssistant & ExtendedHomeAssistant;
+  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;
@@ -134,6 +156,10 @@ export class FrigateCardElements extends LitElement {
     this._hass = hass;
   }
 
+  /**
+   * Handle a picture element to be removed from the menu.
+   * @param ev The event.
+   */
   protected _menuRemoveHandler(ev: Event): void {
     // Re-dispatch event from this element (instead of the disconnected one, as
     // there is no parent of the disconnected element).
@@ -144,6 +170,10 @@ export class FrigateCardElements extends LitElement {
     );
   }
 
+  /**
+   * Handle a picture element to be added to the menu.
+   * @param ev The event.
+   */
   protected _menuAddHandler(ev: Event): void {
     ev = ev as CustomEvent<MenuButton>;
     const path = ev.composedPath();
@@ -165,6 +195,9 @@ export class FrigateCardElements extends LitElement {
     );
   }
 
+  /**
+   * Connected callback.
+   */
   connectedCallback(): void {
     super.connectedCallback();
 
@@ -173,40 +206,51 @@ export class FrigateCardElements extends LitElement {
     this.addEventListener('frigate-card:menu-add', this._menuAddHandler);
   }
 
+  /**
+   * Disconnected callback.
+   */
   disconnectedCallback(): void {
     this.removeEventListener('frigate-card:menu-add', this._menuAddHandler);
     super.disconnectedCallback();
   }
 
+  /**
+   * Render the template.
+   * @returns A rendered template.
+   */
   protected render(): TemplateResult {
     return html` <frigate-card-elements-core
       .hass=${this._hass}
-      .view=${this.view}
+      .conditionState=${this.conditionState}
       .elements=${this.elements}
     >
     </frigate-card-elements-core>`;
   }
 
+  /**
+   * Get styles.
+   */
   static get styles(): CSSResultGroup {
     return unsafeCSS(elementsStyle);
   }
 }
 
-class StateRequestEvent extends Event {
-  public view: View | undefined;
-}
-
-// An element that can render others based on Frigate state (e.g. only show
-// overlays in particular views). This is the Frigate Card equivalent to the HA
-// conditional card.
+/**
+ * An element that can render others based on Frigate state (e.g. only show
+ * overlays in particular views). This is the Frigate Card equivalent to the HA
+ * conditional card.
+ */
 @customElement('frigate-card-conditional')
 export class FrigateCardElementsConditional extends LitElement {
-  protected _config: FrigateConditional | null = null;
-  protected _hass!: HomeAssistant & ExtendedHomeAssistant;
+  protected _config?: FrigateConditional;
+  protected _hass?: HomeAssistant & ExtendedHomeAssistant;
 
   @query('frigate-card-elements-core')
-  _core!: FrigateCardElementsCore;
+  _core?: FrigateCardElementsCore;
 
+  /**
+   * Set the Home Assistant object.
+   */
   set hass(hass: HomeAssistant & ExtendedHomeAssistant) {
     if (this._core) {
       this._core.hass = hass;
@@ -214,22 +258,25 @@ export class FrigateCardElementsConditional extends LitElement {
     this._hass = hass;
   }
 
+  /**
+   * Set the card configuration.
+   * @param config The card configuration.
+   */
   public setConfig(config: FrigateConditional): void {
     this._config = config;
   }
 
-  // Transparent to elements.
+  /**
+   * Create a root into which to render. This card is "transparent".
+   * @returns 
+   */
   createRenderRoot(): LitElement {
     return this;
   }
 
-  protected evaluate(stateEvent: StateRequestEvent): boolean {
-    if (stateEvent.view && this._config.conditions.view) {
-      return this._config.conditions.view.includes(stateEvent.view.view);
-    }
-    return true;
-  }
-
+  /**
+   * Connected callback.
+   */
   connectedCallback(): void {
     super.connectedCallback();
 
@@ -239,27 +286,11 @@ export class FrigateCardElementsConditional extends LitElement {
     this.className = '';
   }
 
+  /**
+   * Render the card.
+   */
   protected render(): TemplateResult | void {
-    const stateEvent = new StateRequestEvent(`frigate-card:state-request`, {
-      bubbles: true,
-      composed: true,
-    });
-
-    /* Special note on what's going on here:
-     *
-     * Picture elements all are descendents of <frigate-card-elements>, but
-     * there may be arbitrary complexity and layers (that this card doesn't
-     * control) between that master element and this custom conditional element.
-     * This element needs Frigate card state to function (e.g. view), but
-     * there's no clean way to pass state from the rest of card down through
-     * these layers. Instead, we dispatch a "request for state"
-     * (StateRequestEvent) event upwards which is caught by the outer card and
-     * state added to the event object. Because event propagation is handled
-     * synchronously, the state will be added to the event before the flow
-     * proceeds.
-     */
-    this.dispatchEvent(stateEvent);
-    if (this.evaluate(stateEvent)) {
+    if (fetchStateAndEvaluateCondition(this, this._config.conditions)) {
       return html` <frigate-card-elements-core
         .hass=${this._hass}
         .elements=${this._config.elements}
@@ -274,10 +305,17 @@ export class FrigateCardElementsBaseMenuIcon<T> extends LitElement {
   @property({ attribute: false })
   protected _config: T | null = null;
 
+  /**
+   * Set the card config.
+   * @param config The configuration.
+   */
   public setConfig(config: T): void {
     this._config = config;
   }
 
+  /**
+   * Connected callback.
+   */
   connectedCallback(): void {
     super.connectedCallback();
     if (this._config) {
@@ -285,6 +323,9 @@ export class FrigateCardElementsBaseMenuIcon<T> extends LitElement {
     }
   }
 
+  /**
+   * Disconnected callback.
+   */
   disconnectedCallback(): void {
     if (this._config) {
       dispatchFrigateCardEvent<T>(this, 'menu-remove', this._config);

src/components/menu.ts

@@ -26,6 +26,7 @@ import {
 } from '../common.js';
 
 import menuStyle from '../scss/menu.scss';
+import { ConditionState, evaluateCondition } from '../card-condition.js';
 
 export const MENU_HEIGHT = 46;
 export const FRIGATE_BUTTON_MENU_ICON = 'frigate';
@@ -53,6 +54,9 @@ export class FrigateCardMenu extends LitElement {
   @property({ attribute: false })
   public buttons: MenuButton[] = [];
 
+  @property({ attribute: false })
+  protected conditionState?: ConditionState;
+
   /**
    * Handle an action on a menu button.
    * @param ev The action event.
@@ -196,7 +200,7 @@ export class FrigateCardMenu extends LitElement {
     }
     const mode = this._menuConfig.mode;
 
-    if (mode == 'none') {
+    if (mode == 'none' || !evaluateCondition(this._menuConfig.conditions, this.conditionState)) {
       return;
     }
 

src/types.ts

@@ -267,11 +267,15 @@ export const menuStateIconSchema = stateIconSchema.merge(
 );
 export type MenuStateIcon = z.infer<typeof menuStateIconSchema>;
 
+const frigateCardConditionSchema = z.object({
+  view: z.string().array().optional(),
+  fullscreen: z.boolean().optional(),
+});
+export type FrigateCardCondition = z.infer<typeof frigateCardConditionSchema>;
+
 const frigateConditionalSchema = z.object({
   type: z.literal('custom:frigate-card-conditional'),
-  conditions: z.object({
-    view: z.string().array().optional(),
-  }),
+  conditions: frigateCardConditionSchema,
   elements: z.lazy(() => pictureElementsSchema),
 });
 export type FrigateConditional = z.infer<typeof frigateConditionalSchema>;
@@ -407,6 +411,7 @@ const menuConfigSchema = z
       })
       .default(menuConfigDefault.buttons),
     button_size: z.string().default(menuConfigDefault.button_size),
+    conditions: frigateCardConditionSchema.optional(),
   })
   .default(menuConfigDefault);
 export type MenuConfig = z.infer<typeof menuConfigSchema>;