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

Refactor views to support dynamic updates.

Browse Source
This commit is contained in:
Dermot Duffy
2024-07-26 19:15:38 -07:00
parent 33dee47205
commit d5c4e56c45
80 changed files with 3714 additions and 4021 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/components-lib/live/live-controller.test.ts
+1 -218
View File
@@ -1,26 +1,15 @@
import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { LiveController } from '../../../src/components-lib/live/live-controller';
import { dispatchMessageEvent } from '../../../src/components/message';
import {
changeViewToRecentEventsForCameraAndDependents,
changeViewToRecentRecordingForCameraAndDependents,
} from '../../../src/utils/media-to-view';
import { EventMediaQueries } from '../../../src/view/media-queries';
import {
IntersectionObserverMock,
callIntersectionHandler,
createCameraManager,
createConfig,
createLitElement,
createMediaLoadedInfo,
createMediaLoadedInfoEvent,
createParent,
createView,
createViewChangeEvent,
} from '../../test-utils';
vi.mock('../../../src/utils/media-to-view');
// @vitest-environment jsdom
describe('LiveController', () => {
beforeEach(() => {
@@ -168,210 +157,4 @@ describe('LiveController', () => {
expect(eventListener).toBeCalledTimes(1);
expect(controller.getRenderEpoch()).toBe(secondRenderEpoch);
});
it('should handle view change', () => {
const host = createLitElement();
const parent = createParent({ children: [host] });
const eventListener = vi.fn();
parent.addEventListener('frigate-card:view:change', eventListener);
const controller = new LiveController(host);
controller.hostConnected();
const view = createView();
callIntersectionHandler(false);
expect(controller.isInBackground()).toBeTruthy();
host.dispatchEvent(createViewChangeEvent(view));
expect(eventListener).toBeCalledTimes(0);
callIntersectionHandler(true);
expect(controller.isInBackground()).toBeFalsy();
host.dispatchEvent(createViewChangeEvent(view));
expect(eventListener).toBeCalledTimes(1);
});
describe('should fetch media', () => {
it('when in background', async () => {
const controller = new LiveController(createLitElement());
callIntersectionHandler(false);
await controller.fetchMediaInBackgroundIfNecessary(
createView(),
createCameraManager(),
{},
createConfig().live,
);
expect(changeViewToRecentEventsForCameraAndDependents).not.toBeCalled();
expect(changeViewToRecentRecordingForCameraAndDependents).not.toBeCalled();
});
it('when has existing query', async () => {
const controller = new LiveController(createLitElement());
await controller.fetchMediaInBackgroundIfNecessary(
createView({ query: new EventMediaQueries() }),
createCameraManager(),
{},
createConfig().live,
);
expect(changeViewToRecentEventsForCameraAndDependents).not.toBeCalled();
expect(changeViewToRecentRecordingForCameraAndDependents).not.toBeCalled();
});
it('when has no thumbnails', async () => {
const controller = new LiveController(createLitElement());
await controller.fetchMediaInBackgroundIfNecessary(
createView(),
createCameraManager(),
{},
createConfig({
live: {
controls: {
thumbnails: {
mode: 'none',
},
},
},
}).live,
);
expect(changeViewToRecentEventsForCameraAndDependents).not.toBeCalled();
expect(changeViewToRecentRecordingForCameraAndDependents).not.toBeCalled();
});
it('when fetch disabled in context', async () => {
const controller = new LiveController(createLitElement());
await controller.fetchMediaInBackgroundIfNecessary(
createView({
context: {
live: {
fetchThumbnails: false,
},
},
}),
createCameraManager(),
{},
createConfig().live,
);
expect(changeViewToRecentEventsForCameraAndDependents).not.toBeCalled();
expect(changeViewToRecentRecordingForCameraAndDependents).not.toBeCalled();
});
describe('with fetch', () => {
const now = new Date('2024-04-07T19:43');
beforeAll(() => {
vi.useFakeTimers();
vi.setSystemTime(now);
});
afterAll(() => {
vi.useRealTimers();
});
it('events', async () => {
const host = createLitElement();
const controller = new LiveController(host);
const view = createView();
const cameraManager = createCameraManager();
const cardWideConfig = {};
await controller.fetchMediaInBackgroundIfNecessary(
view,
cameraManager,
cardWideConfig,
createConfig({
live: {
controls: {
thumbnails: {
media_type: 'events',
events_media_type: 'all',
},
timeline: {
window_seconds: 3600,
},
},
},
}).live,
);
expect(changeViewToRecentEventsForCameraAndDependents).toBeCalledWith(
host,
cameraManager,
cardWideConfig,
view,
expect.objectContaining({
allCameras: false,
targetView: 'live',
eventsMediaType: 'all',
select: 'latest',
viewContext: expect.objectContaining({
timeline: {
window: {
start: new Date('2024-04-07T18:43'),
end: now,
},
},
}),
}),
);
expect(changeViewToRecentRecordingForCameraAndDependents).not.toBeCalled();
});
it('recordings', async () => {
const host = createLitElement();
const controller = new LiveController(host);
const view = createView();
const cameraManager = createCameraManager();
const cardWideConfig = {};
await controller.fetchMediaInBackgroundIfNecessary(
view,
cameraManager,
cardWideConfig,
createConfig({
live: {
controls: {
thumbnails: {
media_type: 'recordings',
},
timeline: {
window_seconds: 3600,
},
},
},
}).live,
);
expect(changeViewToRecentEventsForCameraAndDependents).not.toBeCalled();
expect(changeViewToRecentRecordingForCameraAndDependents).toBeCalledWith(
host,
cameraManager,
cardWideConfig,
view,
expect.objectContaining({
allCameras: false,
targetView: 'live',
select: 'latest',
viewContext: expect.objectContaining({
timeline: {
window: {
start: new Date('2024-04-07T18:43'),
end: now,
},
},
}),
}),
);
});
});
});
});
tests/components-lib/media-filter-controller.test.ts
+121 -101
View File
@@ -1,8 +1,10 @@
import { endOfDay, startOfDay, sub } from 'date-fns';
import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
import { mock } from 'vitest-mock-extended';
import { Capabilities } from '../../src/camera-manager/capabilities';
import { CameraManagerStore } from '../../src/camera-manager/store';
import { QueryType } from '../../src/camera-manager/types';
import { ViewManager } from '../../src/card-controller/view/view-manager';
import {
MediaFilterController,
MediaFilterCoreDefaults,
@@ -10,7 +12,6 @@ import {
MediaFilterCoreWhen,
MediaFilterMediaType,
} from '../../src/components-lib/media-filter-controller';
import { executeMediaQueryForViewWithErrorDispatching } from '../../src/utils/media-to-view';
import {
EventMediaQueries,
MediaQueries,
@@ -26,8 +27,6 @@ import {
createView,
} from '../test-utils';
vi.mock('../../src/utils/media-to-view');
const createCameraStore = (options?: {
capabilities: Capabilities;
}): CameraManagerStore => {
@@ -295,59 +294,82 @@ describe('MediaFilterController', () => {
describe('should get correct controls to show', () => {
it('view with events', () => {
const view = createView({ query: new EventMediaQueries() });
const viewManager = mock<ViewManager>();
viewManager.getView.mockReturnValue(
createView({ query: new EventMediaQueries() }),
);
const cameraManager = createCameraManager();
const controller = new MediaFilterController(createLitElement());
expect(controller.getControlsToShow(cameraManager, view)).toMatchObject({
controller.setViewManager(viewManager);
expect(controller.getControlsToShow(cameraManager)).toMatchObject({
events: true,
recordings: false,
});
});
it('view with recordings', () => {
const view = createView({ query: new RecordingMediaQueries() });
const viewManager = mock<ViewManager>();
viewManager.getView.mockReturnValue(
createView({ query: new RecordingMediaQueries() }),
);
const cameraManager = createCameraManager();
const controller = new MediaFilterController(createLitElement());
expect(controller.getControlsToShow(cameraManager, view)).toMatchObject({
controller.setViewManager(viewManager);
expect(controller.getControlsToShow(cameraManager)).toMatchObject({
events: false,
recordings: true,
});
});
it('can favorite events', () => {
const view = createView({ query: new EventMediaQueries() });
const viewManager = mock<ViewManager>();
viewManager.getView.mockReturnValue(
createView({ query: new EventMediaQueries() }),
);
const cameraManager = createCameraManager();
vi.mocked(cameraManager.getAggregateCameraCapabilities).mockReturnValue(
createCapabilities({ 'favorite-events': true }),
);
const controller = new MediaFilterController(createLitElement());
expect(controller.getControlsToShow(cameraManager, view)).toMatchObject({
controller.setViewManager(viewManager);
expect(controller.getControlsToShow(cameraManager)).toMatchObject({
favorites: true,
});
});
it('can favorite recordings', () => {
const view = createView({ query: new RecordingMediaQueries() });
const viewManager = mock<ViewManager>();
viewManager.getView.mockReturnValue(
createView({ query: new RecordingMediaQueries() }),
);
const cameraManager = createCameraManager();
vi.mocked(cameraManager.getAggregateCameraCapabilities).mockReturnValue(
createCapabilities({ 'favorite-recordings': true }),
);
const controller = new MediaFilterController(createLitElement());
expect(controller.getControlsToShow(cameraManager, view)).toMatchObject({
controller.setViewManager(viewManager);
expect(controller.getControlsToShow(cameraManager)).toMatchObject({
favorites: true,
});
});
it('can not favorite without a query', () => {
const view = createView();
const viewManager = mock<ViewManager>();
viewManager.getView.mockReturnValue(createView());
const cameraManager = createCameraManager();
const controller = new MediaFilterController(createLitElement());
expect(controller.getControlsToShow(cameraManager, view)).toMatchObject({
controller.setViewManager(viewManager);
expect(controller.getControlsToShow(cameraManager)).toMatchObject({
favorites: false,
});
});
@@ -355,40 +377,34 @@ describe('MediaFilterController', () => {
describe('should handle value change', () => {
it('must have visible cameras', async () => {
const host = createLitElement();
const controller = new MediaFilterController(host);
await controller.valueChangeHandler(
createCameraManager(),
createView(),
{},
{ when: {} },
);
const viewManager = mock<ViewManager>();
expect(host.requestUpdate).not.toBeCalled();
const controller = new MediaFilterController(createLitElement());
controller.setViewManager(viewManager);
await controller.valueChangeHandler(createCameraManager(), {}, { when: {} });
expect(viewManager.setViewByParametersWithExistingQuery).not.toBeCalled();
});
describe('with events media type', () => {
it.each([['clips' as const], ['snapshots' as const]])(
'%s',
async (viewName: 'clips' | 'snapshots') => {
const eventListener = vi.fn();
const host = createLitElement();
host.addEventListener('frigate-card:view:change', eventListener);
const viewManager = mock<ViewManager>();
viewManager.getView.mockReturnValue(createView());
const controller = new MediaFilterController(host);
const cameraManager = createCameraManager();
const view = createView();
vi.mocked(cameraManager.getStore).mockReturnValue(createCameraStore());
vi.mocked(executeMediaQueryForViewWithErrorDispatching).mockResolvedValueOnce(
view,
);
controller.setViewManager(viewManager);
const cameraManager = createCameraManager(createCameraStore());
const from = new Date('2024-02-06T21:59');
const to = new Date('2024-02-06T22:00');
await controller.valueChangeHandler(
cameraManager,
view,
{
performance: createPerformanceConfig({
features: {
@@ -397,6 +413,7 @@ describe('MediaFilterController', () => {
}),
},
{
camera: 'camera.kitchen',
mediaType:
viewName === 'clips'
? MediaFilterMediaType.Clips
@@ -412,20 +429,14 @@ describe('MediaFilterController', () => {
},
);
expect(vi.mocked(executeMediaQueryForViewWithErrorDispatching)).toBeCalledWith(
host,
cameraManager,
view,
expect.anything(),
{
targetCameraID: 'camera.kitchen',
targetView: viewName,
},
);
expect(viewManager.setViewByParametersWithExistingQuery).toBeCalledWith({
params: expect.objectContaining({
camera: 'camera.kitchen',
view: viewName,
}),
});
expect(
vi
.mocked(executeMediaQueryForViewWithErrorDispatching)
.mock.calls[0][3].getQueries(),
viewManager.setViewByParametersWithExistingQuery.mock.calls[0][0]?.params?.query?.getQueries(),
).toEqual([
{
cameraIDs: new Set(['camera.kitchen']),
@@ -442,31 +453,29 @@ describe('MediaFilterController', () => {
},
]);
expect(eventListener).toBeCalled();
expect(host.requestUpdate).toBeCalled();
},
);
});
it('with recordings media type', async () => {
const eventListener = vi.fn();
const host = createLitElement();
host.addEventListener('frigate-card:view:change', eventListener);
const cameraManager = createCameraManager(createCameraStore());
const viewManager = mock<ViewManager>();
viewManager.getView.mockReturnValue(createView());
vi.mocked(cameraManager.getStore).mockReturnValue(createCameraStore());
const controller = new MediaFilterController(host);
const cameraManager = createCameraManager();
const view = createView();
vi.mocked(cameraManager.getStore).mockReturnValue(createCameraStore());
vi.mocked(executeMediaQueryForViewWithErrorDispatching).mockResolvedValueOnce(
view,
);
controller.setViewManager(viewManager);
const from = new Date('2024-02-06T21:59');
const to = new Date('2024-02-06T22:00');
await controller.valueChangeHandler(
cameraManager,
view,
{
performance: createPerformanceConfig({
features: {
@@ -484,20 +493,15 @@ describe('MediaFilterController', () => {
},
);
expect(vi.mocked(executeMediaQueryForViewWithErrorDispatching)).toBeCalledWith(
host,
cameraManager,
view,
expect.anything(),
{
targetCameraID: 'camera.kitchen',
targetView: 'recordings',
},
);
expect(viewManager.setViewByParametersWithExistingQuery).toBeCalledWith({
params: expect.objectContaining({
camera: 'camera.kitchen',
view: 'recordings',
}),
});
expect(
vi
.mocked(executeMediaQueryForViewWithErrorDispatching)
.mock.calls[0][3].getQueries(),
viewManager.setViewByParametersWithExistingQuery.mock.calls[0][0]?.params?.query?.getQueries(),
).toEqual([
{
cameraIDs: new Set(['camera.kitchen']),
@@ -509,18 +513,21 @@ describe('MediaFilterController', () => {
},
]);
expect(eventListener).toBeCalled();
expect(host.requestUpdate).toBeCalled();
});
it('without favorites', async () => {
const controller = new MediaFilterController(createLitElement());
const cameraManager = createCameraManager();
vi.mocked(cameraManager.getStore).mockReturnValue(createCameraStore());
const viewManager = mock<ViewManager>();
viewManager.getView.mockReturnValue(createView());
const controller = new MediaFilterController(createLitElement());
controller.setViewManager(viewManager);
await controller.valueChangeHandler(
cameraManager,
createView(),
{},
{
mediaType: MediaFilterMediaType.Recordings,
@@ -528,10 +535,15 @@ describe('MediaFilterController', () => {
},
);
expect(viewManager.setViewByParametersWithExistingQuery).toBeCalledWith({
params: expect.objectContaining({
camera: 'camera.kitchen',
view: 'recordings',
}),
});
expect(
vi
.mocked(executeMediaQueryForViewWithErrorDispatching)
.mock.calls[0][3].getQueries(),
viewManager.setViewByParametersWithExistingQuery.mock.calls[0][0]?.params?.query?.getQueries(),
).toEqual([
{
cameraIDs: new Set(['camera.kitchen']),
@@ -575,13 +587,17 @@ describe('MediaFilterController', () => {
new Date('2024-02-29T23:59:59.999'),
],
])('%s', async (value: MediaFilterCoreWhen | string, from: Date, to: Date) => {
const controller = new MediaFilterController(createLitElement());
const cameraManager = createCameraManager();
vi.mocked(cameraManager.getStore).mockReturnValue(createCameraStore());
const viewManager = mock<ViewManager>();
viewManager.getView.mockReturnValue(createView());
const controller = new MediaFilterController(createLitElement());
controller.setViewManager(viewManager);
await controller.valueChangeHandler(
cameraManager,
createView(),
{},
{
mediaType: MediaFilterMediaType.Recordings,
@@ -590,11 +606,8 @@ describe('MediaFilterController', () => {
},
},
);
expect(
vi
.mocked(executeMediaQueryForViewWithErrorDispatching)
.mock.calls[0][3].getQueries(),
viewManager.setViewByParametersWithExistingQuery.mock.calls[0][0]?.params?.query?.getQueries(),
).toEqual([
{
cameraIDs: new Set(['camera.kitchen']),
@@ -606,13 +619,17 @@ describe('MediaFilterController', () => {
});
it('custom without values', async () => {
const controller = new MediaFilterController(createLitElement());
const cameraManager = createCameraManager();
vi.mocked(cameraManager.getStore).mockReturnValue(createCameraStore());
const viewManager = mock<ViewManager>();
viewManager.getView.mockReturnValue(createView());
const controller = new MediaFilterController(createLitElement());
controller.setViewManager(viewManager);
await controller.valueChangeHandler(
cameraManager,
createView(),
{},
{
mediaType: MediaFilterMediaType.Recordings,
@@ -623,9 +640,7 @@ describe('MediaFilterController', () => {
);
expect(
vi
.mocked(executeMediaQueryForViewWithErrorDispatching)
.mock.calls[0][3].getQueries(),
viewManager.setViewByParametersWithExistingQuery.mock.calls[0][0]?.params?.query?.getQueries(),
).toEqual([
{
cameraIDs: new Set(['camera.kitchen']),
@@ -638,24 +653,25 @@ describe('MediaFilterController', () => {
describe('should calculate correct defaults', () => {
it('with no queries', () => {
const controller = new MediaFilterController(createLitElement());
const viewManager = mock<ViewManager>();
viewManager.getView.mockReturnValue(createView());
controller.computeInitialDefaultsFromView(createCameraManager(), createView());
const controller = new MediaFilterController(createLitElement());
controller.setViewManager(viewManager);
controller.computeInitialDefaultsFromView(createCameraManager());
expect(controller.getDefaults()).toBeNull();
});
it('with no cameras', () => {
const controller = new MediaFilterController(createLitElement());
const viewManager = mock<ViewManager>();
viewManager.getView.mockReturnValue(createView());
controller.computeInitialDefaultsFromView(
createCameraManager(),
createView({
query: new EventMediaQueries([
{ type: QueryType.Event, cameraIDs: new Set(['camera.kitchen']) },
]),
}),
);
const controller = new MediaFilterController(createLitElement());
controller.setViewManager(viewManager);
controller.computeInitialDefaultsFromView(createCameraManager());
expect(controller.getDefaults()).toBeNull();
});
@@ -948,17 +964,21 @@ describe('MediaFilterController', () => {
mediaQueries: MediaQueries,
defaults: MediaFilterCoreDefaults | null,
) => {
const controller = new MediaFilterController(createLitElement());
const cameraManager = createCameraManager();
vi.mocked(cameraManager.getStore).mockReturnValue(createCameraStore());
controller.computeInitialDefaultsFromView(
cameraManager,
const viewManager = mock<ViewManager>();
viewManager.getView.mockReturnValue(
createView({
query: mediaQueries,
}),
);
const controller = new MediaFilterController(createLitElement());
controller.setViewManager(viewManager);
const cameraManager = createCameraManager();
vi.mocked(cameraManager.getStore).mockReturnValue(createCameraStore());
controller.computeInitialDefaultsFromView(cameraManager);
expect(controller.getDefaults()).toEqual(defaults);
},
);
tests/components-lib/menu-button-controller.test.ts
+1 -1
View File
@@ -6,7 +6,7 @@ import { CameraManager } from '../../src/camera-manager/manager';
import { CameraManagerCameraMetadata } from '../../src/camera-manager/types';
import { MediaPlayerManager } from '../../src/card-controller/media-player-manager';
import { MicrophoneManager } from '../../src/card-controller/microphone-manager';
import { ViewManager } from '../../src/card-controller/view-manager';
import { ViewManager } from '../../src/card-controller/view/view-manager';
import {
MenuButtonController,
MenuButtonControllerOptions,
tests/components-lib/zoom/zoom-view-context.test.ts
+19 -13
View File
@@ -1,9 +1,14 @@
import { describe, expect, it, vi } from 'vitest';
import { mock } from 'vitest-mock-extended';
import { MergeContextViewModifier } from '../../../src/card-controller/view/modifiers/merge-context';
import { ViewManager } from '../../../src/card-controller/view/view-manager';
import {
generateViewContextForZoom,
handleZoomSettingsObservedEvent,
} from '../../../src/components-lib/zoom/zoom-view-context';
vi.mock('../../../src/card-controller/view/modifiers/merge-context');
describe('generateViewContextForZoom', () => {
it('with observed', () => {
expect(
@@ -53,11 +58,9 @@ describe('generateViewContextForZoom', () => {
// @vitest-environment jsdom
it('handleZoomSettingsObservedEvent', () => {
const element = document.createElement('div');
const callback = vi.fn();
element.addEventListener('frigate-card:view:change-context', callback);
const viewManager = mock<ViewManager>();
handleZoomSettingsObservedEvent(
element,
new CustomEvent('frigate-card:zoom:change', {
detail: {
pan: { x: 1, y: 2 },
@@ -66,18 +69,21 @@ it('handleZoomSettingsObservedEvent', () => {
unzoomed: true,
},
}),
viewManager,
'target',
);
expect(callback).toBeCalledWith(
expect(viewManager.setViewByParameters).toBeCalledWith(
expect.objectContaining({
detail: {
zoom: {
target: {
observed: { pan: { x: 1, y: 2 }, zoom: 3, isDefault: true, unzoomed: true },
requested: null,
},
},
},
modifiers: [expect.any(MergeContextViewModifier)],
}),
);
expect(MergeContextViewModifier).toBeCalledWith({
zoom: {
target: {
observed: { pan: { x: 1, y: 2 }, zoom: 3, isDefault: true, unzoomed: true },
requested: null,
},
},
});
});