Add support for pre-defined zoom/pan settings.

src/utils/action.ts

@@ -102,6 +102,27 @@ export function createFrigateCardShowPTZAction(
   };
 }
 
+export function createFrigateCardChangeZoomAction(
+  targetID: string,
+  options?: {
+    cardID?: string;
+    pan?: {
+      x?: number;
+      y?: number;
+    };
+    zoom?: number;
+  },
+): FrigateCardCustomAction {
+  return {
+    action: 'fire-dom-event',
+    frigate_card_action: 'change_zoom',
+    target_id: targetID,
+    ...(options?.cardID && { card_id: options.cardID }),
+    ...(options?.pan && { pan: options.pan }),
+    ...(options?.zoom && { zoom: options.zoom }),
+  };
+}
+
 /**
  * Get an action configuration given a config and an interaction (e.g. 'tap').
  * @param interaction The interaction: `tap`, `hold` or `double_tap`

src/utils/basic.ts

@@ -3,7 +3,8 @@ import differenceInMinutes from 'date-fns/differenceInMinutes';
 import differenceInSeconds from 'date-fns/differenceInSeconds';
 import format from 'date-fns/format';
 import { StyleInfo } from 'lit/directives/style-map';
-import isEqual from 'lodash-es/isEqual';
+import { round } from 'lodash-es';
+import isEqualWith from 'lodash-es/isEqualWith';
 import mergeWith from 'lodash-es/mergeWith';
 import { FrigateCardError } from '../types';
 
@@ -87,8 +88,12 @@ export const setify = <T>(value: T | T[] | Set<T>): Set<T> => {
  * @param o The old value.
  * @returns `true` is the contents have changed.
  */
-export function contentsChanged(n: unknown, o: unknown): boolean {
-  return !isEqual(n, o);
+export function contentsChanged(
+  n: unknown,
+  o: unknown,
+  customizer?: (a: unknown, b: unknown) => boolean | undefined,
+): boolean {
+  return !isEqualWith(n, o, customizer);
 }
 
 /**
@@ -286,3 +291,24 @@ export const desparsifyArrays = <T>(data: T): T => {
   }
   return data;
 };
+
+export const arefloatsApproximatelyEqual = (
+  a: number,
+  b: number,
+  precision?: number,
+): boolean => {
+  return round(a, precision) === round(b, precision);
+};
+
+/**
+ * Create a lodash isEqualsWith customizer that can compare floats.
+ */
+export const generateFloatApproximatelyEqualsCustomizer = (
+  precision: number,
+): ((a: unknown, b: unknown) => boolean | undefined) => {
+  return (a: unknown, b: unknown) => {
+    return typeof a === 'number' && typeof b === 'number'
+      ? arefloatsApproximatelyEqual(a, b, precision)
+      : undefined;
+  };
+};