fix(web): remove cards from event page

web/package.json

@@ -2,7 +2,7 @@
   "name": "frigate",
   "private": true,
   "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",
     "build": "cross-env NODE_ENV=production snowpack build"
   },

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>
   );
 }