Refactor menu code and add tests.
This commit is contained in:
Dermot Duffy
@@ -0,0 +1,519 @@
|
||||
import { HomeAssistant } from '@dermotduffy/custom-card-helpers';
|
||||
import { StyleInfo } from 'lit/directives/style-map';
|
||||
import { CameraManager } from '../camera-manager/manager';
|
||||
import { MediaPlayerManager } from '../card-controller/media-player-manager';
|
||||
import { MicrophoneManager } from '../card-controller/microphone-manager';
|
||||
import {
|
||||
FrigateCardConfig,
|
||||
FrigateCardCustomAction,
|
||||
FRIGATE_CARD_VIEWS_USER_SPECIFIED,
|
||||
MenuItem,
|
||||
} from '../config/types';
|
||||
import { FRIGATE_BUTTON_MENU_ICON } from '../const';
|
||||
import { localize } from '../localize/localize.js';
|
||||
import { MediaLoadedInfo } from '../types';
|
||||
import {
|
||||
createFrigateCardCameraAction,
|
||||
createFrigateCardDisplayModeAction,
|
||||
createFrigateCardMediaPlayerAction,
|
||||
createFrigateCardShowPTZAction,
|
||||
createFrigateCardSimpleAction,
|
||||
} from '../utils/action';
|
||||
import { getEntityIcon, getEntityTitle } from '../utils/ha';
|
||||
import { hasUsablePTZ } from '../utils/ptz';
|
||||
import { hasSubstream } from '../utils/substream';
|
||||
import { View } from '../view/view';
|
||||
|
||||
export interface MenuButtonControllerOptions {
|
||||
currentMediaLoadedInfo?: MediaLoadedInfo | null;
|
||||
showCameraUIButton?: boolean;
|
||||
inFullscreenMode?: boolean;
|
||||
inExpandedMode?: boolean;
|
||||
microphoneManager?: MicrophoneManager | null;
|
||||
mediaPlayerController?: MediaPlayerManager | null;
|
||||
}
|
||||
|
||||
export class MenuButtonController {
|
||||
// Array of dynamic menu buttons to be added to menu.
|
||||
protected _dynamicMenuButtons: MenuItem[] = [];
|
||||
|
||||
public addDynamicMenuButton(button: MenuItem): void {
|
||||
if (!this._dynamicMenuButtons.includes(button)) {
|
||||
this._dynamicMenuButtons.push(button);
|
||||
}
|
||||
}
|
||||
|
||||
public removeDynamicMenuButton(button: MenuItem): void {
|
||||
this._dynamicMenuButtons = this._dynamicMenuButtons.filter(
|
||||
(existingButton) => existingButton != button,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the menu buttons to display.
|
||||
* @returns An array of menu buttons.
|
||||
*/
|
||||
public calculateButtons(
|
||||
hass: HomeAssistant,
|
||||
config: FrigateCardConfig,
|
||||
cameraManager: CameraManager,
|
||||
view: View,
|
||||
options?: MenuButtonControllerOptions,
|
||||
): MenuItem[] {
|
||||
const visibleCameraIDs = cameraManager.getStore().getVisibleCameraIDs();
|
||||
const selectedCameraID = view.camera;
|
||||
const selectedCameraConfig = cameraManager
|
||||
.getStore()
|
||||
.getCameraConfig(selectedCameraID);
|
||||
const allSelectedCameraIDs = cameraManager
|
||||
.getStore()
|
||||
.getAllDependentCameras(selectedCameraID);
|
||||
const selectedMedia = view.queryResults?.getSelectedResult();
|
||||
|
||||
const selectedCameraCapabilities =
|
||||
cameraManager.getCameraCapabilities(selectedCameraID);
|
||||
const aggregateCapabilities =
|
||||
cameraManager.getAggregateCameraCapabilities(allSelectedCameraIDs);
|
||||
const mediaCapabilities = selectedMedia
|
||||
? cameraManager?.getMediaCapabilities(selectedMedia)
|
||||
: null;
|
||||
|
||||
const buttons: MenuItem[] = [];
|
||||
buttons.push({
|
||||
// Use a magic icon value that the menu will use to render the custom
|
||||
// Frigate icon.
|
||||
icon: FRIGATE_BUTTON_MENU_ICON,
|
||||
...config.menu.buttons.frigate,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.frigate'),
|
||||
tap_action:
|
||||
config.menu?.style === 'hidden'
|
||||
? (createFrigateCardSimpleAction('menu_toggle') as FrigateCardCustomAction)
|
||||
: (createFrigateCardSimpleAction('default') as FrigateCardCustomAction),
|
||||
hold_action: createFrigateCardSimpleAction(
|
||||
'diagnostics',
|
||||
) as FrigateCardCustomAction,
|
||||
});
|
||||
|
||||
if (visibleCameraIDs.size) {
|
||||
const menuItems = Array.from(
|
||||
cameraManager.getStore().getCameraConfigEntries(visibleCameraIDs),
|
||||
([cameraID, config]) => {
|
||||
const action = createFrigateCardCameraAction('camera_select', cameraID);
|
||||
const metadata = cameraManager.getCameraMetadata(cameraID);
|
||||
|
||||
return {
|
||||
enabled: true,
|
||||
icon: metadata?.icon,
|
||||
entity: config.camera_entity,
|
||||
state_color: true,
|
||||
title: metadata?.title,
|
||||
selected: selectedCameraID === cameraID,
|
||||
...(action && { tap_action: action }),
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
buttons.push({
|
||||
icon: 'mdi:video-switch',
|
||||
...config.menu.buttons.cameras,
|
||||
type: 'custom:frigate-card-menu-submenu',
|
||||
title: localize('config.menu.buttons.cameras'),
|
||||
items: menuItems,
|
||||
});
|
||||
}
|
||||
|
||||
if (selectedCameraID && allSelectedCameraIDs && view.is('live')) {
|
||||
const dependencies = [...allSelectedCameraIDs];
|
||||
const override = view.context?.live?.overrides?.get(selectedCameraID);
|
||||
|
||||
if (dependencies.length === 2) {
|
||||
// If there are only two dependencies (the main camera, and 1 other)
|
||||
// then use a button not a menu to toggle.
|
||||
buttons.push({
|
||||
icon: 'mdi:video-input-component',
|
||||
style:
|
||||
override && override !== selectedCameraID ? this._getEmphasizedStyle() : {},
|
||||
title: localize('config.menu.buttons.substreams'),
|
||||
...config.menu.buttons.substreams,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
tap_action: createFrigateCardSimpleAction(
|
||||
hasSubstream(view) ? 'live_substream_off' : 'live_substream_on',
|
||||
) as FrigateCardCustomAction,
|
||||
});
|
||||
} else if (dependencies.length > 2) {
|
||||
const menuItems = Array.from(dependencies, (cameraID) => {
|
||||
const action = createFrigateCardCameraAction(
|
||||
'live_substream_select',
|
||||
cameraID,
|
||||
);
|
||||
const metadata = cameraManager.getCameraMetadata(cameraID) ?? undefined;
|
||||
const cameraConfig = cameraManager.getStore().getCameraConfig(cameraID);
|
||||
return {
|
||||
enabled: true,
|
||||
icon: metadata?.icon,
|
||||
entity: cameraConfig?.camera_entity,
|
||||
state_color: true,
|
||||
title: metadata?.title,
|
||||
selected:
|
||||
(view.context?.live?.overrides?.get(selectedCameraID) ??
|
||||
selectedCameraID) === cameraID,
|
||||
...(action && { tap_action: action }),
|
||||
};
|
||||
});
|
||||
|
||||
buttons.push({
|
||||
icon: 'mdi:video-input-component',
|
||||
title: localize('config.menu.buttons.substreams'),
|
||||
style:
|
||||
override && override !== selectedCameraID ? this._getEmphasizedStyle() : {},
|
||||
...config.menu.buttons.substreams,
|
||||
type: 'custom:frigate-card-menu-submenu',
|
||||
items: menuItems,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
buttons.push({
|
||||
icon: 'mdi:cctv',
|
||||
...config.menu.buttons.live,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.view.views.live'),
|
||||
style: view.is('live') ? this._getEmphasizedStyle() : {},
|
||||
tap_action: createFrigateCardSimpleAction('live') as FrigateCardCustomAction,
|
||||
});
|
||||
|
||||
if (aggregateCapabilities?.supportsClips) {
|
||||
buttons.push({
|
||||
icon: 'mdi:filmstrip',
|
||||
...config.menu.buttons.clips,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.view.views.clips'),
|
||||
style: view?.is('clips') ? this._getEmphasizedStyle() : {},
|
||||
tap_action: createFrigateCardSimpleAction('clips') as FrigateCardCustomAction,
|
||||
hold_action: createFrigateCardSimpleAction('clip') as FrigateCardCustomAction,
|
||||
});
|
||||
}
|
||||
|
||||
if (aggregateCapabilities?.supportsSnapshots) {
|
||||
buttons.push({
|
||||
icon: 'mdi:camera',
|
||||
...config.menu.buttons.snapshots,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.view.views.snapshots'),
|
||||
style: view?.is('snapshots') ? this._getEmphasizedStyle() : {},
|
||||
tap_action: createFrigateCardSimpleAction(
|
||||
'snapshots',
|
||||
) as FrigateCardCustomAction,
|
||||
hold_action: createFrigateCardSimpleAction(
|
||||
'snapshot',
|
||||
) as FrigateCardCustomAction,
|
||||
});
|
||||
}
|
||||
|
||||
if (aggregateCapabilities?.supportsRecordings) {
|
||||
buttons.push({
|
||||
icon: 'mdi:album',
|
||||
...config.menu.buttons.recordings,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.view.views.recordings'),
|
||||
style: view.is('recordings') ? this._getEmphasizedStyle() : {},
|
||||
tap_action: createFrigateCardSimpleAction(
|
||||
'recordings',
|
||||
) as FrigateCardCustomAction,
|
||||
hold_action: createFrigateCardSimpleAction(
|
||||
'recording',
|
||||
) as FrigateCardCustomAction,
|
||||
});
|
||||
}
|
||||
|
||||
buttons.push({
|
||||
icon: 'mdi:image',
|
||||
...config.menu.buttons.image,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.view.views.image'),
|
||||
style: view?.is('image') ? this._getEmphasizedStyle() : {},
|
||||
tap_action: createFrigateCardSimpleAction('image') as FrigateCardCustomAction,
|
||||
});
|
||||
|
||||
// Don't show the timeline button unless there's at least one non-birdseye
|
||||
// camera with a Frigate camera name.
|
||||
if (aggregateCapabilities?.supportsTimeline) {
|
||||
buttons.push({
|
||||
icon: 'mdi:chart-gantt',
|
||||
...config.menu.buttons.timeline,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.view.views.timeline'),
|
||||
style: view.is('timeline') ? this._getEmphasizedStyle() : {},
|
||||
tap_action: createFrigateCardSimpleAction('timeline') as FrigateCardCustomAction,
|
||||
});
|
||||
}
|
||||
|
||||
if (mediaCapabilities?.canDownload && !this._isBeingCasted()) {
|
||||
buttons.push({
|
||||
icon: 'mdi:download',
|
||||
...config.menu.buttons.download,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.download'),
|
||||
tap_action: createFrigateCardSimpleAction('download') as FrigateCardCustomAction,
|
||||
});
|
||||
}
|
||||
|
||||
if (options?.showCameraUIButton) {
|
||||
buttons.push({
|
||||
icon: 'mdi:web',
|
||||
...config.menu.buttons.camera_ui,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.camera_ui'),
|
||||
tap_action: createFrigateCardSimpleAction(
|
||||
'camera_ui',
|
||||
) as FrigateCardCustomAction,
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
options?.microphoneManager &&
|
||||
options?.currentMediaLoadedInfo?.capabilities?.supports2WayAudio
|
||||
) {
|
||||
const forbidden = options.microphoneManager.isForbidden();
|
||||
const muted = options.microphoneManager.isMuted();
|
||||
const buttonType = config.menu.buttons.microphone.type;
|
||||
buttons.push({
|
||||
icon: forbidden
|
||||
? 'mdi:microphone-message-off'
|
||||
: muted
|
||||
? 'mdi:microphone-off'
|
||||
: 'mdi:microphone',
|
||||
...config.menu.buttons.microphone,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.microphone'),
|
||||
style: forbidden || muted ? {} : this._getEmphasizedStyle(true),
|
||||
...(!forbidden &&
|
||||
buttonType === 'momentary' && {
|
||||
start_tap_action: createFrigateCardSimpleAction(
|
||||
'microphone_unmute',
|
||||
) as FrigateCardCustomAction,
|
||||
end_tap_action: createFrigateCardSimpleAction(
|
||||
'microphone_mute',
|
||||
) as FrigateCardCustomAction,
|
||||
}),
|
||||
...(!forbidden &&
|
||||
buttonType === 'toggle' && {
|
||||
tap_action: createFrigateCardSimpleAction(
|
||||
options.microphoneManager.isMuted()
|
||||
? 'microphone_unmute'
|
||||
: 'microphone_mute',
|
||||
) as FrigateCardCustomAction,
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
if (!this._isBeingCasted()) {
|
||||
buttons.push({
|
||||
icon: options?.inFullscreenMode ? 'mdi:fullscreen-exit' : 'mdi:fullscreen',
|
||||
...config.menu.buttons.fullscreen,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.fullscreen'),
|
||||
tap_action: createFrigateCardSimpleAction(
|
||||
'fullscreen',
|
||||
) as FrigateCardCustomAction,
|
||||
style: options?.inFullscreenMode ? this._getEmphasizedStyle() : {},
|
||||
});
|
||||
}
|
||||
|
||||
buttons.push({
|
||||
icon: options?.inExpandedMode ? 'mdi:arrow-collapse-all' : 'mdi:arrow-expand-all',
|
||||
...config.menu.buttons.expand,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.expand'),
|
||||
tap_action: createFrigateCardSimpleAction('expand') as FrigateCardCustomAction,
|
||||
style: options?.inExpandedMode ? this._getEmphasizedStyle() : {},
|
||||
});
|
||||
|
||||
if (
|
||||
options?.mediaPlayerController?.hasMediaPlayers() &&
|
||||
(view?.isViewerView() || (view.is('live') && selectedCameraConfig?.camera_entity))
|
||||
) {
|
||||
const mediaPlayerItems = options.mediaPlayerController
|
||||
.getMediaPlayers()
|
||||
.map((playerEntityID) => {
|
||||
const title = getEntityTitle(hass, playerEntityID) || playerEntityID;
|
||||
const state = hass.states[playerEntityID];
|
||||
const playAction = createFrigateCardMediaPlayerAction(playerEntityID, 'play');
|
||||
const stopAction = createFrigateCardMediaPlayerAction(playerEntityID, 'stop');
|
||||
const disabled = !state || state.state === 'unavailable';
|
||||
|
||||
return {
|
||||
enabled: true,
|
||||
selected: false,
|
||||
icon: getEntityIcon(hass, playerEntityID),
|
||||
entity: playerEntityID,
|
||||
state_color: false,
|
||||
title: title,
|
||||
disabled: disabled,
|
||||
...(!disabled && playAction && { tap_action: playAction }),
|
||||
...(!disabled && stopAction && { hold_action: stopAction }),
|
||||
};
|
||||
});
|
||||
|
||||
buttons.push({
|
||||
icon: 'mdi:cast',
|
||||
...config.menu.buttons.media_player,
|
||||
type: 'custom:frigate-card-menu-submenu',
|
||||
title: localize('config.menu.buttons.media_player'),
|
||||
items: mediaPlayerItems,
|
||||
});
|
||||
}
|
||||
|
||||
if (options?.currentMediaLoadedInfo && options.currentMediaLoadedInfo.player) {
|
||||
if (options.currentMediaLoadedInfo.capabilities?.supportsPause) {
|
||||
const paused = options.currentMediaLoadedInfo.player.isPaused();
|
||||
buttons.push({
|
||||
icon: paused ? 'mdi:play' : 'mdi:pause',
|
||||
...config.menu.buttons.play,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.play'),
|
||||
tap_action: createFrigateCardSimpleAction(
|
||||
paused ? 'play' : 'pause',
|
||||
) as FrigateCardCustomAction,
|
||||
});
|
||||
}
|
||||
|
||||
if (options.currentMediaLoadedInfo.capabilities?.hasAudio) {
|
||||
const muted = options.currentMediaLoadedInfo.player.isMuted();
|
||||
buttons.push({
|
||||
icon: muted ? 'mdi:volume-off' : 'mdi:volume-high',
|
||||
...config.menu.buttons.mute,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.mute'),
|
||||
tap_action: createFrigateCardSimpleAction(
|
||||
muted ? 'unmute' : 'mute',
|
||||
) as FrigateCardCustomAction,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (options?.currentMediaLoadedInfo && options.currentMediaLoadedInfo.player) {
|
||||
buttons.push({
|
||||
icon: 'mdi:monitor-screenshot',
|
||||
...config.menu.buttons.screenshot,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.screenshot'),
|
||||
tap_action: createFrigateCardSimpleAction(
|
||||
'screenshot',
|
||||
) as FrigateCardCustomAction,
|
||||
});
|
||||
}
|
||||
|
||||
if (view.supportsMultipleDisplayModes() && visibleCameraIDs.size > 1) {
|
||||
const isGrid = view.isGrid();
|
||||
buttons.push({
|
||||
icon: isGrid ? 'mdi:grid-off' : 'mdi:grid',
|
||||
...config.menu.buttons.display_mode,
|
||||
style: isGrid ? this._getEmphasizedStyle() : {},
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: isGrid
|
||||
? localize('display_modes.single')
|
||||
: localize('display_modes.grid'),
|
||||
tap_action: createFrigateCardDisplayModeAction(isGrid ? 'single' : 'grid'),
|
||||
});
|
||||
}
|
||||
|
||||
if (hasUsablePTZ(selectedCameraCapabilities, config.live.controls.ptz)) {
|
||||
const isOn =
|
||||
view.context?.live?.ptzVisible === false
|
||||
? false
|
||||
: config.live.controls.ptz.mode === 'on';
|
||||
buttons.push({
|
||||
icon: 'mdi:pan',
|
||||
...config.menu.buttons.ptz,
|
||||
style: isOn ? this._getEmphasizedStyle() : {},
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.ptz'),
|
||||
tap_action: createFrigateCardShowPTZAction(!isOn),
|
||||
});
|
||||
}
|
||||
|
||||
const styledDynamicButtons = this._dynamicMenuButtons.map((button) => ({
|
||||
style: this._getStyleFromActions(config, view, button, options),
|
||||
...button,
|
||||
}));
|
||||
|
||||
return buttons.concat(styledDynamicButtons);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the style of emphasized menu items.
|
||||
* @returns A StyleInfo.
|
||||
*/
|
||||
protected _getEmphasizedStyle(critical?: boolean): StyleInfo {
|
||||
if (critical) {
|
||||
return {
|
||||
animation: 'pulse 3s infinite',
|
||||
color: 'var(--error-color, white)',
|
||||
};
|
||||
}
|
||||
return {
|
||||
color: 'var(--primary-color, white)',
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a button determine if the style should be emphasized by examining all
|
||||
* of the actions sequentially.
|
||||
* @param button The button to examine.
|
||||
* @returns A StyleInfo object.
|
||||
*/
|
||||
protected _getStyleFromActions(
|
||||
config: FrigateCardConfig,
|
||||
view: View,
|
||||
button: MenuItem,
|
||||
options?: MenuButtonControllerOptions,
|
||||
): StyleInfo {
|
||||
for (const actionSet of [
|
||||
button.tap_action,
|
||||
button.double_tap_action,
|
||||
button.hold_action,
|
||||
button.start_tap_action,
|
||||
button.end_tap_action,
|
||||
]) {
|
||||
const actions = Array.isArray(actionSet) ? actionSet : [actionSet];
|
||||
for (const action of actions) {
|
||||
// All frigate card actions will have action of 'fire-dom-event' and
|
||||
// styling only applies to those.
|
||||
if (
|
||||
!action ||
|
||||
action.action !== 'fire-dom-event' ||
|
||||
!('frigate_card_action' in action)
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
const frigateCardAction = action as FrigateCardCustomAction;
|
||||
if (
|
||||
FRIGATE_CARD_VIEWS_USER_SPECIFIED.some(
|
||||
(viewName) =>
|
||||
viewName === frigateCardAction.frigate_card_action &&
|
||||
view?.is(frigateCardAction.frigate_card_action),
|
||||
) ||
|
||||
(frigateCardAction.frigate_card_action === 'default' &&
|
||||
view.is(config.view.default)) ||
|
||||
(frigateCardAction.frigate_card_action === 'fullscreen' &&
|
||||
!!options?.inFullscreenMode) ||
|
||||
(frigateCardAction.frigate_card_action === 'camera_select' &&
|
||||
view.camera === frigateCardAction.camera)
|
||||
) {
|
||||
return this._getEmphasizedStyle();
|
||||
}
|
||||
}
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine if the card is currently being casted.
|
||||
* @returns
|
||||
*/
|
||||
protected _isBeingCasted(): boolean {
|
||||
return !!navigator.userAgent.match(/CrKey\//);
|
||||
}
|
||||
}
|
||||
@@ -1,519 +1,215 @@
|
||||
import { HomeAssistant } from '@dermotduffy/custom-card-helpers';
|
||||
import { StyleInfo } from 'lit/directives/style-map';
|
||||
import { CameraManager } from '../camera-manager/manager';
|
||||
import { MediaPlayerManager } from '../card-controller/media-player-manager';
|
||||
import { MicrophoneManager } from '../card-controller/microphone-manager';
|
||||
import {
|
||||
FrigateCardConfig,
|
||||
FrigateCardCustomAction,
|
||||
FRIGATE_CARD_VIEWS_USER_SPECIFIED,
|
||||
import { HASSDomEvent, HomeAssistant } from '@dermotduffy/custom-card-helpers';
|
||||
import { LitElement } from 'lit';
|
||||
import { FRIGATE_ICON_SVG_PATH } from '../camera-manager/frigate/icon.js';
|
||||
import type {
|
||||
ActionType,
|
||||
ActionsConfig,
|
||||
MenuConfig,
|
||||
MenuItem,
|
||||
} from '../config/types';
|
||||
import { FRIGATE_BUTTON_MENU_ICON } from '../const';
|
||||
import { localize } from '../localize/localize.js';
|
||||
import { MediaLoadedInfo } from '../types';
|
||||
} from '../config/types.js';
|
||||
import { FRIGATE_BUTTON_MENU_ICON } from '../const.js';
|
||||
import { StateParameters } from '../types.js';
|
||||
import {
|
||||
createFrigateCardCameraAction,
|
||||
createFrigateCardDisplayModeAction,
|
||||
createFrigateCardMediaPlayerAction,
|
||||
createFrigateCardShowPTZAction,
|
||||
createFrigateCardSimpleAction,
|
||||
convertActionToFrigateCardCustomAction,
|
||||
frigateCardHandleActionConfig,
|
||||
getActionConfigGivenAction,
|
||||
} from '../utils/action';
|
||||
import { getEntityIcon, getEntityTitle } from '../utils/ha';
|
||||
import { hasUsablePTZ } from '../utils/ptz';
|
||||
import { hasSubstream } from '../utils/substream';
|
||||
import { View } from '../view/view';
|
||||
import { arrayify, isTruthy } from '../utils/basic.js';
|
||||
import { refreshDynamicStateParameters } from '../utils/ha/index.js';
|
||||
|
||||
export interface MenuButtonControllerOptions {
|
||||
currentMediaLoadedInfo?: MediaLoadedInfo | null;
|
||||
showCameraUIButton?: boolean;
|
||||
inFullscreenMode?: boolean;
|
||||
inExpandedMode?: boolean;
|
||||
microphoneManager?: MicrophoneManager | null;
|
||||
mediaPlayerController?: MediaPlayerManager | null;
|
||||
}
|
||||
export class MenuController {
|
||||
protected _host: LitElement;
|
||||
protected _config: MenuConfig | null = null;
|
||||
protected _buttons: MenuItem[] = [];
|
||||
protected _expanded = false;
|
||||
|
||||
export class MenuButtonController {
|
||||
// Array of dynamic menu buttons to be added to menu.
|
||||
protected _dynamicMenuButtons: MenuItem[] = [];
|
||||
|
||||
public addDynamicMenuButton(button: MenuItem): void {
|
||||
if (!this._dynamicMenuButtons.includes(button)) {
|
||||
this._dynamicMenuButtons.push(button);
|
||||
}
|
||||
constructor(host: LitElement) {
|
||||
this._host = host;
|
||||
}
|
||||
|
||||
public removeDynamicMenuButton(button: MenuItem): void {
|
||||
this._dynamicMenuButtons = this._dynamicMenuButtons.filter(
|
||||
(existingButton) => existingButton != button,
|
||||
public setMenuConfig(config: MenuConfig): void {
|
||||
this._config = config;
|
||||
this._host.style.setProperty(
|
||||
'--frigate-card-menu-button-size',
|
||||
`${config.button_size}px`,
|
||||
);
|
||||
|
||||
// Store the menu style, position and alignment as attributes (used for
|
||||
// styling).
|
||||
this._host.setAttribute('data-style', config.style);
|
||||
this._host.setAttribute('data-position', config.position);
|
||||
this._host.setAttribute('data-alignment', config.alignment);
|
||||
|
||||
this._sortButtons();
|
||||
this._host.requestUpdate();
|
||||
}
|
||||
|
||||
public getMenuConfig(): MenuConfig | null {
|
||||
return this._config;
|
||||
}
|
||||
|
||||
public isExpanded(): boolean {
|
||||
return this._expanded;
|
||||
}
|
||||
|
||||
public setButtons(buttons: MenuItem[]): void {
|
||||
this._buttons = buttons;
|
||||
this._sortButtons();
|
||||
this._host.requestUpdate();
|
||||
}
|
||||
|
||||
public getButtons(alignment: 'matching' | 'opposing'): MenuItem[] {
|
||||
const style = this._config?.style;
|
||||
|
||||
const aligned = (button: MenuItem): boolean => {
|
||||
return (
|
||||
button.alignment === alignment || (alignment === 'matching' && !button.alignment)
|
||||
);
|
||||
};
|
||||
|
||||
const enabled = (button: MenuItem): boolean => {
|
||||
return button.enabled !== false;
|
||||
};
|
||||
|
||||
const suitableToShowIfHiddenMenu = (button: MenuItem): boolean => {
|
||||
// If the hidden menu isn't expanded, only show the Frigate button.
|
||||
return (
|
||||
style !== 'hidden' || this._expanded || button.icon === FRIGATE_BUTTON_MENU_ICON
|
||||
);
|
||||
};
|
||||
|
||||
return this._buttons.filter(
|
||||
(button) =>
|
||||
enabled(button) && aligned(button) && suitableToShowIfHiddenMenu(button),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the menu buttons to display.
|
||||
* @returns An array of menu buttons.
|
||||
*/
|
||||
public calculateButtons(
|
||||
public setExpanded(expanded: boolean): void {
|
||||
this._expanded = expanded;
|
||||
this._host.setAttribute('expanded', '');
|
||||
this._host.requestUpdate();
|
||||
}
|
||||
|
||||
public toggleExpanded(): void {
|
||||
this.setExpanded(!this._expanded);
|
||||
}
|
||||
|
||||
public actionHandler(
|
||||
hass: HomeAssistant,
|
||||
config: FrigateCardConfig,
|
||||
cameraManager: CameraManager,
|
||||
view: View,
|
||||
options?: MenuButtonControllerOptions,
|
||||
): MenuItem[] {
|
||||
const visibleCameraIDs = cameraManager.getStore().getVisibleCameraIDs();
|
||||
const selectedCameraID = view.camera;
|
||||
const selectedCameraConfig = cameraManager
|
||||
.getStore()
|
||||
.getCameraConfig(selectedCameraID);
|
||||
const allSelectedCameraIDs = cameraManager
|
||||
.getStore()
|
||||
.getAllDependentCameras(selectedCameraID);
|
||||
const selectedMedia = view.queryResults?.getSelectedResult();
|
||||
ev: HASSDomEvent<{ action: string; config?: ActionsConfig }>,
|
||||
config?: ActionsConfig,
|
||||
): void {
|
||||
// These interactions should only be handled by the menu, as nothing
|
||||
// upstream has the user-provided configuration.
|
||||
ev.stopPropagation();
|
||||
|
||||
const selectedCameraCapabilities =
|
||||
cameraManager.getCameraCapabilities(selectedCameraID);
|
||||
const aggregateCapabilities =
|
||||
cameraManager.getAggregateCameraCapabilities(allSelectedCameraIDs);
|
||||
const mediaCapabilities = selectedMedia
|
||||
? cameraManager?.getMediaCapabilities(selectedMedia)
|
||||
: null;
|
||||
|
||||
const buttons: MenuItem[] = [];
|
||||
buttons.push({
|
||||
// Use a magic icon value that the menu will use to render the custom
|
||||
// Frigate icon.
|
||||
icon: FRIGATE_BUTTON_MENU_ICON,
|
||||
...config.menu.buttons.frigate,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.frigate'),
|
||||
tap_action:
|
||||
config.menu?.style === 'hidden'
|
||||
? (createFrigateCardSimpleAction('menu_toggle') as FrigateCardCustomAction)
|
||||
: (createFrigateCardSimpleAction('default') as FrigateCardCustomAction),
|
||||
hold_action: createFrigateCardSimpleAction(
|
||||
'diagnostics',
|
||||
) as FrigateCardCustomAction,
|
||||
});
|
||||
|
||||
if (visibleCameraIDs.size) {
|
||||
const menuItems = Array.from(
|
||||
cameraManager.getStore().getCameraConfigEntries(visibleCameraIDs),
|
||||
([cameraID, config]) => {
|
||||
const action = createFrigateCardCameraAction('camera_select', cameraID);
|
||||
const metadata = cameraManager.getCameraMetadata(cameraID);
|
||||
|
||||
return {
|
||||
enabled: true,
|
||||
icon: metadata?.icon,
|
||||
entity: config.camera_entity,
|
||||
state_color: true,
|
||||
title: metadata?.title,
|
||||
selected: selectedCameraID === cameraID,
|
||||
...(action && { tap_action: action }),
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
buttons.push({
|
||||
icon: 'mdi:video-switch',
|
||||
...config.menu.buttons.cameras,
|
||||
type: 'custom:frigate-card-menu-submenu',
|
||||
title: localize('config.menu.buttons.cameras'),
|
||||
items: menuItems,
|
||||
});
|
||||
// If the event itself contains a configuration then use that. This is
|
||||
// useful in cases where the registration of the event handler does not have
|
||||
// access to the actual desired configuration (e.g. action events generated
|
||||
// by a submenu).
|
||||
if (ev.detail.config) {
|
||||
config = ev.detail.config;
|
||||
}
|
||||
if (!config) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedCameraID && allSelectedCameraIDs && view.is('live')) {
|
||||
const dependencies = [...allSelectedCameraIDs];
|
||||
const override = view.context?.live?.overrides?.get(selectedCameraID);
|
||||
const interaction: string = ev.detail.action;
|
||||
const action = getActionConfigGivenAction(interaction, config);
|
||||
if (!action) {
|
||||
return;
|
||||
}
|
||||
const actions = arrayify(action);
|
||||
|
||||
if (dependencies.length === 2) {
|
||||
// If there are only two dependencies (the main camera, and 1 other)
|
||||
// then use a button not a menu to toggle.
|
||||
buttons.push({
|
||||
icon: 'mdi:video-input-component',
|
||||
style:
|
||||
override && override !== selectedCameraID ? this._getEmphasizedStyle() : {},
|
||||
title: localize('config.menu.buttons.substreams'),
|
||||
...config.menu.buttons.substreams,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
tap_action: createFrigateCardSimpleAction(
|
||||
hasSubstream(view) ? 'live_substream_off' : 'live_substream_on',
|
||||
) as FrigateCardCustomAction,
|
||||
});
|
||||
} else if (dependencies.length > 2) {
|
||||
const menuItems = Array.from(dependencies, (cameraID) => {
|
||||
const action = createFrigateCardCameraAction(
|
||||
'live_substream_select',
|
||||
cameraID,
|
||||
);
|
||||
const metadata = cameraManager.getCameraMetadata(cameraID) ?? undefined;
|
||||
const cameraConfig = cameraManager.getStore().getCameraConfig(cameraID);
|
||||
return {
|
||||
enabled: true,
|
||||
icon: metadata?.icon,
|
||||
entity: cameraConfig?.camera_entity,
|
||||
state_color: true,
|
||||
title: metadata?.title,
|
||||
selected:
|
||||
(view.context?.live?.overrides?.get(selectedCameraID) ??
|
||||
selectedCameraID) === cameraID,
|
||||
...(action && { tap_action: action }),
|
||||
};
|
||||
});
|
||||
// A note on the complexity below: By default the menu should close when a
|
||||
// user takes an action, an exception is if the user is specifically
|
||||
// manipulating the menu in the actions themselves.
|
||||
let menuToggle = false;
|
||||
|
||||
buttons.push({
|
||||
icon: 'mdi:video-input-component',
|
||||
title: localize('config.menu.buttons.substreams'),
|
||||
style:
|
||||
override && override !== selectedCameraID ? this._getEmphasizedStyle() : {},
|
||||
...config.menu.buttons.substreams,
|
||||
type: 'custom:frigate-card-menu-submenu',
|
||||
items: menuItems,
|
||||
});
|
||||
const toggleLessActions = actions.filter(
|
||||
(item) => isTruthy(item) && !this._isMenuToggleAction(item),
|
||||
);
|
||||
if (toggleLessActions.length != actions.length) {
|
||||
menuToggle = true;
|
||||
}
|
||||
|
||||
if (toggleLessActions.length) {
|
||||
frigateCardHandleActionConfig(this._host, hass, config, interaction, actions);
|
||||
}
|
||||
|
||||
if (this._isHidingMenu()) {
|
||||
if (menuToggle) {
|
||||
this.setExpanded(!this._expanded);
|
||||
} else {
|
||||
// Don't close the menu if there is another action to come.
|
||||
const holdAction = getActionConfigGivenAction('hold', config);
|
||||
const doubleTapAction = getActionConfigGivenAction('double_tap', config);
|
||||
const tapAction = getActionConfigGivenAction('tap', config);
|
||||
const endTapAction = getActionConfigGivenAction('end_tap', config);
|
||||
|
||||
if (
|
||||
interaction === 'end_tap' ||
|
||||
(interaction === 'start_tap' &&
|
||||
!holdAction &&
|
||||
!doubleTapAction &&
|
||||
!tapAction &&
|
||||
!endTapAction) ||
|
||||
(interaction !== 'end_tap' && !endTapAction)
|
||||
) {
|
||||
this.setExpanded(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
buttons.push({
|
||||
icon: 'mdi:cctv',
|
||||
...config.menu.buttons.live,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.view.views.live'),
|
||||
style: view.is('live') ? this._getEmphasizedStyle() : {},
|
||||
tap_action: createFrigateCardSimpleAction('live') as FrigateCardCustomAction,
|
||||
});
|
||||
|
||||
if (aggregateCapabilities?.supportsClips) {
|
||||
buttons.push({
|
||||
icon: 'mdi:filmstrip',
|
||||
...config.menu.buttons.clips,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.view.views.clips'),
|
||||
style: view?.is('clips') ? this._getEmphasizedStyle() : {},
|
||||
tap_action: createFrigateCardSimpleAction('clips') as FrigateCardCustomAction,
|
||||
hold_action: createFrigateCardSimpleAction('clip') as FrigateCardCustomAction,
|
||||
});
|
||||
}
|
||||
|
||||
if (aggregateCapabilities?.supportsSnapshots) {
|
||||
buttons.push({
|
||||
icon: 'mdi:camera',
|
||||
...config.menu.buttons.snapshots,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.view.views.snapshots'),
|
||||
style: view?.is('snapshots') ? this._getEmphasizedStyle() : {},
|
||||
tap_action: createFrigateCardSimpleAction(
|
||||
'snapshots',
|
||||
) as FrigateCardCustomAction,
|
||||
hold_action: createFrigateCardSimpleAction(
|
||||
'snapshot',
|
||||
) as FrigateCardCustomAction,
|
||||
});
|
||||
}
|
||||
|
||||
if (aggregateCapabilities?.supportsRecordings) {
|
||||
buttons.push({
|
||||
icon: 'mdi:album',
|
||||
...config.menu.buttons.recordings,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.view.views.recordings'),
|
||||
style: view.is('recordings') ? this._getEmphasizedStyle() : {},
|
||||
tap_action: createFrigateCardSimpleAction(
|
||||
'recordings',
|
||||
) as FrigateCardCustomAction,
|
||||
hold_action: createFrigateCardSimpleAction(
|
||||
'recording',
|
||||
) as FrigateCardCustomAction,
|
||||
});
|
||||
}
|
||||
|
||||
buttons.push({
|
||||
icon: 'mdi:image',
|
||||
...config.menu.buttons.image,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.view.views.image'),
|
||||
style: view?.is('image') ? this._getEmphasizedStyle() : {},
|
||||
tap_action: createFrigateCardSimpleAction('image') as FrigateCardCustomAction,
|
||||
});
|
||||
|
||||
// Don't show the timeline button unless there's at least one non-birdseye
|
||||
// camera with a Frigate camera name.
|
||||
if (aggregateCapabilities?.supportsTimeline) {
|
||||
buttons.push({
|
||||
icon: 'mdi:chart-gantt',
|
||||
...config.menu.buttons.timeline,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.view.views.timeline'),
|
||||
style: view.is('timeline') ? this._getEmphasizedStyle() : {},
|
||||
tap_action: createFrigateCardSimpleAction('timeline') as FrigateCardCustomAction,
|
||||
});
|
||||
}
|
||||
|
||||
if (mediaCapabilities?.canDownload && !this._isBeingCasted()) {
|
||||
buttons.push({
|
||||
icon: 'mdi:download',
|
||||
...config.menu.buttons.download,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.download'),
|
||||
tap_action: createFrigateCardSimpleAction('download') as FrigateCardCustomAction,
|
||||
});
|
||||
}
|
||||
|
||||
if (options?.showCameraUIButton) {
|
||||
buttons.push({
|
||||
icon: 'mdi:web',
|
||||
...config.menu.buttons.camera_ui,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.camera_ui'),
|
||||
tap_action: createFrigateCardSimpleAction(
|
||||
'camera_ui',
|
||||
) as FrigateCardCustomAction,
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
options?.microphoneManager &&
|
||||
options?.currentMediaLoadedInfo?.capabilities?.supports2WayAudio
|
||||
) {
|
||||
const forbidden = options.microphoneManager.isForbidden();
|
||||
const muted = options.microphoneManager.isMuted();
|
||||
const buttonType = config.menu.buttons.microphone.type;
|
||||
buttons.push({
|
||||
icon: forbidden
|
||||
? 'mdi:microphone-message-off'
|
||||
: muted
|
||||
? 'mdi:microphone-off'
|
||||
: 'mdi:microphone',
|
||||
...config.menu.buttons.microphone,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.microphone'),
|
||||
style: forbidden || muted ? {} : this._getEmphasizedStyle(true),
|
||||
...(!forbidden &&
|
||||
buttonType === 'momentary' && {
|
||||
start_tap_action: createFrigateCardSimpleAction(
|
||||
'microphone_unmute',
|
||||
) as FrigateCardCustomAction,
|
||||
end_tap_action: createFrigateCardSimpleAction(
|
||||
'microphone_mute',
|
||||
) as FrigateCardCustomAction,
|
||||
}),
|
||||
...(!forbidden &&
|
||||
buttonType === 'toggle' && {
|
||||
tap_action: createFrigateCardSimpleAction(
|
||||
options.microphoneManager.isMuted()
|
||||
? 'microphone_unmute'
|
||||
: 'microphone_mute',
|
||||
) as FrigateCardCustomAction,
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
if (!this._isBeingCasted()) {
|
||||
buttons.push({
|
||||
icon: options?.inFullscreenMode ? 'mdi:fullscreen-exit' : 'mdi:fullscreen',
|
||||
...config.menu.buttons.fullscreen,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.fullscreen'),
|
||||
tap_action: createFrigateCardSimpleAction(
|
||||
'fullscreen',
|
||||
) as FrigateCardCustomAction,
|
||||
style: options?.inFullscreenMode ? this._getEmphasizedStyle() : {},
|
||||
});
|
||||
}
|
||||
|
||||
buttons.push({
|
||||
icon: options?.inExpandedMode ? 'mdi:arrow-collapse-all' : 'mdi:arrow-expand-all',
|
||||
...config.menu.buttons.expand,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.expand'),
|
||||
tap_action: createFrigateCardSimpleAction('expand') as FrigateCardCustomAction,
|
||||
style: options?.inExpandedMode ? this._getEmphasizedStyle() : {},
|
||||
});
|
||||
|
||||
if (
|
||||
options?.mediaPlayerController?.hasMediaPlayers() &&
|
||||
(view?.isViewerView() || (view.is('live') && selectedCameraConfig?.camera_entity))
|
||||
) {
|
||||
const mediaPlayerItems = options.mediaPlayerController
|
||||
.getMediaPlayers()
|
||||
.map((playerEntityID) => {
|
||||
const title = getEntityTitle(hass, playerEntityID) || playerEntityID;
|
||||
const state = hass.states[playerEntityID];
|
||||
const playAction = createFrigateCardMediaPlayerAction(playerEntityID, 'play');
|
||||
const stopAction = createFrigateCardMediaPlayerAction(playerEntityID, 'stop');
|
||||
const disabled = !state || state.state === 'unavailable';
|
||||
|
||||
return {
|
||||
enabled: true,
|
||||
selected: false,
|
||||
icon: getEntityIcon(hass, playerEntityID),
|
||||
entity: playerEntityID,
|
||||
state_color: false,
|
||||
title: title,
|
||||
disabled: disabled,
|
||||
...(!disabled && playAction && { tap_action: playAction }),
|
||||
...(!disabled && stopAction && { hold_action: stopAction }),
|
||||
};
|
||||
});
|
||||
|
||||
buttons.push({
|
||||
icon: 'mdi:cast',
|
||||
...config.menu.buttons.media_player,
|
||||
type: 'custom:frigate-card-menu-submenu',
|
||||
title: localize('config.menu.buttons.media_player'),
|
||||
items: mediaPlayerItems,
|
||||
});
|
||||
}
|
||||
|
||||
if (options?.currentMediaLoadedInfo && options.currentMediaLoadedInfo.player) {
|
||||
if (options.currentMediaLoadedInfo.capabilities?.supportsPause) {
|
||||
const paused = options.currentMediaLoadedInfo.player.isPaused();
|
||||
buttons.push({
|
||||
icon: paused ? 'mdi:play' : 'mdi:pause',
|
||||
...config.menu.buttons.play,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.play'),
|
||||
tap_action: createFrigateCardSimpleAction(
|
||||
paused ? 'play' : 'pause',
|
||||
) as FrigateCardCustomAction,
|
||||
});
|
||||
}
|
||||
|
||||
if (options.currentMediaLoadedInfo.capabilities?.hasAudio) {
|
||||
const muted = options.currentMediaLoadedInfo.player.isMuted();
|
||||
buttons.push({
|
||||
icon: muted ? 'mdi:volume-off' : 'mdi:volume-high',
|
||||
...config.menu.buttons.mute,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.mute'),
|
||||
tap_action: createFrigateCardSimpleAction(
|
||||
muted ? 'unmute' : 'mute',
|
||||
) as FrigateCardCustomAction,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (options?.currentMediaLoadedInfo && options.currentMediaLoadedInfo.player) {
|
||||
buttons.push({
|
||||
icon: 'mdi:monitor-screenshot',
|
||||
...config.menu.buttons.screenshot,
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.screenshot'),
|
||||
tap_action: createFrigateCardSimpleAction(
|
||||
'screenshot',
|
||||
) as FrigateCardCustomAction,
|
||||
});
|
||||
}
|
||||
|
||||
if (view.supportsMultipleDisplayModes() && visibleCameraIDs.size > 1) {
|
||||
const isGrid = view.isGrid();
|
||||
buttons.push({
|
||||
icon: isGrid ? 'mdi:grid-off' : 'mdi:grid',
|
||||
...config.menu.buttons.display_mode,
|
||||
style: isGrid ? this._getEmphasizedStyle() : {},
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: isGrid
|
||||
? localize('display_modes.single')
|
||||
: localize('display_modes.grid'),
|
||||
tap_action: createFrigateCardDisplayModeAction(isGrid ? 'single' : 'grid'),
|
||||
});
|
||||
}
|
||||
|
||||
if (hasUsablePTZ(selectedCameraCapabilities, config.live.controls.ptz)) {
|
||||
const isOn =
|
||||
view.context?.live?.ptzVisible === false
|
||||
? false
|
||||
: config.live.controls.ptz.mode === 'on';
|
||||
buttons.push({
|
||||
icon: 'mdi:pan',
|
||||
...config.menu.buttons.ptz,
|
||||
style: isOn ? this._getEmphasizedStyle() : {},
|
||||
type: 'custom:frigate-card-menu-icon',
|
||||
title: localize('config.menu.buttons.ptz'),
|
||||
tap_action: createFrigateCardShowPTZAction(!isOn),
|
||||
});
|
||||
}
|
||||
|
||||
const styledDynamicButtons = this._dynamicMenuButtons.map((button) => ({
|
||||
style: this._getStyleFromActions(config, view, button, options),
|
||||
...button,
|
||||
}));
|
||||
|
||||
return buttons.concat(styledDynamicButtons);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the style of emphasized menu items.
|
||||
* @returns A StyleInfo.
|
||||
*/
|
||||
protected _getEmphasizedStyle(critical?: boolean): StyleInfo {
|
||||
if (critical) {
|
||||
return {
|
||||
animation: 'pulse 3s infinite',
|
||||
color: 'var(--error-color, white)',
|
||||
};
|
||||
}
|
||||
return {
|
||||
color: 'var(--primary-color, white)',
|
||||
public getFreshButtonState(hass: HomeAssistant, button: MenuItem): StateParameters {
|
||||
const stateParameters = { ...button };
|
||||
return hass && button.type === 'custom:frigate-card-menu-state-icon'
|
||||
? refreshDynamicStateParameters(hass, stateParameters)
|
||||
: stateParameters;
|
||||
}
|
||||
|
||||
public getSVGPath(button: MenuItem): string {
|
||||
return button.icon === FRIGATE_BUTTON_MENU_ICON ? FRIGATE_ICON_SVG_PATH : '';
|
||||
}
|
||||
|
||||
protected _sortButtons(): void {
|
||||
const style = this._config?.style;
|
||||
const sortButtons = (a: MenuItem, b: MenuItem): number => {
|
||||
// If the menu is hidden, the Frigate button must come first.
|
||||
if (style === 'hidden') {
|
||||
if (a.icon === FRIGATE_BUTTON_MENU_ICON) {
|
||||
return -1;
|
||||
} else if (b.icon === FRIGATE_BUTTON_MENU_ICON) {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Otherwise sort by priority.
|
||||
if (
|
||||
a.priority === undefined ||
|
||||
(b.priority !== undefined && b.priority > a.priority)
|
||||
) {
|
||||
return 1;
|
||||
}
|
||||
if (
|
||||
b.priority === undefined ||
|
||||
(a.priority !== undefined && b.priority < a.priority)
|
||||
) {
|
||||
return -1;
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
this._buttons.sort(sortButtons);
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a button determine if the style should be emphasized by examining all
|
||||
* of the actions sequentially.
|
||||
* @param button The button to examine.
|
||||
* @returns A StyleInfo object.
|
||||
*/
|
||||
protected _getStyleFromActions(
|
||||
config: FrigateCardConfig,
|
||||
view: View,
|
||||
button: MenuItem,
|
||||
options?: MenuButtonControllerOptions,
|
||||
): StyleInfo {
|
||||
for (const actionSet of [
|
||||
button.tap_action,
|
||||
button.double_tap_action,
|
||||
button.hold_action,
|
||||
button.start_tap_action,
|
||||
button.end_tap_action,
|
||||
]) {
|
||||
const actions = Array.isArray(actionSet) ? actionSet : [actionSet];
|
||||
for (const action of actions) {
|
||||
// All frigate card actions will have action of 'fire-dom-event' and
|
||||
// styling only applies to those.
|
||||
if (
|
||||
!action ||
|
||||
action.action !== 'fire-dom-event' ||
|
||||
!('frigate_card_action' in action)
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
const frigateCardAction = action as FrigateCardCustomAction;
|
||||
if (
|
||||
FRIGATE_CARD_VIEWS_USER_SPECIFIED.some(
|
||||
(viewName) =>
|
||||
viewName === frigateCardAction.frigate_card_action &&
|
||||
view?.is(frigateCardAction.frigate_card_action),
|
||||
) ||
|
||||
(frigateCardAction.frigate_card_action === 'default' &&
|
||||
view.is(config.view.default)) ||
|
||||
(frigateCardAction.frigate_card_action === 'fullscreen' &&
|
||||
!!options?.inFullscreenMode) ||
|
||||
(frigateCardAction.frigate_card_action === 'camera_select' &&
|
||||
view.camera === frigateCardAction.camera)
|
||||
) {
|
||||
return this._getEmphasizedStyle();
|
||||
}
|
||||
}
|
||||
}
|
||||
return {};
|
||||
protected _isHidingMenu(): boolean {
|
||||
return this._config?.style === 'hidden' ?? false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine if the card is currently being casted.
|
||||
* @returns
|
||||
*/
|
||||
protected _isBeingCasted(): boolean {
|
||||
return !!navigator.userAgent.match(/CrKey\//);
|
||||
protected _isMenuToggleAction(action: ActionType): boolean {
|
||||
const frigateCardAction = convertActionToFrigateCardCustomAction(action);
|
||||
return !!frigateCardAction && frigateCardAction.frigate_card_action == 'menu_toggle';
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user