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

Animate visibility of chips

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-08 11:50:32 -07:00
parent 3fb65e1987
commit 063ed05738
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/components/player/LivePlayer.tsx
View File

@ -175,7 +175,11 @@ export default function LivePlayer({
{liveChips && (
<div className="absolute flex left-2 top-2 gap-2">
<Chip className="bg-gray-500 bg-gradient-to-br">
<Chip
className={`bg-gray-500 bg-gradient-to-br ${
activeMotion ? "visible opacity-100" : "invisible opacity-0"
}`}
>
<MdLeakAdd
className={`w-4 h-4 ${
activeMotion ? "text-motion" : "text-white"
@ -184,7 +188,11 @@ export default function LivePlayer({
<div className="ml-1 capitalize text-white text-xs">Motion</div>
</Chip>
{cameraConfig.audio.enabled_in_config && (
<Chip className="bg-gray-500 bg-gradient-to-br">
<Chip
className={`bg-gray-500 bg-gradient-to-br transition-all ${
activeAudio ? "visible opacity-100" : "invisible opacity-0"
}`}
>
<BsSoundwave
className={`w-4 h-4 ${
activeAudio ? "text-audio" : "text-white"
@ -193,7 +201,11 @@ export default function LivePlayer({
<div className="ml-1 capitalize text-white text-xs">Sound</div>
</Chip>
)}
<Chip className="bg-gray-500 bg-gradient-to-br">
<Chip
className={`bg-gray-500 bg-gradient-to-br transition-all ${
activeTracking ? "inline opacity-100" : "invisible opacity-0"
}`}
>
<MdSelectAll
className={`w-4 h-4 ${
activeTracking ? "text-object" : "text-white"

2
web/src/pages/Live.tsx
View File

@ -77,7 +77,7 @@ function Live() {
let grow;
if (camera.detect.width / camera.detect.height > 2) {
grow = "aspect-wide md:col-span-2";
} else if (camera.detect.width / camera.detect.height < 1) {
} else if (camera.detect.width / camera.detect.height < 0.7) {
grow = "aspect-tall md:row-span-2";
} else {
grow = "aspect-video";