chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Add support for review information side panel (#13063)

Browse Source
This commit is contained in:
Nicolas Mowen
2024-08-14 08:02:21 -06:00
parent 2cb81ef116
commit 943114c052
7 changed files with 205 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/player/PreviewThumbnailPlayer.tsx
View File

@@ -28,7 +28,7 @@ type PreviewPlayerProps = {
timeRange: TimeRange;
onTimeUpdate?: (time: number | undefined) => void;
setReviewed: (review: ReviewSegment) => void;
onClick: (review: ReviewSegment, ctrl: boolean) => void;
onClick: (review: ReviewSegment, ctrl: boolean, detail: boolean) => void;
};
export default function PreviewThumbnailPlayer({
@@ -50,7 +50,7 @@ export default function PreviewThumbnailPlayer({
const handleOnClick = useCallback(
(e: React.MouseEvent<HTMLDivElement>) => {
if (!ignoreClick) {
onClick(review, e.metaKey);
onClick(review, e.metaKey, false);
}
},
[ignoreClick, review, onClick],
@@ -73,7 +73,7 @@ export default function PreviewThumbnailPlayer({
});
useContextMenu(imgRef, () => {
onClick(review, true);
onClick(review, true, false);
});
// playback
@@ -237,6 +237,7 @@ export default function PreviewThumbnailPlayer({
<>
<Chip
className={`flex items-start justify-between space-x-1 ${playingBack ? "hidden" : ""} bg-gradient-to-br ${review.has_been_reviewed ? "bg-green-600 from-green-600 to-green-700" : "bg-gray-500 from-gray-400 to-gray-500"} z-0`}
onClick={() => onClick(review, false, true)}
>
{review.data.objects.sort().map((object) => {
return getIconForLabel(object, "size-3 text-white");
@@ -265,6 +266,7 @@ export default function PreviewThumbnailPlayer({
.sort()
.join(", ")
.replaceAll("-verified", "")}
{` Click To View Detection Details`}
</TooltipContent>
</Tooltip>
</div>

32
web/src/components/player/SearchThumbnailPlayer.tsx
View File

@@ -17,7 +17,6 @@ import { capitalizeFirstLetter } from "@/utils/stringUtil";
import { VideoPreview } from "../preview/ScrubbablePreview";
import { Preview } from "@/types/preview";
import { SearchResult } from "@/types/search";
import { LuInfo } from "react-icons/lu";
import useContextMenu from "@/hooks/use-contextmenu";
import { cn } from "@/lib/utils";
@@ -212,6 +211,7 @@ export default function SearchThumbnailPlayer({
<>
<Chip
className={`flex items-start justify-between space-x-1 ${playingBack ? "hidden" : ""} "bg-gray-500 z-0 bg-gradient-to-br from-gray-400 to-gray-500`}
onClick={() => onClick(searchResult, true)}
>
{getIconForLabel(
searchResult.label,
@@ -231,34 +231,8 @@ export default function SearchThumbnailPlayer({
.map((text) => capitalizeFirstLetter(text))
.sort()
.join(", ")
.replaceAll("-verified", "")}
</TooltipContent>
</Tooltip>
</div>
<div className="absolute right-0 top-2 z-40">
<Tooltip>
<div
className="flex"
onMouseEnter={() => setTooltipHovering(true)}
onMouseLeave={() => setTooltipHovering(false)}
>
<TooltipTrigger asChild>
<div className="mx-3 pb-1 text-sm text-white">
{
<>
<Chip
className={`flex items-start justify-between space-x-1 ${playingBack ? "hidden" : ""} "bg-gray-500 z-0 bg-gradient-to-br from-gray-400 to-gray-500`}
onClick={() => onClick(searchResult, true)}
>
<LuInfo className="size-3" />
</Chip>
</>
}
</div>
</TooltipTrigger>
</div>
<TooltipContent className="capitalize">
View Detection Details
.replaceAll("-verified", "")}{" "}
{` Click To View Detection Details`}
</TooltipContent>
</Tooltip>
</div>