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

object lifecycle pane tweaks

Browse Source
This commit is contained in:
Josh Hawkins 2024-09-12 14:20:16 -05:00
parent c186b73dfa
commit 73b3daedee
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -230,7 +230,7 @@ export default function ObjectLifecycle({
{!fullscreen && ( {!fullscreen && (
<div className={cn("flex items-center gap-2")}> <div className={cn("flex items-center gap-2")}>
<Button <Button
className="flex items-center gap-2.5 rounded-lg" className="mb-2 mt-3 flex items-center gap-2.5 rounded-lg md:mt-0"
size="sm" size="sm"
onClick={() => setPane("overview")} onClick={() => setPane("overview")}
> >
@ -240,7 +240,7 @@ export default function ObjectLifecycle({
</div> </div>
)} )}
<div className="relative mx-auto"> <div className="relative flex flex-row justify-center">
<ImageLoadingIndicator <ImageLoadingIndicator
className="absolute inset-0" className="absolute inset-0"
imgLoaded={imgLoaded} imgLoaded={imgLoaded}
@ -253,7 +253,12 @@ export default function ObjectLifecycle({
</div> </div>
</div> </div>
)} )}
<div className={cn(imgLoaded ? "visible" : "invisible")}> <div
className={cn(
"relative inline-block",
imgLoaded ? "visible" : "invisible",
)}
>
<img <img
key={event.id} key={event.id}
ref={imgRef} ref={imgRef}
@ -278,7 +283,7 @@ export default function ObjectLifecycle({
{showZones && {showZones &&
lifecycleZones?.map((zone) => ( lifecycleZones?.map((zone) => (
<div <div
className="absolute left-0 top-0" className="absolute inset-0 flex items-center justify-center"
style={{ style={{
width: imgRef.current?.clientWidth, width: imgRef.current?.clientWidth,
height: imgRef.current?.clientHeight, height: imgRef.current?.clientHeight,
@ -287,6 +292,7 @@ export default function ObjectLifecycle({
> >
<svg <svg
viewBox={`0 0 ${imgRef.current?.width} ${imgRef.current?.height}`} viewBox={`0 0 ${imgRef.current?.width} ${imgRef.current?.height}`}
className="absolute inset-0"
> >
<polygon <polygon
points={getZonePolygon(zone)} points={getZonePolygon(zone)}