583 lines
16 KiB
TypeScript
583 lines
16 KiB
TypeScript
import {
|
|
CallServiceActionConfig,
|
|
LovelaceCard,
|
|
LovelaceCardEditor,
|
|
MoreInfoActionConfig,
|
|
NavigateActionConfig,
|
|
ToggleActionConfig,
|
|
UrlActionConfig,
|
|
} from 'custom-card-helpers';
|
|
import { z } from 'zod';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'frigate-card-editor': LovelaceCardEditor;
|
|
'hui-error-card': LovelaceCard;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Internal types.
|
|
*/
|
|
|
|
const FRIGATE_CARD_VIEWS_USER_SPECIFIED = [
|
|
'live', // Live view.
|
|
'clip', // Most recent clip.
|
|
'clips', // Clips gallery.
|
|
'snapshot', // Most recent snapshot.
|
|
'snapshots', // Snapshots gallery.
|
|
'image', // Static image.
|
|
] as const;
|
|
|
|
const FRIGATE_CARD_VIEWS_INTERNAL = [
|
|
'clip-specific', // A specific clip.
|
|
'snapshot-specific', // A specific snapshot.
|
|
] as const;
|
|
|
|
export type FrigateCardView =
|
|
| typeof FRIGATE_CARD_VIEWS_USER_SPECIFIED[number]
|
|
| typeof FRIGATE_CARD_VIEWS_INTERNAL[number];
|
|
|
|
const FRIGATE_MENU_MODES = [
|
|
'none',
|
|
'hidden-top',
|
|
'hidden-left',
|
|
'hidden-bottom',
|
|
'hidden-right',
|
|
'overlay-top',
|
|
'overlay-left',
|
|
'overlay-bottom',
|
|
'overlay-right',
|
|
'hover-top',
|
|
'hover-left',
|
|
'hover-bottom',
|
|
'hover-right',
|
|
'above',
|
|
'below',
|
|
] as const;
|
|
export const NEXT_PREVIOUS_CONTROL_STYLES = ['none', 'thumbnails', 'chevrons'] as const;
|
|
export const LIVE_PROVIDERS = ['frigate', 'frigate-jsmpeg', 'webrtc'] as const;
|
|
|
|
/**
|
|
* Action Types (for "Picture Elements" / Menu)
|
|
*/
|
|
|
|
// Declare schemas to existing types:
|
|
// - https://github.com/colinhacks/zod/issues/372#issuecomment-826380330
|
|
const schemaForType =
|
|
<T>() =>
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
<S extends z.ZodType<T, any, any>>(arg: S) => {
|
|
return arg;
|
|
};
|
|
const toggleActionSchema = schemaForType<ToggleActionConfig>()(
|
|
z.object({
|
|
action: z.literal('toggle'),
|
|
}),
|
|
);
|
|
const callServiceActionSchema = schemaForType<CallServiceActionConfig>()(
|
|
z.object({
|
|
action: z.literal('call-service'),
|
|
service: z.string(),
|
|
service_data: z.object({}).passthrough().optional(),
|
|
}),
|
|
);
|
|
const navigateActionSchema = schemaForType<NavigateActionConfig>()(
|
|
z.object({
|
|
action: z.literal('navigate'),
|
|
navigation_path: z.string(),
|
|
}),
|
|
);
|
|
const urlActionSchema = schemaForType<UrlActionConfig>()(
|
|
z.object({
|
|
action: z.literal('url'),
|
|
url_path: z.string(),
|
|
}),
|
|
);
|
|
const moreInfoActionSchema = schemaForType<MoreInfoActionConfig>()(
|
|
z.object({
|
|
action: z.literal('more-info'),
|
|
}),
|
|
);
|
|
const elementsActionSchema = z.union([
|
|
toggleActionSchema,
|
|
callServiceActionSchema,
|
|
navigateActionSchema,
|
|
urlActionSchema,
|
|
moreInfoActionSchema,
|
|
]);
|
|
export type ElementsActionType = z.infer<typeof elementsActionSchema>;
|
|
|
|
const elementsBaseSchema = z.object({
|
|
style: z.object({}).passthrough().optional(),
|
|
title: z.string().nullable().optional(),
|
|
tap_action: elementsActionSchema.optional(),
|
|
hold_action: elementsActionSchema.optional(),
|
|
double_tap_action: elementsActionSchema.optional(),
|
|
});
|
|
|
|
/**
|
|
* Picture Element Configuration.
|
|
*
|
|
* All picture element types are validated (not just the Frigate card custom
|
|
* ones) as a convenience to present the user with a consistent error display
|
|
* up-front regardless of where they made their error.
|
|
*/
|
|
|
|
// https://www.home-assistant.io/lovelace/picture-elements/#state-badge
|
|
const stateBadgeIconSchema = elementsBaseSchema.merge(
|
|
z.object({
|
|
type: z.literal('state-badge'),
|
|
entity: z.string(),
|
|
}),
|
|
);
|
|
|
|
// https://www.home-assistant.io/lovelace/picture-elements/#state-icon
|
|
const stateIconSchema = elementsBaseSchema.merge(
|
|
z.object({
|
|
type: z.literal('state-icon'),
|
|
entity: z.string(),
|
|
icon: z.string().optional(),
|
|
state_color: z.boolean().default(true),
|
|
}),
|
|
);
|
|
|
|
// https://www.home-assistant.io/lovelace/picture-elements/#state-label
|
|
const stateLabelSchema = elementsBaseSchema.merge(
|
|
z.object({
|
|
type: z.literal('state-label'),
|
|
entity: z.string(),
|
|
attribute: z.string().optional(),
|
|
prefix: z.string().optional(),
|
|
suffix: z.string().optional(),
|
|
}),
|
|
);
|
|
|
|
// https://www.home-assistant.io/lovelace/picture-elements/#service-call-button
|
|
const serviceCallButtonSchema = elementsBaseSchema.merge(
|
|
z.object({
|
|
type: z.literal('service-button'),
|
|
// Title is required for service button.
|
|
title: z.string(),
|
|
service: z.string(),
|
|
service_data: z.object({}).passthrough().optional(),
|
|
}),
|
|
);
|
|
|
|
// https://www.home-assistant.io/lovelace/picture-elements/#icon
|
|
const iconSchema = elementsBaseSchema.merge(
|
|
z.object({
|
|
type: z.literal('icon'),
|
|
icon: z.string(),
|
|
entity: z.string().optional(),
|
|
}),
|
|
);
|
|
|
|
// https://www.home-assistant.io/lovelace/picture-elements/#image-element
|
|
const imageSchema = elementsBaseSchema.merge(
|
|
z.object({
|
|
type: z.literal('image'),
|
|
entity: z.string().optional(),
|
|
image: z.string().optional(),
|
|
camera_image: z.string().optional(),
|
|
camera_view: z.string().optional(),
|
|
state_image: z.object({}).passthrough().optional(),
|
|
filter: z.string().optional(),
|
|
state_filter: z.object({}).passthrough().optional(),
|
|
aspect_ratio: z.string().optional(),
|
|
}),
|
|
);
|
|
|
|
// https://www.home-assistant.io/lovelace/picture-elements/#image-element
|
|
const conditionalSchema = z.object({
|
|
type: z.literal('conditional'),
|
|
conditions: z
|
|
.object({
|
|
entity: z.string(),
|
|
state: z.string().optional(),
|
|
state_not: z.string().optional(),
|
|
})
|
|
.array(),
|
|
elements: z.lazy(() => pictureElementsSchema),
|
|
});
|
|
|
|
// https://www.home-assistant.io/lovelace/picture-elements/#custom-elements
|
|
const customSchema = z
|
|
.object({
|
|
// Insist that Frigate card custom elements are handled by other schemas.
|
|
type: z.string().superRefine((val, ctx) => {
|
|
if (!val.match(/^custom:(?!frigate-card).+/)) {
|
|
ctx.addIssue({
|
|
code: z.ZodIssueCode.custom,
|
|
message: 'Frigate-card custom elements must match specific schemas',
|
|
fatal: true,
|
|
});
|
|
}
|
|
}),
|
|
})
|
|
.passthrough();
|
|
|
|
/**
|
|
* Custom Element Types.
|
|
*/
|
|
|
|
export const menuIconSchema = iconSchema.merge(
|
|
z.object({
|
|
type: z.literal('custom:frigate-card-menu-icon'),
|
|
}),
|
|
);
|
|
export type MenuIcon = z.infer<typeof menuIconSchema>;
|
|
|
|
export const menuStateIconSchema = stateIconSchema.merge(
|
|
z.object({
|
|
type: z.literal('custom:frigate-card-menu-state-icon'),
|
|
}),
|
|
);
|
|
export type MenuStateIcon = z.infer<typeof menuStateIconSchema>;
|
|
|
|
const frigateConditionalSchema = z.object({
|
|
type: z.literal('custom:frigate-card-conditional'),
|
|
conditions: z.object({
|
|
view: z.string().array().optional(),
|
|
}),
|
|
elements: z.lazy(() => pictureElementsSchema),
|
|
});
|
|
export type FrigateConditional = z.infer<typeof frigateConditionalSchema>;
|
|
|
|
// 'internalMenuIconSchema' is excluded to disallow the user from manually
|
|
// changing the internal menu buttons.
|
|
const pictureElementSchema = z.union([
|
|
menuStateIconSchema,
|
|
menuIconSchema,
|
|
frigateConditionalSchema,
|
|
stateBadgeIconSchema,
|
|
stateIconSchema,
|
|
stateLabelSchema,
|
|
serviceCallButtonSchema,
|
|
iconSchema,
|
|
imageSchema,
|
|
conditionalSchema,
|
|
customSchema,
|
|
]);
|
|
export type PictureElement = z.infer<typeof pictureElementSchema>;
|
|
|
|
const pictureElementsSchema = pictureElementSchema.array().optional();
|
|
export type PictureElements = z.infer<typeof pictureElementsSchema>;
|
|
|
|
/**
|
|
* Frigate configuration section.
|
|
*/
|
|
const frigateConfigDefault = {
|
|
client_id: 'frigate' as const,
|
|
};
|
|
const frigateConfigDefaultSchema = z
|
|
.object({
|
|
// No URL validation to allow relative URLs within HA (e.g. addons).
|
|
url: z.string().optional(),
|
|
client_id: z.string().optional().default(frigateConfigDefault.client_id),
|
|
camera_name: z.string().optional(),
|
|
label: z.string().optional(),
|
|
zone: z.string().optional(),
|
|
})
|
|
.default(frigateConfigDefault);
|
|
|
|
/**
|
|
* View configuration section.
|
|
*/
|
|
const viewConfigDefault = {
|
|
default: 'live' as const,
|
|
timeout: 180,
|
|
};
|
|
const viewConfigSchema = z
|
|
.object({
|
|
default: z
|
|
.enum(FRIGATE_CARD_VIEWS_USER_SPECIFIED)
|
|
.optional()
|
|
.default(viewConfigDefault.default),
|
|
timeout: z
|
|
.number()
|
|
.or(
|
|
z
|
|
.string()
|
|
.regex(/^\d+$/)
|
|
.transform((val) => Number(val)),
|
|
)
|
|
.optional()
|
|
.default(viewConfigDefault.timeout),
|
|
})
|
|
.default(viewConfigDefault);
|
|
|
|
/**
|
|
* Image view configuration section.
|
|
*/
|
|
const imageConfigSchema = z
|
|
.object({
|
|
src: z.string().optional(),
|
|
})
|
|
.optional();
|
|
export type ImageViewConfig = z.infer<typeof imageConfigSchema>;
|
|
|
|
/**
|
|
* Live view configuration section.
|
|
*/
|
|
const liveConfigDefault = {
|
|
provider: 'frigate' as const,
|
|
preload: false,
|
|
};
|
|
const webrtcConfigSchema = z
|
|
.object({
|
|
entity: z.string().optional(),
|
|
url: z.string().optional(),
|
|
})
|
|
.passthrough()
|
|
.optional();
|
|
export type WebRTCConfig = z.infer<typeof webrtcConfigSchema>;
|
|
|
|
const liveConfigSchema = z
|
|
.object({
|
|
provider: z.enum(LIVE_PROVIDERS).default(liveConfigDefault.provider),
|
|
preload: z.boolean().default(liveConfigDefault.preload),
|
|
webrtc: webrtcConfigSchema,
|
|
})
|
|
.default(liveConfigDefault);
|
|
|
|
/**
|
|
* Menu configuration section.
|
|
*/
|
|
const menuConfigDefault = {
|
|
mode: 'hidden-top' as const,
|
|
buttons: {
|
|
frigate: true,
|
|
live: true,
|
|
clips: true,
|
|
snapshots: true,
|
|
image: false,
|
|
download: true,
|
|
frigate_ui: true,
|
|
fullscreen: true,
|
|
},
|
|
button_size: '40px',
|
|
};
|
|
const menuConfigSchema = z
|
|
.object({
|
|
mode: z.enum(FRIGATE_MENU_MODES).optional().default(menuConfigDefault.mode),
|
|
buttons: z
|
|
.object({
|
|
frigate: z.boolean().default(menuConfigDefault.buttons.frigate),
|
|
live: z.boolean().default(menuConfigDefault.buttons.live),
|
|
clips: z.boolean().default(menuConfigDefault.buttons.clips),
|
|
snapshots: z.boolean().default(menuConfigDefault.buttons.snapshots),
|
|
image: z.boolean().default(menuConfigDefault.buttons.image),
|
|
download: z.boolean().default(menuConfigDefault.buttons.download),
|
|
frigate_ui: z.boolean().default(menuConfigDefault.buttons.frigate_ui),
|
|
fullscreen: z.boolean().default(menuConfigDefault.buttons.fullscreen),
|
|
})
|
|
.default(menuConfigDefault.buttons),
|
|
button_size: z.string().default(menuConfigDefault.button_size),
|
|
})
|
|
.default(menuConfigDefault);
|
|
export type MenuConfig = z.infer<typeof menuConfigSchema>;
|
|
|
|
/**
|
|
* Event viewer configuration section (clip, snapshot, clip-specific, snapshot-specific).
|
|
*/
|
|
const viewerConfigDefault = {
|
|
autoplay_clip: false,
|
|
lazy_load: true,
|
|
controls: {
|
|
next_previous: {
|
|
size: '48px',
|
|
style: 'thumbnails' as const,
|
|
},
|
|
},
|
|
};
|
|
const nextPreviousControlConfigSchema = z
|
|
.object({
|
|
style: z
|
|
.enum(NEXT_PREVIOUS_CONTROL_STYLES)
|
|
.default(viewerConfigDefault.controls.next_previous.style),
|
|
size: z.string().default(viewerConfigDefault.controls.next_previous.size),
|
|
})
|
|
.default(viewerConfigDefault.controls.next_previous);
|
|
export type NextPreviousControlConfig = z.infer<typeof nextPreviousControlConfigSchema>;
|
|
|
|
const viewerConfigSchema = z
|
|
.object({
|
|
autoplay_clip: z.boolean().default(viewerConfigDefault.autoplay_clip),
|
|
lazy_load: z.boolean().default(viewerConfigDefault.lazy_load),
|
|
controls: z
|
|
.object({
|
|
next_previous: nextPreviousControlConfigSchema,
|
|
})
|
|
.default(viewerConfigDefault.controls),
|
|
})
|
|
.default(viewerConfigDefault);
|
|
export type ViewerConfig = z.infer<typeof viewerConfigSchema>;
|
|
|
|
/**
|
|
* Dimensions configuration section.
|
|
*/
|
|
const dimensionsConfigDefault = {
|
|
aspect_ratio_mode: 'dynamic' as const,
|
|
aspect_ratio: [16, 9],
|
|
};
|
|
const dimensionsConfigSchema = z
|
|
.object({
|
|
aspect_ratio_mode: z
|
|
.enum(['dynamic', 'static', 'unconstrained'])
|
|
.default(dimensionsConfigDefault.aspect_ratio_mode),
|
|
aspect_ratio: z
|
|
.number()
|
|
.array()
|
|
.length(2)
|
|
.or(
|
|
z
|
|
.string()
|
|
.regex(/^\s*\d+\s*[:\/]\s*\d+\s*$/)
|
|
.transform((input) => input.split(/[:\/]/).map((d) => Number(d))),
|
|
)
|
|
.default(dimensionsConfigDefault.aspect_ratio),
|
|
})
|
|
.default(dimensionsConfigDefault);
|
|
|
|
/**
|
|
* Main card config.
|
|
*/
|
|
export const frigateCardConfigSchema = z.object({
|
|
camera_entity: z.string().optional(),
|
|
|
|
// Main configuration sections.
|
|
frigate: frigateConfigDefaultSchema,
|
|
view: viewConfigSchema,
|
|
menu: menuConfigSchema,
|
|
live: liveConfigSchema,
|
|
event_viewer: viewerConfigSchema,
|
|
image: imageConfigSchema,
|
|
elements: pictureElementsSchema,
|
|
dimensions: dimensionsConfigSchema,
|
|
|
|
// Entities that should trigger a card update.
|
|
update_entities: z.string().array().optional(),
|
|
|
|
// Stock lovelace card config.
|
|
type: z.string(),
|
|
test_gui: z.boolean().optional(),
|
|
});
|
|
export type FrigateCardConfig = z.infer<typeof frigateCardConfigSchema>;
|
|
export type RawFrigateCardConfig = Record<string, unknown>;
|
|
|
|
export const frigateCardConfigDefaults = {
|
|
frigate: frigateConfigDefault,
|
|
view: viewConfigDefault,
|
|
menu: menuConfigDefault,
|
|
live: liveConfigDefault,
|
|
event_viewer: viewerConfigDefault,
|
|
};
|
|
|
|
// Schema for card (non-user configured) menu icons.
|
|
const internalMenuIconSchema = z.object({
|
|
type: z.literal('internal-menu-icon'),
|
|
title: z.string(),
|
|
icon: z.string().optional(),
|
|
emphasize: z.boolean().default(false).optional(),
|
|
tap_action: z.string(),
|
|
hold_action: z.string().optional(),
|
|
});
|
|
|
|
const menuButtonSchema = z.union([
|
|
menuIconSchema,
|
|
menuStateIconSchema,
|
|
internalMenuIconSchema,
|
|
]);
|
|
export type MenuButton = z.infer<typeof menuButtonSchema>;
|
|
export interface ExtendedHomeAssistant {
|
|
hassUrl(path?): string;
|
|
}
|
|
|
|
export interface BrowseMediaQueryParameters {
|
|
mediaType: 'clips' | 'snapshots';
|
|
clientId: string;
|
|
cameraName: string;
|
|
label?: string;
|
|
zone?: string;
|
|
before?: number;
|
|
after?: number;
|
|
}
|
|
|
|
export interface BrowseMediaNeighbors {
|
|
previous: BrowseMediaSource | null;
|
|
previousIndex: number | null;
|
|
|
|
next: BrowseMediaSource | null;
|
|
nextIndex: number | null;
|
|
}
|
|
|
|
export interface MediaShowInfo {
|
|
width: number;
|
|
height: number;
|
|
}
|
|
|
|
export interface Message {
|
|
message: string;
|
|
type: 'error' | 'info';
|
|
icon?: string;
|
|
}
|
|
|
|
export interface MenuInteraction {
|
|
interaction: 'hold' | 'tap' | 'double_tap';
|
|
button: MenuButton;
|
|
}
|
|
|
|
/**
|
|
* Home Assistant API types.
|
|
*/
|
|
|
|
// Recursive type, cannot use type interference:
|
|
// See: https://github.com/colinhacks/zod#recursive-types
|
|
//
|
|
// Server side data-type defined here: https://github.com/home-assistant/core/blob/dev/homeassistant/components/media_player/__init__.py
|
|
export interface BrowseMediaSource {
|
|
title: string;
|
|
media_class: string;
|
|
media_content_type: string;
|
|
media_content_id: string;
|
|
can_play: boolean;
|
|
can_expand: boolean;
|
|
children_media_class: string | null;
|
|
thumbnail: string | null;
|
|
children?: BrowseMediaSource[] | null;
|
|
}
|
|
|
|
export const browseMediaSourceSchema: z.ZodSchema<BrowseMediaSource> = z.lazy(() =>
|
|
z.object({
|
|
title: z.string(),
|
|
media_class: z.string(),
|
|
media_content_type: z.string(),
|
|
media_content_id: z.string(),
|
|
can_play: z.boolean(),
|
|
can_expand: z.boolean(),
|
|
children_media_class: z.string().nullable(),
|
|
thumbnail: z.string().nullable(),
|
|
children: z.array(browseMediaSourceSchema).nullable().optional(),
|
|
}),
|
|
);
|
|
|
|
// Server side data-type defined here: https://github.com/home-assistant/core/blob/dev/homeassistant/components/media_source/models.py
|
|
export const resolvedMediaSchema = z.object({
|
|
url: z.string(),
|
|
mime_type: z.string(),
|
|
});
|
|
export type ResolvedMedia = z.infer<typeof resolvedMediaSchema>;
|
|
|
|
export const signedPathSchema = z.object({
|
|
path: z.string(),
|
|
});
|
|
export type SignedPath = z.infer<typeof signedPathSchema>;
|
|
|
|
export const entitySchema = z.object({
|
|
entity_id: z.string(),
|
|
unique_id: z.string(),
|
|
platform: z.string(),
|
|
});
|
|
export type Entity = z.infer<typeof entitySchema>;
|