From 07bc6391ec524244fadc3abbfb468879785c176b Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Mon, 4 Sep 2023 19:51:15 -0700
Subject: [PATCH] Recalculate timeline cameras when display mode changes.

---
 src/components/media-grid.ts    |  2 --
 src/components/surround.ts      | 10 ++++++----
 src/components/timeline-core.ts |  2 --
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/media-grid.ts b/src/components/media-grid.ts
index 70a7bc69..913e1aa7 100644
--- a/src/components/media-grid.ts
+++ b/src/components/media-grid.ts
@@ -1,5 +1,3 @@
-// TODO: Live non-grid -> live grid -> timeline is different from when the timeline is dragged.
-
 import {
   CSSResultGroup,
   html,
diff --git a/src/components/surround.ts b/src/components/surround.ts
index ef4a3995..cdd95ce1 100644
--- a/src/components/surround.ts
+++ b/src/components/surround.ts
@@ -113,12 +113,14 @@ export class FrigateCardSurround extends LitElement {
       import('./timeline.js');
     }
 
-    // Only reset the timeline cameraIDs when the media materially changes (and
-    // not on every view change, since the view will change frequently when the
-    // user is scrubbing video).
+    // Only reset the timeline cameraIDs when the media or display mode
+    // materially changes (and not on every view change, since the view will
+    // change frequently when the user is scrubbing video).
+    const oldView = changedProperties.get('view');
     if (
       changedProperties.has('view') &&
-      View.isMajorMediaChange(changedProperties.get('view'), this.view)
+      (View.isMajorMediaChange(oldView, this.view) ||
+        oldView.displayMode !== this.view?.displayMode)
     ) {
       this._cameraIDsForTimeline = this._getCameraIDsForTimeline() ?? undefined;
     }
diff --git a/src/components/timeline-core.ts b/src/components/timeline-core.ts
index 126ea111..25dcc462 100644
--- a/src/components/timeline-core.ts
+++ b/src/components/timeline-core.ts
@@ -1221,8 +1221,6 @@ export class FrigateCardTimelineCore extends LitElement {
         createdTimeline = true;
         const noGroups = this.mini && groups.length === 1;
         if (noGroups) {
-          // In a mini timeline, if there's only one group don't bother grouping
-          // at all.
           this._timeline = new Timeline(
             this._refTimeline.value,
             this._timelineSource.dataset,