Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Adding clip duration to event details (#4133)

Browse Source 
* Adding clip length in s to Events View

* added function returning human readable length

* switched to date-fns functions for formatting

* fixed switched start/end time, changed length to duration
This commit is contained in:
banthungprong 2022-11-02 12:45:32 +01:00 committed by GitHub
parent 8163afce79
commit 552638d000
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/routes/Events.jsx
View File

@ -22,6 +22,7 @@ import CalendarIcon from '../icons/Calendar';
import Calendar from '../components/Calendar'; import Calendar from '../components/Calendar';
import Button from '../components/Button'; import Button from '../components/Button';
import Dialog from '../components/Dialog'; import Dialog from '../components/Dialog';
import { fromUnixTime, intervalToDuration, formatDuration } from 'date-fns';
const API_LIMIT = 25; const API_LIMIT = 25;
@ -37,6 +38,16 @@ const monthsAgo = (num) => {
return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() / 1000; return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() / 1000;
}; };
const clipDuration = (start_time, end_time) => {
const start = fromUnixTime(start_time);
const end = fromUnixTime(end_time);
let duration = 'In Progress';
if (end_time) {
duration = formatDuration(intervalToDuration({ start, end }));
}
return duration;
}
export default function Events({ path, ...props }) { export default function Events({ path, ...props }) {
const apiHost = useApiHost(); const apiHost = useApiHost();
const [searchParams, setSearchParams] = useState({ const [searchParams, setSearchParams] = useState({
@ -459,7 +470,7 @@ export default function Events({ path, ...props }) {
</div> </div>
<div className="text-sm"> <div className="text-sm">
{new Date(event.start_time * 1000).toLocaleDateString()}{' '} {new Date(event.start_time * 1000).toLocaleDateString()}{' '}
{new Date(event.start_time * 1000).toLocaleTimeString()} {new Date(event.start_time * 1000).toLocaleTimeString()} ({clipDuration(event.start_time, event.end_time)})
</div> </div>
<div className="capitalize text-sm flex align-center mt-1"> <div className="capitalize text-sm flex align-center mt-1">
<Camera className="h-5 w-5 mr-2 inline" /> <Camera className="h-5 w-5 mr-2 inline" />
@ -522,9 +533,9 @@ export default function Events({ path, ...props }) {
], ],
}} }}
seekOptions={{ forward: 10, back: 5 }} seekOptions={{ forward: 10, back: 5 }}
onReady={() => {}} onReady={() => { }}
/> />
) : null } ) : null}
{((eventDetailType == 'image') || !event.has_clip) ? ( {((eventDetailType == 'image') || !event.has_clip) ? (
<div className="flex justify-center"> <div className="flex justify-center">
@ -538,7 +549,7 @@ export default function Events({ path, ...props }) {
alt={`${event.label} at ${(event.top_score * 100).toFixed(0)}% confidence`} alt={`${event.label} at ${(event.top_score * 100).toFixed(0)}% confidence`}
/> />
</div> </div>
) : null } ) : null}
</div> </div>
</div> </div>
</div> </div>