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

- Closes #2106

src/camera-manager/manager.ts

@@ -82,24 +82,24 @@ export class CameraQueryClassifier {
 
 export class QueryResultClassifier {
   public static isEventQueryResult(
-    queryResults: QueryResults,
+    queryResults?: QueryResults | null,
   ): queryResults is EventQueryResults {
-    return queryResults.type === QueryResultsType.Event;
+    return queryResults?.type === QueryResultsType.Event;
   }
   public static isRecordingQueryResult(
-    queryResults: QueryResults,
+    queryResults?: QueryResults | null,
   ): queryResults is RecordingQueryResults {
-    return queryResults.type === QueryResultsType.Recording;
+    return queryResults?.type === QueryResultsType.Recording;
   }
   public static isRecordingSegmentsQueryResult(
-    queryResults: QueryResults,
+    queryResults?: QueryResults | null,
   ): queryResults is RecordingSegmentsQueryResults {
-    return queryResults.type === QueryResultsType.RecordingSegments;
+    return queryResults?.type === QueryResultsType.RecordingSegments;
   }
   public static isMediaMetadataQueryResult(
-    queryResults: QueryResults,
+    queryResults?: QueryResults | null,
   ): queryResults is MediaMetadataQueryResults {
-    return queryResults.type === QueryResultsType.MediaMetadata;
+    return queryResults?.type === QueryResultsType.MediaMetadata;
   }
 }
 

src/card-controller/actions/actions/folders-view.ts

@@ -1,28 +0,0 @@
-import { FoldersViewActionConfig } from '../../../config/schema/actions/custom/folders-view';
-import { FolderViewQuery } from '../../../view/query';
-import { CardActionsAPI } from '../../types';
-import { AdvancedCameraCardAction } from './base';
-
-export class FoldersViewAction extends AdvancedCameraCardAction<FoldersViewActionConfig> {
-  public async execute(api: CardActionsAPI): Promise<void> {
-    await super.execute(api);
-
-    const folder = api.getFoldersManager().getFolder(this._action.folder);
-    if (!folder) {
-      return;
-    }
-
-    const query = api.getFoldersManager().generateDefaultFolderQuery(folder);
-    if (!query) {
-      return;
-    }
-
-    await api.getViewManager().setViewByParametersWithExistingQuery({
-      params: {
-        // Supports both 'folder' and 'folders' views.
-        view: this._action.advanced_camera_card_action,
-        query: new FolderViewQuery(query),
-      },
-    });
-  }
-}

src/card-controller/actions/actions/view.ts

@@ -10,6 +10,11 @@ export class ViewAction extends AdvancedCameraCardAction<ViewActionConfig> {
       params: {
         view: this._action.advanced_camera_card_action,
       },
+      ...(this._action.folder && {
+        queryExecutorOptions: {
+          folder: this._action.folder,
+        },
+      }),
     });
   }
 }

src/card-controller/actions/factory.ts

@@ -10,7 +10,6 @@ import { DefaultAction } from './actions/default';
 import { DisplayModeSelectAction } from './actions/display-mode-select';
 import { DownloadAction } from './actions/download';
 import { ExpandAction } from './actions/expand';
-import { FoldersViewAction } from './actions/folders-view';
 import { FullscreenAction } from './actions/fullscreen';
 import { InternalCallbackAction } from './actions/internal-callback';
 import { LogAction } from './actions/log';
@@ -86,6 +85,8 @@ export class ActionFactory {
         return new DefaultAction(context, action, options?.config);
       case 'clip':
       case 'clips':
+      case 'folder':
+      case 'folders':
       case 'image':
       case 'live':
       case 'recording':
@@ -151,9 +152,6 @@ export class ActionFactory {
         return new StatusBarAction(context, action, options?.config);
       case INTERNAL_CALLBACK_ACTION:
         return new InternalCallbackAction(context, action, options?.config);
-      case 'folder':
-      case 'folders':
-        return new FoldersViewAction(context, action, options?.config);
     }
 
     /* istanbul ignore next: this path cannot be reached -- @preserve */

src/card-controller/folders/manager.ts

@@ -1,6 +1,6 @@
 import { cloneDeep } from 'lodash-es';
 import { ConditionState } from '../../conditions/types';
-import { FolderConfig } from '../../config/schema/folders';
+import { FolderConfig, FolderConfigWithoutID } from '../../config/schema/folders';
 import { localize } from '../../localize/localize';
 import { Endpoint } from '../../types';
 import { ViewItem } from '../../view/item';
@@ -23,7 +23,7 @@ export class FoldersManager {
     this._folders.clear();
   }
 
-  public addFolders(folders: FolderConfig[]): void {
+  public addFolders(folders: FolderConfigWithoutID[]): void {
     for (const folder of folders) {
       const folderNumber = this._folders.size;
       const id = folder.id ?? `folder/${folderNumber.toString()}`;

src/card-controller/view/query-executor.ts

@@ -140,13 +140,20 @@ export class QueryExecutor {
     return queryResults;
   }
 
-  public async executeDefaultFolderQuery(
+  public async executeFolderQuery(
     executorOptions?: QueryExecutorOptions,
   ): Promise<QueryExecutorResult | null> {
-    const query = this._api.getFoldersManager().generateDefaultFolderQuery();
-    return query
-      ? this._executeFolderQuery(new FolderViewQuery(query), executorOptions)
-      : null;
+    const folder = this._api.getFoldersManager().getFolder(executorOptions?.folder);
+    if (!folder) {
+      return null;
+    }
+
+    const query = this._api.getFoldersManager().generateDefaultFolderQuery(folder);
+    if (!query) {
+      return null;
+    }
+
+    return this._executeFolderQuery(new FolderViewQuery(query), executorOptions);
   }
 
   private async _executeFolderQuery(

src/card-controller/view/types.ts

@@ -22,6 +22,7 @@ export interface QueryExecutorOptions {
     id?: string;
     func?: (media: ViewItem) => boolean;
   };
+  folder?: string;
   rejectResults?: (results: QueryResults) => boolean;
   useCache?: boolean;
 }

src/card-controller/view/view-query-executor.ts

@@ -86,8 +86,7 @@ export class ViewQueryExecutor {
     };
 
     const executeFolderQuery = async (): Promise<ViewModifier[]> => {
-      const results =
-        await this._executor.executeDefaultFolderQuery(queryExecutorOptions);
+      const results = await this._executor.executeFolderQuery(queryExecutorOptions);
       return results ? [new SetQueryViewModifier(results)] : [];
     };
 

src/components-lib/menu-button-controller.ts

@@ -15,7 +15,6 @@ import { MediaLoadedInfo } from '../types';
 import {
   createCameraAction,
   createDisplayModeAction,
-  createFoldersViewAction,
   createGeneralAction,
   createMediaPlayerAction,
   createPTZControlsAction,
@@ -658,8 +657,8 @@ export class MenuButtonController {
         type: 'custom:advanced-camera-card-menu-icon',
         title: folder.title ?? localize('config.menu.buttons.folders'),
         style: isSelected ? this._getEmphasizedStyle() : {},
-        tap_action: createFoldersViewAction('folders'),
-        hold_action: createFoldersViewAction('folder'),
+        tap_action: createViewAction('folders'),
+        hold_action: createViewAction('folder'),
       };
     }
 
@@ -674,8 +673,8 @@ export class MenuButtonController {
         icon: folder.icon ?? 'mdi:folder',
         selected: isSelected,
         style: isSelected ? this._getEmphasizedStyle() : {},
-        tap_action: createFoldersViewAction('folders', { folderID: id }),
-        hold_action: createFoldersViewAction('folder', { folderID: id }),
+        tap_action: createViewAction('folders', { folderID: id }),
+        hold_action: createViewAction('folder', { folderID: id }),
       };
     });
 

src/components-lib/timeline/source.ts

@@ -1,18 +1,27 @@
 import { add, sub } from 'date-fns';
 import { DataSet } from 'vis-data';
 import { IdType, TimelineItem, TimelineWindow } from 'vis-timeline/esnext';
-import { CameraManager } from '../camera-manager/manager';
+import { CameraManager } from '../../camera-manager/manager';
 import {
   compressRanges,
   ExpiringMemoryRangeSet,
   MemoryRangeSet,
-} from '../camera-manager/range';
-import { EventQuery, RecordingQuery, RecordingSegment } from '../camera-manager/types';
-import { capEndDate } from '../camera-manager/utils/cap-end-date';
-import { convertRangeToCacheFriendlyTimes } from '../camera-manager/utils/range-to-cache-friendly';
-import { ClipsOrSnapshotsOrAll } from '../types';
-import { errorToConsole, ModifyInterface } from '../utils/basic.js';
-import { ViewMedia } from '../view/item';
+} from '../../camera-manager/range';
+import {
+  EventQuery,
+  RecordingQuery,
+  RecordingSegment,
+} from '../../camera-manager/types';
+import { capEndDate } from '../../camera-manager/utils/cap-end-date';
+import { convertRangeToCacheFriendlyTimes } from '../../camera-manager/utils/range-to-cache-friendly';
+import { FolderConfig } from '../../config/schema/folders';
+import { ClipsOrSnapshotsOrAll } from '../../types';
+import { errorToConsole, ModifyInterface } from '../../utils/basic.js';
+import { ViewItem, ViewMedia } from '../../view/item';
+import { ViewItemClassifier } from '../../view/item-classifier';
+import { QueryClassifier } from '../../view/query-classifier';
+import { View } from '../../view/view';
+import { TimelineKey } from './types';
 
 // Allow timeline freshness to be at least this number of seconds out of date
 // (caching times in the data-engine may increase the effective delay).
@@ -36,32 +45,44 @@ export interface AdvancedCameraCardTimelineItem extends TimelineItem {
   media?: ViewMedia;
 }
 
+interface AdvancedCameraCardGroup {
+  id: string;
+  content: string;
+}
+
 export class TimelineDataSource {
-  protected _cameraManager: CameraManager;
-  protected _dataset: DataSet<AdvancedCameraCardTimelineItem> = new DataSet();
+  private _cameraManager: CameraManager;
+  private _dataset: DataSet<AdvancedCameraCardTimelineItem> = new DataSet();
+  private _groups: DataSet<AdvancedCameraCardGroup>;
 
   // The ranges in which recordings have been calculated and added for.
   // Calculating recordings is a very expensive process since it is based on
   // segments (not just the fetch is expensive, but the JS to dedup and turn the
   // high-N segments into a smaller number of consecutive recording blocks).
-  protected _recordingRanges = new MemoryRangeSet();
+  private _recordingRanges = new MemoryRangeSet();
 
   // Cache event ranges since re-adding the same events is a timeline
   // performance killer (even if the request results are cached).
-  protected _eventRanges = new ExpiringMemoryRangeSet();
+  private _eventRanges = new ExpiringMemoryRangeSet();
 
-  protected _cameraIDs: Set<string>;
-  protected _eventsMediaType: ClipsOrSnapshotsOrAll;
-  protected _showRecordings: boolean;
+  private _cameraIDs: Set<string>;
+
+  private _eventsMediaType: ClipsOrSnapshotsOrAll;
+  private _showRecordings: boolean;
 
   constructor(
     cameraManager: CameraManager,
-    cameraIDs: Set<string>,
+    keys: TimelineKey[],
     eventsMediaType: ClipsOrSnapshotsOrAll,
     showRecordings: boolean,
   ) {
     this._cameraManager = cameraManager;
-    this._cameraIDs = cameraIDs;
+
+    this._cameraIDs = new Set(
+      keys.filter((key) => key.type === 'camera').map((key) => key.cameraID),
+    );
+    this._groups = this._generateGroups(keys);
+
     this._eventsMediaType = eventsMediaType;
     this._showRecordings = showRecordings;
   }
@@ -70,6 +91,41 @@ export class TimelineDataSource {
     return this._dataset;
   }
 
+  private _getGroupIDForCamera(cameraID: string): string {
+    return `camera/${cameraID}`;
+  }
+
+  private _getGroupIDForFolder(folderConfig: FolderConfig): string {
+    return folderConfig.id;
+  }
+
+  private _generateGroups(keys: TimelineKey[]): DataSet<AdvancedCameraCardGroup> {
+    const groups: AdvancedCameraCardGroup[] = [];
+    for (const key of keys) {
+      /* istanbul ignore else: the else path cannot be reached as key can only
+         be {camera, folder} -- @preserve */
+      if (key.type === 'camera') {
+        const cameraMetadata = this._cameraManager.getCameraMetadata(key.cameraID);
+
+        groups.push({
+          id: this._getGroupIDForCamera(key.cameraID),
+          content: cameraMetadata?.title ?? key.cameraID,
+        });
+      } else if (key.type === 'folder') {
+        const folderID = this._getGroupIDForFolder(key.folder);
+        groups.push({
+          id: folderID,
+          content: key.folder.title ?? folderID,
+        });
+      }
+    }
+    return new DataSet(groups);
+  }
+
+  get groups(): DataSet<AdvancedCameraCardGroup> {
+    return this._groups;
+  }
+
   public rewriteEvent(id: IdType): void {
     // Hack: For timeline uses of the event dataset clustering may not update
     // unless the dataset changes, artifically update the dataset to ensure the
@@ -85,39 +141,48 @@ export class TimelineDataSource {
     }
   }
 
-  public async refresh(window: TimelineWindow): Promise<void> {
-    try {
-      await Promise.all([
-        this._refreshEvents(window),
-        ...(this._showRecordings ? [this._refreshRecordings(window)] : []),
-      ]);
-    } catch (e) {
-      errorToConsole(e as Error);
+  public addEventMediaToDataset(mediaArray?: ViewItem[] | null): void {
+    const data: AdvancedCameraCardTimelineItem[] = [];
 
-      // Intentionally ignore errors here, since it is likely the user will
-      // change the range again and a subsequent call may work. To do otherwise
-      // would be jarring to the timeline experience in the case of transient
-      // errors from the backend.
+    for (const media of mediaArray ?? []) {
+      if (!ViewItemClassifier.isEvent(media)) {
+        continue;
+      }
+
+      const startTime = media.getStartTime();
+      const id = media.getID();
+      const folder = media.getFolder();
+      const cameraID = media.getCameraID();
+      const groupID = folder
+        ? this._getGroupIDForFolder(folder)
+        : cameraID
+          ? this._getGroupIDForCamera(cameraID)
+          : null;
+      if (id && startTime && groupID) {
+        data.push({
+          id: id,
+          group: groupID,
+          content: '',
+          media: media,
+          start: startTime.getTime(),
+          type: 'range',
+          end: media.getUsableEndTime()?.getTime(),
+        });
+      }
     }
+
+    this._dataset.update(data);
   }
 
-  public getTimelineEventQueries(window: TimelineWindow): EventQuery[] | null {
-    return this._cameraManager.generateDefaultEventQueries(this._cameraIDs, {
-      start: window.start,
-      end: window.end,
-      ...(this._eventsMediaType === 'clips' && { hasClip: true }),
-      ...(this._eventsMediaType === 'snapshots' && { hasSnapshot: true }),
-    });
+  private _shouldUseEventsFromView(view?: View): boolean {
+    return QueryClassifier.isEventQuery(view?.query);
   }
 
-  public getTimelineRecordingQueries(window: TimelineWindow): RecordingQuery[] | null {
-    return this._cameraManager.generateDefaultRecordingQueries(this._cameraIDs, {
-      start: window.start,
-      end: window.end,
-    });
-  }
+  private async _refreshEvents(window: TimelineWindow, view?: View): Promise<void> {
+    if (this._shouldUseEventsFromView(view)) {
+      return;
+    }
 
-  protected async _refreshEvents(window: TimelineWindow): Promise<void> {
     if (
       this._eventRanges.hasCoverage({
         start: window.start,
@@ -134,25 +199,9 @@ export class TimelineDataSource {
       return;
     }
 
-    const mediaArray = await this._cameraManager.executeMediaQueries(eventQueries);
-    const data: AdvancedCameraCardTimelineItem[] = [];
-    for (const media of mediaArray ?? []) {
-      const startTime = media.getStartTime();
-      const id = media.getID();
-      const cameraID = media.getCameraID();
-      if (id && startTime && cameraID) {
-        data.push({
-          id: id,
-          group: cameraID,
-          content: '',
-          media: media,
-          start: startTime.getTime(),
-          type: 'range',
-          end: media.getUsableEndTime()?.getTime() ?? startTime.getTime(),
-        });
-      }
-    }
-    this._dataset.update(data);
+    this.addEventMediaToDataset(
+      await this._cameraManager.executeMediaQueries(eventQueries),
+    );
 
     this._eventRanges.add({
       ...cacheFriendlyWindow,
@@ -160,7 +209,49 @@ export class TimelineDataSource {
     });
   }
 
-  protected async _refreshRecordings(window: TimelineWindow): Promise<void> {
+  public async refresh(window: TimelineWindow, view?: View): Promise<void> {
+    try {
+      await Promise.all([
+        this._refreshEvents(window, view),
+        ...(this._showRecordings ? [this._refreshRecordings(window)] : []),
+      ]);
+    } catch (e) {
+      errorToConsole(e as Error);
+
+      // Intentionally ignore errors here, since it is likely the user will
+      // change the range again and a subsequent call may work. To do otherwise
+      // would be jarring to the timeline experience in the case of transient
+      // errors from the backend.
+    }
+  }
+
+  public getTimelineEventQueries(window: TimelineWindow): EventQuery[] | null {
+    if (!this._cameraIDs.size) {
+      return null;
+    }
+    return this._cameraManager.generateDefaultEventQueries(this._cameraIDs, {
+      start: window.start,
+      end: window.end,
+      ...(this._eventsMediaType === 'clips' && { hasClip: true }),
+      ...(this._eventsMediaType === 'snapshots' && { hasSnapshot: true }),
+    });
+  }
+
+  public getTimelineRecordingQueries(window: TimelineWindow): RecordingQuery[] | null {
+    if (!this._cameraIDs.size) {
+      return null;
+    }
+    return this._cameraManager.generateDefaultRecordingQueries(this._cameraIDs, {
+      start: window.start,
+      end: window.end,
+    });
+  }
+
+  private async _refreshRecordings(window: TimelineWindow): Promise<void> {
+    if (!this._cameraIDs.size) {
+      return;
+    }
+
     type AdvancedCameraCardTimelineItemWithEnd = ModifyInterface<
       AdvancedCameraCardTimelineItem,
       { end: number }
@@ -172,7 +263,7 @@ export class TimelineDataSource {
     ): AdvancedCameraCardTimelineItemWithEnd => {
       return {
         id: `recording-${cameraID}-${segment.id}`,
-        group: cameraID,
+        group: this._getGroupIDForCamera(cameraID),
         start: segment.start_time * 1000,
         end: segment.end_time * 1000,
         content: '',
@@ -183,16 +274,18 @@ export class TimelineDataSource {
     const getExistingRecordingsForCameraID = (
       cameraID: string,
     ): AdvancedCameraCardTimelineItemWithEnd[] => {
+      const groupID = this._getGroupIDForCamera(cameraID);
       return this._dataset.get({
         filter: (item) =>
-          item.type == 'background' && item.group === cameraID && item.end !== undefined,
+          item.type === 'background' && item.group === groupID && item.end !== undefined,
       }) as AdvancedCameraCardTimelineItemWithEnd[];
     };
 
     const deleteRecordingsForCameraID = (cameraID: string): void => {
+      const groupID = this._getGroupIDForCamera(cameraID);
       this._dataset.remove(
         this._dataset.get({
-          filter: (item) => item.type === 'background' && item.group === cameraID,
+          filter: (item) => item.type === 'background' && item.group === groupID,
         }),
       );
     };

src/components-lib/timeline/types.ts

@@ -0,0 +1,54 @@
+import { DateType, IdType, Timeline, TimelineWindow } from 'vis-timeline';
+import { CameraManager } from '../../camera-manager/manager';
+import { ViewItemManager } from '../../card-controller/view/item-manager';
+import { ViewManagerEpoch } from '../../card-controller/view/types';
+import { CameraConfig } from '../../config/schema/cameras';
+import { FolderConfig } from '../../config/schema/folders';
+import { HomeAssistant } from '../../ha/types';
+import { ViewMedia } from '../../view/item';
+
+// An event used to fetch data required for thumbnail rendering. See special
+// note in AdvancedCameraCardTimelineThumbnail on why this is necessary.
+export interface ThumbnailDataRequest {
+  item: IdType;
+  hass?: HomeAssistant;
+  cameraManager?: CameraManager;
+  cameraConfig?: CameraConfig;
+  media?: ViewMedia;
+  viewManagerEpoch?: ViewManagerEpoch;
+  viewItemManager?: ViewItemManager;
+}
+
+export class ThumbnailDataRequestEvent extends CustomEvent<ThumbnailDataRequest> {}
+
+interface CameraTimelineKey {
+  type: 'camera';
+  cameraID: string;
+}
+interface FolderTimelineKey {
+  type: 'folder';
+  folder: FolderConfig;
+}
+export type TimelineKey = CameraTimelineKey | FolderTimelineKey;
+
+export interface ExtendedTimeline extends Timeline {
+  // setCustomTimeMarker currently missing from Timeline types.
+  setCustomTimeMarker?(time: DateType, id?: IdType): void;
+}
+
+export interface TimelineRangeChange extends TimelineWindow {
+  event: Event & { additionalEvent?: string };
+  byUser: boolean;
+}
+
+export type TimelineItemClickAction = 'play' | 'select';
+
+interface TimelineViewContext {
+  window?: TimelineWindow;
+}
+
+declare module 'view' {
+  interface ViewContext {
+    timeline?: TimelineViewContext;
+  }
+}

src/components/surround.ts

@@ -7,9 +7,11 @@ import {
   unsafeCSS,
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { isEqual } from 'lodash-es';
 import { CameraManager } from '../camera-manager/manager.js';
 import { ViewItemManager } from '../card-controller/view/item-manager.js';
 import { ViewManagerEpoch } from '../card-controller/view/types.js';
+import { TimelineKey } from '../components-lib/timeline/types.js';
 import { ThumbnailsControlConfig } from '../config/schema/common/controls/thumbnails.js';
 import { MiniTimelineControlConfig } from '../config/schema/common/controls/timeline.js';
 import { CardWideConfig } from '../config/schema/types.js';
@@ -44,7 +46,7 @@ export class AdvancedCameraCardSurround extends LitElement {
   @property({ attribute: false })
   public cardWideConfig?: CardWideConfig;
 
-  protected _cameraIDsForTimeline?: Set<string>;
+  protected _keysForTimeline?: TimelineKey[] = [];
 
   /**
    * Determine if a drawer is being used.
@@ -72,11 +74,26 @@ export class AdvancedCameraCardSurround extends LitElement {
       ) ||
         this.viewManagerEpoch?.oldView?.displayMode !== view?.displayMode)
     ) {
-      this._cameraIDsForTimeline = this._getCameraIDsForTimeline() ?? undefined;
+      const newKeys = this._getKeysForTimeline();
+      // Update only if changed, to avoid unnecessary timeline destructions.
+      if (!isEqual(newKeys, this._keysForTimeline)) {
+        this._keysForTimeline = newKeys ?? undefined;
+      }
     }
   }
 
-  protected _getCameraIDsForTimeline(): Set<string> | null {
+  protected _getKeysForTimeline(): TimelineKey[] | null {
+    const cameraIDsToKeys = (cameraIDs: Set<string> | null): TimelineKey[] => {
+      const keys: TimelineKey[] = [];
+      for (const cameraID of cameraIDs ?? []) {
+        keys.push({
+          type: 'camera',
+          cameraID: cameraID,
+        });
+      }
+      return keys;
+    };
+
     const view = this.viewManagerEpoch?.manager.getView();
     if (!view || !this.cameraManager) {
       return null;
@@ -87,20 +104,35 @@ export class AdvancedCameraCardSurround extends LitElement {
         anyCapabilities: ['clips' as const, 'snapshots' as const, 'recordings' as const],
       };
       if (view.supportsMultipleDisplayModes() && view.isGrid()) {
-        return this.cameraManager
-          .getStore()
-          .getCameraIDsWithCapability(capabilitySearch);
+        return cameraIDsToKeys(
+          this.cameraManager.getStore().getCameraIDsWithCapability(capabilitySearch),
+        );
       } else {
-        return this.cameraManager
-          .getStore()
-          .getAllDependentCameras(view.camera, capabilitySearch);
+        return cameraIDsToKeys(
+          this.cameraManager
+            .getStore()
+            .getAllDependentCameras(view.camera, capabilitySearch),
+        );
       }
     }
 
     const queries = view.query;
-    if (view.isViewerView() && QueryClassifier.isMediaQuery(queries)) {
-      return queries.getQueryCameraIDs() ?? null;
+    if (view.isViewerView()) {
+      if (QueryClassifier.isMediaQuery(queries)) {
+        return cameraIDsToKeys(queries.getQueryCameraIDs());
+      } else if (QueryClassifier.isFolderQuery(queries)) {
+        const folderConfig = queries.getQuery()?.folder;
+        return folderConfig
+          ? [
+              {
+                type: 'folder' as const,
+                folder: folderConfig,
+              },
+            ]
+          : [];
+      }
     }
+
     return null;
   }
 
@@ -150,7 +182,7 @@ export class AdvancedCameraCardSurround extends LitElement {
             this.thumbnailConfig?.mode === 'none'
               ? 'play'
               : 'select'}
-            .cameraIDs=${this._cameraIDsForTimeline}
+            .keys=${this._keysForTimeline}
             .mini=${true}
             .timelineConfig=${this.timelineConfig}
             .thumbnailConfig=${this.thumbnailConfig}

src/components/timeline.ts

@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { CameraManager } from '../camera-manager/manager';
 import { ViewItemManager } from '../card-controller/view/item-manager';
 import { ViewManagerEpoch } from '../card-controller/view/types';
+import { TimelineKey } from '../components-lib/timeline/types';
 import { TimelineConfig } from '../config/schema/timeline';
 import { CardWideConfig } from '../config/schema/types';
 import { HomeAssistant } from '../ha/types';
@@ -30,6 +31,16 @@ export class AdvancedCameraCardTimeline extends LitElement {
   @property({ attribute: false })
   public cardWideConfig?: CardWideConfig;
 
+  protected _getKeys(): TimelineKey[] {
+    const keys: TimelineKey[] = [];
+    for (const camera of this.cameraManager?.getStore().getCameraIDsWithCapability({
+      anyCapabilities: ['clips', 'snapshots', 'recordings'],
+    }) ?? []) {
+      keys.push({ type: 'camera', cameraID: camera });
+    }
+    return keys;
+  }
+
   protected render(): TemplateResult | void {
     if (!this.timelineConfig) {
       return html``;
@@ -43,9 +54,7 @@ export class AdvancedCameraCardTimeline extends LitElement {
         .thumbnailConfig=${this.timelineConfig.controls.thumbnails}
         .cameraManager=${this.cameraManager}
         .viewItemManager=${this.viewItemManager}
-        .cameraIDs=${this.cameraManager?.getStore().getCameraIDsWithCapability({
-          anyCapabilities: ['clips', 'snapshots', 'recordings'],
-        })}
+        .keys=${this._getKeys()}
         .cardWideConfig=${this.cardWideConfig}
         .itemClickAction=${this.timelineConfig.controls.thumbnails.mode === 'none'
           ? 'play'

src/config/schema/actions/custom/folders-view.ts

@@ -1,9 +0,0 @@
-import { z } from 'zod';
-import { advancedCameraCardCustomActionsBaseSchema } from './base';
-
-export const foldersViewActionConfigSchema =
-  advancedCameraCardCustomActionsBaseSchema.extend({
-    advanced_camera_card_action: z.literal('folders').or(z.literal('folder')),
-    folder: z.string().optional(),
-  });
-export type FoldersViewActionConfig = z.infer<typeof foldersViewActionConfigSchema>;

src/config/schema/actions/custom/view.ts

@@ -1,23 +1,9 @@
 import { z } from 'zod';
-import {
-  AdvancedCameraCardUserSpecifiedView,
-  VIEWS_USER_SPECIFIED,
-} from '../../common/const';
+import { VIEWS_USER_SPECIFIED } from '../../common/const';
 import { advancedCameraCardCustomActionsBaseSchema } from './base';
 
-type AdvancedCameraCardUserSpecifiedViewWithoutFolder = Exclude<
-  AdvancedCameraCardUserSpecifiedView,
-  'folder' | 'folders'
->;
-
 export const viewActionConfigSchema = advancedCameraCardCustomActionsBaseSchema.extend({
-  advanced_camera_card_action: z.enum(
-    // The folder/folders views are handled separately as they accept an
-    // optional folder ID.
-    VIEWS_USER_SPECIFIED.filter((view) => view !== 'folder' && view !== 'folders') as [
-      AdvancedCameraCardUserSpecifiedViewWithoutFolder,
-      ...AdvancedCameraCardUserSpecifiedViewWithoutFolder[],
-    ],
-  ),
+  advanced_camera_card_action: z.enum(VIEWS_USER_SPECIFIED),
+  folder: z.string().optional(),
 });
 export type ViewActionConfig = z.infer<typeof viewActionConfigSchema>;

src/config/schema/actions/types.ts

@@ -3,7 +3,6 @@ import { statusBarItemBaseSchema } from '../common/status-bar';
 import { advancedCameraCardCustomActionsBaseSchema } from './custom/base';
 import { cameraSelectActionConfigSchema } from './custom/camera-select';
 import { viewDisplayModeActionConfigSchema } from './custom/display-mode';
-import { foldersViewActionConfigSchema } from './custom/folders-view';
 import { generalActionConfigSchema } from './custom/general';
 import { internalCallbackActionConfigSchema } from './custom/internal';
 import { logActionConfigSchema } from './custom/log';
@@ -42,7 +41,6 @@ export const statusBarActionConfigSchema: z.ZodSchema<
 
 const advancedCameraCardCustomActionSchema = z.union([
   cameraSelectActionConfigSchema,
-  foldersViewActionConfigSchema,
   generalActionConfigSchema,
   internalCallbackActionConfigSchema,
   logActionConfigSchema,

src/config/schema/folders.ts

@@ -131,6 +131,8 @@ const folderConfigSchema = z.object({
   title: z.string().optional(),
   icon: z.string().optional(),
 });
-export type FolderConfig = z.infer<typeof folderConfigSchema>;
+export type FolderConfigWithoutID = z.infer<typeof folderConfigSchema>;
+
+export type FolderConfig = FolderConfigWithoutID & { id: string };
 
 export const foldersConfigSchema = folderConfigSchema.array();

src/utils/action.ts

@@ -2,7 +2,6 @@ import { CardActionsAPI } from '../card-controller/types.js';
 import { ZoomSettingsBase } from '../components-lib/zoom/types.js';
 import { CameraSelectActionConfig } from '../config/schema/actions/custom/camera-select.js';
 import { DisplayModeActionConfig } from '../config/schema/actions/custom/display-mode.js';
-import { FoldersViewActionConfig } from '../config/schema/actions/custom/folders-view.js';
 import {
   AdvancedCameraCardGeneralAction,
   GeneralActionConfig,
@@ -47,15 +46,17 @@ export function createGeneralAction(
 }
 
 export function createViewAction(
-  action: Exclude<AdvancedCameraCardUserSpecifiedView, 'folder' | 'folders'>,
+  action: AdvancedCameraCardUserSpecifiedView,
   options?: {
     cardID?: string;
+    folderID?: string;
   },
 ): ViewActionConfig {
   return {
     action: 'fire-dom-event',
     advanced_camera_card_action: action,
     ...(options?.cardID && { card_id: options.cardID }),
+    ...(options?.folderID && { folder: options.folderID }),
   };
 }
 
@@ -74,21 +75,6 @@ export function createCameraAction(
   };
 }
 
-export function createFoldersViewAction(
-  view: 'folder' | 'folders',
-  options?: {
-    cardID?: string;
-    folderID?: string;
-  },
-): FoldersViewActionConfig {
-  return {
-    action: 'fire-dom-event',
-    advanced_camera_card_action: view,
-    ...(options?.folderID && { folder: options.folderID }),
-    ...(options?.cardID && { card_id: options.cardID }),
-  };
-}
-
 export function createMediaPlayerAction(
   mediaPlayer: string,
   mediaPlayerAction: 'play' | 'stop',