perf: Change media fetches to be asynchronous to view render (#1702)

This is a fairly non-trivial change in terms of consequence, so a greater than average chance something breaks. This is necessary since some cameras (e.g. Reolink) are materially slower to fetch media, and this change substantially improves card responsiveness.

tests/card-controller/view/modifiers/index.test.ts

@@ -0,0 +1,32 @@
+import { expect, it } from 'vitest';
+import { applyViewModifiers } from '../../../../src/card-controller/view/modifiers';
+import { MergeContextViewModifier } from '../../../../src/card-controller/view/modifiers/merge-context';
+import { SetQueryViewModifier } from '../../../../src/card-controller/view/modifiers/set-query';
+import { EventMediaQueries } from '../../../../src/view/media-queries';
+import { MediaQueriesResults } from '../../../../src/view/media-queries-results';
+import { createView } from '../../../test-utils';
+
+it('should apply view modifiers', () => {
+  const view = createView();
+
+  const query = new EventMediaQueries();
+  const queryResults = new MediaQueriesResults();
+
+  const context = {
+    timeline: { window: { start: new Date(), end: new Date() } },
+  };
+
+  const modifiers = [
+    new SetQueryViewModifier({
+      query: query,
+      queryResults: queryResults,
+    }),
+    new MergeContextViewModifier(context),
+  ];
+
+  applyViewModifiers(view, modifiers);
+
+  expect(view.query).toBe(query);
+  expect(view.queryResults).toBe(queryResults);
+  expect(view.context).toEqual(context);
+});

tests/card-controller/view/modifiers/set-query.test.ts

@@ -0,0 +1,30 @@
+import { expect, it } from 'vitest';
+import { SetQueryViewModifier } from '../../../../src/card-controller/view/modifiers/set-query';
+import { createView } from '../../../test-utils';
+import { EventMediaQueries } from '../../../../src/view/media-queries';
+import { MediaQueriesResults } from '../../../../src/view/media-queries-results';
+
+it('should do nothing without arguments', () => {
+  const view = createView();
+
+  const modifier = new SetQueryViewModifier();
+  modifier.modify(view);
+
+  expect(view.query).toBeNull();
+  expect(view.queryResults).toBeNull();
+});
+
+it('should set query and results', () => {
+  const view = createView();
+  const query = new EventMediaQueries();
+  const queryResults = new MediaQueriesResults();
+
+  const modifier = new SetQueryViewModifier({
+    query: query,
+    queryResults: queryResults,
+  });
+  modifier.modify(view);
+
+  expect(view.query).toBe(query);
+  expect(view.queryResults).toBe(queryResults);
+});