Use new apis for frontend

frigate/record/export.py

@@ -159,7 +159,7 @@ class RecordingExporter(threading.Thread):
         export_id = f"{self.camera}_{''.join(random.choices(string.ascii_lowercase + string.digits, k=6))}"
         export_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.replace("_", " ")} {self.get_datetime_from_timestamp(self.start_time)} {self.get_datetime_from_timestamp(self.end_time)}"
         )
         video_path = f"{EXPORT_DIR}/{export_id}.mp4"
 

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 />} />

web/src/components/card/ExportCard.tsx

@@ -1,8 +1,7 @@
-import { baseUrl } from "@/api/baseUrl";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { LuPencil, LuTrash } from "react-icons/lu";
 import { Button } from "../ui/button";
-import { useMemo, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { isDesktop } from "react-device-detect";
 import { FaPlay } from "react-icons/fa";
 import Chip from "../indicators/Chip";
@@ -10,19 +9,18 @@ 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";
 
 type ExportProps = {
   className: string;
-  file: {
+  exportedRecording: Export;
-    name: string;
-  };
   onRename: (original: string, update: string) => void;
   onDelete: (file: string) => void;
 };
 
 export default function ExportCard({
   className,
-  file,
+  exportedRecording,
   onRename,
   onDelete,
 }: ExportProps) {
@@ -30,10 +28,6 @@ export default function ExportCard({
   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],
-  );
 
   // editing name
 
@@ -102,13 +96,19 @@ 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 && (
@@ -119,13 +119,15 @@ export default function ExportCard({
             <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: "" })}
+                onClick={() =>
+                  setEditName({ original: exportedRecording.id, 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)}
+                onClick={() => onDelete(exportedRecording.id)}
               >
                 <LuTrash className="size-4 text-destructive fill-destructive" />
               </Chip>
@@ -144,20 +146,14 @@ export default function ExportCard({
             )}
           </>
         )}
-        {inProgress ? (
+        {exportedRecording.in_progress ? (
           <ActivityIndicator />
         ) : (
-          <video
+          <img
-            ref={videoRef}
             className="absolute inset-0 aspect-video rounded-2xl"
-            playsInline
+            src={exportedRecording.thumb_path.replace("/media/frigate", "")}
-            preload="auto"
+            onLoad={() => setLoading(false)}
-            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" />
@@ -165,9 +161,7 @@ export default function ExportCard({
         {!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
+              {exportedRecording.name}
-                .substring(0, file.name.length - 4)
-                .replaceAll("_", " ")}
             </div>
           </div>
         )}

web/src/pages/Exports.tsx

@@ -1,4 +1,3 @@
-import { baseUrl } from "@/api/baseUrl";
 import ExportCard from "@/components/card/ExportCard";
 import {
   AlertDialog,
@@ -11,19 +10,13 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 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 = {
+function Exports() {
-  name: string;
+  const { data: exports, mutate } = useSWR<Export[]>("exports");
-};
-
-function Export() {
-  const { data: allExports, mutate } = useSWR<ExportItem[]>(
-    "exports/",
-    (url: string) => axios({ baseURL: baseUrl, url }).then((res) => res.data),
-  );
 
   useEffect(() => {
     document.title = "Export - Frigate";
@@ -33,15 +26,17 @@ function Export() {
 
   const [search, setSearch] = useState("");
 
-  const exports = useMemo(() => {
+  const filteredExports = useMemo(() => {
-    if (!search || !allExports) {
+    if (!search || !exports) {
-      return allExports;
+      return exports;
     }
 
-    return allExports.filter((exp) =>
+    return exports.filter((exp) =>
-      exp.name.toLowerCase().includes(search.toLowerCase()),
+      exp.name
+        .toLowerCase()
+        .includes(search.toLowerCase().replaceAll(" ", "_")),
     );
-  }, [allExports, search]);
+  }, [exports, search]);
 
   // Deleting
 
@@ -63,8 +58,8 @@ function Export() {
   // Renaming
 
   const onHandleRename = useCallback(
-    (original: string, update: string) => {
+    (id: string, update: string) => {
-      axios.patch(`export/${original}/${update}`).then((response) => {
+      axios.patch(`export/${id}/${update}`).then((response) => {
         if (response.status == 200) {
           setDeleteClip(undefined);
           mutate();
@@ -106,15 +101,15 @@ 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}
                 onRename={onHandleRename}
                 onDelete={(file) => setDeleteClip(file)}
               />
@@ -126,4 +121,4 @@ function Export() {
   );
 }
 
-export default Export;
+export default Exports;

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;
+};