Merge pull request #45 from dermotduffy/hide-menu

Allow the menu to be entirely removed

README.md

@@ -196,11 +196,11 @@ This card supports several menu configurations.
 
 | Key           | Description                                         | Screenshot |
 | ------------- | --------------------------------------------- | - |
-|`hidden-{top,bottom,right,left}`  (default)| Hide the menu by default, expandable upon clicking the 'F' button. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-hidden.png" alt="Menu hidden" width="400px"> |
+|`hidden-{top,bottom,right,left}`  [default: `hidden-top`]| Hide the menu by default, expandable upon clicking the 'F' button. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-hidden.png" alt="Menu hidden" width="400px"> |
 |`overlay-{top,bottom,right,left}`| Overlay the menu on top of the card contents. The 'F' button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-overlay.png" alt="Menu overlaid" width="400px"> |
 |`above`| Render the menu above the card. The 'F' button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-above.png" alt="Menu above" width="400px"> |
 |`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>
 

src/editor.ts

@@ -114,6 +114,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
 
     const menuModes = {
       '': '',
+      'none': localize('menu_mode.none'),
       'hidden-top': localize('menu_mode.hidden-top'),
       'hidden-left': localize('menu_mode.hidden-left'),
       'hidden-bottom': localize('menu_mode.hidden-bottom'),

src/frigate-hass-card.ts

@@ -164,6 +164,15 @@ export class FrigateCardMenu extends LitElement {
 
   // Render the menu.
   protected render(): TemplateResult | void | ((part: NodePart) => Promise<void>) {
+    // If the menu is off, or if it's in hidden mode but there's no button to
+    // unhide it, just show nothing.
+    if (
+      this.menuMode == 'none' ||
+      (this.menuMode.startsWith('hidden-') && !this.buttons.get('frigate'))
+    ) {
+      return html``;
+    }
+
     const classes = {
       'frigate-card-menu': true,
       'overlay-hidden':
@@ -181,12 +190,6 @@ export class FrigateCardMenu extends LitElement {
       bottom: this.menuMode.endsWith('-bottom'),
     };
 
-    // If the menu is in hidden mode and there's no button to unhide it, just
-    // show nothing.
-    if (this.menuMode.startsWith('hidden-') && !this.buttons.get('frigate')) {
-      return html``;
-    }
-
     return html`
       <div class=${classMap(classes)}>
         ${Array.from(this.buttons.keys()).map((name) => {
@@ -775,7 +778,9 @@ export class FrigateCard extends LitElement {
       if (!parent || !parent.children || childIndex == null) {
         return this._renderAttentionIcon(
           this._view.is('clip') ? 'mdi:filmstrip-off' : 'mdi:camera-off',
-          this._view.is('clip') ? localize('common.no_clip') : localize('common.no_snapshot'),
+          this._view.is('clip')
+            ? localize('common.no_clip')
+            : localize('common.no_snapshot'),
         );
       }
       mediaToRender = parent.children[childIndex];
@@ -926,7 +931,10 @@ export class FrigateCard extends LitElement {
   // is always rendered (but sometimes hidden).
   protected _renderLiveViewer(): TemplateResult {
     if (!this._hass || !(this.config.camera_entity in this._hass.states)) {
-      return this._renderAttentionIcon('mdi:camera-off', localize('error.no_live_camera'));
+      return this._renderAttentionIcon(
+        'mdi:camera-off',
+        localize('error.no_live_camera'),
+      );
     }
     if (this._webrtcElement) {
       return html`${this._webrtcElement}`;

src/localize/languages/en.json

@@ -44,6 +44,7 @@
     "frigate_ui": "Frigate User Interface"
   },
   "menu_mode": {
+    "none": "No menu",
     "hidden-top": "Hidden Top",
     "hidden-left": "Hidden Left",
     "hidden-bottom": "Hidden Bottom",

src/types.ts

@@ -25,6 +25,7 @@ export const FRIGATE_CARD_VIEWS = [
 export type FrigateCardView = typeof FRIGATE_CARD_VIEWS[number];
 
 export const FRIGATE_MENU_MODES = [
+  'none',
   'hidden-top',
   'hidden-left',
   'hidden-bottom',