Miscellaneous Fixes (0.17 beta) (#21912)

* fix display of custom sublabels in review item chip

use "manual" as type so it's not run through translation and normalized, producing "Josh S Car" instead of "Josh's Car"

* use css instead of js for reviewed button hover state in filmstrip

web/src/components/card/AnimatedEventCard.tsx

@@ -12,7 +12,7 @@ import { useCameraPreviews } from "@/hooks/use-camera-previews";
 import { baseUrl } from "@/api/baseUrl";
 import { VideoPreview } from "../preview/ScrubbablePreview";
 import { useApiHost } from "@/api";
-import { isDesktop, isSafari } from "react-device-detect";
+import { isSafari } from "react-device-detect";
 import { useUserPersistence } from "@/hooks/use-user-persistence";
 import { Skeleton } from "../ui/skeleton";
 import { Button } from "../ui/button";
@@ -87,7 +87,6 @@ export function AnimatedEventCard({
   }, [visibilityListener]);
 
   const [isLoaded, setIsLoaded] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
 
   // interaction
 
@@ -134,31 +133,27 @@ export function AnimatedEventCard({
     <Tooltip>
       <TooltipTrigger asChild>
         <div
-          className="relative h-24 flex-shrink-0 overflow-hidden rounded md:rounded-lg 4k:h-32"
+          className="group relative h-24 flex-shrink-0 overflow-hidden rounded md:rounded-lg 4k:h-32"
           style={{
             aspectRatio: alertVideos ? aspectRatio : undefined,
           }}
-          onMouseEnter={isDesktop ? () => setIsHovered(true) : undefined}
-          onMouseLeave={isDesktop ? () => setIsHovered(false) : undefined}
         >
-          {isHovered && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  className="absolute left-2 top-1 z-40 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
-                  size="xs"
-                  aria-label={t("markAsReviewed")}
-                  onClick={async () => {
-                    await axios.post(`reviews/viewed`, { ids: [event.id] });
-                    updateEvents();
-                  }}
-                >
-                  <FaCircleCheck className="size-3 text-white" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>{t("markAsReviewed")}</TooltipContent>
-            </Tooltip>
-          )}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                className="pointer-events-none absolute left-2 top-1 z-40 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100"
+                size="xs"
+                aria-label={t("markAsReviewed")}
+                onClick={async () => {
+                  await axios.post(`reviews/viewed`, { ids: [event.id] });
+                  updateEvents();
+                }}
+              >
+                <FaCircleCheck className="size-3 text-white" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("markAsReviewed")}</TooltipContent>
+          </Tooltip>
           {previews != undefined && alertVideosLoaded && (
             <div
               className="size-full cursor-pointer"

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -181,6 +181,13 @@ export default function PreviewThumbnailPlayer({
     config?.ui?.timezone,
   );
 
+  const getEventType = (text: string) => {
+    if (review.data.objects.includes(text)) return "object";
+    if (review.data.audio.includes(text)) return "audio";
+    if (review.data.sub_labels?.includes(text)) return "manual";
+    return "object";
+  };
+
   return (
     <div
       className="relative size-full cursor-pointer"
@@ -295,7 +302,7 @@ export default function PreviewThumbnailPlayer({
                       (item) =>
                         item !== undefined && !item.includes("-verified"),
                     )
-                    .map((text) => getTranslatedLabel(text))
+                    .map((text) => getTranslatedLabel(text, getEventType(text)))
                     .sort()
                     .join(", ")}
             </TooltipContent>