fix(web): remove cards from event page

LordNex · Feb 20, 2021 · c89e1a5 · c89e1a5
1 parent e50cc59
commit c89e1a5
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 53 deletions.
diff --git a/web/package.json b/web/package.json
@@ -2,7 +2,7 @@
  "name": "frigate",
  "private": true,
  "scripts": {
- "start": "cross-env SNOWPACK_PUBLIC_API_HOST=http:https://localhost:5000 snowpack dev",
+ "start": "cross-env SNOWPACK_PUBLIC_API_HOST=http:https://10.0.1.210:5000 snowpack dev",
  "prebuild": "rimraf build",
  "build": "cross-env NODE_ENV=production snowpack build"
  },

diff --git a/web/src/Event.jsx b/web/src/Event.jsx
@@ -1,6 +1,5 @@
 import { h, Fragment } from 'preact';
 import ActivityIndicator from './components/ActivityIndicator';
-import Card from './components/Card';
 import Heading from './components/Heading';
 import Link from './components/Link';
 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>
  </Heading>
 
- <Card>
- {data.has_clip ? (
- <Fragment>
- <Heading size="sm">Clip</Heading>
- <video className="w-100" src={`${apiHost}/clips/${data.camera}-${eventId}.mp4`} controls />
- </Fragment>
- ) : (
- <p>No clip available</p>
- )}
- </Card>
+ <Table class="w-full">
+ <Thead>
+ <Th>Key</Th>
+ <Th>Value</Th>
+ </Thead>
+ <Tbody>
+ <Tr>
+ <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>
- <Heading size="sm">{data.has_snapshot ? 'Best image' : 'Thumbnail'}</Heading>
- <img
- src={
- data.has_snapshot
- ? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
- : `data:image/jpeg;base64,${data.thumbnail}`
- }
- alt={`${data.label} at ${(data.top_score * 100).toFixed(1)}% confidence`}
- />
- </Card>
+ {data.has_clip ? (
+ <Fragment>
+ <Heading size="sm">Clip</Heading>
+ <video autoplay className="w-100" src={`${apiHost}/clips/${data.camera}-${eventId}.mp4`} controls />
+ </Fragment>
+ ) : (
+ <p>No clip available</p>
+ )}
 
- <Card>
- <Table>
- <Thead>
- <Th>Key</Th>
- <Th>Value</Th>
- </Thead>
- <Tbody>
- <Tr>
- <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>
+ <Heading size="sm">{data.has_snapshot ? 'Best image' : 'Thumbnail'}</Heading>
+ <img
+ src={
+ data.has_snapshot
+ ? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
+ : `data:image/jpeg;base64,${data.thumbnail}`
+ }
+ alt={`${data.label} at ${(data.top_score * 100).toFixed(1)}% confidence`}
+ />
  </div>
  );
 }