administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-07 03:35:26 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

formatting fixes

Browse Source
This commit is contained in:
Blake Blackshear 2023-10-06 06:51:44 -05:00
parent 86576889b1
commit acece272ab
5 changed files with 128 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/components/MultiSelect.jsx
View File

@ -61,8 +61,7 @@ export default function MultiSelect({ className, title, options, selection, onTo
className="max-h-[35px] mx-2" className="max-h-[35px] mx-2"
onClick={() => onSelectSingle(item)} onClick={() => onSelectSingle(item)}
> >
{ (title === "Labels" && config.audio.listen.includes(item)) ? ( <SpeakerIcon /> ) : ( <CameraIcon /> ) } {title === 'Labels' && config.audio.listen.includes(item) ? <SpeakerIcon /> : <CameraIcon />}
</Button> </Button>
</div> </div>
</div> </div>

69
web/src/routes/CameraMap.jsx
View File

@ -30,8 +30,8 @@ export default function CameraMasks({ camera }) {
Array.isArray(motionMask) Array.isArray(motionMask)
? motionMask.map((mask) => getPolylinePoints(mask)) ? motionMask.map((mask) => getPolylinePoints(mask))
: motionMask : motionMask
? [getPolylinePoints(motionMask)] ? [getPolylinePoints(motionMask)]
: [] : []
); );
const [zonePoints, setZonePoints] = useState( const [zonePoints, setZonePoints] = useState(
@ -45,8 +45,8 @@ export default function CameraMasks({ camera }) {
[name]: Array.isArray(objectFilters[name].mask) [name]: Array.isArray(objectFilters[name].mask)
? objectFilters[name].mask.map((mask) => getPolylinePoints(mask)) ? objectFilters[name].mask.map((mask) => getPolylinePoints(mask))
: objectFilters[name].mask : objectFilters[name].mask
? [getPolylinePoints(objectFilters[name].mask)] ? [getPolylinePoints(objectFilters[name].mask)]
: [], : [],
}), }),
{} {}
) )
@ -146,7 +146,6 @@ export default function CameraMasks({ camera }) {
} }
}, [camera, motionMaskPoints]); }, [camera, motionMaskPoints]);
// Zone methods // Zone methods
const handleEditZone = useCallback( const handleEditZone = useCallback(
(key) => { (key) => {
@ -175,9 +174,11 @@ export default function CameraMasks({ camera }) {
const handleCopyZones = useCallback(async () => { const handleCopyZones = useCallback(async () => {
const textToCopy = ` zones: const textToCopy = ` zones:
${Object.keys(zonePoints) ${Object.keys(zonePoints)
.map( .map(
(zoneName) => ` ${zoneName}: (zoneName) => ` ${zoneName}:
coordinates: ${polylinePointsToPolyline(zonePoints[zoneName])}`).join('\n')}`; coordinates: ${polylinePointsToPolyline(zonePoints[zoneName])}`
)
.join('\n')}`;
if (window.navigator.clipboard && window.navigator.clipboard.writeText) { if (window.navigator.clipboard && window.navigator.clipboard.writeText) {
// Use Clipboard API if available // Use Clipboard API if available
@ -207,7 +208,10 @@ ${Object.keys(zonePoints)
const handleSaveZones = useCallback(async () => { const handleSaveZones = useCallback(async () => {
try { try {
const queryParameters = Object.keys(zonePoints) const queryParameters = Object.keys(zonePoints)
.map((zoneName) => `cameras.${camera}.zones.${zoneName}.coordinates=${polylinePointsToPolyline(zonePoints[zoneName])}`) .map(
(zoneName) =>
`cameras.${camera}.zones.${zoneName}.coordinates=${polylinePointsToPolyline(zonePoints[zoneName])}`
)
.join('&'); .join('&');
const endpoint = `config/set?${queryParameters}`; const endpoint = `config/set?${queryParameters}`;
const response = await axios.put(endpoint); const response = await axios.put(endpoint);
@ -252,21 +256,26 @@ ${Object.keys(zonePoints)
await window.navigator.clipboard.writeText(` objects: await window.navigator.clipboard.writeText(` objects:
filters: filters:
${Object.keys(objectMaskPoints) ${Object.keys(objectMaskPoints)
.map((objectName) => .map((objectName) =>
objectMaskPoints[objectName].length objectMaskPoints[objectName].length
? ` ${objectName}: ? ` ${objectName}:
mask: ${polylinePointsToPolyline(objectMaskPoints[objectName])}` mask: ${polylinePointsToPolyline(objectMaskPoints[objectName])}`
: '' : ''
) )
.filter(Boolean) .filter(Boolean)
.join('\n')}`); .join('\n')}`);
}, [objectMaskPoints]); }, [objectMaskPoints]);
const handleSaveObjectMasks = useCallback(async () => { const handleSaveObjectMasks = useCallback(async () => {
try { try {
const queryParameters = Object.keys(objectMaskPoints) const queryParameters = Object.keys(objectMaskPoints)
.filter((objectName) => objectMaskPoints[objectName].length > 0) .filter((objectName) => objectMaskPoints[objectName].length > 0)
.map((objectName, index) => `cameras.${camera}.objects.filters.${objectName}.mask.${index}=${polylinePointsToPolyline(objectMaskPoints[objectName])}`) .map(
(objectName, index) =>
`cameras.${camera}.objects.filters.${objectName}.mask.${index}=${polylinePointsToPolyline(
objectMaskPoints[objectName]
)}`
)
.join('&'); .join('&');
const endpoint = `config/set?${queryParameters}`; const endpoint = `config/set?${queryParameters}`;
const response = await axios.put(endpoint); const response = await axios.put(endpoint);
@ -324,8 +333,8 @@ ${Object.keys(objectMaskPoints)
<Card <Card
content={ content={
<p> <p>
When done, copy each mask configuration into your <code className="font-mono">config.yml</code> file When done, copy each mask configuration into your <code className="font-mono">config.yml</code> file restart
restart your Frigate instance to save your changes. your Frigate instance to save your changes.
</p> </p>
} }
header="Warning" header="Warning"
@ -487,16 +496,16 @@ function EditableMask({ onChange, points, scale, snap, width, height }) {
{!scaledPoints {!scaledPoints
? null ? null
: scaledPoints.map(([x, y], i) => ( : scaledPoints.map(([x, y], i) => (
<PolyPoint <PolyPoint
key={i} key={i}
boundingRef={boundingRef} boundingRef={boundingRef}
index={i} index={i}
onMove={handleMovePoint} onMove={handleMovePoint}
onRemove={handleRemovePoint} onRemove={handleRemovePoint}
x={x + MaskInset} x={x + MaskInset}
y={y + MaskInset} y={y + MaskInset}
/> />
))} ))}
<div className="absolute inset-0 right-0 bottom-0" onClick={handleAddPoint} ref={boundingRef} /> <div className="absolute inset-0 right-0 bottom-0" onClick={handleAddPoint} ref={boundingRef} />
<svg <svg
width="100%" width="100%"
@ -569,8 +578,6 @@ function MaskValues({
[onAdd] [onAdd]
); );
return ( return (
<div className="overflow-hidden" onMouseOver={handleMousein} onMouseOut={handleMouseout}> <div className="overflow-hidden" onMouseOver={handleMousein} onMouseOut={handleMouseout}>
<div className="flex space-x-4"> <div className="flex space-x-4">

8
web/src/routes/Config.jsx
View File

@ -61,9 +61,9 @@ export default function Config() {
let yamlModel; let yamlModel;
if (editor.getModels().length > 0) { if (editor.getModels().length > 0) {
yamlModel = editor.getModel(modelUri) yamlModel = editor.getModel(modelUri);
} else { } else {
yamlModel = editor.createModel(config, 'yaml', modelUri) yamlModel = editor.createModel(config, 'yaml', modelUri);
} }
setDiagnosticsOptions({ setDiagnosticsOptions({
@ -100,10 +100,10 @@ export default function Config() {
<Button className="mx-2" onClick={(e) => handleCopyConfig(e)}> <Button className="mx-2" onClick={(e) => handleCopyConfig(e)}>
Copy Config Copy Config
</Button> </Button>
<Button className="mx-2" onClick={(e) => onHandleSaveConfig(e, "restart")}> <Button className="mx-2" onClick={(e) => onHandleSaveConfig(e, 'restart')}>
Save & Restart Save & Restart
</Button> </Button>
<Button className="mx-2" onClick={(e) => onHandleSaveConfig(e, "saveonly")}> <Button className="mx-2" onClick={(e) => onHandleSaveConfig(e, 'saveonly')}>
Save Only Save Only
</Button> </Button>
</div> </div>

14
web/src/routes/Events.jsx
View File

@ -419,13 +419,13 @@ export default function Events({ path, ...props }) {
downloadEvent.end_time && downloadEvent.end_time &&
downloadEvent.has_snapshot && downloadEvent.has_snapshot &&
!downloadEvent.plus_id && ( !downloadEvent.plus_id && (
<MenuItem <MenuItem
icon={UploadPlus} icon={UploadPlus}
label={uploading.includes(downloadEvent.id) ? 'Uploading...' : 'Send to Frigate+'} label={uploading.includes(downloadEvent.id) ? 'Uploading...' : 'Send to Frigate+'}
value="plus" value="plus"
onSelect={() => showSubmitToPlus(downloadEvent.id, downloadEvent.label, downloadEvent.box)} onSelect={() => showSubmitToPlus(downloadEvent.id, downloadEvent.label, downloadEvent.box)}
/> />
)} )}
{downloadEvent.plus_id && ( {downloadEvent.plus_id && (
<MenuItem <MenuItem
icon={UploadPlus} icon={UploadPlus}

148
web/src/routes/System.jsx
View File

@ -334,80 +334,86 @@ export default function System() {
<ActivityIndicator /> <ActivityIndicator />
) : ( ) : (
<div data-testid="cameras" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4"> <div data-testid="cameras" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
{cameraNames.map((camera) => ( config.cameras[camera]["enabled"] && ( {cameraNames.map(
<div key={camera} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow"> (camera) =>
<div className="capitalize text-lg flex justify-between p-4"> config.cameras[camera]['enabled'] && (
<Link href={`/cameras/${camera}`}>{camera.replaceAll('_', ' ')}</Link> <div
<Button onClick={(e) => onHandleFfprobe(camera, e)}>ffprobe</Button> key={camera}
</div> className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow"
<div className="p-2"> >
<Table className="w-full"> <div className="capitalize text-lg flex justify-between p-4">
<Thead> <Link href={`/cameras/${camera}`}>{camera.replaceAll('_', ' ')}</Link>
<Tr> <Button onClick={(e) => onHandleFfprobe(camera, e)}>ffprobe</Button>
<Th>Process</Th> </div>
<Th>P-ID</Th> <div className="p-2">
<Th>FPS</Th> <Table className="w-full">
<Th>CPU %</Th> <Thead>
<Th>Memory %</Th> <Tr>
{config.telemetry.network_bandwidth && <Th>Network Bandwidth</Th>} <Th>Process</Th>
</Tr> <Th>P-ID</Th>
</Thead> <Th>FPS</Th>
<Tbody> <Th>CPU %</Th>
<Tr key="ffmpeg" index="0"> <Th>Memory %</Th>
<Td> {config.telemetry.network_bandwidth && <Th>Network Bandwidth</Th>}
ffmpeg </Tr>
<Button </Thead>
className="rounded-full" <Tbody>
type="text" <Tr key="ffmpeg" index="0">
color="gray" <Td>
aria-label={cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cmdline']} ffmpeg
onClick={() => copy(cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cmdline'])} <Button
> className="rounded-full"
<About className="w-3" /> type="text"
</Button> color="gray"
</Td> aria-label={cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cmdline']}
<Td>{cameras[camera]['ffmpeg_pid'] || '- '}</Td> onClick={() => copy(cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cmdline'])}
<Td>{cameras[camera]['camera_fps'] || '- '}</Td> >
<Td>{cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cpu'] || '- '}%</Td> <About className="w-3" />
<Td>{cpu_usages[cameras[camera]['ffmpeg_pid']]?.['mem'] || '- '}%</Td> </Button>
{config.telemetry.network_bandwidth && ( </Td>
<Td>{bandwidth_usages[cameras[camera]['ffmpeg_pid']]?.['bandwidth'] || '- '}KB/s</Td> <Td>{cameras[camera]['ffmpeg_pid'] || '- '}</Td>
)} <Td>{cameras[camera]['camera_fps'] || '- '}</Td>
</Tr> <Td>{cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cpu'] || '- '}%</Td>
<Tr key="capture" index="1"> <Td>{cpu_usages[cameras[camera]['ffmpeg_pid']]?.['mem'] || '- '}%</Td>
<Td>Capture</Td> {config.telemetry.network_bandwidth && (
<Td>{cameras[camera]['capture_pid'] || '- '}</Td> <Td>{bandwidth_usages[cameras[camera]['ffmpeg_pid']]?.['bandwidth'] || '- '}KB/s</Td>
<Td>{cameras[camera]['process_fps'] || '- '}</Td> )}
<Td>{cpu_usages[cameras[camera]['capture_pid']]?.['cpu'] || '- '}%</Td> </Tr>
<Td>{cpu_usages[cameras[camera]['capture_pid']]?.['mem'] || '- '}%</Td> <Tr key="capture" index="1">
{config.telemetry.network_bandwidth && <Td>-</Td>} <Td>Capture</Td>
</Tr> <Td>{cameras[camera]['capture_pid'] || '- '}</Td>
<Tr key="detect" index="2"> <Td>{cameras[camera]['process_fps'] || '- '}</Td>
<Td>Detect</Td> <Td>{cpu_usages[cameras[camera]['capture_pid']]?.['cpu'] || '- '}%</Td>
<Td>{cameras[camera]['pid'] || '- '}</Td> <Td>{cpu_usages[cameras[camera]['capture_pid']]?.['mem'] || '- '}%</Td>
{config.telemetry.network_bandwidth && <Td>-</Td>}
</Tr>
<Tr key="detect" index="2">
<Td>Detect</Td>
<Td>{cameras[camera]['pid'] || '- '}</Td>
{(() => { {(() => {
if (cameras[camera]['pid'] && cameras[camera]['detection_enabled'] == 1) if (cameras[camera]['pid'] && cameras[camera]['detection_enabled'] == 1)
return ( return (
<Td> <Td>
{cameras[camera]['detection_fps']} ({cameras[camera]['skipped_fps']} skipped) {cameras[camera]['detection_fps']} ({cameras[camera]['skipped_fps']} skipped)
</Td> </Td>
); );
else if (cameras[camera]['pid'] && cameras[camera]['detection_enabled'] == 0) else if (cameras[camera]['pid'] && cameras[camera]['detection_enabled'] == 0)
return <Td>disabled</Td>; return <Td>disabled</Td>;
return <Td>- </Td>; return <Td>- </Td>;
})()} })()}
<Td>{cpu_usages[cameras[camera]['pid']]?.['cpu'] || '- '}%</Td> <Td>{cpu_usages[cameras[camera]['pid']]?.['cpu'] || '- '}%</Td>
<Td>{cpu_usages[cameras[camera]['pid']]?.['mem'] || '- '}%</Td> <Td>{cpu_usages[cameras[camera]['pid']]?.['mem'] || '- '}%</Td>
{config.telemetry.network_bandwidth && <Td>-</Td>} {config.telemetry.network_bandwidth && <Td>-</Td>}
</Tr> </Tr>
</Tbody> </Tbody>
</Table> </Table>
</div> </div>
</div> ) </div>
))} )
)}
</div> </div>
)} )}