perf: Change media fetches to be asynchronous to view render (#1702)
This is a fairly non-trivial change in terms of consequence, so a greater than average chance something breaks. This is necessary since some cameras (e.g. Reolink) are materially slower to fetch media, and this change substantially improves card responsiveness.
This commit is contained in:
Dermot Duffy
@@ -1,15 +1,7 @@
|
||||
import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
|
||||
import { mock } from 'vitest-mock-extended';
|
||||
import { QueryType } from '../../../src/camera-manager/types';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { ViewFactory } from '../../../src/card-controller/view/factory';
|
||||
import { QueryExecutor } from '../../../src/card-controller/view/query-executor';
|
||||
import { ViewModifier } from '../../../src/card-controller/view/types';
|
||||
import { FrigateCardView, ViewDisplayMode } from '../../../src/config/types';
|
||||
import {
|
||||
EventMediaQueries,
|
||||
RecordingMediaQueries,
|
||||
} from '../../../src/view/media-queries';
|
||||
import { MediaQueriesResults } from '../../../src/view/media-queries-results';
|
||||
import { View } from '../../../src/view/view';
|
||||
import {
|
||||
createCameraManager,
|
||||
@@ -329,496 +321,36 @@ describe('getViewByParameters', () => {
|
||||
});
|
||||
|
||||
describe('should get correct default display mode', () => {
|
||||
describe.each([['single' as const], ['grid' as const]])(
|
||||
'%s',
|
||||
(displayMode: ViewDisplayMode) => {
|
||||
it.each([
|
||||
['media' as const],
|
||||
['clip' as const],
|
||||
['recording' as const],
|
||||
['snapshot' as const],
|
||||
['live' as const],
|
||||
])('%s', (viewName: FrigateCardView) => {
|
||||
const api = createPopulatedAPI({
|
||||
media_viewer: {
|
||||
display: {
|
||||
mode: displayMode,
|
||||
},
|
||||
},
|
||||
live: {
|
||||
display: {
|
||||
mode: displayMode,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const factory = new ViewFactory(api);
|
||||
expect(
|
||||
factory.getViewByParameters({
|
||||
params: {
|
||||
view: viewName,
|
||||
},
|
||||
})?.displayMode,
|
||||
).toBe(displayMode);
|
||||
});
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getViewByParametersWithNewQuery', () => {
|
||||
it('should not execute query without config', async () => {
|
||||
const factory = new ViewFactory(createCardAPI());
|
||||
expect(await factory.getViewByParametersWithNewQuery()).toBeNull();
|
||||
});
|
||||
|
||||
describe('with a live view', () => {
|
||||
beforeAll(() => {
|
||||
vi.useFakeTimers();
|
||||
vi.setSystemTime(new Date('2024-07-21T13:22:06Z'));
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
describe('should set timeline window', async () => {
|
||||
it('should set timeline to now for live views', async () => {
|
||||
const executor = mock<QueryExecutor>();
|
||||
const factory = new ViewFactory(createPopulatedAPI(), executor);
|
||||
const view = await factory.getViewByParametersWithNewQuery({
|
||||
params: {
|
||||
view: 'live',
|
||||
},
|
||||
});
|
||||
|
||||
expect(view?.context).toEqual({
|
||||
timeline: {
|
||||
window: {
|
||||
start: new Date('2024-07-21T12:22:06.000Z'),
|
||||
end: new Date('2024-07-21T13:22:06.000Z'),
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('should unset timeline for non-live views', async () => {
|
||||
const executor = mock<QueryExecutor>();
|
||||
const factory = new ViewFactory(createPopulatedAPI(), executor);
|
||||
const view = await factory.getViewByParametersWithNewQuery({
|
||||
baseView: createView({
|
||||
context: {
|
||||
timeline: {
|
||||
window: {
|
||||
start: new Date('2024-07-21T12:22:06.000Z'),
|
||||
end: new Date('2024-07-21T13:22:06.000Z'),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
params: {
|
||||
view: 'clip',
|
||||
},
|
||||
});
|
||||
|
||||
expect(view?.context).toEqual({ timeline: {} });
|
||||
});
|
||||
});
|
||||
|
||||
it('should not fetch anything if configured for no thumbnails', async () => {
|
||||
const executor = mock<QueryExecutor>();
|
||||
const factory = new ViewFactory(
|
||||
createPopulatedAPI({
|
||||
live: {
|
||||
controls: {
|
||||
thumbnails: {
|
||||
mode: 'none' as const,
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
executor,
|
||||
);
|
||||
const view = await factory.getViewByParametersWithNewQuery({
|
||||
params: {
|
||||
view: 'live',
|
||||
},
|
||||
});
|
||||
|
||||
expect(view?.query).toBeNull();
|
||||
expect(view?.queryResults).toBeNull();
|
||||
expect(executor.executeDefaultEventQuery).not.toHaveBeenCalled();
|
||||
expect(executor.executeDefaultRecordingQuery).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should fetch events', async () => {
|
||||
const executor = mock<QueryExecutor>();
|
||||
const query = new EventMediaQueries();
|
||||
const queryResults = new MediaQueriesResults();
|
||||
|
||||
executor.executeDefaultEventQuery.mockResolvedValue({
|
||||
query: query,
|
||||
queryResults: queryResults,
|
||||
});
|
||||
|
||||
const factory = new ViewFactory(createPopulatedAPI(), executor);
|
||||
const view = await factory.getViewByParametersWithNewQuery({
|
||||
params: {
|
||||
view: 'live',
|
||||
},
|
||||
});
|
||||
|
||||
expect(view?.query).toBe(query);
|
||||
expect(view?.queryResults).toBe(queryResults);
|
||||
expect(executor.executeDefaultEventQuery).toBeCalledWith({
|
||||
cameraID: 'camera.office',
|
||||
eventsMediaType: 'all',
|
||||
executorOptions: {
|
||||
useCache: false,
|
||||
},
|
||||
});
|
||||
expect(executor.executeDefaultRecordingQuery).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should fetch recordings', async () => {
|
||||
const executor = mock<QueryExecutor>();
|
||||
const query = new RecordingMediaQueries();
|
||||
const queryResults = new MediaQueriesResults();
|
||||
|
||||
executor.executeDefaultRecordingQuery.mockResolvedValue({
|
||||
query: query,
|
||||
queryResults: queryResults,
|
||||
});
|
||||
|
||||
const factory = new ViewFactory(
|
||||
createPopulatedAPI({
|
||||
live: {
|
||||
controls: {
|
||||
thumbnails: {
|
||||
media_type: 'recordings',
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
executor,
|
||||
);
|
||||
const view = await factory.getViewByParametersWithNewQuery({
|
||||
params: {
|
||||
view: 'live',
|
||||
},
|
||||
});
|
||||
|
||||
expect(view?.query).toBe(query);
|
||||
expect(view?.queryResults).toBe(queryResults);
|
||||
expect(executor.executeDefaultEventQuery).not.toBeCalled();
|
||||
expect(executor.executeDefaultRecordingQuery).toBeCalledWith({
|
||||
cameraID: 'camera.office',
|
||||
executorOptions: {
|
||||
useCache: false,
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('with a media view', () => {
|
||||
it('should do nothing with same camera', async () => {
|
||||
const executor = mock<QueryExecutor>();
|
||||
const factory = new ViewFactory(createPopulatedAPI(), executor);
|
||||
const baseView = new View({
|
||||
view: 'media',
|
||||
camera: 'camera.office',
|
||||
});
|
||||
const view = await factory.getViewByParametersWithNewQuery({
|
||||
baseView: baseView,
|
||||
params: {
|
||||
view: 'media',
|
||||
},
|
||||
});
|
||||
|
||||
expect(view?.query).toBeNull();
|
||||
expect(view?.queryResults).toBeNull();
|
||||
expect(executor.executeDefaultEventQuery).not.toHaveBeenCalled();
|
||||
expect(executor.executeDefaultRecordingQuery).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should fetch clips with different camera', async () => {
|
||||
const executor = mock<QueryExecutor>();
|
||||
const query = new EventMediaQueries();
|
||||
const queryResults = new MediaQueriesResults();
|
||||
|
||||
executor.executeDefaultEventQuery.mockResolvedValue({
|
||||
query: query,
|
||||
queryResults: queryResults,
|
||||
});
|
||||
|
||||
const factory = new ViewFactory(createPopulatedAPI(), executor);
|
||||
const baseView = new View({
|
||||
view: 'media',
|
||||
camera: 'camera.office',
|
||||
});
|
||||
const view = await factory.getViewByParametersWithNewQuery({
|
||||
baseView: baseView,
|
||||
params: {
|
||||
view: 'media',
|
||||
camera: 'camera.kitchen',
|
||||
},
|
||||
});
|
||||
|
||||
expect(view?.query).toBe(query);
|
||||
expect(view?.queryResults).toBe(queryResults);
|
||||
expect(executor.executeDefaultEventQuery).toBeCalledWith({
|
||||
cameraID: 'camera.kitchen',
|
||||
eventsMediaType: 'clips',
|
||||
executorOptions: {
|
||||
useCache: false,
|
||||
},
|
||||
});
|
||||
expect(executor.executeDefaultRecordingQuery).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('with an events-based view', () => {
|
||||
it.each([
|
||||
['clip' as const, 'clips' as const],
|
||||
['clips' as const, 'clips' as const],
|
||||
['snapshot' as const, 'snapshots' as const],
|
||||
['snapshots' as const, 'snapshots' as const],
|
||||
])(
|
||||
'%s',
|
||||
async (viewName: FrigateCardView, eventsMediaType: 'clips' | 'snapshots') => {
|
||||
const executor = mock<QueryExecutor>();
|
||||
const query = new EventMediaQueries();
|
||||
const queryResults = new MediaQueriesResults();
|
||||
|
||||
executor.executeDefaultEventQuery.mockResolvedValue({
|
||||
query: query,
|
||||
queryResults: queryResults,
|
||||
});
|
||||
|
||||
const factory = new ViewFactory(createPopulatedAPI(), executor);
|
||||
const view = await factory.getViewByParametersWithNewQuery({
|
||||
params: {
|
||||
view: viewName,
|
||||
},
|
||||
});
|
||||
|
||||
expect(view?.query).toBe(query);
|
||||
expect(view?.queryResults).toBe(queryResults);
|
||||
expect(executor.executeDefaultEventQuery).toBeCalledWith({
|
||||
cameraID: 'camera.office',
|
||||
eventsMediaType: eventsMediaType,
|
||||
executorOptions: {
|
||||
useCache: false,
|
||||
},
|
||||
});
|
||||
expect(executor.executeDefaultRecordingQuery).not.toHaveBeenCalled();
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
describe('with an recordings-based view', () => {
|
||||
it.each([['recording' as const], ['recordings' as const]])(
|
||||
'%s',
|
||||
async (viewName: FrigateCardView) => {
|
||||
const executor = mock<QueryExecutor>();
|
||||
const query = new RecordingMediaQueries();
|
||||
const queryResults = new MediaQueriesResults();
|
||||
|
||||
executor.executeDefaultRecordingQuery.mockResolvedValue({
|
||||
query: query,
|
||||
queryResults: queryResults,
|
||||
});
|
||||
|
||||
const factory = new ViewFactory(createPopulatedAPI(), executor);
|
||||
const view = await factory.getViewByParametersWithNewQuery({
|
||||
params: {
|
||||
view: viewName,
|
||||
},
|
||||
});
|
||||
|
||||
expect(view?.query).toBe(query);
|
||||
expect(view?.queryResults).toBe(queryResults);
|
||||
expect(executor.executeDefaultEventQuery).not.toHaveBeenCalled();
|
||||
expect(executor.executeDefaultRecordingQuery).toBeCalledWith({
|
||||
cameraID: 'camera.office',
|
||||
executorOptions: {
|
||||
useCache: false,
|
||||
},
|
||||
});
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
describe('with an media viewer view', () => {
|
||||
it('hould not fetch anything if configured for no thumbnails', async () => {
|
||||
const executor = mock<QueryExecutor>();
|
||||
const factory = new ViewFactory(
|
||||
createPopulatedAPI({
|
||||
describe.each([
|
||||
['single' as const, { mode: 'single' as const }],
|
||||
['grid' as const, { mode: 'grid' as const }],
|
||||
['single' as const, undefined],
|
||||
])('%s', (expectedDisplayMode: ViewDisplayMode, displayConfig?: unknown) => {
|
||||
it.each([
|
||||
['media' as const],
|
||||
['clip' as const],
|
||||
['recording' as const],
|
||||
['snapshot' as const],
|
||||
['live' as const],
|
||||
])('%s', (viewName: FrigateCardView) => {
|
||||
const api = createPopulatedAPI({
|
||||
media_viewer: {
|
||||
controls: {
|
||||
thumbnails: {
|
||||
mode: 'none' as const,
|
||||
},
|
||||
display: displayConfig,
|
||||
},
|
||||
live: {
|
||||
display: displayConfig,
|
||||
},
|
||||
});
|
||||
|
||||
const factory = new ViewFactory(api);
|
||||
expect(
|
||||
factory.getViewByParameters({
|
||||
params: {
|
||||
view: viewName,
|
||||
},
|
||||
},
|
||||
}),
|
||||
executor,
|
||||
);
|
||||
const view = await factory.getViewByParametersWithNewQuery({
|
||||
params: {
|
||||
view: 'clip',
|
||||
},
|
||||
})?.displayMode,
|
||||
).toBe(expectedDisplayMode);
|
||||
});
|
||||
|
||||
expect(view?.query).toBeNull();
|
||||
expect(view?.queryResults).toBeNull();
|
||||
expect(executor.executeDefaultEventQuery).not.toHaveBeenCalled();
|
||||
expect(executor.executeDefaultRecordingQuery).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('when changing to gallery from the media viewer', () => {
|
||||
it('should adopt query and results', async () => {
|
||||
const executor = mock<QueryExecutor>();
|
||||
const factory = new ViewFactory(createPopulatedAPI(), executor);
|
||||
|
||||
const baseView = new View({
|
||||
view: 'media',
|
||||
camera: 'camera.office',
|
||||
query: new EventMediaQueries([
|
||||
{
|
||||
type: QueryType.Event,
|
||||
cameraIDs: new Set(['camera.office']),
|
||||
hasClip: true,
|
||||
},
|
||||
]),
|
||||
queryResults: new MediaQueriesResults(),
|
||||
});
|
||||
|
||||
const view = await factory.getViewByParametersWithNewQuery({
|
||||
baseView: baseView,
|
||||
params: {
|
||||
view: 'clips',
|
||||
},
|
||||
});
|
||||
|
||||
expect(view?.query).toBe(baseView.query);
|
||||
expect(view?.queryResults).toBe(baseView.queryResults);
|
||||
expect(executor.executeDefaultEventQuery).not.toHaveBeenCalled();
|
||||
expect(executor.executeDefaultRecordingQuery).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('when set or remove seek time', () => {
|
||||
it('should set seek time when results are selected based on time', async () => {
|
||||
const now = new Date();
|
||||
const executor = mock<QueryExecutor>();
|
||||
const factory = new ViewFactory(createPopulatedAPI(), executor);
|
||||
|
||||
const view = await factory.getViewByParametersWithNewQuery({
|
||||
params: {
|
||||
view: 'clips',
|
||||
},
|
||||
queryExecutorOptions: {
|
||||
selectResult: {
|
||||
time: {
|
||||
time: now,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
expect(view?.context).toEqual({
|
||||
mediaViewer: {
|
||||
seek: now,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('should remove seek time when results are not selected based on time', async () => {
|
||||
const executor = mock<QueryExecutor>();
|
||||
const factory = new ViewFactory(createPopulatedAPI(), executor);
|
||||
|
||||
const view = await factory.getViewByParametersWithNewQuery({
|
||||
baseView: new View({
|
||||
view: 'clips',
|
||||
camera: 'camera.office',
|
||||
context: {
|
||||
mediaViewer: {
|
||||
seek: new Date(),
|
||||
},
|
||||
},
|
||||
}),
|
||||
params: {
|
||||
view: 'clips',
|
||||
},
|
||||
});
|
||||
|
||||
expect(view?.context?.mediaViewer?.seek).toBeUndefined();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('getViewDefaultWithNewQuery', () => {
|
||||
it('should fetch events', async () => {
|
||||
const executor = mock<QueryExecutor>();
|
||||
const query = new EventMediaQueries();
|
||||
const queryResults = new MediaQueriesResults();
|
||||
|
||||
executor.executeDefaultEventQuery.mockResolvedValue({
|
||||
query: query,
|
||||
queryResults: queryResults,
|
||||
});
|
||||
|
||||
const factory = new ViewFactory(createPopulatedAPI(), executor);
|
||||
const view = await factory.getViewDefaultWithNewQuery();
|
||||
|
||||
expect(view?.query).toBe(query);
|
||||
expect(view?.queryResults).toBe(queryResults);
|
||||
expect(executor.executeDefaultEventQuery).toBeCalledWith({
|
||||
cameraID: 'camera.office',
|
||||
eventsMediaType: 'all',
|
||||
executorOptions: {
|
||||
useCache: false,
|
||||
},
|
||||
});
|
||||
expect(executor.executeDefaultRecordingQuery).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('getViewByParametersWithExistingQuery', () => {
|
||||
it('should not execute anything when query is absent', async () => {
|
||||
const executor = mock<QueryExecutor>();
|
||||
const factory = new ViewFactory(createPopulatedAPI(), executor);
|
||||
const view = await factory.getViewByParametersWithExistingQuery({
|
||||
params: {
|
||||
view: 'live',
|
||||
camera: 'camera.office',
|
||||
},
|
||||
});
|
||||
|
||||
expect(view?.query).toBeNull();
|
||||
expect(view?.queryResults).toBeNull();
|
||||
expect(executor.executeDefaultEventQuery).not.toBeCalled();
|
||||
expect(executor.executeDefaultRecordingQuery).not.toBeCalled();
|
||||
});
|
||||
|
||||
it('should set query results', async () => {
|
||||
const executor = mock<QueryExecutor>();
|
||||
const queryResults = new MediaQueriesResults();
|
||||
executor.execute.mockResolvedValue(queryResults);
|
||||
|
||||
const factory = new ViewFactory(createPopulatedAPI(), executor);
|
||||
const query = new RecordingMediaQueries();
|
||||
const view = await factory.getViewByParametersWithExistingQuery({
|
||||
params: {
|
||||
view: 'live',
|
||||
camera: 'camera.office',
|
||||
query: query,
|
||||
},
|
||||
});
|
||||
|
||||
expect(view?.query).toBe(query);
|
||||
expect(view?.queryResults).toBe(queryResults);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user