Fix safari preview speed and other cleanup (#9976)

* Cleanups and fix safari preview speed on iOS

* Clarifying comment

* Update paging when loading page with no items

* Use chip for detections and show all the time

* make time ago dense

* Be smarter about paging empty

* Fix elevation
This commit is contained in:
Nicolas Mowen
2024-02-22 07:08:55 -07:00
committed by GitHub
parent 6626b8d758
commit 746939ed4f
4 changed files with 137 additions and 98 deletions

View File

@@ -106,6 +106,16 @@ export default function MobileEventView() {
[reviewPages]
);
const currentItems = useMemo(() => {
const current = reviewItems[severity];
if (!current || current.length == 0) {
return null;
}
return current;
}, [reviewItems, severity]);
// review interaction
const pagingObserver = useRef<IntersectionObserver | null>();
@@ -278,33 +288,37 @@ export default function MobileEventView() {
ref={contentRef}
className="w-full h-full grid grid-cols-1 sm:grid-cols-2 mt-2 gap-2 overflow-y-auto"
>
{reviewItems[severity]?.map((value, segIdx) => {
const lastRow = segIdx == reviewItems[severity].length - 1;
const relevantPreview = Object.values(allPreviews || []).find(
(preview) =>
preview.camera == value.camera &&
preview.start < value.start_time &&
preview.end > value.end_time
);
{currentItems ? (
currentItems.map((value, segIdx) => {
const lastRow = segIdx == reviewItems[severity].length - 1;
const relevantPreview = Object.values(allPreviews || []).find(
(preview) =>
preview.camera == value.camera &&
preview.start < value.start_time &&
preview.end > value.end_time
);
return (
<div
key={value.id}
ref={lastRow ? lastReviewRef : minimapRef}
data-start={value.start_time}
>
<div className="w-full aspect-video rounded-lg overflow-hidden">
<PreviewThumbnailPlayer
review={value}
relevantPreview={relevantPreview}
autoPlayback={minimapBounds.end == value.start_time}
setReviewed={() => setReviewed(value.id)}
/>
return (
<div
key={value.id}
ref={lastRow ? lastReviewRef : minimapRef}
data-start={value.start_time}
>
<div className="w-full aspect-video rounded-lg overflow-hidden">
<PreviewThumbnailPlayer
review={value}
relevantPreview={relevantPreview}
autoPlayback={minimapBounds.end == value.start_time}
setReviewed={() => setReviewed(value.id)}
/>
</div>
{lastRow && !isDone && <ActivityIndicator />}
</div>
{lastRow && !isDone && <ActivityIndicator />}
</div>
);
})}
);
})
) : (
<div ref={lastReviewRef} />
)}
</div>
</>
);