administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-06 19:25:22 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

use useEffect for key listeners

Browse Source
This commit is contained in:
Josh Hawkins 2023-09-15 11:06:32 -05:00
parent 3c25c578f0
commit 516344aa5b
1 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/src/components/CameraControlPanel.jsx
View File

@ -1,5 +1,5 @@
import { h } from 'preact'; import { h } from 'preact';
import { useState } from 'preact/hooks'; import { useEffect, useCallback, useState } from 'preact/hooks';
import useSWR from 'swr'; import useSWR from 'swr';
import { usePtzCommand } from '../api/ws'; import { usePtzCommand } from '../api/ws';
import ActivityIndicator from './ActivityIndicator'; import ActivityIndicator from './ActivityIndicator';
@ -44,12 +44,8 @@ export default function CameraControlPanel({ camera = '' }) {
sendPtz('STOP'); sendPtz('STOP');
}; };
if (!ptz) { const keydownListener = useCallback((e) => {
return <ActivityIndicator />; if (!ptz || !e) {
}
document.addEventListener('keydown', (e) => {
if (!e) {
return; return;
} }
@ -83,9 +79,9 @@ export default function CameraControlPanel({ camera = '' }) {
} }
} }
} }
}); }, [ptz]);
document.addEventListener('keyup', (e) => { const keyupListener = useCallback((e) => {
if (!e || e.repeat) { if (!e || e.repeat) {
return; return;
} }
@ -101,7 +97,20 @@ export default function CameraControlPanel({ camera = '' }) {
e.preventDefault(); e.preventDefault();
onSetStop(e); onSetStop(e);
} }
}); }, []);
useEffect(() => {
document.addEventListener('keydown', keydownListener);
document.addEventListener('keyup', keyupListener);
return () => {
document.removeEventListener('keydown', keydownListener);
document.removeEventListener('keyup', keyupListener);
};
}, [keydownListener, keyupListener, ptz]);
if (!ptz) {
return <ActivityIndicator />;
}
return ( return (
<div data-testid="control-panel" className="p-4 text-center sm:flex justify-start"> <div data-testid="control-panel" className="p-4 text-center sm:flex justify-start">