flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #298 from dermotduffy/camera-menu-choice

Browse Source 
Allow Frigate card actions to be a list
This commit is contained in:
Dermot Duffy
2022-01-29 16:18:31 -08:00
committed by GitHub
parent 46de17ece2 5bf0951086
commit 65249fc82f
6 changed files with 257 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+30 -2
View File
@@ -497,6 +497,10 @@ See the [action
documentation](https://www.home-assistant.io/lovelace/actions/#hold-action) for
more information on the action options available.
**Note**: The Frigate Card allows either a single action (as in stock Home
Assistant) or list of actions to be defined for each class of user interaction
(e.g. `tap`, `double_tap`, `hold`, etc). See [an example of multiple actions](#example-multiple-actions).
### Special Elements
This card supports all [Picture Elements](https://www.home-assistant.io/lovelace/picture-elements/#icon-element) using the same syntax. The card also supports a handful of custom special elements to add special Frigate card functionality.
@@ -551,16 +555,17 @@ Parameters for the `custom:frigate-card-conditional` element:
| Action name | Description |
| - | - |
| `custom:frigate-card-action` | Call a Frigate Card action. Acceptable values are `frigate`, `clip`, `clips`, `image`, `live`, `snapshot`, `snapshots`, `download`, `frigate_ui`, `fullscreen`.|
| `custom:frigate-card-action` | Call a Frigate Card action. Acceptable values are `default`, `clip`, `clips`, `image`, `live`, `snapshot`, `snapshots`, `download`, `frigate_ui`, `fullscreen`, `camera_select`, `menu_toggle`.|
| Value | Description |
| - | - |
| `frigate` | Show/hide the menu or trigger the default view. |
| `default` | Trigger the default view. |
| `clip`, `clips`, `image`, `live`, `snapshot`, `snapshots` | Trigger the named [view](#views).|
|`download`|Download the displayed media.|
|`frigate_ui`|Open the Frigate UI at the configured URL.|
|`fullscreen`|Toggle fullscreen.|
|`camera_select`|Select a given camera. Takes a single additional `camera` parameter with the [camera ID](#camera-ids) of the camera to select.|
|`menu_toggle` | Show/hide the menu (for `hidden-*` mode menus). |
<a name="views"></a>
@@ -1111,6 +1116,29 @@ image:
```
</details>
<a name="example-multiple-actions"></a>
### Defining multiple actions for Elements
<details>
<summary>Expand: Changing camera and view simultaneously</summary>
This example shows how to configure multiple actions for a single Frigate card user interaction, in this case both selecting a different camera and changing the view on `tap`.
```yaml
[...]
elements:
- type: custom:frigate-card-menu-icon
icon: mdi:chair-rolling
tap_action:
- action: custom:frigate-card-action
frigate_card_action: camera_select
camera: camera.office
- action: custom:frigate-card-action
frigate_card_action: live
```
</details>
<a name="card-updates"></a>
## Card Refreshes
src/card.ts
+60 -84
View File
@@ -14,7 +14,6 @@ import {
HomeAssistant,
LovelaceCardEditor,
getLovelace,
hasAction,
} from 'custom-card-helpers';
import screenfull from 'screenfull';
import { z } from 'zod';
@@ -23,10 +22,10 @@ import {
Actions,
ActionType,
CameraConfig,
GetFrigateCardMenuButtonParameters,
RawFrigateCardConfig,
entitySchema,
frigateCardConfigSchema,
FrigateCardCustomAction,
} from './types.js';
import type {
Entity,
@@ -46,6 +45,7 @@ import {
convertActionToFrigateCardCustomAction,
createFrigateCardCustomAction,
frigateCardHandleAction,
frigateCardHasAction,
getActionConfigGivenAction,
getCameraIcon,
getCameraTitle,
@@ -256,28 +256,6 @@ export class FrigateCard extends LitElement {
};
}
/**
* Get a FrigateCard MenuButton given a set of parameters.
* @param params Menu button parameters.
* @returns A MenuButton.
*/
protected _getFrigateCardMenuButton(
params: GetFrigateCardMenuButtonParameters,
): MenuButton {
return {
type: 'custom:frigate-card-menu-icon',
title: params.title,
icon: params.icon,
style: params.emphasize ? this._getEmphasizedStyle() : {},
tap_action: params.tap_action
? createFrigateCardCustomAction(params.tap_action)
: undefined,
hold_action: params.hold_action
? createFrigateCardCustomAction(params.hold_action)
: undefined,
};
}
/**
* Get the menu buttons to display.
* @returns An array of menu buttons.
@@ -286,16 +264,17 @@ export class FrigateCard extends LitElement {
const buttons: MenuButton[] = [];
if (this._getConfig().menu.buttons.frigate) {
buttons.push(
this._getFrigateCardMenuButton({
tap_action: 'frigate',
buttons.push({
type: 'custom:frigate-card-menu-icon',
title: localize('config.menu.buttons.frigate'),
// Use a magic icon value that the menu will use to render the icon as
// it deems appropriate (certain menu configurations change the menu
// icon for the 'Frigate' button).
icon: FRIGATE_BUTTON_MENU_ICON,
title: localize('config.menu.buttons.frigate'),
}),
);
tap_action: FrigateCardMenu.isHidingMenu(this._getConfig().menu)
? (createFrigateCardCustomAction('menu_toggle') as FrigateCardCustomAction)
: (createFrigateCardCustomAction('default') as FrigateCardCustomAction),
});
}
if (
@@ -323,56 +302,58 @@ export class FrigateCard extends LitElement {
}
if (this._getConfig().menu.buttons.live) {
buttons.push(
this._getFrigateCardMenuButton({
tap_action: 'live',
buttons.push({
type: 'custom:frigate-card-menu-icon',
title: localize('config.view.views.live'),
icon: 'mdi:cctv',
emphasize: this._view?.is('live'),
}),
);
style: this._view?.is('live') ? this._getEmphasizedStyle() : {},
tap_action: createFrigateCardCustomAction('live') as FrigateCardCustomAction,
});
}
if (this._getConfig().menu.buttons.clips) {
buttons.push(
this._getFrigateCardMenuButton({
tap_action: 'clips',
hold_action: 'clip',
buttons.push({
type: 'custom:frigate-card-menu-icon',
title: localize('config.view.views.clips'),
icon: 'mdi:filmstrip',
emphasize: this._view?.is('clips'),
}),
);
style: this._view?.is('clips') ? this._getEmphasizedStyle() : {},
tap_action: createFrigateCardCustomAction('clips') as FrigateCardCustomAction,
hold_action: createFrigateCardCustomAction('clip') as FrigateCardCustomAction,
});
}
if (this._getConfig().menu.buttons.snapshots) {
buttons.push(
this._getFrigateCardMenuButton({
tap_action: 'snapshots',
hold_action: 'snapshot',
buttons.push({
type: 'custom:frigate-card-menu-icon',
title: localize('config.view.views.snapshots'),
icon: 'mdi:camera',
emphasize: this._view?.is('snapshots'),
}),
);
style: this._view?.is('snapshots') ? this._getEmphasizedStyle() : {},
tap_action: createFrigateCardCustomAction(
'snapshots',
) as FrigateCardCustomAction,
hold_action: createFrigateCardCustomAction(
'snapshot',
) as FrigateCardCustomAction,
});
}
if (this._getConfig().menu.buttons.image) {
buttons.push(
this._getFrigateCardMenuButton({
tap_action: 'image',
buttons.push({
type: 'custom:frigate-card-menu-icon',
title: localize('config.view.views.image'),
icon: 'mdi:image',
emphasize: this._view?.is('image'),
}),
);
style: this._view?.is('image') ? this._getEmphasizedStyle() : {},
tap_action: createFrigateCardCustomAction('image') as FrigateCardCustomAction,
});
}
if (this._getConfig().menu.buttons.download && this._view?.isViewerView()) {
buttons.push(
this._getFrigateCardMenuButton({
tap_action: 'download',
buttons.push({
type: 'custom:frigate-card-menu-icon',
title: localize('config.menu.buttons.download'),
icon: 'mdi:download',
}),
);
tap_action: createFrigateCardCustomAction('download') as FrigateCardCustomAction,
});
}
const cameraConfig = this._getSelectedCameraConfig();
@@ -381,22 +362,26 @@ export class FrigateCard extends LitElement {
cameraConfig &&
cameraConfig.frigate_url
) {
buttons.push(
this._getFrigateCardMenuButton({
tap_action: 'frigate_ui',
buttons.push({
type: 'custom:frigate-card-menu-icon',
title: localize('config.menu.buttons.frigate_ui'),
icon: 'mdi:web',
}),
);
tap_action: createFrigateCardCustomAction(
'frigate_ui',
) as FrigateCardCustomAction,
});
}
if (this._getConfig().menu.buttons.fullscreen && screenfull.isEnabled) {
buttons.push(
this._getFrigateCardMenuButton({
tap_action: 'fullscreen',
buttons.push({
type: 'custom:frigate-card-menu-icon',
title: localize('config.menu.buttons.fullscreen'),
icon: screenfull.isFullscreen ? 'mdi:fullscreen-exit' : 'mdi:fullscreen',
}),
);
tap_action: createFrigateCardCustomAction(
'fullscreen',
) as FrigateCardCustomAction,
style: screenfull.isFullscreen ? this._getEmphasizedStyle() : {},
});
}
return buttons.concat(this._dynamicMenuButtons);
}
@@ -804,7 +789,7 @@ export class FrigateCard extends LitElement {
const action = frigateCardAction.frigate_card_action;
switch (action) {
case 'frigate':
case 'default':
this._changeView();
break;
case 'clip':
@@ -874,16 +859,7 @@ export class FrigateCard extends LitElement {
* Handle an action called on an element.
* @param ev The actionHandler event.
*/
protected _actionHandler(
ev: CustomEvent,
config?: {
hold_action?: ActionType;
tap_action?: ActionType;
double_tap_action?: ActionType;
start_tap_action?: ActionType;
end_tap_action?: ActionType;
},
): void {
protected _actionHandler(ev: CustomEvent, config?: Actions): void {
const interaction = ev.detail.action;
const node: HTMLElement | null = ev.currentTarget as HTMLElement | null;
if (
@@ -1143,8 +1119,8 @@ export class FrigateCard extends LitElement {
return html` <ha-card
.actionHandler=${actionHandler({
hasHold: hasAction(actions.hold_action),
hasDoubleClick: hasAction(actions.double_tap_action),
hasHold: frigateCardHasAction(actions.hold_action),
hasDoubleClick: frigateCardHasAction(actions.double_tap_action),
})}
@action=${(ev: CustomEvent) => this._actionHandler(ev, actions)}
@ll-custom=${this._cardActionHandler.bind(this)}
src/common.ts
+52 -21
View File
@@ -1,15 +1,13 @@
import { HassEntity, MessageBase } from 'home-assistant-js-websocket';
import {
HomeAssistant,
handleActionConfig,
stateIcon,
} from 'custom-card-helpers';
import { HomeAssistant, handleActionConfig, hasAction, stateIcon } from 'custom-card-helpers';
import { StyleInfo } from 'lit/directives/style-map';
import { ZodSchema, z } from 'zod';
import { isEqual } from 'lodash-es';
import { localize } from './localize/localize.js';
import {
Actions,
ActionsConfig,
ActionType,
CameraConfig,
ExtendedHomeAssistant,
@@ -302,14 +300,8 @@ export function createFrigateCardCustomAction(
*/
export function getActionConfigGivenAction(
interaction?: string,
config?: {
hold_action?: ActionType;
tap_action?: ActionType;
double_tap_action?: ActionType;
start_tap_action?: ActionType;
end_tap_action?: ActionType;
},
): ActionType | undefined {
config?: Actions,
): ActionType | ActionType[] | undefined {
if (!interaction || !config) {
return undefined;
}
@@ -499,24 +491,63 @@ export function contentsChanged(n: unknown, o: unknown): boolean {
* @param hass The Home Assistant object.
* @param config The multi-action configuration.
* @param action The action string (e.g. 'hold')
* @returns Whether or not an action was executed.
*/
export const frigateCardHandleAction = (
node: HTMLElement,
hass: HomeAssistant,
config: ActionsConfig,
action: string,
): boolean => {
return frigateCardHandleActionConfig(
node,
hass,
config,
action,
getActionConfigGivenAction(action, config),
);
};
/**
* Handle an ActionConfig or array of ActionConfigs.
* @param node The node that fired the event.
* @param hass The Home Assistant object.
* @param actionConfig A single action config, array of action configs or
* undefined for the default action config for 'tap'.
* @param action The action string (e.g. 'hold')
* @returns Whether or not an action was executed.
*/
export const frigateCardHandleActionConfig = (
node: HTMLElement,
hass: HomeAssistant,
config: {
entity?: string;
camera_image?: string;
hold_action?: ActionType;
tap_action?: ActionType;
double_tap_action?: ActionType;
start_tap_action?: ActionType;
end_tap_action?: ActionType;
entity?: string;
},
action: string,
): void => {
const actionConfig = getActionConfigGivenAction(action, config);
actionConfig: ActionType | ActionType[] | undefined,
): boolean => {
if (actionConfig || action == 'tap') {
// Only allow a tap action to use a default non-config (the more-info config).
if (Array.isArray(actionConfig)) {
actionConfig.forEach((action) => handleActionConfig(node, hass, config, action));
} else {
handleActionConfig(node, hass, config, actionConfig);
}
return true;
}
return false;
};
/**
* Determine if an action config has a real action. A modified version of
* custom-card-helpers hasAction to also work with arrays of action configs.
* @param config The action config in question.
* @returns `true` if there's a real action defined, `false` otherwise.
*/
export const frigateCardHasAction = (config?: ActionType | ActionType[] | undefined): boolean => {
if (Array.isArray(config)) {
return !!config.find((item) => hasAction(item));
}
return hasAction(config);
}
src/components/menu.ts
+78 -23
View File
@@ -1,4 +1,4 @@
import { HASSDomEvent, HomeAssistant, hasAction } from 'custom-card-helpers';
import { HASSDomEvent, HomeAssistant } from 'custom-card-helpers';
import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
@@ -9,7 +9,7 @@ import { actionHandler } from '../action-handler-directive.js';
import './submenu.js';
import type {
Actions,
ActionsConfig,
ActionType,
ExtendedHomeAssistant,
MenuButton,
@@ -18,7 +18,8 @@ import type {
} from '../types.js';
import {
convertActionToFrigateCardCustomAction,
frigateCardHandleAction,
frigateCardHandleActionConfig,
frigateCardHasAction,
getActionConfigGivenAction,
refreshDynamicStateParameters,
} from '../common.js';
@@ -37,8 +38,6 @@ 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);
@@ -53,11 +52,36 @@ export class FrigateCardMenu extends LitElement {
@property({ attribute: false })
public buttons: MenuButton[] = [];
protected _isFrigateCardAction(action: ActionType): boolean {
/**
* Determine if a given menu configuration is a hiding menu.
* @param menuConfig The menu configuration.
* @returns `true` if the menu is hiding, `false` otherwise.
*/
static isHidingMenu(menuConfig: MenuConfig | undefined): boolean {
return menuConfig?.mode.startsWith('hidden-') ?? false;
}
/**
* Determine if a given menu configuration is a hiding menu (internal version).
* @returns `true` if the menu is hiding, `false` otherwise.
*/
protected _isHidingMenu(): boolean {
return FrigateCardMenu.isHidingMenu(this._menuConfig);
}
/**
* Determine if a given action is intended to toggle the menu.
* @param action The action to check.
* @returns `true` if the action toggles the menu, `false` otherwise.
*/
protected _isMenuToggleAction(action: ActionType | undefined): boolean {
// Determine if this action is a Frigate card action, if so handle it
// internally.
if (!action) {
return false;
}
const frigateCardAction = convertActionToFrigateCardCustomAction(action);
return !!frigateCardAction && frigateCardAction.frigate_card_action == 'frigate';
return !!frigateCardAction && frigateCardAction.frigate_card_action == 'menu_toggle';
}
/**
@@ -66,8 +90,8 @@ export class FrigateCardMenu extends LitElement {
* @param button The button configuration.
*/
protected _actionHandler(
ev: HASSDomEvent<{ action: string; config?: Actions }>,
config?: Actions,
ev: HASSDomEvent<{ action: string; config?: ActionsConfig }>,
config?: ActionsConfig,
): void {
if (!ev) {
return;
@@ -86,25 +110,56 @@ export class FrigateCardMenu extends LitElement {
ev.stopPropagation();
const interaction: string = ev.detail.action;
const action = getActionConfigGivenAction(interaction, config);
let action = getActionConfigGivenAction(interaction, config);
if (!config || !interaction) {
return;
}
if (
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.expanded = !this.expanded;
return;
let tookAction = false;
let menuToggle = false;
if (Array.isArray(action)) {
// Case 1: An array of actions.
// Strip out actions that toggle the menu.
const actionCount = action.length;
action = action.filter((item) => !this._isMenuToggleAction(item));
if (action.length != actionCount) {
menuToggle = true;
}
// Collapse menu after the user clicks on something.
// If there are still actions left, handle them as usual.
if (action.length) {
tookAction = frigateCardHandleActionConfig(
this,
this.hass as HomeAssistant,
config,
interaction,
action,
);
}
} else {
// Case 2: Either a specific action, or no action at all (i.e. default
// action for `tap`).
if (this._isMenuToggleAction(action)) {
menuToggle = true;
} else {
tookAction = frigateCardHandleActionConfig(
this,
this.hass as HomeAssistant,
config,
interaction,
action,
);
}
}
if (this._isHidingMenu()) {
if (menuToggle) {
this.expanded = !this.expanded;
} else if (tookAction) {
this.expanded = false;
frigateCardHandleAction(this, this.hass as HomeAssistant, config, interaction);
}
}
}
/**
@@ -146,8 +201,8 @@ export class FrigateCardMenu extends LitElement {
stateParameters = refreshDynamicStateParameters(this.hass, stateParameters);
}
const hasHold = hasAction(button.hold_action);
const hasDoubleClick = hasAction(button.double_tap_action);
const hasHold = frigateCardHasAction(button.hold_action);
const hasDoubleClick = frigateCardHasAction(button.double_tap_action);
const classes = {
button: true,
src/components/submenu.ts
+6 -6
View File
@@ -1,11 +1,11 @@
import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
import { customElement, property } from 'lit/decorators';
import { hasAction, HomeAssistant } from 'custom-card-helpers';
import { HomeAssistant } from 'custom-card-helpers';
import { styleMap } from 'lit/directives/style-map';
import { ExtendedHomeAssistant, MenuSubmenu, MenuSubmenuItem } from '../types.js';
import { actionHandler } from '../action-handler-directive.js';
import { refreshDynamicStateParameters } from '../common.js';
import { frigateCardHasAction, refreshDynamicStateParameters } from '../common.js';
import submenuStyle from '../scss/submenu.scss';
import type { Corner } from "@material/mwc-menu";
@@ -39,8 +39,8 @@ export class FrigateCardSubmenu extends LitElement {
ev.detail.config = item;
}}
.actionHandler=${actionHandler({
hasHold: hasAction(item.hold_action),
hasDoubleClick: hasAction(item.double_tap_action),
hasHold: frigateCardHasAction(item.hold_action),
hasDoubleClick: frigateCardHasAction(item.double_tap_action),
})}
>
${stateParameters.title || ''}
@@ -71,8 +71,8 @@ export class FrigateCardSubmenu extends LitElement {
slot="trigger"
.label=${this.submenu.title || ''}
.actionHandler=${actionHandler({
hasHold: hasAction(this.submenu.hold_action),
hasDoubleClick: hasAction(this.submenu.double_tap_action),
hasHold: frigateCardHasAction(this.submenu.hold_action),
hasDoubleClick: frigateCardHasAction(this.submenu.double_tap_action),
})}
>
<ha-icon icon="${this.submenu.icon}"></ha-icon>
src/types.ts
+11 -14
View File
@@ -119,7 +119,7 @@ const frigateCardCustomActionBaseSchema = customActionSchema.extend({
});
const FRIGATE_CARD_GENERAL_ACTIONS = [
'frigate',
'default',
'clip',
'clips',
'image',
@@ -129,6 +129,7 @@ const FRIGATE_CARD_GENERAL_ACTIONS = [
'download',
'frigate_ui',
'fullscreen',
'menu_toggle',
] as const;
const FRIGATE_CARD_ACTIONS = [...FRIGATE_CARD_GENERAL_ACTIONS, 'camera_select'] as const;
export type FrigateCardAction = typeof FRIGATE_CARD_ACTIONS[number];
@@ -159,17 +160,21 @@ export type ActionType = z.infer<typeof actionSchema>;
const actionBaseSchema = z
.object({
tap_action: actionSchema.optional(),
hold_action: actionSchema.optional(),
double_tap_action: actionSchema.optional(),
start_tap_action: actionSchema.optional(),
end_tap_action: actionSchema.optional(),
tap_action: actionSchema.or(actionSchema.array()).optional(),
hold_action: actionSchema.or(actionSchema.array()).optional(),
double_tap_action: actionSchema.or(actionSchema.array()).optional(),
start_tap_action: actionSchema.or(actionSchema.array()).optional(),
end_tap_action: actionSchema.or(actionSchema.array()).optional(),
})
// Passthrough to allow (at least) entity/camera_image to go through. This
// card doesn't need these attributes, but handleAction() in
// custom_card_helpers may depending on how the action is configured.
.passthrough();
export type Actions = z.infer<typeof actionBaseSchema>;
export type ActionsConfig = Actions & {
camera_image?: string;
entity?: string;
};
const actionsSchema = z.object({
actions: actionBaseSchema.optional(),
@@ -746,14 +751,6 @@ export interface BrowseMediaQueryParameters {
after?: number;
}
export interface GetFrigateCardMenuButtonParameters {
icon: string;
title: string;
tap_action: FrigateCardAction;
hold_action?: FrigateCardAction;
emphasize?: boolean;
}
export interface BrowseMediaNeighbors {
previous: BrowseMediaSource | null;
previousIndex: number | null;