administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-15 07:35:27 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

improve image loading skeleton in object lifecycle pane

Browse Source
This commit is contained in:
Josh Hawkins 2024-10-01 07:05:22 -05:00
parent fedc3156e8
commit 2c3e2f9408
1 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/components/overlay/detail/ObjectLifecycle.tsx
View File

@ -77,6 +77,17 @@ export default function ObjectLifecycle({
const [showControls, setShowControls] = useState(false);
const [showZones, setShowZones] = useState(true);
const aspectRatio = useMemo(() => {
if (!config) {
return 16 / 9;
}
return (
config.cameras[event.camera].detect.width /
config.cameras[event.camera].detect.height
);
}, [config, event]);
const getZoneColor = useCallback(
(zoneName: string) => {
const zoneColor =
@ -240,7 +251,15 @@ export default function ObjectLifecycle({
</div>
)}
<div className="relative flex flex-row justify-center">
<div
className={cn(
"relative mx-auto flex max-h-[50dvh] flex-row justify-center",
!imgLoaded && aspectRatio < 16 / 9 && "h-full",
)}
style={{
aspectRatio: !imgLoaded ? aspectRatio : undefined,
}}
>
<ImageLoadingIndicator
className="absolute inset-0"
imgLoaded={imgLoaded}
@ -263,7 +282,7 @@ export default function ObjectLifecycle({
key={event.id}
ref={imgRef}
className={cn(
"max-h-[50dvh] max-w-full select-none rounded-lg object-contain transition-opacity",
"max-h-[50dvh] max-w-full select-none rounded-lg object-contain",
)}
loading={isSafari ? "eager" : "lazy"}
style={