mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-15 07:35:27 +03:00
Move buttons and menu to thumbnail footer
This commit is contained in:
Josh Hawkins
parent
9756829325
commit
778fd7b84c
@ -1,35 +1,17 @@
|
|||||||
import { useCallback, useMemo, useState } from "react";
|
import { useCallback, useMemo, useState } from "react";
|
||||||
import { useApiHost } from "@/api";
|
import { useApiHost } from "@/api";
|
||||||
import { getIconForLabel } from "@/utils/iconUtil";
|
import { getIconForLabel } from "@/utils/iconUtil";
|
||||||
import TimeAgo from "../dynamic/TimeAgo";
|
|
||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
import { FrigateConfig } from "@/types/frigateConfig";
|
import { FrigateConfig } from "@/types/frigateConfig";
|
||||||
import { isIOS, isSafari } from "react-device-detect";
|
import { isIOS, isSafari } from "react-device-detect";
|
||||||
import Chip from "@/components/indicators/Chip";
|
import Chip from "@/components/indicators/Chip";
|
||||||
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
|
|
||||||
import useImageLoaded from "@/hooks/use-image-loaded";
|
import useImageLoaded from "@/hooks/use-image-loaded";
|
||||||
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
||||||
import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
|
import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
|
||||||
import ActivityIndicator from "../indicators/activity-indicator";
|
|
||||||
import { capitalizeFirstLetter } from "@/utils/stringUtil";
|
import { capitalizeFirstLetter } from "@/utils/stringUtil";
|
||||||
import { SearchResult } from "@/types/search";
|
import { SearchResult } from "@/types/search";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import { TooltipPortal } from "@radix-ui/react-tooltip";
|
import { TooltipPortal } from "@radix-ui/react-tooltip";
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from "@/components/ui/dropdown-menu";
|
|
||||||
import {
|
|
||||||
LuActivity,
|
|
||||||
LuCamera,
|
|
||||||
LuDownload,
|
|
||||||
LuMoreVertical,
|
|
||||||
LuSearch,
|
|
||||||
LuTrash2,
|
|
||||||
} from "react-icons/lu";
|
|
||||||
import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
|
|
||||||
import { FrigatePlusDialog } from "../overlay/dialog/FrigatePlusDialog";
|
import { FrigatePlusDialog } from "../overlay/dialog/FrigatePlusDialog";
|
||||||
import { Event } from "@/types/event";
|
import { Event } from "@/types/event";
|
||||||
|
|
||||||
@ -74,14 +56,6 @@ export default function SearchThumbnail({
|
|||||||
return `${searchResult.label}-verified`;
|
return `${searchResult.label}-verified`;
|
||||||
}, [config, searchResult]);
|
}, [config, searchResult]);
|
||||||
|
|
||||||
// date
|
|
||||||
|
|
||||||
const formattedDate = useFormattedTimestamp(
|
|
||||||
searchResult.start_time,
|
|
||||||
config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
|
|
||||||
config?.ui.timezone,
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative size-full cursor-pointer" onClick={handleOnClick}>
|
<div className="relative size-full cursor-pointer" onClick={handleOnClick}>
|
||||||
<FrigatePlusDialog
|
<FrigatePlusDialog
|
||||||
@ -147,64 +121,7 @@ export default function SearchThumbnail({
|
|||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
<div className="rounded-t-l pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full bg-gradient-to-b from-black/60 to-transparent"></div>
|
<div className="rounded-t-l pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full bg-gradient-to-b from-black/60 to-transparent"></div>
|
||||||
<div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 z-10 flex h-[20%] items-end bg-gradient-to-t from-black/60 to-transparent">
|
<div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 z-10 flex h-[20%] items-end bg-gradient-to-t from-black/60 to-transparent"></div>
|
||||||
<div className="flex w-full items-center justify-between bg-black/50 px-2 py-2 text-sm text-white">
|
|
||||||
<div className="flex flex-col items-start">
|
|
||||||
{searchResult.end_time ? (
|
|
||||||
<TimeAgo time={searchResult.start_time * 1000} dense />
|
|
||||||
) : (
|
|
||||||
<div>
|
|
||||||
<ActivityIndicator size={24} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{formattedDate}
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-row items-center justify-end gap-4">
|
|
||||||
{config?.plus?.enabled && searchResult.end_time && (
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger asChild>
|
|
||||||
<FrigatePlusIcon
|
|
||||||
className="size-5 cursor-pointer text-white"
|
|
||||||
onClick={() => setShowFrigatePlus(true)}
|
|
||||||
/>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent>Submit to Frigate+</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger>
|
|
||||||
<LuSearch className="size-5 cursor-pointer text-white" />
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent>Find similar</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger>
|
|
||||||
<LuMoreVertical className="size-5 cursor-pointer text-white" />
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent>
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<LuDownload className="mr-2 size-4" />
|
|
||||||
<span>Download video</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<LuCamera className="mr-2 size-4" />
|
|
||||||
<span>Download snapshot</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<LuActivity className="mr-2 size-4" />
|
|
||||||
<span>View object lifecycle</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<LuTrash2 className="mr-2 size-4" />
|
|
||||||
<span>Delete</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
116
web/src/components/card/SearchThumbnailFooter.tsx
Normal file
116
web/src/components/card/SearchThumbnailFooter.tsx
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import TimeAgo from "../dynamic/TimeAgo";
|
||||||
|
import useSWR from "swr";
|
||||||
|
import { FrigateConfig } from "@/types/frigateConfig";
|
||||||
|
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
|
||||||
|
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
||||||
|
import ActivityIndicator from "../indicators/activity-indicator";
|
||||||
|
import { SearchResult } from "@/types/search";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
import {
|
||||||
|
LuActivity,
|
||||||
|
LuCamera,
|
||||||
|
LuDownload,
|
||||||
|
LuMoreVertical,
|
||||||
|
LuSearch,
|
||||||
|
LuTrash2,
|
||||||
|
} from "react-icons/lu";
|
||||||
|
import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
|
||||||
|
import { FrigatePlusDialog } from "../overlay/dialog/FrigatePlusDialog";
|
||||||
|
import { Event } from "@/types/event";
|
||||||
|
|
||||||
|
type SearchThumbnailProps = {
|
||||||
|
searchResult: SearchResult;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SearchThumbnailFooter({
|
||||||
|
searchResult,
|
||||||
|
}: SearchThumbnailProps) {
|
||||||
|
const { data: config } = useSWR<FrigateConfig>("config");
|
||||||
|
|
||||||
|
// interactions
|
||||||
|
|
||||||
|
const [showFrigatePlus, setShowFrigatePlus] = useState(false);
|
||||||
|
|
||||||
|
// date
|
||||||
|
|
||||||
|
const formattedDate = useFormattedTimestamp(
|
||||||
|
searchResult.start_time,
|
||||||
|
config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
|
||||||
|
config?.ui.timezone,
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<FrigatePlusDialog
|
||||||
|
upload={
|
||||||
|
showFrigatePlus ? (searchResult as unknown as Event) : undefined
|
||||||
|
}
|
||||||
|
onClose={() => setShowFrigatePlus(false)}
|
||||||
|
onEventUploaded={() => {}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex flex-col items-start">
|
||||||
|
{searchResult.end_time ? (
|
||||||
|
<TimeAgo time={searchResult.start_time * 1000} dense />
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
<ActivityIndicator size={24} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{formattedDate}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row items-center justify-end gap-4">
|
||||||
|
{config?.plus?.enabled &&
|
||||||
|
searchResult.has_snapshot &&
|
||||||
|
searchResult.end_time && (
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<FrigatePlusIcon
|
||||||
|
className="size-5 cursor-pointer text-white"
|
||||||
|
onClick={() => setShowFrigatePlus(true)}
|
||||||
|
/>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>Submit to Frigate+</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<LuSearch className="size-5 cursor-pointer text-white" />
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>Find similar</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger>
|
||||||
|
<LuMoreVertical className="size-5 cursor-pointer text-white" />
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent>
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<LuDownload className="mr-2 size-4" />
|
||||||
|
<span>Download video</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<LuCamera className="mr-2 size-4" />
|
||||||
|
<span>Download snapshot</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<LuActivity className="mr-2 size-4" />
|
||||||
|
<span>View object lifecycle</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<LuTrash2 className="mr-2 size-4" />
|
||||||
|
<span>Delete</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -33,6 +33,7 @@ import {
|
|||||||
PopoverTrigger,
|
PopoverTrigger,
|
||||||
} from "@/components/ui/popover";
|
} from "@/components/ui/popover";
|
||||||
import { usePersistence } from "@/hooks/use-persistence";
|
import { usePersistence } from "@/hooks/use-persistence";
|
||||||
|
import SearchThumbnailFooter from "@/components/card/SearchThumbnailFooter";
|
||||||
|
|
||||||
type SearchViewProps = {
|
type SearchViewProps = {
|
||||||
search: string;
|
search: string;
|
||||||
@ -76,8 +77,6 @@ export default function SearchView({
|
|||||||
"sm:grid-cols-4": effectiveColumnCount === 4,
|
"sm:grid-cols-4": effectiveColumnCount === 4,
|
||||||
"sm:grid-cols-5": effectiveColumnCount === 5,
|
"sm:grid-cols-5": effectiveColumnCount === 5,
|
||||||
"sm:grid-cols-6": effectiveColumnCount === 6,
|
"sm:grid-cols-6": effectiveColumnCount === 6,
|
||||||
"sm:grid-cols-7": effectiveColumnCount === 7,
|
|
||||||
"sm:grid-cols-8": effectiveColumnCount >= 8,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// suggestions values
|
// suggestions values
|
||||||
@ -392,7 +391,7 @@ export default function SearchView({
|
|||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"aspect-square size-full overflow-hidden rounded-lg",
|
"aspect-square w-full overflow-hidden rounded-t-lg border",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<SearchThumbnail
|
<SearchThumbnail
|
||||||
@ -428,6 +427,9 @@ export default function SearchView({
|
|||||||
<div
|
<div
|
||||||
className={`review-item-ring pointer-events-none absolute inset-0 z-10 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `shadow-selected outline-selected` : "outline-transparent duration-500"}`}
|
className={`review-item-ring pointer-events-none absolute inset-0 z-10 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `shadow-selected outline-selected` : "outline-transparent duration-500"}`}
|
||||||
/>
|
/>
|
||||||
|
<div className="flex w-full items-center justify-between rounded-b-lg border border-t-0 bg-card p-3 text-card-foreground">
|
||||||
|
<SearchThumbnailFooter searchResult={value} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
@ -466,7 +468,7 @@ export default function SearchView({
|
|||||||
<Slider
|
<Slider
|
||||||
value={[effectiveColumnCount]}
|
value={[effectiveColumnCount]}
|
||||||
onValueChange={([value]) => setColumnCount(value)}
|
onValueChange={([value]) => setColumnCount(value)}
|
||||||
max={8}
|
max={6}
|
||||||
min={2}
|
min={2}
|
||||||
step={1}
|
step={1}
|
||||||
className="flex-grow"
|
className="flex-grow"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user