fix: Unparseable config when using the low-performance profile (#1570)

* The `low-performance` profile itself had parse errors: fix them!
* Do not silently swallow override parse errors, they are always a user issue
* Minor error message rendering improvements to show multiple pieces of context

src/card-controller/conditions-manager.ts

@@ -1,6 +1,6 @@
 import { CurrentUser } from '@dermotduffy/custom-card-helpers';
 import { HassEntities } from 'home-assistant-js-websocket';
-import { isEqual } from 'lodash-es';
+import isEqual from 'lodash-es/isEqual';
 import merge from 'lodash-es/merge';
 import { ZodSchema } from 'zod';
 import {
@@ -16,6 +16,8 @@ import {
   RawFrigateCardConfig,
   ViewDisplayMode,
 } from '../config/types';
+import { localize } from '../localize/localize';
+import { FrigateCardError } from '../types';
 import { desparsifyArrays } from '../utils/basic';
 import { CardConditionAPI, KeysState } from './types';
 
@@ -39,6 +41,8 @@ interface ConditionState {
   keys?: KeysState;
 }
 
+class OverrideConfigurationError extends FrigateCardError {}
+
 export class ConditionsEvaluateRequestEvent extends Event {
   public conditions: FrigateCardCondition[];
   public evaluation?: boolean;
@@ -82,16 +86,15 @@ export function evaluateConditionViaEvent(
   return evaluateEvent.evaluation ?? false;
 }
 
-export function getOverriddenConfig(
+export function getOverriddenConfig<RT extends RawFrigateCardConfig>(
   manager: Readonly<ConditionsManager>,
-  config: Readonly<RawFrigateCardConfig>,
+  config: Readonly<RT>,
   options?: {
     configOverrides?: Readonly<Overrides>;
     stateOverrides?: Partial<ConditionState>;
     schema?: ZodSchema;
-    logOnParseError?: boolean;
   },
-): RawFrigateCardConfig {
+): RT {
   let output = copyConfig(config);
   let overridden = false;
   if (options?.configOverrides) {
@@ -132,14 +135,13 @@ export function getOverriddenConfig(
 
   if (options?.schema) {
     const parseResult = options.schema.safeParse(output);
-    if (options.logOnParseError && !parseResult.success) {
-      console.warn(
-        `Cannot parse overridden configuration`,
-        output,
-        parseResult.error.message,
+    if (!parseResult.success) {
+      throw new OverrideConfigurationError(
+        localize('error.invalid_configuration_override'),
+        [parseResult.error.errors, output],
       );
     }
-    return parseResult.success ? parseResult.data : config;
+    return parseResult.data;
   }
   return output;
 }

src/card-controller/config/config-manager.ts

@@ -113,11 +113,17 @@ export class ConfigManager {
     if (!this._config) {
       return;
     }
-    const overriddenConfig = getOverriddenConfig(conditionsManager, this._config, {
-      configOverrides: this._config.overrides,
-      schema: frigateCardConfigSchema,
-      logOnParseError: !!this.getCardWideConfig()?.debug?.logging,
-    }) as FrigateCardConfig;
+
+    let overriddenConfig: FrigateCardConfig | null = null;
+    try {
+      overriddenConfig = getOverriddenConfig(conditionsManager, this._config, {
+        configOverrides: this._config.overrides,
+        schema: frigateCardConfigSchema,
+      });
+    } catch (ev) {
+      this._api.getMessageManager().setErrorIfHigherPriority(ev);
+      return;
+    }
 
     // Save on Lit re-rendering costs by only updating the configuration if it
     // actually changes.

src/card-controller/default-manager.ts

@@ -1,4 +1,4 @@
-import { isEqual } from 'lodash-es';
+import isEqual from 'lodash-es/isEqual';
 import { FrigateCardConfig } from '../config/types';
 import { createGeneralAction } from '../utils/action';
 import { isActionAllowedBasedOnInteractionState } from '../utils/interaction-mode';

src/card-controller/status-bar-item-manager.ts

@@ -1,4 +1,4 @@
-import { isEqual } from 'lodash-es';
+import isEqual from 'lodash-es/isEqual';
 import { CameraManager } from '../camera-manager/manager';
 import { StatusBarConfig, StatusBarItem } from '../config/types';
 import { MediaLoadedInfo } from '../types';

src/components-lib/status-bar-controller.ts

@@ -1,6 +1,7 @@
 import { HASSDomEvent } from '@dermotduffy/custom-card-helpers';
 import { LitElement } from 'lit';
-import { isEqual, orderBy } from 'lodash-es';
+import isEqual from 'lodash-es/isEqual';
+import orderBy from 'lodash-es/orderBy';
 import { dispatchActionExecutionRequest } from '../card-controller/actions/utils/execution-request';
 import {
   ActionsConfig,

src/components/live/live.ts

@@ -21,6 +21,7 @@ import {
 import { ReadonlyMicrophoneManager } from '../../card-controller/microphone-manager.js';
 import { ViewManagerEpoch } from '../../card-controller/view/types.js';
 import { LiveController } from '../../components-lib/live/live-controller.js';
+import { MediaActionsController } from '../../components-lib/media-actions-controller.js';
 import { MediaGridSelected } from '../../components-lib/media-grid-controller.js';
 import {
   PartialZoomSettings,
@@ -56,12 +57,11 @@ import { playMediaMutingIfNecessary } from '../../utils/media.js';
 import { getStreamCameraID } from '../../utils/substream.js';
 import { View } from '../../view/view.js';
 import { EmblaCarouselPlugins } from '../carousel.js';
-import { renderMessage } from '../message.js';
+import { dispatchFrigateCardErrorEvent, renderMessage } from '../message.js';
 import '../next-prev-control.js';
 import '../ptz.js';
 import { FrigateCardPTZ } from '../ptz.js';
 import '../surround.js';
-import { MediaActionsController } from '../../components-lib/media-actions-controller.js';
 
 const FRIGATE_CARD_LIVE_PROVIDER = 'frigate-card-live-provider';
 
@@ -483,20 +483,26 @@ export class FrigateCardLiveCarousel extends LitElement {
     ) {
       return;
     }
-    // The condition controller object contains the currently live camera, which
-    // (in the carousel for example) is not necessarily the live camera *this*
-    // <frigate-card-live-provider> is rendering right now, so we provide a
-    // stateOverride to evaluate the condition in that context.
-    const liveConfig = getOverriddenConfig(
-      this.conditionsManagerEpoch.manager,
-      { live: this.nonOverriddenLiveConfig },
-      {
-        configOverrides: this.overrides,
-        stateOverrides: { camera: cameraID },
-        schema: liveConfigAbsoluteRootSchema,
-        logOnParseError: !!this.cardWideConfig?.debug?.logging,
-      },
-    ).live as LiveConfig;
+
+    let liveConfig: LiveConfig | null = null;
+
+    try {
+      // The condition controller object contains the currently live camera, which
+      // (in the carousel for example) is not necessarily the live camera *this*
+      // <frigate-card-live-provider> is rendering right now, so we provide a
+      // stateOverride to evaluate the condition in that context.
+      liveConfig = getOverriddenConfig(
+        this.conditionsManagerEpoch.manager,
+        { live: this.nonOverriddenLiveConfig },
+        {
+          configOverrides: this.overrides,
+          stateOverrides: { camera: cameraID },
+          schema: liveConfigAbsoluteRootSchema,
+        },
+      ).live;
+    } catch (ev) {
+      return dispatchFrigateCardErrorEvent(this, ev);
+    }
 
     const cameraMetadata = this.cameraManager.getCameraMetadata(cameraID);
     const view = this.viewManagerEpoch?.manager.getView();

src/components/message.ts

@@ -30,6 +30,11 @@ export class FrigateCardMessage extends LitElement {
     const classes = {
       dotdotdot: !!this.dotdotdot,
     };
+
+    const renderContext = (contextItem: unknown): TemplateResult => {
+      return html`<pre>${yaml.dump(contextItem)}</pre>`;
+    };
+
     return html` <div class="wrapper">
       <div class="message padded">
         <div class="icon">
@@ -43,9 +48,11 @@ export class FrigateCardMessage extends LitElement {
                   : ''}`
               : ''}
           </span>
-          ${this.context && typeof this.context === 'object'
-            ? html`<pre>${yaml.dump(this.context)}</pre>`
-            : ''}
+          ${this.context && Array.isArray(this.context)
+            ? this.context.map((contextItem) => renderContext(contextItem))
+            : typeof this.context === 'object'
+              ? renderContext(this.context)
+              : ''}
         </div>
       </div>
     </div>`;

src/config/profiles/low-performance.ts

@@ -61,13 +61,13 @@ export const LOW_PERFORMANCE_PROFILE = {
   [CONF_TIMELINE_SHOW_RECORDINGS]: false,
 
   // Take no automatic media actions.
-  [CONF_LIVE_AUTO_MUTE]: 'never' as const,
-  [CONF_MEDIA_VIEWER_AUTO_PLAY]: 'never' as const,
-  [CONF_MEDIA_VIEWER_AUTO_PAUSE]: 'never' as const,
-  [CONF_MEDIA_VIEWER_AUTO_MUTE]: 'never' as const,
+  [CONF_LIVE_AUTO_MUTE]: [],
+  [CONF_MEDIA_VIEWER_AUTO_PLAY]: [],
+  [CONF_MEDIA_VIEWER_AUTO_PAUSE]: [],
+  [CONF_MEDIA_VIEWER_AUTO_MUTE]: [],
 
   // Always unload resources that are lazily loaded.
-  [CONF_LIVE_LAZY_UNLOAD]: 'all' as const,
+  [CONF_LIVE_LAZY_UNLOAD]: ['unselected', 'hidden'],
 
   // Media carousels do not drag.
   [CONF_LIVE_DRAGGABLE]: false,

src/localize/languages/ca.json

@@ -586,6 +586,7 @@
     "image_load_error": "No s'ha pogut carregar la imatge",
     "invalid_configuration": "Configuració no vàlida",
     "invalid_configuration_no_hint": "No hi ha cap indicació d'ubicació disponible (tipus dolent o faltant?)",
+    "invalid_configuration_override": "",
     "invalid_elements_config": "La configuració dels elements de la imatge no és vàlida",
     "invalid_response": "S'ha rebut una resposta no vàlida de Home Assistant per a la sol·licitud",
     "jsmpeg_no_player": "No s'ha pogut iniciar el reproductor JSMPEG",

src/localize/languages/en.json

@@ -585,6 +585,7 @@
     "failed_sign": "Could not sign Home Assistant URL",
     "image_load_error": "The image could not be loaded",
     "invalid_configuration": "Invalid configuration",
+    "invalid_configuration_override": "Invalid override configuration",
     "invalid_configuration_no_hint": "No location hint available (bad or missing type?)",
     "invalid_elements_config": "Invalid picture elements configuration",
     "invalid_response": "Received invalid response from Home Assistant for request",

src/localize/languages/fr.json

@@ -586,6 +586,7 @@
     "image_load_error": "L'image n'a pas pu être chargée",
     "invalid_configuration": "Configuration invalide",
     "invalid_configuration_no_hint": "Aucune indication de localisation disponible (type incorrect ou manquant ?)",
+    "invalid_configuration_override": "",
     "invalid_elements_config": "Configuration des éléments d'image invalide",
     "invalid_response": "Réponse non valide reçue de Home Assistant pour la demande",
     "jsmpeg_no_player": "Impossible de démarrer le lecteur JSMPEG",

src/localize/languages/it.json

@@ -586,6 +586,7 @@
     "image_load_error": "L'immagine non può essere caricata",
     "invalid_configuration": "Configurazione non valida",
     "invalid_configuration_no_hint": "Nessun suggerimento di posizione disponibile (tipo difettoso o mancante?)",
+    "invalid_configuration_override": "",
     "invalid_elements_config": "Configurazione degli elementi di immagine non valida",
     "invalid_response": "Ricevuta una risposta non valida da Home Assistant per la richiesta",
     "jsmpeg_no_player": "Impossibile avviare JSMPEG Player",

src/localize/languages/pt-BR.json

@@ -586,6 +586,7 @@
     "image_load_error": "A imagem não pôde ser carregada",
     "invalid_configuration": "Configuração inválida",
     "invalid_configuration_no_hint": "Nenhuma dica de local disponível (tipo incorreto ou ausente?)",
+    "invalid_configuration_override": "",
     "invalid_elements_config": "Configuração de elementos de imagem inválida",
     "invalid_response": "Resposta inválida recebida do Home Assistant para a solicitação",
     "jsmpeg_no_player": "Não foi possível iniciar o player JSMPEG",

src/localize/languages/pt-PT.json

@@ -586,6 +586,7 @@
     "image_load_error": "A imagem não pôde ser carregada",
     "invalid_configuration": "Configuração inválida",
     "invalid_configuration_no_hint": "Nenhuma dica de local disponível (tipo incorreto ou ausente?)",
+    "invalid_configuration_override": "",
     "invalid_elements_config": "Configuração de elementos de imagem inválida",
     "invalid_response": "Resposta inválida recebida do Home Assistant para a solicitação",
     "jsmpeg_no_player": "Não foi possível iniciar o player JSMPEG",

src/scss/message.scss

@@ -58,4 +58,6 @@ div.message div.icon {
 .message pre {
   margin-top: 20px;
   overflow-x: auto;
+  border: 1px dotted var(--divider-color);
+  padding: 1em;
 }