Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

fix(web): remove cards from event page

Browse Source
This commit is contained in:
Paul Armstrong 2021-02-04 16:24:04 -08:00 committed by Blake Blackshear
parent e50cc59f0d
commit c89e1a5735
2 changed files with 46 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/package.json
View File

@ -2,7 +2,7 @@
"name": "frigate", "name": "frigate",
"private": true, "private": true,
"scripts": { "scripts": {
"start": "cross-env SNOWPACK_PUBLIC_API_HOST=http://localhost:5000 snowpack dev", "start": "cross-env SNOWPACK_PUBLIC_API_HOST=http://10.0.1.210:5000 snowpack dev",
"prebuild": "rimraf build", "prebuild": "rimraf build",
"build": "cross-env NODE_ENV=production snowpack build" "build": "cross-env NODE_ENV=production snowpack build"
}, },

97
web/src/Event.jsx
View File

@ -1,6 +1,5 @@
import { h, Fragment } from 'preact'; import { h, Fragment } from 'preact';
import ActivityIndicator from './components/ActivityIndicator'; import ActivityIndicator from './components/ActivityIndicator';
import Card from './components/Card';
import Heading from './components/Heading'; import Heading from './components/Heading';
import Link from './components/Link'; import Link from './components/Link';
import { FetchStatus, useApiHost, useEvent } from './api'; import { FetchStatus, useApiHost, useEvent } from './api';
@ -23,59 +22,53 @@ export default function Event({ eventId }) {
{data.camera} {data.label} <span className="text-sm">{startime.toLocaleString()}</span> {data.camera} {data.label} <span className="text-sm">{startime.toLocaleString()}</span>
</Heading> </Heading>
<Card> <Table class="w-full">
{data.has_clip ? ( <Thead>
<Fragment> <Th>Key</Th>
<Heading size="sm">Clip</Heading> <Th>Value</Th>
<video className="w-100" src={`${apiHost}/clips/${data.camera}-${eventId}.mp4`} controls /> </Thead>
</Fragment> <Tbody>
) : ( <Tr>
<p>No clip available</p> <Td>Camera</Td>
)} <Td>
</Card> <Link href={`/cameras/${data.camera}`}>{data.camera}</Link>
</Td>
</Tr>
<Tr index={1}>
<Td>Timeframe</Td>
<Td>
{startime.toLocaleString()} – {endtime.toLocaleString()}
</Td>
</Tr>
<Tr>
<Td>Score</Td>
<Td>{(data.top_score * 100).toFixed(2)}%</Td>
</Tr>
<Tr index={1}>
<Td>Zones</Td>
<Td>{data.zones.join(', ')}</Td>
</Tr>
</Tbody>
</Table>
<Card> {data.has_clip ? (
<Heading size="sm">{data.has_snapshot ? 'Best image' : 'Thumbnail'}</Heading> <Fragment>
<img <Heading size="sm">Clip</Heading>
src={ <video autoplay className="w-100" src={`${apiHost}/clips/${data.camera}-${eventId}.mp4`} controls />
data.has_snapshot </Fragment>
? `${apiHost}/clips/${data.camera}-${eventId}.jpg` ) : (
: `data:image/jpeg;base64,${data.thumbnail}` <p>No clip available</p>
} )}
alt={`${data.label} at ${(data.top_score * 100).toFixed(1)}% confidence`}
/>
</Card>
<Card> <Heading size="sm">{data.has_snapshot ? 'Best image' : 'Thumbnail'}</Heading>
<Table> <img
<Thead> src={
<Th>Key</Th> data.has_snapshot
<Th>Value</Th> ? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
</Thead> : `data:image/jpeg;base64,${data.thumbnail}`
<Tbody> }
<Tr> alt={`${data.label} at ${(data.top_score * 100).toFixed(1)}% confidence`}
<Td>Camera</Td> />
<Td>
<Link href={`/cameras/${data.camera}`}>{data.camera}</Link>
</Td>
</Tr>
<Tr index={1}>
<Td>Timeframe</Td>
<Td>
{startime.toLocaleString()} – {endtime.toLocaleString()}
</Td>
</Tr>
<Tr>
<Td>Score</Td>
<Td>{(data.top_score * 100).toFixed(2)}%</Td>
</Tr>
<Tr index={1}>
<Td>Zones</Td>
<Td>{data.zones.join(', ')}</Td>
</Tr>
</Tbody>
</Table>
</Card>
</div> </div>
); );
} }