Add ability to search exports (#10850)

* Add ability to search exports

* Fix export saving

web/src/components/card/ExportCard.tsx

@@ -12,6 +12,7 @@ import { Input } from "../ui/input";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 
 type ExportProps = {
+  className: string;
   file: {
     name: string;
   };
@@ -19,7 +20,12 @@ type ExportProps = {
   onDelete: (file: string) => void;
 };
 
-export default function ExportCard({ file, onRename, onDelete }: ExportProps) {
+export default function ExportCard({
+  className,
+  file,
+  onRename,
+  onDelete,
+}: ExportProps) {
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const [hovered, setHovered] = useState(false);
   const [playing, setPlaying] = useState(false);
@@ -94,7 +100,7 @@ export default function ExportCard({ file, onRename, onDelete }: ExportProps) {
       </Dialog>
 
       <div
-        className="relative aspect-video bg-black rounded-2xl flex justify-center items-center"
+        className={`relative aspect-video bg-black rounded-2xl flex justify-center items-center ${className}`}
         onMouseEnter={
           isDesktop && !inProgress ? () => setHovered(true) : undefined
         }

web/src/components/overlay/ExportDialog.tsx

@@ -64,10 +64,13 @@ export default function ExportDialog({
     }
 
     axios
-      .post(`export/${camera}/start/${range.after}/end/${range.before}`, {
+      .post(
-        playback: "realtime",
+        `export/${camera}/start/${Math.round(range.after)}/end/${Math.round(range.before)}`,
-        name,
+        {
-      })
+          playback: "realtime",
+          name,
+        },
+      )
       .then((response) => {
         if (response.status == 200) {
           toast.success(

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -66,10 +66,13 @@ export default function MobileReviewSettingsDrawer({
     }
 
     axios
-      .post(`export/${camera}/start/${range.after}/end/${range.before}`, {
+      .post(
-        playback: "realtime",
+        `export/${camera}/start/${Math.round(range.after)}/end/${Math.round(range.before)}`,
-        name,
+        {
-      })
+          playback: "realtime",
+          name,
+        },
+      )
       .then((response) => {
         if (response.status == 200) {
           toast.success(

web/src/pages/Export.tsx

@@ -10,8 +10,9 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import axios from "axios";
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import useSWR from "swr";
 
 type ExportItem = {
@@ -19,24 +20,30 @@ type ExportItem = {
 };
 
 function Export() {
-  const { data: exports, mutate } = useSWR<ExportItem[]>(
+  const { data: allExports, mutate } = useSWR<ExportItem[]>(
     "exports/",
     (url: string) => axios({ baseURL: baseUrl, url }).then((res) => res.data),
   );
 
-  const [deleteClip, setDeleteClip] = useState<string | undefined>();
+  // Search
 
-  const onHandleRename = useCallback(
+  const [search, setSearch] = useState("");
-    (original: string, update: string) => {
+
-      axios.patch(`export/${original}/${update}`).then((response) => {
+  const exports = useMemo(() => {
-        if (response.status == 200) {
+    if (!search || !allExports) {
-          setDeleteClip(undefined);
+      return allExports;
-          mutate();
+    }
-        }
+
-      });
+    return allExports.filter((exp) =>
-    },
+      exp.name
-    [mutate],
+        .toLowerCase()
-  );
+        .includes(search.toLowerCase().replaceAll(" ", "_")),
+    );
+  }, [allExports, search]);
+
+  // Deleting
+
+  const [deleteClip, setDeleteClip] = useState<string | undefined>();
 
   const onHandleDelete = useCallback(() => {
     if (!deleteClip) {
@@ -51,8 +58,22 @@ function Export() {
     });
   }, [deleteClip, mutate]);
 
+  // Renaming
+
+  const onHandleRename = useCallback(
+    (original: string, update: string) => {
+      axios.patch(`export/${original}/${update}`).then((response) => {
+        if (response.status == 200) {
+          setDeleteClip(undefined);
+          mutate();
+        }
+      });
+    },
+    [mutate],
+  );
+
   return (
-    <div className="size-full p-2 overflow-hidden flex flex-col">
+    <div className="size-full p-2 overflow-hidden flex flex-col gap-2">
       <AlertDialog
         open={deleteClip != undefined}
         onOpenChange={() => setDeleteClip(undefined)}
@@ -73,12 +94,24 @@ function Export() {
         </AlertDialogContent>
       </AlertDialog>
 
+      <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 && (
+        {allExports && 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) => (
+            {Object.values(allExports).map((item) => (
               <ExportCard
                 key={item.name}
+                className={
+                  search == "" || exports.includes(item) ? "" : "hidden"
+                }
                 file={item}
                 onRename={onHandleRename}
                 onDelete={(file) => setDeleteClip(file)}