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

Update camera activity indicator (#10208)

Browse Source 
* new indicator

* create indicators directory and update imports

* create indicators directory and update imports

* remove vite
This commit is contained in:
Josh Hawkins
2024-03-03 10:32:47 -06:00
committed by GitHub
parent 312dc95156
commit c74eb75554
17 changed files with 85 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
web/src/components/indicators/CameraActivityIndicator.tsx Normal file
View File

@@ -0,0 +1,33 @@
function CameraActivityIndicator() {
return (
<div className="flex items-center justify-center relative z-20">
<div className="flex">
<div className="absolute size-[5px] inset-0 bg-severity_alert-dimmed rounded-full shadow-[0px_0px_10px_0px_#00000024,0px_0px_15px_0px_#00000024] z-20 animate-move"></div>
<div className="flex-1 size-[5px] mr-[2px] bg-severity_alert rounded-full animate-scale1"></div>
<div className="flex-1 size-[5px] mr-[2px] bg-severity_alert rounded-full animate-scale2"></div>
<div className="flex-1 size-[5px] mr-[2px] bg-severity_alert rounded-full animate-scale3"></div>
<div className="flex-1 size-[5px] mr-[2px] bg-severity_alert rounded-full animate-scale4"></div>
</div>
<svg className="hidden" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur
in="SourceGraphic"
stdDeviation="10"
result="blur"
/>
<feColorMatrix
in="blur"
type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
result="goo"
/>
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>
</div>
);
}
export default CameraActivityIndicator;