Rename mediaLoaded to media_loaded

src/card-condition.ts

@@ -14,7 +14,7 @@ export interface ConditionState {
   fullscreen?: boolean;
   camera?: string;
   state?: HassEntities;
-  mediaLoaded?: boolean;
+  media_loaded?: boolean;
 }
 
 class ConditionStateRequestEvent extends Event {
@@ -52,9 +52,9 @@ export function evaluateCondition(
               state.state[stateTest.entity].state !== stateTest.state_not)));
     }
   }
-  if (condition?.mediaLoaded !== undefined) {
+  if (condition?.media_loaded !== undefined) {
     result &&=
-      state.mediaLoaded !== undefined && condition.mediaLoaded == state.mediaLoaded;
+      state.media_loaded !== undefined && condition.media_loaded == state.media_loaded;
   }
   if (condition?.media_query) {
     result &&= window.matchMedia(condition.media_query).matches;

src/card.ts

@@ -285,7 +285,7 @@ export class FrigateCard extends LitElement {
       view: this._view?.view,
       fullscreen: screenfull.isEnabled && screenfull.isFullscreen,
       camera: this._view?.camera,
-      mediaLoaded: !!this._currentMediaLoadedInfo,
+      media_loaded: !!this._currentMediaLoadedInfo,
       ...(this._conditionManager?.hasHAStateConditions && {
         state: this._hass?.states,
       }),

src/config-mgmt.ts

@@ -1,4 +1,4 @@
-import cloneDeep from 'lodash-es/cloneDeep'
+import cloneDeep from 'lodash-es/cloneDeep';
 import get from 'lodash-es/get';
 import isEqual from 'lodash-es/isEqual';
 import set from 'lodash-es/set';
@@ -6,6 +6,7 @@ import {
   CONF_CAMERAS,
   CONF_CAMERAS_ARRAY_CAMERA_ENTITY,
   CONF_CAMERAS_ARRAY_LIVE_PROVIDER,
+  CONF_ELEMENTS,
   CONF_IMAGE_URL,
   CONF_LIVE_AUTO_UNMUTE,
   CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE,
@@ -122,7 +123,7 @@ export const trimConfig = function (obj: RawFrigateCardConfig): boolean {
   for (let i = 0; i < keys.length; i++) {
     const key = keys[i];
     if (typeof obj[key] === 'object' && obj[key] != null) {
-      modified ||= trimConfig(obj[key] as RawFrigateCardConfig);
+      modified = trimConfig(obj[key] as RawFrigateCardConfig) || modified;
 
       if (!Object.keys(obj[key] as RawFrigateCardConfig).length) {
         delete obj[key];
@@ -547,6 +548,56 @@ const upgradeThumbnailShowControlsToIndividualControls = (
   };
 };
 
+/**
+ * Recursively upgrade an object.
+ * @param transform A transform applied to each object recursively.
+ * @param getObject A function to get the object to be upgraded.
+ * @returns An upgrade function.
+ */
+const recursiveUpgradeObject = (
+  transform: (data: RawFrigateCardConfig) => boolean,
+  getObject?: (data: RawFrigateCardConfig) => RawFrigateCardConfig | undefined | null,
+): ((data: RawFrigateCardConfig) => boolean) => {
+  const recurse = (data: RawFrigateCardConfig): boolean => {
+    let result = false;
+    if (data && typeof data === 'object') {
+      const object = getObject ? getObject(data) : data;
+      if (object) {
+        result = transform(object) || result;
+      }
+      if (Array.isArray(data)) {
+        data
+          .filter((item) => typeof item === 'object')
+          .forEach((item: RawFrigateCardConfig) => {
+            result = recurse(item) || result;
+          });
+      } else {
+        Object.keys(data)
+          .filter((key) => typeof data[key] === 'object')
+          .forEach((key) => {
+            result = recurse(data[key] as RawFrigateCardConfig) || result;
+          });
+      }
+    }
+    return result;
+  };
+  return recurse;
+};
+
+/**
+ * Transform mediaLoaded -> media_loaded
+ * @param data Input data.
+ * @returns `true` if the configuration was modified.
+ */
+const transformConditionMediaLoaded = (data: unknown): boolean => {
+  if (typeof data === 'object' && data && data['mediaLoaded'] !== undefined) {
+    data['media_loaded'] = data['mediaLoaded'];
+    delete data['mediaLoaded'];
+    return true;
+  }
+  return false;
+};
+
 const UPGRADES = [
   // v1.2.1 -> v2.0.0
   upgradeMoveTo('frigate_url', 'frigate.url'),
@@ -645,4 +696,17 @@ const UPGRADES = [
   upgradeThumbnailShowControlsToIndividualControls('media_viewer.controls.thumbnails'),
   upgradeThumbnailShowControlsToIndividualControls('live.controls.thumbnails'),
   upgradeThumbnailShowControlsToIndividualControls('timeline.controls.thumbnails'),
+
+  // v4.0.0 -> v4.1.0
+  upgradeArrayValue(
+    CONF_OVERRIDES,
+    transformConditionMediaLoaded,
+    (data) => data.conditions as RawFrigateCardConfig | undefined,
+  ),
+  (data: unknown): boolean => {
+    return recursiveUpgradeObject(
+      transformConditionMediaLoaded,
+      (data) => data.conditions as RawFrigateCardConfig | undefined,
+    )(typeof data === 'object' && data ? data[CONF_ELEMENTS] : {});
+  },
 ];

src/const.ts

@@ -33,6 +33,8 @@ export const CONF_CAMERAS_ARRAY_TRIGGERS_OCCUPANCY =
 export const CONF_CAMERAS_ARRAY_TRIGGERS_ENTITIES =
   `${CONF_CAMERAS}.#.triggers.entities` as const;
 
+export const CONF_ELEMENTS = 'elements' as const;
+
 export const CONF_VIEW = 'view' as const;
 export const CONF_VIEW_CAMERA_SELECT = `${CONF_VIEW}.camera_select` as const;
 export const CONF_VIEW_DARK_MODE = `${CONF_VIEW}.dark_mode` as const;

src/types.ts

@@ -500,7 +500,7 @@ const frigateCardConditionSchema = z.object({
   view: z.string().array().optional(),
   fullscreen: z.boolean().optional(),
   camera: z.string().array().optional(),
-  mediaLoaded: z.boolean().optional(),
+  media_loaded: z.boolean().optional(),
   state: stateConditions.optional(),
   media_query: z.string().optional(),
 });