Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

UI changes (#9823)

Browse Source 
* fix button within button

* add subtle overlay gradient

* try disconnecting to improve memory usage

* rounded corners on gradients
This commit is contained in:
Josh Hawkins 2024-02-12 17:34:45 -06:00 committed by GitHub
parent 09153a154a
commit f54cb21bd0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 31 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/Header.tsx
View File

@ -50,9 +50,7 @@ function Header({ onToggleNavbar }: HeaderProps) {
</Button> </Button>
<Link to="/"> <Link to="/">
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<div className="w-10 mr-5"> <Logo className="w-10 mr-5" />
<Logo />
</div>
</div> </div>
</Link> </Link>
<HeaderNavigation /> <HeaderNavigation />

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

@ -40,7 +40,10 @@ export default function LivePlayer({
const { activeMotion, activeAudio, activeTracking } = const { activeMotion, activeAudio, activeTracking } =
useCameraActivity(cameraConfig); useCameraActivity(cameraConfig);
const cameraActive = useMemo(() => activeMotion || activeTracking, [activeMotion, activeTracking]) const cameraActive = useMemo(
() => activeMotion || activeTracking,
[activeMotion, activeTracking]
);
const liveMode = useCameraLiveMode(cameraConfig, preferredLiveMode); const liveMode = useCameraLiveMode(cameraConfig, preferredLiveMode);
const [liveReady, setLiveReady] = useState(false); const [liveReady, setLiveReady] = useState(false);
@ -168,8 +171,10 @@ export default function LivePlayer({
: "outline-0" : "outline-0"
} transition-all duration-500 ${className}`} } transition-all duration-500 ${className}`}
> >
{(showStillWithoutActivity == false || cameraActive) && <div className="absolute top-0 left-0 right-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
player} <div className="absolute bottom-0 left-0 right-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
{(showStillWithoutActivity == false || cameraActive) && player}
<div <div
className={`absolute left-0 top-0 right-0 bottom-0 w-full ${ className={`absolute left-0 top-0 right-0 bottom-0 w-full ${
@ -180,14 +185,14 @@ export default function LivePlayer({
className="w-full h-full" className="w-full h-full"
camera={cameraConfig.name} camera={cameraConfig.name}
showFps={false} showFps={false}
reloadInterval={(cameraActive && !liveReady) ? 200 : 30000} reloadInterval={cameraActive && !liveReady ? 200 : 30000}
/> />
</div> </div>
<div className="absolute flex left-2 top-2 gap-2"> <div className="absolute flex left-2 top-2 gap-2">
<Chip <Chip
in={activeMotion} in={activeMotion}
className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500/90`} className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500`}
> >
<MdLeakAdd className="w-4 h-4 text-motion" /> <MdLeakAdd className="w-4 h-4 text-motion" />
<div className="ml-1 text-white text-xs">Motion</div> <div className="ml-1 text-white text-xs">Motion</div>
@ -196,7 +201,7 @@ export default function LivePlayer({
{cameraConfig.audio.enabled_in_config && ( {cameraConfig.audio.enabled_in_config && (
<Chip <Chip
in={activeAudio} in={activeAudio}
className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500/90`} className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500`}
> >
<BsSoundwave className="w-4 h-4 text-audio" /> <BsSoundwave className="w-4 h-4 text-audio" />
<div className="ml-1 text-white text-xs">Sound</div> <div className="ml-1 text-white text-xs">Sound</div>
@ -204,7 +209,7 @@ export default function LivePlayer({
)} )}
</div> </div>
<Chip className="absolute right-2 top-2 bg-gradient-to-br from-gray-300/50 to-gray-500/90"> <Chip className="absolute right-2 top-2 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500">
{recording == "ON" && ( {recording == "ON" && (
<MdCircle className="w-2 h-2 drop-shadow-md shadow-danger text-danger" /> <MdCircle className="w-2 h-2 drop-shadow-md shadow-danger text-danger" />
)} )}

4
web/src/components/player/MsePlayer.tsx
View File

@ -243,6 +243,10 @@ function MSEPlayer({ camera, className, onPlaying }: MSEPlayerProps) {
useEffect(() => { useEffect(() => {
onConnect(); onConnect();
return () => {
onDisconnect();
};
}, [wsURL]); }, [wsURL]);
return ( return (

26
web/src/components/settings/SettingsNavItems.tsx
View File

@ -98,17 +98,19 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
<> <>
<div className={className}> <div className={className}>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger> <DropdownMenuTrigger asChild>
<Tooltip> <a href="#">
<TooltipTrigger asChild> <Tooltip>
<Button size="icon" variant="ghost"> <TooltipTrigger asChild>
<LuSettings /> <Button size="icon" variant="ghost">
</Button> <LuSettings />
</TooltipTrigger> </Button>
<TooltipContent side="right"> </TooltipTrigger>
<p>Settings</p> <TooltipContent side="right">
</TooltipContent> <p>Settings</p>
</Tooltip> </TooltipContent>
</Tooltip>
</a>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="md:w-72 mr-5"> <DropdownMenuContent className="md:w-72 mr-5">
<DropdownMenuLabel>System</DropdownMenuLabel> <DropdownMenuLabel>System</DropdownMenuLabel>
@ -242,7 +244,7 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger asChild>
<Button size="icon" variant="ghost"> <Button size="icon" variant="ghost">
<VscAccount /> <VscAccount />
</Button> </Button>