Recording fixes (#10728)

* Use timerange everywhere and ensure recordings has last 24 hours

* Pause recording when selecting timeline

* Fix loading layout

* Fix updating current time not always working

* Simplify dynamic video player

* Clean up desktop sizing

* Fix current hour

* Make padding consistent

* Improve spacing for extra cameras

* Make back button consistent

* Fix preview player not jumping to correct time

* Dont use useEffect due to preview changing

* Simplify

* Fix transition

web/src/utils/timelineUtil.tsx

@@ -121,18 +121,22 @@ export function getTimelineItemDescription(timelineItem: Timeline) {
   }
 }
 
-export function getChunkedTimeDay(timestamp: number) {
-  const endOfThisHour = new Date();
-  endOfThisHour.setHours(endOfThisHour.getHours() + 1, 0, 0, 0);
+/**
+ *
+ * @param timeRange
+ * @returns timeRange chunked into individual hours
+ */
+export function getChunkedTimeDay(timeRange: TimeRange): TimeRange[] {
+  const endOfThisHour = new Date(timeRange.before * 1000);
+  endOfThisHour.setSeconds(0, 0);
   const data: TimeRange[] = [];
-  const startDay = new Date(timestamp * 1000);
-  startDay.setHours(0, 0, 0, 0);
-  const startTimestamp = startDay.getTime() / 1000;
+  const startDay = new Date(timeRange.after * 1000);
+  startDay.setMinutes(0, 0, 0);
   let start = startDay.getTime() / 1000;
   let end = 0;
 
   for (let i = 0; i < 24; i++) {
-    startDay.setHours(startDay.getHours() + 1);
+    startDay.setHours(startDay.getHours() + 1, 0, 0, 0);
 
     if (startDay > endOfThisHour) {
       break;
@@ -146,7 +150,12 @@ export function getChunkedTimeDay(timestamp: number) {
     start = startDay.getTime() / 1000;
   }
 
-  return { start: startTimestamp, end, ranges: data };
+  data.push({
+    after: start,
+    before: Math.floor(timeRange.before),
+  });
+
+  return data;
 }
 
 export function getChunkedTimeRange(