Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-07-12 13:47:14 +02:00
Code Issues Projects Releases Wiki Activity

UI Fixes (#11423)

Browse Source 
* Settings fixes

* Fix formatting
This commit is contained in:
Nicolas Mowen 2024-05-18 14:19:32 -06:00 committed by GitHub
parent 402f5fa142
commit 16f1c575d7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 83 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -116,7 +116,7 @@ export default function Statusbar() {
); );
})} })}
</div> </div>
<div className="flex h-full items-center gap-2 max-w-[50%] overflow-x-auto no-scrollbar"> <div className="no-scrollbar flex h-full max-w-[50%] items-center gap-2 overflow-x-auto">
{Object.entries(messages).length === 0 ? ( {Object.entries(messages).length === 0 ? (
<div className="flex items-center gap-2 text-sm"> <div className="flex items-center gap-2 text-sm">
<FaCheck className="size-3 text-green-500" /> <FaCheck className="size-3 text-green-500" />
@ -129,7 +129,7 @@ export default function Statusbar() {
const message = ( const message = (
<div <div
key={text} key={text}
className={`flex items-center gap-2 text-sm whitespace-nowrap ${link ? "cursor-pointer hover:underline" : ""}`} className={`flex items-center gap-2 whitespace-nowrap text-sm ${link ? "cursor-pointer hover:underline" : ""}`}
> >
<IoIosWarning <IoIosWarning
className={`size-5 ${color || "text-danger"}`} className={`size-5 ${color || "text-danger"}`}

94
web/src/components/menu/AccountSettings.tsx
View File

@ -34,55 +34,51 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
const MenuItem = isDesktop ? DropdownMenuItem : DialogClose; const MenuItem = isDesktop ? DropdownMenuItem : DialogClose;
return ( return (
<div className={className}> <Container>
<Container> <Trigger asChild>
<Trigger asChild> <Tooltip>
<a href="#"> <TooltipTrigger asChild>
<Tooltip> <div
<TooltipTrigger asChild> className={cn(
<div "flex flex-col items-center justify-center",
className={cn( isDesktop
"flex flex-col items-center justify-center", ? "cursor-pointer rounded-lg bg-secondary text-secondary-foreground hover:bg-muted"
isDesktop : "text-secondary-foreground",
? "cursor-pointer rounded-lg bg-secondary text-secondary-foreground hover:bg-muted" className,
: "text-secondary-foreground", )}
className,
)}
>
<VscAccount className="size-5 md:m-[6px]" />
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="right">
<p>Account</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</a>
</Trigger>
<Content
className={
isDesktop ? "mr-5 w-72" : "max-h-[75dvh] overflow-hidden p-2"
}
>
<div className="w-full flex-col overflow-y-auto overflow-x-hidden">
<DropdownMenuLabel>
Current User: {profile?.username || "anonymous"}
</DropdownMenuLabel>
<DropdownMenuSeparator className={isDesktop ? "mt-3" : "mt-1"} />
<MenuItem
className={
isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
}
> >
<a className="flex" href={logoutUrl}> <VscAccount className="size-5 md:m-[6px]" />
<LuLogOut className="mr-2 size-4" /> </div>
<span>Logout</span> </TooltipTrigger>
</a> <TooltipPortal>
</MenuItem> <TooltipContent side="right">
</div> <p>Account</p>
</Content> </TooltipContent>
</Container> </TooltipPortal>
</div> </Tooltip>
</Trigger>
<Content
className={
isDesktop ? "mr-5 w-72" : "max-h-[75dvh] overflow-hidden p-2"
}
>
<div className="w-full flex-col overflow-y-auto overflow-x-hidden">
<DropdownMenuLabel>
Current User: {profile?.username || "anonymous"}
</DropdownMenuLabel>
<DropdownMenuSeparator className={isDesktop ? "mt-3" : "mt-1"} />
<MenuItem
className={
isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
}
>
<a className="flex" href={logoutUrl}>
<LuLogOut className="mr-2 size-4" />
<span>Logout</span>
</a>
</MenuItem>
</div>
</Content>
</Container>
); );
} }

30
web/src/components/menu/GeneralSettings.tsx
View File

@ -116,22 +116,20 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
<div className={className}> <div className={className}>
<Container> <Container>
<Trigger asChild> <Trigger asChild>
<a href="#"> <Tooltip>
<Tooltip> <TooltipTrigger asChild>
<TooltipTrigger asChild> <div
<div className={`flex flex-col items-center justify-center ${isDesktop ? "cursor-pointer rounded-lg bg-secondary text-secondary-foreground hover:bg-muted" : "text-secondary-foreground"}`}
className={`flex flex-col items-center justify-center ${isDesktop ? "cursor-pointer rounded-lg bg-secondary text-secondary-foreground hover:bg-muted" : "text-secondary-foreground"}`} >
> <LuSettings className="size-5 md:m-[6px]" />
<LuSettings className="size-5 md:m-[6px]" /> </div>
</div> </TooltipTrigger>
</TooltipTrigger> <TooltipPortal>
<TooltipPortal> <TooltipContent side="right">
<TooltipContent side="right"> <p>Settings</p>
<p>Settings</p> </TooltipContent>
</TooltipContent> </TooltipPortal>
</TooltipPortal> </Tooltip>
</Tooltip>
</a>
</Trigger> </Trigger>
<Content <Content
className={ className={

4
web/src/components/navigation/Bottombar.tsx
View File

@ -15,7 +15,7 @@ import {
} from "@/context/statusbar-provider"; } from "@/context/statusbar-provider";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { isMobile } from "react-device-detect"; import { isIOS, isMobile } from "react-device-detect";
import { isPWA } from "@/utils/isPWA"; import { isPWA } from "@/utils/isPWA";
function Bottombar() { function Bottombar() {
@ -25,7 +25,7 @@ function Bottombar() {
<div <div
className={cn( className={cn(
"absolute inset-x-4 bottom-0 flex h-16 flex-row justify-between", "absolute inset-x-4 bottom-0 flex h-16 flex-row justify-between",
isPWA isPWA && isIOS
? "portrait:items-start portrait:pt-1 landscape:items-center" ? "portrait:items-start portrait:pt-1 landscape:items-center"
: "items-center", : "items-center",
isMobile && !isPWA && "h-12 landscape:md:h-16", isMobile && !isPWA && "h-12 landscape:md:h-16",

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

@ -82,10 +82,10 @@ export default function PreviewPlayer({
} }
return ( return (
<div className="size-full flex items-center justify-center rounded-lg text-white md:rounded-2xl"> <div className="flex size-full items-center justify-center rounded-lg text-white md:rounded-2xl">
No Preview Found No Preview Found
</div> </div>
) );
} }
export abstract class PreviewController { export abstract class PreviewController {

2
web/src/hooks/use-stats.ts
View File

@ -51,7 +51,7 @@ export default function useStats(stats: FrigateStats | undefined) {
return; return;
} }
if (config.cameras[name].enabled && (cam["camera_fps"] == 0)) { if (config.cameras[name].enabled && cam["camera_fps"] == 0) {
problems.push({ problems.push({
text: `${capitalizeFirstLetter(name.replaceAll("_", " "))} is offline`, text: `${capitalizeFirstLetter(name.replaceAll("_", " "))} is offline`,
color: "text-danger", color: "text-danger",

28
web/src/views/live/LiveCameraView.tsx
View File

@ -101,7 +101,9 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
return ( return (
cameraMetadata.producers.find( cameraMetadata.producers.find(
(prod) => (prod) =>
prod.medias && prod.medias.find((media) => media.includes("audio, sendonly")) != undefined, prod.medias &&
prod.medias.find((media) => media.includes("audio, sendonly")) !=
undefined,
) != undefined ) != undefined
); );
}, [cameraMetadata]); }, [cameraMetadata]);
@ -113,10 +115,12 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
return ( return (
cameraMetadata.producers.find( cameraMetadata.producers.find(
(prod) => (prod) =>
prod.medias && prod.medias.find((media) => media.includes("audio, recvonly")) != undefined, prod.medias &&
prod.medias.find((media) => media.includes("audio, recvonly")) !=
undefined,
) != undefined ) != undefined
); );
}, [cameraMetadata]) }, [cameraMetadata]);
// click overlay for ptzs // click overlay for ptzs
@ -351,14 +355,16 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
onClick={() => setMic(!mic)} onClick={() => setMic(!mic)}
/> />
)} )}
{supportsAudioOutput && <CameraFeatureToggle {supportsAudioOutput && (
className="p-2 md:p-0" <CameraFeatureToggle
variant={fullscreen ? "overlay" : "primary"} className="p-2 md:p-0"
Icon={audio ? GiSpeaker : GiSpeakerOff} variant={fullscreen ? "overlay" : "primary"}
isActive={audio} Icon={audio ? GiSpeaker : GiSpeakerOff}
title={`${audio ? "Disable" : "Enable"} Camera Audio`} isActive={audio}
onClick={() => setAudio(!audio)} title={`${audio ? "Disable" : "Enable"} Camera Audio`}
/>} onClick={() => setAudio(!audio)}
/>
)}
<FrigateCameraFeatures <FrigateCameraFeatures
camera={camera.name} camera={camera.name}
audioDetectEnabled={camera.audio.enabled_in_config} audioDetectEnabled={camera.audio.enabled_in_config}