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

make object lifecycle scrollable in tracking details

Browse Source
This commit is contained in:
Josh Hawkins 2025-12-20 07:51:29 -06:00
parent 081e47f6d7
commit 73cd48262f
2 changed files with 102 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/components/overlay/detail/SearchDetailDialog.tsx
View File

@ -599,9 +599,14 @@ export default function SearchDetailDialog({
<Content <Content
ref={isDesktop ? dialogContentRef : undefined} ref={isDesktop ? dialogContentRef : undefined}
className={cn( className={cn(
"scrollbar-container overflow-y-auto", isDesktop && [
isDesktop && "max-h-[95dvh] max-w-[85%] xl:max-w-[70%]", "max-h-[95dvh] max-w-[85%] xl:max-w-[70%]",
isMobile && "flex h-full flex-col px-4", pageToggle === "tracking_details"
? "flex flex-col overflow-hidden"
: "scrollbar-container overflow-y-auto",
],
isMobile &&
"scrollbar-container flex h-full flex-col overflow-y-auto px-4",
)} )}
onEscapeKeyDown={(event) => { onEscapeKeyDown={(event) => {
if (isPopoverOpen) { if (isPopoverOpen) {

22
web/src/components/overlay/detail/TrackingDetails.tsx
View File

@ -526,7 +526,7 @@ export function TrackingDetails({
<div <div
className={cn( className={cn(
"flex items-center justify-center", "flex items-start justify-center",
isDesktop && "overflow-hidden", isDesktop && "overflow-hidden",
cameraAspect === "tall" ? "max-h-[50dvh] lg:max-h-[70dvh]" : "w-full", cameraAspect === "tall" ? "max-h-[50dvh] lg:max-h-[70dvh]" : "w-full",
cameraAspect === "tall" && isMobileOnly && "w-full", cameraAspect === "tall" && isMobileOnly && "w-full",
@ -622,7 +622,10 @@ export function TrackingDetails({
<div <div
className={cn( className={cn(
isDesktop && "justify-between overflow-hidden lg:basis-2/5", isDesktop && "justify-start overflow-hidden",
aspectRatio > 1 && aspectRatio < 1.5
? "lg:basis-3/5"
: "lg:basis-2/5",
)} )}
> >
{isDesktop && tabs && ( {isDesktop && tabs && (
@ -632,20 +635,17 @@ export function TrackingDetails({
)} )}
<div <div
className={cn( className={cn(
isDesktop && "scrollbar-container h-full overflow-y-auto", isDesktop && "scrollbar-container max-h-[70vh] overflow-y-auto",
)} )}
> >
{config?.cameras[event.camera]?.onvif.autotracking {config?.cameras[event.camera]?.onvif.autotracking
.enabled_in_config && ( .enabled_in_config && (
<div className="mb-2 ml-3 text-sm text-danger"> <div className="mb-4 ml-3 text-sm text-danger">
{t("trackingDetails.autoTrackingTips")} {t("trackingDetails.autoTrackingTips")}
</div> </div>
)} )}
<div className="mt-4"> <div className={cn("rounded-md bg-background_alt px-0 py-3 md:px-2")}>
<div
className={cn("rounded-md bg-background_alt px-0 py-3 md:px-2")}
>
<div className="flex w-full items-center justify-between"> <div className="flex w-full items-center justify-between">
<div <div
className="flex items-center gap-2 font-medium" className="flex items-center gap-2 font-medium"
@ -705,10 +705,7 @@ export function TrackingDetails({
{t("detail.noObjectDetailData", { ns: "views/events" })} {t("detail.noObjectDetailData", { ns: "views/events" })}
</div> </div>
) : ( ) : (
<div <div className="-pb-2 relative mx-0" ref={timelineContainerRef}>
className="-pb-2 relative mx-0"
ref={timelineContainerRef}
>
<div <div
className="absolute -top-2 left-6 z-0 w-0.5 -translate-x-1/2 bg-secondary-foreground" className="absolute -top-2 left-6 z-0 w-0.5 -translate-x-1/2 bg-secondary-foreground"
style={{ bottom: lineBottomOffsetPx }} style={{ bottom: lineBottomOffsetPx }}
@ -751,7 +748,6 @@ export function TrackingDetails({
</div> </div>
</div> </div>
</div> </div>
</div>
); );
} }