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

Merge pull request #584 from dermotduffy/refactor

Browse Source 
Refactor `common.js` into multiple files
This commit is contained in:
Dermot Duffy
2022-05-12 21:17:16 -07:00
committed by GitHub
parent 3cea188c40 0f4452c19c
commit 2e1e142ab4
49 changed files with 2098 additions and 2159 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 { noChange } from 'lit';
import { import {
AttributePart, AttributePart,
directive, directive,
Directive, Directive,
DirectiveParameters, DirectiveParameters
} from 'lit/directive.js'; } from 'lit/directive.js';
import { stopEventFromActivatingCardWideActions } from './utils/action.js';
import type {
ActionHandlerDetail,
ActionHandlerOptions,
} from 'custom-card-helpers/dist/types.d.js';
import { fireEvent } from 'custom-card-helpers';
import { stopEventFromActivatingCardWideActions } from './common';
interface ActionHandler extends HTMLElement { interface ActionHandler extends HTMLElement {
holdTime: number; holdTime: number;
src/browse-media-util.ts
-415
View File
@@ -1,415 +0,0 @@
import { HomeAssistant } from 'custom-card-helpers';
import {
BrowseMediaQueryParameters,
FrigateBrowseMediaSource,
CameraConfig,
MEDIA_CLASS_PLAYLIST,
MEDIA_TYPE_PLAYLIST,
} from './types.js';
import { View } from './view.js';
import { frigateBrowseMediaSourceSchema } from './types.js';
import {
dispatchErrorMessageEvent,
dispatchMessageEvent,
getCameraTitle,
homeAssistantWSRequest,
} from './common.js';
import { localize } from './localize/localize.js';
export class BrowseMediaUtil {
/**
* Return the Frigate event_id given a FrigateBrowseMediaSource object.
* @param media The event to get the id from.
* @returns The `event_id` or `null` if not successfully parsed.
*/
static getEventID(media: FrigateBrowseMediaSource): string | null {
return media.frigate?.event.id ?? null;
}
/**
* Return the event start time given a FrigateBrowseMediaSource object.
* @param browseMedia The media object to get the start time from.
* @returns The start time in unix/epoch time, or null if it cannot be determined.
*/
static getEventStartTime(media: FrigateBrowseMediaSource): number | null {
return media.frigate?.event.start_time ?? null;
}
/**
* Determine if a FrigateBrowseMediaSource object is truly a media item (vs a folder).
* @param media The media object.
* @returns `true` if it's truly a media item, `false` otherwise.
*/
static isTrueMedia(media?: FrigateBrowseMediaSource): boolean {
return !!media && !media.can_expand;
}
/**
* From a FrigateBrowseMediaSource item extract the first true media item from the
* children (i.e. a clip/snapshot, not a folder).
* @param media The media object with children.
* @returns The first true media item found.
*/
static getFirstTrueMediaChildIndex(
media: FrigateBrowseMediaSource | null,
): number | null {
if (!media || !media.children) {
return null;
}
const index = media.children.findIndex((child) => this.isTrueMedia(child));
return index >= 0 ? index : null;
}
/**
* Browse Frigate media with a media content id. May throw.
* @param hass The HomeAssistant object.
* @param media_content_id The media content id to browse.
* @returns A FrigateBrowseMediaSource object or null on malformed.
*/
static async browseMedia(
hass: HomeAssistant,
media_content_id: string,
): Promise<FrigateBrowseMediaSource> {
const request = {
type: 'media_source/browse_media',
media_content_id: media_content_id,
};
return await homeAssistantWSRequest(hass, frigateBrowseMediaSourceSchema, request);
}
/**
* Browse Frigate media with a media query. May throw.
* @param hass The HomeAssistant object.
* @param params The search parameters to use to search for media.
* @returns A FrigateBrowseMediaSource object or null on malformed.
*/
static async browseMediaQuery(
hass: HomeAssistant,
params: BrowseMediaQueryParameters,
): Promise<FrigateBrowseMediaSource> {
return this.browseMedia(
hass,
// Defined in:
// https://github.com/blakeblackshear/frigate-hass-integration/blob/master/custom_components/frigate/media_source.py
[
'media-source://frigate',
params.clientId,
'event-search',
params.mediaType,
// If the name field ends in '.all' the integration will return up to 10K events.
params.unlimited ? '.all' : '',
params.after ? String(Math.floor(params.after)) : '',
params.before ? String(Math.ceil(params.before)) : '',
params.cameraName,
params.label,
params.zone,
].join('/'),
);
}
/**
* Browse multiple Frigate media queries. May throw.
* @param hass The HomeAssistant object.
* @param params An array of search parameters to use to search for media.
* @returns A map of FrigateBrowseMediaSource object or null on malformed.
*/
static async multipleBrowseMediaQuery(
hass: HomeAssistant,
params: BrowseMediaQueryParameters | BrowseMediaQueryParameters[],
): Promise<Map<BrowseMediaQueryParameters, FrigateBrowseMediaSource>> {
params = Array.isArray(params) ? params : [params];
const output: Map<BrowseMediaQueryParameters, FrigateBrowseMediaSource> = new Map();
await Promise.all(
params.map(async (param: BrowseMediaQueryParameters): Promise<void> => {
output.set(param, await this.browseMediaQuery(hass, param));
}),
);
return output;
}
/**
* Browse multiple Frigate media queries, then merged them. May throw.
* @param hass The HomeAssistant object.
* @param params An array of search parameters to use to search for media.
* @returns A single FrigateBrowseMediaSource object or null on malformed.
*/
static async multipleBrowseMediaQueryMerged(
hass: HomeAssistant,
params: BrowseMediaQueryParameters | BrowseMediaQueryParameters[],
): Promise<FrigateBrowseMediaSource> {
return this.mergeFrigateBrowseMediaSources(
await this.multipleBrowseMediaQuery(hass, params),
);
}
/**
* Merge multiple FrigateBrowseMediaSource into a single. Note that this may
* use information from the query to differentiate results that may otherwise
* be identical.
* @param input A map of query -> result.
* @returns A single FrigateBrowseMediaSource object.
*/
static mergeFrigateBrowseMediaSources(
input: Map<BrowseMediaQueryParameters, FrigateBrowseMediaSource>,
): FrigateBrowseMediaSource {
const children: FrigateBrowseMediaSource[] = [];
for (const [query, result] of input.entries()) {
for (const child of result.children || []) {
if (this.isTrueMedia(child)) {
children.push(child);
} else {
// If there are multiple inputs, separate the folder names with the
// query title (if available).
if (query.title && input.size > 1) {
children.push({ ...child, title: `[${query.title}] ${child.title}` });
} else {
children.push(child);
}
}
}
}
const eventSort = (
a: FrigateBrowseMediaSource,
b: FrigateBrowseMediaSource,
): number => {
if (
!a.frigate?.event ||
(b.frigate?.event && b.frigate.event.start_time > a.frigate.event.start_time)
) {
return 1;
}
if (
!b.frigate?.event ||
(a.frigate?.event && b.frigate.event.start_time < a.frigate.event.start_time)
) {
return -1;
}
return 0;
};
return this.createEventParentForChildren('Merged events', children.sort(eventSort));
}
/**
* Get the parameters to search for media.
* @returns A BrowseMediaQueryParameters object.
*/
static getBrowseMediaQueryParameters(
hass: HomeAssistant,
cameraID: string,
cameraConfig?: CameraConfig,
overrides?: Partial<BrowseMediaQueryParameters>,
): BrowseMediaQueryParameters | null {
if (!cameraConfig || !cameraConfig.camera_name) {
return null;
}
return {
clientId: cameraConfig.client_id,
cameraName: cameraConfig.camera_name,
label: cameraConfig.label,
zone: cameraConfig.zone,
title: getCameraTitle(hass, cameraConfig),
cameraID: cameraID,
...overrides,
};
}
/**
* Apply overrides to multiple query parameters.
* @param parameters An array of query parameters.
* @param overrides The overrides to apply.
* @returns The override query parameters.
*/
static overrideMultiBrowseMediaQueryParameters(
parameters: BrowseMediaQueryParameters[],
overrides: Partial<BrowseMediaQueryParameters>,
): BrowseMediaQueryParameters[] {
const output: BrowseMediaQueryParameters[] = [];
parameters.forEach((param) => {
output.push({ ...param, ...overrides });
});
return output;
}
/**
* Get BrowseMediaQueryParameters for a camera (including its dependencies).
* @param hass Home Assistant object.
* @param cameras Cameras map.
* @param camera Name of the current camera.
* @param mediaType Optional media type to include in the parameters.
* @returns An array of query parameters.
*/
static getFullDependentBrowseMediaQueryParameters(
hass: HomeAssistant,
cameras: Map<string, CameraConfig>,
camera: string,
mediaType?: 'clips' | 'snapshots',
): BrowseMediaQueryParameters[] | null {
const cameraIDs: Set<string> = new Set();
const getDependentCameras = (camera: string): void => {
const cameraConfig = cameras.get(camera);
if (cameraConfig) {
cameraIDs.add(camera);
for (const eventCameraID of cameraConfig.dependent_cameras || []) {
if (!cameraIDs.has(eventCameraID)) {
getDependentCameras(eventCameraID);
}
}
}
};
getDependentCameras(camera);
const params: BrowseMediaQueryParameters[] = [];
for (const cameraID of cameraIDs) {
const param = BrowseMediaUtil.getBrowseMediaQueryParameters(
hass,
cameraID,
cameras.get(cameraID),
mediaType ? { mediaType: mediaType } : {},
);
// Fail on a single bad camera, as it's almost certainly a user error that
// should be fixed rather than hidden.
if (!param) {
return null;
}
params.push(param);
}
return params.length ? params : null;
}
/**
* Get BrowseMediaQueryParameters for a camera (including its dependencies) or dispatch an error.
* @param element The element from which to dispatch the error.
* @param hass Home Assistant object.
* @param cameras Cameras map.
* @param camera Name of the current camera.
* @param mediaType Optional media type to include in the parameters.
* @returns An array of query parameters.
*/
static getFullDependentBrowseMediaQueryParametersOrDispatchError(
element: HTMLElement,
hass: HomeAssistant,
cameras: Map<string, CameraConfig>,
camera: string,
mediaType?: 'clips' | 'snapshots',
): BrowseMediaQueryParameters[] | null {
const params = this.getFullDependentBrowseMediaQueryParameters(
hass,
cameras,
camera,
mediaType,
);
if (!params) {
dispatchErrorMessageEvent(
element,
localize('error.no_camera_name'),
cameras.get(camera),
);
return null;
}
return params;
}
/**
* Fetch the latest media and dispatch a change view event to reflect the
* results. If no media is found a suitable message event will be triggered
* instead.
* @param element The HTMLElement to dispatch events from.
* @param hass The Home Assistant object.
* @param view The current view to evolve.
* @param browseMediaQueryParameters The media parameters to query with.
* @returns
*/
static async fetchLatestMediaAndDispatchViewChange(
element: HTMLElement,
hass: HomeAssistant,
view: Readonly<View>,
browseMediaQueryParameters:
| BrowseMediaQueryParameters
| BrowseMediaQueryParameters[],
): Promise<void> {
let parent: FrigateBrowseMediaSource | null;
try {
parent = await BrowseMediaUtil.multipleBrowseMediaQueryMerged(
hass,
browseMediaQueryParameters,
);
} catch (e) {
return dispatchErrorMessageEvent(element, (e as Error).message);
}
const childIndex = BrowseMediaUtil.getFirstTrueMediaChildIndex(parent);
if (!parent || !parent.children || childIndex == null) {
return dispatchMessageEvent(
element,
view.isClipRelatedView()
? localize('common.no_clip')
: localize('common.no_snapshot'),
view.isClipRelatedView() ? 'mdi:filmstrip-off' : 'mdi:camera-off',
);
}
view
.evolve({
target: parent,
childIndex: childIndex,
})
.dispatchChangeEvent(element);
}
/**
* Fetch the media of a child FrigateBrowseMediaSource object and dispatch a change
* view event to reflect the results.
* @param node The HTMLElement to dispatch events from.
* @param hass The Home Assistant object.
* @param view The current view to evolve.
* @param child The FrigateBrowseMediaSource child to query for.
* @returns
*/
static async fetchChildMediaAndDispatchViewChange(
element: HTMLElement,
hass: HomeAssistant,
view: Readonly<View>,
child: Readonly<FrigateBrowseMediaSource>,
): Promise<void> {
let parent: FrigateBrowseMediaSource;
try {
parent = await BrowseMediaUtil.browseMedia(hass, child.media_content_id);
} catch (e) {
return dispatchErrorMessageEvent(element, (e as Error).message);
}
view
.evolve({
target: parent,
})
.dispatchChangeEvent(element);
}
/**
* Given an array of media children, create a parent for them.
* @param title The title to use for the parent.
* @param children The children media items.
* @returns A single parent containing the children.
*/
static createEventParentForChildren(
title: string,
children: FrigateBrowseMediaSource[],
): FrigateBrowseMediaSource {
return {
title: title,
media_class: MEDIA_CLASS_PLAYLIST,
media_content_type: MEDIA_TYPE_PLAYLIST,
media_content_id: '',
can_play: false,
can_expand: true,
children_media_class: MEDIA_CLASS_PLAYLIST,
thumbnail: null,
children: children,
};
}
}
src/card.ts
+62 -66
View File
@@ -1,98 +1,94 @@
import { getLovelace, HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers';
import { import {
CSSResultGroup, CSSResultGroup,
html,
LitElement, LitElement,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
html, unsafeCSS
unsafeCSS,
} from 'lit'; } 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 { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import { createRef, ref, Ref } from 'lit/directives/ref.js'; import { createRef, ref, Ref } from 'lit/directives/ref.js';
import screenfull from 'screenfull'; import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
import { throttle } from 'lodash-es';
import { until } from 'lit/directives/until.js'; import { until } from 'lit/directives/until.js';
import { throttle } from 'lodash-es';
import screenfull from 'screenfull';
import { z } from 'zod'; import { z } from 'zod';
import { actionHandler } from './action-handler-directive.js';
import { import {
Actions, ConditionState,
ActionType, conditionStateRequestHandler,
CameraConfig, getOverriddenConfig,
FrigateCardView, getOverridesByKey
FrigateCardCustomAction, } from './card-condition.js';
FRIGATE_CARD_VIEWS_USER_SPECIFIED, import './components/elements.js';
RawFrigateCardConfig, import { FrigateCardElements } from './components/elements.js';
entitySchema, import './components/gallery.js';
frigateCardConfigSchema, import './components/image.js';
} from './types.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 { import type {
Entity, Entity,
ExtendedHomeAssistant, ExtendedHomeAssistant,
FrigateCardConfig, FrigateCardConfig,
MediaShowInfo, MediaShowInfo,
MenuButton, MenuButton,
Message, Message
} from './types.js'; } from './types.js';
import { import {
CAMERA_BIRDSEYE, Actions,
CARD_VERSION, ActionType,
MEDIA_PLAYER_SUPPORT_BROWSE_MEDIA, CameraConfig,
REPO_URL, entitySchema,
} from './const.js'; frigateCardConfigSchema,
import { FrigateCardElements } from './components/elements.js'; FrigateCardCustomAction,
import { FrigateCardImage } from './components/image.js'; FrigateCardView,
import { FRIGATE_BUTTON_MENU_ICON, FrigateCardMenu } from './components/menu.js'; FRIGATE_CARD_VIEWS_USER_SPECIFIED,
import { View } from './view.js'; RawFrigateCardConfig
} from './types.js';
import { import {
contentsChanged,
convertActionToFrigateCardCustomAction, convertActionToFrigateCardCustomAction,
createFrigateCardCustomAction, createFrigateCardCustomAction,
frigateCardHandleAction, frigateCardHandleAction,
frigateCardHasAction, frigateCardHasAction,
getActionConfigGivenAction, getActionConfigGivenAction
getCameraIcon, } from './utils/action.js';
getCameraID, import { contentsChanged } from './utils/basic.js';
getCameraTitle, import { getCameraIcon, getCameraID, getCameraTitle } from './utils/camera.js';
import {
getEntityIcon, getEntityIcon,
getEntityTitle, getEntityTitle,
homeAssistantSignPath, homeAssistantSignPath,
homeAssistantWSRequest, homeAssistantWSRequest,
isValidMediaShowInfo,
shouldUpdateBasedOnHass, shouldUpdateBasedOnHass,
sideLoadHomeAssistantElements, sideLoadHomeAssistantElements
} from './common.js'; } from './utils/ha';
import { localize } from './localize/localize.js'; import { getEventID } from './utils/ha/browse-media.js';
import { renderMessage, renderProgressIndicator } from './components/message.js'; import { supportsFeature } from './utils/ha/update.js';
import { isValidMediaShowInfo } from './utils/media-info.js';
import './editor.js'; import { ResolvedMediaCache } from './utils/resolved-media.js';
import './components/elements.js'; import { View } from './view.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';
/** A note on media callbacks: /** A note on media callbacks:
* *
@@ -919,7 +915,7 @@ export class FrigateCard extends LitElement {
}); });
return; return;
} }
const event_id = BrowseMediaUtil.getEventID(this._view.media); const event_id = getEventID(this._view.media);
if (!event_id) { if (!event_id) {
this._setMessageAndUpdate({ this._setMessageAndUpdate({
message: localize('error.download_no_event_id'), message: localize('error.download_no_event_id'),
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, { import EmblaCarousel, {
EmblaCarouselType, EmblaCarouselType,
EmblaOptionsType, EmblaOptionsType,
EmblaPluginType, EmblaPluginType
} from 'embla-carousel'; } from 'embla-carousel';
import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'; import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
import { CSSResultGroup, LitElement, PropertyValues, unsafeCSS } from 'lit';
import { TransitionEffect } from '../types'; import { property } from 'lit/decorators.js';
import { dispatchFrigateCardEvent } from '../common';
import carouselStyle from '../scss/carousel.scss'; import carouselStyle from '../scss/carousel.scss';
import { TransitionEffect } from '../types';
import { dispatchFrigateCardEvent } from '../utils/basic.js';
export interface CarouselSelect { export interface CarouselSelect {
index: number; 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 { HomeAssistant } from 'custom-card-helpers';
import {
CSSResultGroup,
html,
LitElement,
PropertyValues,
TemplateResult,
unsafeCSS
} from 'lit';
import { customElement, property } from 'lit/decorators.js'; 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 { import {
FrigateConditional, FrigateConditional,
MenuButton, MenuButton,
MenuIcon, MenuIcon,
MenuStateIcon, MenuStateIcon,
PictureElements,
MenuSubmenu, MenuSubmenu,
MenuSubmenuSelect, MenuSubmenuSelect,
PictureElements
} from '../types.js'; } from '../types.js';
import { dispatchErrorMessageEvent, dispatchFrigateCardEvent } from '../common.js'; import { dispatchFrigateCardEvent } from '../utils/basic.js';
import { dispatchErrorMessageEvent } from './message.js';
import elementsStyle from '../scss/elements.scss';
import { localize } from '../localize/localize.js';
import { ConditionState, fetchStateAndEvaluateCondition } from '../card-condition.js';
/* A note on picture element rendering: /* A note on picture element rendering:
* *
src/components/gallery.ts
+18 -17
View File
@@ -1,26 +1,27 @@
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
import { HomeAssistant } from 'custom-card-helpers';
import { import {
css,
CSSResultGroup, CSSResultGroup,
html,
LitElement, LitElement,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
css, unsafeCSS
html,
unsafeCSS,
} from 'lit'; } from 'lit';
import { HomeAssistant } from 'custom-card-helpers';
import { customElement, property } from 'lit/decorators.js'; 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 galleryStyle from '../scss/gallery.scss';
import { CameraConfig, frigateCardConfigDefaults, GalleryConfig } from '../types.js';
import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
import {
fetchChildMediaAndDispatchViewChange,
fetchLatestMediaAndDispatchViewChange,
getFullDependentBrowseMediaQueryParametersOrDispatchError
} from '../utils/ha/browse-media';
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') @customElement('frigate-card-gallery')
export class FrigateCardGallery extends LitElement { export class FrigateCardGallery extends LitElement {
@@ -54,7 +55,7 @@ export class FrigateCardGallery extends LitElement {
if (!this.view.target) { if (!this.view.target) {
const browseMediaQueryParameters = const browseMediaQueryParameters =
BrowseMediaUtil.getFullDependentBrowseMediaQueryParametersOrDispatchError( getFullDependentBrowseMediaQueryParametersOrDispatchError(
this, this,
this.hass, this.hass,
this.cameras, this.cameras,
@@ -66,7 +67,7 @@ export class FrigateCardGallery extends LitElement {
return; return;
} }
BrowseMediaUtil.fetchLatestMediaAndDispatchViewChange( fetchLatestMediaAndDispatchViewChange(
this, this,
this.hass, this.hass,
this.view, this.view,
@@ -219,7 +220,7 @@ export class FrigateCardGalleryCore extends LitElement {
<ha-card <ha-card
@click=${(ev) => { @click=${(ev) => {
if (this.hass && this.view) { if (this.hass && this.view) {
BrowseMediaUtil.fetchChildMediaAndDispatchViewChange( fetchChildMediaAndDispatchViewChange(
this, this,
this.hass, this.hass,
this.view, this.view,
src/components/image.ts
+11 -16
View File
@@ -1,28 +1,23 @@
import { HomeAssistant } from 'custom-card-helpers';
import { import {
CSSResultGroup, CSSResultGroup,
html,
LitElement, LitElement,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
html, unsafeCSS
unsafeCSS,
} from 'lit'; } 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 { customElement, property, state } from 'lit/decorators.js';
import { createRef, ref, Ref } from 'lit/directives/ref.js';
import { CachedValueController } from '../cached-value-controller.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 defaultImage from '../images/frigate-bird-in-sky.jpg';
import { localize } from '../localize/localize.js';
import imageStyle from '../scss/image.scss'; 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 // See: https://github.com/home-assistant/core/blob/dev/homeassistant/components/camera/__init__.py#L101
const HASS_REJECTION_CUTOFF_MS = 5 * 60 * 1000; const HASS_REJECTION_CUTOFF_MS = 5 * 60 * 1000;
@@ -41,7 +36,7 @@ export class FrigateCardImage extends LitElement {
@state() @state()
protected _imageConfig?: ImageViewConfig; protected _imageConfig?: ImageViewConfig;
protected _refImage: Ref<HTMLImageElement> = createRef() ; protected _refImage: Ref<HTMLImageElement> = createRef();
protected _cachedValueController?: CachedValueController<string>; protected _cachedValueController?: CachedValueController<string>;
protected _boundVisibilityHandler = this._visibilityHandler.bind(this); protected _boundVisibilityHandler = this._visibilityHandler.bind(this);
src/components/live.ts
+42 -46
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 { import {
CSSResultGroup, CSSResultGroup,
LitElement,
TemplateResult,
html, html,
unsafeCSS, LitElement,
PropertyValues, PropertyValues,
TemplateResult,
unsafeCSS
} from 'lit'; } 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 { customElement, property, state } from 'lit/decorators.js';
import { createRef, Ref, ref } from 'lit/directives/ref.js';
import { until } from 'lit/directives/until.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 { 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 { renderProgressIndicator } from '../components/message.js';
import { localize } from '../localize/localize.js';
import './next-prev-control.js';
import './title-control.js';
import liveStyle from '../scss/live.scss';
import liveFrigateStyle from '../scss/live-frigate.scss'; import liveFrigateStyle from '../scss/live-frigate.scss';
import liveJSMPEGStyle from '../scss/live-jsmpeg.scss'; import liveJSMPEGStyle from '../scss/live-jsmpeg.scss';
import liveWebRTCStyle from '../scss/live-webrtc.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 { getFullDependentBrowseMediaQueryParameters } 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. // Number of seconds a signed URL is valid for.
const URL_SIGN_EXPIRY_SECONDS = 24 * 60 * 60; const URL_SIGN_EXPIRY_SECONDS = 24 * 60 * 60;
@@ -129,7 +125,7 @@ export class FrigateCardLive extends LitElement {
// Does not use getFullDependentBrowseMediaQueryParametersOrDispatchError to // Does not use getFullDependentBrowseMediaQueryParametersOrDispatchError to
// ensure that non-Frigate cameras will work in live view (they will not // ensure that non-Frigate cameras will work in live view (they will not
// have a Frigate camera name). // have a Frigate camera name).
const browseMediaParams = BrowseMediaUtil.getFullDependentBrowseMediaQueryParameters( const browseMediaParams = getFullDependentBrowseMediaQueryParameters(
this.hass, this.hass,
this.cameras, this.cameras,
this.view.camera, this.view.camera,
src/components/media-carousel.ts
+9 -12
View File
@@ -1,21 +1,18 @@
import { CSSResultGroup, unsafeCSS } from 'lit';
import { EmblaCarouselType } from 'embla-carousel'; 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 { customElement } from 'lit/decorators.js';
import { createRef, Ref } from 'lit/directives/ref.js';
import { AutoMediaPluginType } from './embla-plugins/automedia.js'; import mediaCarouselStyle from '../scss/media-carousel.scss';
import { FrigateCardCarousel } from './carousel.js';
import { FrigateCardNextPreviousControl } from './next-prev-control.js';
import { FrigateCardTitleControl } from './title-control.js';
import type { MediaShowInfo } from '../types.js'; import type { MediaShowInfo } from '../types.js';
import { import {
dispatchExistingMediaShowInfoAsEvent, dispatchExistingMediaShowInfoAsEvent,
isValidMediaShowInfo, isValidMediaShowInfo
} from '../common.js'; } from '../utils/media-info.js';
import { FrigateCardCarousel } from './carousel.js';
import { AutoMediaPluginType } from './embla-plugins/automedia.js';
import './next-prev-control.js'; import './next-prev-control.js';
import { FrigateCardNextPreviousControl } from './next-prev-control.js';
import mediaCarouselStyle from '../scss/media-carousel.scss'; import { FrigateCardTitleControl } from './title-control.js';
const getEmptyImageSrc = (width: number, height: number) => 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`; `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 { import {
CSSResultGroup, CSSResultGroup,
LitElement,
TemplateResult,
html, html,
unsafeCSS, LitElement,
PropertyValues, PropertyValues,
TemplateResult,
unsafeCSS
} from 'lit'; } from 'lit';
import { HASSDomEvent, HomeAssistant } from 'custom-card-helpers';
import { customElement, property, state } from 'lit/decorators.js'; import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js'; import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js'; import { styleMap } from 'lit/directives/style-map.js';
import { actionHandler } from '../action-handler-directive.js'; import { actionHandler } from '../action-handler-directive.js';
import menuStyle from '../scss/menu.scss';
import './submenu.js';
import type { import type {
ActionsConfig, ActionsConfig,
ActionType, ActionType,
MenuButton, MenuButton,
MenuConfig, MenuConfig,
MenuItem, MenuItem,
StateParameters, StateParameters
} from '../types.js'; } from '../types.js';
import { import {
convertActionToFrigateCardCustomAction, convertActionToFrigateCardCustomAction,
frigateCardHandleActionConfig, frigateCardHandleActionConfig,
frigateCardHasAction, frigateCardHasAction,
getActionConfigGivenAction, getActionConfigGivenAction
refreshDynamicStateParameters, } from '../utils/action.js';
} from '../common.js'; import { refreshDynamicStateParameters } from '../utils/ha';
import './submenu.js';
import menuStyle from '../scss/menu.scss';
export const FRIGATE_BUTTON_MENU_ICON = 'frigate'; export const FRIGATE_BUTTON_MENU_ICON = 'frigate';
export const FRIGATE_ICON_FILLED = export const FRIGATE_ICON_FILLED =
src/components/message.ts
+44 -7
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 { customElement, property } from 'lit/decorators.js';
import { Message } from '../types.js';
import { TROUBLESHOOTING_URL } from '../const.js'; import { TROUBLESHOOTING_URL } from '../const.js';
import { localize } from '../localize/localize.js'; import { localize } from '../localize/localize.js';
import messageStyle from '../scss/message.scss'; import messageStyle from '../scss/message.scss';
import { Message } from '../types.js';
import { dispatchFrigateCardEvent } from '../utils/basic.js';
@customElement('frigate-card-message') @customElement('frigate-card-message')
export class FrigateCardMessage extends LitElement { export class FrigateCardMessage extends LitElement {
@@ -21,15 +20,16 @@ export class FrigateCardMessage extends LitElement {
// Render the menu. // Render the menu.
protected render(): TemplateResult { protected render(): TemplateResult {
const icon = this.icon ? this.icon : 'mdi:information-outline'; const icon = this.icon ? this.icon : 'mdi:information-outline';
return html` return html` <div class="wrapper">
<div class="wrapper">
<div class="message"> <div class="message">
<div class="icon"> <div class="icon">
<ha-icon icon="${icon}"> </ha-icon> <ha-icon icon="${icon}"> </ha-icon>
</div> </div>
<div class="contents"> <div class="contents">
<span> ${this.message ? html`${this.message}` : ''} </span> <span> ${this.message ? html`${this.message}` : ''} </span>
${this.context ? html`<pre>${JSON.stringify(this.context, null, 2)}</pre>` : ''} ${this.context
? html`<pre>${JSON.stringify(this.context, null, 2)}</pre>`
: ''}
</div> </div>
</div> </div>
</div>`; </div>`;
@@ -103,3 +103,40 @@ export function renderProgressIndicator(message?: string): TemplateResult {
</frigate-card-progress-indicator> </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 type { Corner } from '@material/mwc-menu';
import { HomeAssistant } from 'custom-card-helpers';
import { import {
CSSResultGroup, CSSResultGroup,
html, html,
LitElement, LitElement,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
unsafeCSS, unsafeCSS
} from 'lit'; } from 'lit';
import { HomeAssistant } from 'custom-card-helpers';
import { customElement, property } from 'lit/decorators.js'; import { customElement, property } from 'lit/decorators.js';
import {
frigateCardHasAction,
refreshDynamicStateParameters,
shouldUpdateBasedOnHass,
stopEventFromActivatingCardWideActions,
} from '../common.js';
import { ifDefined } from 'lit/directives/if-defined.js'; import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js'; import { styleMap } from 'lit/directives/style-map.js';
import { MenuSubmenu, MenuSubmenuItem, MenuSubmenuSelect } from '../types.js';
import { actionHandler } from '../action-handler-directive.js'; import { actionHandler } from '../action-handler-directive.js';
import { domainIcon } from '../icons/domain-icon.js';
import submenuStyle from '../scss/submenu.scss'; 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') @customElement('frigate-card-submenu')
export class FrigateCardSubmenu extends LitElement { export class FrigateCardSubmenu extends LitElement {
src/components/surround-thumbnails.ts
+13 -13
View File
@@ -1,23 +1,23 @@
import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
import { HomeAssistant } from 'custom-card-helpers';
import { Task } from '@lit-labs/task'; 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 { customElement, property } from 'lit/decorators.js';
import surroundThumbnailsStyle from '../scss/surround.scss';
import { BrowseMediaUtil } from '../browse-media-util.js';
import { import {
BrowseMediaQueryParameters, BrowseMediaQueryParameters,
FrigateBrowseMediaSource, FrigateBrowseMediaSource,
FrigateCardView, FrigateCardView,
ThumbnailsControlConfig, ThumbnailsControlConfig
} from '../types.js'; } from '../types.js';
import { dispatchFrigateCardEvent } from '../utils/basic.js';
import { ThumbnailCarouselTap } from './thumbnail-carousel.js'; import {
getFirstTrueMediaChildIndex,
multipleBrowseMediaQueryMerged
} from '../utils/ha/browse-media';
import { View } from '../view.js'; import { View } from '../view.js';
import { dispatchErrorMessageEvent, dispatchFrigateCardEvent } from '../common.js'; import { dispatchErrorMessageEvent } from './message.js';
import './surround.js'; import './surround.js';
import { ThumbnailCarouselTap } from './thumbnail-carousel.js';
import surroundThumbnailsStyle from '../scss/surround.scss';
@customElement('frigate-card-surround-thumbnails') @customElement('frigate-card-surround-thumbnails')
export class FrigateCardSurround extends LitElement { export class FrigateCardSurround extends LitElement {
@@ -71,11 +71,11 @@ export class FrigateCardSurround extends LitElement {
} }
let parent: FrigateBrowseMediaSource | null; let parent: FrigateBrowseMediaSource | null;
try { try {
parent = await BrowseMediaUtil.multipleBrowseMediaQueryMerged(this.hass, browseMediaParams); parent = await multipleBrowseMediaQueryMerged(this.hass, browseMediaParams);
} catch (e) { } catch (e) {
return dispatchErrorMessageEvent(this, (e as Error).message); return dispatchErrorMessageEvent(this, (e as Error).message);
} }
if (BrowseMediaUtil.getFirstTrueMediaChildIndex(parent) !== null) { if (getFirstTrueMediaChildIndex(parent) !== null) {
this.view this.view
?.evolve({ ?.evolve({
...(this.targetView && { view: this.targetView }), ...(this.targetView && { view: this.targetView }),
src/components/thumbnail-carousel.ts
+10 -16
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 { 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 { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.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 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 { isTrueMedia } from '../utils/ha/browse-media';
import { View } from '../view.js';
import { FrigateCardCarousel } from './carousel.js';
import './thumbnail.js';
export interface ThumbnailCarouselTap { export interface ThumbnailCarouselTap {
slideIndex: number; slideIndex: number;
@@ -160,7 +154,7 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
if ( if (
!parent.children || !parent.children ||
!parent.children.length || !parent.children.length ||
!BrowseMediaUtil.isTrueMedia(parent.children[childIndex]) !isTrueMedia(parent.children[childIndex])
) { ) {
return; return;
} }
src/components/thumbnail.ts
+9 -13
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 { format, fromUnixTime } from 'date-fns';
import { CSSResult, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
import type { FrigateBrowseMediaSource, FrigateEvent } from '../types.js'; import { customElement, property } from 'lit/decorators.js';
import { View } from '../view.js';
import {
getEventDurationString,
prettifyFrigateName,
stopEventFromActivatingCardWideActions,
} from '../common.js';
import { localize } from '../localize/localize.js'; import { localize } from '../localize/localize.js';
import thumbnailStyle from '../scss/thumbnail.scss';
import thumbnailDetailsStyle from '../scss/thumbnail-details.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/ha/browse-media.js';
import { View } from '../view.js';
// The minimum width of a thumbnail with details enabled. // The minimum width of a thumbnail with details enabled.
export const THUMBNAIL_DETAILS_WIDTH_MIN = 300; export const THUMBNAIL_DETAILS_WIDTH_MIN = 300;
@@ -28,7 +24,7 @@ export class FrigateCardThumbnailDetails extends LitElement {
} }
const score = (this.event.top_score * 100).toFixed(2) + '%'; const score = (this.event.top_score * 100).toFixed(2) + '%';
return html`<div class="left"> return html`<div class="left">
<div class="larger">${prettifyFrigateName(this.event.label)}</div> <div class="larger">${prettifyTitle(this.event.label)}</div>
<div> <div>
<span class="heading">${localize('event.start')}:</span> <span class="heading">${localize('event.start')}:</span>
<span>${format(fromUnixTime(this.event.start_time), 'HH:mm:ss')}</span> <span>${format(fromUnixTime(this.event.start_time), 'HH:mm:ss')}</span>
src/components/timeline.ts
+31 -40
View File
@@ -1,11 +1,17 @@
import { HomeAssistant } from 'custom-card-helpers';
import { add, fromUnixTime, sub } from 'date-fns';
import { import {
CSSResultGroup, CSSResultGroup,
LitElement,
TemplateResult,
html, html,
unsafeCSS, LitElement,
PropertyValues, PropertyValues,
TemplateResult,
unsafeCSS
} from 'lit'; } 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 { DataSet } from 'vis-data/esnext';
import { import {
DataGroupCollectionType, DataGroupCollectionType,
@@ -14,38 +20,31 @@ import {
TimelineItem, TimelineItem,
TimelineOptions, TimelineOptions,
TimelineOptionsCluster, TimelineOptionsCluster,
TimelineWindow, TimelineWindow
} from 'vis-timeline/esnext'; } from 'vis-timeline/esnext';
import { HomeAssistant } from 'custom-card-helpers'; import { CAMERA_BIRDSEYE } from '../const';
import { classMap } from 'lit/directives/class-map.js'; import { localize } from '../localize/localize';
import { customElement, property } from 'lit/decorators.js'; import timelineCoreStyle from '../scss/timeline-core.scss';
import { createRef, ref, Ref } from 'lit/directives/ref.js'; import timelineStyle from '../scss/timeline.scss';
import { add, fromUnixTime, sub } from 'date-fns';
import { isEqual } from 'lodash-es';
import { BrowseMediaUtil } from '../browse-media-util';
import { import {
BrowseMediaQueryParameters, BrowseMediaQueryParameters,
CameraConfig, CameraConfig,
FrigateBrowseMediaSource, FrigateBrowseMediaSource,
TimelineConfig,
FrigateEvent,
frigateCardConfigDefaults, frigateCardConfigDefaults,
FrigateEvent,
TimelineConfig
} from '../types'; } from '../types';
import { CAMERA_BIRDSEYE } from '../const'; import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
import { View, ViewContext } from '../view'; import { dispatchFrigateCardEvent } from '../utils/basic.js';
import { getCameraTitle } from '../utils/camera.js';
import { import {
dispatchErrorMessageEvent, createEventParentForChildren,
dispatchFrigateCardEvent, getBrowseMediaQueryParameters,
dispatchMessageEvent, isTrueMedia,
getCameraTitle, multipleBrowseMediaQuery
stopEventFromActivatingCardWideActions, } from '../utils/ha/browse-media';
} from '../common.js'; import { View, ViewContext } from '../view';
import { localize } from '../localize/localize'; import { dispatchErrorMessageEvent, dispatchMessageEvent } from './message.js';
import timelineCoreStyle from '../scss/timeline-core.scss';
import timelineStyle from '../scss/timeline.scss';
import './surround-thumbnails.js'; import './surround-thumbnails.js';
const TIMELINE_EVENT_MANAGER_MAX_AGE_SECONDS = 10; const TIMELINE_EVENT_MANAGER_MAX_AGE_SECONDS = 10;
@@ -143,7 +142,7 @@ class TimelineEventManager {
const event = child.frigate?.event; const event = child.frigate?.event;
if ( if (
event && event &&
BrowseMediaUtil.isTrueMedia(child) && isTrueMedia(child) &&
['video', 'image'].includes(child.media_content_type) ['video', 'image'].includes(child.media_content_type)
) { ) {
let item = this._dataset.get(event.id); let item = this._dataset.get(event.id);
@@ -288,11 +287,7 @@ class TimelineEventManager {
this._dateStart && this._dateStart &&
cameraConfig.camera_name !== CAMERA_BIRDSEYE cameraConfig.camera_name !== CAMERA_BIRDSEYE
) { ) {
const param = BrowseMediaUtil.getBrowseMediaQueryParameters( const param = getBrowseMediaQueryParameters(hass, cameraID, cameraConfig, {
hass,
cameraID,
cameraConfig,
{
// Events are always fetched for the maximum extent of the managed // Events are always fetched for the maximum extent of the managed
// range. This is because events may change at any point in time // range. This is because events may change at any point in time
// (e.g. a long-running event that ends). // (e.g. a long-running event that ends).
@@ -300,8 +295,7 @@ class TimelineEventManager {
after: this._dateStart.getTime() / 1000, after: this._dateStart.getTime() / 1000,
unlimited: true, unlimited: true,
mediaType: mediaType as 'clips' | 'snapshots', mediaType: mediaType as 'clips' | 'snapshots',
}, });
);
if (param) { if (param) {
params.push(param); params.push(param);
} }
@@ -315,7 +309,7 @@ class TimelineEventManager {
let results: Map<BrowseMediaQueryParameters, FrigateBrowseMediaSource>; let results: Map<BrowseMediaQueryParameters, FrigateBrowseMediaSource>;
try { try {
results = await BrowseMediaUtil.multipleBrowseMediaQuery(hass, params); results = await multipleBrowseMediaQuery(hass, params);
} catch (e) { } catch (e) {
return dispatchErrorMessageEvent(element, (e as Error).message); return dispatchErrorMessageEvent(element, (e as Error).message);
} }
@@ -578,10 +572,7 @@ export class FrigateCardTimelineCore extends LitElement {
return null; return null;
} }
const target = BrowseMediaUtil.createEventParentForChildren( const target = createEventParentForChildren('Timeline events', children);
'Timeline events',
children,
);
return { return {
target: target, target: target,
childIndex: childIndex < 0 ? null : childIndex, childIndex: childIndex < 0 ? null : childIndex,
src/components/viewer.ts
+45 -42
View File
@@ -1,19 +1,21 @@
import { Task } from '@lit-labs/task';
import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
import { import {
CSSResultGroup, CSSResultGroup,
html,
LitElement, LitElement,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
html, unsafeCSS
unsafeCSS,
} from 'lit'; } 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 { customElement, property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js'; import { ifDefined } from 'lit/directives/if-defined.js';
import { ref } from 'lit/directives/ref.js'; import { ref } from 'lit/directives/ref.js';
import {
import { AutoMediaPlugin } from './embla-plugins/automedia.js'; dispatchErrorMessageEvent,
renderProgressIndicator
} from '../components/message.js';
import viewerStyle from '../scss/viewer.scss';
import type { import type {
BrowseMediaNeighbors, BrowseMediaNeighbors,
BrowseMediaQueryParameters, BrowseMediaQueryParameters,
@@ -22,26 +24,28 @@ import type {
FrigateBrowseMediaSource, FrigateBrowseMediaSource,
MediaShowInfo, MediaShowInfo,
TransitionEffect, TransitionEffect,
ViewerConfig, ViewerConfig
} from '../types.js'; } from '../types.js';
import { FrigateCardMediaCarousel, IMG_EMPTY } from './media-carousel.js'; import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
import { FrigateCardNextPreviousControl } from './next-prev-control.js'; import { contentsChanged } from '../utils/basic.js';
import { Lazyload, LazyloadType } from './embla-plugins/lazyload.js';
import { ResolvedMediaCache, ResolvedMediaUtil } from '../resolved-media.js';
import { View } from '../view.js';
import { import {
contentsChanged, fetchLatestMediaAndDispatchViewChange,
createMediaShowInfo, getEventStartTime,
dispatchErrorMessageEvent, getFullDependentBrowseMediaQueryParametersOrDispatchError,
stopEventFromActivatingCardWideActions, isTrueMedia,
} from '../common.js'; multipleBrowseMediaQueryMerged,
import { renderProgressIndicator } from '../components/message.js'; overrideMultiBrowseMediaQueryParameters
} from '../utils/ha/browse-media.js';
import { createMediaShowInfo } from '../utils/media-info.js';
import { ResolvedMediaCache, resolveMedia } from '../utils/resolved-media.js';
import { View } from '../view.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 './next-prev-control.js';
import { FrigateCardNextPreviousControl } from './next-prev-control.js';
import './title-control.js'; import './title-control.js';
import viewerStyle from '../scss/viewer.scss';
@customElement('frigate-card-viewer') @customElement('frigate-card-viewer')
export class FrigateCardViewer extends LitElement { export class FrigateCardViewer extends LitElement {
@property({ attribute: false }) @property({ attribute: false })
@@ -69,7 +73,7 @@ export class FrigateCardViewer extends LitElement {
} }
const browseMediaQueryParameters = const browseMediaQueryParameters =
BrowseMediaUtil.getFullDependentBrowseMediaQueryParametersOrDispatchError( getFullDependentBrowseMediaQueryParametersOrDispatchError(
this, this,
this.hass, this.hass,
this.cameras, this.cameras,
@@ -86,14 +90,13 @@ export class FrigateCardViewer extends LitElement {
return; return;
} }
BrowseMediaUtil.fetchLatestMediaAndDispatchViewChange( fetchLatestMediaAndDispatchViewChange(
this, this,
this.hass, this.hass,
this.view, this.view,
BrowseMediaUtil.overrideMultiBrowseMediaQueryParameters( overrideMultiBrowseMediaQueryParameters(browseMediaQueryParameters, {
browseMediaQueryParameters, mediaType: mediaType,
{ mediaType: mediaType }, }),
),
); );
return renderProgressIndicator(); return renderProgressIndicator();
} }
@@ -164,8 +167,8 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
i < (target.children || []).length; i < (target.children || []).length;
++i ++i
) { ) {
if (BrowseMediaUtil.isTrueMedia(target.children[i])) { if (isTrueMedia(target.children[i])) {
await ResolvedMediaUtil.resolveMedia( await resolveMedia(
this.hass, this.hass,
target.children[i], target.children[i],
this.resolvedMediaCache, this.resolvedMediaCache,
@@ -324,7 +327,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
let prevIndex: number | null = null; let prevIndex: number | null = null;
for (let i = this.view.childIndex - 1; i >= 0; i--) { for (let i = this.view.childIndex - 1; i >= 0; i--) {
const media = this.view.target.children[i]; const media = this.view.target.children[i];
if (media && BrowseMediaUtil.isTrueMedia(media)) { if (media && isTrueMedia(media)) {
prevIndex = i; prevIndex = i;
break; break;
} }
@@ -334,7 +337,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
let nextIndex: number | null = null; let nextIndex: number | null = null;
for (let i = this.view.childIndex + 1; i < this.view.target.children.length; i++) { for (let i = this.view.childIndex + 1; i < this.view.target.children.length; i++) {
const media = this.view.target.children[i]; const media = this.view.target.children[i];
if (media && BrowseMediaUtil.isTrueMedia(media)) { if (media && isTrueMedia(media)) {
nextIndex = i; nextIndex = i;
break; break;
} }
@@ -368,7 +371,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
return null; return null;
} }
const snapshotStartTime = BrowseMediaUtil.getEventStartTime(snapshot); const snapshotStartTime = getEventStartTime(snapshot);
if (!snapshotStartTime) { if (!snapshotStartTime) {
return null; return null;
} }
@@ -386,10 +389,10 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
let latest: number | null = null; let latest: number | null = null;
for (let i = 0; i < this.view.target.children.length; i++) { for (let i = 0; i < this.view.target.children.length; i++) {
const child = this.view.target.children[i]; const child = this.view.target.children[i];
if (!BrowseMediaUtil.isTrueMedia(child)) { if (!isTrueMedia(child)) {
continue; continue;
} }
const startTime = BrowseMediaUtil.getEventStartTime(child); const startTime = getEventStartTime(child);
if (startTime && (earliest === null || startTime < earliest)) { if (startTime && (earliest === null || startTime < earliest)) {
earliest = startTime; earliest = startTime;
@@ -404,7 +407,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
let clips: FrigateBrowseMediaSource | null; let clips: FrigateBrowseMediaSource | null;
const params = BrowseMediaUtil.overrideMultiBrowseMediaQueryParameters( const params = overrideMultiBrowseMediaQueryParameters(
this.browseMediaQueryParameters, this.browseMediaQueryParameters,
{ {
mediaType: 'clips', mediaType: 'clips',
@@ -414,7 +417,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
); );
try { try {
clips = await BrowseMediaUtil.multipleBrowseMediaQueryMerged(this.hass, params); clips = await multipleBrowseMediaQueryMerged(this.hass, params);
} catch (e) { } catch (e) {
// This is best effort. // This is best effort.
return null; return null;
@@ -426,10 +429,10 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
for (let i = 0; i < clips.children.length; i++) { for (let i = 0; i < clips.children.length; i++) {
const child = clips.children[i]; const child = clips.children[i];
if (!BrowseMediaUtil.isTrueMedia(child)) { if (!isTrueMedia(child)) {
continue; continue;
} }
const clipStartTime = BrowseMediaUtil.getEventStartTime(child); const clipStartTime = getEventStartTime(child);
if (clipStartTime && clipStartTime === snapshotStartTime) { if (clipStartTime && clipStartTime === snapshotStartTime) {
return this.view.evolve({ return this.view.evolve({
view: 'clip', view: 'clip',
@@ -490,12 +493,12 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
!this.view || !this.view ||
!this.view.target || !this.view.target ||
!this.view.target.children || !this.view.target.children ||
!BrowseMediaUtil.isTrueMedia(this.view.target.children[childIndex]) !isTrueMedia(this.view.target.children[childIndex])
) { ) {
return; return;
} }
ResolvedMediaUtil.resolveMedia( resolveMedia(
this.hass, this.hass,
this.view.target.children[childIndex], this.view.target.children[childIndex],
this.resolvedMediaCache, this.resolvedMediaCache,
@@ -667,7 +670,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
!this.hass || !this.hass ||
!this.view || !this.view ||
!this.viewerConfig || !this.viewerConfig ||
!BrowseMediaUtil.isTrueMedia(mediaToRender) || !isTrueMedia(mediaToRender) ||
!['video', 'image'].includes(mediaToRender.media_content_type) !['video', 'image'].includes(mediaToRender.media_content_type)
) { ) {
return; return;
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 { customElement, property, state } from 'lit/decorators.js';
import { HomeAssistant, LovelaceCardEditor, fireEvent } from 'custom-card-helpers';
import { localize } from './localize/localize.js';
import { import {
BUTTON_SIZE_MIN, copyConfig,
FRIGATE_MENU_PRIORITY_MAX, deleteConfigValue,
RawFrigateCardConfig, getArrayConfigPath,
RawFrigateCardConfigArray, getConfigValue,
THUMBNAIL_WIDTH_MAX, isConfigUpgradeable,
THUMBNAIL_WIDTH_MIN, setConfigValue,
frigateCardConfigDefaults, upgradeConfig,
} from './types.js'; } from './config-mgmt.js';
import { import {
CONF_CAMERAS, CONF_CAMERAS,
CONF_CAMERAS_ARRAY_CAMERA_ENTITY, CONF_CAMERAS_ARRAY_CAMERA_ENTITY,
@@ -89,23 +86,20 @@ import {
CONF_VIEW_UPDATE_FORCE, CONF_VIEW_UPDATE_FORCE,
CONF_VIEW_UPDATE_SECONDS, CONF_VIEW_UPDATE_SECONDS,
} from './const.js'; } from './const.js';
import { import { localize } from './localize/localize.js';
arrayMove,
getCameraID,
getCameraTitle,
sideLoadHomeAssistantElements,
} from './common.js';
import {
copyConfig,
deleteConfigValue,
getArrayConfigPath,
getConfigValue,
isConfigUpgradeable,
setConfigValue,
upgradeConfig,
} from './config-mgmt.js';
import frigate_card_editor_style from './scss/editor.scss'; 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_BUTTONS = 'buttons';
const MENU_CAMERAS = 'cameras'; const MENU_CAMERAS = 'cameras';
@@ -1006,12 +1000,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
})} })}
</div> </div>
<div class="submenu"> <div class="submenu">
${this._renderMenuButton('frigate')} ${this._renderMenuButton('frigate')} ${this._renderMenuButton('live')}
${this._renderMenuButton('live')} ${this._renderMenuButton('clips')} ${this._renderMenuButton('snapshots')}
${this._renderMenuButton('clips')} ${this._renderMenuButton('image')} ${this._renderMenuButton('download')}
${this._renderMenuButton('snapshots')}
${this._renderMenuButton('image')}
${this._renderMenuButton('download')}
${this._renderMenuButton('frigate_ui')} ${this._renderMenuButton('frigate_ui')}
${this._renderMenuButton('fullscreen')} ${this._renderMenuButton('fullscreen')}
${this._renderMenuButton('timeline')} ${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. // available as compilation time.
// ==================================================================== // ====================================================================
import { TemplateResult, css, html } from 'lit'; import { css, html, TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js'; import { customElement } from 'lit/decorators.js';
import { query } from 'lit/decorators/query.js'; import { query } from 'lit/decorators/query.js';
import { FrigateCardMediaPlayer } from '../types.js'; import { FrigateCardMediaPlayer } from '../types.js';
import { dispatchMediaShowEvent } from '../common.js'; import { dispatchMediaShowEvent } from '../utils/media-info.js';
customElements.whenDefined('ha-camera-stream').then(() => { customElements.whenDefined('ha-camera-stream').then(() => {
// ======================================================================================== // ========================================================================================
src/patches/ha-hls-player.ts
+3 -3
View File
@@ -9,11 +9,11 @@
// available as compilation time. // available as compilation time.
// ==================================================================== // ====================================================================
import { TemplateResult, css, html } from 'lit'; import { css, html, TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js'; import { customElement } from 'lit/decorators.js';
import { query } from 'lit/decorators/query.js'; import { query } from 'lit/decorators/query.js';
import { dispatchErrorMessageEvent } from '../components/message.js';
import { dispatchErrorMessageEvent, dispatchMediaShowEvent } from '../common.js'; import { dispatchMediaShowEvent } from '../utils/media-info.js';
customElements.whenDefined('ha-hls-player').then(() => { customElements.whenDefined('ha-hls-player').then(() => {
@customElement('frigate-card-ha-hls-player') @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. // available as compilation time.
// ==================================================================== // ====================================================================
import { TemplateResult, html } from 'lit'; import { html, TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js'; import { customElement } from 'lit/decorators.js';
import { query } from 'lit/decorators/query.js'; import { query } from 'lit/decorators/query.js';
import { dispatchErrorMessageEvent } from '../components/message.js';
import { dispatchErrorMessageEvent, dispatchMediaShowEvent } from '../common.js'; import { dispatchMediaShowEvent } from '../utils/media-info.js';
customElements.whenDefined('ha-web-rtc-player').then(() => { customElements.whenDefined('ha-web-rtc-player').then(() => {
@customElement('frigate-card-ha-web-rtc-player') @customElement('frigate-card-ha-web-rtc-player')
src/resolved-media.ts
-65
View File
@@ -1,65 +0,0 @@
import { HomeAssistant } from 'custom-card-helpers';
import { homeAssistantWSRequest } from './common.js';
import {
FrigateBrowseMediaSource,
ResolvedMedia,
resolvedMediaSchema,
} from './types.js';
import QuickLRU from 'quick-lru';
// 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;
export class ResolvedMediaCache {
protected _cache: QuickLRU<string, ResolvedMedia>;
constructor() {
this._cache = new QuickLRU({maxSize: RESOLVED_MEDIA_CACHE_SIZE});
}
public has(id: string): boolean {
return this._cache.has(id);
}
public get(id: string): ResolvedMedia | undefined {
return this._cache.get(id);
}
public set(id: string, resolvedMedia: ResolvedMedia): void {
this._cache.set(id, resolvedMedia);
}
}
export class ResolvedMediaUtil {
static async resolveMedia(
hass: HomeAssistant,
mediaSource?: FrigateBrowseMediaSource,
cache?: ResolvedMediaCache,
): Promise<ResolvedMedia | null> {
if (!mediaSource) {
return null;
}
const cachedValue = cache ? cache.get(mediaSource.media_content_id) : undefined;
if (cachedValue) {
return cachedValue;
}
const request = {
type: 'media_source/resolve_media',
media_content_id: mediaSource.media_content_id,
};
const resolvedMedia = await homeAssistantWSRequest(
hass,
resolvedMediaSchema,
request,
);
if (cache && resolvedMedia) {
cache.set(mediaSource.media_content_id, resolvedMedia);
}
return resolvedMedia;
}
}
src/types.ts
+4 -5
View File
@@ -1,4 +1,3 @@
import { StyleInfo } from 'lit/directives/style-map.js';
import { import {
CallServiceActionConfig, CallServiceActionConfig,
ConfirmationRestrictionConfig, ConfirmationRestrictionConfig,
@@ -12,11 +11,11 @@ import {
NoActionConfig, NoActionConfig,
Themes, Themes,
ToggleActionConfig, ToggleActionConfig,
UrlActionConfig, UrlActionConfig
} from 'custom-card-helpers'; } from 'custom-card-helpers';
import { StyleInfo } from 'lit/directives/style-map.js';
import { z } from 'zod'; import { z } from 'zod';
import { deepRemoveDefaults } from './utils/zod.js';
import { deepRemoveDefaults } from './zod-util';
// The min allowed size of buttons. // The min allowed size of buttons.
export const BUTTON_SIZE_MIN = 20; export const BUTTON_SIZE_MIN = 20;
@@ -1156,7 +1155,7 @@ export interface FrigateCardMediaPlayer {
export interface CardHelpers { export interface CardHelpers {
createCardElement(config: LovelaceCardConfig): Promise<{ createCardElement(config: LovelaceCardConfig): Promise<{
constructor: { 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/ha/browse-media.ts
+438
View File
@@ -0,0 +1,438 @@
import { HomeAssistant } from 'custom-card-helpers';
import {
differenceInHours,
differenceInMinutes,
differenceInSeconds,
fromUnixTime
} from 'date-fns';
import { homeAssistantWSRequest } from '.';
import {
dispatchErrorMessageEvent,
dispatchMessageEvent
} from '../../components/message.js';
import { localize } from '../../localize/localize.js';
import {
BrowseMediaQueryParameters,
CameraConfig,
FrigateBrowseMediaSource,
frigateBrowseMediaSourceSchema, FrigateEvent, MEDIA_CLASS_PLAYLIST,
MEDIA_TYPE_PLAYLIST
} from '../../types.js';
import { View } from '../../view.js';
import { getCameraTitle } from '../camera.js';
/**
* Return the Frigate event_id given a FrigateBrowseMediaSource object.
* @param media The event to get the id from.
* @returns The `event_id` or `null` if not successfully parsed.
*/
export const getEventID = (media: FrigateBrowseMediaSource): string | null => {
return media.frigate?.event.id ?? null;
};
/**
* Return the event start time given a FrigateBrowseMediaSource object.
* @param browseMedia The media object to get the start time from.
* @returns The start time in unix/epoch time, or null if it cannot be determined.
*/
export const getEventStartTime = (media: FrigateBrowseMediaSource): number | null => {
return media.frigate?.event.start_time ?? null;
};
/**
* Determine if a FrigateBrowseMediaSource object is truly a media item (vs a folder).
* @param media The media object.
* @returns `true` if it's truly a media item, `false` otherwise.
*/
export const isTrueMedia = (media?: FrigateBrowseMediaSource): boolean => {
return !!media && !media.can_expand;
};
/**
* From a FrigateBrowseMediaSource item extract the first true media item from the
* children (i.e. a clip/snapshot, not a folder).
* @param media The media object with children.
* @returns The first true media item found.
*/
export const getFirstTrueMediaChildIndex = (
media: FrigateBrowseMediaSource | null,
): number | null => {
if (!media || !media.children) {
return null;
}
const index = media.children.findIndex((child) => isTrueMedia(child));
return index >= 0 ? index : null;
};
/**
* Browse Frigate media with a media content id. May throw.
* @param hass The HomeAssistant object.
* @param media_content_id The media content id to browse.
* @returns A FrigateBrowseMediaSource object or null on malformed.
*/
export const browseMedia = async (
hass: HomeAssistant,
media_content_id: string,
): Promise<FrigateBrowseMediaSource> => {
const request = {
type: 'media_source/browse_media',
media_content_id: media_content_id,
};
return await homeAssistantWSRequest(hass, frigateBrowseMediaSourceSchema, request);
};
/**
* Browse Frigate media with a media query. May throw.
* @param hass The HomeAssistant object.
* @param params The search parameters to use to search for media.
* @returns A FrigateBrowseMediaSource object or null on malformed.
*/
export const browseMediaQuery = async (
hass: HomeAssistant,
params: BrowseMediaQueryParameters,
): Promise<FrigateBrowseMediaSource> => {
return browseMedia(
hass,
// Defined in:
// https://github.com/blakeblackshear/frigate-hass-integration/blob/master/custom_components/frigate/media_source.py
[
'media-source://frigate',
params.clientId,
'event-search',
params.mediaType,
// If the name field ends in '.all' the integration will return up to 10K events.
params.unlimited ? '.all' : '',
params.after ? String(Math.floor(params.after)) : '',
params.before ? String(Math.ceil(params.before)) : '',
params.cameraName,
params.label,
params.zone,
].join('/'),
);
};
/**
* Browse multiple Frigate media queries. May throw.
* @param hass The HomeAssistant object.
* @param params An array of search parameters to use to search for media.
* @returns A map of FrigateBrowseMediaSource object or null on malformed.
*/
export const multipleBrowseMediaQuery = async (
hass: HomeAssistant,
params: BrowseMediaQueryParameters | BrowseMediaQueryParameters[],
): Promise<Map<BrowseMediaQueryParameters, FrigateBrowseMediaSource>> => {
params = Array.isArray(params) ? params : [params];
const output: Map<BrowseMediaQueryParameters, FrigateBrowseMediaSource> = new Map();
await Promise.all(
params.map(async (param: BrowseMediaQueryParameters): Promise<void> => {
output.set(param, await browseMediaQuery(hass, param));
}),
);
return output;
};
/**
* Browse multiple Frigate media queries, then merged them. May throw.
* @param hass The HomeAssistant object.
* @param params An array of search parameters to use to search for media.
* @returns A single FrigateBrowseMediaSource object or null on malformed.
*/
export const multipleBrowseMediaQueryMerged = async (
hass: HomeAssistant,
params: BrowseMediaQueryParameters | BrowseMediaQueryParameters[],
): Promise<FrigateBrowseMediaSource> => {
return mergeFrigateBrowseMediaSources(await multipleBrowseMediaQuery(hass, params));
};
/**
* Merge multiple FrigateBrowseMediaSource into a single. Note that this may
* use information from the query to differentiate results that may otherwise
* be identical.
* @param input A map of query -> result.
* @returns A single FrigateBrowseMediaSource object.
*/
export const mergeFrigateBrowseMediaSources = async (
input: Map<BrowseMediaQueryParameters, FrigateBrowseMediaSource>,
): Promise<FrigateBrowseMediaSource> => {
const children: FrigateBrowseMediaSource[] = [];
for (const [query, result] of input.entries()) {
for (const child of result.children || []) {
if (isTrueMedia(child)) {
children.push(child);
} else {
// If there are multiple inputs, separate the folder names with the
// query title (if available).
if (query.title && input.size > 1) {
children.push({ ...child, title: `[${query.title}] ${child.title}` });
} else {
children.push(child);
}
}
}
}
const eventSort = (
a: FrigateBrowseMediaSource,
b: FrigateBrowseMediaSource,
): number => {
if (
!a.frigate?.event ||
(b.frigate?.event && b.frigate.event.start_time > a.frigate.event.start_time)
) {
return 1;
}
if (
!b.frigate?.event ||
(a.frigate?.event && b.frigate.event.start_time < a.frigate.event.start_time)
) {
return -1;
}
return 0;
};
return createEventParentForChildren('Merged events', children.sort(eventSort));
};
/**
* Get the parameters to search for media.
* @returns A BrowseMediaQueryParameters object.
*/
export const getBrowseMediaQueryParameters = (
hass: HomeAssistant,
cameraID: string,
cameraConfig?: CameraConfig,
overrides?: Partial<BrowseMediaQueryParameters>,
): BrowseMediaQueryParameters | null => {
if (!cameraConfig || !cameraConfig.camera_name) {
return null;
}
return {
clientId: cameraConfig.client_id,
cameraName: cameraConfig.camera_name,
label: cameraConfig.label,
zone: cameraConfig.zone,
title: getCameraTitle(hass, cameraConfig),
cameraID: cameraID,
...overrides,
};
};
/**
* Apply overrides to multiple query parameters.
* @param parameters An array of query parameters.
* @param overrides The overrides to apply.
* @returns The override query parameters.
*/
export const overrideMultiBrowseMediaQueryParameters = (
parameters: BrowseMediaQueryParameters[],
overrides: Partial<BrowseMediaQueryParameters>,
): BrowseMediaQueryParameters[] => {
const output: BrowseMediaQueryParameters[] = [];
parameters.forEach((param) => {
output.push({ ...param, ...overrides });
});
return output;
};
/**
* Get BrowseMediaQueryParameters for a camera (including its dependencies).
* @param hass Home Assistant object.
* @param cameras Cameras map.
* @param camera Name of the current camera.
* @param mediaType Optional media type to include in the parameters.
* @returns An array of query parameters.
*/
export const getFullDependentBrowseMediaQueryParameters = (
hass: HomeAssistant,
cameras: Map<string, CameraConfig>,
camera: string,
mediaType?: 'clips' | 'snapshots',
): BrowseMediaQueryParameters[] | null => {
const cameraIDs: Set<string> = new Set();
const getDependentCameras = (camera: string): void => {
const cameraConfig = cameras.get(camera);
if (cameraConfig) {
cameraIDs.add(camera);
for (const eventCameraID of cameraConfig.dependent_cameras || []) {
if (!cameraIDs.has(eventCameraID)) {
getDependentCameras(eventCameraID);
}
}
}
};
getDependentCameras(camera);
const params: BrowseMediaQueryParameters[] = [];
for (const cameraID of cameraIDs) {
const param = getBrowseMediaQueryParameters(
hass,
cameraID,
cameras.get(cameraID),
mediaType ? { mediaType: mediaType } : {},
);
// Fail on a single bad camera, as it's almost certainly a user error that
// should be fixed rather than hidden.
if (!param) {
return null;
}
params.push(param);
}
return params.length ? params : null;
};
/**
* Get BrowseMediaQueryParameters for a camera (including its dependencies) or dispatch an error.
* @param element The element from which to dispatch the error.
* @param hass Home Assistant object.
* @param cameras Cameras map.
* @param camera Name of the current camera.
* @param mediaType Optional media type to include in the parameters.
* @returns An array of query parameters.
*/
export const getFullDependentBrowseMediaQueryParametersOrDispatchError = (
element: HTMLElement,
hass: HomeAssistant,
cameras: Map<string, CameraConfig>,
camera: string,
mediaType?: 'clips' | 'snapshots',
): BrowseMediaQueryParameters[] | null => {
const params = getFullDependentBrowseMediaQueryParameters(
hass,
cameras,
camera,
mediaType,
);
if (!params) {
dispatchErrorMessageEvent(
element,
localize('error.no_camera_name'),
cameras.get(camera),
);
return null;
}
return params;
};
/**
* Fetch the latest media and dispatch a change view event to reflect the
* results. If no media is found a suitable message event will be triggered
* instead.
* @param element The HTMLElement to dispatch events from.
* @param hass The Home Assistant object.
* @param view The current view to evolve.
* @param browseMediaQueryParameters The media parameters to query with.
* @returns
*/
export const fetchLatestMediaAndDispatchViewChange = async (
element: HTMLElement,
hass: HomeAssistant,
view: Readonly<View>,
browseMediaQueryParameters: BrowseMediaQueryParameters | BrowseMediaQueryParameters[],
): Promise<void> => {
let parent: FrigateBrowseMediaSource | null;
try {
parent = await multipleBrowseMediaQueryMerged(hass, browseMediaQueryParameters);
} catch (e) {
return dispatchErrorMessageEvent(element, (e as Error).message);
}
const childIndex = getFirstTrueMediaChildIndex(parent);
if (!parent || !parent.children || childIndex == null) {
return dispatchMessageEvent(
element,
view.isClipRelatedView()
? localize('common.no_clip')
: localize('common.no_snapshot'),
view.isClipRelatedView() ? 'mdi:filmstrip-off' : 'mdi:camera-off',
);
}
view
.evolve({
target: parent,
childIndex: childIndex,
})
.dispatchChangeEvent(element);
};
/**
* Fetch the media of a child FrigateBrowseMediaSource object and dispatch a change
* view event to reflect the results.
* @param node The HTMLElement to dispatch events from.
* @param hass The Home Assistant object.
* @param view The current view to evolve.
* @param child The FrigateBrowseMediaSource child to query for.
* @returns
*/
export const fetchChildMediaAndDispatchViewChange = async (
element: HTMLElement,
hass: HomeAssistant,
view: Readonly<View>,
child: Readonly<FrigateBrowseMediaSource>,
): Promise<void> => {
let parent: FrigateBrowseMediaSource;
try {
parent = await browseMedia(hass, child.media_content_id);
} catch (e) {
return dispatchErrorMessageEvent(element, (e as Error).message);
}
view
.evolve({
target: parent,
})
.dispatchChangeEvent(element);
};
/**
* Given an array of media children, create a parent for them.
* @param title The title to use for the parent.
* @param children The children media items.
* @returns A single parent containing the children.
*/
export const createEventParentForChildren = (
title: string,
children: FrigateBrowseMediaSource[],
): FrigateBrowseMediaSource => {
return {
title: title,
media_class: MEDIA_CLASS_PLAYLIST,
media_content_type: MEDIA_TYPE_PLAYLIST,
media_content_id: '',
can_play: false,
can_expand: true,
children_media_class: MEDIA_CLASS_PLAYLIST,
thumbnail: null,
children: children,
};
};
/**
* 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/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/utils/resolved-media.ts
+58
View File
@@ -0,0 +1,58 @@
import { HomeAssistant } from 'custom-card-helpers';
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;
export class ResolvedMediaCache {
protected _cache: QuickLRU<string, ResolvedMedia>;
constructor() {
this._cache = new QuickLRU({ maxSize: RESOLVED_MEDIA_CACHE_SIZE });
}
public has(id: string): boolean {
return this._cache.has(id);
}
public get(id: string): ResolvedMedia | undefined {
return this._cache.get(id);
}
public set(id: string, resolvedMedia: ResolvedMedia): void {
this._cache.set(id, resolvedMedia);
}
}
export const resolveMedia = async (
hass: HomeAssistant,
mediaSource?: FrigateBrowseMediaSource,
cache?: ResolvedMediaCache,
): Promise<ResolvedMedia | null> => {
if (!mediaSource) {
return null;
}
const cachedValue = cache ? cache.get(mediaSource.media_content_id) : undefined;
if (cachedValue) {
return cachedValue;
}
const request = {
type: 'media_source/resolve_media',
media_content_id: mediaSource.media_content_id,
};
const resolvedMedia = await homeAssistantWSRequest(hass, resolvedMediaSchema, request);
if (cache && resolvedMedia) {
cache.set(mediaSource.media_content_id, resolvedMedia);
}
return resolvedMedia;
};
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; 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 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 // eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface ViewContext {} export interface ViewContext {}