Save exports to database (#11040)

* Save review thumbs in dedicated folder * Create exports table * Save exports to DB and save thumbnail for export * Save full frame always * Fix rounded corners * Save exports that are in progress * No need to remove spaces * Reorganize apis to use IDs * Use new apis for frontend * Get video playback working * Fix deleting and renaming * Import existing exports to DB * Implement downloading * Formatting
2024-04-19 16:11:41 -06:00
parent 3b0f9988df
commit fe4fb645d3
13 changed files with 584 additions and 284 deletions
--- a/web/src/pages/Exports.tsx
+++ b/web/src/pages/Exports.tsx
@@ -0,0 +1,162 @@
+import { baseUrl } from "@/api/baseUrl";
+import ExportCard from "@/components/card/ExportCard";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Export } from "@/types/export";
+import axios from "axios";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import useSWR from "swr";
+
+function Exports() {
+  const { data: exports, mutate } = useSWR<Export[]>("exports");
+
+  useEffect(() => {
+    document.title = "Export - Frigate";
+  }, []);
+
+  // Search
+
+  const [search, setSearch] = useState("");
+
+  const filteredExports = useMemo(() => {
+    if (!search || !exports) {
+      return exports;
+    }
+
+    return exports.filter((exp) =>
+      exp.name
+        .toLowerCase()
+        .replaceAll("_", " ")
+        .includes(search.toLowerCase()),
+    );
+  }, [exports, search]);
+
+  // Deleting
+
+  const [deleteClip, setDeleteClip] = useState<string | undefined>();
+
+  const onHandleDelete = useCallback(() => {
+    if (!deleteClip) {
+      return;
+    }
+
+    axios.delete(`export/${deleteClip}`).then((response) => {
+      if (response.status == 200) {
+        setDeleteClip(undefined);
+        mutate();
+      }
+    });
+  }, [deleteClip, mutate]);
+
+  // Renaming
+
+  const onHandleRename = useCallback(
+    (id: string, update: string) => {
+      axios.patch(`export/${id}/${update}`).then((response) => {
+        if (response.status == 200) {
+          setDeleteClip(undefined);
+          mutate();
+        }
+      });
+    },
+    [mutate],
+  );
+
+  // Viewing
+
+  const [selected, setSelected] = useState<Export>();
+
+  return (
+    <div className="size-full p-2 overflow-hidden flex flex-col gap-2">
+      <AlertDialog
+        open={deleteClip != undefined}
+        onOpenChange={() => setDeleteClip(undefined)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Export</AlertDialogTitle>
+            <AlertDialogDescription>
+              Confirm deletion of {deleteClip}.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <Button
+              className="text-white"
+              variant="destructive"
+              onClick={() => onHandleDelete()}
+            >
+              Delete
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <Dialog
+        open={selected != undefined}
+        onOpenChange={(open) => {
+          if (!open) {
+            setSelected(undefined);
+          }
+        }}
+      >
+        <DialogContent className="max-w-7xl">
+          <DialogTitle>{selected?.name}</DialogTitle>
+          <video
+            className="size-full rounded-2xl"
+            playsInline
+            preload="auto"
+            autoPlay
+            controls
+            muted
+          >
+            <source
+              src={`${baseUrl}${selected?.video_path?.replace("/media/frigate/", "")}`}
+              type="video/mp4"
+            />
+          </video>
+        </DialogContent>
+      </Dialog>
+
+      <div className="w-full p-2 flex items-center justify-center">
+        <Input
+          className="w-full md:w-1/3 bg-muted"
+          placeholder="Search"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+      </div>
+
+      <div className="w-full overflow-hidden">
+        {exports && filteredExports && (
+          <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}
+                className={
+                  search == "" || filteredExports.includes(item) ? "" : "hidden"
+                }
+                exportedRecording={item}
+                onSelect={setSelected}
+                onRename={onHandleRename}
+                onDelete={(id) => setDeleteClip(id)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Exports;