UI Tweaks (#10289)

* Use different cursor for dragging preview * Improve filters UI and add audio labels * Use switch and adjust colors * Disable chromecast button and remove dimming * Change marked reviewed text
2024-11-21 19:07:46 +01:00 · 2024-03-06 13:49:51 -07:00 · 2024-03-06 13:49:51 -07:00 · fb81e44283
commit fb81e44283
parent 55077a0bc9
7 changed files with 293 additions and 196 deletions
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@ -1,4 +1,4 @@
-import { LuCheck, LuVideo } from "react-icons/lu";
+import { LuCheck } from "react-icons/lu";
 import { Button } from "../ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import useSWR from "swr";
@ -16,8 +16,11 @@ import { ReviewFilter } from "@/types/review";
 import { getEndOfDayTimestamp } from "@/utils/dateUtil";
 import { useFormattedTimestamp } from "@/hooks/use-date-utils";
 import { FaCalendarAlt, FaFilter, FaVideo } from "react-icons/fa";
-import { getIconTypeForGroup } from "@/utils/iconUtil";
 import { IconType } from "react-icons";
+import { isMobile } from "react-device-detect";
+import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
+import { Switch } from "../ui/switch";
+import { Label } from "../ui/label";

 const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"];

@ -41,14 +44,21 @@ export default function ReviewFilterGroup({
    const cameras = filter?.cameras || Object.keys(config.cameras);

    cameras.forEach((camera) => {
-      config.cameras[camera].objects.track.forEach((label) => {
+      const cameraConfig = config.cameras[camera];
+      cameraConfig.objects.track.forEach((label) => {
        if (!ATTRIBUTES.includes(label)) {
          labels.add(label);
        }
      });
+
+      if (cameraConfig.audio.enabled_in_config) {
+        cameraConfig.audio.listen.forEach((label) => {
+          labels.add(label);
+        });
+      }
    });

-    return [...labels];
+    return [...labels].sort();
  }, [config, filter]);

  const filterValues = useMemo(
@ -125,19 +135,12 @@ function CamerasFilterButton({
  selectedCameras,
  updateCameraFilter,
 }: CameraFilterButtonProps) {
+  const [open, setOpen] = useState(false);
  const [currentCameras, setCurrentCameras] = useState<string[] | undefined>(
    selectedCameras,
  );

-  return (
-    <DropdownMenu
-      onOpenChange={(open) => {
-        if (!open) {
-          updateCameraFilter(currentCameras);
-        }
-      }}
-    >
-      <DropdownMenuTrigger asChild>
+  const trigger = (
    <Button size="sm" className="mx-1 capitalize" variant="secondary">
      <FaVideo className="md:mr-[10px] text-muted-foreground" />
      <div className="hidden md:block">
@ -146,9 +149,12 @@ function CamerasFilterButton({
          : `${selectedCameras.length} Cameras`}
      </div>
    </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuLabel>Filter Cameras</DropdownMenuLabel>
+  );
+  const content = (
+    <>
+      <DropdownMenuLabel className="flex justify-center">
+        Filter Cameras
+      </DropdownMenuLabel>
      <DropdownMenuSeparator />
      <FilterCheckBox
        isChecked={currentCameras == undefined}
@ -167,8 +173,7 @@ function CamerasFilterButton({
              <FilterCheckBox
                key={name}
                label={name}
-                  CheckIcon={getIconTypeForGroup(conf.icon)}
-                  isChecked
+                isChecked={false}
                onCheckedChange={() => {
                  setCurrentCameras([...conf.cameras]);
                }}
@ -185,16 +190,12 @@ function CamerasFilterButton({
          label={item.replaceAll("_", " ")}
          onCheckedChange={(isChecked) => {
            if (isChecked) {
-                const updatedCameras = currentCameras
-                  ? [...currentCameras]
-                  : [];
+              const updatedCameras = currentCameras ? [...currentCameras] : [];

              updatedCameras.push(item);
              setCurrentCameras(updatedCameras);
            } else {
-                const updatedCameras = currentCameras
-                  ? [...currentCameras]
-                  : [];
+              const updatedCameras = currentCameras ? [...currentCameras] : [];

              // can not deselect the last item
              if (updatedCameras.length > 1) {
@ -206,7 +207,51 @@ function CamerasFilterButton({
        />
      ))}
      <DropdownMenuSeparator />
-      </DropdownMenuContent>
+      <div className="flex justify-center items-center">
+        <Button
+          variant="select"
+          onClick={() => {
+            updateCameraFilter(currentCameras);
+            setOpen(false);
+          }}
+        >
+          Apply
+        </Button>
+      </div>
+    </>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer
+        open={open}
+        onOpenChange={(open) => {
+          if (!open) {
+            setCurrentCameras(selectedCameras);
+          }
+
+          setOpen(open);
+        }}
+      >
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent>{content}</DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <DropdownMenu
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          setCurrentCameras(selectedCameras);
+        }
+
+        setOpen(open);
+      }}
+    >
+      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+      <DropdownMenuContent>{content}</DropdownMenuContent>
    </DropdownMenu>
  );
 }
@ -219,6 +264,7 @@ function CalendarFilterButton({
  day,
  updateSelectedDay,
 }: CalendarFilterButtonProps) {
+  const [open, setOpen] = useState(false);
  const [selectedDay, setSelectedDay] = useState(day);
  const disabledDates = useMemo(() => {
    const tomorrow = new Date();
@ -232,32 +278,71 @@ function CalendarFilterButton({
    "%b %-d",
  );

-  return (
-    <Popover
-      onOpenChange={(open) => {
-        if (!open) {
-          updateSelectedDay(selectedDay);
-        }
-      }}
-    >
-      <PopoverTrigger asChild>
+  const trigger = (
    <Button size="sm" className="mx-1" variant="secondary">
      <FaCalendarAlt className="md:mr-[10px] text-muted-foreground" />
      <div className="hidden md:block">
        {day == undefined ? "Last 24 Hours" : selectedDate}
      </div>
    </Button>
-      </PopoverTrigger>
-      <PopoverContent>
+  );
+  const content = (
+    <>
      <Calendar
        mode="single"
        disabled={disabledDates}
        selected={selectedDay}
+        showOutsideDays={false}
        onSelect={(day) => {
          setSelectedDay(day);
        }}
      />
-      </PopoverContent>
+      <DropdownMenuSeparator />
+      <div className="flex justify-center items-center">
+        <Button
+          variant="select"
+          onClick={() => {
+            updateSelectedDay(selectedDay);
+            setOpen(false);
+          }}
+        >
+          Apply
+        </Button>
+      </div>
+    </>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer
+        open={open}
+        onOpenChange={(open) => {
+          if (!open) {
+            setSelectedDay(day);
+          }
+
+          setOpen(open);
+        }}
+      >
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent>{content}</DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          setSelectedDay(day);
+        }
+
+        setOpen(open);
+      }}
+    >
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      <PopoverContent>{content}</PopoverContent>
    </Popover>
  );
 }
@ -276,71 +361,32 @@ function GeneralFilterButton({
  showReviewed,
  setShowReviewed,
 }: GeneralFilterButtonProps) {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button size="sm" className="ml-1" variant="secondary">
-          <FaFilter className="md:mr-[10px] text-muted-foreground" />
-          <div className="hidden md:block">Filter</div>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent side="left" asChild>
-        <div className="w-80 flex">
-          <LabelsFilterButton
-            allLabels={allLabels}
-            selectedLabels={selectedLabels}
-            updateLabelFilter={updateLabelFilter}
-          />
-          <Button
-            className="capitalize flex justify-between items-center cursor-pointer w-full"
-            variant="secondary"
-            onClick={() => setShowReviewed(showReviewed == 0 ? 1 : 0)}
-          >
-            {showReviewed ? (
-              <LuCheck className="w-6 h-6" />
-            ) : (
-              <div className="w-6 h-6" />
-            )}
-            <div className="ml-1 w-full flex justify-start">Show Reviewed</div>
-          </Button>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-type LabelFilterButtonProps = {
-  allLabels: string[];
-  selectedLabels: string[] | undefined;
-  updateLabelFilter: (labels: string[] | undefined) => void;
-};
-function LabelsFilterButton({
-  allLabels,
-  selectedLabels,
-  updateLabelFilter,
-}: LabelFilterButtonProps) {
+  const [open, setOpen] = useState(false);
+  const [reviewed, setReviewed] = useState(showReviewed ?? 0);
  const [currentLabels, setCurrentLabels] = useState<string[] | undefined>(
    selectedLabels,
  );

-  return (
-    <DropdownMenu
-      onOpenChange={(open) => {
-        if (!open) {
-          updateLabelFilter(currentLabels);
-        }
-      }}
-    >
-      <DropdownMenuTrigger asChild>
-        <Button className="mx-1 capitalize" variant="secondary">
-          <LuVideo className=" mr-[10px]" />
-          {selectedLabels == undefined
-            ? "All Labels"
-            : `${selectedLabels.length} Labels`}
+  const trigger = (
+    <Button size="sm" className="ml-1" variant="secondary">
+      <FaFilter className="md:mr-[10px] text-muted-foreground" />
+      <div className="hidden md:block">Filter</div>
    </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuLabel>Filter Labels</DropdownMenuLabel>
+  );
+  const content = (
+    <>
+      <div className="flex p-2 justify-start items-center">
+        <Switch
+          id="reviewed"
+          checked={reviewed == 1}
+          onCheckedChange={() => setReviewed(reviewed == 0 ? 1 : 0)}
+        />
+        <Label className="ml-2" htmlFor="reviewed">Show Reviewed</Label>
+      </div>
+      <DropdownMenuSeparator />
+      <DropdownMenuLabel className="flex justify-center items-center">
+        Filter Labels
+      </DropdownMenuLabel>
      <DropdownMenuSeparator />
      <FilterCheckBox
        isChecked={currentLabels == undefined}
@ -376,8 +422,61 @@ function LabelsFilterButton({
        />
      ))}
      <DropdownMenuSeparator />
-      </DropdownMenuContent>
-    </DropdownMenu>
+      <div className="flex justify-center items-center">
+        <Button
+          variant="select"
+          onClick={() => {
+            if (reviewed != showReviewed) {
+              setShowReviewed(reviewed);
+            }
+
+            if (selectedLabels != currentLabels) {
+              updateLabelFilter(currentLabels);
+            }
+
+            setOpen(false);
+          }}
+        >
+          Apply
+        </Button>
+      </div>
+    </>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer
+        open={open}
+        onOpenChange={(open) => {
+          if (!open) {
+            setReviewed(showReviewed ?? 0);
+            setCurrentLabels(selectedLabels);
+          }
+
+          setOpen(open);
+        }}
+      >
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent>{content}</DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          setReviewed(showReviewed ?? 0);
+          setCurrentLabels(selectedLabels);
+        }
+
+        setOpen(open);
+      }}
+    >
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      <PopoverContent side="left">{content}</PopoverContent>
+    </Popover>
  );
 }

--- a/web/src/components/player/DynamicVideoPlayer.tsx
+++ b/web/src/components/player/DynamicVideoPlayer.tsx
@ -301,6 +301,7 @@ export default function DynamicVideoPlayer({
        autoPlay
        playsInline
        muted
+        disableRemotePlayback
        onSeeked={onPreviewSeeked}
        onLoadedData={() => controller.previewReady()}
      >
@ -308,9 +309,6 @@ export default function DynamicVideoPlayer({
          <source src={currentPreview.src} type={currentPreview.type} />
        )}
      </video>
-      {onClick && !hasRecordingAtTime && (
-        <div className="absolute inset-0 z-10 bg-black bg-opacity-60 rounded-2xl" />
-      )}
    </div>
  );
 }
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@ -10,7 +10,7 @@ const buttonVariants = cva(
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        select: "bg-select text-white hover:bg-select/90",
+        select: "bg-selected text-white hover:bg-opacity-90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
--- a/web/src/components/ui/calendar.tsx
+++ b/web/src/components/ui/calendar.tsx
@ -25,24 +25,24 @@ function Calendar({
        nav: "space-x-1 flex items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
+        head_row: "flex justify-center",
        head_cell:
          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
+        row: "flex w-full mt-2 justify-center",
        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
        day: cn(
          buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
        ),
        day_range_end: "day-range-end",
        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
+          "bg-selected text-white hover:bg-selected hover:text-white focus:bg-selected focus:text-white",
+        day_today: "bg-muted text-muted-foreground",
        day_outside:
          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
        day_disabled: "text-muted-foreground opacity-50",
--- a/web/src/components/ui/slider-no-thumb.tsx
+++ b/web/src/components/ui/slider-no-thumb.tsx
@ -18,7 +18,7 @@ const Slider = React.forwardRef<
    <SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full">
      <SliderPrimitive.Range className="absolute h-full bg-blue-500" />
    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-2 w-12 rounded-full border-2 border-transparent bg-transparent ring-offset-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="block h-2 w-12 rounded-full border-2 border-transparent bg-transparent ring-offset-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-col-resize" />
  </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
--- a/web/src/components/ui/switch.tsx
+++ b/web/src/components/ui/switch.tsx
@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-selected data-[state=unchecked]:bg-input",
      className
    )}
    {...props}
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@ -517,7 +517,7 @@ function DetectionReview({
                  variant="select"
                  onClick={markAllReviewed}
                >
-                  Mark all items as reviewed
+                  Mark these items as reviewed
                </Button>
              ) : (
                <ActivityIndicator />