feat: ✨ video sniffing page added one-click cleanup and one-click dow…

…nload
caorushizi · Jan 2, 2025 · 31a1831 · 31a1831
1 parent 623ed94
commit 31a1831
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 19 deletions.
diff --git a/packages/renderer/src/assets/svg/EditIcon.tsx b/packages/renderer/src/assets/svg/EditIcon.tsx
@@ -10,16 +10,9 @@ export function EditIcon(props: React.SVGProps<SVGSVGElement>) {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <g clipPath="url(#clip0_3_85)">
-        <path d="M12.6156 4.58593L12.1641 5.0375L12.3438 4.85781C12.4875 4.69687 12.4813 4.45 12.3266 4.29531L12.6156 4.58593ZM10.1641 2.12968L10.6156 2.58125L10.4359 2.40156C10.275 2.25781 10.0281 2.26406 9.87344 2.41875L10.1641 2.12968ZM15.0047 14.4625C15.0047 14.1094 14.7188 13.8219 14.3641 13.8219H1.56406C1.21094 13.8219 0.923439 14.1078 0.923439 14.4625C0.923439 14.8156 1.20938 15.1031 1.56406 15.1031H14.3656C14.7188 15.1016 15.0047 14.8156 15.0047 14.4625ZM2.575 12.8219C2.92813 12.8219 3.21563 12.5359 3.21563 12.1812V8.82343C3.21563 8.47031 2.92969 8.18281 2.575 8.18281C2.22188 8.18281 1.93438 8.46875 1.93438 8.82343V12.1812C1.93438 12.5359 2.22188 12.8219 2.575 12.8219Z" />
-        <path d="M1.93438 12.1828C1.93438 12.5359 2.22031 12.8234 2.575 12.8234H5.92344C6.27656 12.8234 6.56406 12.5375 6.56406 12.1828C6.56406 11.8297 6.27813 11.5422 5.92344 11.5422H2.575C2.22188 11.5422 1.93438 11.8297 1.93438 12.1828Z" />
-        <path d="M13.6703 3.83594C13.6687 3.83437 13.6656 3.83281 13.6641 3.82969L10.8609 1.02656C10.4437 0.66406 9.80937 0.679685 9.4125 1.07812C9.41094 1.07969 9.40937 1.08281 9.40625 1.08437L2.11562 8.37344C1.86562 8.62344 1.86562 9.02812 2.11562 9.27812C2.36562 9.52812 2.77031 9.52812 3.02031 9.27812L10.1609 2.1375L12.6094 4.58437L5.47031 11.7234C5.22031 11.9734 5.22031 12.3781 5.47031 12.6281C5.72031 12.8781 6.125 12.8781 6.375 12.6281L13.7406 5.2625C14.0828 4.84531 14.0594 4.22656 13.6703 3.83594Z" />
-      </g>
-      <defs>
-        <clipPath id="clip0_3_85">
-          <rect width="16" height="16" fill="white" />
-        </clipPath>
-      </defs>
+      <path d="M12.6156 4.58593L12.1641 5.0375L12.3438 4.85781C12.4875 4.69687 12.4813 4.45 12.3266 4.29531L12.6156 4.58593ZM10.1641 2.12968L10.6156 2.58125L10.4359 2.40156C10.275 2.25781 10.0281 2.26406 9.87344 2.41875L10.1641 2.12968ZM15.0047 14.4625C15.0047 14.1094 14.7188 13.8219 14.3641 13.8219H1.56406C1.21094 13.8219 0.923439 14.1078 0.923439 14.4625C0.923439 14.8156 1.20938 15.1031 1.56406 15.1031H14.3656C14.7188 15.1016 15.0047 14.8156 15.0047 14.4625ZM2.575 12.8219C2.92813 12.8219 3.21563 12.5359 3.21563 12.1812V8.82343C3.21563 8.47031 2.92969 8.18281 2.575 8.18281C2.22188 8.18281 1.93438 8.46875 1.93438 8.82343V12.1812C1.93438 12.5359 2.22188 12.8219 2.575 12.8219Z" />
+      <path d="M1.93438 12.1828C1.93438 12.5359 2.22031 12.8234 2.575 12.8234H5.92344C6.27656 12.8234 6.56406 12.5375 6.56406 12.1828C6.56406 11.8297 6.27813 11.5422 5.92344 11.5422H2.575C2.22188 11.5422 1.93438 11.8297 1.93438 12.1828Z" />
+      <path d="M13.6703 3.83594C13.6687 3.83437 13.6656 3.83281 13.6641 3.82969L10.8609 1.02656C10.4437 0.66406 9.80937 0.679685 9.4125 1.07812C9.41094 1.07969 9.40937 1.08281 9.40625 1.08437L2.11562 8.37344C1.86562 8.62344 1.86562 9.02812 2.11562 9.27812C2.36562 9.52812 2.77031 9.52812 3.02031 9.27812L10.1609 2.1375L12.6094 4.58437L5.47031 11.7234C5.22031 11.9734 5.22031 12.3781 5.47031 12.6281C5.72031 12.8781 6.125 12.8781 6.375 12.6281L13.7406 5.2625C14.0828 4.84531 14.0594 4.22656 13.6703 3.83594Z" />
     </svg>
   );
 }
diff --git a/packages/renderer/src/components/ui/button.tsx b/packages/renderer/src/components/ui/button.tsx
@@ -22,7 +22,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-[30px] px-3 py-1",
-        sm: "h-[20px] rounded-md px-1",
+        sm: "h-[20px] rounded-md px-1.5 text-xs",
         lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",
       },

diff --git a/packages/renderer/src/pages/SourceExtract/components/BrowserViewPanel.tsx b/packages/renderer/src/pages/SourceExtract/components/BrowserViewPanel.tsx
@@ -1,24 +1,53 @@
-import { DeleteIcon } from "@/assets/svg";
-import { IconButton } from "@/components/IconButton";
 import { Button } from "@/components/ui/button";
 import useElectron from "@/hooks/useElectron";
 import {
   browserStoreSelector,
   setBrowserSelector,
+  SourceData,
   useBrowserStore,
 } from "@/store/browser";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useShallow } from "zustand/react/shallow";
+import { Button as AntdButton, App } from "antd";
+import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
+import { useMemoizedFn } from "ahooks";
 
 export function BrowserViewPanel() {
   const store = useBrowserStore(useShallow(browserStoreSelector));
-  const { deleteSource } = useBrowserStore(useShallow(setBrowserSelector));
+  const { deleteSource, clearSources } = useBrowserStore(
+    useShallow(setBrowserSelector),
+  );
   const { t } = useTranslation();
   const { showDownloadDialog } = useElectron();
+  const { downloadNow } = useElectron();
+  const { message } = App.useApp();
+
+  const handleClear = useMemoizedFn(() => {
+    clearSources();
+  });
+
+  const handleDownloadNow = useMemoizedFn(async (item: SourceData) => {
+    try {
+      const downloadItem: Omit<DownloadItem, "id"> = {
+        url: item.url,
+        name: item.name,
+        headers: item.headers,
+        type: item.type,
+      };
+      await downloadNow(downloadItem);
+    } catch (e) {
+      message.error((e as any).message);
+    }
+  });
 
   return (
     <div className="flex h-full flex-col gap-3 overflow-y-auto bg-white p-3 dark:bg-[#1F2024]">
+      <div>
+        <AntdButton size="small" danger onClick={handleClear}>
+          清空
+        </AntdButton>
+      </div>
       {store.sources.map((item, index) => {
         return (
           <div
@@ -38,14 +67,25 @@ export function BrowserViewPanel() {
               {item.url}
             </span>
             <div className="flex flex-row items-center justify-between gap-3">
-              <div>
-                <IconButton
-                  icon={<DeleteIcon />}
+              <div className="flex flex-row items-center gap-2">
+                <AntdButton
+                  icon={<DeleteOutlined />}
+                  type="text"
+                  size="small"
                   onClick={() => deleteSource(item.url)}
+                  title={t("delete")}
+                  danger
+                />
+                <AntdButton
+                  icon={<EditOutlined />}
+                  type="text"
+                  size="small"
+                  title={t("edit")}
+                  onClick={() => showDownloadDialog([item])}
                 />
               </div>
-              <Button size="sm" onClick={() => showDownloadDialog([item])}>
-                {t("addToDownloadList")}
+              <Button size="sm" onClick={() => handleDownloadNow(item)}>
+                {t("downloadNow")}
               </Button>
             </div>
           </div>

diff --git a/packages/renderer/src/store/browser.ts b/packages/renderer/src/store/browser.ts
@@ -4,6 +4,7 @@ import { convertPlainObject } from "@/utils";
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
 
+// eslint-disable-next-line react-hooks/rules-of-hooks
 const { setSharedState } = useElectron();
 
 export enum PageMode {
@@ -42,6 +43,7 @@ type Actions = {
   addSource: (source: SourceData) => void;
   deleteSource: (url: string) => void;
   setSources: (sources: SourceData[]) => void;
+  clearSources: () => void;
 };
 
 export const useBrowserStore = create<BrowserStore & Actions>()(
@@ -68,6 +70,10 @@ export const useBrowserStore = create<BrowserStore & Actions>()(
       set((state) => {
         state.sources = sources;
       }),
+    clearSources: () =>
+      set((state) => {
+        state.sources = [];
+      }),
   })),
 );
 
@@ -89,5 +95,6 @@ export const setBrowserSelector = (state: BrowserStore & Actions) => {
     addSource: state.addSource,
     deleteSource: state.deleteSource,
     setSources: state.setSources,
+    clearSources: state.clearSources,
   };
 };