Create delete video quick action on thumbnail

Moved code to recordingsManager and reworked for reuse
sbondCo · Dec 19, 2023 · d67dd56 · d67dd56
1 parent 2a7927b
commit d67dd56
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 29 deletions.
diff --git a/src/common/Icon.tsx b/src/common/Icon.tsx
@@ -39,7 +39,8 @@ export type Icons =
   | "folder"
   | "bookmark"
   | "film"
-  | "camera";
+  | "camera"
+  | "trash";
 
 export type IconDirection = "up" | "down" | "left" | "right";
 
@@ -446,6 +447,19 @@ function getIcon(name: Icons): { viewBox: string; el: JSX.Element } {
           />
         )
       };
+    case "trash":
+      return {
+        viewBox: "0 0 512 512",
+        el: (
+          <>
+            <path d="M296 64h-80a7.91 7.91 0 00-8 8v24h96V72a7.91 7.91 0 00-8-8z" fill="none" />
+            <path
+              d="M432 96h-96V72a40 40 0 00-40-40h-80a40 40 0 00-40 40v24H80a16 16 0 000 32h17l19 304.92c1.42 26.85 22 47.08 48 47.08h184c26.13 0 46.3-19.78 48-47l19-305h17a16 16 0 000-32zM192.57 416H192a16 16 0 01-16-15.43l-8-224a16 16 0 1132-1.14l8 224A16 16 0 01192.57 416zM272 400a16 16 0 01-32 0V176a16 16 0 0132 0zm32-304h-96V72a7.91 7.91 0 018-8h80a7.91 7.91 0 018 8zm32 304.57A16 16 0 01320 416h-.58A16 16 0 01304 399.43l8-224a16 16 0 1132 1.14z"
+              fill="currentColor"
+            />
+          </>
+        )
+      };
     default:
       return {
         viewBox: "0 -10 1000 1000",

diff --git a/src/editor/Editor.tsx b/src/editor/Editor.tsx
@@ -12,7 +12,6 @@ import type { Video } from "@/videos/types";
 import RecordingsManager from "@/libs/recorder/recordingsManager";
 import { useDispatch, useSelector } from "react-redux";
 import { videoBookmarkAdded, videoBookmarkRemoved, videoRenamed } from "@/videos/videosSlice";
-import Notifications from "@/libs/helpers/notifications";
 import { type RootState } from "@/app/store";
 import { toReadableTimeFromSeconds } from "@/libs/helpers/extensions/number";
 import Tooltip from "@/common/Tooltip";
@@ -107,34 +106,13 @@ export default function VideoEditor() {
         <Button
           icon="close"
           onClick={() => {
-            const rm = (rmFromDsk: boolean) => {
-              RecordingsManager.delete(video, rmFromDsk).catch((e) =>
-                logger.error("Editor", "Failed to delete video from video editor!", e)
-              );
-              navigate(-1);
-            };
-
-            if (genState.deleteVideoConfirmationDisabled) {
-              rm(genState.deleteVideosFromDisk);
-            } else {
-              Notifications.popup({
-                id: "DELETE-VIDEO",
-                title: "Delete Video",
-                showCancel: true,
-                tickBoxes: [{ name: "Also remove from disk", ticked: genState.deleteVideosFromDisk }],
-                buttons: ["cancel", "delete"]
+            RecordingsManager.deleteWithConfirmation(video)
+              .then((deleted) => {
+                if (deleted) navigate(-1);
               })
-                .then((popup) => {
-                  if (popup.action === "delete") {
-                    rm(popup.tickBoxesChecked.includes("Also remove from disk"));
-                  }
-
-                  Notifications.rmPopup("DELETE-VIDEO");
-                })
-                .catch((e) => {
-                  logger.error("Editor", "Failed to show DELETE-VIDEO popup!", e);
-                });
-            }
+              .catch((err: any) => {
+                logger.error("Editor", "Failed to delete video with confirmation", err);
+              });
           }}
         />
       </div>

diff --git a/src/libs/recorder/recordingsManager.ts b/src/libs/recorder/recordingsManager.ts
@@ -88,6 +88,52 @@ export default class RecordingsManager {
     }
   }
 
+  /**
+   * Delete video from user action, shows confirmation popup
+   * if setting is set to do so.
+   * @param video Video to be deleted.
+   */
+  public static async deleteWithConfirmation(video: Video) {
+    try {
+      const genState = store.getState().settings.general;
+
+      const rm = async (rmFromDsk: boolean) => {
+        await RecordingsManager.delete(video, rmFromDsk);
+      };
+
+      if (genState.deleteVideoConfirmationDisabled) {
+        await rm(genState.deleteVideosFromDisk);
+        return true;
+      } else {
+        const popup = await Notifications.popup({
+          id: "DELETE-VIDEO",
+          title: "Delete Video",
+          showCancel: true,
+          tickBoxes: [{ name: "Also remove from disk", ticked: genState.deleteVideosFromDisk }],
+          buttons: ["cancel", "delete"]
+        });
+        if (popup.action === "delete") {
+          await rm(popup.tickBoxesChecked.includes("Also remove from disk"));
+          Notifications.rmPopup("DELETE-VIDEO");
+          return true;
+        }
+        Notifications.rmPopup("DELETE-VIDEO");
+        return false;
+      }
+    } catch (err: any) {
+      logger.error("Editor", "Failed to delete video from video editor!", err);
+      Notifications.popup({
+        id: "DELETE-VIDEO",
+        title: "Failed to delete",
+        message: "We were unable to delete this video. Please try again.",
+        showCancel: true
+      }).catch((err) => {
+        logger.error(`deleteWithConfirmation failed: popup failed`, err);
+      });
+      return false;
+    }
+  }
+
   /**
    * Create thumbnail for video
    * @param videoPath Path to video to create thumbnail for

diff --git a/src/videos/VideosGridItem.tsx b/src/videos/VideosGridItem.tsx
@@ -7,6 +7,7 @@ import { shell } from "electron";
 import path from "path";
 import { useEffect, useState } from "react";
 import type { Video } from "./types";
+import RecordingsManager from "@/libs/recorder/recordingsManager";
 
 export default function VideosGridItem({ video }: { video: Video }) {
   const { name, duration, fileSize, fps, thumbPath, videoPath, isClip } = video;
@@ -58,6 +59,18 @@ export default function VideosGridItem({ video }: { video: Video }) {
             });
           }}
         />
+        <Icon
+          i="trash"
+          wh={32}
+          className="hover:bg-tertiary-100 p-1 rounded"
+          onClick={(e) => {
+            e.preventDefault();
+            logger.info("VideosGridItem", "delete button clicked on thumb");
+            RecordingsManager.deleteWithConfirmation(video).catch((err: any) => {
+              logger.error("VideosGridItem", "failed to delete video with confirmation", err);
+            });
+          }}
+        />
       </div>
 
       <p className="absolute right-3 top-2 italic font-bold [text_shadow:_1px_1px_black]">{fps} FPS</p>