Recalculate grid for a slot change.

tests/utils/media-grid-controller.test.ts

@@ -63,7 +63,7 @@ const createSlotParent = (): HTMLElement => {
 const createSlotHost = (options?: {
   children?: HTMLElement[];
   parent?: HTMLElement;
-}): HTMLElement => {
+}): HTMLSlotElement => {
   const parent = options?.parent ?? createSlotParent();
   const slot = document.createElement('slot');
   parent.shadowRoot?.append(slot);
@@ -292,6 +292,32 @@ describe('MediaGridController', () => {
     expect(controller.getSelected()).toBeNull();
   });
 
+  it('should replace children of a slot when they change', () => {
+    const children = createChildren();
+    const slotParent = createSlotParent();
+    const host = createSlotHost({ children: children, parent: slotParent });
+
+    const controller = createController(host, { selected: '1' });
+
+    expect(controller.getSelected()).toBe('1');
+    expect(controller.getGridSize()).toBe(3);
+
+    children.forEach((child) => slotParent.removeChild(child));
+    const newChildren = createChildren(['one', 'two', 'three']);
+    newChildren.forEach((child) => slotParent.append(child));
+
+    host.dispatchEvent(new Event('slotchange'));
+
+    expect(controller.getGridContents()).toEqual(
+      new Map([
+        ['one', newChildren[0]],
+        ['two', newChildren[1]],
+        ['three', newChildren[2]],
+      ]),
+    );
+    expect(controller.getSelected()).toBeNull();
+  });
+
   it('should construct masonry correctly', () => {
     const children = createChildren();
     const host = createHost({ children: children });

tests/utils/media-to-view.test.ts

@@ -54,11 +54,13 @@ const generateViewMedia = (
   index: number,
   base: Date,
   durationSeconds: number,
+  cameraID?: string,
 ): ViewMedia => {
   return new TestViewMedia({
     id: `id-${index}`,
     startTime: base,
     endTime: add(base, { seconds: durationSeconds }),
+    ...(cameraID && { cameraID: cameraID }),
   });
 };
 
@@ -449,4 +451,21 @@ describe('findBestMediaIndex', () => {
 
     expect(findBestMediaIndex(mediaArray, add(now, { seconds: 30 }))).toBe(1);
   });
+
+  it('should find best media index respecting favored cameraID', async () => {
+    const now = new Date();
+    const mediaArray = [
+      generateViewMedia(0, now, 60, 'less-good-camera'),
+      generateViewMedia(1, now, 120, 'less-good-camera'),
+      generateViewMedia(2, now, 10, 'favored-camera'),
+      generateViewMedia(3, now, 35, 'favored-camera'),
+      generateViewMedia(4, now, 40, 'favored-camera'),
+      generateViewMedia(5, now, 30, 'favored-camera'),
+      generateViewMedia(6, now, 300, 'less-good-camera'),
+    ];
+
+    expect(
+      findBestMediaIndex(mediaArray, add(now, { seconds: 30 }), 'favored-camera'),
+    ).toBe(4);
+  });
 });