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

Add menu prioritization & alignment.

Browse Source
This commit is contained in:
Dermot Duffy
2022-04-29 20:13:05 -07:00
parent ccd47d9a9d
commit a44d444d53
9 changed files with 383 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/card.ts
+52 -67
View File
@@ -278,26 +278,19 @@ export class FrigateCard extends LitElement {
protected _getMenuButtons(): MenuButton[] {
const buttons: MenuButton[] = [];
if (this._getConfig().menu.buttons.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).
priority: this._getConfig().menu.buttons.frigate,
icon: FRIGATE_BUTTON_MENU_ICON,
tap_action: FrigateCardMenu.isHidingMenu(this._getConfig().menu)
? (createFrigateCardCustomAction('menu_toggle') as FrigateCardCustomAction)
: (createFrigateCardCustomAction('default') as FrigateCardCustomAction),
});
}
buttons.push({
// Use a magic icon value that the menu will use to render the custom
// Frigate icon.
icon: FRIGATE_BUTTON_MENU_ICON,
...this._getConfig().menu.buttons.frigate,
type: 'custom:frigate-card-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 (
this._getConfig().menu.buttons.cameras &&
this._cameras &&
this._cameras.size > 1
) {
if (this._cameras && this._cameras.size > 1) {
const menuItems = Array.from(this._cameras, ([camera, config]) => {
return {
icon: getCameraIcon(this._hass, config),
@@ -310,40 +303,37 @@ export class FrigateCard extends LitElement {
});
buttons.push({
icon: 'mdi:video-switch',
...this._getConfig().menu.buttons.cameras,
type: 'custom:frigate-card-menu-submenu',
title: localize('config.menu.buttons.cameras'),
priority: this._getConfig().menu.buttons.cameras,
icon: 'mdi:video-switch',
items: menuItems,
});
}
if (this._getConfig().menu.buttons.live) {
buttons.push({
type: 'custom:frigate-card-menu-icon',
title: localize('config.view.views.live'),
priority: this._getConfig().menu.buttons.live,
icon: 'mdi:cctv',
style: this._view?.is('live') ? this._getEmphasizedStyle() : {},
tap_action: createFrigateCardCustomAction('live') as FrigateCardCustomAction,
});
}
buttons.push({
icon: 'mdi:cctv',
...this._getConfig().menu.buttons.live,
type: 'custom:frigate-card-menu-icon',
title: localize('config.view.views.live'),
style: this._view?.is('live') ? this._getEmphasizedStyle() : {},
tap_action: createFrigateCardCustomAction('live') as FrigateCardCustomAction,
});
const cameraConfig = this._getSelectedCameraConfig();
// Don't show `clips` button if there's no `camera_name` (e.g. non-Frigate
// cameras), or is birdseye (unless there are dependent cameras).
if (
this._getConfig().menu.buttons.clips &&
cameraConfig?.camera_name &&
(cameraConfig?.camera_name !== CAMERA_BIRDSEYE ||
cameraConfig?.dependent_cameras?.length)
) {
buttons.push({
icon: 'mdi:filmstrip',
...this._getConfig().menu.buttons.clips,
type: 'custom:frigate-card-menu-icon',
title: localize('config.view.views.clips'),
priority: this._getConfig().menu.buttons.clips,
icon: 'mdi:filmstrip',
style: this._view?.is('clips') ? this._getEmphasizedStyle() : {},
tap_action: createFrigateCardCustomAction('clips') as FrigateCardCustomAction,
hold_action: createFrigateCardCustomAction('clip') as FrigateCardCustomAction,
@@ -353,16 +343,15 @@ export class FrigateCard extends LitElement {
// Don't show `snapshots` button if there's no `camera_name` (e.g. non-Frigate
// cameras), or is birdseye (unless there are dependent cameras).
if (
this._getConfig().menu.buttons.snapshots &&
cameraConfig?.camera_name &&
(cameraConfig?.camera_name !== CAMERA_BIRDSEYE ||
cameraConfig?.dependent_cameras?.length)
) {
buttons.push({
icon: 'mdi:camera',
...this._getConfig().menu.buttons.snapshots,
type: 'custom:frigate-card-menu-icon',
title: localize('config.view.views.snapshots'),
priority: this._getConfig().menu.buttons.snapshots,
icon: 'mdi:camera',
style: this._view?.is('snapshots') ? this._getEmphasizedStyle() : {},
tap_action: createFrigateCardCustomAction(
'snapshots',
@@ -373,59 +362,55 @@ export class FrigateCard extends LitElement {
});
}
if (this._getConfig().menu.buttons.image) {
buttons.push({
type: 'custom:frigate-card-menu-icon',
title: localize('config.view.views.image'),
priority: this._getConfig().menu.buttons.image,
icon: 'mdi:image',
style: this._view?.is('image') ? this._getEmphasizedStyle() : {},
tap_action: createFrigateCardCustomAction('image') as FrigateCardCustomAction,
});
}
buttons.push({
icon: 'mdi:image',
...this._getConfig().menu.buttons.image,
type: 'custom:frigate-card-menu-icon',
title: localize('config.view.views.image'),
style: this._view?.is('image') ? this._getEmphasizedStyle() : {},
tap_action: createFrigateCardCustomAction('image') as FrigateCardCustomAction,
});
if (this._getConfig().menu.buttons.timeline) {
buttons.push({
type: 'custom:frigate-card-menu-icon',
title: localize('config.view.views.timeline'),
priority: this._getConfig().menu.buttons.timeline,
icon: 'mdi:chart-gantt',
style: this._view?.is('timeline') ? this._getEmphasizedStyle() : {},
tap_action: createFrigateCardCustomAction('timeline') as FrigateCardCustomAction,
});
}
buttons.push({
icon: 'mdi:chart-gantt',
...this._getConfig().menu.buttons.timeline,
type: 'custom:frigate-card-menu-icon',
title: localize('config.view.views.timeline'),
style: this._view?.is('timeline') ? this._getEmphasizedStyle() : {},
tap_action: createFrigateCardCustomAction('timeline') as FrigateCardCustomAction,
});
if (
this._getConfig().menu.buttons.download &&
(this._view?.isViewerView() || (this._view?.is('timeline') && !!this._view?.media))
this._view?.isViewerView() ||
(this._view?.is('timeline') && !!this._view?.media)
) {
buttons.push({
icon: 'mdi:download',
...this._getConfig().menu.buttons.download,
type: 'custom:frigate-card-menu-icon',
title: localize('config.menu.buttons.download'),
priority: this._getConfig().menu.buttons.download,
icon: 'mdi:download',
tap_action: createFrigateCardCustomAction('download') as FrigateCardCustomAction,
});
}
if (this._getConfig().menu.buttons.frigate_ui && cameraConfig?.frigate_url) {
if (cameraConfig?.frigate_url) {
buttons.push({
icon: 'mdi:web',
...this._getConfig().menu.buttons.frigate_ui,
type: 'custom:frigate-card-menu-icon',
title: localize('config.menu.buttons.frigate_ui'),
priority: this._getConfig().menu.buttons.frigate_ui,
icon: 'mdi:web',
tap_action: createFrigateCardCustomAction(
'frigate_ui',
) as FrigateCardCustomAction,
});
}
if (this._getConfig().menu.buttons.fullscreen && screenfull.isEnabled) {
if (screenfull.isEnabled) {
buttons.push({
icon: screenfull.isFullscreen ? 'mdi:fullscreen-exit' : 'mdi:fullscreen',
...this._getConfig().menu.buttons.fullscreen,
type: 'custom:frigate-card-menu-icon',
title: localize('config.menu.buttons.fullscreen'),
priority: this._getConfig().menu.buttons.fullscreen,
icon: screenfull.isFullscreen ? 'mdi:fullscreen-exit' : 'mdi:fullscreen',
tap_action: createFrigateCardCustomAction(
'fullscreen',
) as FrigateCardCustomAction,
src/components/menu.ts
+15 -30
View File
@@ -222,24 +222,6 @@ export class FrigateCardMenu extends LitElement {
}
}
// TODO below might be removable?
// If the alignments are different, sort 'opposite' alignments later.
if (a.alignment !== b.alignment) {
if (
(a.alignment === undefined || a.alignment === 'near') &&
b.alignment === 'far'
) {
return -1;
}
if (
(b.alignment === undefined || b.alignment === 'near') &&
a.alignment === 'far'
) {
return 1;
}
}
// Otherwise sort by priority.
if (
a.priority === undefined ||
@@ -267,6 +249,9 @@ export class FrigateCardMenu extends LitElement {
* @returns A rendered template or void.
*/
protected _renderButton(button: MenuButton): TemplateResult | void {
if (button.enabled === false) {
return;
}
if (button.type == 'custom:frigate-card-menu-submenu') {
return html` <frigate-card-submenu
.hass=${this.hass}
@@ -337,30 +322,30 @@ export class FrigateCardMenu extends LitElement {
}
// If the hidden menu isn't expanded, only show the Frigate button.
const nearButtons =
const matchingButtons =
style !== 'hidden' || this.expanded
? this.buttons.filter(
(button) => !button.alignment || button.alignment === 'near',
(button) => !button.alignment || button.alignment === 'matching',
)
: this.buttons.filter((button) => button.icon === FRIGATE_BUTTON_MENU_ICON);
const farButtons =
const opposingButtons =
style !== 'hidden' || this.expanded
? this.buttons.filter((button) => button.alignment === 'far')
? this.buttons.filter((button) => button.alignment === 'opposing')
: [];
const nearStyle = {
flex: String(nearButtons.length),
const matchingStyle = {
flex: String(matchingButtons.length),
};
const farStyle = {
flex: String(farButtons.length),
const opposingStyle = {
flex: String(opposingButtons.length),
};
return html` <div class="near" style="${styleMap(nearStyle)}">
${nearButtons.map((button) => this._renderButton(button))}
return html` <div class="matching" style="${styleMap(matchingStyle)}">
${matchingButtons.map((button) => this._renderButton(button))}
</div>
<div class="far" style="${styleMap(farStyle)}">
${farButtons.map((button) => this._renderButton(button))}
<div class="opposing" style="${styleMap(opposingStyle)}">
${opposingButtons.map((button) => this._renderButton(button))}
</div>`;
}
src/config-mgmt.ts
+16 -15
View File
@@ -37,7 +37,6 @@ import {
} from './const';
import {
BUTTON_SIZE_MIN,
FRIGATE_MENU_PRIORITY_DEFAULT,
RawFrigateCardConfig,
RawFrigateCardConfigArray,
THUMBNAIL_WIDTH_MAX,
@@ -491,14 +490,17 @@ const upgradeMenuConditionToMenuOverride = (): ((
* @param value The boolean true/false for show/hide the switch.
* @returns A priority value.
*/
const menuButtonToPriority = function (value: unknown): number | null | undefined {
if (typeof value === 'number') {
const menuButtonBooleanToObject = function (
value: unknown,
): { enabled: boolean } | null | undefined {
if (typeof value === 'object') {
return undefined;
}
if (typeof value !== 'boolean') {
// If it's not a boolean, or it's just true, remove it.
if (typeof value !== 'boolean' || value) {
return null;
}
return value ? FRIGATE_MENU_PRIORITY_DEFAULT : 0;
return { enabled: value };
};
const UPGRADES = [
@@ -564,14 +566,13 @@ const UPGRADES = [
),
upgradeWithOverrides('event_gallery.min_columns', deleteProperty),
upgradeMenuModeToStyleAndPosition(),
upgradeWithOverrides(CONF_MENU_BUTTONS_FRIGATE, menuButtonToPriority),
upgradeWithOverrides(CONF_MENU_BUTTONS_CAMERAS, menuButtonToPriority),
upgradeWithOverrides(CONF_MENU_BUTTONS_LIVE, menuButtonToPriority),
upgradeWithOverrides(CONF_MENU_BUTTONS_CLIPS, menuButtonToPriority),
upgradeWithOverrides(CONF_MENU_BUTTONS_SNAPSHOTS, menuButtonToPriority),
upgradeWithOverrides(CONF_MENU_BUTTONS_IMAGE, menuButtonToPriority),
upgradeWithOverrides(CONF_MENU_BUTTONS_DOWNLOAD, menuButtonToPriority),
upgradeWithOverrides(CONF_MENU_BUTTONS_FRIGATE_UI, menuButtonToPriority),
upgradeWithOverrides(CONF_MENU_BUTTONS_FULLSCREEN, menuButtonToPriority),
upgradeWithOverrides(CONF_MENU_BUTTONS_FRIGATE, menuButtonBooleanToObject),
upgradeWithOverrides(CONF_MENU_BUTTONS_CAMERAS, menuButtonBooleanToObject),
upgradeWithOverrides(CONF_MENU_BUTTONS_LIVE, menuButtonBooleanToObject),
upgradeWithOverrides(CONF_MENU_BUTTONS_CLIPS, menuButtonBooleanToObject),
upgradeWithOverrides(CONF_MENU_BUTTONS_SNAPSHOTS, menuButtonBooleanToObject),
upgradeWithOverrides(CONF_MENU_BUTTONS_IMAGE, menuButtonBooleanToObject),
upgradeWithOverrides(CONF_MENU_BUTTONS_DOWNLOAD, menuButtonBooleanToObject),
upgradeWithOverrides(CONF_MENU_BUTTONS_FRIGATE_UI, menuButtonBooleanToObject),
upgradeWithOverrides(CONF_MENU_BUTTONS_FULLSCREEN, menuButtonBooleanToObject),
];
src/const.ts
+2 -1
View File
@@ -117,6 +117,8 @@ export const CONF_MENU_ALIGNMENT = `${CONF_MENU}.alignment` as const;
export const CONF_MENU_POSITION = `${CONF_MENU}.position` as const;
export const CONF_MENU_STYLE = `${CONF_MENU}.style` as const;
export const CONF_MENU_BUTTON_SIZE = `${CONF_MENU}.button_size` as const;
export const CONF_MENU_BUTTONS = `${CONF_MENU}.buttons` as const;
export const CONF_MENU_BUTTONS_CAMERAS = `${CONF_MENU}.buttons.cameras` as const;
export const CONF_MENU_BUTTONS_CLIPS = `${CONF_MENU}.buttons.clips` as const;
export const CONF_MENU_BUTTONS_DOWNLOAD = `${CONF_MENU}.buttons.download` as const;
@@ -125,7 +127,6 @@ export const CONF_MENU_BUTTONS_FRIGATE_UI = `${CONF_MENU}.buttons.frigate_ui` as
export const CONF_MENU_BUTTONS_FULLSCREEN = `${CONF_MENU}.buttons.fullscreen` as const;
export const CONF_MENU_BUTTONS_IMAGE = `${CONF_MENU}.buttons.image` as const;
export const CONF_MENU_BUTTONS_LIVE = `${CONF_MENU}.buttons.live` as const;
export const CONF_MENU_BUTTONS_SNAPSHOTS = `${CONF_MENU}.buttons.snapshots` as const;
export const CONF_DIMENSIONS = 'dimensions' as const;
src/editor.ts
+209 -169
View File
@@ -66,14 +66,7 @@ import {
CONF_LIVE_PRELOAD,
CONF_LIVE_TRANSITION_EFFECT,
CONF_MENU_ALIGNMENT,
CONF_MENU_BUTTONS_CLIPS,
CONF_MENU_BUTTONS_FRIGATE,
CONF_MENU_BUTTONS_DOWNLOAD,
CONF_MENU_BUTTONS_FRIGATE_UI,
CONF_MENU_BUTTONS_FULLSCREEN,
CONF_MENU_BUTTONS_IMAGE,
CONF_MENU_BUTTONS_LIVE,
CONF_MENU_BUTTONS_SNAPSHOTS,
CONF_MENU_BUTTONS,
CONF_MENU_BUTTON_SIZE,
CONF_MENU_POSITION,
CONF_MENU_STYLE,
@@ -105,89 +98,79 @@ import {
import frigate_card_editor_style from './scss/editor.scss';
const MENU_BUTTONS = 'buttons';
const MENU_CAMERAS = 'cameras';
const MENU_OPTIONS = 'options';
interface EditorOptionsSet {
icon: string;
name: string;
secondary: string;
show: boolean;
}
interface EditorOptions {
[setName: string]: EditorOptionsSet;
}
interface EditorCameraTarget {
cameraIndex: number;
}
interface EditorOptionSetTarget {
optionSetName: string;
}
interface EditorSelectOption {
value: string;
label: string;
}
interface EditorMenuTarget {
domain: string;
key: string | number;
}
const options: EditorOptions = {
cameras: {
icon: 'video',
name: localize('editor.cameras'),
secondary: localize('editor.cameras_secondary'),
show: true,
},
view: {
icon: 'eye',
name: localize('editor.view'),
secondary: localize('editor.view_secondary'),
show: false,
},
menu: {
icon: 'menu',
name: localize('editor.menu'),
secondary: localize('editor.menu_secondary'),
show: false,
},
live: {
icon: 'cctv',
name: localize('editor.live'),
secondary: localize('editor.live_secondary'),
show: false,
},
event_viewer: {
icon: 'filmstrip',
name: localize('editor.event_viewer'),
secondary: localize('editor.event_viewer_secondary'),
show: false,
},
event_gallery: {
icon: 'grid',
name: localize('editor.event_gallery'),
secondary: localize('editor.event_gallery_secondary'),
show: false,
},
image: {
icon: 'image',
name: localize('editor.image'),
secondary: localize('editor.image_secondary'),
show: false,
},
timeline: {
icon: 'chart-gantt',
name: localize('editor.timeline'),
secondary: localize('editor.timeline_secondary'),
show: false,
},
dimensions: {
icon: 'aspect-ratio',
name: localize('editor.dimensions'),
secondary: localize('editor.dimensions_secondary'),
show: false,
},
overrides: {
icon: 'file-replace',
name: localize('editor.overrides'),
secondary: localize('editor.overrides_secondary'),
show: false,
},
};
@@ -200,7 +183,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
protected _configUpgradeable = false;
@property({ attribute: false })
protected _expandedCameraIndex: number | null = null;
protected _expandedMenus: Record<string, string | number> = {};
protected _viewModes: EditorSelectOption[] = [
{ value: '', label: '' },
@@ -409,8 +392,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
return html`
<div
class="option option-${optionSetName}"
@click=${this._toggleOptionHandler}
.optionSetName=${optionSetName}
@click=${this._toggleMenu}
.domain=${'options'}
.key=${optionSetName}
>
<div class="row">
<ha-icon .icon=${`mdi:${optionSet.icon}`}></ha-icon>
@@ -466,12 +450,16 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
* Render an option/"select" selector.
* @param configPath The configuration path to set/read.
* @param options The options to show in the selector.
* @param params Option parameters to control the selector.
* @returns A rendered template.
*/
protected _renderOptionSelector(
configPath: string,
options: string[] | { value: string; label: string }[],
multiple?: boolean,
params?: {
multiple?: boolean;
label?: string;
},
): TemplateResult | void {
if (!this._config) {
return;
@@ -481,9 +469,40 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
<ha-selector
.hass=${this.hass}
.selector=${{
select: { mode: 'dropdown', multiple: !!multiple, options: options },
select: { mode: 'dropdown', multiple: !!params?.multiple, options: options },
}}
.label=${this._getLabel(configPath)}
.label=${params?.label || this._getLabel(configPath)}
.value=${getConfigValue(this._config, configPath, '')}
.required=${false}
@value-changed=${(ev) => this._valueChangedHandler(configPath, ev)}
>
</ha-selector>
`;
}
/**
* Render an icon selector.
* @param configPath The configuration path to set/read.
* @param params Optional parameters to control the selector.
* @returns A rendered template.
*/
protected _renderIconSelector(
configPath: string,
params?: {
label?: string;
},
): TemplateResult | void {
if (!this._config) {
return;
}
return html`
<ha-selector
.hass=${this.hass}
.selector=${{
icon: {},
}}
.label=${params?.label || this._getLabel(configPath)}
.value=${getConfigValue(this._config, configPath, '')}
.required=${false}
@value-changed=${(ev) => this._valueChangedHandler(configPath, ev)}
@@ -495,29 +514,30 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
/**
* Render a number slider.
* @param configPath Configuration path of the variable.
* @param valueDefault The default value.
* @param icon The icon to use on the slider.
* @param min The minimum value.
* @param max The maximum value.
* @param params Optional parameters to control the selector.
* @returns A rendered template.
*/
protected _renderNumberInput(
configPath: string,
min?: number,
max?: number,
params?: {
min?: number;
max?: number;
label?: string;
default?: number;
},
): TemplateResult | void {
if (!this._config) {
return;
}
const value = getConfigValue(this._config, configPath);
const mode = max === undefined ? 'box' : 'slider';
const mode = params?.max === undefined ? 'box' : 'slider';
return html`
<ha-selector
.hass=${this.hass}
.selector=${{ number: { min: min || 0, max: max, mode: mode } }}
.label=${this._getLabel(configPath)}
.value=${value}
.selector=${{ number: { min: params?.min || 0, max: params?.max, mode: mode } }}
.label=${params?.label || this._getLabel(configPath)}
.value=${value ?? params?.default}
.required=${false}
@value-changed=${(ev) => this._valueChangedHandler(configPath, ev)}
>
@@ -550,6 +570,62 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
);
}
/**
* Render an editor menu for the card menu buttons.
* @param button The name of the button.
* @returns A rendered template.
*/
protected _renderMenuButton(button: string): TemplateResult {
const menuButtonAlignments: EditorSelectOption[] = [
{ value: '', label: '' },
{ value: 'matching', label: localize('config.menu.buttons.alignments.matching') },
{ value: 'opposing', label: localize('config.menu.buttons.alignments.opposing') },
];
return html`
<div
class="submenu-header"
@click=${this._toggleMenu}
.domain=${MENU_BUTTONS}
.key=${button}
>
<ha-icon .icon=${'mdi:gesture-tap-button'}></ha-icon>
<span
>${localize('editor.button') +
': ' +
localize(`config.${CONF_MENU_BUTTONS}.${button}`)}</span
>
</div>
${this._expandedMenus[MENU_BUTTONS] === button
? html` <div class="values">
${this._renderSwitch(
`${CONF_MENU_BUTTONS}.${button}.enabled`,
frigateCardConfigDefaults.menu.buttons[button]?.enabled ?? true,
{
label: localize('config.menu.buttons.enabled'),
},
)}
${this._renderOptionSelector(
`${CONF_MENU_BUTTONS}.${button}.alignment`,
menuButtonAlignments,
{
label: localize('config.menu.buttons.alignment'),
},
)}
${this._renderNumberInput(`${CONF_MENU_BUTTONS}.${button}.priority`, {
max: FRIGATE_MENU_PRIORITY_MAX,
default: frigateCardConfigDefaults.menu.buttons[button]?.priority,
label: localize('config.menu.buttons.priority'),
})}
${this._renderIconSelector(`${CONF_MENU_BUTTONS}.${button}.icon`, {
label: localize('config.menu.buttons.icon'),
})}
</div>`
: ''}
`;
}
/**
* Render a camera header.
* @param cameraIndex The index of the camera to edit/add.
@@ -564,9 +640,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
): TemplateResult {
return html`
<div
class="camera-header"
@click=${this._toggleCameraHandler}
.cameraIndex=${cameraIndex}
class="submenu-header"
@click=${this._toggleMenu}
.domain=${MENU_CAMERAS}
.key=${cameraIndex}
>
<ha-icon .icon=${addNewCamera ? 'mdi:video-plus' : 'mdi:video'}></ha-icon>
<span>
@@ -630,7 +707,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
return html`
${this._renderCameraHeader(cameraIndex, cameras[cameraIndex], addNewCamera)}
${this._expandedCameraIndex === cameraIndex
${this._expandedMenus[MENU_CAMERAS] === cameraIndex
? html` <div class="values">
<div class="controls">
<ha-icon-button
@@ -645,7 +722,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
modifyConfig((config: RawFrigateCardConfig): boolean => {
if (Array.isArray(config.cameras) && cameraIndex > 0) {
arrayMove(config.cameras, cameraIndex, cameraIndex - 1);
this._expandedCameraIndex = cameraIndex - 1;
this._openMenu(MENU_CAMERAS, cameraIndex - 1);
return true;
}
return false;
@@ -668,7 +745,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
cameraIndex < config.cameras.length - 1
) {
arrayMove(config.cameras, cameraIndex, cameraIndex + 1);
this._expandedCameraIndex = cameraIndex + 1;
this._openMenu(MENU_CAMERAS, cameraIndex + 1);
return true;
}
return false;
@@ -684,7 +761,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
modifyConfig((config: RawFrigateCardConfig): boolean => {
if (Array.isArray(config.cameras)) {
config.cameras.splice(cameraIndex, 1);
this._expandedCameraIndex = null;
this._closeMenu(MENU_CAMERAS);
return true;
}
return false;
@@ -736,7 +813,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
${this._renderOptionSelector(
getArrayConfigPath(CONF_CAMERAS_ARRAY_DEPENDENT_CAMERAS, cameraIndex),
dependentCameras,
true,
{
multiple: true,
},
)}
</div>`
: ``}
@@ -787,13 +866,15 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
* Render a boolean selector.
* @param configPath The configuration path to set/read.
* @param valueDefault The default switch value if unset.
* @param label An optional switch label.
* @param params Optional parameters to control the selector.
* @returns A rendered template.
*/
protected _renderSwitch(
configPath: string,
valueDefault: boolean,
label?: string,
params?: {
label?: string;
},
): TemplateResult | void {
if (!this._config) {
return;
@@ -803,7 +884,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
<ha-selector
.hass=${this.hass}
.selector=${{ boolean: {} }}
.label=${label || this._getLabel(configPath)}
.label=${params?.label || this._getLabel(configPath)}
.value=${getConfigValue(this._config, configPath, valueDefault)}
.required=${false}
@value-changed=${(ev) => this._valueChangedHandler(configPath, ev)}
@@ -824,9 +905,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
const defaults = frigateCardConfigDefaults;
const getShowButtonLabel = (configPath: string) =>
localize('editor.show_button') + ': ' + localize(`config.${configPath}`);
const cameras = (getConfigValue(this._config, CONF_CAMERAS) ||
[]) as RawFrigateCardConfigArray;
@@ -853,14 +931,14 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
: html``}
<div class="card-config">
${this._renderOptionSetHeader('cameras')}
${options.cameras.show
? html` <div class="cameras">
${this._expandedMenus[MENU_OPTIONS] === 'cameras'
? html` <div class="submenu">
${cameras.map((_, index) => this._renderCamera(cameras, index))}
${this._renderCamera(cameras, cameras.length, true)}
</div>`
: ''}
${this._renderOptionSetHeader('view')}
${options.view.show
${this._expandedMenus[MENU_OPTIONS] === 'view'
? html`
<div class="values">
${this._renderOptionSelector(CONF_VIEW_DEFAULT, this._viewModes)}
@@ -880,58 +958,32 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
`
: ''}
${this._renderOptionSetHeader('menu')}
${options.menu.show
${this._expandedMenus[MENU_OPTIONS] === 'menu'
? html`
<div class="values">
${this._renderOptionSelector(CONF_MENU_STYLE, this._menuStyles)}
${this._renderOptionSelector(CONF_MENU_POSITION, this._menuPositions)}
${this._renderOptionSelector(CONF_MENU_ALIGNMENT, this._menuAlignments)}
${this._renderNumberInput(CONF_MENU_BUTTON_SIZE, BUTTON_SIZE_MIN)}
${this._renderNumberInput(
CONF_MENU_BUTTONS_FRIGATE,
0,
FRIGATE_MENU_PRIORITY_MAX,
)}
${this._renderNumberInput(
CONF_MENU_BUTTONS_LIVE,
0,
FRIGATE_MENU_PRIORITY_MAX,
)}
${this._renderNumberInput(
CONF_MENU_BUTTONS_CLIPS,
0,
FRIGATE_MENU_PRIORITY_MAX,
)}
${this._renderNumberInput(
CONF_MENU_BUTTONS_SNAPSHOTS,
0,
FRIGATE_MENU_PRIORITY_MAX,
)}
${this._renderNumberInput(
CONF_MENU_BUTTONS_IMAGE,
0,
FRIGATE_MENU_PRIORITY_MAX,
)}
${this._renderNumberInput(
CONF_MENU_BUTTONS_DOWNLOAD,
0,
FRIGATE_MENU_PRIORITY_MAX,
)}
${this._renderNumberInput(
CONF_MENU_BUTTONS_FRIGATE_UI,
0,
FRIGATE_MENU_PRIORITY_MAX,
)}
${this._renderNumberInput(
CONF_MENU_BUTTONS_FULLSCREEN,
0,
FRIGATE_MENU_PRIORITY_MAX,
)}
${this._renderNumberInput(CONF_MENU_BUTTON_SIZE, {
min: BUTTON_SIZE_MIN,
})}
</div>
<div class="submenu">
${this._renderMenuButton('frigate')}
${this._renderMenuButton('live')}
${this._renderMenuButton('clips')}
${this._renderMenuButton('snapshots')}
${this._renderMenuButton('image')}
${this._renderMenuButton('download')}
${this._renderMenuButton('frigate_ui')}
${this._renderMenuButton('fullscreen')}
${this._renderMenuButton('timeline')}
</div>
</div>
`
: ''}
${this._renderOptionSetHeader('live')}
${options.live.show
${this._expandedMenus[MENU_OPTIONS] === 'live'
? html`
<div class="values">
${this._renderSwitch(CONF_LIVE_PRELOAD, defaults.live.preload)}
@@ -943,10 +995,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE,
this._liveNextPreviousControlStyles,
)}
${this._renderNumberInput(
CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE,
BUTTON_SIZE_MIN,
)}
${this._renderNumberInput(CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE, {
min: BUTTON_SIZE_MIN,
})}
${this._renderOptionSelector(
CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
this._thumbnailModes,
@@ -955,11 +1006,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA,
this._thumbnailMedias,
)}
${this._renderNumberInput(
CONF_LIVE_CONTROLS_THUMBNAILS_SIZE,
THUMBNAIL_WIDTH_MIN,
THUMBNAIL_WIDTH_MAX,
)}
${this._renderNumberInput(CONF_LIVE_CONTROLS_THUMBNAILS_SIZE, {
min: THUMBNAIL_WIDTH_MIN,
max: THUMBNAIL_WIDTH_MAX,
})}
${this._renderOptionSelector(
CONF_LIVE_CONTROLS_TITLE_MODE,
this._titleModes,
@@ -972,11 +1022,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
defaults.live.controls.thumbnails.show_controls,
)}
${this._renderNumberInput(
CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS,
0,
60,
)}
${this._renderNumberInput(CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS, {
min: 0,
max: 60,
})}
${this._renderOptionSelector(
CONF_LIVE_TRANSITION_EFFECT,
this._transitionEffects,
@@ -985,13 +1034,12 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
`
: ''}
${this._renderOptionSetHeader('event_gallery')}
${options.event_gallery.show
${this._expandedMenus[MENU_OPTIONS] === 'event_gallery'
? html` <div class="values">
${this._renderNumberInput(
CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE,
THUMBNAIL_WIDTH_MIN,
THUMBNAIL_WIDTH_MAX,
)}
${this._renderNumberInput(CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE, {
min: THUMBNAIL_WIDTH_MIN,
max: THUMBNAIL_WIDTH_MAX,
})}
${this._renderSwitch(
CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_DETAILS,
defaults.event_viewer.controls.thumbnails.show_details,
@@ -1003,7 +1051,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
</div>`
: ''}
${this._renderOptionSetHeader('event_viewer')}
${options.event_viewer.show
${this._expandedMenus[MENU_OPTIONS] === 'event_viewer'
? html` <div class="values">
${this._renderSwitch(
CONF_EVENT_VIEWER_AUTO_PLAY,
@@ -1025,19 +1073,17 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
this._eventViewerNextPreviousControlStyles,
)}
${this._renderNumberInput(
CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE,
BUTTON_SIZE_MIN,
)}
${this._renderNumberInput(CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE, {
min: BUTTON_SIZE_MIN,
})}
${this._renderOptionSelector(
CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE,
this._thumbnailModes,
)}
${this._renderNumberInput(
CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE,
THUMBNAIL_WIDTH_MIN,
THUMBNAIL_WIDTH_MAX,
)}
${this._renderNumberInput(CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE, {
min: THUMBNAIL_WIDTH_MIN,
max: THUMBNAIL_WIDTH_MAX,
})}
${this._renderSwitch(
CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS,
defaults.event_viewer.controls.thumbnails.show_details,
@@ -1052,8 +1098,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
)}
${this._renderNumberInput(
CONF_EVENT_VIEWER_CONTROLS_TITLE_DURATION_SECONDS,
0,
60,
{ min: 0, max: 60 },
)}
${this._renderOptionSelector(
CONF_EVENT_VIEWER_TRANSITION_EFFECT,
@@ -1062,7 +1107,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
</div>`
: ''}
${this._renderOptionSetHeader('image')}
${options.image.show
${this._expandedMenus[MENU_OPTIONS] === 'image'
? html` <div class="values">
${this._renderOptionSelector(CONF_IMAGE_MODE, this._imageModes)}
${this._renderStringInput(CONF_IMAGE_URL)}
@@ -1070,7 +1115,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
</div>`
: ''}
${this._renderOptionSetHeader('timeline')}
${options.timeline.show
${this._expandedMenus[MENU_OPTIONS] === 'timeline'
? html` <div class="values">
${this._renderNumberInput(CONF_TIMELINE_WINDOW_SECONDS)}
${this._renderNumberInput(CONF_TIMELINE_CLUSTERING_THRESHOLD)}
@@ -1082,11 +1127,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE,
this._thumbnailModes,
)}
${this._renderNumberInput(
CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE,
THUMBNAIL_WIDTH_MIN,
THUMBNAIL_WIDTH_MAX,
)}
${this._renderNumberInput(CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE, {
min: THUMBNAIL_WIDTH_MIN,
max: THUMBNAIL_WIDTH_MAX,
})}
${this._renderSwitch(
CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
defaults.timeline.controls.thumbnails.show_details,
@@ -1098,7 +1142,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
</div>`
: ''}
${this._renderOptionSetHeader('dimensions')}
${options.dimensions.show
${this._expandedMenus[MENU_OPTIONS] === 'dimensions'
? html` <div class="values">
${this._renderOptionSelector(
CONF_DIMENSIONS_ASPECT_RATIO_MODE,
@@ -1109,7 +1153,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
: ''}
${this._config['overrides'] !== undefined
? html` ${this._renderOptionSetHeader('overrides')}
${options.overrides.show
${this._expandedMenus[MENU_OPTIONS] === 'overrides'
? html` <div class="values">
${this._renderInfo(localize('config.overrides.info'))}
</div>`
@@ -1150,42 +1194,38 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
}
/**
* Display/hide a camera section.
* @param ev The event triggering the change.
* Close the editor menu with the given domain.
* @param targetDomain The menu domain to close.
*/
protected _toggleCameraHandler(ev: { target: EditorCameraTarget | null }): void {
if (ev && ev.target) {
this._expandedCameraIndex =
this._expandedCameraIndex == ev.target.cameraIndex
? null
: ev.target.cameraIndex;
}
protected _closeMenu(targetDomain: string) {
delete this._expandedMenus[targetDomain];
this.requestUpdate();
}
/**
* Handle a toggled set of options.
* @param ev The event triggering the change.
* Open an editor menu.
* @param targetDomain The menu domain to open.
* @param key The menu object key to open.
*/
protected _toggleOptionHandler(ev: { target: EditorOptionSetTarget | null }): void {
this._toggleOptionSet(ev, options);
protected _openMenu(targetDomain: string, key: number | string) {
this._expandedMenus[targetDomain] = key;
this.requestUpdate();
}
/**
* Toggle display of a set of options (e.g. 'Live')
* @param ev The event triggering the change.
* @param options The EditorOptions object.
* Toggle an editor menu.
* @param ev An event.
*/
protected _toggleOptionSet(
ev: { target: EditorOptionSetTarget | null },
options: EditorOptions,
): void {
protected _toggleMenu(ev: { target: EditorMenuTarget | null }): void {
if (ev && ev.target) {
const show = !options[ev.target.optionSetName].show;
for (const [key] of Object.entries(options)) {
options[key].show = false;
const domain = ev.target.domain;
const key = ev.target.key;
if (this._expandedMenus[domain] == key) {
this._closeMenu(domain);
} else {
this._openMenu(domain, key);
}
options[ev.target.optionSetName].show = show;
this.requestUpdate();
}
}
src/localize/languages/en.json
+16 -4
View File
@@ -159,10 +159,22 @@
"menu": {
"buttons": {
"frigate": "Frigate menu / Default view",
"frigate_ui": "Frigate user Interface",
"live": "Live",
"clips": "Clips",
"snapshots": "Snapshots",
"image": "Image",
"download": "Download",
"frigate_ui": "Frigate user interface",
"fullscreen": "Fullscreen",
"download": "Download event media",
"cameras": "Select camera"
"timeline": "Timeline",
"icon": "Icon",
"priority": "Priority",
"alignment": "Button alignment",
"alignments": {
"matching": "Matching the menu alignment",
"opposing": "Opposing the menu alignment"
},
"enabled": "Button enabled"
},
"style": "Menu style",
"styles": {
@@ -236,7 +248,7 @@
"image_secondary": "Static image view options",
"dimensions": "Dimensions",
"dimensions_secondary": "Dimensions & shape options",
"show_button": "Show button",
"button": "Button",
"upgrade": "Upgrade",
"upgrade_available": "An automatic card configuration upgrade is available",
"delete": "Delete",
src/scss/editor.scss
+8 -8
View File
@@ -40,35 +40,35 @@ div.upgrade span {
padding: 10px;
}
.camera-header {
.submenu-header {
display: flex;
margin-top: 4px;
cursor: pointer;
}
.camera-header * {
.submenu-header * {
flex-basis: auto;
// Only allow clicks on the outermost header.
// Only allow clicks on the header.
pointer-events: none;
}
.camera-header ha-icon {
.submenu-header ha-icon {
padding-right: 10px;
}
.camera-header .new-camera {
.submenu-header .new-camera {
font-style: italic;
color: var(--secondary-text-color, 'black');
}
.cameras {
.submenu {
margin: 5px 5px 10px 20px;
}
.cameras .controls {
.submenu .controls {
display: inline-block;
margin-left: auto;
margin-right: 0px;
margin-bottom: 5px;
}
.cameras .controls ha-icon-button.button {
.submenu .controls ha-icon-button.button {
--mdc-icon-button-size: 32px;
--mdc-icon-size: calc(var(--mdc-icon-button-size) / 2);
}
src/scss/menu.scss
+8 -7
View File
@@ -14,24 +14,25 @@
justify-content: space-between;
}
/**************************
* Aligned divs: near & far
**************************/
/***********************************
* Aligned divs: matching & opposing
***********************************/
div.near,
div.far {
div.matching,
div.opposing {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: flex-start;
// Allow the divs to be resized.
min-width: 0px;
min-height: 0px;
}
div.near {
div.matching {
justify-content: flex-start;
}
div.far {
div.opposing {
justify-content: flex-end;
}
src/types.ts
+57 -75
View File
@@ -327,20 +327,25 @@ export type CameraConfig = z.infer<typeof cameraConfigSchema>;
/**
* Custom Element Types.
*/
const menuBaseSchema = z.object({
priority: z.number().optional(),
alignment: z.enum(["near", "far"]).optional(),
enabled: z.boolean().default(true).optional(),
priority: z
.number()
.min(0)
.max(FRIGATE_MENU_PRIORITY_MAX)
.default(FRIGATE_MENU_PRIORITY_DEFAULT)
.optional(),
alignment: z.enum(['matching', 'opposing']).default('matching').optional(),
icon: z.string().optional(),
});
export const menuIconSchema = iconSchema
.extend({
type: z.literal('custom:frigate-card-menu-icon'),
})
.merge(menuBaseSchema);
export const menuIconSchema = menuBaseSchema.merge(iconSchema).extend({
type: z.literal('custom:frigate-card-menu-icon'),
});
export type MenuIcon = z.infer<typeof menuIconSchema>;
export const menuStateIconSchema = stateIconSchema
export const menuStateIconSchema = menuBaseSchema
.merge(stateIconSchema)
.extend({
type: z.literal('custom:frigate-card-menu-state-icon'),
})
@@ -355,12 +360,10 @@ const menuSubmenuItemSchema = elementsBaseSchema.extend({
});
export type MenuSubmenuItem = z.infer<typeof menuSubmenuItemSchema>;
export const menuSubmenuSchema = iconSchema
.extend({
type: z.literal('custom:frigate-card-menu-submenu'),
items: menuSubmenuItemSchema.array(),
})
.merge(menuBaseSchema);
export const menuSubmenuSchema = menuBaseSchema.merge(iconSchema).extend({
type: z.literal('custom:frigate-card-menu-submenu'),
items: menuSubmenuItemSchema.array(),
});
export type MenuSubmenu = z.infer<typeof menuSubmenuSchema>;
export type MenuItem = MenuIcon | MenuStateIcon | MenuSubmenu;
@@ -616,25 +619,44 @@ export type LiveConfig = z.infer<typeof liveConfigSchema>;
/**
* Menu configuration section.
*/
const visibleButtonDefault = {
priority: FRIGATE_MENU_PRIORITY_DEFAULT,
enabled: true,
};
const hiddenButtonDefault = {
priority: FRIGATE_MENU_PRIORITY_DEFAULT,
enabled: false,
};
const menuConfigDefault = {
style: 'hidden' as const,
position: 'top' as const,
alignment: 'left' as const,
buttons: {
frigate: FRIGATE_MENU_PRIORITY_DEFAULT,
cameras: FRIGATE_MENU_PRIORITY_DEFAULT,
live: FRIGATE_MENU_PRIORITY_DEFAULT,
clips: FRIGATE_MENU_PRIORITY_DEFAULT,
snapshots: FRIGATE_MENU_PRIORITY_DEFAULT,
image: 0,
timeline: FRIGATE_MENU_PRIORITY_DEFAULT,
download: FRIGATE_MENU_PRIORITY_DEFAULT,
frigate_ui: FRIGATE_MENU_PRIORITY_DEFAULT,
fullscreen: FRIGATE_MENU_PRIORITY_DEFAULT,
frigate: visibleButtonDefault,
cameras: visibleButtonDefault,
live: visibleButtonDefault,
clips: visibleButtonDefault,
snapshots: visibleButtonDefault,
image: hiddenButtonDefault,
timeline: visibleButtonDefault,
download: visibleButtonDefault,
frigate_ui: visibleButtonDefault,
fullscreen: visibleButtonDefault,
},
button_size: 40,
};
const visibleButtonSchema = menuBaseSchema.extend({
enabled: menuBaseSchema.shape.enabled.default(visibleButtonDefault.enabled),
priority: menuBaseSchema.shape.priority.default(visibleButtonDefault.priority),
});
const hiddenButtonSchema = menuBaseSchema.extend({
enabled: menuBaseSchema.shape.enabled.default(hiddenButtonDefault.enabled),
priority: menuBaseSchema.shape.priority.default(hiddenButtonDefault.priority),
});
const menuConfigSchema = z
.object({
style: z.enum(FRIGATE_MENU_STYLES).default(menuConfigDefault.style),
@@ -642,56 +664,16 @@ const menuConfigSchema = z
alignment: z.enum(FRIGATE_MENU_ALIGNMENTS).default(menuConfigDefault.alignment),
buttons: z
.object({
frigate: z
.number()
.min(0)
.max(FRIGATE_MENU_PRIORITY_MAX)
.default(menuConfigDefault.buttons.frigate),
cameras: z
.number()
.min(0)
.max(FRIGATE_MENU_PRIORITY_MAX)
.default(menuConfigDefault.buttons.cameras),
live: z
.number()
.min(0)
.max(FRIGATE_MENU_PRIORITY_MAX)
.default(menuConfigDefault.buttons.live),
clips: z
.number()
.min(0)
.max(FRIGATE_MENU_PRIORITY_MAX)
.default(menuConfigDefault.buttons.clips),
snapshots: z
.number()
.min(0)
.max(FRIGATE_MENU_PRIORITY_MAX)
.default(menuConfigDefault.buttons.snapshots),
image: z
.number()
.min(0)
.max(FRIGATE_MENU_PRIORITY_MAX)
.default(menuConfigDefault.buttons.image),
timeline: z
.number()
.min(0)
.max(FRIGATE_MENU_PRIORITY_MAX)
.default(menuConfigDefault.buttons.timeline),
download: z
.number()
.min(0)
.max(FRIGATE_MENU_PRIORITY_MAX)
.default(menuConfigDefault.buttons.download),
frigate_ui: z
.number()
.min(0)
.max(FRIGATE_MENU_PRIORITY_MAX)
.default(menuConfigDefault.buttons.frigate_ui),
fullscreen: z
.number()
.min(0)
.max(FRIGATE_MENU_PRIORITY_MAX)
.default(menuConfigDefault.buttons.fullscreen),
frigate: visibleButtonSchema.default(menuConfigDefault.buttons.frigate),
cameras: visibleButtonSchema.default(menuConfigDefault.buttons.cameras),
live: visibleButtonSchema.default(menuConfigDefault.buttons.live),
clips: visibleButtonSchema.default(menuConfigDefault.buttons.clips),
snapshots: visibleButtonSchema.default(menuConfigDefault.buttons.snapshots),
image: hiddenButtonSchema.default(menuConfigDefault.buttons.image),
timeline: visibleButtonSchema.default(menuConfigDefault.buttons.timeline),
download: visibleButtonSchema.default(menuConfigDefault.buttons.download),
frigate_ui: visibleButtonSchema.default(menuConfigDefault.buttons.frigate_ui),
fullscreen: visibleButtonSchema.default(menuConfigDefault.buttons.fullscreen),
})
.default(menuConfigDefault.buttons),
button_size: z.number().min(BUTTON_SIZE_MIN).default(menuConfigDefault.button_size),