Reviewed buttons (#10271)

* mark items as reviewed when they are opened

* Update api to use json and add button to mark all as reviewed

* fix api so last24 hours has its own review summary

* fix sidebar spacing

* formatting

* Bug fixes

* Make motion activity respect filters

web/src/components/filter/ReviewActionGroup.tsx

@@ -22,7 +22,7 @@ export default function ReviewActionGroup({
 
   const onMarkAsReviewed = useCallback(async () => {
     const idList = selectedReviews.join(",");
-    await axios.post(`reviews/${idList}/viewed`);
+    await axios.post(`reviews/viewed`, { ids: idList });
     setSelectedReviews([]);
     pullLatestData();
   }, [selectedReviews, setSelectedReviews, pullLatestData]);

web/src/components/navigation/Sidebar.tsx

@@ -13,20 +13,23 @@ function Sidebar() {
       <span tabIndex={0} className="sr-only" />
       <div className="w-full flex flex-col gap-0 items-center">
         <Logo className="w-8 h-8 mb-6" />
-        {navbarLinks.map((item) => (
-          <div key={item.id}>
-            <NavItem
-              className={`mx-[10px] ${item.id == 1 ? "mb-2" : "mb-4"}`}
-              Icon={item.icon}
-              title={item.title}
-              url={item.url}
-              dev={item.dev}
-            />
-            {item.id == 1 && item.url == location.pathname && (
-              <CameraGroupSelector className="mb-4" />
-            )}
-          </div>
-        ))}
+        {navbarLinks.map((item) => {
+          const showCameraGroups =
+            item.id == 1 && item.url == location.pathname;
+
+          return (
+            <div key={item.id}>
+              <NavItem
+                className={`mx-[10px] ${showCameraGroups ? "mb-2" : "mb-4"}`}
+                Icon={item.icon}
+                title={item.title}
+                url={item.url}
+                dev={item.dev}
+              />
+              {showCameraGroups && <CameraGroupSelector className="mb-4" />}
+            </div>
+          );
+        })}
       </div>
       <SettingsNavItems className="hidden md:flex flex-col items-center mb-8" />
     </aside>

web/src/components/player/DynamicVideoPlayer.tsx

@@ -29,7 +29,7 @@ type DynamicVideoPlayerProps = {
   timeRange: { start: number; end: number };
   cameraPreviews: Preview[];
   previewOnly?: boolean;
-  onControllerReady?: (controller: DynamicVideoController) => void;
+  onControllerReady: (controller: DynamicVideoController) => void;
   onClick?: () => void;
 };
 export default function DynamicVideoPlayer({
@@ -86,14 +86,17 @@ export default function DynamicVideoPlayer({
   }, [camera, config, previewOnly]);
 
   useEffect(() => {
-    if (!controller) {
+    if (!playerRef.current && !previewRef.current) {
       return;
     }
 
-    if (onControllerReady) {
+    if (controller) {
       onControllerReady(controller);
     }
-  }, [controller, onControllerReady]);
+
+    // we only want to fire once when players are ready
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [playerRef, previewRef]);
 
   const [hasRecordingAtTime, setHasRecordingAtTime] = useState(true);
 
@@ -277,10 +280,6 @@ export default function DynamicVideoPlayer({
               player.on("ended", () =>
                 controller.fireClipChangeEvent("forward"),
               );
-
-              if (onControllerReady) {
-                onControllerReady(controller);
-              }
             }}
             onDispose={() => {
               playerRef.current = undefined;

web/src/components/ui/button.tsx

@@ -10,6 +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",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline: