From 4c4efcc5f54e52c42f8e04cf0b4ea153dcb86d75 Mon Sep 17 00:00:00 2001 From: banthungprong Date: Thu, 20 Oct 2022 13:55:21 +0200 Subject: [PATCH 1/4] Adding clip length in s to Events View --- web/src/routes/Events.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx index e35925a4bb..4b305e97f7 100644 --- a/web/src/routes/Events.jsx +++ b/web/src/routes/Events.jsx @@ -455,11 +455,12 @@ export default function Events({ path, ...props }) {
{event.sub_label ? `${event.label}: ${event.sub_label}` : event.label} ( - {(event.top_score * 100).toFixed(0)}%) + {(event.top_score * 100).toFixed(0)}%) {(event.end_time - event.start_time).toFixed(0)}s
{new Date(event.start_time * 1000).toLocaleDateString()}{' '} - {new Date(event.start_time * 1000).toLocaleTimeString()} + {new Date(event.start_time * 1000).toLocaleTimeString()}{' - '} + {new Date(event.end_time * 1000).toLocaleTimeString()}
From 107b0ad9b2429dc974bd50d5c6dbbc19faf4b251 Mon Sep 17 00:00:00 2001 From: banthungprong Date: Thu, 20 Oct 2022 16:16:18 +0200 Subject: [PATCH 2/4] added function returning human readable length --- web/src/routes/Events.jsx | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx index 4b305e97f7..16da884ece 100644 --- a/web/src/routes/Events.jsx +++ b/web/src/routes/Events.jsx @@ -37,6 +37,21 @@ const monthsAgo = (num) => { return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() / 1000; }; +const clipLength = (num) => { + let totalSeconds = num; + let hours = Math.floor(totalSeconds / 3600); + totalSeconds %= 3600; + let minutes = Math.floor(totalSeconds / 60); + let seconds = (totalSeconds % 60).toFixed(0); + let length=`${hours} Hours ${minutes} Minutes ${seconds} Seconds` + if (hours == 0 && minutes == 0) { + length=`${seconds} Seconds` + } else { + length=`${minutes} Minutes ${seconds} Seconds` + } + return length; +} + export default function Events({ path, ...props }) { const apiHost = useApiHost(); const [searchParams, setSearchParams] = useState({ @@ -455,12 +470,11 @@ export default function Events({ path, ...props }) {
{event.sub_label ? `${event.label}: ${event.sub_label}` : event.label} ( - {(event.top_score * 100).toFixed(0)}%) {(event.end_time - event.start_time).toFixed(0)}s + {(event.top_score * 100).toFixed(0)}%)
{new Date(event.start_time * 1000).toLocaleDateString()}{' '} - {new Date(event.start_time * 1000).toLocaleTimeString()}{' - '} - {new Date(event.end_time * 1000).toLocaleTimeString()} + {new Date(event.start_time * 1000).toLocaleTimeString()} ({clipLength(event.end_time - event.start_time)})
From df64146d055a74a1cbbfcd6b8b6c834354961254 Mon Sep 17 00:00:00 2001 From: banthungprong Date: Fri, 21 Oct 2022 07:04:09 +0200 Subject: [PATCH 3/4] switched to date-fns functions for formatting --- web/src/routes/Events.jsx | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx index 16da884ece..c5517406fb 100644 --- a/web/src/routes/Events.jsx +++ b/web/src/routes/Events.jsx @@ -22,6 +22,11 @@ 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,19 +42,14 @@ const monthsAgo = (num) => { return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() / 1000; }; -const clipLength = (num) => { - let totalSeconds = num; - let hours = Math.floor(totalSeconds / 3600); - totalSeconds %= 3600; - let minutes = Math.floor(totalSeconds / 60); - let seconds = (totalSeconds % 60).toFixed(0); - let length=`${hours} Hours ${minutes} Minutes ${seconds} Seconds` - if (hours == 0 && minutes == 0) { - length=`${seconds} Seconds` - } else { - length=`${minutes} Minutes ${seconds} Seconds` +const clipLength = (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 length; + return duration; } export default function Events({ path, ...props }) { @@ -474,7 +474,7 @@ export default function Events({ path, ...props }) {
{new Date(event.start_time * 1000).toLocaleDateString()}{' '} - {new Date(event.start_time * 1000).toLocaleTimeString()} ({clipLength(event.end_time - event.start_time)}) + {new Date(event.start_time * 1000).toLocaleTimeString()} ({clipLength(event.end_time, event.start_time)})
From e46a10595cb7649b03311560358400819259cb48 Mon Sep 17 00:00:00 2001 From: banthungprong <59219161+banthungprong@users.noreply.github.com> Date: Wed, 2 Nov 2022 07:42:22 +0100 Subject: [PATCH 4/4] fixed switched start/end time, changed length to duration --- web/src/routes/Events.jsx | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx index c5517406fb..e199416532 100644 --- a/web/src/routes/Events.jsx +++ b/web/src/routes/Events.jsx @@ -22,11 +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'; +import { fromUnixTime, intervalToDuration, formatDuration } from 'date-fns'; const API_LIMIT = 25; @@ -42,7 +38,7 @@ const monthsAgo = (num) => { return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() / 1000; }; -const clipLength = (start_time, end_time) => { +const clipDuration = (start_time, end_time) => { const start = fromUnixTime(start_time); const end = fromUnixTime(end_time); let duration = 'In Progress'; @@ -474,7 +470,7 @@ export default function Events({ path, ...props }) {
{new Date(event.start_time * 1000).toLocaleDateString()}{' '} - {new Date(event.start_time * 1000).toLocaleTimeString()} ({clipLength(event.end_time, event.start_time)}) + {new Date(event.start_time * 1000).toLocaleTimeString()} ({clipDuration(event.start_time, event.end_time)})
@@ -537,9 +533,9 @@ export default function Events({ path, ...props }) { ], }} seekOptions={{ forward: 10, back: 5 }} - onReady={() => {}} + onReady={() => { }} /> - ) : null } + ) : null} {((eventDetailType == 'image') || !event.has_clip) ? (
@@ -553,7 +549,7 @@ export default function Events({ path, ...props }) { alt={`${event.label} at ${(event.top_score * 100).toFixed(0)}% confidence`} />
- ) : null } + ) : null}