Review items right click menu (#10002)

* Add custom context menu for review items

* Only show mark as reviewed when it has not been reviewed

* Fix float comparison

web/package-lock.json

@@ -12,6 +12,7 @@
         "@hookform/resolvers": "^3.3.2",
         "@radix-ui/react-alert-dialog": "^1.0.5",
         "@radix-ui/react-aspect-ratio": "^1.0.3",
+        "@radix-ui/react-context-menu": "^2.1.5",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-label": "^2.0.2",
@@ -1185,6 +1186,34 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.1.5.tgz",
+      "integrity": "sha512-R5XaDj06Xul1KGb+WP8qiOh7tKJNz2durpLBXAGZjSVtctcRFCuEvy2gtMwRJGePwQQE5nV77gs4FwRi8T+r2g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-menu": "2.0.6",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dialog": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",

web/package.json

@@ -17,6 +17,7 @@
     "@hookform/resolvers": "^3.3.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
+    "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -11,6 +11,15 @@ import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { isMobile, isSafari } from "react-device-detect";
 import Chip from "../Chip";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "../ui/context-menu";
+import { LuCheckSquare, LuFileUp, LuTrash } from "react-icons/lu";
+import axios from "axios";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
@@ -86,7 +95,8 @@ export default function PreviewThumbnailPlayer({
   );
 
   return (
-    <div
+    <ContextMenu>
+      <ContextMenuTrigger
         className="relative w-full h-full cursor-pointer"
         onMouseEnter={isMobile ? undefined : () => onPlayback(true)}
         onMouseLeave={isMobile ? undefined : () => onPlayback(false)}
@@ -103,7 +113,10 @@ export default function PreviewThumbnailPlayer({
           <img
             className="h-full w-full"
             loading="lazy"
-          src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`}
+            src={`${apiHost}${review.thumb_path.replace(
+              "/media/frigate/",
+              ""
+            )}`}
           />
         )}
         {(review.severity == "alert" || review.severity == "detection") && (
@@ -145,7 +158,9 @@ export default function PreviewThumbnailPlayer({
         {!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>
   );
 }
 
@@ -291,9 +306,9 @@ function InProgressPreview({
 }: InProgressPreviewProps) {
   const apiHost = useApiHost();
   const { data: previewFrames } = useSWR<string[]>(
-    `preview/${review.camera}/start/${Math.floor(
+    `preview/${review.camera}/start/${Math.floor(review.start_time) - 4}/end/${
-      review.start_time
+      Math.ceil(review.end_time) + 4
-    ) - 4}/end/${Math.ceil(review.end_time) + 4}/frames`
+    }/frames`
   );
   const [key, setKey] = useState(0);
 
@@ -315,7 +330,7 @@ function InProgressPreview({
         setProgress((key / (previewFrames.length - 1)) * 100);
       }
 
-      if (setReviewed && key == previewFrames.length / 2) {
+      if (setReviewed && key == Math.floor(previewFrames.length / 2)) {
         setReviewed();
       }
 
@@ -343,3 +358,49 @@ function InProgressPreview({
     </div>
   );
 }
+
+type PreviewContextItemsProps = {
+  review: ReviewSegment;
+  setReviewed?: () => void;
+};
+function PreviewContextItems({
+  review,
+  setReviewed,
+}: PreviewContextItemsProps) {
+  const exportReview = useCallback(() => {
+    console.log(
+      "trying to export to " +
+        `export/${review.camera}/start/${review.start_time}/end/${review.end_time}`
+    );
+    axios.post(
+      `export/${review.camera}/start/${review.start_time}/end/${review.end_time}`,
+      { playback: "realtime" }
+    );
+  }, [review]);
+
+  return (
+    <ContextMenuContent>
+      {!review.has_been_reviewed && (
+        <ContextMenuItem onSelect={() => (setReviewed ? setReviewed() : null)}>
+          <div className="w-full flex justify-between items-center">
+            Mark As Reviewed
+            <LuCheckSquare className="ml-4 w-4 h-4" />
+          </div>
+        </ContextMenuItem>
+      )}
+      <ContextMenuItem onSelect={() => exportReview()}>
+        <div className="w-full flex justify-between items-center">
+          Export
+          <LuFileUp className="ml-4 w-4 h-4" />
+        </div>
+      </ContextMenuItem>
+      <ContextMenuSeparator />
+      <ContextMenuItem>
+        <div className="w-full flex justify-between items-center text-danger">
+          Delete
+          <LuTrash className="ml-4 w-4 h-4" />
+        </div>
+      </ContextMenuItem>
+    </ContextMenuContent>
+  );
+}

web/src/components/ui/context-menu.tsx

@@ -0,0 +1,198 @@
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

web/src/pages/Export.tsx

@@ -151,8 +151,7 @@ function Export() {
   }, [deleteClip]);
 
   return (
-    <>
+    <div className="w-full h-full overflow-hidden">
-      <Heading as="h2">Export</Heading>
       <Toaster />
 
       <AlertDialog
@@ -199,7 +198,7 @@ function Export() {
         </DialogContent>
       </Dialog>
 
-      <div className="xl:flex justify-between">
+      <div className="w-full h-full xl:flex justify-between overflow-hidden">
         <div>
           <div className="my-2 flex">
             <DropdownMenu>
@@ -292,7 +291,7 @@ function Export() {
         </div>
 
         {exports && (
-          <Card className="p-4 xl:w-1/2">
+          <Card className="h-full p-4 xl:w-1/2 overflow-y-auto">
             <Heading as="h3">Exports</Heading>
             {Object.values(exports).map((item) => (
               <ExportCard
@@ -305,7 +304,7 @@ function Export() {
           </Card>
         )}
       </div>
-    </>
+    </div>
   );
 }