change MQTT to toggle recordings instead of clips

This commit is contained in:
Jason Hunter
2021-07-11 15:49:10 -04:00
committed by Blake Blackshear
parent 181a504a14
commit c527b1ca5d
6 changed files with 37 additions and 37 deletions

View File

@@ -107,12 +107,12 @@ describe('MqttProvider', () => {
);
});
test('prefills the clips/detect/snapshots state from config', async () => {
test('prefills the recordings/detect/snapshots state from config', async () => {
jest.spyOn(Date, 'now').mockReturnValue(123456);
const config = {
cameras: {
front: { name: 'front', detect: { enabled: true }, clips: { enabled: false }, snapshots: { enabled: true } },
side: { name: 'side', detect: { enabled: false }, clips: { enabled: false }, snapshots: { enabled: false } },
front: { name: 'front', detect: { enabled: true }, record: { enabled: false }, snapshots: { enabled: true } },
side: { name: 'side', detect: { enabled: false }, record: { enabled: false }, snapshots: { enabled: false } },
},
};
render(
@@ -122,10 +122,10 @@ describe('MqttProvider', () => {
);
await screen.findByTestId('data');
expect(screen.getByTestId('front/detect/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"ON"}');
expect(screen.getByTestId('front/clips/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"OFF"}');
expect(screen.getByTestId('front/recordings/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"OFF"}');
expect(screen.getByTestId('front/snapshots/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"ON"}');
expect(screen.getByTestId('side/detect/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"OFF"}');
expect(screen.getByTestId('side/clips/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"OFF"}');
expect(screen.getByTestId('side/recordings/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"OFF"}');
expect(screen.getByTestId('side/snapshots/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"OFF"}');
});
});

View File

@@ -41,8 +41,8 @@ export function MqttProvider({
useEffect(() => {
Object.keys(config.cameras).forEach((camera) => {
const { name, clips, detect, snapshots } = config.cameras[camera];
dispatch({ topic: `${name}/clips/state`, payload: clips.enabled ? 'ON' : 'OFF' });
const { name, record, detect, snapshots } = config.cameras[camera];
dispatch({ topic: `${name}/recordings/state`, payload: record.enabled ? 'ON' : 'OFF' });
dispatch({ topic: `${name}/detect/state`, payload: detect.enabled ? 'ON' : 'OFF' });
dispatch({ topic: `${name}/snapshots/state`, payload: snapshots.enabled ? 'ON' : 'OFF' });
});
@@ -101,12 +101,12 @@ export function useDetectState(camera) {
return { payload, send, connected };
}
export function useClipsState(camera) {
export function useRecordingsState(camera) {
const {
value: { payload },
send,
connected,
} = useMqtt(`${camera}/clips/state`, `${camera}/clips/set`);
} = useMqtt(`${camera}/recordings/state`, `${camera}/recordings/set`);
return { payload, send, connected };
}

View File

@@ -5,7 +5,7 @@ import CameraImage from '../components/CameraImage';
import ClipIcon from '../icons/Clip';
import MotionIcon from '../icons/Motion';
import SnapshotIcon from '../icons/Snapshot';
import { useDetectState, useClipsState, useSnapshotsState } from '../api/mqtt';
import { useDetectState, useRecordingsState, useSnapshotsState } from '../api/mqtt';
import { useConfig, FetchStatus } from '../api';
import { useMemo } from 'preact/hooks';
@@ -25,7 +25,7 @@ export default function Cameras() {
function Camera({ name, conf }) {
const { payload: detectValue, send: sendDetect } = useDetectState(name);
const { payload: clipValue, send: sendClips } = useClipsState(name);
const { payload: recordValue, send: sendRecordings } = useRecordingsState(name);
const { payload: snapshotValue, send: sendSnapshots } = useSnapshotsState(name);
const href = `/cameras/${name}`;
const buttons = useMemo(() => {
@@ -46,11 +46,11 @@ function Camera({ name, conf }) {
},
},
{
name: `Toggle clips ${clipValue === 'ON' ? 'off' : 'on'}`,
name: `Toggle recordings ${recordValue === 'ON' ? 'off' : 'on'}`,
icon: ClipIcon,
color: clipValue === 'ON' ? 'blue' : 'gray',
color: recordValue === 'ON' ? 'blue' : 'gray',
onClick: () => {
sendClips(clipValue === 'ON' ? 'OFF' : 'ON');
sendRecordings(recordValue === 'ON' ? 'OFF' : 'ON');
},
},
{
@@ -62,7 +62,7 @@ function Camera({ name, conf }) {
},
},
],
[detectValue, sendDetect, clipValue, sendClips, snapshotValue, sendSnapshots]
[detectValue, sendDetect, recordValue, sendRecordings, snapshotValue, sendSnapshots]
);
return (

View File

@@ -51,13 +51,13 @@ describe('Cameras Route', () => {
test('buttons toggle detect, clips, and snapshots', async () => {
const sendDetect = jest.fn();
const sendClips = jest.fn();
const sendRecordings = jest.fn();
const sendSnapshots = jest.fn();
jest.spyOn(Mqtt, 'useDetectState').mockImplementation(() => {
return { payload: 'ON', send: sendDetect };
});
jest.spyOn(Mqtt, 'useClipsState').mockImplementation(() => {
return { payload: 'OFF', send: sendClips };
jest.spyOn(Mqtt, 'useRecordingsState').mockImplementation(() => {
return { payload: 'OFF', send: sendRecordings };
});
jest.spyOn(Mqtt, 'useSnapshotsState').mockImplementation(() => {
return { payload: 'ON', send: sendSnapshots };
@@ -72,11 +72,11 @@ describe('Cameras Route', () => {
fireEvent.click(screen.getAllByLabelText('Toggle snapshots off')[0]);
expect(sendSnapshots).toHaveBeenCalledWith('OFF');
fireEvent.click(screen.getAllByLabelText('Toggle clips on')[0]);
expect(sendClips).toHaveBeenCalledWith('ON');
fireEvent.click(screen.getAllByLabelText('Toggle recordings on')[0]);
expect(sendRecordings).toHaveBeenCalledWith('ON');
expect(sendDetect).toHaveBeenCalledTimes(1);
expect(sendSnapshots).toHaveBeenCalledTimes(1);
expect(sendClips).toHaveBeenCalledTimes(1);
expect(sendRecordings).toHaveBeenCalledTimes(1);
});
});