From 6b30487229842728a5e0d99e56c138f04742a49a Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Thu, 12 May 2022 20:42:02 -0700 Subject: [PATCH] Initial common.js refactor. --- src/action-handler-directive.ts | 15 +- src/card.ts | 126 ++- src/common.ts | 723 ------------------ src/components/carousel.ts | 13 +- src/components/elements.ts | 29 +- src/components/gallery.ts | 25 +- src/components/image.ts | 27 +- src/components/live.ts | 86 +-- src/components/media-carousel.ts | 21 +- src/components/menu.ts | 24 +- src/components/message.ts | 67 +- src/components/submenu.ts | 22 +- src/components/surround-thumbnails.ts | 24 +- src/components/thumbnail-carousel.ts | 24 +- src/components/thumbnail.ts | 30 +- src/components/timeline.ts | 48 +- src/components/viewer.ts | 41 +- src/editor.ts | 61 +- src/icons/alarm-panel-icon.ts | 42 - src/icons/binary-sensor-icon.ts | 58 -- src/icons/cover-icon.ts | 113 --- src/icons/domain-icon.ts | 166 ---- src/icons/sensor-icon.ts | 112 --- src/icons/state-icon.ts | 18 - src/icons/update.ts | 32 - src/patches/ha-camera-stream.ts | 5 +- src/patches/ha-hls-player.ts | 6 +- src/patches/ha-web-rtc-player.ts | 6 +- src/types.ts | 9 +- src/utils/action.ts | 185 +++++ src/utils/basic.ts | 62 ++ src/utils/camera.ts | 66 ++ src/utils/frigate.ts | 33 + .../ha/browse-media.ts} | 29 +- src/utils/ha/index.ts | 256 +++++++ src/utils/ha/update.ts | 36 + src/{ => utils}/icons/LICENSE | 0 src/{ => utils}/icons/README.md | 0 src/utils/icons/alarm-panel-icon.ts | 42 + src/utils/icons/binary-sensor-icon.ts | 58 ++ src/utils/icons/cover-icon.ts | 113 +++ src/utils/icons/domain-icon.ts | 166 ++++ src/utils/icons/sensor-icon.ts | 118 +++ src/utils/icons/state-icon.ts | 18 + src/utils/media-info.ts | 75 ++ src/{ => utils}/resolved-media.ts | 19 +- src/{zod-util.ts => utils/zod.ts} | 10 + src/view.ts | 2 +- 48 files changed, 1604 insertions(+), 1657 deletions(-) delete mode 100644 src/common.ts delete mode 100644 src/icons/alarm-panel-icon.ts delete mode 100644 src/icons/binary-sensor-icon.ts delete mode 100644 src/icons/cover-icon.ts delete mode 100644 src/icons/domain-icon.ts delete mode 100644 src/icons/sensor-icon.ts delete mode 100644 src/icons/state-icon.ts delete mode 100644 src/icons/update.ts create mode 100644 src/utils/action.ts create mode 100644 src/utils/basic.ts create mode 100644 src/utils/camera.ts create mode 100644 src/utils/frigate.ts rename src/{browse-media-util.ts => utils/ha/browse-media.ts} (96%) create mode 100644 src/utils/ha/index.ts create mode 100644 src/utils/ha/update.ts rename src/{ => utils}/icons/LICENSE (100%) rename src/{ => utils}/icons/README.md (100%) create mode 100644 src/utils/icons/alarm-panel-icon.ts create mode 100644 src/utils/icons/binary-sensor-icon.ts create mode 100644 src/utils/icons/cover-icon.ts create mode 100644 src/utils/icons/domain-icon.ts create mode 100644 src/utils/icons/sensor-icon.ts create mode 100644 src/utils/icons/state-icon.ts create mode 100644 src/utils/media-info.ts rename src/{ => utils}/resolved-media.ts (83%) rename src/{zod-util.ts => utils/zod.ts} (80%) diff --git a/src/action-handler-directive.ts b/src/action-handler-directive.ts index 25fcd421..b381996d 100644 --- a/src/action-handler-directive.ts +++ b/src/action-handler-directive.ts @@ -1,17 +1,16 @@ +import { fireEvent } from 'custom-card-helpers'; +import type { + ActionHandlerDetail, + ActionHandlerOptions +} from 'custom-card-helpers/dist/types.d.js'; import { noChange } from 'lit'; import { AttributePart, directive, Directive, - DirectiveParameters, + DirectiveParameters } from 'lit/directive.js'; - -import type { - ActionHandlerDetail, - ActionHandlerOptions, -} from 'custom-card-helpers/dist/types.d.js'; -import { fireEvent } from 'custom-card-helpers'; -import { stopEventFromActivatingCardWideActions } from './common'; +import { stopEventFromActivatingCardWideActions } from './utils/action.js'; interface ActionHandler extends HTMLElement { holdTime: number; diff --git a/src/card.ts b/src/card.ts index 8d33002b..89646db0 100644 --- a/src/card.ts +++ b/src/card.ts @@ -1,98 +1,94 @@ +import { getLovelace, HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers'; import { CSSResultGroup, + html, LitElement, PropertyValues, TemplateResult, - html, - unsafeCSS, + unsafeCSS } from 'lit'; -import { HomeAssistant, LovelaceCardEditor, getLovelace } from 'custom-card-helpers'; -import { StyleInfo, styleMap } from 'lit/directives/style-map.js'; import { customElement, property, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; import { createRef, ref, Ref } from 'lit/directives/ref.js'; -import screenfull from 'screenfull'; -import { throttle } from 'lodash-es'; +import { StyleInfo, styleMap } from 'lit/directives/style-map.js'; import { until } from 'lit/directives/until.js'; +import { throttle } from 'lodash-es'; +import screenfull from 'screenfull'; import { z } from 'zod'; - +import { actionHandler } from './action-handler-directive.js'; import { - Actions, - ActionType, - CameraConfig, - FrigateCardView, - FrigateCardCustomAction, - FRIGATE_CARD_VIEWS_USER_SPECIFIED, - RawFrigateCardConfig, - entitySchema, - frigateCardConfigSchema, -} from './types.js'; + ConditionState, + conditionStateRequestHandler, + getOverriddenConfig, + getOverridesByKey +} from './card-condition.js'; +import './components/elements.js'; +import { FrigateCardElements } from './components/elements.js'; +import './components/gallery.js'; +import './components/image.js'; +import { FrigateCardImage } from './components/image.js'; +import './components/live.js'; +import './components/menu.js'; +import { FrigateCardMenu, FRIGATE_BUTTON_MENU_ICON } from './components/menu.js'; +import './components/message.js'; +import { renderMessage, renderProgressIndicator } from './components/message.js'; +import './components/thumbnail-carousel.js'; +import './components/timeline.js'; +import './components/viewer.js'; +import { isConfigUpgradeable } from './config-mgmt.js'; +import { + CAMERA_BIRDSEYE, + CARD_VERSION, + MEDIA_PLAYER_SUPPORT_BROWSE_MEDIA, + REPO_URL +} from './const.js'; +import './editor.js'; +import { localize } from './localize/localize.js'; +import './patches/ha-camera-stream.js'; +import './patches/ha-hls-player.js'; +import './patches/ha-web-rtc-player.ts'; +import cardStyle from './scss/card.scss'; import type { Entity, ExtendedHomeAssistant, FrigateCardConfig, MediaShowInfo, MenuButton, - Message, + Message } from './types.js'; - import { - CAMERA_BIRDSEYE, - CARD_VERSION, - MEDIA_PLAYER_SUPPORT_BROWSE_MEDIA, - REPO_URL, -} from './const.js'; -import { FrigateCardElements } from './components/elements.js'; -import { FrigateCardImage } from './components/image.js'; -import { FRIGATE_BUTTON_MENU_ICON, FrigateCardMenu } from './components/menu.js'; -import { View } from './view.js'; + Actions, + ActionType, + CameraConfig, + entitySchema, + frigateCardConfigSchema, + FrigateCardCustomAction, + FrigateCardView, + FRIGATE_CARD_VIEWS_USER_SPECIFIED, + RawFrigateCardConfig +} from './types.js'; import { - contentsChanged, convertActionToFrigateCardCustomAction, createFrigateCardCustomAction, frigateCardHandleAction, frigateCardHasAction, - getActionConfigGivenAction, - getCameraIcon, - getCameraID, - getCameraTitle, + getActionConfigGivenAction +} from './utils/action.js'; +import { contentsChanged } from './utils/basic.js'; +import { getCameraIcon, getCameraID, getCameraTitle } from './utils/camera.js'; +import { getEntityIcon, getEntityTitle, homeAssistantSignPath, homeAssistantWSRequest, - isValidMediaShowInfo, shouldUpdateBasedOnHass, - sideLoadHomeAssistantElements, -} from './common.js'; -import { localize } from './localize/localize.js'; -import { renderMessage, renderProgressIndicator } from './components/message.js'; - -import './editor.js'; -import './components/elements.js'; -import './components/gallery.js'; -import './components/image.js'; -import './components/live.js'; -import './components/menu.js'; -import './components/message.js'; -import './components/viewer.js'; -import './components/thumbnail-carousel.js'; -import './components/timeline.js'; -import './patches/ha-camera-stream.js'; -import './patches/ha-hls-player.js'; -import './patches/ha-web-rtc-player.ts'; - -import cardStyle from './scss/card.scss'; -import { ResolvedMediaCache } from './resolved-media.js'; -import { BrowseMediaUtil } from './browse-media-util.js'; -import { isConfigUpgradeable } from './config-mgmt.js'; -import { actionHandler } from './action-handler-directive.js'; -import { - ConditionState, - conditionStateRequestHandler, - getOverriddenConfig, - getOverridesByKey, -} from './card-condition.js'; -import { supportsFeature } from './icons/update.js'; + sideLoadHomeAssistantElements +} from './utils/ha'; +import { BrowseMediaUtil } from './utils/ha/browse-media.js'; +import { supportsFeature } from './utils/ha/update.js'; +import { isValidMediaShowInfo } from './utils/media-info.js'; +import { ResolvedMediaCache } from './utils/resolved-media.js'; +import { View } from './view.js'; /** A note on media callbacks: * diff --git a/src/common.ts b/src/common.ts deleted file mode 100644 index d3873370..00000000 --- a/src/common.ts +++ /dev/null @@ -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(error: z.ZodError): 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( - hass: HomeAssistant, - schema: ZodSchema, - request: MessageBase, -): Promise { - const response = await hass.callWS(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(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 { - const request = { - type: 'auth/sign_path', - path: path, - expires: expires, - }; - const response = await homeAssistantWSRequest( - 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( - target: EventTarget, - name: string, - detail?: T, -): void { - target.dispatchEvent( - new CustomEvent(`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(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(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(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 => { - 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; -}; diff --git a/src/components/carousel.ts b/src/components/carousel.ts index 9cd9b923..9da0102f 100644 --- a/src/components/carousel.ts +++ b/src/components/carousel.ts @@ -1,17 +1,14 @@ -import { CSSResultGroup, LitElement, unsafeCSS, PropertyValues } from 'lit'; -import { property } from 'lit/decorators.js'; - import EmblaCarousel, { EmblaCarouselType, EmblaOptionsType, - EmblaPluginType, + EmblaPluginType } from 'embla-carousel'; import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'; - -import { TransitionEffect } from '../types'; -import { dispatchFrigateCardEvent } from '../common'; - +import { CSSResultGroup, LitElement, PropertyValues, unsafeCSS } from 'lit'; +import { property } from 'lit/decorators.js'; import carouselStyle from '../scss/carousel.scss'; +import { TransitionEffect } from '../types'; +import { dispatchFrigateCardEvent } from '../utils/basic.js'; export interface CarouselSelect { index: number; diff --git a/src/components/elements.ts b/src/components/elements.ts index 2eada158..e815a5fe 100644 --- a/src/components/elements.ts +++ b/src/components/elements.ts @@ -1,28 +1,27 @@ -import { - LitElement, - TemplateResult, - html, - CSSResultGroup, - unsafeCSS, - PropertyValues, -} from 'lit'; import { HomeAssistant } from 'custom-card-helpers'; +import { + CSSResultGroup, + html, + LitElement, + PropertyValues, + TemplateResult, + unsafeCSS +} from 'lit'; import { customElement, property } from 'lit/decorators.js'; - +import { ConditionState, fetchStateAndEvaluateCondition } from '../card-condition.js'; +import { localize } from '../localize/localize.js'; +import elementsStyle from '../scss/elements.scss'; import { FrigateConditional, MenuButton, MenuIcon, MenuStateIcon, - PictureElements, MenuSubmenu, MenuSubmenuSelect, + PictureElements } from '../types.js'; -import { dispatchErrorMessageEvent, dispatchFrigateCardEvent } from '../common.js'; - -import elementsStyle from '../scss/elements.scss'; -import { localize } from '../localize/localize.js'; -import { ConditionState, fetchStateAndEvaluateCondition } from '../card-condition.js'; +import { dispatchFrigateCardEvent } from '../utils/basic.js'; +import { dispatchErrorMessageEvent } from './message.js'; /* A note on picture element rendering: * diff --git a/src/components/gallery.ts b/src/components/gallery.ts index 1bdcf2a7..4f03f0b9 100644 --- a/src/components/gallery.ts +++ b/src/components/gallery.ts @@ -1,26 +1,23 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ +import { HomeAssistant } from 'custom-card-helpers'; import { + css, CSSResultGroup, + html, LitElement, PropertyValues, TemplateResult, - css, - html, - unsafeCSS, + unsafeCSS } from 'lit'; -import { HomeAssistant } from 'custom-card-helpers'; import { customElement, property } from 'lit/decorators.js'; - -import { CameraConfig, GalleryConfig, frigateCardConfigDefaults } from '../types.js'; -import { BrowseMediaUtil } from '../browse-media-util.js'; -import { View } from '../view.js'; -import { THUMBNAIL_DETAILS_WIDTH_MIN } from './thumbnail.js'; -import { renderProgressIndicator } from './message.js'; -import { stopEventFromActivatingCardWideActions } from '../common.js'; - -import './thumbnail.js'; - import galleryStyle from '../scss/gallery.scss'; +import { CameraConfig, frigateCardConfigDefaults, GalleryConfig } from '../types.js'; +import { stopEventFromActivatingCardWideActions } from '../utils/action.js'; +import { BrowseMediaUtil } from '../utils/ha/browse-media.js'; +import { View } from '../view.js'; +import { renderProgressIndicator } from './message.js'; +import './thumbnail.js'; +import { THUMBNAIL_DETAILS_WIDTH_MIN } from './thumbnail.js'; @customElement('frigate-card-gallery') export class FrigateCardGallery extends LitElement { diff --git a/src/components/image.ts b/src/components/image.ts index 28d1c0de..0ba8f042 100644 --- a/src/components/image.ts +++ b/src/components/image.ts @@ -1,28 +1,23 @@ +import { HomeAssistant } from 'custom-card-helpers'; import { CSSResultGroup, + html, LitElement, PropertyValues, TemplateResult, - html, - unsafeCSS, + unsafeCSS } from 'lit'; -import { HomeAssistant } from 'custom-card-helpers'; -import { createRef, ref, Ref } from 'lit/directives/ref.js'; import { customElement, property, state } from 'lit/decorators.js'; - +import { createRef, ref, Ref } from 'lit/directives/ref.js'; import { CachedValueController } from '../cached-value-controller.js'; -import { CameraConfig, ImageViewConfig } from '../types.js'; -import { View } from '../view.js'; -import { - dispatchErrorMessageEvent, - dispatchMediaShowEvent, - shouldUpdateBasedOnHass, -} from '../common.js'; -import { localize } from '../localize/localize.js'; - import defaultImage from '../images/frigate-bird-in-sky.jpg'; - +import { localize } from '../localize/localize.js'; import imageStyle from '../scss/image.scss'; +import { CameraConfig, ImageViewConfig } from '../types.js'; +import { shouldUpdateBasedOnHass } from '../utils/ha'; +import { dispatchMediaShowEvent } from '../utils/media-info.js'; +import { View } from '../view.js'; +import { dispatchErrorMessageEvent } from './message.js'; // See: https://github.com/home-assistant/core/blob/dev/homeassistant/components/camera/__init__.py#L101 const HASS_REJECTION_CUTOFF_MS = 5 * 60 * 1000; @@ -41,7 +36,7 @@ export class FrigateCardImage extends LitElement { @state() protected _imageConfig?: ImageViewConfig; - protected _refImage: Ref = createRef() ; + protected _refImage: Ref = createRef(); protected _cachedValueController?: CachedValueController; protected _boundVisibilityHandler = this._visibilityHandler.bind(this); diff --git a/src/components/live.ts b/src/components/live.ts index 7c1d52ce..adb2c111 100644 --- a/src/components/live.ts +++ b/src/components/live.ts @@ -1,60 +1,56 @@ +import JSMpeg from '@cycjimmy/jsmpeg-player'; +import { Task } from '@lit-labs/task'; +import { HomeAssistant } from 'custom-card-helpers'; +import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel'; import { CSSResultGroup, - LitElement, - TemplateResult, html, - unsafeCSS, + LitElement, PropertyValues, + TemplateResult, + unsafeCSS } from 'lit'; -import { - ExtendedHomeAssistant, - CameraConfig, - JSMPEGConfig, - LiveConfig, - MediaShowInfo, - WebRTCCardConfig, - FrigateCardError, - FrigateCardMediaPlayer, - LiveOverrides, - LiveProvider, - TransitionEffect, - frigateCardConfigDefaults, -} from '../types.js'; -import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel'; -import { HomeAssistant } from 'custom-card-helpers'; -import JSMpeg from '@cycjimmy/jsmpeg-player'; -import { Ref, createRef, ref } from 'lit/directives/ref.js'; -import { Task } from '@lit-labs/task'; import { customElement, property, state } from 'lit/decorators.js'; +import { createRef, Ref, ref } from 'lit/directives/ref.js'; import { until } from 'lit/directives/until.js'; - -import { AutoMediaPlugin, AutoMediaPluginType } from './embla-plugins/automedia.js'; -import { BrowseMediaUtil } from '../browse-media-util.js'; import { ConditionState, getOverriddenConfig } from '../card-condition.js'; -import { FrigateCardMediaCarousel } from './media-carousel.js'; -import { FrigateCardNextPreviousControl } from './next-prev-control.js'; -import { Lazyload } from './embla-plugins/lazyload.js'; -import { View } from '../view.js'; -import { localize } from '../localize/localize.js'; -import { - contentsChanged, - dispatchErrorMessageEvent, - dispatchExistingMediaShowInfoAsEvent, - dispatchMediaShowEvent, - getCameraIcon, - getCameraTitle, - homeAssistantSignPath, - stopEventFromActivatingCardWideActions, -} from '../common.js'; import { renderProgressIndicator } from '../components/message.js'; - -import './next-prev-control.js'; -import './title-control.js'; - -import liveStyle from '../scss/live.scss'; +import { localize } from '../localize/localize.js'; import liveFrigateStyle from '../scss/live-frigate.scss'; import liveJSMPEGStyle from '../scss/live-jsmpeg.scss'; import liveWebRTCStyle from '../scss/live-webrtc.scss'; +import liveStyle from '../scss/live.scss'; +import { + CameraConfig, + ExtendedHomeAssistant, + frigateCardConfigDefaults, + FrigateCardError, + FrigateCardMediaPlayer, + JSMPEGConfig, + LiveConfig, + LiveOverrides, + LiveProvider, + MediaShowInfo, + TransitionEffect, + WebRTCCardConfig +} from '../types.js'; +import { stopEventFromActivatingCardWideActions } from '../utils/action.js'; +import { contentsChanged } from '../utils/basic.js'; +import { getCameraIcon, getCameraTitle } from '../utils/camera.js'; +import { homeAssistantSignPath } from '../utils/ha'; +import { BrowseMediaUtil } from '../utils/ha/browse-media.js'; +import { + dispatchExistingMediaShowInfoAsEvent, + dispatchMediaShowEvent +} from '../utils/media-info.js'; +import { View } from '../view.js'; +import { AutoMediaPlugin, AutoMediaPluginType } from './embla-plugins/automedia.js'; +import { Lazyload } from './embla-plugins/lazyload.js'; +import { FrigateCardMediaCarousel } from './media-carousel.js'; +import { dispatchErrorMessageEvent } from './message.js'; +import './next-prev-control.js'; +import { FrigateCardNextPreviousControl } from './next-prev-control.js'; +import './title-control.js'; // Number of seconds a signed URL is valid for. const URL_SIGN_EXPIRY_SECONDS = 24 * 60 * 60; diff --git a/src/components/media-carousel.ts b/src/components/media-carousel.ts index fa6afa4f..2ff28371 100644 --- a/src/components/media-carousel.ts +++ b/src/components/media-carousel.ts @@ -1,21 +1,18 @@ -import { CSSResultGroup, unsafeCSS } from 'lit'; import { EmblaCarouselType } from 'embla-carousel'; -import { createRef, Ref } from 'lit/directives/ref.js'; +import { CSSResultGroup, unsafeCSS } from 'lit'; import { customElement } from 'lit/decorators.js'; - -import { AutoMediaPluginType } from './embla-plugins/automedia.js'; -import { FrigateCardCarousel } from './carousel.js'; -import { FrigateCardNextPreviousControl } from './next-prev-control.js'; -import { FrigateCardTitleControl } from './title-control.js'; +import { createRef, Ref } from 'lit/directives/ref.js'; +import mediaCarouselStyle from '../scss/media-carousel.scss'; import type { MediaShowInfo } from '../types.js'; import { dispatchExistingMediaShowInfoAsEvent, - isValidMediaShowInfo, -} from '../common.js'; - + isValidMediaShowInfo +} from '../utils/media-info.js'; +import { FrigateCardCarousel } from './carousel.js'; +import { AutoMediaPluginType } from './embla-plugins/automedia.js'; import './next-prev-control.js'; - -import mediaCarouselStyle from '../scss/media-carousel.scss'; +import { FrigateCardNextPreviousControl } from './next-prev-control.js'; +import { FrigateCardTitleControl } from './title-control.js'; const getEmptyImageSrc = (width: number, height: number) => `data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"%3E%3C/svg%3E`; diff --git a/src/components/menu.ts b/src/components/menu.ts index 07888542..a58b07e3 100644 --- a/src/components/menu.ts +++ b/src/components/menu.ts @@ -1,38 +1,34 @@ +import { HASSDomEvent, HomeAssistant } from 'custom-card-helpers'; import { CSSResultGroup, - LitElement, - TemplateResult, html, - unsafeCSS, + LitElement, PropertyValues, + TemplateResult, + unsafeCSS } from 'lit'; -import { HASSDomEvent, HomeAssistant } from 'custom-card-helpers'; import { customElement, property, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { styleMap } from 'lit/directives/style-map.js'; - import { actionHandler } from '../action-handler-directive.js'; - -import './submenu.js'; - +import menuStyle from '../scss/menu.scss'; import type { ActionsConfig, ActionType, MenuButton, MenuConfig, MenuItem, - StateParameters, + StateParameters } from '../types.js'; import { convertActionToFrigateCardCustomAction, frigateCardHandleActionConfig, frigateCardHasAction, - getActionConfigGivenAction, - refreshDynamicStateParameters, -} from '../common.js'; - -import menuStyle from '../scss/menu.scss'; + getActionConfigGivenAction +} from '../utils/action.js'; +import { refreshDynamicStateParameters } from '../utils/ha'; +import './submenu.js'; export const FRIGATE_BUTTON_MENU_ICON = 'frigate'; export const FRIGATE_ICON_FILLED = diff --git a/src/components/message.ts b/src/components/message.ts index cc947653..12547788 100644 --- a/src/components/message.ts +++ b/src/components/message.ts @@ -1,11 +1,10 @@ -import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit'; +import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit'; import { customElement, property } from 'lit/decorators.js'; - -import { Message } from '../types.js'; import { TROUBLESHOOTING_URL } from '../const.js'; import { localize } from '../localize/localize.js'; - import messageStyle from '../scss/message.scss'; +import { Message } from '../types.js'; +import { dispatchFrigateCardEvent } from '../utils/basic.js'; @customElement('frigate-card-message') export class FrigateCardMessage extends LitElement { @@ -21,18 +20,19 @@ export class FrigateCardMessage extends LitElement { // Render the menu. protected render(): TemplateResult { const icon = this.icon ? this.icon : 'mdi:information-outline'; - return html` -
-
-
- -
-
- ${this.message ? html`${this.message}` : ''} - ${this.context ? html`
${JSON.stringify(this.context, null, 2)}
` : ''} -
+ return html`
+
+
+
-
`; +
+ ${this.message ? html`${this.message}` : ''} + ${this.context + ? html`
${JSON.stringify(this.context, null, 2)}
` + : ''} +
+
+
`; } static get styles(): CSSResultGroup { @@ -103,3 +103,40 @@ export function renderProgressIndicator(message?: string): TemplateResult { `; } + +/** + * 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(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(element, 'message', { + message: message, + type: 'error', + context: context, + }); +} diff --git a/src/components/submenu.ts b/src/components/submenu.ts index df601177..f7a77562 100644 --- a/src/components/submenu.ts +++ b/src/components/submenu.ts @@ -1,29 +1,25 @@ import type { Corner } from '@material/mwc-menu'; +import { HomeAssistant } from 'custom-card-helpers'; import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult, - unsafeCSS, + unsafeCSS } from 'lit'; -import { HomeAssistant } from 'custom-card-helpers'; import { customElement, property } from 'lit/decorators.js'; - -import { - frigateCardHasAction, - refreshDynamicStateParameters, - shouldUpdateBasedOnHass, - stopEventFromActivatingCardWideActions, -} from '../common.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { styleMap } from 'lit/directives/style-map.js'; - -import { MenuSubmenu, MenuSubmenuItem, MenuSubmenuSelect } from '../types.js'; import { actionHandler } from '../action-handler-directive.js'; -import { domainIcon } from '../icons/domain-icon.js'; - import submenuStyle from '../scss/submenu.scss'; +import { MenuSubmenu, MenuSubmenuItem, MenuSubmenuSelect } from '../types.js'; +import { + frigateCardHasAction, + stopEventFromActivatingCardWideActions +} from '../utils/action.js'; +import { refreshDynamicStateParameters, shouldUpdateBasedOnHass } from '../utils/ha'; +import { domainIcon } from '../utils/icons/domain-icon.js'; @customElement('frigate-card-submenu') export class FrigateCardSubmenu extends LitElement { diff --git a/src/components/surround-thumbnails.ts b/src/components/surround-thumbnails.ts index 9bd707f9..3128005a 100644 --- a/src/components/surround-thumbnails.ts +++ b/src/components/surround-thumbnails.ts @@ -1,23 +1,20 @@ -import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit'; -import { HomeAssistant } from 'custom-card-helpers'; import { Task } from '@lit-labs/task'; +import { HomeAssistant } from 'custom-card-helpers'; +import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit'; import { customElement, property } from 'lit/decorators.js'; - -import { BrowseMediaUtil } from '../browse-media-util.js'; +import surroundThumbnailsStyle from '../scss/surround.scss'; import { BrowseMediaQueryParameters, FrigateBrowseMediaSource, FrigateCardView, - ThumbnailsControlConfig, + ThumbnailsControlConfig } from '../types.js'; - -import { ThumbnailCarouselTap } from './thumbnail-carousel.js'; +import { dispatchFrigateCardEvent } from '../utils/basic.js'; +import { BrowseMediaUtil } from '../utils/ha/browse-media.js'; import { View } from '../view.js'; -import { dispatchErrorMessageEvent, dispatchFrigateCardEvent } from '../common.js'; - +import { dispatchErrorMessageEvent } from './message.js'; import './surround.js'; - -import surroundThumbnailsStyle from '../scss/surround.scss'; +import { ThumbnailCarouselTap } from './thumbnail-carousel.js'; @customElement('frigate-card-surround-thumbnails') export class FrigateCardSurround extends LitElement { @@ -71,7 +68,10 @@ export class FrigateCardSurround extends LitElement { } let parent: FrigateBrowseMediaSource | null; try { - parent = await BrowseMediaUtil.multipleBrowseMediaQueryMerged(this.hass, browseMediaParams); + parent = await BrowseMediaUtil.multipleBrowseMediaQueryMerged( + this.hass, + browseMediaParams, + ); } catch (e) { return dispatchErrorMessageEvent(this, (e as Error).message); } diff --git a/src/components/thumbnail-carousel.ts b/src/components/thumbnail-carousel.ts index bfa0b36b..6310be56 100644 --- a/src/components/thumbnail-carousel.ts +++ b/src/components/thumbnail-carousel.ts @@ -1,22 +1,16 @@ -import { BrowseMediaUtil } from '../browse-media-util.js'; -import { CSSResultGroup, TemplateResult, html, unsafeCSS, PropertyValues } from 'lit'; import { EmblaOptionsType } from 'embla-carousel'; -import { classMap } from 'lit/directives/class-map.js'; +import { CSSResultGroup, html, PropertyValues, TemplateResult, unsafeCSS } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; +import { classMap } from 'lit/directives/class-map.js'; import { ifDefined } from 'lit/directives/if-defined.js'; - -import type { FrigateBrowseMediaSource, ThumbnailsControlConfig } from '../types.js'; -import { FrigateCardCarousel } from './carousel.js'; -import { View } from '../view.js'; -import { - contentsChanged, - dispatchFrigateCardEvent, - stopEventFromActivatingCardWideActions, -} from '../common.js'; - -import './thumbnail.js'; - import thumbnailCarouselStyle from '../scss/thumbnail-carousel.scss'; +import type { FrigateBrowseMediaSource, ThumbnailsControlConfig } from '../types.js'; +import { stopEventFromActivatingCardWideActions } from '../utils/action.js'; +import { contentsChanged, dispatchFrigateCardEvent } from '../utils/basic.js'; +import { BrowseMediaUtil } from '../utils/ha/browse-media.js'; +import { View } from '../view.js'; +import { FrigateCardCarousel } from './carousel.js'; +import './thumbnail.js'; export interface ThumbnailCarouselTap { slideIndex: number; diff --git a/src/components/thumbnail.ts b/src/components/thumbnail.ts index 4a4480a4..e7265e4b 100644 --- a/src/components/thumbnail.ts +++ b/src/components/thumbnail.ts @@ -1,18 +1,14 @@ -import { CSSResult, TemplateResult, html, unsafeCSS, LitElement } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; import { format, fromUnixTime } from 'date-fns'; - -import type { FrigateBrowseMediaSource, FrigateEvent } from '../types.js'; -import { View } from '../view.js'; -import { - getEventDurationString, - prettifyFrigateName, - stopEventFromActivatingCardWideActions, -} from '../common.js'; +import { CSSResult, html, LitElement, TemplateResult, unsafeCSS } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; import { localize } from '../localize/localize.js'; - -import thumbnailStyle from '../scss/thumbnail.scss'; import thumbnailDetailsStyle from '../scss/thumbnail-details.scss'; +import thumbnailStyle from '../scss/thumbnail.scss'; +import type { FrigateBrowseMediaSource, FrigateEvent } from '../types.js'; +import { stopEventFromActivatingCardWideActions } from '../utils/action.js'; +import { prettifyTitle } from '../utils/basic.js'; +import { getEventDurationString } from '../utils/frigate.js'; +import { View } from '../view.js'; // The minimum width of a thumbnail with details enabled. export const THUMBNAIL_DETAILS_WIDTH_MIN = 300; @@ -28,14 +24,14 @@ export class FrigateCardThumbnailDetails extends LitElement { } const score = (this.event.top_score * 100).toFixed(2) + '%'; return html`
-
${prettifyFrigateName(this.event.label)}
+
${prettifyTitle(this.event.label)}
- ${localize('event.start')}: - ${format(fromUnixTime(this.event.start_time), 'HH:mm:ss')} + ${localize('event.start')}: + ${format(fromUnixTime(this.event.start_time), 'HH:mm:ss')}
- ${localize('event.duration')}: - ${getEventDurationString(this.event)} + ${localize('event.duration')}: + ${getEventDurationString(this.event)}
diff --git a/src/components/timeline.ts b/src/components/timeline.ts index 108aa6f7..ce219bcc 100644 --- a/src/components/timeline.ts +++ b/src/components/timeline.ts @@ -1,11 +1,17 @@ +import { HomeAssistant } from 'custom-card-helpers'; +import { add, fromUnixTime, sub } from 'date-fns'; import { CSSResultGroup, - LitElement, - TemplateResult, html, - unsafeCSS, + LitElement, PropertyValues, + TemplateResult, + unsafeCSS } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { classMap } from 'lit/directives/class-map.js'; +import { createRef, ref, Ref } from 'lit/directives/ref.js'; +import { isEqual } from 'lodash-es'; import { DataSet } from 'vis-data/esnext'; import { DataGroupCollectionType, @@ -14,38 +20,26 @@ import { TimelineItem, TimelineOptions, TimelineOptionsCluster, - TimelineWindow, + TimelineWindow } from 'vis-timeline/esnext'; -import { HomeAssistant } from 'custom-card-helpers'; -import { classMap } from 'lit/directives/class-map.js'; -import { customElement, property } from 'lit/decorators.js'; -import { createRef, ref, Ref } from 'lit/directives/ref.js'; -import { add, fromUnixTime, sub } from 'date-fns'; -import { isEqual } from 'lodash-es'; - -import { BrowseMediaUtil } from '../browse-media-util'; +import { CAMERA_BIRDSEYE } from '../const'; +import { localize } from '../localize/localize'; +import timelineCoreStyle from '../scss/timeline-core.scss'; +import timelineStyle from '../scss/timeline.scss'; import { BrowseMediaQueryParameters, CameraConfig, FrigateBrowseMediaSource, - TimelineConfig, - FrigateEvent, frigateCardConfigDefaults, + FrigateEvent, + TimelineConfig } from '../types'; -import { CAMERA_BIRDSEYE } from '../const'; +import { stopEventFromActivatingCardWideActions } from '../utils/action.js'; +import { dispatchFrigateCardEvent } from '../utils/basic.js'; +import { getCameraTitle } from '../utils/camera.js'; +import { BrowseMediaUtil } from '../utils/ha/browse-media.js'; import { View, ViewContext } from '../view'; -import { - dispatchErrorMessageEvent, - dispatchFrigateCardEvent, - dispatchMessageEvent, - getCameraTitle, - stopEventFromActivatingCardWideActions, -} from '../common.js'; -import { localize } from '../localize/localize'; - -import timelineCoreStyle from '../scss/timeline-core.scss'; -import timelineStyle from '../scss/timeline.scss'; - +import { dispatchErrorMessageEvent, dispatchMessageEvent } from './message.js'; import './surround-thumbnails.js'; const TIMELINE_EVENT_MANAGER_MAX_AGE_SECONDS = 10; diff --git a/src/components/viewer.ts b/src/components/viewer.ts index c9923252..ab332aeb 100644 --- a/src/components/viewer.ts +++ b/src/components/viewer.ts @@ -1,19 +1,21 @@ +import { Task } from '@lit-labs/task'; +import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel'; import { CSSResultGroup, + html, LitElement, PropertyValues, TemplateResult, - html, - unsafeCSS, + unsafeCSS } from 'lit'; -import { BrowseMediaUtil } from '../browse-media-util.js'; -import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel'; -import { Task } from '@lit-labs/task'; import { customElement, property } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { ref } from 'lit/directives/ref.js'; - -import { AutoMediaPlugin } from './embla-plugins/automedia.js'; +import { + dispatchErrorMessageEvent, + renderProgressIndicator +} from '../components/message.js'; +import viewerStyle from '../scss/viewer.scss'; import type { BrowseMediaNeighbors, BrowseMediaQueryParameters, @@ -22,26 +24,21 @@ import type { FrigateBrowseMediaSource, MediaShowInfo, TransitionEffect, - ViewerConfig, + ViewerConfig } from '../types.js'; -import { FrigateCardMediaCarousel, IMG_EMPTY } from './media-carousel.js'; -import { FrigateCardNextPreviousControl } from './next-prev-control.js'; -import { Lazyload, LazyloadType } from './embla-plugins/lazyload.js'; -import { ResolvedMediaCache, ResolvedMediaUtil } from '../resolved-media.js'; +import { stopEventFromActivatingCardWideActions } from '../utils/action.js'; +import { contentsChanged } from '../utils/basic.js'; +import { BrowseMediaUtil } from '../utils/ha/browse-media.js'; +import { createMediaShowInfo } from '../utils/media-info.js'; +import { ResolvedMediaCache, ResolvedMediaUtil } from '../utils/resolved-media.js'; import { View } from '../view.js'; -import { - contentsChanged, - createMediaShowInfo, - dispatchErrorMessageEvent, - stopEventFromActivatingCardWideActions, -} from '../common.js'; -import { renderProgressIndicator } from '../components/message.js'; - +import { AutoMediaPlugin } from './embla-plugins/automedia.js'; +import { Lazyload, LazyloadType } from './embla-plugins/lazyload.js'; +import { FrigateCardMediaCarousel, IMG_EMPTY } from './media-carousel.js'; import './next-prev-control.js'; +import { FrigateCardNextPreviousControl } from './next-prev-control.js'; import './title-control.js'; -import viewerStyle from '../scss/viewer.scss'; - @customElement('frigate-card-viewer') export class FrigateCardViewer extends LitElement { @property({ attribute: false }) diff --git a/src/editor.ts b/src/editor.ts index b003f60b..981ef41c 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -1,18 +1,15 @@ -import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit'; +import { fireEvent, HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers'; +import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; - -import { HomeAssistant, LovelaceCardEditor, fireEvent } from 'custom-card-helpers'; -import { localize } from './localize/localize.js'; import { - BUTTON_SIZE_MIN, - FRIGATE_MENU_PRIORITY_MAX, - RawFrigateCardConfig, - RawFrigateCardConfigArray, - THUMBNAIL_WIDTH_MAX, - THUMBNAIL_WIDTH_MIN, - frigateCardConfigDefaults, -} from './types.js'; - + copyConfig, + deleteConfigValue, + getArrayConfigPath, + getConfigValue, + isConfigUpgradeable, + setConfigValue, + upgradeConfig, +} from './config-mgmt.js'; import { CONF_CAMERAS, CONF_CAMERAS_ARRAY_CAMERA_ENTITY, @@ -89,23 +86,20 @@ import { CONF_VIEW_UPDATE_FORCE, CONF_VIEW_UPDATE_SECONDS, } from './const.js'; -import { - arrayMove, - getCameraID, - getCameraTitle, - sideLoadHomeAssistantElements, -} from './common.js'; -import { - copyConfig, - deleteConfigValue, - getArrayConfigPath, - getConfigValue, - isConfigUpgradeable, - setConfigValue, - upgradeConfig, -} from './config-mgmt.js'; - +import { localize } from './localize/localize.js'; import frigate_card_editor_style from './scss/editor.scss'; +import { + BUTTON_SIZE_MIN, + frigateCardConfigDefaults, + FRIGATE_MENU_PRIORITY_MAX, + RawFrigateCardConfig, + RawFrigateCardConfigArray, + THUMBNAIL_WIDTH_MAX, + THUMBNAIL_WIDTH_MIN, +} from './types.js'; +import { arrayMove } from './utils/basic.js'; +import { getCameraID, getCameraTitle } from './utils/camera.js'; +import { sideLoadHomeAssistantElements } from './utils/ha'; const MENU_BUTTONS = 'buttons'; const MENU_CAMERAS = 'cameras'; @@ -1006,12 +1000,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor })}
- ${this._renderMenuButton('frigate')} - ${this._renderMenuButton('live')} - ${this._renderMenuButton('clips')} - ${this._renderMenuButton('snapshots')} - ${this._renderMenuButton('image')} - ${this._renderMenuButton('download')} + ${this._renderMenuButton('frigate')} ${this._renderMenuButton('live')} + ${this._renderMenuButton('clips')} ${this._renderMenuButton('snapshots')} + ${this._renderMenuButton('image')} ${this._renderMenuButton('download')} ${this._renderMenuButton('frigate_ui')} ${this._renderMenuButton('fullscreen')} ${this._renderMenuButton('timeline')} diff --git a/src/icons/alarm-panel-icon.ts b/src/icons/alarm-panel-icon.ts deleted file mode 100644 index 8f85affa..00000000 --- a/src/icons/alarm-panel-icon.ts +++ /dev/null @@ -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"; - } -}; diff --git a/src/icons/binary-sensor-icon.ts b/src/icons/binary-sensor-icon.ts deleted file mode 100644 index c97c198e..00000000 --- a/src/icons/binary-sensor-icon.ts +++ /dev/null @@ -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"; - } -}; diff --git a/src/icons/cover-icon.ts b/src/icons/cover-icon.ts deleted file mode 100644 index db3ff716..00000000 --- a/src/icons/cover-icon.ts +++ /dev/null @@ -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"; - } -}; diff --git a/src/icons/domain-icon.ts b/src/icons/domain-icon.ts deleted file mode 100644 index 3a6f4e25..00000000 --- a/src/icons/domain-icon.ts +++ /dev/null @@ -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; -} diff --git a/src/icons/sensor-icon.ts b/src/icons/sensor-icon.ts deleted file mode 100644 index b8673522..00000000 --- a/src/icons/sensor-icon.ts +++ /dev/null @@ -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; -}; diff --git a/src/icons/state-icon.ts b/src/icons/state-icon.ts deleted file mode 100644 index 44d8e8da..00000000 --- a/src/icons/state-icon.ts +++ /dev/null @@ -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); -} diff --git a/src/icons/update.ts b/src/icons/update.ts deleted file mode 100644 index 4fa2d460..00000000 --- a/src/icons/update.ts +++ /dev/null @@ -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; diff --git a/src/patches/ha-camera-stream.ts b/src/patches/ha-camera-stream.ts index 68a4ddd9..0d41744f 100644 --- a/src/patches/ha-camera-stream.ts +++ b/src/patches/ha-camera-stream.ts @@ -9,12 +9,11 @@ // available as compilation time. // ==================================================================== -import { TemplateResult, css, html } from 'lit'; +import { css, html, TemplateResult } from 'lit'; import { customElement } from 'lit/decorators.js'; import { query } from 'lit/decorators/query.js'; - import { FrigateCardMediaPlayer } from '../types.js'; -import { dispatchMediaShowEvent } from '../common.js'; +import { dispatchMediaShowEvent } from '../utils/media-info.js'; customElements.whenDefined('ha-camera-stream').then(() => { // ======================================================================================== diff --git a/src/patches/ha-hls-player.ts b/src/patches/ha-hls-player.ts index 6c83817f..693acfb3 100644 --- a/src/patches/ha-hls-player.ts +++ b/src/patches/ha-hls-player.ts @@ -9,11 +9,11 @@ // available as compilation time. // ==================================================================== -import { TemplateResult, css, html } from 'lit'; +import { css, html, TemplateResult } from 'lit'; import { customElement } from 'lit/decorators.js'; import { query } from 'lit/decorators/query.js'; - -import { dispatchErrorMessageEvent, dispatchMediaShowEvent } from '../common.js'; +import { dispatchErrorMessageEvent } from '../components/message.js'; +import { dispatchMediaShowEvent } from '../utils/media-info.js'; customElements.whenDefined('ha-hls-player').then(() => { @customElement('frigate-card-ha-hls-player') diff --git a/src/patches/ha-web-rtc-player.ts b/src/patches/ha-web-rtc-player.ts index be6c16ef..ecafbc30 100644 --- a/src/patches/ha-web-rtc-player.ts +++ b/src/patches/ha-web-rtc-player.ts @@ -9,11 +9,11 @@ // available as compilation time. // ==================================================================== -import { TemplateResult, html } from 'lit'; +import { html, TemplateResult } from 'lit'; import { customElement } from 'lit/decorators.js'; import { query } from 'lit/decorators/query.js'; - -import { dispatchErrorMessageEvent, dispatchMediaShowEvent } from '../common.js'; +import { dispatchErrorMessageEvent } from '../components/message.js'; +import { dispatchMediaShowEvent } from '../utils/media-info.js'; customElements.whenDefined('ha-web-rtc-player').then(() => { @customElement('frigate-card-ha-web-rtc-player') diff --git a/src/types.ts b/src/types.ts index 67873814..704b0e44 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,4 +1,3 @@ -import { StyleInfo } from 'lit/directives/style-map.js'; import { CallServiceActionConfig, ConfirmationRestrictionConfig, @@ -12,11 +11,11 @@ import { NoActionConfig, Themes, ToggleActionConfig, - UrlActionConfig, + UrlActionConfig } from 'custom-card-helpers'; +import { StyleInfo } from 'lit/directives/style-map.js'; import { z } from 'zod'; - -import { deepRemoveDefaults } from './zod-util'; +import { deepRemoveDefaults } from './utils/zod.js'; // The min allowed size of buttons. export const BUTTON_SIZE_MIN = 20; @@ -1156,7 +1155,7 @@ export interface FrigateCardMediaPlayer { export interface CardHelpers { createCardElement(config: LovelaceCardConfig): Promise<{ constructor: { - getConfigElement(): HTMLElement + getConfigElement(): HTMLElement; }; }>; } diff --git a/src/utils/action.ts b/src/utils/action.ts new file mode 100644 index 00000000..e7b6d5f5 --- /dev/null +++ b/src/utils/action.ts @@ -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(); +}; diff --git a/src/utils/basic.ts b/src/utils/basic.ts new file mode 100644 index 00000000..6f1fa47c --- /dev/null +++ b/src/utils/basic.ts @@ -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( + target: EventTarget, + name: string, + detail?: T, +): void { + target.dispatchEvent( + new CustomEvent(`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); +} diff --git a/src/utils/camera.ts b/src/utils/camera.ts new file mode 100644 index 00000000..72756216 --- /dev/null +++ b/src/utils/camera.ts @@ -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'; +} diff --git a/src/utils/frigate.ts b/src/utils/frigate.ts new file mode 100644 index 00000000..fdb309b3 --- /dev/null +++ b/src/utils/frigate.ts @@ -0,0 +1,33 @@ +import { + differenceInHours, differenceInMinutes, differenceInSeconds, fromUnixTime +} from 'date-fns'; +import { localize } from '../localize/localize.js'; +import { FrigateEvent } from '../types.js'; + +/** + * Convenience function to convert a timestamp to hours, minutes and seconds + * string. Heavily inspired by, and returning the same format as, the Frigate + * UI: https://github.com/blakeblackshear/frigate/blob/master/web/src/components/RecordingPlaylist.jsx#L97 + * @param event The Frigate event. + * @returns A duration string. + */ +export function getEventDurationString(event: FrigateEvent): string { + if (!event.end_time) { + return localize('event.in_progress'); + } + const start = fromUnixTime(event.start_time); + const end = fromUnixTime(event.end_time); + const hours = differenceInHours(end, start); + const minutes = differenceInMinutes(end, start) - hours * 60; + const seconds = differenceInSeconds(end, start) - hours * 60 * 60 - minutes * 60; + let duration = ''; + + if (hours) { + duration += `${hours}h `; + } + if (minutes) { + duration += `${minutes}m `; + } + duration += `${seconds}s`; + return duration; +} diff --git a/src/browse-media-util.ts b/src/utils/ha/browse-media.ts similarity index 96% rename from src/browse-media-util.ts rename to src/utils/ha/browse-media.ts index aa58e3ad..828e4b62 100644 --- a/src/browse-media-util.ts +++ b/src/utils/ha/browse-media.ts @@ -1,21 +1,20 @@ import { HomeAssistant } from 'custom-card-helpers'; - +import { homeAssistantWSRequest } from '.'; import { - BrowseMediaQueryParameters, - FrigateBrowseMediaSource, - CameraConfig, - MEDIA_CLASS_PLAYLIST, - MEDIA_TYPE_PLAYLIST, -} from './types.js'; -import { View } from './view.js'; -import { frigateBrowseMediaSourceSchema } from './types.js'; + dispatchErrorMessageEvent, + dispatchMessageEvent +} from '../../components/message.js'; +import { localize } from '../../localize/localize.js'; import { - dispatchErrorMessageEvent, - dispatchMessageEvent, - getCameraTitle, - homeAssistantWSRequest, -} from './common.js'; -import { localize } from './localize/localize.js'; + BrowseMediaQueryParameters, + CameraConfig, + FrigateBrowseMediaSource, + frigateBrowseMediaSourceSchema, + MEDIA_CLASS_PLAYLIST, + MEDIA_TYPE_PLAYLIST +} from '../../types.js'; +import { View } from '../../view.js'; +import { getCameraTitle } from '../camera.js'; export class BrowseMediaUtil { /** diff --git a/src/utils/ha/index.ts b/src/utils/ha/index.ts new file mode 100644 index 00000000..ebc3d5a7 --- /dev/null +++ b/src/utils/ha/index.ts @@ -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( + hass: HomeAssistant, + schema: ZodSchema, + request: MessageBase, +): Promise { + const response = await hass.callWS(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(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 { + const request = { + type: 'auth/sign_path', + path: path, + expires: expires, + }; + const response = await homeAssistantWSRequest( + 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 => { + 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; +}; diff --git a/src/utils/ha/update.ts b/src/utils/ha/update.ts new file mode 100644 index 00000000..9499b89d --- /dev/null +++ b/src/utils/ha/update.ts @@ -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; diff --git a/src/icons/LICENSE b/src/utils/icons/LICENSE similarity index 100% rename from src/icons/LICENSE rename to src/utils/icons/LICENSE diff --git a/src/icons/README.md b/src/utils/icons/README.md similarity index 100% rename from src/icons/README.md rename to src/utils/icons/README.md diff --git a/src/utils/icons/alarm-panel-icon.ts b/src/utils/icons/alarm-panel-icon.ts new file mode 100644 index 00000000..fd9915fa --- /dev/null +++ b/src/utils/icons/alarm-panel-icon.ts @@ -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'; + } +}; diff --git a/src/utils/icons/binary-sensor-icon.ts b/src/utils/icons/binary-sensor-icon.ts new file mode 100644 index 00000000..ec6a74b2 --- /dev/null +++ b/src/utils/icons/binary-sensor-icon.ts @@ -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'; + } +}; diff --git a/src/utils/icons/cover-icon.ts b/src/utils/icons/cover-icon.ts new file mode 100644 index 00000000..37cd15d6 --- /dev/null +++ b/src/utils/icons/cover-icon.ts @@ -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'; + } +}; diff --git a/src/utils/icons/domain-icon.ts b/src/utils/icons/domain-icon.ts new file mode 100644 index 00000000..3c01bd76 --- /dev/null +++ b/src/utils/icons/domain-icon.ts @@ -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; +} diff --git a/src/utils/icons/sensor-icon.ts b/src/utils/icons/sensor-icon.ts new file mode 100644 index 00000000..885641ef --- /dev/null +++ b/src/utils/icons/sensor-icon.ts @@ -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; +}; diff --git a/src/utils/icons/state-icon.ts b/src/utils/icons/state-icon.ts new file mode 100644 index 00000000..0e45a66d --- /dev/null +++ b/src/utils/icons/state-icon.ts @@ -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); +} diff --git a/src/utils/media-info.ts b/src/utils/media-info.ts new file mode 100644 index 00000000..d5482b51 --- /dev/null +++ b/src/utils/media-info.ts @@ -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(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 + ); +} diff --git a/src/resolved-media.ts b/src/utils/resolved-media.ts similarity index 83% rename from src/resolved-media.ts rename to src/utils/resolved-media.ts index afd3e2ac..47feb58a 100644 --- a/src/resolved-media.ts +++ b/src/utils/resolved-media.ts @@ -1,25 +1,24 @@ import { HomeAssistant } from 'custom-card-helpers'; -import { homeAssistantWSRequest } from './common.js'; -import { - FrigateBrowseMediaSource, - ResolvedMedia, - resolvedMediaSchema, -} from './types.js'; import QuickLRU from 'quick-lru'; +import { + FrigateBrowseMediaSource, + ResolvedMedia, + resolvedMediaSchema +} from '../types.js'; +import { homeAssistantWSRequest } from './ha'; // It's important the cache size be at least as large as the largest likely // media query or media items will from a given query will be evicted for other // items in the same query (which would result in only partial results being // returned to the user). -// Note: Each entry is about 400 bytes. - -const RESOLVED_MEDIA_CACHE_SIZE = 1000; +// Note: Each entry is about 400 bytes. +const RESOLVED_MEDIA_CACHE_SIZE = 1000; export class ResolvedMediaCache { protected _cache: QuickLRU; constructor() { - this._cache = new QuickLRU({maxSize: RESOLVED_MEDIA_CACHE_SIZE}); + this._cache = new QuickLRU({ maxSize: RESOLVED_MEDIA_CACHE_SIZE }); } public has(id: string): boolean { diff --git a/src/zod-util.ts b/src/utils/zod.ts similarity index 80% rename from src/zod-util.ts rename to src/utils/zod.ts index 1d7f6b3b..2298797c 100644 --- a/src/zod-util.ts +++ b/src/utils/zod.ts @@ -46,3 +46,13 @@ export function deepRemoveDefaults(schema: T): any { } return schema; } + +/** + * Get the keys that didn't parse from a ZodError. + * @param error The zoderror to extract the keys from. + * @returns An array of error keys. + */ +export function getParseErrorKeys(error: z.ZodError): string[] { + const errors = error.format(); + return Object.keys(errors).filter((v) => !v.startsWith('_')); +} diff --git a/src/view.ts b/src/view.ts index 243b4873..e73577cb 100644 --- a/src/view.ts +++ b/src/view.ts @@ -1,5 +1,5 @@ import type { FrigateBrowseMediaSource, FrigateCardView } from './types.js'; -import { dispatchFrigateCardEvent } from './common.js'; +import { dispatchFrigateCardEvent } from './utils/basic.js'; // eslint-disable-next-line @typescript-eslint/no-empty-interface export interface ViewContext {}