administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-06 11:15:21 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Add support for audio icons in MultiSelect component

Browse Source
This commit is contained in:
Sergey Krashevich 2023-08-24 06:55:35 +03:00
parent 7c629c1874
commit a2edd40282
No known key found for this signature in database
GPG Key ID: 625171324E7D3856
2 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/components/MultiSelect.jsx
View File

@ -5,6 +5,8 @@ import { ArrowDropdown } from '../icons/ArrowDropdown';
import Heading from './Heading'; import Heading from './Heading';
import Button from './Button'; import Button from './Button';
import CameraIcon from '../icons/Camera'; import CameraIcon from '../icons/Camera';
import { AudioIcon } from '../icons/Audio';
import useSWR from 'swr';
export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSelectSingle }) { export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSelectSingle }) {
const popupRef = useRef(null); const popupRef = useRef(null);
@ -18,7 +20,7 @@ export default function MultiSelect({ className, title, options, selection, onTo
}; };
const menuHeight = Math.round(window.innerHeight * 0.55); const menuHeight = Math.round(window.innerHeight * 0.55);
const { data: config } = useSWR('config');
return ( return (
<div className={`${className} p-2`} ref={popupRef}> <div className={`${className} p-2`} ref={popupRef}>
<div className="flex justify-between min-w-[120px]" onClick={() => setState({ showMenu: true })}> <div className="flex justify-between min-w-[120px]" onClick={() => setState({ showMenu: true })}>
@ -59,7 +61,8 @@ export default function MultiSelect({ className, title, options, selection, onTo
className="max-h-[35px] mx-2" className="max-h-[35px] mx-2"
onClick={() => onSelectSingle(item)} onClick={() => onSelectSingle(item)}
> >
<CameraIcon /> { (title === "Labels" && config.audio.listen.includes(item)) ? ( <AudioIcon /> ) : ( <CameraIcon /> ) }
</Button> </Button>
</div> </div>
</div> </div>

20
web/src/icons/Audio.jsx
View File

@ -32,5 +32,23 @@ export function Snapshot({ className = 'h-6 w-6', stroke = 'currentColor', onCli
</svg> </svg>
); );
} }
export function AudioIcon({ className = 'h-6 w-6', stroke = 'currentColor', fill = 'none', onClick = () => {} }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
className={className}
fill={fill}
viewBox="0 0 24 24"
stroke={stroke}
onClick={onClick}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5L6 9H2v6h4l5 4V5zM19 9a2 2 0 01-2-2a2 2 0 012-2a2 2 0 012 2a2 2 0 01-2 2zm0 4a4 4 0 01-4-4a4 4 0 014-4a4 4 0 014 4a4 4 0 01-4 4zm0 4a6 6 0 01-6-6a6 6 0 016-6a6 6 0 016 6a6 6 0 01-6 6z"
/>
</svg>
);
}
export default memo(Snapshot); export default memo(Snapshot);