Recalculate grid for a slot change.

src/components/media-grid.ts

@@ -1,5 +1,8 @@
 // TODO: Video scanning not select other camera?
 // TODO: Drag from live results in different cameras being shown in timeline in media viewer?
+// TODO: It's possible to get a single entry in the grid, rendered without the
+// grid (correctly), but still with isGrid so the menu button still shows the
+// take it out of grid mode option.
 
 import {
   CSSResultGroup,
@@ -43,6 +46,7 @@ export class FrigateCardMediaGrid extends LitElement {
     if (!this._controller && this._refSlot.value) {
       this._controller = new MediaGridController(this._refSlot.value, {
         selected: this.selected,
+        displayConfig: this.displayConfig,
       });
     }
 

src/components/timeline-core.ts

@@ -48,6 +48,7 @@ import {
   dispatchFrigateCardEvent,
   formatDateAndTime,
   isHoverableDevice,
+  isTruthy,
   setOrRemoveAttribute,
 } from '../utils/basic';
 import {
@@ -485,10 +486,13 @@ export class FrigateCardTimelineCore extends LitElement {
         : results
             .clone()
             .resetSelectedResult()
-            .selectBestResult((media) => findBestMediaIndex(media, targetTime), {
-              allCameras: true,
-              main: true,
-            });
+            .selectBestResult(
+              (media) => findBestMediaIndex(media, targetTime, this.view?.camera),
+              {
+                allCameras: true,
+                main: true,
+              },
+            );
 
     const desiredView: FrigateCardView = this.mini
       ? targetTime >= new Date()
@@ -899,8 +903,7 @@ export class FrigateCardTimelineCore extends LitElement {
             maxItems: this.timelineConfig.clustering_threshold,
 
             clusterCriteria: (first: TimelineItem, second: TimelineItem): boolean => {
-              const media = this.view?.queryResults?.getSelectedResult();
-              const selectedId = media?.getID();
+              const selectedIDs = this._getAllSelectedMediaIDsFromView();
               const firstMedia = (<FrigateCardTimelineItem>first).media;
               const secondMedia = (<FrigateCardTimelineItem>second).media;
 
@@ -910,8 +913,8 @@ export class FrigateCardTimelineCore extends LitElement {
               return (
                 first.type !== 'background' &&
                 first.type === second.type &&
-                first.id !== selectedId &&
-                second.id !== selectedId &&
+                !selectedIDs.includes(first.id) &&
+                !selectedIDs.includes(second.id) &&
                 !!firstMedia &&
                 !!secondMedia &&
                 ViewMediaClassifier.isEvent(firstMedia) &&
@@ -966,6 +969,18 @@ export class FrigateCardTimelineCore extends LitElement {
     return !!this.hass && !!this.cameraManager;
   }
 
+  protected _getAllSelectedMediaIDsFromView(): IdType[] {
+    return (
+      this.view?.queryResults?.getMultipleSelectedResults({
+        main: true,
+        ...(this.view.isGrid() && { allCameras: true }),
+      }) ?? []
+    )
+      .filter((media) => ViewMediaClassifier.isEvent(media))
+      .map((media) => media.getID())
+      .filter(isTruthy);
+  }
+
   /**
    * Update the timeline from the view object.
    */
@@ -1030,8 +1045,11 @@ export class FrigateCardTimelineCore extends LitElement {
     }
 
     const currentSelection = this._timeline.getSelection();
-    const mediaID = media?.getID();
-    const needToSelect = mediaID && mediaIsEvent && !currentSelection.includes(mediaID);
+    const mediaIDsToSelect = this._getAllSelectedMediaIDsFromView();
+
+    const needToSelect = mediaIDsToSelect.some(
+      (mediaID) => !currentSelection.includes(mediaID),
+    );
 
     if (needToSelect) {
       if (this._isClustering()) {
@@ -1039,12 +1057,14 @@ export class FrigateCardTimelineCore extends LitElement {
         // update the dataset to ensure the newly selected item cannot be included
         // in a cluster.
 
-        // Need to this rewrite prior to setting the selection (just below), or
-        // the selection will be lost on rewrite.
-        this._timelineSource?.rewriteEvent(mediaID);
+        for (const mediaID of mediaIDsToSelect) {
+          // Need to this rewrite prior to setting the selection (just below), or
+          // the selection will be lost on rewrite.
+          this._timelineSource?.rewriteEvent(mediaID);
+        }
       }
 
-      this._timeline?.setSelection([mediaID], {
+      this._timeline?.setSelection(mediaIDsToSelect, {
         focus: false,
         animation: {
           animation: false,

src/components/viewer.ts

@@ -14,7 +14,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { createRef, Ref, ref } from 'lit/directives/ref.js';
 import basicBlockStyle from '../scss/basic-block.scss';
 import { CameraManager } from '../camera-manager/manager.js';
-import { dispatchMessageEvent, renderProgressIndicator } from '../components/message.js';
+import { dispatchMessageEvent, renderMessage, renderProgressIndicator } from '../components/message.js';
 import { localize } from '../localize/localize.js';
 import '../patches/ha-hls-player';
 import viewerCarouselStyle from '../scss/viewer-carousel.scss';
@@ -136,7 +136,14 @@ export class FrigateCardViewer extends LitElement {
       // timeline).
       const mediaType = this.view.getDefaultMediaType();
       if (!mediaType) {
-        return;
+        // Directly render an error message (instead of dispatching it upwards)
+        // to preserve the mini-timeline if the user scans into an area with no
+        // media.
+        return renderMessage({
+          type: 'info',
+          message: localize('common.no_media'),
+          icon: 'mdi:multimedia',
+        });
       }
 
       if (mediaType === 'recordings') {