From dc09e5cf71c50d8b7570cbaf864db596e0db1ec4 Mon Sep 17 00:00:00 2001
From: Blake Blackshear <blakeb@blakeshome.com>
Date: Sat, 16 Dec 2023 09:52:51 -0600
Subject: [PATCH] fixup build

---
 web-new/src/components/card/HistoryCard.tsx   |  2 ++
 web-new/src/components/player/VideoPlayer.tsx |  7 +++----
 web-new/src/components/ui/calendar.tsx        |  6 ++----
 web-new/src/pages/History.tsx                 | 12 ++++++++----
 web-new/src/utils/dateUtil.ts                 |  4 ++--
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/web-new/src/components/card/HistoryCard.tsx b/web-new/src/components/card/HistoryCard.tsx
index 9b2fe34d0..ccacefa20 100644
--- a/web-new/src/components/card/HistoryCard.tsx
+++ b/web-new/src/components/card/HistoryCard.tsx
@@ -48,6 +48,8 @@ export default function HistoryCard({
           {formatUnixTimestampToDateTime(timeline.time, {
             strftime_fmt:
               config.ui.time_format == "24hour" ? "%H:%M:%S" : "%I:%M:%S",
+            time_style: "medium",
+            date_style: "medium",
           })}
         </div>
         <div className="capitalize text-sm flex align-center mt-1">
diff --git a/web-new/src/components/player/VideoPlayer.tsx b/web-new/src/components/player/VideoPlayer.tsx
index 68e500565..20a317caf 100644
--- a/web-new/src/components/player/VideoPlayer.tsx
+++ b/web-new/src/components/player/VideoPlayer.tsx
@@ -46,12 +46,11 @@ export default function VideoPlayer({
     // Make sure Video.js player is only initialized once
     if (!playerRef.current) {
       // The Video.js player needs to be _inside_ the component el for React 18 Strict Mode.
-      const videoElement = document.createElement("video-js");
-      // @ts-ignore we know this is a video element
+      const videoElement = document.createElement(
+        "video-js"
+      ) as HTMLVideoElement;
       videoElement.controls = true;
-      // @ts-ignore
       videoElement.playsInline = true;
-      // @ts-ignore
       videoElement.disableRemotePlayback = remotePlayback;
       videoElement.classList.add("small-player");
       videoElement.classList.add("video-js");
diff --git a/web-new/src/components/ui/calendar.tsx b/web-new/src/components/ui/calendar.tsx
index a02526753..850f6f03a 100644
--- a/web-new/src/components/ui/calendar.tsx
+++ b/web-new/src/components/ui/calendar.tsx
@@ -52,10 +52,8 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        // @ts-ignore
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        // @ts-ignore
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+        IconLeft: () => <ChevronLeft className="h-4 w-4" />,
+        IconRight: () => <ChevronRight className="h-4 w-4" />,
       }}
       {...props}
     />
diff --git a/web-new/src/pages/History.tsx b/web-new/src/pages/History.tsx
index e01835598..eaf908dc9 100644
--- a/web-new/src/pages/History.tsx
+++ b/web-new/src/pages/History.tsx
@@ -186,6 +186,8 @@ function History() {
                 <Heading as="h3">
                   {formatUnixTimestampToDateTime(parseInt(day), {
                     strftime_fmt: "%A %b %d",
+                    time_style: "medium",
+                    date_style: "medium",
                   })}
                 </Heading>
                 {Object.entries(timelineDay).map(
@@ -205,12 +207,15 @@ function History() {
                         <Heading as="h4">
                           {formatUnixTimestampToDateTime(parseInt(hour), {
                             strftime_fmt: "%I:00",
+                            time_style: "medium",
+                            date_style: "medium",
                           })}
                         </Heading>
 
                         <div className="flex flex-wrap">
-                          {Object.entries(timelineHour).reverse().map(
-                            ([key, timeline]) => {
+                          {Object.entries(timelineHour)
+                            .reverse()
+                            .map(([key, timeline]) => {
                               const startTs = Object.values(timeline.entries)[0]
                                 .timestamp;
                               let relevantPreview = previewMap[timeline.camera];
@@ -235,8 +240,7 @@ function History() {
                                   }}
                                 />
                               );
-                            }
-                          )}
+                            })}
                         </div>
                         {lastRow && <ActivityIndicator />}
                       </div>
diff --git a/web-new/src/utils/dateUtil.ts b/web-new/src/utils/dateUtil.ts
index f6845f023..1c6db110c 100644
--- a/web-new/src/utils/dateUtil.ts
+++ b/web-new/src/utils/dateUtil.ts
@@ -1,5 +1,5 @@
-import strftime from "strftime";
-import { fromUnixTime, intervalToDuration, formatDuration } from "date-fns";
+import strftime from 'strftime';
+import { fromUnixTime, intervalToDuration, formatDuration } from 'date-fns';
 export const longToDate = (long: number): Date => new Date(long * 1000);
 export const epochToLong = (date: number): number => date / 1000;
 export const dateToLong = (date: Date): number => epochToLong(date.getTime());