Add ability to rename exports (#10791)

* Add ability to rename exports

* Address feedback

frigate/record/export.py

@@ -61,7 +61,7 @@ class RecordingExporter(threading.Thread):
         )
         file_name = (
             self.user_provided_name
-            or f"{self.camera}@{self.get_datetime_from_timestamp(self.start_time)}__{self.get_datetime_from_timestamp(self.end_time)}"
+            or f"{self.camera}_{self.get_datetime_from_timestamp(self.start_time)}__{self.get_datetime_from_timestamp(self.end_time)}"
         )
         file_path = f"{EXPORT_DIR}/in_progress.{file_name}.mp4"
         final_file_path = f"{EXPORT_DIR}/{file_name}.mp4"

web/src/components/card/ExportCard.tsx

@@ -1,21 +1,25 @@
 import { baseUrl } from "@/api/baseUrl";
 import ActivityIndicator from "../indicators/activity-indicator";
-import { LuTrash } from "react-icons/lu";
+import { LuPencil, LuTrash } from "react-icons/lu";
 import { Button } from "../ui/button";
 import { useMemo, useRef, useState } from "react";
 import { isDesktop } from "react-device-detect";
 import { FaPlay } from "react-icons/fa";
 import Chip from "../indicators/Chip";
 import { Skeleton } from "../ui/skeleton";
+import { Dialog, DialogContent, DialogFooter, DialogTitle } from "../ui/dialog";
+import { Input } from "../ui/input";
+import useKeyboardListener from "@/hooks/use-keyboard-listener";
 
 type ExportProps = {
   file: {
     name: string;
   };
+  onRename: (original: string, update: string) => void;
   onDelete: (file: string) => void;
 };
 
-export default function ExportCard({ file, onDelete }: ExportProps) {
+export default function ExportCard({ file, onRename, onDelete }: ExportProps) {
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const [hovered, setHovered] = useState(false);
   const [playing, setPlaying] = useState(false);
@@ -25,63 +29,143 @@ export default function ExportCard({ file, onDelete }: ExportProps) {
     [file.name],
   );
 
+  // editing name
+
+  const [editName, setEditName] = useState<{
+    original: string;
+    update: string;
+  }>();
+
+  useKeyboardListener(
+    editName != undefined ? ["Enter"] : [],
+    (_, down, repeat) => {
+      if (down && !repeat && editName && editName.update.length > 0) {
+        onRename(editName.original, editName.update.replaceAll(" ", "_"));
+        setEditName(undefined);
+      }
+    },
+  );
+
   return (
-    <div
+    <>
-      className="relative aspect-video bg-black rounded-2xl flex justify-center items-center"
+      <Dialog
-      onMouseEnter={
+        open={editName != undefined}
-        isDesktop && !inProgress ? () => setHovered(true) : undefined
+        onOpenChange={(open) => {
-      }
+          if (!open) {
-      onMouseLeave={
+            setEditName(undefined);
-        isDesktop && !inProgress ? () => setHovered(false) : undefined
+          }
-      }
+        }}
-      onClick={isDesktop || inProgress ? undefined : () => setHovered(!hovered)}
+      >
-    >
+        <DialogContent>
-      {!playing && hovered && (
+          <DialogTitle>Rename Export</DialogTitle>
-        <>
+          {editName && (
-          <div className="absolute inset-0 z-10 bg-black bg-opacity-60 rounded-2xl" />
+            <>
-          <Chip
+              <Input
-            className="absolute top-2 right-2 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 rounded-md cursor-pointer"
+                className="mt-3"
-            onClick={() => onDelete(file.name)}
+                type="search"
+                placeholder={editName?.original}
+                value={editName?.update}
+                onChange={(e) =>
+                  setEditName({
+                    original: editName.original ?? "",
+                    update: e.target.value,
+                  })
+                }
+              />
+              <DialogFooter>
+                <Button
+                  size="sm"
+                  variant="select"
+                  disabled={(editName?.update?.length ?? 0) == 0}
+                  onClick={() => {
+                    onRename(
+                      editName.original,
+                      editName.update.replaceAll(" ", "_"),
+                    );
+                    setEditName(undefined);
+                  }}
+                >
+                  Save
+                </Button>
+              </DialogFooter>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      <div
+        className="relative aspect-video bg-black rounded-2xl flex justify-center items-center"
+        onMouseEnter={
+          isDesktop && !inProgress ? () => setHovered(true) : undefined
+        }
+        onMouseLeave={
+          isDesktop && !inProgress ? () => setHovered(false) : undefined
+        }
+        onClick={
+          isDesktop || inProgress ? undefined : () => setHovered(!hovered)
+        }
+      >
+        {hovered && (
+          <>
+            {!playing && (
+              <div className="absolute inset-0 z-10 bg-black bg-opacity-60 rounded-2xl" />
+            )}
+            <div className="absolute top-1 right-1 flex items-center gap-2">
+              <Chip
+                className="bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 rounded-md cursor-pointer"
+                onClick={() => setEditName({ original: file.name, update: "" })}
+              >
+                <LuPencil className="size-4 text-white" />
+              </Chip>
+              <Chip
+                className="bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 rounded-md cursor-pointer"
+                onClick={() => onDelete(file.name)}
+              >
+                <LuTrash className="size-4 text-destructive fill-destructive" />
+              </Chip>
+            </div>
+            {!playing && (
+              <Button
+                className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-20 h-20 z-20 text-white hover:text-white hover:bg-transparent"
+                variant="ghost"
+                onClick={() => {
+                  setPlaying(true);
+                  videoRef.current?.play();
+                }}
+              >
+                <FaPlay />
+              </Button>
+            )}
+          </>
+        )}
+        {inProgress ? (
+          <ActivityIndicator />
+        ) : (
+          <video
+            ref={videoRef}
+            className="absolute inset-0 aspect-video rounded-2xl"
+            playsInline
+            preload="auto"
+            muted
+            controls={playing}
+            onLoadedData={() => setLoading(false)}
           >
-            <LuTrash className="w-4 h-4 text-destructive fill-destructive" />
+            <source src={`${baseUrl}exports/${file.name}`} type="video/mp4" />
-          </Chip>
+          </video>
-          <Button
+        )}
-            className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-20 h-20 z-20 text-white hover:text-white hover:bg-transparent"
+        {loading && (
-            variant="ghost"
+          <Skeleton className="absolute inset-0 aspect-video rounded-2xl" />
-            onClick={() => {
+        )}
-              setPlaying(true);
+        {!playing && (
-              videoRef.current?.play();
+          <div className="absolute bottom-0 inset-x-0 rounded-b-l z-10 h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none rounded-2xl">
-            }}
+            <div className="flex h-full justify-between items-end mx-3 pb-1 text-white text-sm capitalize">
-          >
+              {file.name
-            <FaPlay />
+                .substring(0, file.name.length - 4)
-          </Button>
+                .replaceAll("_", " ")}
-        </>
+            </div>
-      )}
-      {inProgress ? (
-        <ActivityIndicator />
-      ) : (
-        <video
-          ref={videoRef}
-          className="absolute inset-0 aspect-video rounded-2xl"
-          playsInline
-          preload="auto"
-          muted
-          controls={playing}
-          onLoadedData={() => setLoading(false)}
-        >
-          <source src={`${baseUrl}exports/${file.name}`} type="video/mp4" />
-        </video>
-      )}
-      {loading && (
-        <Skeleton className="absolute inset-0 aspect-video rounded-2xl" />
-      )}
-      {!playing && (
-        <div className="absolute bottom-0 inset-x-0 rounded-b-l z-10 h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none rounded-2xl">
-          <div className="flex h-full justify-between items-end mx-3 pb-1 text-white text-sm capitalize">
-            {file.name.substring(0, file.name.length - 4).replaceAll("_", " ")}
           </div>
-        </div>
+        )}
-      )}
+      </div>
-    </div>
+    </>
   );
 }

web/src/pages/Export.tsx

@@ -26,6 +26,18 @@ function Export() {
 
   const [deleteClip, setDeleteClip] = useState<string | undefined>();
 
+  const onHandleRename = useCallback(
+    (original: string, update: string) => {
+      axios.patch(`export/${original}/${update}`).then((response) => {
+        if (response.status == 200) {
+          setDeleteClip(undefined);
+          mutate();
+        }
+      });
+    },
+    [mutate],
+  );
+
   const onHandleDelete = useCallback(() => {
     if (!deleteClip) {
       return;
@@ -61,13 +73,14 @@ function Export() {
         </AlertDialogContent>
       </AlertDialog>
 
-      <div className="size-full overflow-hidden">
+      <div className="w-full overflow-hidden">
         {exports && (
           <div className="size-full grid gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 overflow-y-auto">
             {Object.values(exports).map((item) => (
               <ExportCard
                 key={item.name}
                 file={item}
+                onRename={onHandleRename}
                 onDelete={(file) => setDeleteClip(file)}
               />
             ))}