mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-04-28 01:16:46 +02:00
Adding clip duration to event details (#4133)
* 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:
parent
8163afce79
commit
552638d000
@ -22,6 +22,7 @@ import CalendarIcon from '../icons/Calendar';
|
||||
import Calendar from '../components/Calendar';
|
||||
import Button from '../components/Button';
|
||||
import Dialog from '../components/Dialog';
|
||||
import { fromUnixTime, intervalToDuration, formatDuration } from 'date-fns';
|
||||
|
||||
const API_LIMIT = 25;
|
||||
|
||||
@ -37,6 +38,16 @@ const monthsAgo = (num) => {
|
||||
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 }) {
|
||||
const apiHost = useApiHost();
|
||||
const [searchParams, setSearchParams] = useState({
|
||||
@ -459,7 +470,7 @@ export default function Events({ path, ...props }) {
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
{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 className="capitalize text-sm flex align-center mt-1">
|
||||
<Camera className="h-5 w-5 mr-2 inline" />
|
||||
|
Loading…
Reference in New Issue
Block a user