From df64146d055a74a1cbbfcd6b8b6c834354961254 Mon Sep 17 00:00:00 2001
From: banthungprong <github@banthungprong.info>
Date: Fri, 21 Oct 2022 07:04:09 +0200
Subject: [PATCH] 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 16da884ec..c5517406f 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 }) {
                         </div>
                         <div className="text-sm">
                           {new Date(event.start_time * 1000).toLocaleDateString()}{' '}
-                          {new Date(event.start_time * 1000).toLocaleTimeString()} <span className="text-red-300">({clipLength(event.end_time - event.start_time)})</span>
+                          {new Date(event.start_time * 1000).toLocaleTimeString()} ({clipLength(event.end_time, event.start_time)})
                         </div>
                         <div className="capitalize text-sm flex align-center mt-1">
                           <Camera className="h-5 w-5 mr-2 inline" />