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

use css instead of js for reviewed button hover state in filmstrip

Browse Source
This commit is contained in:
Josh Hawkins 2026-01-23 08:00:12 -06:00
parent 7cf6ba5c66
commit e85f1947a9
1 changed files with 18 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
web/src/components/card/AnimatedEventCard.tsx
View File

@ -12,7 +12,7 @@ import { useCameraPreviews } from "@/hooks/use-camera-previews";
import { baseUrl } from "@/api/baseUrl"; import { baseUrl } from "@/api/baseUrl";
import { VideoPreview } from "../preview/ScrubbablePreview"; import { VideoPreview } from "../preview/ScrubbablePreview";
import { useApiHost } from "@/api"; import { useApiHost } from "@/api";
import { isDesktop, isSafari } from "react-device-detect"; import { isSafari } from "react-device-detect";
import { useUserPersistence } from "@/hooks/use-user-persistence"; import { useUserPersistence } from "@/hooks/use-user-persistence";
import { Skeleton } from "../ui/skeleton"; import { Skeleton } from "../ui/skeleton";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
@ -87,7 +87,6 @@ export function AnimatedEventCard({
}, [visibilityListener]); }, [visibilityListener]);
const [isLoaded, setIsLoaded] = useState(false); const [isLoaded, setIsLoaded] = useState(false);
const [isHovered, setIsHovered] = useState(false);
// interaction // interaction
@ -134,31 +133,27 @@ export function AnimatedEventCard({
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div <div
className="relative h-24 flex-shrink-0 overflow-hidden rounded md:rounded-lg 4k:h-32" className="group relative h-24 flex-shrink-0 overflow-hidden rounded md:rounded-lg 4k:h-32"
style={{ style={{
aspectRatio: alertVideos ? aspectRatio : undefined, aspectRatio: alertVideos ? aspectRatio : undefined,
}} }}
onMouseEnter={isDesktop ? () => setIsHovered(true) : undefined}
onMouseLeave={isDesktop ? () => setIsHovered(false) : undefined}
> >
{isHovered && ( <Tooltip>
<Tooltip> <TooltipTrigger asChild>
<TooltipTrigger asChild> <Button
<Button className="pointer-events-none absolute left-2 top-1 z-40 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100"
className="absolute left-2 top-1 z-40 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500" size="xs"
size="xs" aria-label={t("markAsReviewed")}
aria-label={t("markAsReviewed")} onClick={async () => {
onClick={async () => { await axios.post(`reviews/viewed`, { ids: [event.id] });
await axios.post(`reviews/viewed`, { ids: [event.id] }); updateEvents();
updateEvents(); }}
}} >
> <FaCircleCheck className="size-3 text-white" />
<FaCircleCheck className="size-3 text-white" /> </Button>
</Button> </TooltipTrigger>
</TooltipTrigger> <TooltipContent>{t("markAsReviewed")}</TooltipContent>
<TooltipContent>{t("markAsReviewed")}</TooltipContent> </Tooltip>
</Tooltip>
)}
{previews != undefined && alertVideosLoaded && ( {previews != undefined && alertVideosLoaded && (
<div <div
className="size-full cursor-pointer" className="size-full cursor-pointer"