From 22ee6bb13726f337f7b0a825a725d3e9ffdd2d2b Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 11 Sep 2024 11:26:01 -0600
Subject: [PATCH] Handle middle mouse button clicks (#13678)

* Handle middle mouse button clicks

* Fix up
---
 web/src/components/card/AnimatedEventCard.tsx        | 5 +++++
 web/src/components/player/LivePlayer.tsx             | 4 ++++
 web/src/components/player/PreviewThumbnailPlayer.tsx | 4 ++++
 3 files changed, 13 insertions(+)

diff --git a/web/src/components/card/AnimatedEventCard.tsx b/web/src/components/card/AnimatedEventCard.tsx
index f18573542..1228ebd05 100644
--- a/web/src/components/card/AnimatedEventCard.tsx
+++ b/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
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 79de3b5a2..ec24d255f 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/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) && (
         <>
diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index 409618b86..d20ad1ec7 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/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 && (