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

UI tweaks and bugfixes (#10882)

Browse Source 
* small tweaks and bugfixes

* spacing

* simplify
This commit is contained in:
Josh Hawkins
2024-04-08 08:35:35 -05:00
committed by GitHub
parent 73c093be43
commit f210c4b6f4
7 changed files with 59 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,7 +32,7 @@ export default function Statusbar() {
const { potentialProblems } = useStats(stats);
return (
<div className="absolute left-0 bottom-0 right-0 w-full h-8 flex justify-between items-center px-4 bg-primary z-10 text-secondary-foreground border-t border-secondary-highlight">
<div className="absolute left-0 bottom-0 right-0 w-full h-8 flex justify-between items-center px-4 bg-primary z-10 dark:text-secondary-foreground border-t border-secondary-highlight">
<div className="h-full flex items-center gap-2">
{cpuPercent && (
<div className="flex items-center text-sm gap-2">

30
web/src/components/filter/ReviewFilterGroup.tsx
View File

@@ -75,6 +75,9 @@ export default function ReviewFilterGroup({
const cameras = filter?.cameras || Object.keys(config.cameras);
cameras.forEach((camera) => {
if (camera == "birdseye") {
return;
}
const cameraConfig = config.cameras[camera];
cameraConfig.objects.track.forEach((label) => {
labels.add(label);
@@ -219,24 +222,30 @@ function CamerasFilterButton({
const trigger = (
<Button
className="flex items-center gap-2 capitalize"
className={`flex items-center gap-2 capitalize ${selectedCameras?.length ? "bg-selected hover:bg-selected" : ""}`}
variant="secondary"
size="sm"
>
<FaVideo className="text-secondary-foreground" />
<FaVideo
className={`${selectedCameras?.length ? "text-primary dark:text-primary-foreground" : "text-secondary-foreground"}`}
/>
<div className="hidden md:block text-primary-foreground">
{selectedCameras == undefined
? "All Cameras"
: `${selectedCameras.length} Cameras`}
: `${selectedCameras.includes("birdseye") ? selectedCameras.length - 1 : selectedCameras.length} Camera${selectedCameras.length !== 1 ? "s" : ""}`}
</div>
</Button>
);
const content = (
<>
<DropdownMenuLabel className="flex justify-center">
Filter Cameras
</DropdownMenuLabel>
<DropdownMenuSeparator />
{isMobile && (
<>
<DropdownMenuLabel className="flex justify-center">
Cameras
</DropdownMenuLabel>
<DropdownMenuSeparator />
</>
)}
<div className="h-auto overflow-y-auto overflow-x-hidden">
<FilterCheckBox
isChecked={currentCameras == undefined}
@@ -382,13 +391,13 @@ function ShowReviewFilter({
</div>
<Button
className="block md:hidden"
className={`block md:hidden ${showReviewedSwitch == 0 ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
size="sm"
variant="secondary"
onClick={() => setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)}
>
<FaCheckCircle
className={`${showReviewedSwitch == 1 ? "text-selected" : "text-muted-foreground"}`}
className={`${showReviewedSwitch == 0 ? "fill-primary-foreground" : "text-muted-foreground"}`}
/>
</Button>
</>
@@ -664,10 +673,11 @@ function ShowMotionOnlyButton({
<Button
size="sm"
variant="secondary"
className={`${motionOnlyButton ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
onClick={() => setMotionOnlyButton(!motionOnlyButton)}
>
<FaRunning
className={`${motionOnlyButton ? "text-selected" : "text-muted-foreground"}`}
className={`${motionOnlyButton ? "fill-primary-foreground" : "text-muted-foreground"}`}
/>
</Button>
</div>

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

@@ -235,7 +235,7 @@ function PreviewVideoPlayer({
return (
<div
className={`relative rounded-2xl bg-black overflow-hidden ${onClick ? "cursor-pointer" : ""} ${className ?? ""}`}
className={`relative rounded-2xl w-full flex justify-center bg-black overflow-hidden ${onClick ? "cursor-pointer" : ""} ${className ?? ""}`}
onClick={onClick}
>
<img
@@ -464,7 +464,7 @@ function PreviewFramesPlayer({
return (
<div
className={`relative ${className ?? ""} ${onClick ? "cursor-pointer" : ""}`}
className={`relative w-full flex justify-center ${className ?? ""} ${onClick ? "cursor-pointer" : ""}`}
onClick={onClick}
>
<img

6
web/src/components/player/VideoControls.tsx
View File

@@ -142,7 +142,7 @@ export default function VideoControls({
return (
<div
className={`px-4 py-2 flex justify-between items-center gap-8 text-white z-50 bg-secondary-foreground/60 dark:bg-secondary/60 rounded-lg ${className ?? ""}`}
className={`px-4 py-2 flex justify-between items-center gap-8 text-primary-foreground dark:text-white z-50 bg-secondary-foreground/60 dark:bg-secondary/60 rounded-lg ${className ?? ""}`}
>
{video && features.volume && (
<div className="flex justify-normal items-center gap-2">
@@ -170,9 +170,9 @@ export default function VideoControls({
)}
<div className="cursor-pointer" onClick={onTogglePlay}>
{isPlaying ? (
<LuPause className="size-5 fill-white" />
<LuPause className="size-5 fill-primary-foreground dark:fill-white" />
) : (
<LuPlay className="size-5 fill-white" />
<LuPlay className="size-5 fill-primary-foreground dark:fill-white" />
)}
</div>
{features.seek && (