UI bugfixes and tweaks (#10848)

* fix ios z-index scrolling bug

* skeleton size
This commit is contained in:
Josh Hawkins 2024-04-05 08:44:00 -05:00 committed by GitHub
parent 07ee39b9b8
commit 5085fa7135
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -839,31 +839,34 @@ function MotionReview({
return (
<div key={camera.name} className={`relative ${spans}`}>
{motionData ? (
<PreviewPlayer
key={camera.name}
className={`rounded-2xl ${spans} ${grow}`}
camera={camera.name}
timeRange={currentTimeRange}
startTime={previewStart}
cameraPreviews={relevantPreviews || []}
isScrubbing={scrubbing}
onControllerReady={(controller) => {
videoPlayersRef.current[camera.name] = controller;
}}
onClick={() =>
onOpenRecording({
camera: camera.name,
startTime: currentTime,
severity: "significant_motion",
})
}
/>
<>
<PreviewPlayer
className={`rounded-2xl ${spans} ${grow}`}
camera={camera.name}
timeRange={currentTimeRange}
startTime={previewStart}
cameraPreviews={relevantPreviews || []}
isScrubbing={scrubbing}
onControllerReady={(controller) => {
videoPlayersRef.current[camera.name] = controller;
}}
onClick={() =>
onOpenRecording({
camera: camera.name,
startTime: currentTime,
severity: "significant_motion",
})
}
/>
<div
className={`review-item-ring pointer-events-none z-20 absolute rounded-lg inset-0 size-full -outline-offset-[2.8px] outline outline-[3px] ${detectionType ? `outline-severity_${detectionType} shadow-severity_${detectionType}` : "outline-transparent duration-500"}`}
/>
</>
) : (
<Skeleton className={`rounded-2xl ${spans} ${grow}`} />
<Skeleton
className={`rounded-2xl size-full ${spans} ${grow}`}
/>
)}
<div
className={`review-item-ring pointer-events-none z-10 absolute rounded-lg inset-0 size-full -outline-offset-[2.8px] outline outline-[3px] ${detectionType ? `outline-severity_${detectionType} shadow-severity_${detectionType}` : "outline-transparent duration-500"}`}
/>
</div>
);
})}
@ -894,7 +897,7 @@ function MotionReview({
dense={isMobile}
/>
) : (
<Skeleton className="rounded-2xl size-full" />
<Skeleton className="size-full" />
)}
</div>