Merge pull request #194 from dermotduffy/menu-condition

Allow menu to be conditionally hidden
2021-11-14 16:48:17 -08:00
parent 3ae908d4b7 c7506c9ee0
commit 49b44871c0
7 changed files with 481 additions and 302 deletions
@@ -102,6 +102,7 @@ All variables listed are under a `menu:` section.
 | `mode` | `hidden-top` | The menu mode to show by default. See [menu modes](#menu-modes) below.|
 | `button_size` | `40px` | The size of the menu buttons (in CSS Units)[https://www.w3schools.com/cssref/css_units.asp].|
 | `buttons.{frigate, live, clips, snapshots, image, download, frigate_ui, fullscreen}` | `true`, except for `image` | Whether or not to show these builtin actions in the card menu. |
 | `conditions` | | Condition(s) that must be met in order for the menu to be displayed. These conditions use the same format as the `custom:frigate-card-conditional` card (see [Possible conditions](#frigate-card-conditions) below). If conditions are specified but not met, then the menu is not rendered.|
 ### Live options
@@ -193,16 +194,6 @@ The card aspect ratio can be changed with the `dimensions.aspect_ratio_mode` and
 If no aspect ratio is specified or available, but one is needed then `16:9` will
 be used by default.
 #### Example aspect ratio configuration
 Have the card aspect-ratio dynamically follow the last loaded media, but use `4:3` as the default when there is no such media:
 ```yaml
 dimensions:
  aspect_ratio_mode: dynamic
  aspect_ratio: '4:3'
 ```
 <a name="other-options"></a>
 ### Other Options
@@ -289,9 +280,19 @@ Parameters for the `custom:frigate-card-conditional` element:
 | Parameter | Description |
 | ------------- | --------------------------------------------- |
 | `type` | Must be `custom:frigate-card-conditional`. |
-| `conditions` | A set of conditions that must evaluate to true in order for the elements to be rendered. |
+| `conditions` | A set of conditions that must evaluate to true in order for the elements to be rendered. See below. |
-| `conditions.view` | A list of [views](#views) in which these elements should be rendered. |
+ `elements` | The elements to render. Can be any supported element, include additional condition or custom elements. |
-| `elements` | The elements to render. Can be any supported element, include additional condition or custom elements. |
+
 <a name="frigate-card-conditions"></a>
 ##### Frigate Card Conditions
 All variables listed are under a `conditions:` section. 
 | Condition | Description |
 | ------------- | --------------------------------------------- |
 | `view` | A list of [views](#views) in which these elements should be rendered. |
 | `fullscreen` | If `true` the elements are only rendered if the card is in fullscreen mode. If `false` the elements are only rendered if the card is **NOT** in fullscreen mode.|
 See the [PTZ example below](#frigate-card-conditional-example) for a real-world example.
@@ -311,188 +312,6 @@ See the [PTZ example below](#frigate-card-conditional-example) for a real-world
 |`frigate_ui`|Open the Frigate UI at the configured URL.|
 |`fullscreen`|Toggle fullscreen.| 
 ### Elements Examples
 #### Menu icons
 You can add custom icons to the menu with arbitrary actions.
 <details>
  <summary>Expand: Custom menu icon</summary>
 This example adds an icon that navigates the browser to the releases page for this
 card:
 ```yaml
  - type: custom:frigate-card-menu-icon
    icon: mdi:book
    tap_action:
      action: url
      url_path: https://github.com/dermotduffy/frigate-hass-card/releases
 ```
 </details>
 #### Menu state icons
 You can add custom state icons to the menu to show the state of an entity and complete arbitrary actions.
 <details>
  <summary>Expand: Custom menu state icon</summary>
 This example adds an icon that represents the state of the
 `light.office_main_lights` entity, that toggles the light on double click.
 ```yaml
 elements:
  - type: custom:frigate-card-menu-state-icon
    entity: light.office_main_lights
    tap_action:
      action: toggle
 ```
 </details>
 #### State badges
 You can adds a state badge to the card showing arbitrary entity states.
 <details>
  <summary>Expand: State badge</summary>
 This example adds a state badge showing the temperature and hides the label text:
 ```yaml
  - type: state-badge
    entity: sensor.kitchen_temperature
    style:
      right: '-20px'
      top: 100px
      color: rgba(0,0,0,0)
      opacity: 0.5
 ```
 <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/picture_elements_temperature.png" alt="Picture elements temperature example" width="400px">
 </details>
 #### Conditional menu icons
 You can have icons conditionally added to the menu based on entity state.
 <details>
  <summary>Expand: Conditional menu icons</summary>
 This example only adds the light entity to the menu if a light is on.
 ```yaml
  - type: conditional
    conditions:
      - entity: light.kitchen
        state: 'on'
    elements:
      - type: custom:frigate-card-menu-state-icon
        entity: light.kitchen
        tap_action:
          action: toggle
 ```
 </details>
 <a name="frigate-card-conditional-example"></a>
 #### Restricting icons to certain views
 You can restrict icons to only show for certain [views](#views) using a
 `custom:frigate-card-conditional` element (e.g. PTZ controls)
 <details>
  <summary>Expand: View-based conditions (e.g. PTZ controls)</summary>
 This example shows PTZ icons that call a PTZ service, but only in the `live` view.
 ```yaml
 elements:
  - type: custom:frigate-card-conditional
    conditions:
      view:
        - live
    elements:
      - type: icon
        icon: mdi:arrow-up
        style:
          background: rgba(255, 255, 255, 0.25)
          border-radius: 5px
          right: 25px
          bottom: 50px
        tap_action:
          action: call-service
          service: amcrest.ptz_control
          service_data:
            entity_id: camera.kitchen
            movement: up
      - type: icon
        icon: mdi:arrow-down
        style:
          background: rgba(255, 255, 255, 0.25)
          border-radius: 5px
          right: 25px
          bottom: 0px
        tap_action:
          action: call-service
          service: amcrest.ptz_control
          service_data:
            entity_id: camera.kitchen
            movement: down
      - type: icon
        icon: mdi:arrow-left
        style:
          background: rgba(255, 255, 255, 0.25)
          border-radius: 5px
          right: 50px
          bottom: 25px
        tap_action:
          action: call-service
          service: amcrest.ptz_control
          service_data:
            entity_id: camera.kitchen
            movement: left
      - type: icon
        icon: mdi:arrow-right
        style:
          background: rgba(255, 255, 255, 0.25)
          border-radius: 5px
          right: 0px
          bottom: 25px
        tap_action:
          action: call-service
          service: amcrest.ptz_control
          service_data:
            entity_id: camera.kitchen
            movement: right
 ```
 </details>
 <a name="frigate-card-action"></a>
 #### Triggering card actions
 You can control the card itself with the `custom:frigate-card-action` action.
 <details>
  <summary>Expand: Custom fullscreen button</summary>
 This example shows an icon that toggles the card fullscreen mode.
 ```yaml
 elements:
  - type: icon
    icon: mdi:fullscreen
    style:
      left: 40px
      top: 40px
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: fullscreen
 ```
 </details>
 <a name="views"></a>
@@ -562,25 +381,6 @@ _also_, which means that a card-wide `tap` action probably isn't that useful as
 it may be disorienting to the user and will trigger on all kinds of basic
 interaction on the card (e.g. tapping/clicking a menu button).
 ### Example
 In this example, double clicking the card in any view will cause the card to go
 into fullscreen mode, **except** when the view is `live` in which case the
 office lights are toggled.
 ```yaml
 view:
  actions:
    double_tap_action:
      action: custom:frigate-card-action
      frigate_card_action: fullscreen
 live:
  provider: frigate-jsmpeg
  actions:
    entity: light.office_main_lights
    double_tap_action:
      action: toggle
 ```
 ## Menu Modes
@@ -595,30 +395,6 @@ This card supports several menu configurations.
 |`below`| Render the menu below the card. The 'F' button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-below.png" alt="Menu below" width="400px"> |
 |`none`| No menu is shown. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-none.png" alt="No Menu" width="400px"> |
 <a name="yaml-examples"></a>
 ## Example YAML Configuration
 A configuration that uses WebRTC for live:
 ```yaml
 - type: 'custom:frigate-card'
  camera_entity: camera.front_door
  frigate_url: http://frigate
  live_provider: webrtc
  webrtc:
    entity: camera.front_door_rtsp
 ```
 A configuration that shows the latest clip on load, but does not automatically play it:
 ```yaml
 - type: 'custom:frigate-card'
  camera_entity: camera.front_door
  frigate_url: http://frigate
  view_default: clip
 ```
 ## Screenshot: Snapshot / Clip Gallery
 Full viewing of clips:
@@ -631,6 +407,278 @@ This card supports full editing via the Lovelace card editor. Additional arbitra
 <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/editor.png" alt="Live viewing" width="400px">
 ## Examples
 ### WebRTC
 <details>
  <summary>Expand: Basic WebRTC configuration</summary>
 ```yaml
 type: 'custom:frigate-card'
 camera_entity: camera.front_door
 live:
  provider: webrtc
  webrtc:
    entity: camera.front_door_rtsp
 ```
 </details>
 ### Static Aspect Ratios
 You can set a static aspect ratio.
 <details>
  <summary>Expand: Static 4:3 aspect ratios</summary>
 ```yaml
 [...]
 dimensions:
  aspect_ratio_mode: dynamic
  aspect_ratio: '4:3'
 ```
 </details>
 ### Adding Menu Icons
 You can add custom icons to the menu with arbitrary actions.
 <details>
  <summary>Expand: Custom menu icon</summary>
 This example adds an icon that navigates the browser to the releases page for this
 card:
 ```yaml
 [...]
 elements:
  - type: custom:frigate-card-menu-icon
    icon: mdi:book
    tap_action:
      action: url
      url_path: https://github.com/dermotduffy/frigate-hass-card/releases
 ```
 </details>
 ### Adding Menu State Icons
 You can add custom state icons to the menu to show the state of an entity and complete arbitrary actions.
 <details>
  <summary>Expand: Custom menu state icon</summary>
 This example adds an icon that represents the state of the
 `light.office_main_lights` entity, that toggles the light on double click.
 ```yaml
 [...]
 elements:
  - type: custom:frigate-card-menu-state-icon
    entity: light.office_main_lights
    tap_action:
      action: toggle
 ```
 </details>
 ### Adding State Badges
 You can adds a state badge to the card showing arbitrary entity states.
 <details>
  <summary>Expand: State badge</summary>
 This example adds a state badge showing the temperature and hides the label text:
 ```yaml
 [...]
 elements:
  - type: state-badge
    entity: sensor.kitchen_temperature
    style:
      right: '-20px'
      top: 100px
      color: rgba(0,0,0,0)
      opacity: 0.5
 ```
 <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/picture_elements_temperature.png" alt="Picture elements temperature example" width="400px">
 </details>
 ### Adding State Badges
 You can have icons conditionally added to the menu based on entity state.
 <details>
  <summary>Expand: Conditional menu icons</summary>
 This example only adds the light entity to the menu if a light is on.
 ```yaml
 [...]
 elements:
  - type: conditional
    conditions:
      - entity: light.kitchen
        state: 'on'
    elements:
      - type: custom:frigate-card-menu-state-icon
        entity: light.kitchen
        tap_action:
          action: toggle
 ```
 </details>
 <a name="frigate-card-conditional-example"></a>
 ### Restricting icons to certain views
 You can restrict icons to only show for certain [views](#views) using a
 `custom:frigate-card-conditional` element (e.g. PTZ controls)
 <details>
  <summary>Expand: View-based conditions (e.g. PTZ controls)</summary>
 This example shows PTZ icons that call a PTZ service, but only in the `live` view.
 ```yaml
 [...]
 elements:
  - type: custom:frigate-card-conditional
    conditions:
      view:
        - live
    elements:
      - type: icon
        icon: mdi:arrow-up
        style:
          background: rgba(255, 255, 255, 0.25)
          border-radius: 5px
          right: 25px
          bottom: 50px
        tap_action:
          action: call-service
          service: amcrest.ptz_control
          service_data:
            entity_id: camera.kitchen
            movement: up
      - type: icon
        icon: mdi:arrow-down
        style:
          background: rgba(255, 255, 255, 0.25)
          border-radius: 5px
          right: 25px
          bottom: 0px
        tap_action:
          action: call-service
          service: amcrest.ptz_control
          service_data:
            entity_id: camera.kitchen
            movement: down
      - type: icon
        icon: mdi:arrow-left
        style:
          background: rgba(255, 255, 255, 0.25)
          border-radius: 5px
          right: 50px
          bottom: 25px
        tap_action:
          action: call-service
          service: amcrest.ptz_control
          service_data:
            entity_id: camera.kitchen
            movement: left
      - type: icon
        icon: mdi:arrow-right
        style:
          background: rgba(255, 255, 255, 0.25)
          border-radius: 5px
          right: 0px
          bottom: 25px
        tap_action:
          action: call-service
          service: amcrest.ptz_control
          service_data:
            entity_id: camera.kitchen
            movement: right
 ```
 </details>
 <a name="frigate-card-action"></a>
 ### Triggering card actions
 You can control the card itself with the `custom:frigate-card-action` action.
 <details>
  <summary>Expand: Custom fullscreen button</summary>
 This example shows an icon that toggles the card fullscreen mode.
 ```yaml
 [...]
 elements:
  - type: icon
    icon: mdi:fullscreen
    style:
      left: 40px
      top: 40px
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: fullscreen
 ```
 </details>
 ### Adding card-wide actions
 You can add actions to the card to be trigger on `tap`, `double_tap` or `hold`. See [actions](#actions) above.
 <details>
  <summary>Expand: Adding a card-wide action</summary>
 In this example double clicking the card in any view will cause the card to go
 into fullscreen mode, **except** when the view is `live` in which case the
 office lights are toggled.
 ```yaml
 [...]
 view:
  actions:
    double_tap_action:
      action: custom:frigate-card-action
      frigate_card_action: fullscreen
 live:
  provider: frigate-jsmpeg
  actions:
    entity: light.office_main_lights
    double_tap_action:
      action: toggle
 ```
 </details>
 ### Hiding the menu in certain circumstances
 You can add conditions to the menu, which will hide the menu unless met.
 <details>
  <summary>Expand: Hiding the menu</summary>
 This example hides the menu unless the card is in fullscreen mode, and uses a card-wide action to enable fullscreen mode on `double_tap`:
 ```yaml
 [...]
 view:
  actions:
    double_tap_action:
      action: custom:frigate-card-action
      frigate_card_action: fullscreen
 menu:
  conditions:
    fullscreen: true
 ```
 </details>
 ## Troubleshooting
 <a name="jsmpeg-troubleshooting"></a>
@@ -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;
@@ -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;
 }
@@ -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) =>
+      @action=${(ev: CustomEvent) => this._actionHandler(ev, actions)}
        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) => {
+                @frigate-card:condition-state-request=${(ev) => {
-                  // State filled here must also trigger the
+                  conditionStateRequestHandler(ev, this._conditionState)
                  // 'frigate-card-elements' to re-render (by being a property).
                  e.view = this._view;
                }}
              >
              </frigate-card-elements>
@@ -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 _config?: FrigateConditional;
-  protected _hass!: HomeAssistant & ExtendedHomeAssistant;
+  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) {
+   * Connected callback.
-      return this._config.conditions.view.includes(stateEvent.view.view);
+   */
    }
    return true;
  }
  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`, {
+    if (fetchStateAndEvaluateCondition(this, this._config.conditions)) {
      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)) {
      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);
@@ -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;
    }
@@ -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({
+  conditions: frigateCardConditionSchema,
    view: z.string().array().optional(),
  }),
  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>;