flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- Closes #2106
This commit is contained in:
Dermot Duffy
2025-10-04 15:47:39 -07:00
committed by GitHub
parent 262e5f223f
commit 78dee9194f
34 changed files with 2261 additions and 1363 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/_coverpage.md
+1 -1
View File
@@ -1,4 +1,4 @@
![logo](images/icons/iris.svg ':size=48px')
<img src="images/icons/iris.svg" alt="Logo" class="spin" style="width: 48px; height: 48px;">
# Advanced Camera Card
docs/index.html
+13
View File
@@ -38,6 +38,19 @@
#__sidebar img {
max-width: 48px;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.app-name img,
.spin {
animation: spin 15s infinite linear;
transform-origin: center;
}
</style>
</head>
<body>
rollup.config.js
+2 -2
View File
@@ -112,8 +112,8 @@ const config = {
},
],
plugins: plugins,
// These files use this at the toplevel, which causes rollup warning
// spam on build: `this` has been rewritten to `undefined`.
// These files use `this` at the toplevel, which causes rollup warning spam on
// build: `this` has been rewritten to `undefined`.
moduleContext: {
'./node_modules/@formatjs/intl-utils/lib/src/diff.js': 'window',
'./node_modules/@formatjs/intl-utils/lib/src/resolve-locale.js': 'window',
src/camera-manager/manager.ts
+8 -8
View File
@@ -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
-28
View File
@@ -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
+5
View File
@@ -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
+2 -4
View File
@@ -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
+2 -2
View File
@@ -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
+12 -5
View File
@@ -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
+1
View File
@@ -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
+1 -2
View File
@@ -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
+4 -5
View File
@@ -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/controller.ts
+1026
View File
File diff suppressed because it is too large Load Diff
src/components-lib/timeline-source.ts → src/components-lib/timeline/source.ts
+159 -66
View File
@@ -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;
}
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 }),
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(),
});
}
public getTimelineRecordingQueries(window: TimelineWindow): RecordingQuery[] | null {
return this._cameraManager.generateDefaultRecordingQueries(this._cameraIDs, {
start: window.start,
end: window.end,
});
}
protected async _refreshEvents(window: TimelineWindow): Promise<void> {
this._dataset.update(data);
}
private _shouldUseEventsFromView(view?: View): boolean {
return QueryClassifier.isEventQuery(view?.query);
}
private async _refreshEvents(window: TimelineWindow, view?: View): Promise<void> {
if (this._shouldUseEventsFromView(view)) {
return;
}
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
+54
View File
@@ -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
+43 -11
View File
@@ -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
return cameraIDsToKeys(
this.cameraManager
.getStore()
.getAllDependentCameras(view.camera, capabilitySearch);
.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-core.ts
+45 -1052
View File
File diff suppressed because it is too large Load Diff
src/components/timeline.ts
+12 -3
View File
@@ -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
-9
View File
@@ -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
+3 -17
View File
@@ -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
-2
View File
@@ -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
+3 -1
View File
@@ -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
+3 -17
View File
@@ -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',
tests/card-controller/actions/actions/folder.test.ts
-86
View File
@@ -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
+2 -2
View File
@@ -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
+28
View File
@@ -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
+2 -3
View File
@@ -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
+8 -2
View File
@@ -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
+9 -7
View File
@@ -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
+9 -9
View File
@@ -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
+787
View File
@@ -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
+1
View File
@@ -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
+14 -17
View File
@@ -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(
vite.config.ts
+1 -1
View File
@@ -12,7 +12,7 @@ const FULL_COVERAGE_FILES_RELATIVE = [
'camera-manager/reolink/*.ts',
'camera-manager/utils/*.ts',
'card-controller/**/*.ts',
'components-lib/**/!(timeline-source.ts)',
'components-lib/timeline/!(controller)*.ts',
'conditions/**/*.ts',
'config/**/*.ts',
'const.ts',