Handle middle mouse button clicks

web/src/components/card/AnimatedEventCard.tsx

@@ -131,6 +131,11 @@ export function AnimatedEventCard({
             <div
               className="size-full cursor-pointer overflow-hidden rounded md:rounded-lg"
               onClick={onOpenReview}
+              onAuxClick={() =>
+                window
+                  .open(`${baseUrl}review?id=${event.id}`, "_blank")
+                  ?.focus()
+              }
             >
               {!alertVideos ? (
                 <img

web/src/components/player/LivePlayer.tsx

@@ -19,6 +19,7 @@ import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { cn } from "@/lib/utils";
 import { TbExclamationCircle } from "react-icons/tb";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
+import { baseUrl } from "@/api/baseUrl";
 
 type LivePlayerProps = {
   cameraRef?: (ref: HTMLDivElement | null) => void;
@@ -224,6 +225,9 @@ export default function LivePlayer({
         className,
       )}
       onClick={onClick}
+      onAuxClick={() =>
+        window.open(`${baseUrl}#${cameraConfig.name}`, "_blank")?.focus()
+      }
     >
       {((showStillWithoutActivity && !liveReady) || liveReady) && (
         <>

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -20,6 +20,7 @@ import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { cn } from "@/lib/utils";
 import { InProgressPreview, VideoPreview } from "../preview/ScrubbablePreview";
 import { Preview } from "@/types/preview";
+import { baseUrl } from "@/api/baseUrl";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
@@ -175,6 +176,9 @@ export default function PreviewThumbnailPlayer({
       onMouseOver={isMobile ? undefined : () => setIsHovered(true)}
       onMouseLeave={isMobile ? undefined : () => setIsHovered(false)}
       onClick={handleOnClick}
+      onAuxClick={() =>
+        window.open(`${baseUrl}review?id=${review.id}`, "_blank")?.focus()
+      }
       {...swipeHandlers}
     >
       {playingBack && (
@@ -329,9 +333,7 @@ function PreviewContent({
   } else if (isCurrentHour(review.start_time)) {
     return (
       <InProgressPreview
-        camera={review.camera}
-        startTime={review.start_time}
-        endTime={review.end_time}
+        review={review}
         timeRange={timeRange}
         setReviewed={setReviewed}
         setIgnoreClick={setIgnoreClick}