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

fix: added padding back

Browse Source
This commit is contained in:
JohnMark Sill 2022-01-13 11:32:04 -06:00
parent 3cbffe83f8
commit d8b8be90ef
6 changed files with 114 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/routes/Birdseye.jsx
View File

@ -4,10 +4,10 @@ import Heading from '../components/Heading';
export default function Birdseye() { export default function Birdseye() {
return ( return (
<div className="space-y-4"> <div className='space-y-4 p-2 px-4'>
<Heading size="2xl">Birdseye</Heading> <Heading size='2xl'>Birdseye</Heading>
<div> <div>
<JSMpegPlayer camera="birdseye" /> <JSMpegPlayer camera='birdseye' />
</div> </div>
</div> </div>
); );

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

@ -20,10 +20,7 @@ export default function CameraMasks({ camera, url }) {
zones, zones,
} = cameraConfig; } = cameraConfig;
const { const { width, height } = cameraConfig.detect;
width,
height,
} = cameraConfig.detect;
const [{ width: scaledWidth }] = useResizeObserver(imageRef); const [{ width: scaledWidth }] = useResizeObserver(imageRef);
const imageScale = scaledWidth / width; const imageScale = scaledWidth / width;
@ -199,22 +196,22 @@ ${Object.keys(objectMaskPoints)
); );
return ( return (
<div className="flex-col space-y-4"> <div className='flex-col space-y-4 p-2 px-4'>
<Heading size="2xl">{camera} mask & zone creator</Heading> <Heading size='2xl'>{camera} mask & zone creator</Heading>
<Card <Card
content={ content={
<p> <p>
This tool can help you create masks & zones for your {camera} camera. When done, copy each mask This tool can help you create masks & zones for your {camera} camera. When done, copy each mask
configuration into your <code className="font-mono">config.yml</code> file restart your Frigate instance to configuration into your <code className='font-mono'>config.yml</code> file restart your Frigate instance to
save your changes. save your changes.
</p> </p>
} }
header="Warning" header='Warning'
/> />
<div className="space-y-4"> <div className='space-y-4'>
<div className="relative"> <div className='relative'>
<img ref={imageRef} src={`${apiHost}/api/${camera}/latest.jpg`} /> <img ref={imageRef} src={`${apiHost}/api/${camera}/latest.jpg`} />
<EditableMask <EditableMask
onChange={handleUpdateEditable} onChange={handleUpdateEditable}
@ -225,15 +222,15 @@ ${Object.keys(objectMaskPoints)
height={height} height={height}
/> />
</div> </div>
<div className="max-w-xs"> <div className='max-w-xs'>
<Switch checked={snap} label="Snap to edges" labelPosition="after" onChange={handleChangeSnap} /> <Switch checked={snap} label='Snap to edges' labelPosition='after' onChange={handleChangeSnap} />
</div> </div>
</div> </div>
<div className="flex-col space-y-4"> <div className='flex-col space-y-4'>
<MaskValues <MaskValues
editing={editing} editing={editing}
title="Motion masks" title='Motion masks'
onCopy={handleCopyMotionMasks} onCopy={handleCopyMotionMasks}
onCreate={handleAddMask} onCreate={handleAddMask}
onEdit={handleEditMask} onEdit={handleEditMask}
@ -245,20 +242,20 @@ ${Object.keys(objectMaskPoints)
<MaskValues <MaskValues
editing={editing} editing={editing}
title="Zones" title='Zones'
onCopy={handleCopyZones} onCopy={handleCopyZones}
onCreate={handleAddZone} onCreate={handleAddZone}
onEdit={handleEditZone} onEdit={handleEditZone}
onRemove={handleRemoveZone} onRemove={handleRemoveZone}
points={zonePoints} points={zonePoints}
yamlPrefix="zones:" yamlPrefix='zones:'
yamlKeyPrefix={zoneYamlKeyPrefix} yamlKeyPrefix={zoneYamlKeyPrefix}
/> />
<MaskValues <MaskValues
isMulti isMulti
editing={editing} editing={editing}
title="Object masks" title='Object masks'
onAdd={handleAddToObjectMask} onAdd={handleAddToObjectMask}
onCopy={handleCopyObjectMasks} onCopy={handleCopyObjectMasks}
onCreate={handleAddObjectMask} onCreate={handleAddObjectMask}
@ -357,7 +354,7 @@ function EditableMask({ onChange, points, scale, snap, width, height }) {
return ( return (
<div <div
className="absolute" className='absolute'
style={`top: -${MaskInset}px; right: -${MaskInset}px; bottom: -${MaskInset}px; left: -${MaskInset}px`} style={`top: -${MaskInset}px; right: -${MaskInset}px; bottom: -${MaskInset}px; left: -${MaskInset}px`}
> >
{!scaledPoints {!scaledPoints
@ -372,16 +369,16 @@ function EditableMask({ onChange, points, scale, snap, width, height }) {
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%'
height="100%" height='100%'
className="absolute pointer-events-none" className='absolute pointer-events-none'
style={`top: ${MaskInset}px; right: ${MaskInset}px; bottom: ${MaskInset}px; left: ${MaskInset}px`} style={`top: ${MaskInset}px; right: ${MaskInset}px; bottom: ${MaskInset}px; left: ${MaskInset}px`}
> >
{!scaledPoints ? null : ( {!scaledPoints ? null : (
<g> <g>
<polyline points={polylinePointsToPolyline(scaledPoints)} fill="rgba(244,0,0,0.5)" /> <polyline points={polylinePointsToPolyline(scaledPoints)} fill='rgba(244,0,0,0.5)' />
</g> </g>
)} )}
</svg> </svg>
@ -444,15 +441,15 @@ function MaskValues({
); );
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'>
<Heading className="flex-grow self-center" size="base"> <Heading className='flex-grow self-center' size='base'>
{title} {title}
</Heading> </Heading>
<Button onClick={onCopy}>Copy</Button> <Button onClick={onCopy}>Copy</Button>
<Button onClick={onCreate}>Add</Button> <Button onClick={onCreate}>Add</Button>
</div> </div>
<pre className="relative overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2"> <pre className='relative overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2'>
{yamlPrefix} {yamlPrefix}
{Object.keys(points).map((mainkey) => { {Object.keys(points).map((mainkey) => {
if (isMulti) { if (isMulti) {
@ -460,7 +457,7 @@ function MaskValues({
<div> <div>
{` ${mainkey}:\n mask:\n`} {` ${mainkey}:\n mask:\n`}
{onAdd && showButtons ? ( {onAdd && showButtons ? (
<Button className="absolute -mt-12 right-0 font-sans" data-key={mainkey} onClick={handleAdd}> <Button className='absolute -mt-12 right-0 font-sans' data-key={mainkey} onClick={handleAdd}>
{`Add to ${mainkey}`} {`Add to ${mainkey}`}
</Button> </Button>
) : null} ) : null}
@ -506,13 +503,13 @@ function Item({ mainkey, subkey, editing, handleEdit, points, showButtons, handl
editing.key === mainkey && editing.subkey === subkey ? 'text-blue-800 dark:text-blue-600' : '' editing.key === mainkey && editing.subkey === subkey ? 'text-blue-800 dark:text-blue-600' : ''
}`} }`}
onClick={handleEdit} onClick={handleEdit}
title="Click to edit" title='Click to edit'
> >
{`${yamlKeyPrefix(points, mainkey, subkey)}${polylinePointsToPolyline(points)}`} {`${yamlKeyPrefix(points, mainkey, subkey)}${polylinePointsToPolyline(points)}`}
{showButtons ? ( {showButtons ? (
<Button <Button
className="absolute top-0 right-0" className='absolute top-0 right-0'
color="red" color='red'
data-key={mainkey} data-key={mainkey}
data-subkey={subkey} data-subkey={subkey}
onClick={handleRemove} onClick={handleRemove}

20
web/src/routes/Debug.jsx
View File

@ -33,9 +33,9 @@ export default function Debug() {
}, [config]); }, [config]);
return ( return (
<div className="space-y-4"> <div className='space-y-4 p-2 px-4'>
<Heading> <Heading>
Debug <span className="text-sm">{service.version}</span> Debug <span className='text-sm'>{service.version}</span>
</Heading> </Heading>
{!detectors ? ( {!detectors ? (
@ -44,8 +44,8 @@ export default function Debug() {
</div> </div>
) : ( ) : (
<Fragment> <Fragment>
<div data-testid="detectors" className="min-w-0 overflow-auto"> <div data-testid='detectors' className='min-w-0 overflow-auto'>
<Table className="w-full"> <Table className='w-full'>
<Thead> <Thead>
<Tr> <Tr>
<Th>detector</Th> <Th>detector</Th>
@ -67,8 +67,8 @@ export default function Debug() {
</Table> </Table>
</div> </div>
<div data-testid="cameras" className="min-w-0 overflow-auto"> <div data-testid='cameras' className='min-w-0 overflow-auto'>
<Table className="w-full"> <Table className='w-full'>
<Thead> <Thead>
<Tr> <Tr>
<Th>camera</Th> <Th>camera</Th>
@ -96,12 +96,12 @@ export default function Debug() {
</Fragment> </Fragment>
)} )}
<div className="relative"> <div className='relative'>
<Heading size="sm">Config</Heading> <Heading size='sm'>Config</Heading>
<Button className="absolute top-8 right-4" onClick={handleCopyConfig}> <Button className='absolute top-8 right-4' onClick={handleCopyConfig}>
Copy to Clipboard Copy to Clipboard
</Button> </Button>
<pre className="overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2 max-h-96"> <pre className='overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2 max-h-96'>
{JSON.stringify(config, null, 2)} {JSON.stringify(config, null, 2)}
</pre> </pre>
</div> </div>

8
web/src/routes/Events/index.jsx
View File

@ -81,11 +81,11 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
[apiHost, handleFilter, pathname, scrollToRef] [apiHost, handleFilter, pathname, scrollToRef]
); );
return ( return (
<div className="space-y-4 w-full"> <div className='space-y-4 p-2 px-4 w-full'>
<Heading>Events</Heading> <Heading>Events</Heading>
<Filters onChange={handleFilter} searchParams={searchParams} /> <Filters onChange={handleFilter} searchParams={searchParams} />
<div className="min-w-0 overflow-auto"> <div className='min-w-0 overflow-auto'>
<Table className="min-w-full table-fixed"> <Table className='min-w-full table-fixed'>
<TableHead /> <TableHead />
{events.map((props, idx) => { {events.map((props, idx) => {
@ -95,7 +95,7 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
<Tfoot> <Tfoot>
<Tr> <Tr>
<Td className="text-center p-4" colSpan="8"> <Td className='text-center p-4' colSpan='8'>
{status === FetchStatus.LOADING ? <ActivityIndicator /> : reachedEnd ? 'No more events' : null} {status === FetchStatus.LOADING ? <ActivityIndicator /> : reachedEnd ? 'No more events' : null}
</Td> </Td>
</Tr> </Tr>

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

@ -16,10 +16,10 @@ export default function Recording({ camera, date, hour, seconds }) {
if (data.length === 0) { if (data.length === 0) {
return ( return (
<div className="space-y-4"> <div className='space-y-4'>
<Heading>{camera} Recordings</Heading> <Heading>{camera} Recordings</Heading>
<div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role="alert"> <div class='bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4' role='alert'>
<p class="font-bold">No Recordings Found</p> <p class='font-bold'>No Recordings Found</p>
<p>Make sure you have enabled the record role in your configuration for the {camera} camera.</p> <p>Make sure you have enabled the record role in your configuration for the {camera} camera.</p>
</div> </div>
</div> </div>
@ -69,7 +69,7 @@ export default function Recording({ camera, date, hour, seconds }) {
} }
return ( return (
<div className="space-y-4"> <div className='space-y-4 p-2 px-4'>
<Heading>{camera} Recordings</Heading> <Heading>{camera} Recordings</Heading>
<VideoPlayer <VideoPlayer

82
web/src/routes/StyleGuide.jsx
View File

@ -25,47 +25,47 @@ export default function StyleGuide() {
}; };
return ( return (
<div> <div className='p-2 px-4'>
<Heading size="md">Button</Heading> <Heading size='md'>Button</Heading>
<div className="flex space-x-4 mb-4"> <div className='flex space-x-4 mb-4'>
<Button>Default</Button> <Button>Default</Button>
<Button color="red">Danger</Button> <Button color='red'>Danger</Button>
<Button color="green">Save</Button> <Button color='green'>Save</Button>
<Button color="gray">Gray</Button> <Button color='gray'>Gray</Button>
<Button disabled>Disabled</Button> <Button disabled>Disabled</Button>
</div> </div>
<div className="flex space-x-4 mb-4"> <div className='flex space-x-4 mb-4'>
<Button type="text">Default</Button> <Button type='text'>Default</Button>
<Button color="red" type="text"> <Button color='red' type='text'>
Danger Danger
</Button> </Button>
<Button color="green" type="text"> <Button color='green' type='text'>
Save Save
</Button> </Button>
<Button color="gray" type="text"> <Button color='gray' type='text'>
Gray Gray
</Button> </Button>
<Button disabled type="text"> <Button disabled type='text'>
Disabled Disabled
</Button> </Button>
</div> </div>
<div className="flex space-x-4 mb-4"> <div className='flex space-x-4 mb-4'>
<Button type="outlined">Default</Button> <Button type='outlined'>Default</Button>
<Button color="red" type="outlined"> <Button color='red' type='outlined'>
Danger Danger
</Button> </Button>
<Button color="green" type="outlined"> <Button color='green' type='outlined'>
Save Save
</Button> </Button>
<Button color="gray" type="outlined"> <Button color='gray' type='outlined'>
Gray Gray
</Button> </Button>
<Button disabled type="outlined"> <Button disabled type='outlined'>
Disabled Disabled
</Button> </Button>
</div> </div>
<Heading size="md">Dialog</Heading> <Heading size='md'>Dialog</Heading>
<Button <Button
onClick={() => { onClick={() => {
setShowDialog(true); setShowDialog(true);
@ -76,8 +76,8 @@ export default function StyleGuide() {
{showDialog ? ( {showDialog ? (
<Dialog <Dialog
onDismiss={handleDismissDialog} onDismiss={handleDismissDialog}
title="This is a dialog" title='This is a dialog'
text="Would you like to see more?" text='Would you like to see more?'
actions={[ actions={[
{ text: 'Yes', color: 'red', onClick: handleDismissDialog }, { text: 'Yes', color: 'red', onClick: handleDismissDialog },
{ text: 'No', onClick: handleDismissDialog }, { text: 'No', onClick: handleDismissDialog },
@ -85,41 +85,41 @@ export default function StyleGuide() {
/> />
) : null} ) : null}
<Heading size="md">Switch</Heading> <Heading size='md'>Switch</Heading>
<div className="flex-col space-y-4 max-w-4xl"> <div className='flex-col space-y-4 max-w-4xl'>
<Switch label="Disabled, off" labelPosition="after" /> <Switch label='Disabled, off' labelPosition='after' />
<Switch label="Disabled, on" labelPosition="after" checked /> <Switch label='Disabled, on' labelPosition='after' checked />
<Switch <Switch
label="Enabled, (off initial)" label='Enabled, (off initial)'
labelPosition="after" labelPosition='after'
checked={switches[0]} checked={switches[0]}
id={0} id={0}
onChange={handleSwitch} onChange={handleSwitch}
/> />
<Switch <Switch
label="Enabled, (on initial)" label='Enabled, (on initial)'
labelPosition="after" labelPosition='after'
checked={switches[1]} checked={switches[1]}
id={1} id={1}
onChange={handleSwitch} onChange={handleSwitch}
/> />
<Switch checked={switches[2]} id={2} label="Label before" onChange={handleSwitch} /> <Switch checked={switches[2]} id={2} label='Label before' onChange={handleSwitch} />
<Switch checked={switches[3]} id={3} label="Label after" labelPosition="after" onChange={handleSwitch} /> <Switch checked={switches[3]} id={3} label='Label after' labelPosition='after' onChange={handleSwitch} />
</div> </div>
<Heading size="md">Select</Heading> <Heading size='md'>Select</Heading>
<div className="flex space-x-4 mb-4 max-w-4xl"> <div className='flex space-x-4 mb-4 max-w-4xl'>
<Select label="Basic select box" options={['All', 'None', 'Other']} selected="None" /> <Select label='Basic select box' options={['All', 'None', 'Other']} selected='None' />
</div> </div>
<Heading size="md">TextField</Heading> <Heading size='md'>TextField</Heading>
<div className="flex-col space-y-4 max-w-4xl"> <div className='flex-col space-y-4 max-w-4xl'>
<TextField label="Default text field" /> <TextField label='Default text field' />
<TextField label="Pre-filled" value="This is my pre-filled value" /> <TextField label='Pre-filled' value='This is my pre-filled value' />
<TextField label="With help" helpText="This is some help text" /> <TextField label='With help' helpText='This is some help text' />
<TextField label="Leading icon" leadingIcon={ArrowDropdown} /> <TextField label='Leading icon' leadingIcon={ArrowDropdown} />
<TextField label="Trailing icon" trailingIcon={ArrowDropup} /> <TextField label='Trailing icon' trailingIcon={ArrowDropup} />
</div> </div>
</div> </div>
); );