administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-11 17:47:37 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

pass in tabs for desktop

Browse Source
This commit is contained in:
Josh Hawkins 2025-10-31 08:14:21 -05:00
parent 348d40d7fd
commit 24ef3f213c
1 changed files with 45 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,13 +54,13 @@ import {
DetailStreamProvider, DetailStreamProvider,
useDetailStream, useDetailStream,
} from "@/context/detail-stream-context"; } from "@/context/detail-stream-context";
import { isDesktop } from "react-device-detect";
type TrackingDetailsProps = { type TrackingDetailsProps = {
className?: string; className?: string;
event: Event; event: Event;
fullscreen?: boolean; fullscreen?: boolean;
showImage?: boolean; tabs?: React.ReactNode;
showLifecycle?: boolean;
}; };
// Wrapper component that provides DetailStreamContext // Wrapper component that provides DetailStreamContext
@ -82,8 +82,7 @@ export default function TrackingDetails(props: TrackingDetailsProps) {
function TrackingDetailsInner({ function TrackingDetailsInner({
className, className,
event, event,
showImage = true, tabs,
showLifecycle = false,
onTimeUpdate, onTimeUpdate,
}: TrackingDetailsProps & { onTimeUpdate: (time: number) => void }) { }: TrackingDetailsProps & { onTimeUpdate: (time: number) => void }) {
const videoRef = useRef<HTMLVideoElement | null>(null); const videoRef = useRef<HTMLVideoElement | null>(null);
@ -155,7 +154,6 @@ function TrackingDetailsInner({
_setSelectedZone(""); _setSelectedZone("");
// Set the target timestamp to seek to // Set the target timestamp to seek to
console.log("handled, seeking to", timestamp);
setSeekToTimestamp(timestamp); setSeekToTimestamp(timestamp);
}, []); }, []);
@ -198,7 +196,6 @@ function TrackingDetailsInner({
// Handle seeking when seekToTimestamp is set // Handle seeking when seekToTimestamp is set
useEffect(() => { useEffect(() => {
console.log("seeking to", seekToTimestamp, videoRef.current);
if (seekToTimestamp === null || !videoRef.current) return; if (seekToTimestamp === null || !videoRef.current) return;
const relativeTime = const relativeTime =
@ -309,15 +306,21 @@ function TrackingDetailsInner({
if (!config) { if (!config) {
return <ActivityIndicator />; return <ActivityIndicator />;
} }
return ( return (
<div className={cn("flex size-full flex-col gap-2", className)}> <div
className={cn(
isDesktop
? "flex size-full gap-4 overflow-hidden"
: "flex size-full flex-col gap-2",
className,
)}
>
<span tabIndex={0} className="sr-only" /> <span tabIndex={0} className="sr-only" />
{showImage && (
<div <div
className={cn( className={cn(
"relative flex items-center justify-center", "relative flex items-center justify-center",
isDesktop && "flex-[3]",
cameraAspect === "wide" cameraAspect === "wide"
? "aspect-wide w-full" ? "aspect-wide w-full"
: cameraAspect === "tall" : cameraAspect === "tall"
@ -342,10 +345,14 @@ function TrackingDetailsInner({
currentTimeOverride={currentTime} currentTimeOverride={currentTime}
/> />
</div> </div>
)}
{showLifecycle && ( <div className={cn(isDesktop && "flex-[2] overflow-hidden")}>
<> {isDesktop && tabs && <div className="mb-4">{tabs}</div>}
<div
className={cn(
isDesktop && "scrollbar-container h-full overflow-y-auto",
)}
>
<div className="mt-3 flex flex-row items-center justify-between"> <div className="mt-3 flex flex-row items-center justify-between">
<Heading as="h4">{t("trackingDetails.title")}</Heading> <Heading as="h4">{t("trackingDetails.title")}</Heading>
@ -538,8 +545,8 @@ function TrackingDetailsInner({
</div> </div>
</div> </div>
</div> </div>
</> </div>
)} </div>
</div> </div>
); );
} }