Recordings Fixes (#13005)

* If recordings don't exist mark as no recordings

* Fix reloading recordings failing

* Fix mark items not clearing selected

* Cleanup

* Default to last full hour when error occurs

* Remove check

* Cleanup

* Handle empty recordings list case

* Ensure that the start time is within the time range

* Catch other reset cases

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

@@ -167,7 +167,11 @@ export default function DynamicVideoPlayer({
   );
 
   useEffect(() => {
-    if (!controller || !recordings) {
+    if (!controller || !recordings?.length) {
+      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/EventView.tsx

@@ -395,6 +395,7 @@ export default function EventView({
             markAllItemsAsReviewed={markAllItemsAsReviewed}
             onSelectReview={onSelectReview}
             onSelectAllReviews={onSelectAllReviews}
+            setSelectedReviews={setSelectedReviews}
             pullLatestData={pullLatestData}
           />
         )}
@@ -437,6 +438,7 @@ type DetectionReviewProps = {
   markAllItemsAsReviewed: (currentItems: ReviewSegment[]) => void;
   onSelectReview: (review: ReviewSegment, ctrl: boolean) => void;
   onSelectAllReviews: () => void;
+  setSelectedReviews: (reviewIds: string[]) => void;
   pullLatestData: () => void;
 };
 function DetectionReview({
@@ -455,6 +457,7 @@ function DetectionReview({
   markAllItemsAsReviewed,
   onSelectReview,
   onSelectAllReviews,
+  setSelectedReviews,
   pullLatestData,
 }: DetectionReviewProps) {
   const reviewTimelineRef = useRef<HTMLDivElement>(null);
@@ -692,6 +695,7 @@ function DetectionReview({
                   className="text-white"
                   variant="select"
                   onClick={() => {
+                    setSelectedReviews([]);
                     markAllItemsAsReviewed(currentItems ?? []);
                   }}
                 >

web/src/views/events/RecordingView.tsx

@@ -84,7 +84,11 @@ export function RecordingView({
   const previewRowRef = useRef<HTMLDivElement | null>(null);
   const previewRefs = useRef<{ [camera: string]: PreviewController }>({});
 
-  const [playbackStart, setPlaybackStart] = useState(startTime);
+  const [playbackStart, setPlaybackStart] = useState(
+    startTime >= timeRange.after && startTime <= timeRange.before
+      ? startTime
+      : timeRange.before - 60,
+  );
 
   const mainCameraReviewItems = useMemo(
     () => reviewItems?.filter((cam) => cam.camera == mainCamera) ?? [],
@@ -107,8 +111,10 @@ export function RecordingView({
       return chunk.after <= startTime && chunk.before >= startTime;
     }),
   );
-  const currentTimeRange = useMemo(
-    () => chunkedTimeRange[selectedRangeIdx],
+  const currentTimeRange = useMemo<TimeRange>(
+    () =>
+      chunkedTimeRange[selectedRangeIdx] ??
+      chunkedTimeRange[chunkedTimeRange.length - 1],
     [selectedRangeIdx, chunkedTimeRange],
   );
   const reviewFilterList = useMemo(() => {
@@ -198,6 +204,10 @@ export function RecordingView({
 
   const manuallySetCurrentTime = useCallback(
     (time: number) => {
+      if (!currentTimeRange) {
+        return;
+      }
+
       setCurrentTime(time);
 
       if (currentTimeRange.after <= time && currentTimeRange.before >= time) {
@@ -420,7 +430,18 @@ export function RecordingView({
               filterList={reviewFilterList}
               showReviewed
               setShowReviewed={() => {}}
-              onUpdateFilter={updateFilter}
+              onUpdateFilter={(newFilter) => {
+                // if we are resetting the date to last 24 hours
+                // then we need to reset the playbackStart time
+                if (
+                  filter?.before != undefined &&
+                  newFilter?.before == undefined
+                ) {
+                  setPlaybackStart(Date.now() / 1000 - 360);
+                }
+
+                updateFilter(newFilter);
+              }}
               setMotionOnly={() => {}}
             />
           )}