diff --git a/src/components/live.ts b/src/components/live.ts index 6d557270..2bef05f8 100644 --- a/src/components/live.ts +++ b/src/components/live.ts @@ -2,6 +2,7 @@ // TODO config-mgmt move for live provider // TODO unroll webrtc object in camera config for parity with live provider? // TODO order of cameras may not be being preserved. +// TODO the back-button issue raised on the PR // TODO verify README links worked correctly (e.g. basic cameras configuration) import { diff --git a/src/components/menu.ts b/src/components/menu.ts index f493bfeb..663b88b1 100644 --- a/src/components/menu.ts +++ b/src/components/menu.ts @@ -1,11 +1,5 @@ import { HomeAssistant, handleAction, hasAction } from 'custom-card-helpers'; -import { - CSSResultGroup, - LitElement, - TemplateResult, - html, - unsafeCSS, -} from 'lit'; +import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; import { styleMap } from 'lit/directives/style-map.js'; @@ -16,6 +10,7 @@ import './submenu.js'; import type { Actions, + ActionType, ExtendedHomeAssistant, MenuButton, MenuConfig, @@ -41,6 +36,8 @@ export class FrigateCardMenu extends LitElement { public hass?: HomeAssistant & ExtendedHomeAssistant; set menuConfig(menuConfig: MenuConfig) { + this.expanded = !menuConfig?.mode.startsWith('hidden-'); + this._menuConfig = menuConfig; if (menuConfig) { this.style.setProperty('--frigate-card-menu-button-size', menuConfig.button_size); @@ -49,12 +46,19 @@ export class FrigateCardMenu extends LitElement { @state() protected _menuConfig?: MenuConfig; - @property({ attribute: false }) - protected expand = false; + @state() + protected expanded = false; @property({ attribute: false }) public buttons: MenuButton[] = []; + protected _isFrigateCardAction(action: ActionType): boolean { + // Determine if this action is a Frigate card action, if so handle it + // internally. + const frigateCardAction = convertActionToFrigateCardCustomAction(action); + return !!frigateCardAction && frigateCardAction.frigate_card_action == 'frigate'; + } + /** * Handle an action on a menu button. * @param ev The action event. @@ -86,22 +90,19 @@ export class FrigateCardMenu extends LitElement { return; } - // Determine if this action is a Frigate card action, if so handle it - // internally. - const frigateCardAction = convertActionToFrigateCardCustomAction(action); if ( - frigateCardAction && - frigateCardAction.frigate_card_action == 'frigate' && + action && + this._isFrigateCardAction(action) && this._menuConfig?.mode.startsWith('hidden-') ) { // If the user presses the frigate button and it's a hide-away menu, // then expand the menu and return. - this.expand = !this.expand; + this.expanded = !this.expanded; return; } // Collapse menu after the user clicks on something. - this.expand = false; + this.expanded = false; handleAction(this, this.hass as HomeAssistant, config, interaction); } @@ -113,10 +114,10 @@ export class FrigateCardMenu extends LitElement { protected _renderButton(button: MenuButton): TemplateResult | void { if (button.type == 'custom:frigate-card-menu-submenu') { let corner: Corner | undefined; - if (this._menuConfig?.mode.endsWith("-left")) { + if (this._menuConfig?.mode.endsWith('-left')) { // Minor nicety: Start the menu to the right of the menu itself is on // the left, otherwise use the default. - corner = "BOTTOM_RIGHT"; + corner = 'BOTTOM_RIGHT'; } return html` `; } - let stateParameters: StateParameters = {...button}; + let stateParameters: StateParameters = { ...button }; if (stateParameters.icon == FRIGATE_BUTTON_MENU_ICON) { stateParameters.icon = - this._menuConfig?.mode.startsWith('hidden-') && !this.expand + this._menuConfig?.mode.startsWith('hidden-') && !this.expanded ? 'mdi:alpha-f-box-outline' : 'mdi:alpha-f-box'; } @@ -192,10 +193,14 @@ export class FrigateCardMenu extends LitElement { mode.startsWith('overlay-') || mode.startsWith('hover-'), 'expanded-horizontal': - (mode.startsWith('overlay-') || mode.startsWith('hover-') || this.expand) && + (mode.startsWith('overlay-') || + mode.startsWith('hover-') || + (mode.startsWith('hidden-') && this.expanded)) && (mode.endsWith('-top') || mode.endsWith('-bottom')), 'expanded-vertical': - (mode.startsWith('overlay-') || mode.startsWith('hover-') || this.expand) && + (mode.startsWith('overlay-') || + mode.startsWith('hover-') || + (mode.startsWith('hidden-') && this.expanded)) && (mode.endsWith('-left') || mode.endsWith('-right')), full: mode == 'above' || mode == 'below', left: mode.endsWith('-left'), @@ -204,9 +209,14 @@ export class FrigateCardMenu extends LitElement { bottom: mode.endsWith('-bottom'), }; + // If the hidden menu isn't expanded, only show the Frigate button. + const buttons = + !mode.startsWith('hidden-') || this.expanded + ? this.buttons + : this.buttons.filter((button) => button.icon === FRIGATE_BUTTON_MENU_ICON); return html`
- ${Array.from(this.buttons).map((button) => this._renderButton(button))} + ${buttons.map((button) => this._renderButton(button))}
`; }