From d73c8bb90c87ed10ee2162f22cfcebb5a71b7341 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sat, 24 Feb 2024 06:48:18 -0700
Subject: [PATCH] Fix overlay in safari and firefox (#10015)

---
 .../player/PreviewThumbnailPlayer.tsx         | 127 +++++++++---------
 1 file changed, 66 insertions(+), 61 deletions(-)

diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index ef6203080..d2edbff88 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -96,68 +96,73 @@ export default function PreviewThumbnailPlayer({
 
   return (
     <ContextMenu>
-      <ContextMenuTrigger
-        className="relative w-full h-full cursor-pointer"
-        onMouseEnter={isMobile ? undefined : () => onPlayback(true)}
-        onMouseLeave={isMobile ? undefined : () => onPlayback(false)}
-        onClick={onClick}
-      >
-        {playingBack && (
-          <div className="absolute left-0 top-0 right-0 bottom-0">
-            <PreviewContent
-              review={review}
-              relevantPreview={relevantPreview}
-              setProgress={setProgress}
-              setReviewed={setReviewed}
-            />
-          </div>
-        )}
-        <img
-          className={`w-full h-full transition-opacity ${
-            playingBack ? "opacity-0" : "opacity-100"
-          }`}
-          loading="lazy"
-          src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`}
-        />
-        {(review.severity == "alert" || review.severity == "detection") && (
-          <Chip className="absolute top-2 left-2 flex gap-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0">
-            {review.data.objects.map((object) => {
-              return getIconForLabel(object, "w-3 h-3 text-white");
-            })}
-            {review.data.audio.map((audio) => {
-              return getIconForLabel(audio, "w-3 h-3 text-white");
-            })}
-            {review.data.sub_labels?.map((sub) => {
-              return getIconForSubLabel(sub, "w-3 h-3 text-white");
-            })}
-          </Chip>
-        )}
-        {!playingBack && (
-          <div className="absolute left-[6px] right-[6px] bottom-1 flex justify-between text-white">
-            <TimeAgo time={review.start_time * 1000} dense />
-            {config &&
-              formatUnixTimestampToDateTime(review.start_time, {
-                strftime_fmt:
-                  config.ui.time_format == "24hour"
-                    ? "%b %-d, %H:%M"
-                    : "%b %-d, %I:%M %p",
-              })}
-          </div>
-        )}
-        <div className="absolute top-0 left-0 right-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none" />
-        <div className="absolute bottom-0 left-0 right-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none" />
-        {playingBack && (
-          <Slider
-            className="absolute left-0 right-0 bottom-0 z-10"
-            value={[progress]}
-            min={0}
-            step={1}
-            max={100}
+      <ContextMenuTrigger asChild>
+        <div
+          className="relative w-full h-full cursor-pointer"
+          onMouseEnter={isMobile ? undefined : () => onPlayback(true)}
+          onMouseLeave={isMobile ? undefined : () => onPlayback(false)}
+          onClick={onClick}
+        >
+          {playingBack && (
+            <div className="absolute left-0 top-0 right-0 bottom-0">
+              <PreviewContent
+                review={review}
+                relevantPreview={relevantPreview}
+                setProgress={setProgress}
+                setReviewed={setReviewed}
+              />
+            </div>
+          )}
+          <img
+            className={`w-full h-full transition-opacity ${
+              playingBack ? "opacity-0" : "opacity-100"
+            }`}
+            loading="lazy"
+            src={`${apiHost}${review.thumb_path.replace(
+              "/media/frigate/",
+              ""
+            )}`}
           />
-        )}
-        {!playingBack && review.has_been_reviewed && (
-          <div className="absolute left-0 top-0 bottom-0 right-0 bg-black bg-opacity-60" />
-        )}
+          {(review.severity == "alert" || review.severity == "detection") && (
+            <Chip className="absolute top-2 left-2 flex gap-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0">
+              {review.data.objects.map((object) => {
+                return getIconForLabel(object, "w-3 h-3 text-white");
+              })}
+              {review.data.audio.map((audio) => {
+                return getIconForLabel(audio, "w-3 h-3 text-white");
+              })}
+              {review.data.sub_labels?.map((sub) => {
+                return getIconForSubLabel(sub, "w-3 h-3 text-white");
+              })}
+            </Chip>
+          )}
+          {!playingBack && (
+            <div className="absolute left-[6px] right-[6px] bottom-1 flex justify-between text-white">
+              <TimeAgo time={review.start_time * 1000} dense />
+              {config &&
+                formatUnixTimestampToDateTime(review.start_time, {
+                  strftime_fmt:
+                    config.ui.time_format == "24hour"
+                      ? "%b %-d, %H:%M"
+                      : "%b %-d, %I:%M %p",
+                })}
+            </div>
+          )}
+          <div className="absolute top-0 left-0 right-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none" />
+          <div className="absolute bottom-0 left-0 right-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none" />
+          {playingBack && (
+            <Slider
+              className="absolute left-0 right-0 bottom-0 z-10"
+              value={[progress]}
+              min={0}
+              step={1}
+              max={100}
+            />
+          )}
+          {!playingBack && review.has_been_reviewed && (
+            <div className="absolute left-0 top-0 bottom-0 right-0 bg-black bg-opacity-60" />
+          )}
+        </div>
       </ContextMenuTrigger>
       <PreviewContextItems review={review} setReviewed={setReviewed} />
     </ContextMenu>