removed page route redirect + New Close Button

web/src/routes/Event.jsx

@@ -4,6 +4,8 @@ import { route } from 'preact-router';
 import ActivityIndicator from '../components/ActivityIndicator';
 import Button from '../components/Button';
 import Clip from '../icons/Clip';
+import ArrowDown from '../icons/ArrowDropdown';
+import Menu from '../icons/Menu';
 import Delete from '../icons/Delete';
 import Snapshot from '../icons/Snapshot';
 import Dialog from '../components/Dialog';
@@ -13,7 +15,7 @@ import VideoPlayer from '../components/VideoPlayer';
 import { FetchStatus, useApiHost, useEvent, useDelete } from '../api';
 import { Table, Thead, Tbody, Th, Tr, Td } from '../components/Table';
 
-export default function Event({ eventId }) {
+export default function Event({ eventId, close }) {
   const apiHost = useApiHost();
   const { data, status } = useEvent(eventId);
   const [showDialog, setShowDialog] = useState(false);
@@ -40,7 +42,6 @@ export default function Event({ eventId }) {
     if (success) {
       setDeleteStatus(FetchStatus.LOADED);
       setShowDialog(false);
-      route('/events', true);
     }
   }, [eventId, setShowDialog, setDeleteEvent]);
 
@@ -53,13 +54,27 @@ export default function Event({ eventId }) {
 
   return (
     <div className="space-y-4">
-      <div className="flex">
-        <Heading className="flex-grow">
-          {data.camera} {data.label} <span className="text-sm">{startime.toLocaleString()}</span>
-        </Heading>
-        <Button className="self-start" color="red" onClick={handleClickDelete}>
-          <Delete className="w-6" /> Delete event
-        </Button>
+      <div className="grid grid-cols-6 gap-4">
+        <div class="col-start-1 col-end-8 md:space-x-4">
+          <Button color="blue" href={`${apiHost}/api/events/${eventId}/clip.mp4?download=true`} download>
+            <Clip className="w-6" /> Download Clip
+          </Button>
+          <Button color="blue" href={`${apiHost}/api/events/${eventId}/snapshot.jpg?download=true`} download>
+            <Snapshot className="w-6" /> Download Snapshot
+          </Button>
+          <Button className="self-start" onClick={() => setShowDetails(!showDetails)}>
+            <ArrowDown className="w-6" />
+            {`${showDetails ? 'Hide event Details' : 'View event Details'}`}
+          </Button>
+        </div>
+        <div class="col-end-10 col-span-2 space-x-4">
+          <Button color="gray" className="self-start" onClick={() => close()}>
+            <Menu className="w-6" /> Close
+          </Button>
+          <Button className="self-start" color="red" onClick={handleClickDelete}>
+            <Delete className="w-6" /> Delete event
+          </Button>
+        </div>
         {showDialog ? (
           <Dialog
             onDismiss={handleDismissDeleteDialog}
@@ -110,39 +125,26 @@ export default function Event({ eventId }) {
 
       {data.has_clip ? (
         <Fragment>
-          <Heading size="lg">Clip</Heading>
-          <VideoPlayer
-            options={{
-              sources: [
-                {
-                  src: `${apiHost}/vod/event/${eventId}/index.m3u8`,
-                  type: 'application/vnd.apple.mpegurl',
-                },
-              ],
-              poster: data.has_snapshot
-                ? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
-                : `data:image/jpeg;base64,${data.thumbnail}`,
-            }}
-            seekOptions={{ forward: 10, back: 5 }}
-            onReady={(player) => {}}
-          />
-          <div className="text-center">
-            <Button
-              className="mx-2"
-              color="blue"
-              href={`${apiHost}/api/events/${eventId}/clip.mp4?download=true`}
-              download
-            >
-              <Clip className="w-6" /> Download Clip
-            </Button>
-            <Button
-              className="mx-2"
-              color="blue"
-              href={`${apiHost}/api/events/${eventId}/snapshot.jpg?download=true`}
-              download
-            >
-              <Snapshot className="w-6" /> Download Snapshot
-            </Button>
+          <div className="outer-max-width m-auto">
+            <div className="aspect-ratio-box w-full relative">
+              <div className="absolute w-full top-10 left-0">
+                <VideoPlayer
+                  options={{
+                    sources: [
+                      {
+                        src: `${apiHost}/vod/event/${eventId}/index.m3u8`,
+                        type: 'application/vnd.apple.mpegurl',
+                      },
+                    ],
+                    poster: data.has_snapshot
+                      ? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
+                      : `data:image/jpeg;base64,${data.thumbnail}`,
+                  }}
+                  seekOptions={{ forward: 10, back: 5 }}
+                  onReady={(player) => {}}
+                />
+              </div>
+            </div>
           </div>
         </Fragment>
       ) : (