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

UI tweaks and bugfixes (#11692)

Browse Source 
* UI tweaks and bugfixes

* fix linter complaints in unmodified files
This commit is contained in:
Josh Hawkins 2024-06-02 12:00:59 -05:00 committed by GitHub
parent 7031c47fb2
commit 1e80342c41
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 51 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/dynamic/NewReviewData.tsx
View File

@ -2,6 +2,7 @@ import { ReviewSegment } from "@/types/review";
import { Button } from "../ui/button";
import { LuRefreshCcw } from "react-icons/lu";
import { MutableRefObject, useMemo } from "react";
import { cn } from "@/lib/utils";
type NewReviewDataProps = {
className: string;
@ -29,11 +30,12 @@ export default function NewReviewData({
<div className={className}>
<div className="pointer-events-auto mr-[65px] flex items-center justify-center md:mr-[115px]">
<Button
className={`${
className={cn(
hasUpdate
? "duration-500 animate-in slide-in-from-top"
: "invisible"
} mx-auto mt-5 bg-gray-400 text-center text-white`}
: "invisible",
"mx-auto mt-5 bg-gray-400 text-center text-white",
)}
onClick={() => {
pullLatestData();
if (contentRef.current) {

9
web/src/components/overlay/SaveExportOverlay.tsx
View File

@ -1,6 +1,7 @@
import { LuX } from "react-icons/lu";
import { Button } from "../ui/button";
import { FaCompactDisc } from "react-icons/fa";
import { cn } from "@/lib/utils";
type SaveExportOverlayProps = {
className: string;
@ -17,9 +18,11 @@ export default function SaveExportOverlay({
return (
<div className={className}>
<div
className={`pointer-events-auto flex items-center justify-center gap-2 rounded-lg px-2 ${
show ? "duration-500 animate-in slide-in-from-top" : "invisible"
} mx-auto mt-5 text-center`}
className={cn(
"pointer-events-auto flex items-center justify-center gap-2 rounded-lg px-2",
show ? "duration-500 animate-in slide-in-from-top" : "invisible",
"mx-auto mt-5 text-center",
)}
>
<Button
className="flex items-center gap-1"

10
web/src/components/timeline/segment-metadata.tsx
View File

@ -1,3 +1,6 @@
import { FrigateConfig } from "@/types/frigateConfig";
import useSWR from "swr";
type MinimapSegmentProps = {
isFirstSegmentInMinimap: boolean;
isLastSegmentInMinimap: boolean;
@ -28,6 +31,8 @@ export function MinimapBounds({
firstMinimapSegmentRef,
dense,
}: MinimapSegmentProps) {
const { data: config } = useSWR<FrigateConfig>("config");
return (
<>
{isFirstSegmentInMinimap && (
@ -36,6 +41,7 @@ export function MinimapBounds({
ref={firstMinimapSegmentRef}
>
{new Date(alignedMinimapStartTime * 1000).toLocaleTimeString([], {
hour12: config?.ui.time_format != "24hour",
hour: "2-digit",
minute: "2-digit",
...(!dense && { month: "short", day: "2-digit" }),
@ -46,6 +52,7 @@ export function MinimapBounds({
{isLastSegmentInMinimap && (
<div className="pointer-events-none absolute inset-0 -top-3 z-20 flex w-full select-none items-center justify-center text-center text-[10px] font-medium text-primary">
{new Date(alignedMinimapEndTime * 1000).toLocaleTimeString([], {
hour12: config?.ui.time_format != "24hour",
hour: "2-digit",
minute: "2-digit",
...(!dense && { month: "short", day: "2-digit" }),
@ -83,6 +90,8 @@ export function Timestamp({
timestampSpread,
segmentKey,
}: TimestampSegmentProps) {
const { data: config } = useSWR<FrigateConfig>("config");
return (
<div className="absolute left-[15px] z-10 h-[8px]">
{!isFirstSegmentInMinimap && !isLastSegmentInMinimap && (
@ -93,6 +102,7 @@ export function Timestamp({
{timestamp.getMinutes() % timestampSpread === 0 &&
timestamp.getSeconds() === 0 &&
timestamp.toLocaleTimeString([], {
hour12: config?.ui.time_format != "24hour",
hour: "2-digit",
minute: "2-digit",
})}

6
web/src/hooks/use-draggable-element.ts
View File

@ -1,6 +1,8 @@
import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
import scrollIntoView from "scroll-into-view-if-needed";
import { useTimelineUtils } from "./use-timeline-utils";
import { FrigateConfig } from "@/types/frigateConfig";
import useSWR from "swr";
type DraggableElementProps = {
contentRef: React.RefObject<HTMLElement>;
@ -49,6 +51,8 @@ function useDraggableElement({
dense,
timelineSegments,
}: DraggableElementProps) {
const { data: config } = useSWR<FrigateConfig>("config");
const [clientYPosition, setClientYPosition] = useState<number | null>(null);
const [initialClickAdjustment, setInitialClickAdjustment] = useState(0);
const [elementScrollIntoView, setElementScrollIntoView] = useState(true);
@ -170,6 +174,7 @@ function useDraggableElement({
draggableElementTimeRef.current.textContent = new Date(
segmentStartTime * 1000,
).toLocaleTimeString([], {
hour12: config?.ui.time_format != "24hour",
hour: "2-digit",
minute: "2-digit",
...(segmentDuration < 60 && !dense && { second: "2-digit" }),
@ -196,6 +201,7 @@ function useDraggableElement({
setDraggableElementTime,
setDraggableElementPosition,
dense,
config,
],
);

15
web/src/views/events/EventView.tsx
View File

@ -29,7 +29,7 @@ import {
useRef,
useState,
} from "react";
import { isDesktop, isMobile } from "react-device-detect";
import { isDesktop, isMobile, isTablet } from "react-device-detect";
import { LuFolderCheck } from "react-icons/lu";
import { MdCircle } from "react-icons/md";
import useSWR from "swr";
@ -48,6 +48,7 @@ import { Skeleton } from "@/components/ui/skeleton";
import scrollIntoView from "scroll-into-view-if-needed";
import { Toaster } from "@/components/ui/sonner";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
type EventViewProps = {
reviewItems?: SegmentedReviewData;
@ -866,7 +867,12 @@ function MotionReview({
<div className="no-scrollbar flex flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4">
<div
ref={contentRef}
className="no-scrollbar grid w-full gap-2 overflow-auto px-1 sm:grid-cols-2 md:mx-2 md:gap-4 xl:grid-cols-3 3xl:grid-cols-4"
className={cn(
"no-scrollbar grid w-full grid-cols-1",
(reviewCameras.length > 3 || isTablet || isDesktop) &&
"grid-cols-2",
"gap-2 overflow-auto px-1 md:mx-2 md:gap-4 xl:grid-cols-3 3xl:grid-cols-4",
)}
>
{reviewCameras.map((camera) => {
let grow;
@ -874,13 +880,12 @@ function MotionReview({
const aspectRatio = camera.detect.width / camera.detect.height;
if (aspectRatio > 2) {
grow = "aspect-wide";
spans = "sm:col-span-2";
spans = reviewCameras.length > 3 && "col-span-2";
} else if (aspectRatio < 1) {
grow = "md:h-full aspect-tall";
spans = "md:row-span-2";
spans = "row-span-2";
} else {
grow = "aspect-video";
spans = "";
}
const detectionType = getDetectionType(camera.name);
return (

18
web/src/views/live/LiveDashboardView.tsx
View File

@ -243,9 +243,17 @@ export default function LiveDashboardView({
>
{includeBirdseye && birdseyeConfig?.enabled && (
<div
style={{
aspectRatio: birdseyeConfig.width / birdseyeConfig.height,
}}
className={(() => {
const aspectRatio =
birdseyeConfig.width / birdseyeConfig.height;
if (aspectRatio > 2) {
return `${mobileLayout == "grid" && "col-span-2"} aspect-wide`;
} else if (aspectRatio < 1) {
return `${mobileLayout == "grid" && "row-span-2 md:h-full"} aspect-tall`;
} else {
return "aspect-video";
}
})()}
ref={birdseyeContainerRef}
>
<BirdseyeLivePlayer
@ -260,9 +268,9 @@ export default function LiveDashboardView({
let grow;
const aspectRatio = camera.detect.width / camera.detect.height;
if (aspectRatio > 2) {
grow = `${mobileLayout == "grid" ? "col-span-2" : ""} aspect-wide`;
grow = `${mobileLayout == "grid" && "col-span-2"} aspect-wide`;
} else if (aspectRatio < 1) {
grow = `${mobileLayout == "grid" ? "row-span-2 aspect-tall md:h-full" : ""} aspect-tall`;
grow = `${mobileLayout == "grid" && "row-span-2 md:h-full"} aspect-tall`;
} else {
grow = "aspect-video";
}

2
web/src/views/system/GeneralMetrics.tsx
View File

@ -445,7 +445,7 @@ export default function GeneralMetrics({
</Button>
)}
</div>
<div className=" mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
<div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
{statsHistory.length != 0 ? (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">GPU Usage</div>