Fix reloading recordings failing

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -168,7 +168,10 @@ export default function DynamicVideoPlayer({
 
   useEffect(() => {
     if (!controller || !recordings) {
+      if (recordings?.length == 0) {
         setNoRecording(true);
+      }
+
       return;
     }
 

web/src/pages/Events.tsx

@@ -101,7 +101,7 @@ export default function Events() {
 
   // review paging
 
-  const [beforeTs, setBeforeTs] = useState(Date.now() / 1000);
+  const [beforeTs, setBeforeTs] = useState(Math.ceil(Date.now() / 1000));
   const last24Hours = useMemo(() => {
     return { before: beforeTs, after: getHoursAgo(24) };
   }, [beforeTs]);
@@ -455,5 +455,5 @@ export default function Events() {
 function getHoursAgo(hours: number): number {
   const now = new Date();
   now.setHours(now.getHours() - hours);
-  return now.getTime() / 1000;
+  return Math.ceil(now.getTime() / 1000);
 }

web/src/views/events/RecordingView.tsx

@@ -46,6 +46,7 @@ import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
 import { useResizeObserver } from "@/hooks/resize-observer";
 import { cn } from "@/lib/utils";
 import { useFullscreen } from "@/hooks/use-fullscreen";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 
 const SEGMENT_DURATION = 30;
 
@@ -107,7 +108,7 @@ export function RecordingView({
       return chunk.after <= startTime && chunk.before >= startTime;
     }),
   );
-  const currentTimeRange = useMemo(
+  const currentTimeRange = useMemo<TimeRange | undefined>(
     () => chunkedTimeRange[selectedRangeIdx],
     [selectedRangeIdx, chunkedTimeRange],
   );
@@ -171,6 +172,10 @@ export function RecordingView({
   );
 
   useEffect(() => {
+    if (!currentTimeRange) {
+      return;
+    }
+
     if (scrubbing || exportRange) {
       if (
         currentTime > currentTimeRange.before + 60 ||
@@ -198,6 +203,10 @@ export function RecordingView({
 
   const manuallySetCurrentTime = useCallback(
     (time: number) => {
+      if (!currentTimeRange) {
+        return;
+      }
+
       setCurrentTime(time);
 
       if (currentTimeRange.after <= time && currentTimeRange.before >= time) {
@@ -210,6 +219,10 @@ export function RecordingView({
   );
 
   useEffect(() => {
+    if (!currentTimeRange) {
+      return;
+    }
+
     if (!scrubbing) {
       if (Math.abs(currentTime - playerTime) > 10) {
         if (
@@ -471,6 +484,7 @@ export function RecordingView({
         </div>
       </div>
 
+      {currentTimeRange ? (
         <div
           ref={mainLayoutRef}
           className={cn(
@@ -596,7 +610,8 @@ export function RecordingView({
             contentRef={contentRef}
             mainCamera={mainCamera}
             timelineType={
-            (exportRange == undefined ? timelineType : "timeline") ?? "timeline"
+              (exportRange == undefined ? timelineType : "timeline") ??
+              "timeline"
             }
             timeRange={timeRange}
             mainCameraReviewItems={mainCameraReviewItems}
@@ -608,6 +623,13 @@ export function RecordingView({
             setExportRange={setExportRange}
           />
         </div>
+      ) : (
+        <div className="relative size-full">
+          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+            No recordings or previews found for this time
+          </div>
+        </div>
+      )}
     </div>
   );
 }