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

Initial common.js refactor.

Browse Source
This commit is contained in:
Dermot Duffy
2022-05-12 20:42:02 -07:00
parent 3cea188c40
commit 6b30487229
48 changed files with 1604 additions and 1657 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/action-handler-directive.ts
+7 -8
View File
@@ -1,17 +1,16 @@
import { fireEvent } from 'custom-card-helpers';
import type {
ActionHandlerDetail,
ActionHandlerOptions
} from 'custom-card-helpers/dist/types.d.js';
import { noChange } from 'lit';
import {
AttributePart,
directive,
Directive,
DirectiveParameters,
DirectiveParameters
} from 'lit/directive.js';
import type {
ActionHandlerDetail,
ActionHandlerOptions,
} from 'custom-card-helpers/dist/types.d.js';
import { fireEvent } from 'custom-card-helpers';
import { stopEventFromActivatingCardWideActions } from './common';
import { stopEventFromActivatingCardWideActions } from './utils/action.js';
interface ActionHandler extends HTMLElement {
holdTime: number;
src/card.ts
+61 -65
View File
@@ -1,98 +1,94 @@
import { getLovelace, HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers';
import {
CSSResultGroup,
html,
LitElement,
PropertyValues,
TemplateResult,
html,
unsafeCSS,
unsafeCSS
} from 'lit';
import { HomeAssistant, LovelaceCardEditor, getLovelace } from 'custom-card-helpers';
import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { createRef, ref, Ref } from 'lit/directives/ref.js';
import screenfull from 'screenfull';
import { throttle } from 'lodash-es';
import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
import { until } from 'lit/directives/until.js';
import { throttle } from 'lodash-es';
import screenfull from 'screenfull';
import { z } from 'zod';
import { actionHandler } from './action-handler-directive.js';
import {
Actions,
ActionType,
CameraConfig,
FrigateCardView,
FrigateCardCustomAction,
FRIGATE_CARD_VIEWS_USER_SPECIFIED,
RawFrigateCardConfig,
entitySchema,
frigateCardConfigSchema,
} from './types.js';
ConditionState,
conditionStateRequestHandler,
getOverriddenConfig,
getOverridesByKey
} from './card-condition.js';
import './components/elements.js';
import { FrigateCardElements } from './components/elements.js';
import './components/gallery.js';
import './components/image.js';
import { FrigateCardImage } from './components/image.js';
import './components/live.js';
import './components/menu.js';
import { FrigateCardMenu, FRIGATE_BUTTON_MENU_ICON } from './components/menu.js';
import './components/message.js';
import { renderMessage, renderProgressIndicator } from './components/message.js';
import './components/thumbnail-carousel.js';
import './components/timeline.js';
import './components/viewer.js';
import { isConfigUpgradeable } from './config-mgmt.js';
import {
CAMERA_BIRDSEYE,
CARD_VERSION,
MEDIA_PLAYER_SUPPORT_BROWSE_MEDIA,
REPO_URL
} from './const.js';
import './editor.js';
import { localize } from './localize/localize.js';
import './patches/ha-camera-stream.js';
import './patches/ha-hls-player.js';
import './patches/ha-web-rtc-player.ts';
import cardStyle from './scss/card.scss';
import type {
Entity,
ExtendedHomeAssistant,
FrigateCardConfig,
MediaShowInfo,
MenuButton,
Message,
Message
} from './types.js';
import {
CAMERA_BIRDSEYE,
CARD_VERSION,
MEDIA_PLAYER_SUPPORT_BROWSE_MEDIA,
REPO_URL,
} from './const.js';
import { FrigateCardElements } from './components/elements.js';
import { FrigateCardImage } from './components/image.js';
import { FRIGATE_BUTTON_MENU_ICON, FrigateCardMenu } from './components/menu.js';
import { View } from './view.js';
Actions,
ActionType,
CameraConfig,
entitySchema,
frigateCardConfigSchema,
FrigateCardCustomAction,
FrigateCardView,
FRIGATE_CARD_VIEWS_USER_SPECIFIED,
RawFrigateCardConfig
} from './types.js';
import {
contentsChanged,
convertActionToFrigateCardCustomAction,
createFrigateCardCustomAction,
frigateCardHandleAction,
frigateCardHasAction,
getActionConfigGivenAction,
getCameraIcon,
getCameraID,
getCameraTitle,
getActionConfigGivenAction
} from './utils/action.js';
import { contentsChanged } from './utils/basic.js';
import { getCameraIcon, getCameraID, getCameraTitle } from './utils/camera.js';
import {
getEntityIcon,
getEntityTitle,
homeAssistantSignPath,
homeAssistantWSRequest,
isValidMediaShowInfo,
shouldUpdateBasedOnHass,
sideLoadHomeAssistantElements,
} from './common.js';
import { localize } from './localize/localize.js';
import { renderMessage, renderProgressIndicator } from './components/message.js';
import './editor.js';
import './components/elements.js';
import './components/gallery.js';
import './components/image.js';
import './components/live.js';
import './components/menu.js';
import './components/message.js';
import './components/viewer.js';
import './components/thumbnail-carousel.js';
import './components/timeline.js';
import './patches/ha-camera-stream.js';
import './patches/ha-hls-player.js';
import './patches/ha-web-rtc-player.ts';
import cardStyle from './scss/card.scss';
import { ResolvedMediaCache } from './resolved-media.js';
import { BrowseMediaUtil } from './browse-media-util.js';
import { isConfigUpgradeable } from './config-mgmt.js';
import { actionHandler } from './action-handler-directive.js';
import {
ConditionState,
conditionStateRequestHandler,
getOverriddenConfig,
getOverridesByKey,
} from './card-condition.js';
import { supportsFeature } from './icons/update.js';
sideLoadHomeAssistantElements
} from './utils/ha';
import { BrowseMediaUtil } from './utils/ha/browse-media.js';
import { supportsFeature } from './utils/ha/update.js';
import { isValidMediaShowInfo } from './utils/media-info.js';
import { ResolvedMediaCache } from './utils/resolved-media.js';
import { View } from './view.js';
/** A note on media callbacks:
*
src/common.ts
-723
View File
@@ -1,723 +0,0 @@
import { HassEntity, MessageBase } from 'home-assistant-js-websocket';
import {
HomeAssistant,
computeStateDomain,
handleActionConfig,
hasAction,
ActionConfig,
} from 'custom-card-helpers';
import { StyleInfo } from 'lit/directives/style-map.js';
import { ZodSchema, z } from 'zod';
import {
differenceInSeconds,
differenceInMinutes,
differenceInHours,
fromUnixTime,
} from 'date-fns';
import { isEqual } from 'lodash-es';
import { localize } from './localize/localize.js';
import {
Actions,
ActionsConfig,
ActionType,
CameraConfig,
CardHelpers,
ExtendedHomeAssistant,
FrigateCardAction,
FrigateCardCustomAction,
frigateCardCustomActionSchema,
FrigateEvent,
MediaShowInfo,
Message,
RawFrigateCardConfig,
SignedPath,
signedPathSchema,
StateParameters,
} from './types.js';
import { stateIcon } from './icons/state-icon.js';
const MEDIA_INFO_HEIGHT_CUTOFF = 50;
const MEDIA_INFO_WIDTH_CUTOFF = MEDIA_INFO_HEIGHT_CUTOFF;
/**
* Get the keys that didn't parse from a ZodError.
* @param error The zoderror to extract the keys from.
* @returns An array of error keys.
*/
export function getParseErrorKeys<T>(error: z.ZodError<T>): string[] {
const errors = error.format();
return Object.keys(errors).filter((v) => !v.startsWith('_'));
}
/**
* Make a HomeAssistant websocket request. May throw.
* @param hass The HomeAssistant object to send the request with.
* @param schema The expected Zod schema of the response.
* @param request The request to make.
* @returns The parsed valid response or null on malformed.
*/
export async function homeAssistantWSRequest<T>(
hass: HomeAssistant,
schema: ZodSchema<T>,
request: MessageBase,
): Promise<T> {
const response = await hass.callWS<T>(request);
if (!response) {
const error_message = `${localize('error.empty_response')}: ${JSON.stringify(
request,
)}`;
console.warn(error_message);
throw new Error(error_message);
}
const parseResult = schema.safeParse(response);
if (!parseResult.success) {
const keys = getParseErrorKeys<T>(parseResult.error);
const error_message =
`${localize('error.invalid_response')}: ${JSON.stringify(request)}. ` +
localize('error.invalid_keys') +
`: '${keys}'`;
console.warn(error_message);
throw new Error(error_message);
}
return parseResult.data;
}
/**
* Request that HA sign a path. May throw.
* @param hass The HomeAssistant object used to request the signature.
* @param path The path to sign.
* @param expires An optional number of seconds to sign the path for.
* @returns The signed URL, or null if the response was malformed.
*/
export async function homeAssistantSignPath(
hass: ExtendedHomeAssistant,
path: string,
expires?: number,
): Promise<string | null> {
const request = {
type: 'auth/sign_path',
path: path,
expires: expires,
};
const response = await homeAssistantWSRequest<SignedPath>(
hass,
signedPathSchema,
request,
);
if (!response) {
return null;
}
return hass.hassUrl(response.path);
}
/**
* Dispatch a Frigate Card event.
* @param element The element to send the event.
* @param name The name of the Frigate card event to send.
* @param detail An optional detail object to attach.
*/
export function dispatchFrigateCardEvent<T>(
target: EventTarget,
name: string,
detail?: T,
): void {
target.dispatchEvent(
new CustomEvent<T>(`frigate-card:${name}`, {
bubbles: true,
composed: true,
detail: detail,
}),
);
}
/**
* Create a MediaShowInfo object.
* @param source An event or HTMLElement that should be used as a source.
* @returns A new MediaShowInfo object or null if one could not be created.
*/
export function createMediaShowInfo(source: Event | HTMLElement): MediaShowInfo | null {
let target: HTMLElement | EventTarget;
if (source instanceof Event) {
target = source.composedPath()[0];
} else {
target = source;
}
if (target instanceof HTMLImageElement) {
return {
width: (target as HTMLImageElement).naturalWidth,
height: (target as HTMLImageElement).naturalHeight,
};
} else if (target instanceof HTMLVideoElement) {
return {
width: (target as HTMLVideoElement).videoWidth,
height: (target as HTMLVideoElement).videoHeight,
};
} else if (target instanceof HTMLCanvasElement) {
return {
width: (target as HTMLCanvasElement).width,
height: (target as HTMLCanvasElement).height,
};
}
return null;
}
/**
* Dispatch a Frigate card media show event.
* @param element The element to send the event.
* @param source An event or HTMLElement that should be used as a source.
*/
export function dispatchMediaShowEvent(
element: HTMLElement,
source: Event | HTMLElement,
): void {
const mediaShowInfo = createMediaShowInfo(source);
if (mediaShowInfo) {
dispatchExistingMediaShowInfoAsEvent(element, mediaShowInfo);
}
}
/**
* Dispatch a pre-existing MediaShowInfo object as an event.
* @param element The element to send the event.
* @param mediaShowInfo The MediaShowInfo object to send.
*/
export function dispatchExistingMediaShowInfoAsEvent(
element: HTMLElement,
mediaShowInfo: MediaShowInfo,
): void {
dispatchFrigateCardEvent<MediaShowInfo>(element, 'media-show', mediaShowInfo);
}
/**
* Dispatch an event with a message to show to the user.
* @param element The element to send the event.
* @param message The message to show.
* @param icon An optional icon to attach to the message.
*/
export function dispatchMessageEvent(
element: HTMLElement,
message: string,
icon?: string,
context?: unknown,
): void {
dispatchFrigateCardEvent<Message>(element, 'message', {
message: message,
type: 'info',
icon: icon,
context: context,
});
}
/**
* Dispatch an event with an error message to show to the user.
* @param element The element to send the event.
* @param message The message to show.
*/
export function dispatchErrorMessageEvent(
element: HTMLElement,
message: string,
context?: unknown,
): void {
dispatchFrigateCardEvent<Message>(element, 'message', {
message: message,
type: 'error',
context: context,
});
}
/**
* Determine whether the card should be updated based on Home Assistant changes.
* @param newHass The new HA object.
* @param oldHass The old HA object.
* @param entities The entities to examine for changes.
* @returns A boolean indicating whether or not to allow an update.
*/
export function shouldUpdateBasedOnHass(
newHass: HomeAssistant | undefined | null,
oldHass: HomeAssistant | undefined | null,
entities: string[] | null,
): boolean {
if (!newHass || !entities || !entities.length) {
return false;
}
if (!oldHass) {
return true;
}
for (let i = 0; i < entities.length; i++) {
const entity = entities[i];
if (entity && oldHass.states[entity] !== newHass.states[entity]) {
return true;
}
}
return false;
}
/**
* Determine if a MediaShowInfo object is valid/acceptable.
* @param info The MediaShowInfo object.
* @returns True if the object is valid, false otherwise.
*/
export function isValidMediaShowInfo(info: MediaShowInfo): boolean {
return (
info.height >= MEDIA_INFO_HEIGHT_CUTOFF && info.width >= MEDIA_INFO_WIDTH_CUTOFF
);
}
/**
* Convert a generic Action to a FrigateCardCustomAction if it parses correctly.
* @param action The generic action configuration.
* @returns A FrigateCardCustomAction or null if it cannot be converted.
*/
export function convertActionToFrigateCardCustomAction(
action: ActionType | null,
): FrigateCardCustomAction | null {
if (!action) {
return null;
}
// Parse a custom event as other things could generate ll-custom events that
// are not related to Frigate Card.
const parseResult = frigateCardCustomActionSchema.safeParse(action);
return parseResult.success ? parseResult.data : null;
}
/**
* Create a Frigate card custom action.
* @param action The Frigate card action string (e.g. 'fullscreen')
* @returns A FrigateCardCustomAction for that action string or null.
*/
export function createFrigateCardCustomAction(
action: FrigateCardAction,
args?: {
camera?: string;
media_player?: string;
media_player_action?: 'play' | 'stop';
},
): FrigateCardCustomAction | null {
if (action === 'camera_select') {
if (!args?.camera) {
return null;
}
return {
action: 'fire-dom-event',
frigate_card_action: action,
camera: args.camera as string,
};
}
if (action === 'media_player') {
if (!args?.media_player || !args.media_player_action) {
return null;
}
return {
action: 'fire-dom-event',
frigate_card_action: action,
media_player: args.media_player,
media_player_action: args.media_player_action,
};
}
return {
action: 'fire-dom-event',
frigate_card_action: action,
};
}
/**
* Get an action configuration given a config and an interaction (e.g. 'tap').
* @param interaction The interaction: `tap`, `hold` or `double_tap`
* @param config The configuration containing multiple actions.
* @returns The relevant action configuration or null if none found.
*/
export function getActionConfigGivenAction(
interaction?: string,
config?: Actions,
): ActionType | ActionType[] | undefined {
if (!interaction || !config) {
return undefined;
}
if (interaction == 'tap' && config.tap_action) {
return config.tap_action;
} else if (interaction == 'hold' && config.hold_action) {
return config.hold_action;
} else if (interaction == 'double_tap' && config.double_tap_action) {
return config.double_tap_action;
} else if (interaction == 'end_tap' && config.end_tap_action) {
return config.end_tap_action;
} else if (interaction == 'start_tap' && config.start_tap_action) {
return config.start_tap_action;
}
return undefined;
}
/**
* Calculate a style brightness from a hass state.
* Inspired by https://github.com/home-assistant/frontend/blob/7d5b5663123bb16d1da0c5bac3f2fc26d5f69ae8/src/panels/lovelace/cards/hui-button-card.ts#L296
* @param state The hass state object.
* @returns A CSS brightness string.
*/
function computeBrightnessFromState(state: HassEntity): string {
if (state.state === 'off' || !state.attributes.brightness) {
return '';
}
const brightness = state.attributes.brightness;
return `brightness(${(brightness + 245) / 5}%)`;
}
/**
* Calculate a style color from a hass state.
* Inspired by https://github.com/home-assistant/frontend/blob/7d5b5663123bb16d1da0c5bac3f2fc26d5f69ae8/src/panels/lovelace/cards/hui-button-card.ts#L304
* @param state The hass state object.
* @returns A CSS color string.
*/
function computeColorFromState(state: HassEntity): string {
if (state.state === 'off') {
return '';
}
return state.attributes.rgb_color
? `rgb(${state.attributes.rgb_color.join(',')})`
: '';
}
/**
* Get the style of emphasized menu items.
* @returns A StyleInfo.
*/
function computeStyle(state: HassEntity): StyleInfo {
return {
color: computeColorFromState(state),
filter: computeBrightnessFromState(state),
};
}
/**
* Determine the string state of a given stateObj.
* From: https://github.com/home-assistant/frontend/blob/dev/src/common/entity/compute_active_state.ts
* @param stateObj The HassEntity object from `hass.states`.
* @returns A string state, e.g. 'on'.
*/
export const computeActiveState = (stateObj: HassEntity): string => {
const domain = stateObj.entity_id.split('.')[0];
let state = stateObj.state;
if (domain === 'climate') {
state = stateObj.attributes.hvac_action;
}
return state;
};
/**
* Use Home Assistant state to refresh state parameters for an item to be rendered.
* @param hass Home Assistant object.
* @param params A StateParameters object to modify in place.
* @returns A StateParameters object updated based on HASS state.
*/
export function refreshDynamicStateParameters(
hass: HomeAssistant,
params: StateParameters,
): StateParameters {
if (!params.entity) {
return params;
}
const state = hass.states[params.entity];
if (!!state && !!params.state_color) {
params.style = { ...computeStyle(state), ...params.style };
}
params.title = params.title ?? (state?.attributes?.friendly_name || params.entity);
params.icon = params.icon ?? stateIcon(state);
const domain = state ? computeStateDomain(state) : undefined;
params.data_domain =
params.state_color || (domain === 'light' && params.state_color !== false)
? domain
: undefined;
if (state) {
params.data_state = computeActiveState(state);
}
return params;
}
/**
* Prettify a Frigate name by converting '_' to spaces and capitalizing words.
* @param input The input Frigate (camera/label/zone) name.
* @returns A prettified name.
*/
export function prettifyFrigateName(input?: string): string | undefined {
if (!input) {
return undefined;
}
const words = input.split(/[_\s]+/);
return words
.map((word) => {
return word[0].toUpperCase() + word.substring(1);
})
.join(' ');
}
/**
* Get the title of an entity.
* @param entity The entity id.
* @param hass The Home Assistant object.
* @returns The title or undefined.
*/
export function getEntityTitle(
hass?: HomeAssistant,
entity?: string,
): string | undefined {
return entity ? hass?.states[entity]?.attributes?.friendly_name : undefined;
}
/**
* Get the icon of an entity.
* @param entity The entity id.
* @param hass The Home Assistant object.
* @returns The icon or undefined.
*/
export function getEntityIcon(hass?: HomeAssistant, entity?: string): string {
return stateIcon(entity ? hass?.states[entity] : null);
}
/**
* Get a camera id.
* @param config The camera config (either parsed or raw).
* @returns A camera id.
*/
export function getCameraID(
config?: CameraConfig | RawFrigateCardConfig | null,
): string {
return (
(typeof config?.id === 'string' && config.id) ||
(typeof config?.camera_entity === 'string' && config.camera_entity) ||
(typeof config?.webrtc_card === 'object' &&
config.webrtc_card &&
typeof config.webrtc_card['entity'] === 'string' &&
config.webrtc_card['entity']) ||
(typeof config?.camera_name === 'string' && config.camera_name) ||
''
);
}
/**
* Get a camera text title.
* @param hass The Home Assistant object.
* @param config The camera config (either parsed or raw).
* @returns A title string.
*/
export function getCameraTitle(
hass?: HomeAssistant,
config?: CameraConfig | RawFrigateCardConfig | null,
): string {
// Attempt to render a recognizable name for the camera,
// starting with the most likely to be useful and working our
// ways towards the least useful. Extra type checking here since this is also
// used on raw configuration in the editor.
return (
(typeof config?.title === 'string' && config.title) ||
(typeof config?.camera_entity === 'string'
? getEntityTitle(hass, config.camera_entity)
: '') ||
(typeof config?.webrtc_card === 'object' &&
config.webrtc_card &&
typeof config.webrtc_card['entity'] === 'string' &&
config.webrtc_card['entity']) ||
(typeof config?.camera_name === 'string'
? prettifyFrigateName(config.camera_name)
: '') ||
(typeof config?.id === 'string' && config.id) ||
''
);
}
/**
* Get a camera icon.
* @param hass The Home Assistant object.
* @param config The camera config.
* @returns An icon string.
*/
export function getCameraIcon(
hass?: HomeAssistant,
config?: CameraConfig | null,
): string {
return config?.icon || getEntityIcon(hass, config?.camera_entity) || 'mdi:video';
}
/**
* Move an element within an array.
* @param target Target array.
* @param from From index.
* @param to To index.
*/
export function arrayMove(target: unknown[], from: number, to: number): void {
const element = target[from];
target.splice(from, 1);
target.splice(to, 0, element);
}
/**
* Determine if the contents of the n(ew) and o(ld) values have changed. For use
* in lit web components that may have a value that changes address but not
* contents -- and for which a re-render is expensive/jarring.
* @param n The new value.
* @param o The old value.
* @returns `true` is the contents have changed.
*/
export function contentsChanged(n: unknown, o: unknown): boolean {
return !isEqual(n, o);
}
/**
* Frigate card custom version of handleAction
* (https://github.com/custom-cards/custom-card-helpers/blob/master/src/handle-action.ts)
* that handles the custom action events the card supports.
* @param node The node that fired the event.
* @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: {
camera_image?: string;
entity?: string;
},
action: string,
actionConfig: ActionType | ActionType[] | undefined,
): boolean => {
// Only allow a tap action to use a default non-config (the more-info config).
if (actionConfig || action == 'tap') {
// ActionConfig vs ActionType:
// There is a slight typing (but not functional) difference between
// ActionType in this card and ActionConfig in `custom-card-helpers`. See
// `ExtendedConfirmationRestrictionConfig` in `types.ts` for the source and
// reason behind this difference.
if (Array.isArray(actionConfig)) {
actionConfig.forEach((action) =>
handleActionConfig(node, hass, config, action as ActionConfig | undefined),
);
} else {
handleActionConfig(node, hass, config, actionConfig as ActionConfig | undefined);
}
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 => {
// See note above on 'ActionConfig vs ActionType' for why this cast is
// necessary and harmless.
if (Array.isArray(config)) {
return !!config.find((item) => hasAction(item as ActionConfig | undefined));
}
return hasAction(config as ActionConfig | undefined);
};
/**
* Stop an event from activating card wide actions.
*/
export const stopEventFromActivatingCardWideActions = (ev: Event): void => {
ev.stopPropagation();
};
/**
* Convenience function to convert a timestamp to hours, minutes and seconds
* string. Heavily inspired by, and returning the same format as, the Frigate
* UI: https://github.com/blakeblackshear/frigate/blob/master/web/src/components/RecordingPlaylist.jsx#L97
* @param event The Frigate event.
* @returns A duration string.
*/
export function getEventDurationString(event: FrigateEvent): string {
if (!event.end_time) {
return localize('event.in_progress');
}
const start = fromUnixTime(event.start_time);
const end = fromUnixTime(event.end_time);
const hours = differenceInHours(end, start);
const minutes = differenceInMinutes(end, start) - hours * 60;
const seconds = differenceInSeconds(end, start) - hours * 60 * 60 - minutes * 60;
let duration = '';
if (hours) {
duration += `${hours}h `;
}
if (minutes) {
duration += `${minutes}m `;
}
duration += `${seconds}s`;
return duration;
}
/**
* Side loads the HA elements this card needs. This trickery is unfortunate
* necessary, see:
* - https://github.com/thomasloven/hass-config/wiki/PreLoading-Lovelace-Elements
* @returns `true` if the load is successful, `false` otherwise.
*/
export const sideLoadHomeAssistantElements = async (): Promise<boolean> => {
const neededElements = [
'ha-selector',
'ha-menu-button',
'ha-camera-stream',
'ha-hls-player',
'ha-web-rtc-player',
'ha-icon',
'ha-circular-progress',
'ha-icon-button',
'ha-card',
'ha-svg-icon',
'ha-button-menu',
];
if (neededElements.every((element) => customElements.get(element))) {
return true;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const helpers: CardHelpers = await (window as any).loadCardHelpers();
// The picture-glance editor loads everything this card needs.
const pictureGlance = await helpers.createCardElement({
type: 'picture-glance',
entities: [],
camera_image: 'dummy-to-load-editor-components',
});
if (pictureGlance.constructor.getConfigElement) {
await pictureGlance.constructor.getConfigElement();
return true;
}
return false;
};
src/components/carousel.ts
+5 -8
View File
@@ -1,17 +1,14 @@
import { CSSResultGroup, LitElement, unsafeCSS, PropertyValues } from 'lit';
import { property } from 'lit/decorators.js';
import EmblaCarousel, {
EmblaCarouselType,
EmblaOptionsType,
EmblaPluginType,
EmblaPluginType
} from 'embla-carousel';
import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
import { TransitionEffect } from '../types';
import { dispatchFrigateCardEvent } from '../common';
import { CSSResultGroup, LitElement, PropertyValues, unsafeCSS } from 'lit';
import { property } from 'lit/decorators.js';
import carouselStyle from '../scss/carousel.scss';
import { TransitionEffect } from '../types';
import { dispatchFrigateCardEvent } from '../utils/basic.js';
export interface CarouselSelect {
index: number;
src/components/elements.ts
+14 -15
View File
@@ -1,28 +1,27 @@
import {
LitElement,
TemplateResult,
html,
CSSResultGroup,
unsafeCSS,
PropertyValues,
} from 'lit';
import { HomeAssistant } from 'custom-card-helpers';
import {
CSSResultGroup,
html,
LitElement,
PropertyValues,
TemplateResult,
unsafeCSS
} from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { ConditionState, fetchStateAndEvaluateCondition } from '../card-condition.js';
import { localize } from '../localize/localize.js';
import elementsStyle from '../scss/elements.scss';
import {
FrigateConditional,
MenuButton,
MenuIcon,
MenuStateIcon,
PictureElements,
MenuSubmenu,
MenuSubmenuSelect,
PictureElements
} from '../types.js';
import { dispatchErrorMessageEvent, dispatchFrigateCardEvent } from '../common.js';
import elementsStyle from '../scss/elements.scss';
import { localize } from '../localize/localize.js';
import { ConditionState, fetchStateAndEvaluateCondition } from '../card-condition.js';
import { dispatchFrigateCardEvent } from '../utils/basic.js';
import { dispatchErrorMessageEvent } from './message.js';
/* A note on picture element rendering:
*
src/components/gallery.ts
+11 -14
View File
@@ -1,26 +1,23 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { HomeAssistant } from 'custom-card-helpers';
import {
css,
CSSResultGroup,
html,
LitElement,
PropertyValues,
TemplateResult,
css,
html,
unsafeCSS,
unsafeCSS
} from 'lit';
import { HomeAssistant } from 'custom-card-helpers';
import { customElement, property } from 'lit/decorators.js';
import { CameraConfig, GalleryConfig, frigateCardConfigDefaults } from '../types.js';
import { BrowseMediaUtil } from '../browse-media-util.js';
import { View } from '../view.js';
import { THUMBNAIL_DETAILS_WIDTH_MIN } from './thumbnail.js';
import { renderProgressIndicator } from './message.js';
import { stopEventFromActivatingCardWideActions } from '../common.js';
import './thumbnail.js';
import galleryStyle from '../scss/gallery.scss';
import { CameraConfig, frigateCardConfigDefaults, GalleryConfig } from '../types.js';
import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
import { BrowseMediaUtil } from '../utils/ha/browse-media.js';
import { View } from '../view.js';
import { renderProgressIndicator } from './message.js';
import './thumbnail.js';
import { THUMBNAIL_DETAILS_WIDTH_MIN } from './thumbnail.js';
@customElement('frigate-card-gallery')
export class FrigateCardGallery extends LitElement {
src/components/image.ts
+11 -16
View File
@@ -1,28 +1,23 @@
import { HomeAssistant } from 'custom-card-helpers';
import {
CSSResultGroup,
html,
LitElement,
PropertyValues,
TemplateResult,
html,
unsafeCSS,
unsafeCSS
} from 'lit';
import { HomeAssistant } from 'custom-card-helpers';
import { createRef, ref, Ref } from 'lit/directives/ref.js';
import { customElement, property, state } from 'lit/decorators.js';
import { createRef, ref, Ref } from 'lit/directives/ref.js';
import { CachedValueController } from '../cached-value-controller.js';
import { CameraConfig, ImageViewConfig } from '../types.js';
import { View } from '../view.js';
import {
dispatchErrorMessageEvent,
dispatchMediaShowEvent,
shouldUpdateBasedOnHass,
} from '../common.js';
import { localize } from '../localize/localize.js';
import defaultImage from '../images/frigate-bird-in-sky.jpg';
import { localize } from '../localize/localize.js';
import imageStyle from '../scss/image.scss';
import { CameraConfig, ImageViewConfig } from '../types.js';
import { shouldUpdateBasedOnHass } from '../utils/ha';
import { dispatchMediaShowEvent } from '../utils/media-info.js';
import { View } from '../view.js';
import { dispatchErrorMessageEvent } from './message.js';
// See: https://github.com/home-assistant/core/blob/dev/homeassistant/components/camera/__init__.py#L101
const HASS_REJECTION_CUTOFF_MS = 5 * 60 * 1000;
@@ -41,7 +36,7 @@ export class FrigateCardImage extends LitElement {
@state()
protected _imageConfig?: ImageViewConfig;
protected _refImage: Ref<HTMLImageElement> = createRef() ;
protected _refImage: Ref<HTMLImageElement> = createRef();
protected _cachedValueController?: CachedValueController<string>;
protected _boundVisibilityHandler = this._visibilityHandler.bind(this);
src/components/live.ts
+41 -45
View File
@@ -1,60 +1,56 @@
import JSMpeg from '@cycjimmy/jsmpeg-player';
import { Task } from '@lit-labs/task';
import { HomeAssistant } from 'custom-card-helpers';
import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
import {
CSSResultGroup,
LitElement,
TemplateResult,
html,
unsafeCSS,
LitElement,
PropertyValues,
TemplateResult,
unsafeCSS
} from 'lit';
import {
ExtendedHomeAssistant,
CameraConfig,
JSMPEGConfig,
LiveConfig,
MediaShowInfo,
WebRTCCardConfig,
FrigateCardError,
FrigateCardMediaPlayer,
LiveOverrides,
LiveProvider,
TransitionEffect,
frigateCardConfigDefaults,
} from '../types.js';
import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
import { HomeAssistant } from 'custom-card-helpers';
import JSMpeg from '@cycjimmy/jsmpeg-player';
import { Ref, createRef, ref } from 'lit/directives/ref.js';
import { Task } from '@lit-labs/task';
import { customElement, property, state } from 'lit/decorators.js';
import { createRef, Ref, ref } from 'lit/directives/ref.js';
import { until } from 'lit/directives/until.js';
import { AutoMediaPlugin, AutoMediaPluginType } from './embla-plugins/automedia.js';
import { BrowseMediaUtil } from '../browse-media-util.js';
import { ConditionState, getOverriddenConfig } from '../card-condition.js';
import { FrigateCardMediaCarousel } from './media-carousel.js';
import { FrigateCardNextPreviousControl } from './next-prev-control.js';
import { Lazyload } from './embla-plugins/lazyload.js';
import { View } from '../view.js';
import { localize } from '../localize/localize.js';
import {
contentsChanged,
dispatchErrorMessageEvent,
dispatchExistingMediaShowInfoAsEvent,
dispatchMediaShowEvent,
getCameraIcon,
getCameraTitle,
homeAssistantSignPath,
stopEventFromActivatingCardWideActions,
} from '../common.js';
import { renderProgressIndicator } from '../components/message.js';
import './next-prev-control.js';
import './title-control.js';
import liveStyle from '../scss/live.scss';
import { localize } from '../localize/localize.js';
import liveFrigateStyle from '../scss/live-frigate.scss';
import liveJSMPEGStyle from '../scss/live-jsmpeg.scss';
import liveWebRTCStyle from '../scss/live-webrtc.scss';
import liveStyle from '../scss/live.scss';
import {
CameraConfig,
ExtendedHomeAssistant,
frigateCardConfigDefaults,
FrigateCardError,
FrigateCardMediaPlayer,
JSMPEGConfig,
LiveConfig,
LiveOverrides,
LiveProvider,
MediaShowInfo,
TransitionEffect,
WebRTCCardConfig
} from '../types.js';
import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
import { contentsChanged } from '../utils/basic.js';
import { getCameraIcon, getCameraTitle } from '../utils/camera.js';
import { homeAssistantSignPath } from '../utils/ha';
import { BrowseMediaUtil } from '../utils/ha/browse-media.js';
import {
dispatchExistingMediaShowInfoAsEvent,
dispatchMediaShowEvent
} from '../utils/media-info.js';
import { View } from '../view.js';
import { AutoMediaPlugin, AutoMediaPluginType } from './embla-plugins/automedia.js';
import { Lazyload } from './embla-plugins/lazyload.js';
import { FrigateCardMediaCarousel } from './media-carousel.js';
import { dispatchErrorMessageEvent } from './message.js';
import './next-prev-control.js';
import { FrigateCardNextPreviousControl } from './next-prev-control.js';
import './title-control.js';
// Number of seconds a signed URL is valid for.
const URL_SIGN_EXPIRY_SECONDS = 24 * 60 * 60;
src/components/media-carousel.ts
+9 -12
View File
@@ -1,21 +1,18 @@
import { CSSResultGroup, unsafeCSS } from 'lit';
import { EmblaCarouselType } from 'embla-carousel';
import { createRef, Ref } from 'lit/directives/ref.js';
import { CSSResultGroup, unsafeCSS } from 'lit';
import { customElement } from 'lit/decorators.js';
import { AutoMediaPluginType } from './embla-plugins/automedia.js';
import { FrigateCardCarousel } from './carousel.js';
import { FrigateCardNextPreviousControl } from './next-prev-control.js';
import { FrigateCardTitleControl } from './title-control.js';
import { createRef, Ref } from 'lit/directives/ref.js';
import mediaCarouselStyle from '../scss/media-carousel.scss';
import type { MediaShowInfo } from '../types.js';
import {
dispatchExistingMediaShowInfoAsEvent,
isValidMediaShowInfo,
} from '../common.js';
isValidMediaShowInfo
} from '../utils/media-info.js';
import { FrigateCardCarousel } from './carousel.js';
import { AutoMediaPluginType } from './embla-plugins/automedia.js';
import './next-prev-control.js';
import mediaCarouselStyle from '../scss/media-carousel.scss';
import { FrigateCardNextPreviousControl } from './next-prev-control.js';
import { FrigateCardTitleControl } from './title-control.js';
const getEmptyImageSrc = (width: number, height: number) =>
`data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"%3E%3C/svg%3E`;
src/components/menu.ts
+10 -14
View File
@@ -1,38 +1,34 @@
import { HASSDomEvent, HomeAssistant } from 'custom-card-helpers';
import {
CSSResultGroup,
LitElement,
TemplateResult,
html,
unsafeCSS,
LitElement,
PropertyValues,
TemplateResult,
unsafeCSS
} from 'lit';
import { HASSDomEvent, HomeAssistant } from 'custom-card-helpers';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js';
import { actionHandler } from '../action-handler-directive.js';
import './submenu.js';
import menuStyle from '../scss/menu.scss';
import type {
ActionsConfig,
ActionType,
MenuButton,
MenuConfig,
MenuItem,
StateParameters,
StateParameters
} from '../types.js';
import {
convertActionToFrigateCardCustomAction,
frigateCardHandleActionConfig,
frigateCardHasAction,
getActionConfigGivenAction,
refreshDynamicStateParameters,
} from '../common.js';
import menuStyle from '../scss/menu.scss';
getActionConfigGivenAction
} from '../utils/action.js';
import { refreshDynamicStateParameters } from '../utils/ha';
import './submenu.js';
export const FRIGATE_BUTTON_MENU_ICON = 'frigate';
export const FRIGATE_ICON_FILLED =
src/components/message.ts
+52 -15
View File
@@ -1,11 +1,10 @@
import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { Message } from '../types.js';
import { TROUBLESHOOTING_URL } from '../const.js';
import { localize } from '../localize/localize.js';
import messageStyle from '../scss/message.scss';
import { Message } from '../types.js';
import { dispatchFrigateCardEvent } from '../utils/basic.js';
@customElement('frigate-card-message')
export class FrigateCardMessage extends LitElement {
@@ -21,18 +20,19 @@ export class FrigateCardMessage extends LitElement {
// Render the menu.
protected render(): TemplateResult {
const icon = this.icon ? this.icon : 'mdi:information-outline';
return html`
<div class="wrapper">
<div class="message">
<div class="icon">
<ha-icon icon="${icon}"> </ha-icon>
</div>
<div class="contents">
<span> ${this.message ? html`${this.message}` : ''} </span>
${this.context ? html`<pre>${JSON.stringify(this.context, null, 2)}</pre>` : ''}
</div>
return html` <div class="wrapper">
<div class="message">
<div class="icon">
<ha-icon icon="${icon}"> </ha-icon>
</div>
</div>`;
<div class="contents">
<span> ${this.message ? html`${this.message}` : ''} </span>
${this.context
? html`<pre>${JSON.stringify(this.context, null, 2)}</pre>`
: ''}
</div>
</div>
</div>`;
}
static get styles(): CSSResultGroup {
@@ -103,3 +103,40 @@ export function renderProgressIndicator(message?: string): TemplateResult {
</frigate-card-progress-indicator>
`;
}
/**
* Dispatch an event with a message to show to the user.
* @param element The element to send the event.
* @param message The message to show.
* @param icon An optional icon to attach to the message.
*/
export function dispatchMessageEvent(
element: HTMLElement,
message: string,
icon?: string,
context?: unknown,
): void {
dispatchFrigateCardEvent<Message>(element, 'message', {
message: message,
type: 'info',
icon: icon,
context: context,
});
}
/**
* Dispatch an event with an error message to show to the user.
* @param element The element to send the event.
* @param message The message to show.
*/
export function dispatchErrorMessageEvent(
element: HTMLElement,
message: string,
context?: unknown,
): void {
dispatchFrigateCardEvent<Message>(element, 'message', {
message: message,
type: 'error',
context: context,
});
}
src/components/submenu.ts
+9 -13
View File
@@ -1,29 +1,25 @@
import type { Corner } from '@material/mwc-menu';
import { HomeAssistant } from 'custom-card-helpers';
import {
CSSResultGroup,
html,
LitElement,
PropertyValues,
TemplateResult,
unsafeCSS,
unsafeCSS
} from 'lit';
import { HomeAssistant } from 'custom-card-helpers';
import { customElement, property } from 'lit/decorators.js';
import {
frigateCardHasAction,
refreshDynamicStateParameters,
shouldUpdateBasedOnHass,
stopEventFromActivatingCardWideActions,
} from '../common.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js';
import { MenuSubmenu, MenuSubmenuItem, MenuSubmenuSelect } from '../types.js';
import { actionHandler } from '../action-handler-directive.js';
import { domainIcon } from '../icons/domain-icon.js';
import submenuStyle from '../scss/submenu.scss';
import { MenuSubmenu, MenuSubmenuItem, MenuSubmenuSelect } from '../types.js';
import {
frigateCardHasAction,
stopEventFromActivatingCardWideActions
} from '../utils/action.js';
import { refreshDynamicStateParameters, shouldUpdateBasedOnHass } from '../utils/ha';
import { domainIcon } from '../utils/icons/domain-icon.js';
@customElement('frigate-card-submenu')
export class FrigateCardSubmenu extends LitElement {
src/components/surround-thumbnails.ts
+12 -12
View File
@@ -1,23 +1,20 @@
import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
import { HomeAssistant } from 'custom-card-helpers';
import { Task } from '@lit-labs/task';
import { HomeAssistant } from 'custom-card-helpers';
import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { BrowseMediaUtil } from '../browse-media-util.js';
import surroundThumbnailsStyle from '../scss/surround.scss';
import {
BrowseMediaQueryParameters,
FrigateBrowseMediaSource,
FrigateCardView,
ThumbnailsControlConfig,
ThumbnailsControlConfig
} from '../types.js';
import { ThumbnailCarouselTap } from './thumbnail-carousel.js';
import { dispatchFrigateCardEvent } from '../utils/basic.js';
import { BrowseMediaUtil } from '../utils/ha/browse-media.js';
import { View } from '../view.js';
import { dispatchErrorMessageEvent, dispatchFrigateCardEvent } from '../common.js';
import { dispatchErrorMessageEvent } from './message.js';
import './surround.js';
import surroundThumbnailsStyle from '../scss/surround.scss';
import { ThumbnailCarouselTap } from './thumbnail-carousel.js';
@customElement('frigate-card-surround-thumbnails')
export class FrigateCardSurround extends LitElement {
@@ -71,7 +68,10 @@ export class FrigateCardSurround extends LitElement {
}
let parent: FrigateBrowseMediaSource | null;
try {
parent = await BrowseMediaUtil.multipleBrowseMediaQueryMerged(this.hass, browseMediaParams);
parent = await BrowseMediaUtil.multipleBrowseMediaQueryMerged(
this.hass,
browseMediaParams,
);
} catch (e) {
return dispatchErrorMessageEvent(this, (e as Error).message);
}
src/components/thumbnail-carousel.ts
+9 -15
View File
@@ -1,22 +1,16 @@
import { BrowseMediaUtil } from '../browse-media-util.js';
import { CSSResultGroup, TemplateResult, html, unsafeCSS, PropertyValues } from 'lit';
import { EmblaOptionsType } from 'embla-carousel';
import { classMap } from 'lit/directives/class-map.js';
import { CSSResultGroup, html, PropertyValues, TemplateResult, unsafeCSS } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import type { FrigateBrowseMediaSource, ThumbnailsControlConfig } from '../types.js';
import { FrigateCardCarousel } from './carousel.js';
import { View } from '../view.js';
import {
contentsChanged,
dispatchFrigateCardEvent,
stopEventFromActivatingCardWideActions,
} from '../common.js';
import './thumbnail.js';
import thumbnailCarouselStyle from '../scss/thumbnail-carousel.scss';
import type { FrigateBrowseMediaSource, ThumbnailsControlConfig } from '../types.js';
import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
import { contentsChanged, dispatchFrigateCardEvent } from '../utils/basic.js';
import { BrowseMediaUtil } from '../utils/ha/browse-media.js';
import { View } from '../view.js';
import { FrigateCardCarousel } from './carousel.js';
import './thumbnail.js';
export interface ThumbnailCarouselTap {
slideIndex: number;
src/components/thumbnail.ts
+13 -17
View File
@@ -1,18 +1,14 @@
import { CSSResult, TemplateResult, html, unsafeCSS, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { format, fromUnixTime } from 'date-fns';
import type { FrigateBrowseMediaSource, FrigateEvent } from '../types.js';
import { View } from '../view.js';
import {
getEventDurationString,
prettifyFrigateName,
stopEventFromActivatingCardWideActions,
} from '../common.js';
import { CSSResult, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { localize } from '../localize/localize.js';
import thumbnailStyle from '../scss/thumbnail.scss';
import thumbnailDetailsStyle from '../scss/thumbnail-details.scss';
import thumbnailStyle from '../scss/thumbnail.scss';
import type { FrigateBrowseMediaSource, FrigateEvent } from '../types.js';
import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
import { prettifyTitle } from '../utils/basic.js';
import { getEventDurationString } from '../utils/frigate.js';
import { View } from '../view.js';
// The minimum width of a thumbnail with details enabled.
export const THUMBNAIL_DETAILS_WIDTH_MIN = 300;
@@ -28,14 +24,14 @@ export class FrigateCardThumbnailDetails extends LitElement {
}
const score = (this.event.top_score * 100).toFixed(2) + '%';
return html`<div class="left">
<div class="larger">${prettifyFrigateName(this.event.label)}</div>
<div class="larger">${prettifyTitle(this.event.label)}</div>
<div>
<span class="heading">${localize('event.start')}:</span>
<span>${format(fromUnixTime(this.event.start_time), 'HH:mm:ss')}</span>
<span class="heading">${localize('event.start')}:</span>
<span>${format(fromUnixTime(this.event.start_time), 'HH:mm:ss')}</span>
</div>
<div>
<span class="heading">${localize('event.duration')}:</span>
<span>${getEventDurationString(this.event)}</span>
<span class="heading">${localize('event.duration')}:</span>
<span>${getEventDurationString(this.event)}</span>
</div>
</div>
<div class="right">
src/components/timeline.ts
+21 -27
View File
@@ -1,11 +1,17 @@
import { HomeAssistant } from 'custom-card-helpers';
import { add, fromUnixTime, sub } from 'date-fns';
import {
CSSResultGroup,
LitElement,
TemplateResult,
html,
unsafeCSS,
LitElement,
PropertyValues,
TemplateResult,
unsafeCSS
} from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { createRef, ref, Ref } from 'lit/directives/ref.js';
import { isEqual } from 'lodash-es';
import { DataSet } from 'vis-data/esnext';
import {
DataGroupCollectionType,
@@ -14,38 +20,26 @@ import {
TimelineItem,
TimelineOptions,
TimelineOptionsCluster,
TimelineWindow,
TimelineWindow
} from 'vis-timeline/esnext';
import { HomeAssistant } from 'custom-card-helpers';
import { classMap } from 'lit/directives/class-map.js';
import { customElement, property } from 'lit/decorators.js';
import { createRef, ref, Ref } from 'lit/directives/ref.js';
import { add, fromUnixTime, sub } from 'date-fns';
import { isEqual } from 'lodash-es';
import { BrowseMediaUtil } from '../browse-media-util';
import { CAMERA_BIRDSEYE } from '../const';
import { localize } from '../localize/localize';
import timelineCoreStyle from '../scss/timeline-core.scss';
import timelineStyle from '../scss/timeline.scss';
import {
BrowseMediaQueryParameters,
CameraConfig,
FrigateBrowseMediaSource,
TimelineConfig,
FrigateEvent,
frigateCardConfigDefaults,
FrigateEvent,
TimelineConfig
} from '../types';
import { CAMERA_BIRDSEYE } from '../const';
import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
import { dispatchFrigateCardEvent } from '../utils/basic.js';
import { getCameraTitle } from '../utils/camera.js';
import { BrowseMediaUtil } from '../utils/ha/browse-media.js';
import { View, ViewContext } from '../view';
import {
dispatchErrorMessageEvent,
dispatchFrigateCardEvent,
dispatchMessageEvent,
getCameraTitle,
stopEventFromActivatingCardWideActions,
} from '../common.js';
import { localize } from '../localize/localize';
import timelineCoreStyle from '../scss/timeline-core.scss';
import timelineStyle from '../scss/timeline.scss';
import { dispatchErrorMessageEvent, dispatchMessageEvent } from './message.js';
import './surround-thumbnails.js';
const TIMELINE_EVENT_MANAGER_MAX_AGE_SECONDS = 10;
src/components/viewer.ts
+19 -22
View File
@@ -1,19 +1,21 @@
import { Task } from '@lit-labs/task';
import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
import {
CSSResultGroup,
html,
LitElement,
PropertyValues,
TemplateResult,
html,
unsafeCSS,
unsafeCSS
} from 'lit';
import { BrowseMediaUtil } from '../browse-media-util.js';
import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
import { Task } from '@lit-labs/task';
import { customElement, property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { ref } from 'lit/directives/ref.js';
import { AutoMediaPlugin } from './embla-plugins/automedia.js';
import {
dispatchErrorMessageEvent,
renderProgressIndicator
} from '../components/message.js';
import viewerStyle from '../scss/viewer.scss';
import type {
BrowseMediaNeighbors,
BrowseMediaQueryParameters,
@@ -22,26 +24,21 @@ import type {
FrigateBrowseMediaSource,
MediaShowInfo,
TransitionEffect,
ViewerConfig,
ViewerConfig
} from '../types.js';
import { FrigateCardMediaCarousel, IMG_EMPTY } from './media-carousel.js';
import { FrigateCardNextPreviousControl } from './next-prev-control.js';
import { Lazyload, LazyloadType } from './embla-plugins/lazyload.js';
import { ResolvedMediaCache, ResolvedMediaUtil } from '../resolved-media.js';
import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
import { contentsChanged } from '../utils/basic.js';
import { BrowseMediaUtil } from '../utils/ha/browse-media.js';
import { createMediaShowInfo } from '../utils/media-info.js';
import { ResolvedMediaCache, ResolvedMediaUtil } from '../utils/resolved-media.js';
import { View } from '../view.js';
import {
contentsChanged,
createMediaShowInfo,
dispatchErrorMessageEvent,
stopEventFromActivatingCardWideActions,
} from '../common.js';
import { renderProgressIndicator } from '../components/message.js';
import { AutoMediaPlugin } from './embla-plugins/automedia.js';
import { Lazyload, LazyloadType } from './embla-plugins/lazyload.js';
import { FrigateCardMediaCarousel, IMG_EMPTY } from './media-carousel.js';
import './next-prev-control.js';
import { FrigateCardNextPreviousControl } from './next-prev-control.js';
import './title-control.js';
import viewerStyle from '../scss/viewer.scss';
@customElement('frigate-card-viewer')
export class FrigateCardViewer extends LitElement {
@property({ attribute: false })
src/editor.ts
+26 -35
View File
@@ -1,18 +1,15 @@
import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
import { fireEvent, HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers';
import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { HomeAssistant, LovelaceCardEditor, fireEvent } from 'custom-card-helpers';
import { localize } from './localize/localize.js';
import {
BUTTON_SIZE_MIN,
FRIGATE_MENU_PRIORITY_MAX,
RawFrigateCardConfig,
RawFrigateCardConfigArray,
THUMBNAIL_WIDTH_MAX,
THUMBNAIL_WIDTH_MIN,
frigateCardConfigDefaults,
} from './types.js';
copyConfig,
deleteConfigValue,
getArrayConfigPath,
getConfigValue,
isConfigUpgradeable,
setConfigValue,
upgradeConfig,
} from './config-mgmt.js';
import {
CONF_CAMERAS,
CONF_CAMERAS_ARRAY_CAMERA_ENTITY,
@@ -89,23 +86,20 @@ import {
CONF_VIEW_UPDATE_FORCE,
CONF_VIEW_UPDATE_SECONDS,
} from './const.js';
import {
arrayMove,
getCameraID,
getCameraTitle,
sideLoadHomeAssistantElements,
} from './common.js';
import {
copyConfig,
deleteConfigValue,
getArrayConfigPath,
getConfigValue,
isConfigUpgradeable,
setConfigValue,
upgradeConfig,
} from './config-mgmt.js';
import { localize } from './localize/localize.js';
import frigate_card_editor_style from './scss/editor.scss';
import {
BUTTON_SIZE_MIN,
frigateCardConfigDefaults,
FRIGATE_MENU_PRIORITY_MAX,
RawFrigateCardConfig,
RawFrigateCardConfigArray,
THUMBNAIL_WIDTH_MAX,
THUMBNAIL_WIDTH_MIN,
} from './types.js';
import { arrayMove } from './utils/basic.js';
import { getCameraID, getCameraTitle } from './utils/camera.js';
import { sideLoadHomeAssistantElements } from './utils/ha';
const MENU_BUTTONS = 'buttons';
const MENU_CAMERAS = 'cameras';
@@ -1006,12 +1000,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
})}
</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')} ${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')}
src/icons/alarm-panel-icon.ts
-42
View File
@@ -1,42 +0,0 @@
export const alarmPanelIcon = (state?: string) => {
switch (state) {
case "armed_away":
return "mdi:shield-lock";
case "armed_vacation":
return "mdi:shield-airplane";
case "armed_home":
return "mdi:shield-home";
case "armed_night":
return "mdi:shield-moon";
case "armed_custom_bypass":
return "mdi:security";
case "pending":
case "arming":
return "mdi:shield-sync";
case "triggered":
return "mdi:bell-ring";
case "disarmed":
return "mdi:shield-off";
default:
return "mdi:shield";
}
};
export const alarmPanelIconAction = (state?: string) => {
switch (state) {
case "armed_away":
return "mdi:shield-lock-outline";
case "armed_vacation":
return "mdi:shield-airplane-outline";
case "armed_home":
return "mdi:shield-home-outline";
case "armed_night":
return "mdi:shield-moon-outline";
case "armed_custom_bypass":
return "mdi:shield-half-full";
case "disarmed":
return "mdi:shield-off-outline";
default:
return "mdi:shield-outline";
}
};
src/icons/binary-sensor-icon.ts
-58
View File
@@ -1,58 +0,0 @@
import { HassEntity } from "home-assistant-js-websocket";
export const binarySensorIcon = (state?: string, entity?: HassEntity) => {
const isOff = state === "off";
switch (entity?.attributes.device_class) {
case "battery":
return isOff ? "mdi:battery" : "mdi:battery-outline";
case "battery_charging":
return isOff ? "mdi:battery" : "mdi:battery-charging";
case "cold":
return isOff ? "mdi:thermometer" : "mdi:snowflake";
case "connectivity":
return isOff ? "mdi:close-network-outline" : "mdi:check-network-outline";
case "door":
return isOff ? "mdi:door-closed" : "mdi:door-open";
case "garage_door":
return isOff ? "mdi:garage" : "mdi:garage-open";
case "power":
return isOff ? "mdi:power-plug-off" : "mdi:power-plug";
case "gas":
case "problem":
case "safety":
case "tamper":
return isOff ? "mdi:check-circle" : "mdi:alert-circle";
case "smoke":
return isOff ? "mdi:check-circle" : "mdi:smoke";
case "heat":
return isOff ? "mdi:thermometer" : "mdi:fire";
case "light":
return isOff ? "mdi:brightness5" : "mdi:brightness-7";
case "lock":
return isOff ? "mdi:lock" : "mdi:lock-open";
case "moisture":
return isOff ? "mdi:water-off" : "mdi:water";
case "motion":
return isOff ? "mdi:motion-sensor-off" : "mdi:motion-sensor";
case "occupancy":
return isOff ? "mdi:home-outline" : "mdi:home";
case "opening":
return isOff ? "mdi:square" : "mdi:square-outline";
case "plug":
return isOff ? "mdi:power-plug-off" : "mdi:power-plug";
case "presence":
return isOff ? "mdi:home-outline" : "mdi:home";
case "running":
return isOff ? "mdi:stop" : "mdi:play";
case "sound":
return isOff ? "mdi:music-note-off" : "mdi:music-note";
case "update":
return isOff ? "mdi:package" : "mdi:package-up";
case "vibration":
return isOff ? "mdi:crop-portrait" : "mdi:vibrate";
case "window":
return isOff ? "mdi:window-closed" : "mdi:window-open";
default:
return isOff ? "mdi:radiobox-blank" : "mdi:checkbox-marked-circle";
}
};
src/icons/cover-icon.ts
-113
View File
@@ -1,113 +0,0 @@
import { HassEntity } from "home-assistant-js-websocket";
export const coverIcon = (state?: string, entity?: HassEntity): string => {
const open = state !== "closed";
switch (entity?.attributes.device_class) {
case "garage":
switch (state) {
case "opening":
return "mdi:arrow-up-box";
case "closing":
return "mdi:arrow-down-box";
case "closed":
return "mdi:garage";
default:
return "mdi:garage-open";
}
case "gate":
switch (state) {
case "opening":
case "closing":
return "mdi:gate-arrow-right";
case "closed":
return "mdi:gate";
default:
return "mdi:gate-open";
}
case "door":
return open ? "mdi:door-open" : "mdi:door-closed";
case "damper":
return open ? "md:circle" : "mdi:circle-slice-8";
case "shutter":
switch (state) {
case "opening":
return "mdi:arrow-up-box";
case "closing":
return "mdi:arrow-down-box";
case "closed":
return "mdi:window-shutter";
default:
return "mdi:window-shutter-open";
}
case "curtain":
switch (state) {
case "opening":
return "mdi:arrow-split-vertical";
case "closing":
return "mdi:arrow-collapse-horizontal";
case "closed":
return "mdi:curtains-closed";
default:
return "mdi:curtains";
}
case "blind":
case "shade":
switch (state) {
case "opening":
return "mdi:arrow-up-box";
case "closing":
return "mdi:arrow-down-box";
case "closed":
return "mdi:blinds";
default:
return "mdi:blinds-open";
}
case "window":
switch (state) {
case "opening":
return "mdi:arrow-up-box";
case "closing":
return "mdi:arrow-down-box";
case "closed":
return "mdi:window-closed";
default:
return "mdi:window-open";
}
}
switch (state) {
case "opening":
return "mdi:arrow-up-box";
case "closing":
return "mdi:arrow-down-box";
case "closed":
return "mdi:window-closed";
default:
return "mdi:window-open";
}
};
export const computeOpenIcon = (stateObj: HassEntity): string => {
switch (stateObj.attributes.device_class) {
case "awning":
case "curtain":
case "door":
case "gate":
return "mdi:arrow-expand-horizontal";
default:
return "mdi:arrow-up";
}
};
export const computeCloseIcon = (stateObj: HassEntity): string => {
switch (stateObj.attributes.device_class) {
case "awning":
case "curtain":
case "door":
case "gate":
return "mdi:arrow-collapse-horizontal";
default:
return "mdi:arrow-down";
}
};
src/icons/domain-icon.ts
-166
View File
@@ -1,166 +0,0 @@
import { HassEntity } from "home-assistant-js-websocket";
import { UpdateEntity, updateIsInstalling } from "./update";
import { alarmPanelIcon } from "./alarm-panel-icon";
import { binarySensorIcon } from "./binary-sensor-icon";
import { coverIcon } from "./cover-icon";
import { sensorIcon } from "./sensor-icon";
export const DEFAULT_DOMAIN_ICON = "mdi:bookmark";
const FIXED_DOMAIN_ICONS = {
alert: "mdi:alert",
air_quality: "mdi:air-filter",
automation: "mdi:robot",
calendar: "mdi:calendar",
camera: "mdi:video",
climate: "mdi:thermostat",
configurator: "mdi:cog",
conversation: "mdi:text-to-speech",
counter: "mdi:counter",
fan: "mdi:fan",
google_assistant: "mdi:google-assistant",
group: "mdi:google-circles-communities",
homeassistant: "mdi:home-assistant",
homekit: "mdi:home-automation",
image_processing: "mdi:image-filter-frames",
input_button: "mdi:gesture-tap-button",
input_datetime: "mdi:calendar-clock",
input_number: "mdi:ray-vertex",
input_select: "mdi:format-list-bulleted",
input_text: "mdi:form-textbox",
light: "mdi:lightbulb",
mailbox: "mdi:mailbox",
notify: "mdi:comment-alert",
number: "mdi:ray-vertex",
persistent_notification: "mdi:bell",
person: "mdi:account",
plant: "mdi:flower",
proximity: "mdi:apple-safari",
remote: "mdi:remote",
scene: "mdi:palette",
script: "mdi:script-text",
select: "mdi:format-list-bulleted",
sensor: "mdi:eye",
siren: "mdi:bullhorn",
simple_alarm: "mdi:bell",
sun: "mdi:white-balance-sunny",
timer: "mdi:timer-outline",
updater: "mdi:cloud-upload",
vacuum: "mdi:robot-vacuum",
water_heater: "mdi:thermometer",
weather: "mdi:weather-cloudy",
zone: "mdi:map-marker-radius",
};
export function domainIcon(domain: string, entity?: HassEntity, state?: string): string {
switch (domain) {
case "alarm_control_panel":
return alarmPanelIcon(state);
case "binary_sensor":
return binarySensorIcon(state, entity);
case "button":
switch (entity?.attributes.device_class) {
case "restart":
return "mdi:restart";
case "update":
return "mdi:package-up";
default:
return "mdi:gesture-tap-button";
}
case "cover":
return coverIcon(state, entity);
case "device_tracker":
if (entity?.attributes.source_type === "router") {
return state === "home" ? "mdi:lan-connect" : "mdi:lan-disconnect";
}
if (["bluetooth", "bluetooth_le"].includes(entity?.attributes.source_type)) {
return state === "home" ? "mdi:bluetooth-connect" : "mdi:bluetooth";
}
return state === "not_home" ? "mdi:account-arrow-right" : "mdi:account";
case "humidifier":
return state && state === "off" ? "mdi:air-humidifier-off" : "mdi:air-humidifier";
case "input_boolean":
return state === "on" ? "mdi:check-circle-outline" : "mdi:close-circle-outline";
case "lock":
switch (state) {
case "unlocked":
return "mdi:lock-open";
case "jammed":
return "mdi:lock-alert";
case "locking":
case "unlocking":
return "mdi:lock-clock";
default:
return "mdi:lock";
}
case "media_player":
return state === "playing" ? "mdi:cast-connected" : "mdi:cast";
case "switch":
switch (entity?.attributes.device_class) {
case "outlet":
return state === "on" ? "mdi:power-plug" : "mdi:power-plug-off";
case "switch":
return state === "on" ? "mdi:toggle-switch" : "mdi:toggle-switch-off";
default:
return "mdi:flash";
}
case "zwave":
switch (state) {
case "dead":
return "mdi:emoticon-dead";
case "sleeping":
return "mdi:sleep";
case "initializing":
return "mdi:timer-sand";
default:
return "mdi:z-wave";
}
case "sensor": {
const icon = sensorIcon(entity);
if (icon) {
return icon;
}
break;
}
case "input_datetime":
if (!entity?.attributes.has_date) {
return "mdi:clock";
}
if (!entity.attributes.has_time) {
return "mdi:calendar";
}
break;
case "sun":
return entity?.state === "above_horizon"
? FIXED_DOMAIN_ICONS[domain]
: "mdi:weather-night";
case "update":
return entity?.state === "on"
? updateIsInstalling(entity as UpdateEntity)
? "mdi:package-down"
: "mdi:package-up"
: "mdi:package";
}
if (domain in FIXED_DOMAIN_ICONS) {
return FIXED_DOMAIN_ICONS[domain];
}
console.warn(`Unable to find icon for domain ${domain}`);
return DEFAULT_DOMAIN_ICON;
}
src/icons/sensor-icon.ts
-112
View File
@@ -1,112 +0,0 @@
import { UNIT_C, UNIT_F } from "custom-card-helpers";
import { HassEntity } from "home-assistant-js-websocket";
const FIXED_DEVICE_CLASS_ICONS = {
apparent_power: "mdi:flash",
aqi: "mdi:air-filter",
carbon_dioxide: "mdi:molecule-co2",
carbon_monoxide: "mdi:molecule-co",
current: "mdi:current-ac",
date: "mdi:calendar",
energy: "mdi:lightning-bolt",
frequency: "mdi:sine-wave",
gas: "mdi:gas-cylinder",
humidity: "mdi:water-percent",
illuminance: "mdi:brightness-5",
monetary: "mdi:cash",
nitrogen_dioxide: "mdi:molecule",
nitrogen_monoxide: "mdi:molecule",
nitrous_oxide: "mdi:molecule",
ozone: "mdi:molecule",
pm1: "mdi:molecule",
pm10: "mdi:molecule",
pm25: "mdi:molecule",
power: "mdi:flash",
power_factor: "mdi:angle-acute",
pressure: "mdi:gauge",
reactive_power: "mdi:flash",
signal_strength: "mdi:wifi",
sulphur_dioxide: "mdi:molecule",
temperature: "mdi:thermometer",
timestamp: "mdi:clock",
volatile_organic_compounds: "mdi:molecule",
voltage: "mdi:sine-wave",
};
const SENSOR_DEVICE_CLASS_BATTERY = "battery";
const BATTERY_ICONS = {
10: "mdi:battery-10",
20: "mdi:battery-20",
30: "mdi:battery-30",
40: "mdi:battery-40",
50: "mdi:battery-50",
60: "mdi:battery-60",
70: "mdi:battery-70",
80: "mdi:battery-80",
90: "mdi:battery-90",
100: "mdi:battery",
};
const BATTERY_CHARGING_ICONS = {
10: "mdi:battery-charging-10",
20: "mdi:battery-charging-20",
30: "mdi:battery-charging-30",
40: "mdi:battery-charging-40",
50: "mdi:battery-charging-50",
60: "mdi:battery-charging-60",
70: "mdi:battery-charging-70",
80: "mdi:battery-charging-80",
90: "mdi:battery-charging-90",
100: "mdi:battery-charging",
};
const batteryStateIcon = (batteryEntity: HassEntity, batteryChargingEntity?: HassEntity) => {
const battery = batteryEntity.state;
const batteryCharging = batteryChargingEntity?.state === "on";
return batteryIcon(battery, batteryCharging);
};
export const batteryIcon = (batteryState: number | string, batteryCharging?: boolean) => {
const batteryValue = Number(batteryState);
if (isNaN(batteryValue)) {
if (batteryState === "off") {
return "mdi:battery";
}
if (batteryState === "on") {
return "mdi:battery-alert";
}
return "mdi:battery-unknown";
}
const batteryRound = Math.round(batteryValue / 10) * 10;
if (batteryCharging && batteryValue >= 10) {
return BATTERY_CHARGING_ICONS[batteryRound];
}
if (batteryCharging) {
return "mdi:battery-charging-outline";
}
if (batteryValue <= 5) {
return "mdi:battery-alert-variant-outline";
}
return BATTERY_ICONS[batteryRound];
};
export const sensorIcon = (entity?: HassEntity): string | undefined => {
const dclass = entity?.attributes.device_class;
if (dclass && dclass in FIXED_DEVICE_CLASS_ICONS) {
return FIXED_DEVICE_CLASS_ICONS[dclass];
}
if (dclass === SENSOR_DEVICE_CLASS_BATTERY) {
return entity ? batteryStateIcon(entity) : "mdi:battery";
}
const unit = entity?.attributes.unit_of_measurement;
if (unit === UNIT_C || unit === UNIT_F) {
return "mdi:thermometer";
}
return undefined;
};
src/icons/state-icon.ts
-18
View File
@@ -1,18 +0,0 @@
import { computeDomain } from "custom-card-helpers";
import { HassEntity } from "home-assistant-js-websocket";
import { DEFAULT_DOMAIN_ICON, domainIcon } from "./domain-icon";
export function stateIcon(entity?: HassEntity | null): string {
if (!entity) {
return DEFAULT_DOMAIN_ICON;
}
if (entity.attributes.icon) {
return entity.attributes.icon;
}
const domain = computeDomain(entity.entity_id);
const state = entity.state;
return domainIcon(domain, entity, state);
}
src/icons/update.ts
-32
View File
@@ -1,32 +0,0 @@
import type { HassEntity, HassEntityAttributeBase, HassEntityBase } from "home-assistant-js-websocket";
export const UPDATE_SUPPORT_INSTALL = 1;
export const UPDATE_SUPPORT_SPECIFIC_VERSION = 2;
export const UPDATE_SUPPORT_PROGRESS = 4;
export const UPDATE_SUPPORT_BACKUP = 8;
export const UPDATE_SUPPORT_RELEASE_NOTES = 16;
interface UpdateEntityAttributes extends HassEntityAttributeBase {
auto_update: boolean | null;
installed_version: string | null;
in_progress: boolean | number;
latest_version: string | null;
release_summary: string | null;
release_url: string | null;
skipped_version: string | null;
title: string | null;
}
export interface UpdateEntity extends HassEntityBase {
attributes: UpdateEntityAttributes;
}
export const supportsFeature = (stateObj: HassEntity, feature: number): boolean =>
((stateObj.attributes.supported_features ?? 0) & feature) !== 0;
export const updateUsesProgress = (entity: UpdateEntity): boolean =>
supportsFeature(entity, UPDATE_SUPPORT_PROGRESS) &&
typeof entity.attributes.in_progress === "number";
export const updateIsInstalling = (entity: UpdateEntity): boolean =>
updateUsesProgress(entity) || !!entity.attributes.in_progress;
src/patches/ha-camera-stream.ts
+2 -3
View File
@@ -9,12 +9,11 @@
// available as compilation time.
// ====================================================================
import { TemplateResult, css, html } from 'lit';
import { css, html, TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
import { query } from 'lit/decorators/query.js';
import { FrigateCardMediaPlayer } from '../types.js';
import { dispatchMediaShowEvent } from '../common.js';
import { dispatchMediaShowEvent } from '../utils/media-info.js';
customElements.whenDefined('ha-camera-stream').then(() => {
// ========================================================================================
src/patches/ha-hls-player.ts
+3 -3
View File
@@ -9,11 +9,11 @@
// available as compilation time.
// ====================================================================
import { TemplateResult, css, html } from 'lit';
import { css, html, TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
import { query } from 'lit/decorators/query.js';
import { dispatchErrorMessageEvent, dispatchMediaShowEvent } from '../common.js';
import { dispatchErrorMessageEvent } from '../components/message.js';
import { dispatchMediaShowEvent } from '../utils/media-info.js';
customElements.whenDefined('ha-hls-player').then(() => {
@customElement('frigate-card-ha-hls-player')
src/patches/ha-web-rtc-player.ts
+3 -3
View File
@@ -9,11 +9,11 @@
// available as compilation time.
// ====================================================================
import { TemplateResult, html } from 'lit';
import { html, TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
import { query } from 'lit/decorators/query.js';
import { dispatchErrorMessageEvent, dispatchMediaShowEvent } from '../common.js';
import { dispatchErrorMessageEvent } from '../components/message.js';
import { dispatchMediaShowEvent } from '../utils/media-info.js';
customElements.whenDefined('ha-web-rtc-player').then(() => {
@customElement('frigate-card-ha-web-rtc-player')
src/types.ts
+4 -5
View File
@@ -1,4 +1,3 @@
import { StyleInfo } from 'lit/directives/style-map.js';
import {
CallServiceActionConfig,
ConfirmationRestrictionConfig,
@@ -12,11 +11,11 @@ import {
NoActionConfig,
Themes,
ToggleActionConfig,
UrlActionConfig,
UrlActionConfig
} from 'custom-card-helpers';
import { StyleInfo } from 'lit/directives/style-map.js';
import { z } from 'zod';
import { deepRemoveDefaults } from './zod-util';
import { deepRemoveDefaults } from './utils/zod.js';
// The min allowed size of buttons.
export const BUTTON_SIZE_MIN = 20;
@@ -1156,7 +1155,7 @@ export interface FrigateCardMediaPlayer {
export interface CardHelpers {
createCardElement(config: LovelaceCardConfig): Promise<{
constructor: {
getConfigElement(): HTMLElement
getConfigElement(): HTMLElement;
};
}>;
}
src/utils/action.ts
+185
View File
@@ -0,0 +1,185 @@
import {
ActionConfig,
handleActionConfig,
hasAction,
HomeAssistant
} from 'custom-card-helpers';
import {
Actions,
ActionsConfig,
ActionType,
FrigateCardAction,
FrigateCardCustomAction,
frigateCardCustomActionSchema
} from '../types.js';
/**
* Convert a generic Action to a FrigateCardCustomAction if it parses correctly.
* @param action The generic action configuration.
* @returns A FrigateCardCustomAction or null if it cannot be converted.
*/
export function convertActionToFrigateCardCustomAction(
action: ActionType | null,
): FrigateCardCustomAction | null {
if (!action) {
return null;
}
// Parse a custom event as other things could generate ll-custom events that
// are not related to Frigate Card.
const parseResult = frigateCardCustomActionSchema.safeParse(action);
return parseResult.success ? parseResult.data : null;
}
/**
* Create a Frigate card custom action.
* @param action The Frigate card action string (e.g. 'fullscreen')
* @returns A FrigateCardCustomAction for that action string or null.
*/
export function createFrigateCardCustomAction(
action: FrigateCardAction,
args?: {
camera?: string;
media_player?: string;
media_player_action?: 'play' | 'stop';
},
): FrigateCardCustomAction | null {
if (action === 'camera_select') {
if (!args?.camera) {
return null;
}
return {
action: 'fire-dom-event',
frigate_card_action: action,
camera: args.camera as string,
};
}
if (action === 'media_player') {
if (!args?.media_player || !args.media_player_action) {
return null;
}
return {
action: 'fire-dom-event',
frigate_card_action: action,
media_player: args.media_player,
media_player_action: args.media_player_action,
};
}
return {
action: 'fire-dom-event',
frigate_card_action: action,
};
}
/**
* Get an action configuration given a config and an interaction (e.g. 'tap').
* @param interaction The interaction: `tap`, `hold` or `double_tap`
* @param config The configuration containing multiple actions.
* @returns The relevant action configuration or null if none found.
*/
export function getActionConfigGivenAction(
interaction?: string,
config?: Actions,
): ActionType | ActionType[] | undefined {
if (!interaction || !config) {
return undefined;
}
if (interaction == 'tap' && config.tap_action) {
return config.tap_action;
} else if (interaction == 'hold' && config.hold_action) {
return config.hold_action;
} else if (interaction == 'double_tap' && config.double_tap_action) {
return config.double_tap_action;
} else if (interaction == 'end_tap' && config.end_tap_action) {
return config.end_tap_action;
} else if (interaction == 'start_tap' && config.start_tap_action) {
return config.start_tap_action;
}
return undefined;
}
/**
* Frigate card custom version of handleAction
* (https://github.com/custom-cards/custom-card-helpers/blob/master/src/handle-action.ts)
* that handles the custom action events the card supports.
* @param node The node that fired the event.
* @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: {
camera_image?: string;
entity?: string;
},
action: string,
actionConfig: ActionType | ActionType[] | undefined,
): boolean => {
// Only allow a tap action to use a default non-config (the more-info config).
if (actionConfig || action == 'tap') {
// ActionConfig vs ActionType:
// There is a slight typing (but not functional) difference between
// ActionType in this card and ActionConfig in `custom-card-helpers`. See
// `ExtendedConfirmationRestrictionConfig` in `types.ts` for the source and
// reason behind this difference.
if (Array.isArray(actionConfig)) {
actionConfig.forEach((action) =>
handleActionConfig(node, hass, config, action as ActionConfig | undefined),
);
} else {
handleActionConfig(node, hass, config, actionConfig as ActionConfig | undefined);
}
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 => {
// See note above on 'ActionConfig vs ActionType' for why this cast is
// necessary and harmless.
if (Array.isArray(config)) {
return !!config.find((item) => hasAction(item as ActionConfig | undefined));
}
return hasAction(config as ActionConfig | undefined);
};
/**
* Stop an event from activating card wide actions.
*/
export const stopEventFromActivatingCardWideActions = (ev: Event): void => {
ev.stopPropagation();
};
src/utils/basic.ts
+62
View File
@@ -0,0 +1,62 @@
import { isEqual } from 'lodash-es';
/**
* Dispatch a Frigate Card event.
* @param element The element to send the event.
* @param name The name of the Frigate card event to send.
* @param detail An optional detail object to attach.
*/
export function dispatchFrigateCardEvent<T>(
target: EventTarget,
name: string,
detail?: T,
): void {
target.dispatchEvent(
new CustomEvent<T>(`frigate-card:${name}`, {
bubbles: true,
composed: true,
detail: detail,
}),
);
}
/**
* Prettify a title by converting '_' to spaces and capitalizing words.
* @param input The input Frigate (camera/label/zone) name.
* @returns A prettified name.
*/
export function prettifyTitle(input?: string): string | undefined {
if (!input) {
return undefined;
}
const words = input.split(/[_\s]+/);
return words
.map((word) => {
return word[0].toUpperCase() + word.substring(1);
})
.join(' ');
}
/**
* Move an element within an array.
* @param target Target array.
* @param from From index.
* @param to To index.
*/
export function arrayMove(target: unknown[], from: number, to: number): void {
const element = target[from];
target.splice(from, 1);
target.splice(to, 0, element);
}
/**
* Determine if the contents of the n(ew) and o(ld) values have changed. For use
* in lit web components that may have a value that changes address but not
* contents -- and for which a re-render is expensive/jarring.
* @param n The new value.
* @param o The old value.
* @returns `true` is the contents have changed.
*/
export function contentsChanged(n: unknown, o: unknown): boolean {
return !isEqual(n, o);
}
src/utils/camera.ts
+66
View File
@@ -0,0 +1,66 @@
import { HomeAssistant } from 'custom-card-helpers';
import { CameraConfig, RawFrigateCardConfig } from '../types.js';
import { prettifyTitle } from './basic.js';
import { getEntityIcon, getEntityTitle } from './ha';
/**
* Get a camera id.
* @param config The camera config (either parsed or raw).
* @returns A camera id.
*/
export function getCameraID(
config?: CameraConfig | RawFrigateCardConfig | null,
): string {
return (
(typeof config?.id === 'string' && config.id) ||
(typeof config?.camera_entity === 'string' && config.camera_entity) ||
(typeof config?.webrtc_card === 'object' &&
config.webrtc_card &&
typeof config.webrtc_card['entity'] === 'string' &&
config.webrtc_card['entity']) ||
(typeof config?.camera_name === 'string' && config.camera_name) ||
''
);
}
/**
* Get a camera text title.
* @param hass The Home Assistant object.
* @param config The camera config (either parsed or raw).
* @returns A title string.
*/
export function getCameraTitle(
hass?: HomeAssistant,
config?: CameraConfig | RawFrigateCardConfig | null,
): string {
// Attempt to render a recognizable name for the camera,
// starting with the most likely to be useful and working our
// ways towards the least useful. Extra type checking here since this is also
// used on raw configuration in the editor.
return (
(typeof config?.title === 'string' && config.title) ||
(typeof config?.camera_entity === 'string'
? getEntityTitle(hass, config.camera_entity)
: '') ||
(typeof config?.webrtc_card === 'object' &&
config.webrtc_card &&
typeof config.webrtc_card['entity'] === 'string' &&
config.webrtc_card['entity']) ||
(typeof config?.camera_name === 'string' ? prettifyTitle(config.camera_name) : '') ||
(typeof config?.id === 'string' && config.id) ||
''
);
}
/**
* Get a camera icon.
* @param hass The Home Assistant object.
* @param config The camera config.
* @returns An icon string.
*/
export function getCameraIcon(
hass?: HomeAssistant,
config?: CameraConfig | null,
): string {
return config?.icon || getEntityIcon(hass, config?.camera_entity) || 'mdi:video';
}
src/utils/frigate.ts
+33
View File
@@ -0,0 +1,33 @@
import {
differenceInHours, differenceInMinutes, differenceInSeconds, fromUnixTime
} from 'date-fns';
import { localize } from '../localize/localize.js';
import { FrigateEvent } from '../types.js';
/**
* Convenience function to convert a timestamp to hours, minutes and seconds
* string. Heavily inspired by, and returning the same format as, the Frigate
* UI: https://github.com/blakeblackshear/frigate/blob/master/web/src/components/RecordingPlaylist.jsx#L97
* @param event The Frigate event.
* @returns A duration string.
*/
export function getEventDurationString(event: FrigateEvent): string {
if (!event.end_time) {
return localize('event.in_progress');
}
const start = fromUnixTime(event.start_time);
const end = fromUnixTime(event.end_time);
const hours = differenceInHours(end, start);
const minutes = differenceInMinutes(end, start) - hours * 60;
const seconds = differenceInSeconds(end, start) - hours * 60 * 60 - minutes * 60;
let duration = '';
if (hours) {
duration += `${hours}h `;
}
if (minutes) {
duration += `${minutes}m `;
}
duration += `${seconds}s`;
return duration;
}
src/browse-media-util.ts → src/utils/ha/browse-media.ts
+14 -15
View File
@@ -1,21 +1,20 @@
import { HomeAssistant } from 'custom-card-helpers';
import { homeAssistantWSRequest } from '.';
import {
BrowseMediaQueryParameters,
FrigateBrowseMediaSource,
CameraConfig,
MEDIA_CLASS_PLAYLIST,
MEDIA_TYPE_PLAYLIST,
} from './types.js';
import { View } from './view.js';
import { frigateBrowseMediaSourceSchema } from './types.js';
dispatchErrorMessageEvent,
dispatchMessageEvent
} from '../../components/message.js';
import { localize } from '../../localize/localize.js';
import {
dispatchErrorMessageEvent,
dispatchMessageEvent,
getCameraTitle,
homeAssistantWSRequest,
} from './common.js';
import { localize } from './localize/localize.js';
BrowseMediaQueryParameters,
CameraConfig,
FrigateBrowseMediaSource,
frigateBrowseMediaSourceSchema,
MEDIA_CLASS_PLAYLIST,
MEDIA_TYPE_PLAYLIST
} from '../../types.js';
import { View } from '../../view.js';
import { getCameraTitle } from '../camera.js';
export class BrowseMediaUtil {
/**
src/utils/ha/index.ts
+256
View File
@@ -0,0 +1,256 @@
import { computeStateDomain, HomeAssistant } from 'custom-card-helpers';
import { HassEntity, MessageBase } from 'home-assistant-js-websocket';
import { StyleInfo } from 'lit/directives/style-map.js';
import { ZodSchema } from 'zod';
import { localize } from '../../localize/localize.js';
import {
CardHelpers,
ExtendedHomeAssistant,
SignedPath,
signedPathSchema,
StateParameters
} from '../../types.js';
import { stateIcon } from '../icons/state-icon.js';
import { getParseErrorKeys } from '../zod.js';
/**
* Make a HomeAssistant websocket request. May throw.
* @param hass The HomeAssistant object to send the request with.
* @param schema The expected Zod schema of the response.
* @param request The request to make.
* @returns The parsed valid response or null on malformed.
*/
export async function homeAssistantWSRequest<T>(
hass: HomeAssistant,
schema: ZodSchema<T>,
request: MessageBase,
): Promise<T> {
const response = await hass.callWS<T>(request);
if (!response) {
const error_message = `${localize('error.empty_response')}: ${JSON.stringify(
request,
)}`;
console.warn(error_message);
throw new Error(error_message);
}
const parseResult = schema.safeParse(response);
if (!parseResult.success) {
const keys = getParseErrorKeys<T>(parseResult.error);
const error_message =
`${localize('error.invalid_response')}: ${JSON.stringify(request)}. ` +
localize('error.invalid_keys') +
`: '${keys}'`;
console.warn(error_message);
throw new Error(error_message);
}
return parseResult.data;
}
/**
* Request that HA sign a path. May throw.
* @param hass The HomeAssistant object used to request the signature.
* @param path The path to sign.
* @param expires An optional number of seconds to sign the path for.
* @returns The signed URL, or null if the response was malformed.
*/
export async function homeAssistantSignPath(
hass: ExtendedHomeAssistant,
path: string,
expires?: number,
): Promise<string | null> {
const request = {
type: 'auth/sign_path',
path: path,
expires: expires,
};
const response = await homeAssistantWSRequest<SignedPath>(
hass,
signedPathSchema,
request,
);
if (!response) {
return null;
}
return hass.hassUrl(response.path);
}
/**
* Determine whether the card should be updated based on Home Assistant changes.
* @param newHass The new HA object.
* @param oldHass The old HA object.
* @param entities The entities to examine for changes.
* @returns A boolean indicating whether or not to allow an update.
*/
export function shouldUpdateBasedOnHass(
newHass: HomeAssistant | undefined | null,
oldHass: HomeAssistant | undefined | null,
entities: string[] | null,
): boolean {
if (!newHass || !entities || !entities.length) {
return false;
}
if (!oldHass) {
return true;
}
for (let i = 0; i < entities.length; i++) {
const entity = entities[i];
if (entity && oldHass.states[entity] !== newHass.states[entity]) {
return true;
}
}
return false;
}
/**
* Calculate a style brightness from a hass state.
* Inspired by https://github.com/home-assistant/frontend/blob/7d5b5663123bb16d1da0c5bac3f2fc26d5f69ae8/src/panels/lovelace/cards/hui-button-card.ts#L296
* @param state The hass state object.
* @returns A CSS brightness string.
*/
function computeBrightnessFromState(state: HassEntity): string {
if (state.state === 'off' || !state.attributes.brightness) {
return '';
}
const brightness = state.attributes.brightness;
return `brightness(${(brightness + 245) / 5}%)`;
}
/**
* Calculate a style color from a hass state.
* Inspired by https://github.com/home-assistant/frontend/blob/7d5b5663123bb16d1da0c5bac3f2fc26d5f69ae8/src/panels/lovelace/cards/hui-button-card.ts#L304
* @param state The hass state object.
* @returns A CSS color string.
*/
function computeColorFromState(state: HassEntity): string {
if (state.state === 'off') {
return '';
}
return state.attributes.rgb_color
? `rgb(${state.attributes.rgb_color.join(',')})`
: '';
}
/**
* Get the style of emphasized menu items.
* @returns A StyleInfo.
*/
function computeStyle(state: HassEntity): StyleInfo {
return {
color: computeColorFromState(state),
filter: computeBrightnessFromState(state),
};
}
/**
* Determine the string state of a given stateObj.
* From: https://github.com/home-assistant/frontend/blob/dev/src/common/entity/compute_active_state.ts
* @param stateObj The HassEntity object from `hass.states`.
* @returns A string state, e.g. 'on'.
*/
export const computeActiveState = (stateObj: HassEntity): string => {
const domain = stateObj.entity_id.split('.')[0];
let state = stateObj.state;
if (domain === 'climate') {
state = stateObj.attributes.hvac_action;
}
return state;
};
/**
* Use Home Assistant state to refresh state parameters for an item to be rendered.
* @param hass Home Assistant object.
* @param params A StateParameters object to modify in place.
* @returns A StateParameters object updated based on HASS state.
*/
export function refreshDynamicStateParameters(
hass: HomeAssistant,
params: StateParameters,
): StateParameters {
if (!params.entity) {
return params;
}
const state = hass.states[params.entity];
if (!!state && !!params.state_color) {
params.style = { ...computeStyle(state), ...params.style };
}
params.title = params.title ?? (state?.attributes?.friendly_name || params.entity);
params.icon = params.icon ?? stateIcon(state);
const domain = state ? computeStateDomain(state) : undefined;
params.data_domain =
params.state_color || (domain === 'light' && params.state_color !== false)
? domain
: undefined;
if (state) {
params.data_state = computeActiveState(state);
}
return params;
}
/**
* Get the title of an entity.
* @param entity The entity id.
* @param hass The Home Assistant object.
* @returns The title or undefined.
*/
export function getEntityTitle(
hass?: HomeAssistant,
entity?: string,
): string | undefined {
return entity ? hass?.states[entity]?.attributes?.friendly_name : undefined;
}
/**
* Get the icon of an entity.
* @param entity The entity id.
* @param hass The Home Assistant object.
* @returns The icon or undefined.
*/
export function getEntityIcon(hass?: HomeAssistant, entity?: string): string {
return stateIcon(entity ? hass?.states[entity] : null);
}
/**
* Side loads the HA elements this card needs. This trickery is unfortunate
* necessary, see:
* - https://github.com/thomasloven/hass-config/wiki/PreLoading-Lovelace-Elements
* @returns `true` if the load is successful, `false` otherwise.
*/
export const sideLoadHomeAssistantElements = async (): Promise<boolean> => {
const neededElements = [
'ha-selector',
'ha-menu-button',
'ha-camera-stream',
'ha-hls-player',
'ha-web-rtc-player',
'ha-icon',
'ha-circular-progress',
'ha-icon-button',
'ha-card',
'ha-svg-icon',
'ha-button-menu',
];
if (neededElements.every((element) => customElements.get(element))) {
return true;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const helpers: CardHelpers = await (window as any).loadCardHelpers();
// The picture-glance editor loads everything this card needs.
const pictureGlance = await helpers.createCardElement({
type: 'picture-glance',
entities: [],
camera_image: 'dummy-to-load-editor-components',
});
if (pictureGlance.constructor.getConfigElement) {
await pictureGlance.constructor.getConfigElement();
return true;
}
return false;
};
src/utils/ha/update.ts
+36
View File
@@ -0,0 +1,36 @@
import {
HassEntity,
HassEntityAttributeBase,
HassEntityBase
} from 'home-assistant-js-websocket';
export const UPDATE_SUPPORT_INSTALL = 1;
export const UPDATE_SUPPORT_SPECIFIC_VERSION = 2;
export const UPDATE_SUPPORT_PROGRESS = 4;
export const UPDATE_SUPPORT_BACKUP = 8;
export const UPDATE_SUPPORT_RELEASE_NOTES = 16;
interface UpdateEntityAttributes extends HassEntityAttributeBase {
auto_update: boolean | null;
installed_version: string | null;
in_progress: boolean | number;
latest_version: string | null;
release_summary: string | null;
release_url: string | null;
skipped_version: string | null;
title: string | null;
}
export interface UpdateEntity extends HassEntityBase {
attributes: UpdateEntityAttributes;
}
export const supportsFeature = (stateObj: HassEntity, feature: number): boolean =>
((stateObj.attributes.supported_features ?? 0) & feature) !== 0;
export const updateUsesProgress = (entity: UpdateEntity): boolean =>
supportsFeature(entity, UPDATE_SUPPORT_PROGRESS) &&
typeof entity.attributes.in_progress === 'number';
export const updateIsInstalling = (entity: UpdateEntity): boolean =>
updateUsesProgress(entity) || !!entity.attributes.in_progress;
src/icons/LICENSE → src/utils/icons/LICENSE
View File
src/icons/README.md → src/utils/icons/README.md
View File
src/utils/icons/alarm-panel-icon.ts
+42
View File
@@ -0,0 +1,42 @@
export const alarmPanelIcon = (state?: string) => {
switch (state) {
case 'armed_away':
return 'mdi:shield-lock';
case 'armed_vacation':
return 'mdi:shield-airplane';
case 'armed_home':
return 'mdi:shield-home';
case 'armed_night':
return 'mdi:shield-moon';
case 'armed_custom_bypass':
return 'mdi:security';
case 'pending':
case 'arming':
return 'mdi:shield-sync';
case 'triggered':
return 'mdi:bell-ring';
case 'disarmed':
return 'mdi:shield-off';
default:
return 'mdi:shield';
}
};
export const alarmPanelIconAction = (state?: string) => {
switch (state) {
case 'armed_away':
return 'mdi:shield-lock-outline';
case 'armed_vacation':
return 'mdi:shield-airplane-outline';
case 'armed_home':
return 'mdi:shield-home-outline';
case 'armed_night':
return 'mdi:shield-moon-outline';
case 'armed_custom_bypass':
return 'mdi:shield-half-full';
case 'disarmed':
return 'mdi:shield-off-outline';
default:
return 'mdi:shield-outline';
}
};
src/utils/icons/binary-sensor-icon.ts
+58
View File
@@ -0,0 +1,58 @@
import { HassEntity } from 'home-assistant-js-websocket';
export const binarySensorIcon = (state?: string, entity?: HassEntity) => {
const isOff = state === 'off';
switch (entity?.attributes.device_class) {
case 'battery':
return isOff ? 'mdi:battery' : 'mdi:battery-outline';
case 'battery_charging':
return isOff ? 'mdi:battery' : 'mdi:battery-charging';
case 'cold':
return isOff ? 'mdi:thermometer' : 'mdi:snowflake';
case 'connectivity':
return isOff ? 'mdi:close-network-outline' : 'mdi:check-network-outline';
case 'door':
return isOff ? 'mdi:door-closed' : 'mdi:door-open';
case 'garage_door':
return isOff ? 'mdi:garage' : 'mdi:garage-open';
case 'power':
return isOff ? 'mdi:power-plug-off' : 'mdi:power-plug';
case 'gas':
case 'problem':
case 'safety':
case 'tamper':
return isOff ? 'mdi:check-circle' : 'mdi:alert-circle';
case 'smoke':
return isOff ? 'mdi:check-circle' : 'mdi:smoke';
case 'heat':
return isOff ? 'mdi:thermometer' : 'mdi:fire';
case 'light':
return isOff ? 'mdi:brightness5' : 'mdi:brightness-7';
case 'lock':
return isOff ? 'mdi:lock' : 'mdi:lock-open';
case 'moisture':
return isOff ? 'mdi:water-off' : 'mdi:water';
case 'motion':
return isOff ? 'mdi:motion-sensor-off' : 'mdi:motion-sensor';
case 'occupancy':
return isOff ? 'mdi:home-outline' : 'mdi:home';
case 'opening':
return isOff ? 'mdi:square' : 'mdi:square-outline';
case 'plug':
return isOff ? 'mdi:power-plug-off' : 'mdi:power-plug';
case 'presence':
return isOff ? 'mdi:home-outline' : 'mdi:home';
case 'running':
return isOff ? 'mdi:stop' : 'mdi:play';
case 'sound':
return isOff ? 'mdi:music-note-off' : 'mdi:music-note';
case 'update':
return isOff ? 'mdi:package' : 'mdi:package-up';
case 'vibration':
return isOff ? 'mdi:crop-portrait' : 'mdi:vibrate';
case 'window':
return isOff ? 'mdi:window-closed' : 'mdi:window-open';
default:
return isOff ? 'mdi:radiobox-blank' : 'mdi:checkbox-marked-circle';
}
};
src/utils/icons/cover-icon.ts
+113
View File
@@ -0,0 +1,113 @@
import { HassEntity } from 'home-assistant-js-websocket';
export const coverIcon = (state?: string, entity?: HassEntity): string => {
const open = state !== 'closed';
switch (entity?.attributes.device_class) {
case 'garage':
switch (state) {
case 'opening':
return 'mdi:arrow-up-box';
case 'closing':
return 'mdi:arrow-down-box';
case 'closed':
return 'mdi:garage';
default:
return 'mdi:garage-open';
}
case 'gate':
switch (state) {
case 'opening':
case 'closing':
return 'mdi:gate-arrow-right';
case 'closed':
return 'mdi:gate';
default:
return 'mdi:gate-open';
}
case 'door':
return open ? 'mdi:door-open' : 'mdi:door-closed';
case 'damper':
return open ? 'md:circle' : 'mdi:circle-slice-8';
case 'shutter':
switch (state) {
case 'opening':
return 'mdi:arrow-up-box';
case 'closing':
return 'mdi:arrow-down-box';
case 'closed':
return 'mdi:window-shutter';
default:
return 'mdi:window-shutter-open';
}
case 'curtain':
switch (state) {
case 'opening':
return 'mdi:arrow-split-vertical';
case 'closing':
return 'mdi:arrow-collapse-horizontal';
case 'closed':
return 'mdi:curtains-closed';
default:
return 'mdi:curtains';
}
case 'blind':
case 'shade':
switch (state) {
case 'opening':
return 'mdi:arrow-up-box';
case 'closing':
return 'mdi:arrow-down-box';
case 'closed':
return 'mdi:blinds';
default:
return 'mdi:blinds-open';
}
case 'window':
switch (state) {
case 'opening':
return 'mdi:arrow-up-box';
case 'closing':
return 'mdi:arrow-down-box';
case 'closed':
return 'mdi:window-closed';
default:
return 'mdi:window-open';
}
}
switch (state) {
case 'opening':
return 'mdi:arrow-up-box';
case 'closing':
return 'mdi:arrow-down-box';
case 'closed':
return 'mdi:window-closed';
default:
return 'mdi:window-open';
}
};
export const computeOpenIcon = (stateObj: HassEntity): string => {
switch (stateObj.attributes.device_class) {
case 'awning':
case 'curtain':
case 'door':
case 'gate':
return 'mdi:arrow-expand-horizontal';
default:
return 'mdi:arrow-up';
}
};
export const computeCloseIcon = (stateObj: HassEntity): string => {
switch (stateObj.attributes.device_class) {
case 'awning':
case 'curtain':
case 'door':
case 'gate':
return 'mdi:arrow-collapse-horizontal';
default:
return 'mdi:arrow-down';
}
};
src/utils/icons/domain-icon.ts
+166
View File
@@ -0,0 +1,166 @@
import { HassEntity } from 'home-assistant-js-websocket';
import { UpdateEntity, updateIsInstalling } from '../ha/update.js';
import { alarmPanelIcon } from './alarm-panel-icon';
import { binarySensorIcon } from './binary-sensor-icon';
import { coverIcon } from './cover-icon';
import { sensorIcon } from './sensor-icon';
export const DEFAULT_DOMAIN_ICON = 'mdi:bookmark';
const FIXED_DOMAIN_ICONS = {
alert: 'mdi:alert',
air_quality: 'mdi:air-filter',
automation: 'mdi:robot',
calendar: 'mdi:calendar',
camera: 'mdi:video',
climate: 'mdi:thermostat',
configurator: 'mdi:cog',
conversation: 'mdi:text-to-speech',
counter: 'mdi:counter',
fan: 'mdi:fan',
google_assistant: 'mdi:google-assistant',
group: 'mdi:google-circles-communities',
homeassistant: 'mdi:home-assistant',
homekit: 'mdi:home-automation',
image_processing: 'mdi:image-filter-frames',
input_button: 'mdi:gesture-tap-button',
input_datetime: 'mdi:calendar-clock',
input_number: 'mdi:ray-vertex',
input_select: 'mdi:format-list-bulleted',
input_text: 'mdi:form-textbox',
light: 'mdi:lightbulb',
mailbox: 'mdi:mailbox',
notify: 'mdi:comment-alert',
number: 'mdi:ray-vertex',
persistent_notification: 'mdi:bell',
person: 'mdi:account',
plant: 'mdi:flower',
proximity: 'mdi:apple-safari',
remote: 'mdi:remote',
scene: 'mdi:palette',
script: 'mdi:script-text',
select: 'mdi:format-list-bulleted',
sensor: 'mdi:eye',
siren: 'mdi:bullhorn',
simple_alarm: 'mdi:bell',
sun: 'mdi:white-balance-sunny',
timer: 'mdi:timer-outline',
updater: 'mdi:cloud-upload',
vacuum: 'mdi:robot-vacuum',
water_heater: 'mdi:thermometer',
weather: 'mdi:weather-cloudy',
zone: 'mdi:map-marker-radius',
};
export function domainIcon(domain: string, entity?: HassEntity, state?: string): string {
switch (domain) {
case 'alarm_control_panel':
return alarmPanelIcon(state);
case 'binary_sensor':
return binarySensorIcon(state, entity);
case 'button':
switch (entity?.attributes.device_class) {
case 'restart':
return 'mdi:restart';
case 'update':
return 'mdi:package-up';
default:
return 'mdi:gesture-tap-button';
}
case 'cover':
return coverIcon(state, entity);
case 'device_tracker':
if (entity?.attributes.source_type === 'router') {
return state === 'home' ? 'mdi:lan-connect' : 'mdi:lan-disconnect';
}
if (['bluetooth', 'bluetooth_le'].includes(entity?.attributes.source_type)) {
return state === 'home' ? 'mdi:bluetooth-connect' : 'mdi:bluetooth';
}
return state === 'not_home' ? 'mdi:account-arrow-right' : 'mdi:account';
case 'humidifier':
return state && state === 'off' ? 'mdi:air-humidifier-off' : 'mdi:air-humidifier';
case 'input_boolean':
return state === 'on' ? 'mdi:check-circle-outline' : 'mdi:close-circle-outline';
case 'lock':
switch (state) {
case 'unlocked':
return 'mdi:lock-open';
case 'jammed':
return 'mdi:lock-alert';
case 'locking':
case 'unlocking':
return 'mdi:lock-clock';
default:
return 'mdi:lock';
}
case 'media_player':
return state === 'playing' ? 'mdi:cast-connected' : 'mdi:cast';
case 'switch':
switch (entity?.attributes.device_class) {
case 'outlet':
return state === 'on' ? 'mdi:power-plug' : 'mdi:power-plug-off';
case 'switch':
return state === 'on' ? 'mdi:toggle-switch' : 'mdi:toggle-switch-off';
default:
return 'mdi:flash';
}
case 'zwave':
switch (state) {
case 'dead':
return 'mdi:emoticon-dead';
case 'sleeping':
return 'mdi:sleep';
case 'initializing':
return 'mdi:timer-sand';
default:
return 'mdi:z-wave';
}
case 'sensor': {
const icon = sensorIcon(entity);
if (icon) {
return icon;
}
break;
}
case 'input_datetime':
if (!entity?.attributes.has_date) {
return 'mdi:clock';
}
if (!entity.attributes.has_time) {
return 'mdi:calendar';
}
break;
case 'sun':
return entity?.state === 'above_horizon'
? FIXED_DOMAIN_ICONS[domain]
: 'mdi:weather-night';
case 'update':
return entity?.state === 'on'
? updateIsInstalling(entity as UpdateEntity)
? 'mdi:package-down'
: 'mdi:package-up'
: 'mdi:package';
}
if (domain in FIXED_DOMAIN_ICONS) {
return FIXED_DOMAIN_ICONS[domain];
}
console.warn(`Unable to find icon for domain ${domain}`);
return DEFAULT_DOMAIN_ICON;
}
src/utils/icons/sensor-icon.ts
+118
View File
@@ -0,0 +1,118 @@
import { UNIT_C, UNIT_F } from 'custom-card-helpers';
import { HassEntity } from 'home-assistant-js-websocket';
const FIXED_DEVICE_CLASS_ICONS = {
apparent_power: 'mdi:flash',
aqi: 'mdi:air-filter',
carbon_dioxide: 'mdi:molecule-co2',
carbon_monoxide: 'mdi:molecule-co',
current: 'mdi:current-ac',
date: 'mdi:calendar',
energy: 'mdi:lightning-bolt',
frequency: 'mdi:sine-wave',
gas: 'mdi:gas-cylinder',
humidity: 'mdi:water-percent',
illuminance: 'mdi:brightness-5',
monetary: 'mdi:cash',
nitrogen_dioxide: 'mdi:molecule',
nitrogen_monoxide: 'mdi:molecule',
nitrous_oxide: 'mdi:molecule',
ozone: 'mdi:molecule',
pm1: 'mdi:molecule',
pm10: 'mdi:molecule',
pm25: 'mdi:molecule',
power: 'mdi:flash',
power_factor: 'mdi:angle-acute',
pressure: 'mdi:gauge',
reactive_power: 'mdi:flash',
signal_strength: 'mdi:wifi',
sulphur_dioxide: 'mdi:molecule',
temperature: 'mdi:thermometer',
timestamp: 'mdi:clock',
volatile_organic_compounds: 'mdi:molecule',
voltage: 'mdi:sine-wave',
};
const SENSOR_DEVICE_CLASS_BATTERY = 'battery';
const BATTERY_ICONS = {
10: 'mdi:battery-10',
20: 'mdi:battery-20',
30: 'mdi:battery-30',
40: 'mdi:battery-40',
50: 'mdi:battery-50',
60: 'mdi:battery-60',
70: 'mdi:battery-70',
80: 'mdi:battery-80',
90: 'mdi:battery-90',
100: 'mdi:battery',
};
const BATTERY_CHARGING_ICONS = {
10: 'mdi:battery-charging-10',
20: 'mdi:battery-charging-20',
30: 'mdi:battery-charging-30',
40: 'mdi:battery-charging-40',
50: 'mdi:battery-charging-50',
60: 'mdi:battery-charging-60',
70: 'mdi:battery-charging-70',
80: 'mdi:battery-charging-80',
90: 'mdi:battery-charging-90',
100: 'mdi:battery-charging',
};
const batteryStateIcon = (
batteryEntity: HassEntity,
batteryChargingEntity?: HassEntity,
) => {
const battery = batteryEntity.state;
const batteryCharging = batteryChargingEntity?.state === 'on';
return batteryIcon(battery, batteryCharging);
};
export const batteryIcon = (
batteryState: number | string,
batteryCharging?: boolean,
) => {
const batteryValue = Number(batteryState);
if (isNaN(batteryValue)) {
if (batteryState === 'off') {
return 'mdi:battery';
}
if (batteryState === 'on') {
return 'mdi:battery-alert';
}
return 'mdi:battery-unknown';
}
const batteryRound = Math.round(batteryValue / 10) * 10;
if (batteryCharging && batteryValue >= 10) {
return BATTERY_CHARGING_ICONS[batteryRound];
}
if (batteryCharging) {
return 'mdi:battery-charging-outline';
}
if (batteryValue <= 5) {
return 'mdi:battery-alert-variant-outline';
}
return BATTERY_ICONS[batteryRound];
};
export const sensorIcon = (entity?: HassEntity): string | undefined => {
const dclass = entity?.attributes.device_class;
if (dclass && dclass in FIXED_DEVICE_CLASS_ICONS) {
return FIXED_DEVICE_CLASS_ICONS[dclass];
}
if (dclass === SENSOR_DEVICE_CLASS_BATTERY) {
return entity ? batteryStateIcon(entity) : 'mdi:battery';
}
const unit = entity?.attributes.unit_of_measurement;
if (unit === UNIT_C || unit === UNIT_F) {
return 'mdi:thermometer';
}
return undefined;
};
src/utils/icons/state-icon.ts
+18
View File
@@ -0,0 +1,18 @@
import { computeDomain } from 'custom-card-helpers';
import { HassEntity } from 'home-assistant-js-websocket';
import { DEFAULT_DOMAIN_ICON, domainIcon } from './domain-icon';
export function stateIcon(entity?: HassEntity | null): string {
if (!entity) {
return DEFAULT_DOMAIN_ICON;
}
if (entity.attributes.icon) {
return entity.attributes.icon;
}
const domain = computeDomain(entity.entity_id);
const state = entity.state;
return domainIcon(domain, entity, state);
}
src/utils/media-info.ts
+75
View File
@@ -0,0 +1,75 @@
import { MediaShowInfo } from '../types.js';
import { dispatchFrigateCardEvent } from './basic.js';
const MEDIA_INFO_HEIGHT_CUTOFF = 50;
const MEDIA_INFO_WIDTH_CUTOFF = MEDIA_INFO_HEIGHT_CUTOFF;
/**
* Create a MediaShowInfo object.
* @param source An event or HTMLElement that should be used as a source.
* @returns A new MediaShowInfo object or null if one could not be created.
*/
export function createMediaShowInfo(source: Event | HTMLElement): MediaShowInfo | null {
let target: HTMLElement | EventTarget;
if (source instanceof Event) {
target = source.composedPath()[0];
} else {
target = source;
}
if (target instanceof HTMLImageElement) {
return {
width: (target as HTMLImageElement).naturalWidth,
height: (target as HTMLImageElement).naturalHeight,
};
} else if (target instanceof HTMLVideoElement) {
return {
width: (target as HTMLVideoElement).videoWidth,
height: (target as HTMLVideoElement).videoHeight,
};
} else if (target instanceof HTMLCanvasElement) {
return {
width: (target as HTMLCanvasElement).width,
height: (target as HTMLCanvasElement).height,
};
}
return null;
}
/**
* Dispatch a Frigate card media show event.
* @param element The element to send the event.
* @param source An event or HTMLElement that should be used as a source.
*/
export function dispatchMediaShowEvent(
element: HTMLElement,
source: Event | HTMLElement,
): void {
const mediaShowInfo = createMediaShowInfo(source);
if (mediaShowInfo) {
dispatchExistingMediaShowInfoAsEvent(element, mediaShowInfo);
}
}
/**
* Dispatch a pre-existing MediaShowInfo object as an event.
* @param element The element to send the event.
* @param mediaShowInfo The MediaShowInfo object to send.
*/
export function dispatchExistingMediaShowInfoAsEvent(
element: HTMLElement,
mediaShowInfo: MediaShowInfo,
): void {
dispatchFrigateCardEvent<MediaShowInfo>(element, 'media-show', mediaShowInfo);
}
/**
* Determine if a MediaShowInfo object is valid/acceptable.
* @param info The MediaShowInfo object.
* @returns True if the object is valid, false otherwise.
*/
export function isValidMediaShowInfo(info: MediaShowInfo): boolean {
return (
info.height >= MEDIA_INFO_HEIGHT_CUTOFF && info.width >= MEDIA_INFO_WIDTH_CUTOFF
);
}
src/resolved-media.ts → src/utils/resolved-media.ts
+9 -10
View File
@@ -1,25 +1,24 @@
import { HomeAssistant } from 'custom-card-helpers';
import { homeAssistantWSRequest } from './common.js';
import {
FrigateBrowseMediaSource,
ResolvedMedia,
resolvedMediaSchema,
} from './types.js';
import QuickLRU from 'quick-lru';
import {
FrigateBrowseMediaSource,
ResolvedMedia,
resolvedMediaSchema
} from '../types.js';
import { homeAssistantWSRequest } from './ha';
// It's important the cache size be at least as large as the largest likely
// media query or media items will from a given query will be evicted for other
// items in the same query (which would result in only partial results being
// returned to the user).
// Note: Each entry is about 400 bytes.
const RESOLVED_MEDIA_CACHE_SIZE = 1000;
// Note: Each entry is about 400 bytes.
const RESOLVED_MEDIA_CACHE_SIZE = 1000;
export class ResolvedMediaCache {
protected _cache: QuickLRU<string, ResolvedMedia>;
constructor() {
this._cache = new QuickLRU({maxSize: RESOLVED_MEDIA_CACHE_SIZE});
this._cache = new QuickLRU({ maxSize: RESOLVED_MEDIA_CACHE_SIZE });
}
public has(id: string): boolean {
src/zod-util.ts → src/utils/zod.ts
+10
View File
@@ -46,3 +46,13 @@ export function deepRemoveDefaults<T extends z.ZodTypeAny>(schema: T): any {
}
return schema;
}
/**
* Get the keys that didn't parse from a ZodError.
* @param error The zoderror to extract the keys from.
* @returns An array of error keys.
*/
export function getParseErrorKeys<T>(error: z.ZodError<T>): string[] {
const errors = error.format();
return Object.keys(errors).filter((v) => !v.startsWith('_'));
}
src/view.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import type { FrigateBrowseMediaSource, FrigateCardView } from './types.js';
import { dispatchFrigateCardEvent } from './common.js';
import { dispatchFrigateCardEvent } from './utils/basic.js';
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface ViewContext {}