feat: Add timeline support for folder media (#2197)

- Closes #2106

tests/card-controller/actions/actions/folder.test.ts

@@ -1,86 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-import { FoldersViewAction } from '../../../../src/card-controller/actions/actions/folders-view';
-import { FolderQuery } from '../../../../src/card-controller/folders/types';
-import { FolderViewQuery } from '../../../../src/view/query';
-import { createCardAPI, createFolder } from '../../../test-utils';
-
-describe('should handle folder action', async () => {
-  it('should handle folder action successfully', async () => {
-    const api = createCardAPI();
-    const action = new FoldersViewAction(
-      {},
-      {
-        action: 'fire-dom-event',
-        advanced_camera_card_action: 'folder',
-      },
-    );
-
-    const folder = createFolder();
-    vi.mocked(api.getFoldersManager().getFolder).mockReturnValue(folder);
-
-    const query: FolderQuery = {
-      folder,
-      path: [{ ha: { id: 'path' } }],
-    };
-    vi.mocked(api.getFoldersManager().generateDefaultFolderQuery).mockReturnValue(query);
-
-    await action.execute(api);
-
-    expect(
-      api.getViewManager().setViewByParametersWithExistingQuery,
-    ).toHaveBeenCalledWith({
-      params: {
-        view: 'folder',
-        query: expect.any(FolderViewQuery),
-      },
-    });
-
-    expect(
-      vi
-        .mocked(api.getViewManager().setViewByParametersWithExistingQuery)
-        .mock.calls[0][0]?.params?.query?.getQuery(),
-    ).toBe(query);
-  });
-
-  it('should do nothing with non-existent folder', async () => {
-    const api = createCardAPI();
-    const action = new FoldersViewAction(
-      {},
-      {
-        action: 'fire-dom-event',
-        advanced_camera_card_action: 'folder',
-        folder: 'NON-EXISTENT-FOLDER',
-      },
-    );
-
-    vi.mocked(api.getFoldersManager().getFolder).mockReturnValue(null);
-
-    await action.execute(api);
-
-    expect(
-      api.getViewManager().setViewByParametersWithExistingQuery,
-    ).not.toHaveBeenCalled();
-  });
-
-  it('should do nothing with non-existent default query', async () => {
-    const api = createCardAPI();
-    const action = new FoldersViewAction(
-      {},
-      {
-        action: 'fire-dom-event',
-        advanced_camera_card_action: 'folder',
-      },
-    );
-
-    const folder = createFolder();
-    vi.mocked(api.getFoldersManager().getFolder).mockReturnValue(folder);
-
-    vi.mocked(api.getFoldersManager().generateDefaultFolderQuery).mockReturnValue(null);
-
-    await action.execute(api);
-
-    expect(
-      api.getViewManager().setViewByParametersWithExistingQuery,
-    ).not.toHaveBeenCalled();
-  });
-});

tests/card-controller/actions/actions/status-bar.test.ts

@@ -22,7 +22,7 @@ describe('should handle status bar action', () => {
   it('add', async () => {
     const api = createCardAPI();
     const item = {
-      type: 'custom:advanced-camera-card-status-bar-string',
+      type: 'custom:advanced-camera-card-status-bar-string' as const,
       string: 'Item',
     };
 
@@ -44,7 +44,7 @@ describe('should handle status bar action', () => {
   it('remove', async () => {
     const api = createCardAPI();
     const item = {
-      type: 'custom:advanced-camera-card-status-bar-string',
+      type: 'custom:advanced-camera-card-status-bar-string' as const,
       string: 'Item',
     };
 

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

@@ -36,3 +36,31 @@ describe('should handle view action', () => {
     );
   });
 });
+
+describe('should handle folder view action', () => {
+  it.each([['folder' as const], ['folders' as const]])('%s', async (viewName) => {
+    const api = createCardAPI();
+
+    const action = new ViewAction(
+      {},
+      {
+        action: 'fire-dom-event',
+        advanced_camera_card_action: viewName,
+        folder: 'folder',
+      },
+    );
+
+    await action.execute(api);
+
+    expect(api.getViewManager().setViewByParametersWithNewQuery).toBeCalledWith(
+      expect.objectContaining({
+        params: {
+          view: viewName,
+        },
+        queryExecutorOptions: {
+          folder: 'folder',
+        },
+      }),
+    );
+  });
+});

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

@@ -7,7 +7,6 @@ import { DefaultAction } from '../../../src/card-controller/actions/actions/defa
 import { DisplayModeSelectAction } from '../../../src/card-controller/actions/actions/display-mode-select';
 import { DownloadAction } from '../../../src/card-controller/actions/actions/download';
 import { ExpandAction } from '../../../src/card-controller/actions/actions/expand';
-import { FoldersViewAction } from '../../../src/card-controller/actions/actions/folders-view';
 import { FullscreenAction } from '../../../src/card-controller/actions/actions/fullscreen';
 import { InternalCallbackAction } from '../../../src/card-controller/actions/actions/internal-callback';
 import { LogAction } from '../../../src/card-controller/actions/actions/log';
@@ -97,6 +96,8 @@ describe('ActionFactory', () => {
       ],
       [{ advanced_camera_card_action: 'download' as const }, DownloadAction],
       [{ advanced_camera_card_action: 'expand' as const }, ExpandAction],
+      [{ advanced_camera_card_action: 'folder' as const }, ViewAction],
+      [{ advanced_camera_card_action: 'folders' as const }, ViewAction],
       [{ advanced_camera_card_action: 'fullscreen' as const }, FullscreenAction],
       [{ advanced_camera_card_action: 'image' as const }, ViewAction],
       [
@@ -185,8 +186,6 @@ describe('ActionFactory', () => {
         },
         InternalCallbackAction,
       ],
-      [{ advanced_camera_card_action: 'folder' as const }, FoldersViewAction],
-      [{ advanced_camera_card_action: 'folders' as const }, FoldersViewAction],
     ])(
       'advanced_camera_card_action: $advanced_camera_card_action',
       (action: Partial<ActionConfig>, classObject: object) => {

tests/card-controller/folders/manager.test.ts

@@ -3,7 +3,7 @@ import { mock } from 'vitest-mock-extended';
 import { FoldersExecutor } from '../../../src/card-controller/folders/executor';
 import { FoldersManager } from '../../../src/card-controller/folders/manager';
 import { FolderQuery } from '../../../src/card-controller/folders/types';
-import { FolderConfig } from '../../../src/config/schema/folders';
+import { FolderConfig, FolderConfigWithoutID } from '../../../src/config/schema/folders';
 import { ResolvedMediaCache } from '../../../src/ha/resolved-media';
 import { Endpoint } from '../../../src/types';
 import { ViewItemCapabilities } from '../../../src/view/types';
@@ -47,7 +47,13 @@ describe('FoldersManager', () => {
 
     it('should add a folder without an id', () => {
       const manager = new FoldersManager(createCardAPI());
-      const folder = createFolder({ title: 'Title' });
+      const folder: FolderConfigWithoutID = {
+        type: 'ha' as const,
+        title: 'Title',
+        ha: {
+          path: [{ id: 'media-source://' }],
+        },
+      };
 
       manager.addFolders([folder]);
       expect(manager.getFolderCount()).toBe(1);

tests/card-controller/view/query-executor.test.ts

@@ -382,15 +382,15 @@ describe('executeQuery', () => {
       vi.mocked(api.getFoldersManager().expandFolder).mockResolvedValue(null);
 
       const executor = new QueryExecutor(api);
-      expect(await executor.executeDefaultFolderQuery()).toBeNull();
+      expect(await executor.executeFolderQuery()).toBeNull();
     });
   });
 });
 
-describe('executeDefaultFolderQuery', () => {
+describe('executeFolderQuery', () => {
   it('should return null without folders', async () => {
     const executor = new QueryExecutor(createCardAPI());
-    expect(await executor.executeDefaultFolderQuery()).toBeNull();
+    expect(await executor.executeFolderQuery()).toBeNull();
   });
 
   it('should execute query against first folder', async () => {
@@ -399,13 +399,14 @@ describe('executeDefaultFolderQuery', () => {
     const folder = createFolder();
     const query: FolderQuery = {
       folder,
-      path: ['path'],
+      path: [{ ha: { id: 'path' } }],
     };
+    vi.mocked(api.getFoldersManager().getFolder).mockReturnValue(folder);
     vi.mocked(api.getFoldersManager().generateDefaultFolderQuery).mockReturnValue(query);
     vi.mocked(api.getFoldersManager().expandFolder).mockResolvedValue(items);
 
     const executor = new QueryExecutor(api);
-    const result = await executor.executeDefaultFolderQuery();
+    const result = await executor.executeFolderQuery();
 
     expect(result?.query.getQuery()).toEqual(query);
     expect(result?.queryResults.getResults()).toEqual(items);
@@ -416,12 +417,13 @@ describe('executeDefaultFolderQuery', () => {
     const folder = createFolder();
     const query: FolderQuery = {
       folder,
-      path: ['path'],
+      path: [{ ha: { id: 'path' } }],
     };
+    vi.mocked(api.getFoldersManager().getFolder).mockReturnValue(folder);
     vi.mocked(api.getFoldersManager().generateDefaultFolderQuery).mockReturnValue(query);
     vi.mocked(api.getFoldersManager().expandFolder).mockResolvedValue(null);
 
     const executor = new QueryExecutor(api);
-    expect(await executor.executeDefaultFolderQuery()).toBeNull();
+    expect(await executor.executeFolderQuery()).toBeNull();
   });
 });

tests/card-controller/view/view-query-executor.test.ts

@@ -109,7 +109,7 @@ describe('ViewQueryExecutor', () => {
           },
         });
         expect(executor.executeDefaultRecordingQuery).not.toHaveBeenCalled();
-        expect(executor.executeDefaultFolderQuery).not.toHaveBeenCalled();
+        expect(executor.executeFolderQuery).not.toHaveBeenCalled();
       });
 
       it('should set query and queryResults for recordings', async () => {
@@ -152,7 +152,7 @@ describe('ViewQueryExecutor', () => {
           },
         });
         expect(executor.executeDefaultEventQuery).not.toBeCalled();
-        expect(executor.executeDefaultFolderQuery).not.toHaveBeenCalled();
+        expect(executor.executeFolderQuery).not.toHaveBeenCalled();
       });
 
       describe('should set timeline window', async () => {
@@ -230,7 +230,7 @@ describe('ViewQueryExecutor', () => {
         expect(view?.queryResults).toBeNull();
         expect(executor.executeDefaultEventQuery).not.toHaveBeenCalled();
         expect(executor.executeDefaultRecordingQuery).not.toHaveBeenCalled();
-        expect(executor.executeDefaultFolderQuery).not.toHaveBeenCalled();
+        expect(executor.executeFolderQuery).not.toHaveBeenCalled();
       });
     });
 
@@ -264,7 +264,7 @@ describe('ViewQueryExecutor', () => {
           },
         });
         expect(executor.executeDefaultRecordingQuery).not.toHaveBeenCalled();
-        expect(executor.executeDefaultFolderQuery).not.toHaveBeenCalled();
+        expect(executor.executeFolderQuery).not.toHaveBeenCalled();
       });
     });
 
@@ -311,7 +311,7 @@ describe('ViewQueryExecutor', () => {
             },
           });
           expect(executor.executeDefaultRecordingQuery).not.toHaveBeenCalled();
-          expect(executor.executeDefaultFolderQuery).not.toHaveBeenCalled();
+          expect(executor.executeFolderQuery).not.toHaveBeenCalled();
         },
       );
     });
@@ -350,7 +350,7 @@ describe('ViewQueryExecutor', () => {
               useCache: false,
             },
           });
-          expect(executor.executeDefaultFolderQuery).not.toHaveBeenCalled();
+          expect(executor.executeFolderQuery).not.toHaveBeenCalled();
         },
       );
     });
@@ -361,7 +361,7 @@ describe('ViewQueryExecutor', () => {
         const query = new FolderViewQuery();
         const queryResults = new QueryResults();
 
-        executor.executeDefaultFolderQuery.mockResolvedValue({
+        executor.executeFolderQuery.mockResolvedValue({
           query: query,
           queryResults: queryResults,
         });
@@ -376,14 +376,14 @@ describe('ViewQueryExecutor', () => {
         expect(view?.queryResults).toBe(queryResults);
         expect(executor.executeDefaultEventQuery).not.toBeCalled();
         expect(executor.executeDefaultRecordingQuery).not.toBeCalled();
-        expect(executor.executeDefaultFolderQuery).toBeCalledWith({
+        expect(executor.executeFolderQuery).toBeCalledWith({
           useCache: false,
         });
       });
 
       it('should execute default folder query with folder view and handle null results', async () => {
         const executor = mock<QueryExecutor>();
-        executor.executeDefaultFolderQuery.mockResolvedValue(null);
+        executor.executeFolderQuery.mockResolvedValue(null);
 
         const viewQueryExecutor = new ViewQueryExecutor(createPopulatedAPI(), executor);
         const view = createView({ view: 'folder', camera: 'camera.office' });

tests/components-lib/timeline/source.test.ts

@@ -0,0 +1,787 @@
+import { DataSet } from 'vis-data';
+import { TimelineWindow } from 'vis-timeline';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { CameraManager } from '../../../src/camera-manager/manager';
+import {
+  Engine,
+  EventQuery,
+  QueryResultsType,
+  QueryType,
+  RecordingSegment,
+  RecordingSegmentsQuery,
+  RecordingSegmentsQueryResults,
+} from '../../../src/camera-manager/types';
+import {
+  AdvancedCameraCardTimelineItem,
+  TimelineDataSource,
+} from '../../../src/components-lib/timeline/source';
+import { TimelineKey } from '../../../src/components-lib/timeline/types';
+import { ViewMediaType } from '../../../src/view/item';
+import { EventMediaQuery } from '../../../src/view/query';
+import {
+  createCameraManager,
+  createFolder,
+  createStore,
+  createView,
+  TestViewMedia,
+} from '../../test-utils';
+
+const CAMERA_ID = 'CAMERA_ID';
+const TEST_MEDIA_ID = 'TEST_MEDIA_ID';
+const RECORDING_SEGMENT_ID = 'SEGMENT_ID';
+const EXPECTED_RECORDING_ID = `recording-${CAMERA_ID}-${RECORDING_SEGMENT_ID}`;
+
+const start = new Date('2025-09-21T19:31:06Z');
+const end = new Date('2025-09-21T19:31:15Z');
+
+const testMedia = new TestViewMedia({
+  cameraID: CAMERA_ID,
+  id: TEST_MEDIA_ID,
+  startTime: start,
+  endTime: end,
+});
+
+const createTestCameraManager = (): CameraManager => {
+  const cameraManager = createCameraManager(
+    createStore([
+      {
+        cameraID: CAMERA_ID,
+      },
+    ]),
+  );
+
+  vi.mocked(cameraManager.getCameraMetadata).mockReturnValue({
+    title: 'Camera Title',
+    icon: { icon: 'mdi:camera' },
+  });
+  const eventQuery: EventQuery = {
+    type: QueryType.Event,
+    cameraIDs: new Set([CAMERA_ID]),
+    start: start,
+    end: end,
+  };
+
+  vi.mocked(cameraManager.generateDefaultEventQueries).mockReturnValue([eventQuery]);
+  vi.mocked(cameraManager.executeMediaQueries).mockResolvedValue([testMedia]);
+
+  const recordingSegmentQuery: RecordingSegmentsQuery = {
+    type: QueryType.RecordingSegments,
+    cameraIDs: new Set([CAMERA_ID]),
+    start,
+    end,
+  };
+  vi.mocked(cameraManager.generateDefaultRecordingSegmentsQueries).mockReturnValue([
+    recordingSegmentQuery,
+  ]);
+
+  const recordingSegment: RecordingSegment = {
+    start_time: 1695307866,
+    end_time: 1695307875,
+    id: RECORDING_SEGMENT_ID,
+  };
+  const recordingSegmentsQueryResults: RecordingSegmentsQueryResults = {
+    type: QueryResultsType.RecordingSegments,
+    engine: Engine.Generic,
+    segments: [recordingSegment],
+  };
+
+  vi.mocked(cameraManager.getRecordingSegments).mockResolvedValue(
+    new Map([[recordingSegmentQuery, recordingSegmentsQueryResults]]),
+  );
+  return cameraManager;
+};
+
+describe('TimelineDataSource', () => {
+  const folder = createFolder({ id: 'folder/FOLDER_ID', title: 'Folder Title' });
+  const timelineKeys: TimelineKey[] = [
+    { type: 'camera', cameraID: 'CAMERA_ID' },
+    { type: 'folder', folder: folder },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('should get groups', () => {
+    it('should get mixed groups', () => {
+      const source = new TimelineDataSource(
+        createTestCameraManager(),
+        timelineKeys,
+        'all',
+        true,
+      );
+
+      expect(source.groups.length).toBe(2);
+      expect(source.groups.get('camera/CAMERA_ID')).toEqual({
+        content: 'Camera Title',
+        id: 'camera/CAMERA_ID',
+      });
+      expect(source.groups.get('folder/FOLDER_ID')).toEqual({
+        content: 'Folder Title',
+        id: 'folder/FOLDER_ID',
+      });
+    });
+
+    it('should use camera id if camera has no title', () => {
+      const cameraManager = createTestCameraManager();
+      vi.mocked(cameraManager.getCameraMetadata).mockReturnValue(null);
+
+      const source = new TimelineDataSource(cameraManager, timelineKeys, 'all', true);
+
+      expect(source.groups.get('camera/CAMERA_ID')).toEqual({
+        content: 'CAMERA_ID',
+        id: 'camera/CAMERA_ID',
+      });
+    });
+
+    it('should use folder id if folder has no title', () => {
+      const folder = createFolder({ id: 'folder/FOLDER_ID' });
+      const timelineKeys: TimelineKey[] = [{ type: 'folder', folder: folder }];
+
+      const source = new TimelineDataSource(
+        createTestCameraManager(),
+        timelineKeys,
+        'all',
+        true,
+      );
+
+      expect(source.groups.get('folder/FOLDER_ID')).toEqual({
+        content: 'folder/FOLDER_ID',
+        id: 'folder/FOLDER_ID',
+      });
+    });
+  });
+
+  describe('should update events from view', () => {
+    it('should add camera events to dataset', () => {
+      const startTime = new Date('2025-09-21T15:32:21Z');
+      const endTime = new Date('2025-09-21T15:35:28Z');
+      const id = 'EVENT_ID';
+      const media = new TestViewMedia({
+        cameraID: 'CAMERA_ID',
+        id,
+        startTime,
+        endTime,
+      });
+
+      const source = new TimelineDataSource(
+        createTestCameraManager(),
+        timelineKeys,
+        'all',
+        true,
+      );
+      source.addEventMediaToDataset([media]);
+
+      expect(source.dataset.length).toBe(1);
+      expect(source.dataset.get(id)).toEqual({
+        id,
+        start: startTime.getTime(),
+        end: endTime.getTime(),
+        media,
+        group: 'camera/CAMERA_ID',
+        content: '',
+        type: 'range',
+      });
+    });
+
+    it('should add folder events to dataset', () => {
+      const startTime = new Date('2025-09-21T15:32:21Z');
+      const endTime = new Date('2025-09-21T15:35:28Z');
+      const id = 'EVENT_ID';
+      const folderID = 'folder/FOLDER_ID';
+      const folder = createFolder({ id: folderID });
+      const media = new TestViewMedia({
+        cameraID: null,
+        id,
+        startTime,
+        endTime,
+        folder,
+      });
+
+      const source = new TimelineDataSource(
+        createTestCameraManager(),
+        timelineKeys,
+        'all',
+        true,
+      );
+      source.addEventMediaToDataset([media]);
+
+      expect(source.dataset.length).toBe(1);
+      expect(source.dataset.get(id)).toEqual({
+        id,
+        start: startTime.getTime(),
+        end: endTime.getTime(),
+        media,
+        group: folderID,
+        content: '',
+        type: 'range',
+      });
+    });
+
+    it('should ignore non-events media', () => {
+      const source = new TimelineDataSource(
+        createTestCameraManager(),
+        timelineKeys,
+        'all',
+        true,
+      );
+
+      source.addEventMediaToDataset([
+        new TestViewMedia({
+          mediaType: ViewMediaType.Recording,
+        }),
+      ]);
+
+      expect(source.dataset.length).toBe(0);
+    });
+
+    it('should ignore null results', () => {
+      const source = new TimelineDataSource(
+        createTestCameraManager(),
+        timelineKeys,
+        'all',
+        true,
+      );
+
+      source.addEventMediaToDataset(null);
+
+      expect(source.dataset.length).toBe(0);
+    });
+
+    it('should ignore media without camera or folder ownership', () => {
+      const source = new TimelineDataSource(
+        createTestCameraManager(),
+        timelineKeys,
+        'all',
+        true,
+      );
+
+      source.addEventMediaToDataset([
+        new TestViewMedia({
+          cameraID: null,
+          folder: null,
+          mediaType: ViewMediaType.Snapshot,
+        }),
+      ]);
+
+      expect(source.dataset.length).toBe(0);
+    });
+  });
+
+  describe('should refresh', () => {
+    const window: TimelineWindow = {
+      start: new Date('2025-09-21T19:31:06Z'),
+      end: new Date('2025-09-21T19:31:15Z'),
+    };
+
+    describe('should refresh events', () => {
+      beforeEach(() => {
+        vi.restoreAllMocks();
+      });
+
+      it('should refresh events successfully', async () => {
+        const source = new TimelineDataSource(
+          createTestCameraManager(),
+          timelineKeys,
+          'all',
+          false,
+        );
+        const view = createView();
+
+        await source.refresh(window, view);
+
+        expect(source.dataset.length).toBe(1);
+
+        expect(source.dataset.get('TEST_MEDIA_ID')).toEqual({
+          id: 'TEST_MEDIA_ID',
+          content: '',
+          start: new Date('2025-09-21T19:31:06Z').getTime(),
+          end: new Date('2025-09-21T19:31:15Z').getTime(),
+          media: testMedia,
+          type: 'range',
+          group: 'camera/CAMERA_ID',
+        });
+      });
+
+      it('should refresh events and handle exception', async () => {
+        const consoleSpy = vi.spyOn(global.console, 'warn').mockReturnValue(undefined);
+
+        const cameraManager = createTestCameraManager();
+        vi.mocked(cameraManager.executeMediaQueries).mockRejectedValue(
+          new Error('Error fetching events'),
+        );
+
+        const source = new TimelineDataSource(cameraManager, timelineKeys, 'all', false);
+
+        expect(source.dataset.length).toBe(0);
+
+        await source.refresh(window);
+
+        expect(source.dataset.length).toBe(0);
+
+        expect(consoleSpy).toHaveBeenCalledWith('Error fetching events');
+      });
+
+      it('should not refresh events when window is cached', async () => {
+        const cameraManager = createTestCameraManager();
+        const source = new TimelineDataSource(cameraManager, timelineKeys, 'all', false);
+        const view = createView();
+
+        await source.refresh(window, view);
+        expect(source.dataset.length).toBe(1);
+
+        await source.refresh(window, view);
+        expect(source.dataset.length).toBe(1);
+        expect(cameraManager.executeMediaQueries).toHaveBeenCalledTimes(1);
+      });
+
+      it('should not refresh events when events in view', async () => {
+        const source = new TimelineDataSource(
+          createTestCameraManager(),
+          timelineKeys,
+          'all',
+          false,
+        );
+
+        await source.refresh(window, createView({ query: new EventMediaQuery() }));
+
+        expect(source.dataset.length).toBe(0);
+      });
+
+      it('should not refresh events when unable to create event queries', async () => {
+        const cameraManager = createTestCameraManager();
+        vi.mocked(cameraManager.generateDefaultEventQueries).mockReturnValue(null);
+
+        const source = new TimelineDataSource(cameraManager, timelineKeys, 'all', false);
+
+        await source.refresh(window);
+        expect(source.dataset.length).toBe(0);
+      });
+    });
+
+    describe('should refresh recordings', () => {
+      const getRecordings = (
+        dataset: DataSet<AdvancedCameraCardTimelineItem>,
+      ): AdvancedCameraCardTimelineItem[] => {
+        return dataset.get({ filter: (item) => item.type === 'background' });
+      };
+
+      it('should refresh recordings successfully', async () => {
+        const source = new TimelineDataSource(
+          createTestCameraManager(),
+          timelineKeys,
+          'all',
+          true,
+        );
+
+        await source.refresh(window);
+
+        // 1 event and 1 recording == 2 total items.
+        expect(source.dataset.length).toBe(2);
+
+        expect(source.dataset.get(EXPECTED_RECORDING_ID)).toEqual({
+          content: '',
+          end: 1695307875000,
+          group: 'camera/CAMERA_ID',
+          id: EXPECTED_RECORDING_ID,
+          start: 1695307866000,
+          type: 'background',
+        });
+      });
+
+      it('should refresh recordings and handle exception', async () => {
+        const consoleSpy = vi.spyOn(global.console, 'warn').mockReturnValue(undefined);
+
+        const cameraManager = createTestCameraManager();
+        vi.mocked(cameraManager.getRecordingSegments).mockRejectedValue(
+          new Error('Error fetching recordings'),
+        );
+
+        const source = new TimelineDataSource(cameraManager, timelineKeys, 'all', true);
+
+        expect(getRecordings(source.dataset).length).toBe(0);
+
+        await source.refresh(window);
+
+        expect(getRecordings(source.dataset).length).toBe(0);
+
+        expect(consoleSpy).toHaveBeenCalledWith('Error fetching recordings');
+      });
+
+      it('should not refresh recordings when window is cached', async () => {
+        const cameraManager = createTestCameraManager();
+        const source = new TimelineDataSource(cameraManager, timelineKeys, 'all', true);
+
+        await source.refresh(window);
+        expect(getRecordings(source.dataset).length).toBe(1);
+
+        await source.refresh(window);
+        expect(getRecordings(source.dataset).length).toBe(1);
+
+        expect(cameraManager.getRecordingSegments).toHaveBeenCalledTimes(1);
+      });
+
+      it('should not refresh recordings when recordings disabled', async () => {
+        const source = new TimelineDataSource(
+          createTestCameraManager(),
+          timelineKeys,
+          'all',
+
+          // Disable recordings.
+          false,
+        );
+
+        await source.refresh(window);
+
+        expect(source.dataset.get(EXPECTED_RECORDING_ID)).toBeNull();
+      });
+
+      it('should not refresh recordings without any cameras', async () => {
+        const timelineKeys: TimelineKey[] = [{ type: 'folder', folder: folder }];
+
+        const source = new TimelineDataSource(
+          createTestCameraManager(),
+          timelineKeys,
+          'all',
+          true,
+        );
+
+        await source.refresh(window);
+
+        expect(source.dataset.get(EXPECTED_RECORDING_ID)).toBeNull();
+      });
+
+      it('should not refresh recordings without recording queries', async () => {
+        const cameraManager = createTestCameraManager();
+        vi.mocked(cameraManager.generateDefaultRecordingSegmentsQueries).mockReturnValue(
+          null,
+        );
+
+        const source = new TimelineDataSource(cameraManager, timelineKeys, 'all', true);
+
+        await source.refresh(window);
+
+        expect(getRecordings(source.dataset).length).toBe(0);
+        expect(cameraManager.getRecordingSegments).toHaveBeenCalledTimes(0);
+      });
+
+      it('should compress recording segments', async () => {
+        const cameraManager = createTestCameraManager();
+
+        const recordingSegmentQuery: RecordingSegmentsQuery = {
+          type: QueryType.RecordingSegments,
+          cameraIDs: new Set([CAMERA_ID]),
+          start: new Date('2025-09-21T19:31:06Z'),
+          end: new Date('2025-09-21T19:31:15Z'),
+        };
+
+        const recordingSegmentsQueryResults: RecordingSegmentsQueryResults = {
+          type: QueryResultsType.RecordingSegments,
+          engine: Engine.Generic,
+          segments: [
+            {
+              start_time: 1695307866,
+              end_time: 1695307875,
+              id: RECORDING_SEGMENT_ID,
+            },
+            {
+              start_time: 1695307875,
+              end_time: 1695307885,
+              id: `${RECORDING_SEGMENT_ID}-2`,
+            },
+          ],
+        };
+
+        vi.mocked(cameraManager.getRecordingSegments).mockResolvedValue(
+          new Map([
+            [recordingSegmentQuery, recordingSegmentsQueryResults],
+            [{ ...recordingSegmentQuery }, recordingSegmentsQueryResults],
+          ]),
+        );
+
+        const source = new TimelineDataSource(cameraManager, timelineKeys, 'all', true);
+
+        await source.refresh(window);
+
+        expect(getRecordings(source.dataset)).toEqual([
+          {
+            content: '',
+            end: 1695307885000,
+            group: 'camera/CAMERA_ID',
+            id: 'recording-CAMERA_ID-SEGMENT_ID',
+            start: 1695307866000,
+            type: 'background',
+          },
+        ]);
+        expect(cameraManager.getRecordingSegments).toHaveBeenCalledTimes(1);
+      });
+
+      it('should compress recording segments without an end', async () => {
+        const cameraManager = createTestCameraManager();
+
+        const recordingSegmentQuery: RecordingSegmentsQuery = {
+          type: QueryType.RecordingSegments,
+          cameraIDs: new Set([CAMERA_ID]),
+          start: new Date('2025-09-21T19:31:06Z'),
+          end: new Date('2025-09-21T19:31:15Z'),
+        };
+
+        const recordingSegmentsQueryResults: RecordingSegmentsQueryResults = {
+          type: QueryResultsType.RecordingSegments,
+          engine: Engine.Generic,
+          segments: [
+            {
+              start_time: 1695307866,
+              end_time: 1695307876,
+              id: RECORDING_SEGMENT_ID,
+            },
+            {
+              start_time: 1695307875,
+              end_time: 1695307885,
+              id: `${RECORDING_SEGMENT_ID}-2`,
+            },
+          ],
+        };
+
+        vi.mocked(cameraManager.getRecordingSegments).mockResolvedValue(
+          new Map([[recordingSegmentQuery, recordingSegmentsQueryResults]]),
+        );
+
+        const source = new TimelineDataSource(cameraManager, timelineKeys, 'all', true);
+        source.dataset.add({
+          id: 'recording-CAMERA_ID-SEGMENT_ID',
+          start: 1695307866000,
+
+          // No end time.
+          end: undefined,
+
+          group: 'camera/CAMERA_ID',
+          content: '',
+          type: 'background',
+        });
+
+        await source.refresh(window);
+
+        expect(getRecordings(source.dataset)).toEqual([
+          {
+            content: '',
+            end: 1695307885000,
+            group: 'camera/CAMERA_ID',
+            id: 'recording-CAMERA_ID-SEGMENT_ID',
+            start: 1695307866000,
+            type: 'background',
+          },
+        ]);
+        expect(cameraManager.getRecordingSegments).toHaveBeenCalledTimes(1);
+      });
+
+      it('should compress recording segments without mixing up cameras', async () => {
+        const cameraManager = createTestCameraManager();
+
+        vi.mocked(cameraManager.getRecordingSegments).mockResolvedValue(
+          new Map([
+            [
+              {
+                type: QueryType.RecordingSegments,
+                cameraIDs: new Set(['camera-1']),
+                start: new Date('2025-09-21T19:31:06Z'),
+                end: new Date('2025-09-21T19:31:15Z'),
+              },
+              {
+                type: QueryResultsType.RecordingSegments,
+                engine: Engine.Generic,
+                segments: [
+                  {
+                    start_time: 1695307866,
+                    end_time: 1695307875,
+                    id: 'segment-1',
+                  },
+                ],
+              },
+            ],
+
+            [
+              {
+                type: QueryType.RecordingSegments,
+                cameraIDs: new Set(['camera-2']),
+                start: new Date('2025-09-21T19:31:06Z'),
+                end: new Date('2025-09-21T19:31:15Z'),
+              },
+              {
+                type: QueryResultsType.RecordingSegments,
+                engine: Engine.Generic,
+                segments: [
+                  {
+                    start_time: 1695307866,
+                    end_time: 1695307875,
+                    id: 'segment-2',
+                  },
+                ],
+              },
+            ],
+          ]),
+        );
+
+        const source = new TimelineDataSource(cameraManager, timelineKeys, 'all', true);
+
+        await source.refresh(window);
+
+        expect(getRecordings(source.dataset)).toEqual([
+          {
+            content: '',
+            end: 1695307875000,
+            group: 'camera/camera-1',
+            id: 'recording-camera-1-segment-1',
+            start: 1695307866000,
+            type: 'background',
+          },
+          {
+            content: '',
+            end: 1695307875000,
+            group: 'camera/camera-2',
+            id: 'recording-camera-2-segment-2',
+            start: 1695307866000,
+            type: 'background',
+          },
+        ]);
+        expect(cameraManager.getRecordingSegments).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+
+  describe('should get timeline event queries', () => {
+    const window: TimelineWindow = { start, end };
+
+    it('should not event queries without cameras', () => {
+      const timelineKeys: TimelineKey[] = [{ type: 'folder', folder: folder }];
+      const source = new TimelineDataSource(
+        createCameraManager(),
+        timelineKeys,
+        'all',
+        true,
+      );
+
+      expect(source.getTimelineEventQueries(window)).toBeNull();
+    });
+
+    it('should get event queries for clips', () => {
+      const cameraManager = createCameraManager(
+        createStore([
+          {
+            cameraID: CAMERA_ID,
+          },
+        ]),
+      );
+      const source = new TimelineDataSource(cameraManager, timelineKeys, 'clips', false);
+      source.getTimelineEventQueries(window);
+
+      expect(cameraManager.generateDefaultEventQueries).toBeCalledWith(
+        new Set([CAMERA_ID]),
+        {
+          start,
+          end,
+          hasClip: true,
+        },
+      );
+    });
+
+    it('should get event queries for snapshots', () => {
+      const cameraManager = createCameraManager(
+        createStore([
+          {
+            cameraID: CAMERA_ID,
+          },
+        ]),
+      );
+      const source = new TimelineDataSource(
+        cameraManager,
+        timelineKeys,
+        'snapshots',
+        false,
+      );
+      source.getTimelineEventQueries(window);
+
+      expect(cameraManager.generateDefaultEventQueries).toBeCalledWith(
+        new Set([CAMERA_ID]),
+        {
+          start,
+          end,
+          hasSnapshot: true,
+        },
+      );
+    });
+  });
+
+  describe('should get timeline recording queries', () => {
+    const window: TimelineWindow = { start, end };
+
+    it('should not recording queries without cameras', () => {
+      const timelineKeys: TimelineKey[] = [{ type: 'folder', folder: folder }];
+      const source = new TimelineDataSource(
+        createCameraManager(),
+        timelineKeys,
+        'all',
+        true,
+      );
+
+      expect(source.getTimelineRecordingQueries(window)).toBeNull();
+    });
+
+    it('should get recording queries', () => {
+      const cameraManager = createCameraManager(
+        createStore([
+          {
+            cameraID: CAMERA_ID,
+          },
+        ]),
+      );
+      const source = new TimelineDataSource(cameraManager, timelineKeys, 'all', true);
+      source.getTimelineRecordingQueries(window);
+
+      expect(cameraManager.generateDefaultRecordingQueries).toBeCalledWith(
+        new Set([CAMERA_ID]),
+        {
+          start,
+          end,
+        },
+      );
+    });
+  });
+
+  describe('should rewrite event', () => {
+    it('should not rewrite when item is not found', () => {
+      const source = new TimelineDataSource(
+        createTestCameraManager(),
+        timelineKeys,
+        'all',
+        true,
+      );
+      source.rewriteEvent('UNKNOWN_ID');
+
+      expect(source.dataset.length).toBe(0);
+    });
+
+    it('should not rewrite when item is not found', () => {
+      const source = new TimelineDataSource(
+        createTestCameraManager(),
+        timelineKeys,
+        'all',
+        true,
+      );
+      const item = {
+        id: 'id',
+        start: start.getTime(),
+        end: end.getTime(),
+        media: testMedia,
+        group: 'camera/CAMERA_ID' as const,
+        content: '',
+        type: 'range' as const,
+      };
+      source.dataset.add(item);
+
+      source.rewriteEvent('id');
+
+      expect(source.dataset.get('id')).toBe(item);
+    });
+  });
+});

tests/test-utils.ts

@@ -674,6 +674,7 @@ export const createTouchEvent = (
 export const createFolder = (config?: Partial<FolderConfig>): FolderConfig => {
   return {
     type: 'ha',
+    id: crypto.randomUUID(),
     ha: {
       path: [{ id: 'media-source://' }],
     },

tests/utils/action.test.ts

@@ -5,7 +5,6 @@ import { ActionConfig } from '../../src/config/schema/actions/types.js';
 import {
   createCameraAction,
   createDisplayModeAction,
-  createFoldersViewAction,
   createGeneralAction,
   createInternalCallbackAction,
   createLogAction,
@@ -48,6 +47,20 @@ describe('createViewAction', () => {
       card_id: 'card_id',
     });
   });
+
+  it.each([['folder' as const], ['folders' as const]])(
+    '%s',
+    (viewName: 'folder' | 'folders') => {
+      expect(
+        createViewAction(viewName, { folderID: 'folderID', cardID: 'card_id' }),
+      ).toEqual({
+        action: 'fire-dom-event',
+        advanced_camera_card_action: viewName,
+        card_id: 'card_id',
+        folder: 'folderID',
+      });
+    },
+  );
 });
 
 describe('createCameraAction', () => {
@@ -63,22 +76,6 @@ describe('createCameraAction', () => {
   });
 });
 
-describe('createFolderAction', () => {
-  it.each([['folder' as const], ['folders' as const]])(
-    '%s',
-    (viewName: 'folder' | 'folders') => {
-      expect(
-        createFoldersViewAction(viewName, { folderID: 'folderID', cardID: 'card_id' }),
-      ).toEqual({
-        action: 'fire-dom-event',
-        advanced_camera_card_action: viewName,
-        card_id: 'card_id',
-        folder: 'folderID',
-      });
-    },
-  );
-});
-
 describe('createMediaPlayerAction', () => {
   it('should create media_player action', () => {
     expect(