administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-02 01:05:20 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

removed page route redirect + New Close Button

Browse Source
This commit is contained in:
Bernt Christian Egeland 2021-08-21 11:16:36 +02:00
parent f025366f99
commit 2d7d766b0b
1 changed files with 44 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
web/src/routes/Event.jsx
View File

@ -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>
<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,7 +125,9 @@ export default function Event({ eventId }) {
{data.has_clip ? (
<Fragment>
<Heading size="lg">Clip</Heading>
<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: [
@ -126,23 +143,8 @@ export default function Event({ eventId }) {
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>
</div>
</div>
</Fragment>
) : (