fixup build

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">

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");

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}
     />

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>

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());