Recalculate timeline cameras when display mode changes.

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,

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;
     }

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,