{
- onSeek?.(event.timestamp ?? 0, false);
+ onSeek?.(item.timestamp ?? 0, false);
}}
className={cn(
"flex cursor-pointer items-center gap-2 text-sm text-primary-variant",
@@ -532,11 +581,46 @@ function LifecycleItem({ event, isActive, onSeek }: LifecycleItemProps) {
: "duration-500",
)}
>
-
@@ -561,8 +645,8 @@ function ObjectTimeline({
},
]);
- if ((!timeline || timeline.length === 0) && isValidating) {
- return
;
}
if (!timeline || timeline.length === 0) {
@@ -573,20 +657,75 @@ function ObjectTimeline({
);
}
+ // Calculate how far down the blue line should extend based on effectiveTime
+ const calculateLineHeight = () => {
+ if (!timeline || timeline.length === 0) return 0;
+
+ const currentTime = effectiveTime ?? 0;
+
+ // Find which events have been passed
+ let lastPassedIndex = -1;
+ for (let i = 0; i < timeline.length; i++) {
+ if (currentTime >= (timeline[i].timestamp ?? 0)) {
+ lastPassedIndex = i;
+ } else {
+ break;
+ }
+ }
+
+ // No events passed yet
+ if (lastPassedIndex < 0) return 0;
+
+ // All events passed
+ if (lastPassedIndex >= timeline.length - 1) return 100;
+
+ // Calculate percentage based on item position, not time
+ // Each item occupies an equal visual space regardless of time gaps
+ const itemPercentage = 100 / (timeline.length - 1);
+
+ // Find progress between current and next event for smooth transition
+ const currentEvent = timeline[lastPassedIndex];
+ const nextEvent = timeline[lastPassedIndex + 1];
+ const currentTimestamp = currentEvent.timestamp ?? 0;
+ const nextTimestamp = nextEvent.timestamp ?? 0;
+
+ // Calculate interpolation between the two events
+ const timeBetween = nextTimestamp - currentTimestamp;
+ const timeElapsed = currentTime - currentTimestamp;
+ const interpolation = timeBetween > 0 ? timeElapsed / timeBetween : 0;
+
+ // Base position plus interpolated progress to next item
+ return Math.min(
+ 100,
+ lastPassedIndex * itemPercentage + interpolation * itemPercentage,
+ );
+ };
+
+ const blueLineHeight = calculateLineHeight();
+
return (
-
- {timeline.map((event, idx) => {
- const isActive =
- Math.abs((effectiveTime ?? 0) - (event.timestamp ?? 0)) <= 0.5;
- return (
-
- );
- })}
+
+
+
+
+ {timeline.map((event, idx) => {
+ const isActive =
+ Math.abs((effectiveTime ?? 0) - (event.timestamp ?? 0)) <= 0.5;
+
+ return (
+
+ );
+ })}
+
);
}
diff --git a/web/src/components/timeline/EventMenu.tsx b/web/src/components/timeline/EventMenu.tsx
index 4723d2b13..ac98a8ebc 100644
--- a/web/src/components/timeline/EventMenu.tsx
+++ b/web/src/components/timeline/EventMenu.tsx
@@ -4,19 +4,22 @@ import {
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuPortal,
+ DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { HiDotsHorizontal } from "react-icons/hi";
import { useApiHost } from "@/api";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
-import type { Event } from "@/types/event";
-import type { FrigateConfig } from "@/types/frigateConfig";
+import { Event } from "@/types/event";
+import { FrigateConfig } from "@/types/frigateConfig";
type EventMenuProps = {
event: Event;
config?: FrigateConfig;
onOpenUpload?: (e: Event) => void;
onOpenSimilarity?: (e: Event) => void;
+ selectedObjectId?: string;
+ setSelectedObjectId?: (event: Event | undefined) => void;
};
export default function EventMenu({
@@ -24,71 +27,87 @@ export default function EventMenu({
config,
onOpenUpload,
onOpenSimilarity,
+ selectedObjectId,
+ setSelectedObjectId,
}: EventMenuProps) {
const apiHost = useApiHost();
const navigate = useNavigate();
const { t } = useTranslation("views/explore");
+ const handleObjectSelect = () => {
+ if (event.id === selectedObjectId) {
+ setSelectedObjectId?.(undefined);
+ } else {
+ setSelectedObjectId?.(event);
+ }
+ };
+
return (
-
-
-
-
-
-
- {
- navigate(`/explore?event_id=${event.id}`);
- }}
- >
- {t("details.item.button.viewInExplore")}
-
-
-
- {t("itemMenu.downloadSnapshot.label")}
-
-
-
- {event.has_snapshot &&
- event.plus_id == undefined &&
- event.data.type == "object" &&
- config?.plus?.enabled && (
- {
- onOpenUpload?.(event);
- }}
- >
- {t("itemMenu.submitToPlus.label")}
-
- )}
-
- {event.has_snapshot && config?.semantic_search?.enabled && (
+ <>
+
+
+
+
+
+
+
+
+
+
+ {event.id === selectedObjectId
+ ? t("itemMenu.hideObjectDetails.label")
+ : t("itemMenu.showObjectDetails.label")}
+
+
{
- if (onOpenSimilarity) onOpenSimilarity(event);
- else
- navigate(
- `/explore?search_type=similarity&event_id=${event.id}`,
- );
+ navigate(`/explore?event_id=${event.id}`);
}}
>
- {t("itemMenu.findSimilar.label")}
+ {t("details.item.button.viewInExplore")}
- )}
-
-
-
+
+
+ {t("itemMenu.downloadSnapshot.label")}
+
+
+
+ {event.has_snapshot &&
+ event.plus_id == undefined &&
+ event.data.type == "object" &&
+ config?.plus?.enabled && (
+ {
+ onOpenUpload?.(event);
+ }}
+ >
+ {t("itemMenu.submitToPlus.label")}
+
+ )}
+
+ {event.has_snapshot && config?.semantic_search?.enabled && (
+ {
+ if (onOpenSimilarity) onOpenSimilarity(event);
+ else
+ navigate(
+ `/explore?search_type=similarity&event_id=${event.id}`,
+ );
+ }}
+ >
+ {t("itemMenu.findSimilar.label")}
+
+ )}
+
+
+
+
);
}
diff --git a/web/src/utils/dateUtil.ts b/web/src/utils/dateUtil.ts
index 8b1ef2ff4..4427b59ac 100644
--- a/web/src/utils/dateUtil.ts
+++ b/web/src/utils/dateUtil.ts
@@ -1,6 +1,7 @@
import { fromUnixTime, intervalToDuration, formatDuration } from "date-fns";
import { Locale } from "date-fns/locale";
import { formatInTimeZone } from "date-fns-tz";
+import i18n from "@/utils/i18n";
export const longToDate = (long: number): Date => new Date(long * 1000);
export const epochToLong = (date: number): number => date / 1000;
export const dateToLong = (date: Date): number => epochToLong(date.getTime());
@@ -234,11 +235,13 @@ export const formatUnixTimestampToDateTime = (
* If end time is not provided, it returns 'In Progress'
* @param start_time: number - Unix timestamp for start time
* @param end_time: number|null - Unix timestamp for end time
+ * @param abbreviated: boolean - Whether to use abbreviated forms (h, m, s) instead of full words
* @returns string - duration or 'In Progress' if end time is not provided
*/
export const getDurationFromTimestamps = (
start_time: number,
end_time: number | null,
+ abbreviated: boolean = false,
): string => {
if (isNaN(start_time)) {
return "Invalid start time";
@@ -250,12 +253,39 @@ export const getDurationFromTimestamps = (
}
const start = fromUnixTime(start_time);
const end = fromUnixTime(end_time);
- duration = formatDuration(intervalToDuration({ start, end }), {
- format: ["hours", "minutes", "seconds"],
- })
- .replace("hours", "h")
- .replace("minutes", "m")
- .replace("seconds", "s");
+ const durationObj = intervalToDuration({ start, end });
+
+ // Build duration string using i18n keys or abbreviations
+ const parts: string[] = [];
+ if (durationObj.hours) {
+ const count = durationObj.hours;
+ if (abbreviated) {
+ parts.push(`${count}h`);
+ } else {
+ const key = count === 1 ? "hour_one" : "hour_other";
+ parts.push(i18n.t(`time.${key}`, { time: count, ns: "common" }));
+ }
+ }
+ if (durationObj.minutes) {
+ const count = durationObj.minutes;
+ if (abbreviated) {
+ parts.push(`${count}m`);
+ } else {
+ const key = count === 1 ? "minute_one" : "minute_other";
+ parts.push(i18n.t(`time.${key}`, { time: count, ns: "common" }));
+ }
+ }
+ if (durationObj.seconds) {
+ const count = durationObj.seconds;
+ if (abbreviated) {
+ parts.push(`${count}s`);
+ } else {
+ const key = count === 1 ? "second_one" : "second_other";
+ parts.push(i18n.t(`time.${key}`, { time: count, ns: "common" }));
+ }
+ }
+
+ duration = parts.join(" ");
}
return duration;
};
diff --git a/web/src/utils/lifecycleUtil.ts b/web/src/utils/lifecycleUtil.ts
index 0a716d9fc..edb46b969 100644
--- a/web/src/utils/lifecycleUtil.ts
+++ b/web/src/utils/lifecycleUtil.ts
@@ -9,7 +9,9 @@ export function getLifecycleItemDescription(
? lifecycleItem.data.sub_label[0]
: lifecycleItem.data.sub_label || lifecycleItem.data.label;
- const label = getTranslatedLabel(rawLabel);
+ const label = lifecycleItem.data.sub_label
+ ? rawLabel
+ : getTranslatedLabel(rawLabel);
switch (lifecycleItem.class_type) {
case "visible":
@@ -44,14 +46,18 @@ export function getLifecycleItemDescription(
{
ns: "views/explore",
label,
- attribute: lifecycleItem.data.attribute.replaceAll("_", " "),
+ attribute: getTranslatedLabel(
+ lifecycleItem.data.attribute.replaceAll("_", " "),
+ ),
},
);
} else {
title = t("objectLifecycle.lifecycleItemDesc.attribute.other", {
ns: "views/explore",
label: lifecycleItem.data.label,
- attribute: lifecycleItem.data.attribute.replaceAll("_", " "),
+ attribute: getTranslatedLabel(
+ lifecycleItem.data.attribute.replaceAll("_", " "),
+ ),
});
}
return title;
diff --git a/web/src/views/recording/RecordingView.tsx b/web/src/views/recording/RecordingView.tsx
index aee60b6b2..4e0aa83ae 100644
--- a/web/src/views/recording/RecordingView.tsx
+++ b/web/src/views/recording/RecordingView.tsx
@@ -696,7 +696,7 @@ export function RecordingView({
@@ -847,6 +847,7 @@ export function RecordingView({
setScrubbing={setScrubbing}
setExportRange={setExportRange}
onAnalysisOpen={onAnalysisOpen}
+ isPlaying={mainControllerRef?.current?.isPlaying() ?? false}
/>
@@ -864,6 +865,7 @@ type TimelineProps = {
activeReviewItem?: ReviewSegment;
currentTime: number;
exportRange?: TimeRange;
+ isPlaying?: boolean;
setCurrentTime: React.Dispatch