Convert menu to a separate component file.

src/components/menu.ts

@@ -0,0 +1,121 @@
+import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import { classMap } from 'lit/directives/class-map.js';
+
+import menuStyle from '../scss/menu.scss';
+
+import { MenuButton } from '../types';
+import type { FrigateMenuMode } from '../types';
+
+type FrigateCardMenuCallback = (name: string) => void;
+
+// A menu for the Frigate card.
+@customElement('frigate-card-menu')
+export class FrigateCardMenu extends LitElement {
+  @property({ attribute: false })
+  protected menuMode: FrigateMenuMode = 'hidden-top';
+
+  @property({ attribute: false })
+  protected expand = false;
+
+  @property({ attribute: false })
+  protected actionCallback: FrigateCardMenuCallback | null = null;
+
+  @property({ attribute: false })
+  public buttons: Map<string, MenuButton> = new Map();
+
+  // Call the callback.
+  protected _callAction(name: string): void {
+    if (this.menuMode.startsWith('hidden-')) {
+      if (name == 'frigate') {
+        this.expand = !this.expand;
+        return;
+      }
+      // Collapse menu after the user clicks on something.
+      this.expand = false;
+    }
+
+    if (this.actionCallback) {
+      this.actionCallback(name);
+    }
+  }
+
+  // Render a menu button.
+  protected _renderButton(name: string, button: MenuButton): TemplateResult {
+    const classes = {
+      button: true,
+      emphasize: button.emphasize ?? false,
+    };
+
+    return html` <ha-icon-button
+      class="${classMap(classes)}"
+      icon=${button.icon || 'mdi:gesture-tap-button'}
+      title=${button.description}
+      @click=${() => this._callAction(name)}
+    ></ha-icon-button>`;
+  }
+
+  // Render the Frigate menu button.
+  protected _renderFrigateButton(name: string, button: MenuButton): TemplateResult {
+    const icon =
+      this.menuMode.startsWith('hidden-') && !this.expand
+        ? 'mdi:alpha-f-box-outline'
+        : 'mdi:alpha-f-box';
+
+    return this._renderButton(name, Object.assign({}, button, { icon: icon }));
+  }
+
+  // Render the menu.
+  protected render(): TemplateResult {
+    // 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':
+        this.menuMode.startsWith('hidden-') ||
+        this.menuMode.startsWith('overlay-') ||
+        this.menuMode.startsWith('hover-'),
+      'expanded-horizontal':
+        (this.menuMode.startsWith('overlay-') ||
+          this.menuMode.startsWith('hover-') ||
+          this.expand) &&
+        (this.menuMode.endsWith('-top') || this.menuMode.endsWith('-bottom')),
+      'expanded-vertical':
+        (this.menuMode.startsWith('overlay-') ||
+          this.menuMode.startsWith('hover-') ||
+          this.expand) &&
+        (this.menuMode.endsWith('-left') || this.menuMode.endsWith('-right')),
+      full: ['above', 'below'].includes(this.menuMode),
+      left: this.menuMode.endsWith('-left'),
+      right: this.menuMode.endsWith('-right'),
+      top: this.menuMode.endsWith('-top'),
+      bottom: this.menuMode.endsWith('-bottom'),
+    };
+
+    return html`
+      <div class=${classMap(classes)}>
+        ${Array.from(this.buttons.keys()).map((name) => {
+          const button = this.buttons.get(name);
+          if (button) {
+            return name === 'frigate'
+              ? this._renderFrigateButton(name, button)
+              : this._renderButton(name, button);
+          }
+          return html``;
+        })}
+      </div>
+    `;
+  }
+
+  // Return compiled CSS styles (thus safe to use with unsafeCSS).
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(menuStyle);
+  }
+}

src/components/message.ts

@@ -0,0 +1,74 @@
+import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import { localize } from '../localize/localize';
+import messageStyle from '../scss/message.scss';
+
+const URL_TROUBLESHOOTING =
+  'https://github.com/dermotduffy/frigate-hass-card#troubleshooting';
+
+@customElement('frigate-card-message')
+export class FrigateCardMessage extends LitElement {
+  @property({ attribute: false })
+  protected message = '';
+
+  @property({ attribute: false })
+  protected icon = 'mdi:information-outline';
+
+  // Render the menu.
+  protected render(): TemplateResult {
+    return html` <div class="message">
+      <span>
+        <ha-icon icon="${this.icon}"> </ha-icon>
+        ${this.message ? html`&nbsp;${this.message}` : ''}
+      </span>
+    </div>`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(messageStyle);
+  }
+}
+
+@customElement('frigate-card-error-message')
+export class FrigateCardErrorMessage extends LitElement {
+  @property({ attribute: false })
+  protected error = '';
+
+  protected render(): TemplateResult {
+    return html` <frigate-card-message
+      .message=${html` ${this.error}.
+        <a href="${URL_TROUBLESHOOTING}"> ${localize('error.troubleshooting')} </a>.`}
+      .icon=${'mdi:alert-circle'}
+    >
+    </frigate-card-message>`;
+  }
+}
+
+@customElement('frigate-card-progress-indicator')
+export class FrigateCardProgressIndicator extends LitElement {
+  protected render(): TemplateResult {
+    return html` <div class="message">
+      <ha-circular-progress active="true" size="large"> </ha-circular-progress>
+    </div>`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(messageStyle);
+  }
+}
+
+export function renderErrorMessage(error: string): TemplateResult {
+  return html`
+    <frigate-card-error-message .error=${error}></frigate-card-error-message>
+  `;
+}
+
+export function renderMessage(message: string, icon: string): TemplateResult {
+  return html`
+    <frigate-card-message .message=${message} .icon=${icon}></frigate-card-message>
+  `;
+}
+
+export function renderProgressIndicator(): TemplateResult {
+  return html` <frigate-card-progress-indicator> </frigate-card-progress-indicator> `;
+}