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 ActivityIndicator from '../components/ActivityIndicator';
import Button from '../components/Button'; import Button from '../components/Button';
import Clip from '../icons/Clip'; import Clip from '../icons/Clip';
import ArrowDown from '../icons/ArrowDropdown';
import Menu from '../icons/Menu';
import Delete from '../icons/Delete'; import Delete from '../icons/Delete';
import Snapshot from '../icons/Snapshot'; import Snapshot from '../icons/Snapshot';
import Dialog from '../components/Dialog'; import Dialog from '../components/Dialog';
@ -13,7 +15,7 @@ import VideoPlayer from '../components/VideoPlayer';
import { FetchStatus, useApiHost, useEvent, useDelete } from '../api'; import { FetchStatus, useApiHost, useEvent, useDelete } from '../api';
import { Table, Thead, Tbody, Th, Tr, Td } from '../components/Table'; 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 apiHost = useApiHost();
const { data, status } = useEvent(eventId); const { data, status } = useEvent(eventId);
const [showDialog, setShowDialog] = useState(false); const [showDialog, setShowDialog] = useState(false);
@ -40,7 +42,6 @@ export default function Event({ eventId }) {
if (success) { if (success) {
setDeleteStatus(FetchStatus.LOADED); setDeleteStatus(FetchStatus.LOADED);
setShowDialog(false); setShowDialog(false);
route('/events', true);
} }
}, [eventId, setShowDialog, setDeleteEvent]); }, [eventId, setShowDialog, setDeleteEvent]);
@ -53,13 +54,27 @@ export default function Event({ eventId }) {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div className="flex"> <div className="grid grid-cols-6 gap-4">
<Heading className="flex-grow"> <div class="col-start-1 col-end-8 md:space-x-4">
{data.camera} {data.label} <span className="text-sm">{startime.toLocaleString()}</span> <Button color="blue" href={`${apiHost}/api/events/${eventId}/clip.mp4?download=true`} download>
</Heading> <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}> <Button className="self-start" color="red" onClick={handleClickDelete}>
<Delete className="w-6" /> Delete event <Delete className="w-6" /> Delete event
</Button> </Button>
</div>
{showDialog ? ( {showDialog ? (
<Dialog <Dialog
onDismiss={handleDismissDeleteDialog} onDismiss={handleDismissDeleteDialog}
@ -110,7 +125,9 @@ export default function Event({ eventId }) {
{data.has_clip ? ( {data.has_clip ? (
<Fragment> <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 <VideoPlayer
options={{ options={{
sources: [ sources: [
@ -126,23 +143,8 @@ export default function Event({ eventId }) {
seekOptions={{ forward: 10, back: 5 }} seekOptions={{ forward: 10, back: 5 }}
onReady={(player) => {}} onReady={(player) => {}}
/> />
<div className="text-center"> </div>
<Button </div>
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>
</Fragment> </Fragment>
) : ( ) : (