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/App.tsx
+++ b/web/src/App.tsx
@@ -11,7 +11,7 @@ import { Redirect } from "./components/navigation/Redirect";

 const Live = lazy(() => import("@/pages/Live"));
 const Events = lazy(() => import("@/pages/Events"));
-const Export = lazy(() => import("@/pages/Export"));
+const Exports = lazy(() => import("@/pages/Exports"));
 const SubmitPlus = lazy(() => import("@/pages/SubmitPlus"));
 const ConfigEditor = lazy(() => import("@/pages/ConfigEditor"));
 const System = lazy(() => import("@/pages/System"));
@@ -38,7 +38,7 @@ function App() {
                  <Route path="/" element={<Live />} />
                  <Route path="/events" element={<Redirect to="/review" />} />
                  <Route path="/review" element={<Events />} />
-                  <Route path="/export" element={<Export />} />
+                  <Route path="/export" element={<Exports />} />
                  <Route path="/plus" element={<SubmitPlus />} />
                  <Route path="/system" element={<System />} />
                  <Route path="/settings" element={<Settings />} />
--- a/web/src/components/card/AnimatedEventCard.tsx
+++ b/web/src/components/card/AnimatedEventCard.tsx
@@ -63,7 +63,7 @@ export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
          }}
        >
          <div
-            className="size-full rounded cursor-pointer"
+            className="size-full rounded cursor-pointer overflow-hidden"
            onClick={onOpenReview}
          >
            {previews ? (
--- a/web/src/components/card/ExportCard.tsx
+++ b/web/src/components/card/ExportCard.tsx
@@ -1,38 +1,36 @@
-import { baseUrl } from "@/api/baseUrl";
 import ActivityIndicator from "../indicators/activity-indicator";
-import { LuPencil, LuTrash } from "react-icons/lu";
+import { LuTrash } from "react-icons/lu";
 import { Button } from "../ui/button";
-import { useMemo, useRef, useState } from "react";
+import { useState } from "react";
 import { isDesktop } from "react-device-detect";
-import { FaPlay } from "react-icons/fa";
+import { FaDownload, 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";
+import { Export } from "@/types/export";
+import { MdEditSquare } from "react-icons/md";
+import { baseUrl } from "@/api/baseUrl";

 type ExportProps = {
  className: string;
-  file: {
-    name: string;
-  };
+  exportedRecording: Export;
+  onSelect: (selected: Export) => void;
  onRename: (original: string, update: string) => void;
  onDelete: (file: string) => void;
 };

 export default function ExportCard({
  className,
-  file,
+  exportedRecording,
+  onSelect,
  onRename,
  onDelete,
 }: ExportProps) {
-  const videoRef = useRef<HTMLVideoElement | null>(null);
  const [hovered, setHovered] = useState(false);
-  const [playing, setPlaying] = useState(false);
-  const [loading, setLoading] = useState(true);
-  const inProgress = useMemo(
-    () => file.name.startsWith("in_progress"),
-    [file.name],
+  const [loading, setLoading] = useState(
+    exportedRecording.thumb_path.length > 0,
  );

  // editing name
@@ -46,7 +44,7 @@ export default function ExportCard({
    editName != undefined ? ["Enter"] : [],
    (_, down, repeat) => {
      if (down && !repeat && editName && editName.update.length > 0) {
-        onRename(editName.original, editName.update.replaceAll(" ", "_"));
+        onRename(exportedRecording.id, editName.update);
        setEditName(undefined);
      }
    },
@@ -84,10 +82,7 @@ export default function ExportCard({
                  variant="select"
                  disabled={(editName?.update?.length ?? 0) == 0}
                  onClick={() => {
-                    onRename(
-                      editName.original,
-                      editName.update.replaceAll(" ", "_"),
-                    );
+                    onRename(exportedRecording.id, editName.update);
                    setEditName(undefined);
                  }}
                >
@@ -102,75 +97,84 @@ export default function ExportCard({
      <div
        className={`relative aspect-video bg-black rounded-2xl flex justify-center items-center ${className}`}
        onMouseEnter={
-          isDesktop && !inProgress ? () => setHovered(true) : undefined
+          isDesktop && !exportedRecording.in_progress
+            ? () => setHovered(true)
+            : undefined
        }
        onMouseLeave={
-          isDesktop && !inProgress ? () => setHovered(false) : undefined
+          isDesktop && !exportedRecording.in_progress
+            ? () => setHovered(false)
+            : undefined
        }
        onClick={
-          isDesktop || inProgress ? undefined : () => setHovered(!hovered)
+          isDesktop || exportedRecording.in_progress
+            ? undefined
+            : () => setHovered(!hovered)
        }
      >
        {hovered && (
          <>
-            {!playing && (
-              <div className="absolute inset-0 z-10 bg-black bg-opacity-60 rounded-2xl" />
-            )}
+            <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">
+              <a
+                className="z-20"
+                download
+                href={`${baseUrl}${exportedRecording.video_path.replace("/media/frigate/", "")}`}
+              >
+                <Chip className="bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 rounded-md cursor-pointer">
+                  <FaDownload className="size-4 text-white" />
+                </Chip>
+              </a>
              <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: "" })}
+                onClick={() =>
+                  setEditName({ original: exportedRecording.name, update: "" })
+                }
              >
-                <LuPencil className="size-4 text-white" />
+                <MdEditSquare 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)}
+                onClick={() => onDelete(exportedRecording.id)}
              >
                <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>
-            )}
+
+            <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 cursor-pointer"
+              variant="ghost"
+              onClick={() => {
+                onSelect(exportedRecording);
+              }}
+            >
+              <FaPlay />
+            </Button>
          </>
        )}
-        {inProgress ? (
+        {exportedRecording.in_progress ? (
          <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>
+          <>
+            {exportedRecording.thumb_path.length > 0 ? (
+              <img
+                className="size-full absolute inset-0 object-contain aspect-video rounded-2xl"
+                src={exportedRecording.thumb_path.replace("/media/frigate", "")}
+                onLoad={() => setLoading(false)}
+              />
+            ) : (
+              <div className="absolute inset-0 bg-secondary rounded-2xl" />
+            )}
+          </>
        )}
        {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 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">
+            {exportedRecording.name.replaceAll("_", " ")}
          </div>
-        )}
+        </div>
      </div>
    </>
  );
--- a/web/src/pages/Exports.tsx
+++ b/web/src/pages/Exports.tsx
@@ -10,20 +10,15 @@ import {
  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";

-type ExportItem = {
-  name: string;
-};
-
-function Export() {
-  const { data: allExports, mutate } = useSWR<ExportItem[]>(
-    "exports/",
-    (url: string) => axios({ baseURL: baseUrl, url }).then((res) => res.data),
-  );
+function Exports() {
+  const { data: exports, mutate } = useSWR<Export[]>("exports");

  useEffect(() => {
    document.title = "Export - Frigate";
@@ -33,17 +28,18 @@ function Export() {

  const [search, setSearch] = useState("");

-  const exports = useMemo(() => {
-    if (!search || !allExports) {
-      return allExports;
+  const filteredExports = useMemo(() => {
+    if (!search || !exports) {
+      return exports;
    }

-    return allExports.filter((exp) =>
+    return exports.filter((exp) =>
      exp.name
        .toLowerCase()
-        .includes(search.toLowerCase().replaceAll(" ", "_")),
+        .replaceAll("_", " ")
+        .includes(search.toLowerCase()),
    );
-  }, [allExports, search]);
+  }, [exports, search]);

  // Deleting

@@ -65,8 +61,8 @@ function Export() {
  // Renaming

  const onHandleRename = useCallback(
-    (original: string, update: string) => {
-      axios.patch(`export/${original}/${update}`).then((response) => {
+    (id: string, update: string) => {
+      axios.patch(`export/${id}/${update}`).then((response) => {
        if (response.status == 200) {
          setDeleteClip(undefined);
          mutate();
@@ -76,6 +72,10 @@ function Export() {
    [mutate],
  );

+  // Viewing
+
+  const [selected, setSelected] = useState<Export>();
+
  return (
    <div className="size-full p-2 overflow-hidden flex flex-col gap-2">
      <AlertDialog
@@ -91,13 +91,43 @@ function Export() {
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <Button variant="destructive" onClick={() => onHandleDelete()}>
+            <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"
@@ -108,17 +138,18 @@ function Export() {
      </div>

      <div className="w-full overflow-hidden">
-        {allExports && exports && (
+        {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(allExports).map((item) => (
+            {Object.values(exports).map((item) => (
              <ExportCard
                key={item.name}
                className={
-                  search == "" || exports.includes(item) ? "" : "hidden"
+                  search == "" || filteredExports.includes(item) ? "" : "hidden"
                }
-                file={item}
+                exportedRecording={item}
+                onSelect={setSelected}
                onRename={onHandleRename}
-                onDelete={(file) => setDeleteClip(file)}
+                onDelete={(id) => setDeleteClip(id)}
              />
            ))}
          </div>
@@ -128,4 +159,4 @@ function Export() {
  );
 }

-export default Export;
+export default Exports;
--- a/web/src/types/export.ts
+++ b/web/src/types/export.ts
@@ -0,0 +1,9 @@
+export type Export = {
+  id: string;
+  camera: string;
+  name: string;
+  date: number;
+  video_path: string;
+  thumb_path: string;
+  in_progress: boolean;
+};