Correctly calculate cameraIDs to display.

src/components/surround.ts

@@ -21,6 +21,7 @@ import { View } from '../view/view.js';
 import { ThumbnailCarouselTap } from './thumbnail-carousel.js';
 import './surround-basic.js';
 import { changeViewToRecentEventsForCameraAndDependents } from '../utils/media-to-view';
+import { getAllDependentCameras } from '../utils/camera.js';
 
 interface ThumbnailViewContext {
   // Whether or not to fetch thumbnails.
@@ -124,12 +125,25 @@ export class FrigateCardSurround extends LitElement {
     }
   }
 
+  protected _getCameraIDsForView(): Set<string> | null {
+    if (!this.view || !this.cameras) {
+      return null;
+    }
+    if (this.view?.is('live')) {
+      return getAllDependentCameras(this.cameras, this.view.camera);
+    }
+    if (this.view.isViewerView()) {
+      return new Set(this.view.queryResults?.getResults()?.map((media) => media.getCameraID()));
+    }
+    return null;
+  }
+
   /**
    * Master render method.
    * @returns A rendered template.
    */
   protected render(): TemplateResult | void {
-    if (!this.hass || !this.view || !this.thumbnailConfig) {
+    if (!this.hass || !this.view || !this.thumbnailConfig || !this.cameras) {
       return;
     }
 
@@ -191,6 +205,7 @@ export class FrigateCardSurround extends LitElement {
             .hass=${this.hass}
             .view=${this.view}
             .cameras=${this.cameras}
+            .cameraIDs=${this._getCameraIDsForView() ?? undefined}
             .mini=${true}
             .timelineConfig=${this.timelineConfig}
             .thumbnailDetails=${this.thumbnailConfig?.show_details}

src/components/timeline-core.ts

@@ -179,11 +179,16 @@ export class FrigateCardTimelineCore extends LitElement {
   @property({ attribute: false })
   public thumbnailSize?: number;
 
-  // Whether or not this is a mini-timeline for a different view (e.g. media
+  // Whether or not this is a mini-timeline (in mini-mode the component takes a
-  // viewer).
+  // supportive role for other views).
   @property({ attribute: true, type: Boolean, reflect: true })
   public mini = false;
 
+  // Which cameraIDs to include in the timeline. If not specified, all cameraIDs
+  // are shown.
+  @property({ attribute: false })
+  public  cameraIDs?: Set<string>;
+
   @property({ attribute: false })
   public cameraManager?: CameraManager;
 
@@ -282,10 +287,7 @@ export class FrigateCardTimelineCore extends LitElement {
    * @returns A set of camera ids (may be empty).
    */
   protected _getTimelineCameraIDs(): Set<string> {
-    if (!this.mini || !this.cameras) {
+    return this.cameraIDs ?? this._getAllCameraIDs();
-      return this._getAllCameraIDs();
-    }
-    return getAllDependentCameras(this.cameras, this.view?.camera);
   }
 
   /**
@@ -1068,10 +1070,7 @@ export class FrigateCardTimelineCore extends LitElement {
       this._refTimeline.value &&
       options &&
       this.timelineConfig &&
-      (changedProperties.has('timelineConfig') ||
+      (changedProperties.has('timelineConfig') || changedProperties.has('cameraIDs'))
-        (this.mini &&
-          changedProperties.has('view') &&
-          this.view?.camera !== changedProperties.get('view').camera))
     ) {
       if (this._timeline) {
         this._destroy();