[wip] feat: add delete prev recording feat in settings

Author: sbeaury

apps/desktop/src-tauri/src/lib.rs

@@ -244,6 +244,11 @@ pub struct RecordingStopped {
     path: PathBuf,
 }
 
+#[derive(Deserialize, specta::Type, Serialize, tauri_specta::Event, Debug, Clone)]
+pub struct RecordingDeleted {
+    path: PathBuf,
+}
+
 #[derive(Deserialize, specta::Type, Serialize, tauri_specta::Event, Debug, Clone)]
 pub struct RequestStartRecording;
 
@@ -664,6 +669,24 @@ async fn open_file_path(_app: AppHandle, path: PathBuf) -> Result<(), String> {
     Ok(())
 }
 
+
+#[tauri::command]
+#[specta::specta]
+async fn delete_file(_app: AppHandle, path: PathBuf) -> Result<(), String> {
+    let path_str = path.to_str().ok_or("Invalid path")?;
+
+    #[cfg(target_os = "macos")]
+    {
+        Command::new("rm")
+            .arg("-r")
+            .arg(path_str)
+            .spawn()
+            .map_err(|e| format!("Failed to delete folder: {}", e))?;
+    }
+
+    Ok(())
+}
+
 #[derive(Deserialize, specta::Type, tauri_specta::Event, Debug, Clone)]
 struct RenderFrameEvent {
     frame_number: u32,
@@ -1671,6 +1694,7 @@ pub async fn run() {
             copy_video_to_clipboard,
             copy_screenshot_to_clipboard,
             open_file_path,
+            delete_file,
             get_video_metadata,
             create_editor_instance,
             start_playback,
@@ -1711,6 +1735,7 @@ pub async fn run() {
             RecordingMetaChanged,
             RecordingStarted,
             RecordingStopped,
+            RecordingDeleted,
             RequestStartRecording,
             RequestRestartRecording,
             RequestStopRecording,

apps/desktop/src/routes/(window-chrome)/settings/recordings.tsx

@@ -3,6 +3,7 @@ import { For, Show, Suspense, createSignal } from "solid-js";
 import { convertFileSrc } from "@tauri-apps/api/core";
 
 import { commands, events } from "~/utils/tauri";
+import { createQueryInvalidate } from "~/utils/events";
 
 type MediaEntry = {
   id: string;
@@ -13,38 +14,52 @@ type MediaEntry = {
 };
 
 export default function Recordings() {
-  const fetchRecordings = createQuery(() => ({
-    queryKey: ["recordings"],
-    queryFn: async () => {
-      const result = await commands
-        .listRecordings()
-        .catch(
-          () =>
-            Promise.resolve([]) as ReturnType<typeof commands.listRecordings>
+  function fetchRecordingsQuery() {
+    const fetchRecordings = createQuery(() => ({
+      queryKey: ["recordings"],
+      queryFn: async () => {
+        const result = await commands
+          .listRecordings()
+          .catch(
+            () =>
+              Promise.resolve([]) as ReturnType<typeof commands.listRecordings>
+          );
+
+        const recordings = await Promise.all(
+          result.map(async (file) => {
+            const [id, path, meta] = file;
+            const thumbnailPath = `${path}/screenshots/display.jpg`;
+
+            return {
+              id,
+              path,
+              prettyName: meta.pretty_name,
+              isNew: false,
+              thumbnailPath,
+            };
+          })
         );
+        return recordings;
+      },
+      staleTime: 0,
+    }));
 
-      const recordings = await Promise.all(
-        result.map(async (file) => {
-          const [id, path, meta] = file;
-          const thumbnailPath = `${path}/screenshots/display.jpg`;
+    createQueryInvalidate(fetchRecordings, "recordingDeleted");
 
-          return {
-            id,
-            path,
-            prettyName: meta.pretty_name,
-            isNew: false,
-            thumbnailPath,
-          };
-        })
-      );
-      return recordings;
-    },
-  }));
+    return fetchRecordings;
+  }
 
-  const handleRecordingClick = (recording: MediaEntry) => {
+  const recordings = fetchRecordingsQuery();
+
+  const handleOpenRecording = (recording: MediaEntry) => {
     events.newRecordingAdded.emit({ path: recording.path });
   };
 
+  const handleDeleteRecording = (path: string) => {
+    commands.deleteFile(path);
+    events.recordingDeleted.emit({ path });
+  };
+
   const handleOpenFolder = (path: string) => {
     commands.openFilePath(path);
   };
@@ -60,18 +75,21 @@ export default function Recordings() {
       <div class="flex-1 overflow-y-auto">
         <ul class="p-[0.625rem] flex flex-col gap-[0.5rem] w-full">
           <Show
-            when={fetchRecordings.data && fetchRecordings.data.length > 0}
+            when={recordings.data && recordings.data.length > 0}
             fallback={
               <p class="text-center text-gray-500">No recordings found</p>
             }
           >
-            <For each={fetchRecordings.data}>
+            <For each={recordings.data}>
               {(recording) => (
                 <RecordingItem
                   recording={recording}
-                  onClick={() => handleRecordingClick(recording)}
                   onOpenFolder={() => handleOpenFolder(recording.path)}
                   onOpenEditor={() => handleOpenEditor(recording.path)}
+                  onOpenRecording={() => handleOpenRecording(recording)}
+                  onDeleteRecording={() =>
+                    handleDeleteRecording(recording.path)
+                  }
                 />
               )}
             </For>
@@ -84,9 +102,10 @@ export default function Recordings() {
 
 function RecordingItem(props: {
   recording: MediaEntry;
-  onClick: () => void;
   onOpenFolder: () => void;
   onOpenEditor: () => void;
+  onOpenRecording: () => void;
+  onDeleteRecording: () => void;
 }) {
   const [imageExists, setImageExists] = createSignal(true);
 
@@ -133,12 +152,22 @@ function RecordingItem(props: {
           type="button"
           onClick={(e) => {
             e.stopPropagation();
-            props.onClick();
+            props.onOpenRecording();
           }}
           class="p-2 hover:bg-gray-200 rounded-full"
         >
           <IconLucideEye class="size-5" />
         </button>
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            props.onDeleteRecording();
+          }}
+          class="p-2 hover:bg-gray-200 rounded-full"
+        >
+          <IconCapTrash class="size-5" />
+        </button>
       </div>
     </li>
   );

apps/desktop/src/utils/tauri.ts

@@ -68,6 +68,9 @@ async copyScreenshotToClipboard(path: string) : Promise<null> {
 async openFilePath(path: string) : Promise<null> {
     return await TAURI_INVOKE("open_file_path", { path });
 },
+async deleteFile(path: string) : Promise<null> {
+    return await TAURI_INVOKE("delete_file", { path });
+},
 async getVideoMetadata(videoId: string, videoType: VideoType | null) : Promise<[number, number]> {
     return await TAURI_INVOKE("get_video_metadata", { videoId, videoType });
 },
@@ -168,6 +171,7 @@ editorStateChanged: EditorStateChanged,
 newNotification: NewNotification,
 newRecordingAdded: NewRecordingAdded,
 newScreenshotAdded: NewScreenshotAdded,
+recordingDeleted: RecordingDeleted,
 recordingMetaChanged: RecordingMetaChanged,
 recordingOptionsChanged: RecordingOptionsChanged,
 recordingStarted: RecordingStarted,
@@ -187,6 +191,7 @@ editorStateChanged: "editor-state-changed",
 newNotification: "new-notification",
 newRecordingAdded: "new-recording-added",
 newScreenshotAdded: "new-screenshot-added",
+recordingDeleted: "recording-deleted",
 recordingMetaChanged: "recording-meta-changed",
 recordingOptionsChanged: "recording-options-changed",
 recordingStarted: "recording-started",
@@ -247,6 +252,7 @@ export type Plan = { upgraded: boolean; last_checked: number }
 export type PreCreatedVideo = { id: string; link: string; config: S3UploadMeta }
 export type ProjectConfiguration = { aspectRatio: AspectRatio | null; background: BackgroundConfiguration; camera: Camera; audio: AudioConfiguration; cursor: CursorConfiguration; hotkeys: HotkeysConfiguration; timeline?: TimelineConfiguration | null; motionBlur: number | null }
 export type ProjectRecordings = { display: Video; camera: Video | null; audio: Audio | null }
+export type RecordingDeleted = { path: string }
 export type RecordingInfo = { captureTarget: ScreenCaptureTarget }
 export type RecordingMeta = { pretty_name: string; sharing?: SharingMeta | null; display: Display; camera?: CameraMeta | null; audio?: AudioMeta | null; segments?: RecordingSegment[]; cursor: string | null }
 export type RecordingMetaChanged = { id: string }