administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-12-06 13:34:13 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UI tweaks (#20687)
Some checks are pending
CI / AMD64 Build (push) Waiting to run
Details
CI / ARM Build (push) Waiting to run
Details
CI / Jetson Jetpack 6 (push) Waiting to run
Details
CI / AMD64 Extra Build (push) Blocked by required conditions
Details
CI / ARM Extra Build (push) Blocked by required conditions
Details
CI / Synaptics Build (push) Blocked by required conditions
Details
CI / Assemble and push default build (push) Blocked by required conditions
Details

Browse Source 
* add blurred icon button component

* apply component to explore, face, and classification views

* apply to exports and fix bug where play button was unclickable
This commit is contained in:
Josh Hawkins 2025-10-27 07:44:34 -05:00 committed by GitHub
parent 5ff7a47ba9
commit 893fe79d22
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 142 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/public/locales/en/views/exports.json
View File

@ -9,6 +9,12 @@
"desc": "Enter a new name for this export.", "desc": "Enter a new name for this export.",
"saveExport": "Save Export" "saveExport": "Save Export"
}, },
"tooltip": {
"shareExport": "Share export",
"downloadVideo": "Download video",
"editName": "Edit name",
"deleteExport": "Delete export"
},
"toast": { "toast": {
"error": { "error": {
"renameExportFailed": "Failed to rename export: {{errorMessage}}" "renameExportFailed": "Failed to rename export: {{errorMessage}}"

28
web/src/components/button/BlurredIconButton.tsx Normal file
View File

@ -0,0 +1,28 @@
import React, { forwardRef } from "react";
import { cn } from "@/lib/utils";
type BlurredIconButtonProps = React.HTMLAttributes<HTMLDivElement>;
const BlurredIconButton = forwardRef<HTMLDivElement, BlurredIconButtonProps>(
({ className = "", children, ...rest }, ref) => {
return (
<div
ref={ref}
className={cn(
"group relative inline-flex items-center justify-center",
className,
)}
{...rest}
>
<div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
<div className="relative z-10 cursor-pointer text-white/85 hover:text-white">
{children}
</div>
</div>
);
},
);
BlurredIconButton.displayName = "BlurredIconButton";
export default BlurredIconButton;

126
web/src/components/card/ExportCard.tsx
View File

@ -4,7 +4,6 @@ import { Button } from "../ui/button";
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
import { isDesktop, isMobile } from "react-device-detect"; import { isDesktop, isMobile } from "react-device-detect";
import { FaDownload, FaPlay, FaShareAlt } from "react-icons/fa"; import { FaDownload, FaPlay, FaShareAlt } from "react-icons/fa";
import Chip from "../indicators/Chip";
import { Skeleton } from "../ui/skeleton"; import { Skeleton } from "../ui/skeleton";
import { import {
Dialog, Dialog,
@ -22,6 +21,8 @@ import { cn } from "@/lib/utils";
import { shareOrCopy } from "@/utils/browserUtil"; import { shareOrCopy } from "@/utils/browserUtil";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { ImageShadowOverlay } from "../overlay/ImageShadowOverlay"; import { ImageShadowOverlay } from "../overlay/ImageShadowOverlay";
import BlurredIconButton from "../button/BlurredIconButton";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
type ExportProps = { type ExportProps = {
className: string; className: string;
@ -156,56 +157,77 @@ export default function ExportCard({
</> </>
)} )}
{hovered && ( {hovered && (
<div> <>
<div className="absolute inset-0 rounded-lg bg-black bg-opacity-60 md:rounded-2xl" /> <div className="absolute inset-0 rounded-lg bg-black bg-opacity-60 md:rounded-2xl" />
<div className="absolute right-1 top-1 flex items-center gap-2"> <div className="absolute right-3 top-2">
{!exportedRecording.in_progress && ( <div className="flex items-center justify-center gap-4">
<Chip {!exportedRecording.in_progress && (
className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500" <Tooltip>
onClick={() => <TooltipTrigger asChild>
shareOrCopy( <BlurredIconButton
`${baseUrl}export?id=${exportedRecording.id}`, onClick={() =>
exportedRecording.name.replaceAll("_", " "), shareOrCopy(
) `${baseUrl}export?id=${exportedRecording.id}`,
} exportedRecording.name.replaceAll("_", " "),
> )
<FaShareAlt className="size-4 text-white" /> }
</Chip> >
)} <FaShareAlt className="size-4" />
{!exportedRecording.in_progress && ( </BlurredIconButton>
<a </TooltipTrigger>
download <TooltipContent>{t("tooltip.shareExport")}</TooltipContent>
href={`${baseUrl}${exportedRecording.video_path.replace("/media/frigate/", "")}`} </Tooltip>
> )}
<Chip className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"> {!exportedRecording.in_progress && (
<FaDownload className="size-4 text-white" /> <a
</Chip> download
</a> href={`${baseUrl}${exportedRecording.video_path.replace("/media/frigate/", "")}`}
)} >
{!exportedRecording.in_progress && ( <Tooltip>
<Chip <TooltipTrigger asChild>
className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500" <BlurredIconButton>
onClick={() => <FaDownload className="size-4" />
setEditName({ </BlurredIconButton>
original: exportedRecording.name, </TooltipTrigger>
update: undefined, <TooltipContent>
}) {t("tooltip.downloadVideo")}
} </TooltipContent>
> </Tooltip>
<MdEditSquare className="size-4 text-white" /> </a>
</Chip> )}
)} {!exportedRecording.in_progress && (
<Chip <Tooltip>
className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500" <TooltipTrigger asChild>
onClick={() => <BlurredIconButton
onDelete({ onClick={() =>
file: exportedRecording.id, setEditName({
exportName: exportedRecording.name, original: exportedRecording.name,
}) update: undefined,
} })
> }
<LuTrash className="size-4 fill-destructive text-destructive" /> >
</Chip> <MdEditSquare className="size-4" />
</BlurredIconButton>
</TooltipTrigger>
<TooltipContent>{t("tooltip.editName")}</TooltipContent>
</Tooltip>
)}
<Tooltip>
<TooltipTrigger asChild>
<BlurredIconButton
onClick={() =>
onDelete({
file: exportedRecording.id,
exportName: exportedRecording.name,
})
}
>
<LuTrash className="size-4 fill-destructive text-destructive hover:text-white" />
</BlurredIconButton>
</TooltipTrigger>
<TooltipContent>{t("tooltip.deleteExport")}</TooltipContent>
</Tooltip>
</div>
</div> </div>
{!exportedRecording.in_progress && ( {!exportedRecording.in_progress && (
@ -220,13 +242,13 @@ export default function ExportCard({
<FaPlay /> <FaPlay />
</Button> </Button>
)} )}
</div> </>
)} )}
{loading && ( {loading && (
<Skeleton className="absolute inset-0 aspect-video rounded-lg md:rounded-2xl" /> <Skeleton className="absolute inset-0 aspect-video rounded-lg md:rounded-2xl" />
)} )}
<ImageShadowOverlay /> <ImageShadowOverlay />
<div className="absolute bottom-2 left-3 flex h-full items-end justify-between text-white smart-capitalize"> <div className="absolute bottom-2 left-3 flex items-end text-white smart-capitalize">
{exportedRecording.name.replaceAll("_", " ")} {exportedRecording.name.replaceAll("_", " ")}
</div> </div>
</div> </div>

41
web/src/components/menu/SearchResultActions.tsx
View File

@ -42,6 +42,7 @@ import useSWR from "swr";
import { Trans, useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";
import { BsFillLightningFill } from "react-icons/bs"; import { BsFillLightningFill } from "react-icons/bs";
import BlurredIconButton from "../button/BlurredIconButton";
type SearchResultActionsProps = { type SearchResultActionsProps = {
searchResult: SearchResult; searchResult: SearchResult;
@ -213,15 +214,13 @@ export default function SearchResultActions({
{config?.semantic_search?.enabled && {config?.semantic_search?.enabled &&
searchResult.data.type == "object" && ( searchResult.data.type == "object" && (
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger asChild>
<div className="group relative inline-flex items-center justify-center"> <BlurredIconButton
{/* blurred circular hover background */} onClick={findSimilar}
<div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" /> aria-label={t("itemMenu.findSimilar.aria")}
<MdImageSearch >
className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" <MdImageSearch className="size-5" />
onClick={findSimilar} </BlurredIconButton>
/>
</div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
{t("itemMenu.findSimilar.label")} {t("itemMenu.findSimilar.label")}
@ -236,14 +235,13 @@ export default function SearchResultActions({
searchResult.data.type == "object" && searchResult.data.type == "object" &&
!searchResult.plus_id && ( !searchResult.plus_id && (
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger asChild>
<div className="group relative inline-flex items-center justify-center"> <BlurredIconButton
<div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" /> onClick={showSnapshot}
<FrigatePlusIcon aria-label={t("itemMenu.submitToPlus.aria")}
className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" >
onClick={showSnapshot} <FrigatePlusIcon className="size-5" />
/> </BlurredIconButton>
</div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
{t("itemMenu.submitToPlus.label")} {t("itemMenu.submitToPlus.label")}
@ -252,11 +250,10 @@ export default function SearchResultActions({
)} )}
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger> <DropdownMenuTrigger asChild>
<div className="group relative inline-flex items-center justify-center"> <BlurredIconButton aria-label={t("itemMenu.more.aria")}>
<div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" /> <FiMoreVertical className="size-5" />
<FiMoreVertical className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" /> </BlurredIconButton>
</div>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end">{menuItems}</DropdownMenuContent> <DropdownMenuContent align="end">{menuItems}</DropdownMenuContent>
</DropdownMenu> </DropdownMenu>

20
web/src/pages/FaceLibrary.tsx
View File

@ -5,6 +5,7 @@ import TextEntryDialog from "@/components/overlay/dialog/TextEntryDialog";
import UploadImageDialog from "@/components/overlay/dialog/UploadImageDialog"; import UploadImageDialog from "@/components/overlay/dialog/UploadImageDialog";
import FaceSelectionDialog from "@/components/overlay/FaceSelectionDialog"; import FaceSelectionDialog from "@/components/overlay/FaceSelectionDialog";
import { Button, buttonVariants } from "@/components/ui/button"; import { Button, buttonVariants } from "@/components/ui/button";
import BlurredIconButton from "@/components/button/BlurredIconButton";
import { import {
AlertDialog, AlertDialog,
AlertDialogAction, AlertDialogAction,
@ -858,20 +859,15 @@ function FaceAttemptGroup({
faceNames={faceNames} faceNames={faceNames}
onTrainAttempt={(name) => onTrainAttempt(data, name)} onTrainAttempt={(name) => onTrainAttempt(data, name)}
> >
<div className="group relative inline-flex items-center justify-center"> <BlurredIconButton>
<div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" /> <AddFaceIcon className="size-5" />
<AddFaceIcon className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" /> </BlurredIconButton>
</div>
</FaceSelectionDialog> </FaceSelectionDialog>
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger asChild>
<div className="group relative inline-flex items-center justify-center"> <BlurredIconButton onClick={() => onReprocess(data)}>
<div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" /> <LuRefreshCw className="size-5" />
<LuRefreshCw </BlurredIconButton>
className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white"
onClick={() => onReprocess(data)}
/>
</div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>{t("button.reprocessFace")}</TooltipContent> <TooltipContent>{t("button.reprocessFace")}</TooltipContent>
</Tooltip> </Tooltip>

15
web/src/views/classification/ModelTrainingView.tsx
View File

@ -51,6 +51,7 @@ import { toast } from "sonner";
import useSWR from "swr"; import useSWR from "swr";
import ClassificationSelectionDialog from "@/components/overlay/ClassificationSelectionDialog"; import ClassificationSelectionDialog from "@/components/overlay/ClassificationSelectionDialog";
import { TbCategoryPlus } from "react-icons/tb"; import { TbCategoryPlus } from "react-icons/tb";
import BlurredIconButton from "@/components/button/BlurredIconButton";
import { useModelState } from "@/api/ws"; import { useModelState } from "@/api/ws";
import { ModelState } from "@/types/ws"; import { ModelState } from "@/types/ws";
import ActivityIndicator from "@/components/indicators/activity-indicator"; import ActivityIndicator from "@/components/indicators/activity-indicator";
@ -811,10 +812,9 @@ function StateTrainGrid({
image={data.filename} image={data.filename}
onRefresh={onRefresh} onRefresh={onRefresh}
> >
<div className="group relative inline-flex items-center justify-center"> <BlurredIconButton>
<div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" /> <TbCategoryPlus className="size-5" />
<TbCategoryPlus className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" /> </BlurredIconButton>
</div>
</ClassificationSelectionDialog> </ClassificationSelectionDialog>
</ClassificationCard> </ClassificationCard>
</div> </div>
@ -961,10 +961,9 @@ function ObjectTrainGrid({
image={data.filename} image={data.filename}
onRefresh={onRefresh} onRefresh={onRefresh}
> >
<div className="group relative inline-flex items-center justify-center"> <BlurredIconButton>
<div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" /> <TbCategoryPlus className="size-5" />
<TbCategoryPlus className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" /> </BlurredIconButton>
</div>
</ClassificationSelectionDialog> </ClassificationSelectionDialog>
</> </>
)} )}