fix: Timeline window should match selected events for media views (#1555)

src/card-controller/view/factory.ts

@@ -245,7 +245,6 @@ export class ViewFactory {
     } else {
       switch (view.view) {
         case 'live':
-          this._setTimelineWindowToLive(view);
           if (config.live.controls.thumbnails.mode !== 'none') {
             await executeMediaQuery(
               config.live.controls.thumbnails.media_type === 'recordings'
@@ -282,6 +281,7 @@ export class ViewFactory {
       }
     }
 
+    this._setOrRemoveTimelineWindow(view);
     this._setOrRemoveSeekTime(
       view,
       options?.queryExecutorOptions?.selectResult?.time?.time,
@@ -289,7 +289,10 @@ export class ViewFactory {
     return view;
   }
 
-  protected _setTimelineWindowToLive(view: View): void {
+  protected _setOrRemoveTimelineWindow(view: View): void {
+    if (view.is('live')) {
+      // For live views, always force the timeline to now, regardless of
+      // presence or not of events.
       const now = new Date();
       const liveConfig = this._api.getConfigManager().getConfig()?.live;
 
@@ -312,6 +315,11 @@ export class ViewFactory {
           },
         },
       });
+    } else {
+      // For non-live views stick to default timeline behavior (will select and
+      // scroll to event).
+      view.removeContextProperty('timeline', 'window');
+    }
   }
 
   protected _setOrRemoveSeekTime(view: View, time?: Date): void {

tests/card-controller/view/factory.test.ts

@@ -17,6 +17,7 @@ import {
   createCardAPI,
   createConfig,
   createStore,
+  createView,
 } from '../../test-utils';
 import { createPopulatedAPI } from './test-utils';
 
@@ -340,7 +341,8 @@ describe('getViewByParametersWithNewQuery', () => {
       vi.useRealTimers();
     });
 
-    it('should set timeline window', async () => {
+    describe('should set timeline window', async () => {
+      it('should set timeline to now for live views', async () => {
         const executor = mock<QueryExecutor>();
         const factory = new ViewFactory(createPopulatedAPI(), executor);
         const view = await factory.getViewByParametersWithNewQuery({
@@ -359,6 +361,29 @@ describe('getViewByParametersWithNewQuery', () => {
         });
       });
 
+      it('should unset timeline for non-live views', async () => {
+        const executor = mock<QueryExecutor>();
+        const factory = new ViewFactory(createPopulatedAPI(), executor);
+        const view = await factory.getViewByParametersWithNewQuery({
+          baseView: createView({
+            context: {
+              timeline: {
+                window: {
+                  start: new Date('2024-07-21T12:22:06.000Z'),
+                  end: new Date('2024-07-21T13:22:06.000Z'),
+                },
+              },
+            },
+          }),
+          params: {
+            view: 'clip',
+          },
+        });
+
+        expect(view?.context).toEqual({ timeline: {} });
+      });
+    });
+
     it('should not fetch anything if configured for no thumbnails', async () => {
       const executor = mock<QueryExecutor>();
       const factory = new ViewFactory(