Events performance (#1645)

* rearrange event route and splitted into several components

* useIntersectionObserver

* re-arrange

* searchstring improvement

* added xs tailwind breakpoint

* useOuterClick hook

* cleaned up

* removed some video controls for mobile devices

* lint

* moved hooks to global folder

* moved buttons for small devices

* added button groups

Co-authored-by: Bernt Christian Egeland <cbegelan@gmail.com>

web/src/routes/Event.jsx

@@ -1,7 +1,10 @@
 import { h, Fragment } from 'preact';
 import { useCallback, useState, useEffect } from 'preact/hooks';
+import Link from '../components/Link';
 import ActivityIndicator from '../components/ActivityIndicator';
 import Button from '../components/Button';
+import ArrowDown from '../icons/ArrowDropdown';
+import ArrowDropup from '../icons/ArrowDropup';
 import Clip from '../icons/Clip';
 import Close from '../icons/Close';
 import Delete from '../icons/Delete';
@@ -9,12 +12,46 @@ import Snapshot from '../icons/Snapshot';
 import Dialog from '../components/Dialog';
 import Heading from '../components/Heading';
 import VideoPlayer from '../components/VideoPlayer';
+import { Table, Thead, Tbody, Th, Tr, Td } from '../components/Table';
 import { FetchStatus, useApiHost, useEvent, useDelete } from '../api';
 
+const ActionButtonGroup = ({ className, handleClickDelete, close }) => (
+  <div className={`space-y-2 space-x-2 sm:space-y-0 xs:space-x-4 ${className}`}>
+    <Button className="xs:w-auto" color="red" onClick={handleClickDelete}>
+      <Delete className="w-6" /> Delete event
+    </Button>
+    <Button color="gray" className="xs:w-auto" onClick={() => close()}>
+      <Close className="w-6" /> Close
+    </Button>
+  </div>
+);
+
+const DownloadButtonGroup = ({ className, apiHost, eventId }) => (
+  <span className={`space-y-2 sm:space-y-0 space-x-0 sm:space-x-4 ${className}`}>
+    <Button
+      className="w-full sm:w-auto"
+      color="blue"
+      href={`${apiHost}/api/events/${eventId}/clip.mp4?download=true`}
+      download
+    >
+      <Clip className="w-6" /> Download Clip
+    </Button>
+    <Button
+      className="w-full sm:w-auto"
+      color="blue"
+      href={`${apiHost}/api/events/${eventId}/snapshot.jpg?download=true`}
+      download
+    >
+      <Snapshot className="w-6" /> Download Snapshot
+    </Button>
+  </span>
+);
+
 export default function Event({ eventId, close, scrollRef }) {
   const apiHost = useApiHost();
   const { data, status } = useEvent(eventId);
   const [showDialog, setShowDialog] = useState(false);
+  const [showDetails, setShowDetails] = useState(false);
   const [shouldScroll, setShouldScroll] = useState(true);
   const [deleteStatus, setDeleteStatus] = useState(FetchStatus.NONE);
   const setDeleteEvent = useDelete();
@@ -25,6 +62,13 @@ export default function Event({ eventId, close, scrollRef }) {
       scrollRef[eventId].scrollIntoView();
       setShouldScroll(false);
     }
+    return () => {
+      // When opening new event window, the previous one will sometimes cause the
+      // navbar to be visible, hence the "hide nav" code bellow.
+      // Navbar will be hided if we add the - translate - y - full class.appBar.js
+      const element = document.getElementById('appbar');
+      if (element) element.classList.add('-translate-y-full');
+    };
   }, [data, scrollRef, eventId, shouldScroll]);
 
   const handleClickDelete = () => {
@@ -54,25 +98,28 @@ export default function Event({ eventId, close, scrollRef }) {
     return <ActivityIndicator />;
   }
 
+  const startime = new Date(data.start_time * 1000);
+  const endtime = new Date(data.end_time * 1000);
   return (
     <div className="space-y-4">
-      <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>
-        </div>
-        <div class="col-end-10 col-span-2 space-x-4">
-          <Button className="self-start" color="red" onClick={handleClickDelete}>
-            <Delete className="w-6" /> Delete event
-          </Button>
-          <Button color="gray" className="self-start" onClick={() => close()}>
-            <Close className="w-6" /> Close
+      <div className="flex md:flex-row justify-between flex-wrap flex-col">
+        <div className="space-y-2 xs:space-y-0 sm:space-x-4">
+          <DownloadButtonGroup apiHost={apiHost} eventId={eventId} className="hidden sm:inline" />
+          <Button className="w-full sm:w-auto" onClick={() => setShowDetails(!showDetails)}>
+            {showDetails ? (
+              <Fragment>
+                <ArrowDropup className="w-6" />
+                Hide event Details
+              </Fragment>
+            ) : (
+              <Fragment>
+                <ArrowDown className="w-6" />
+                Show event Details
+              </Fragment>
+            )}
           </Button>
         </div>
+        <ActionButtonGroup handleClickDelete={handleClickDelete} close={close} className="hidden sm:block" />
         {showDialog ? (
           <Dialog
             onDismiss={handleDismissDeleteDialog}
@@ -91,13 +138,47 @@ export default function Event({ eventId, close, scrollRef }) {
           />
         ) : null}
       </div>
-      <div className="outer-max-width m-auto">
-        <div className="w-full pt-5 relative pb-20">
+      <div>
+        {showDetails ? (
+          <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>
+        ) : null}
+      </div>
+
+      <div className="outer-max-width xs:m-auto">
+        <div className="pt-5 relative pb-20 w-screen xs:w-full">
           {data.has_clip ? (
             <Fragment>
               <Heading size="lg">Clip</Heading>
               <VideoPlayer
                 options={{
+                  preload: 'none',
                   sources: [
                     {
                       src: `${apiHost}/vod/event/${eventId}/index.m3u8`,
@@ -127,6 +208,10 @@ export default function Event({ eventId, close, scrollRef }) {
           )}
         </div>
       </div>
+      <div className="space-y-2 xs:space-y-0">
+        <DownloadButtonGroup apiHost={apiHost} eventId={eventId} className="block sm:hidden" />
+        <ActionButtonGroup handleClickDelete={handleClickDelete} close={close} className="block sm:hidden" />
+      </div>
     </div>
   );
 }