feat: video list.

caorushizi · Jan 12, 2024 · 48158eb · 48158eb
1 parent 2d4e9d7
commit 48158eb
Show file tree

Hide file tree

Showing 16 changed files with 2,983 additions and 3,056 deletions.
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
   "license": "MIT",
   "pnpm": {
     "patchedDependencies": {
-      "@cliqz/[email protected].6": "patches/@[email protected].6.patch"
+      "@cliqz/[email protected].15": "patches/@[email protected].15.patch"
     }
   },
   "devDependencies": {

diff --git a/packages/main/src/controller/DownloadController.ts b/packages/main/src/controller/DownloadController.ts
@@ -14,6 +14,7 @@ import MainWindow from "../windows/MainWindow";
 import StoreService from "../services/StoreService";
 import DownloadService from "../services/DownloadService";
 import VideoRepository from "../repository/VideoRepository";
+import { existsSync } from "fs-extra";
 
 @injectable()
 export default class DownloadController implements Controller {
@@ -61,7 +62,22 @@ export default class DownloadController implements Controller {
 
   @handle("get-download-items")
   async getDownloadItems(e: IpcMainEvent, pagination: DownloadItemPagination) {
-    return await this.videoRepository.findVideos(pagination);
+    const localDir = this.storeService.get("local");
+    const videos = await this.videoRepository.findVideos(pagination);
+    const newVideos = videos.list.map((video) => {
+      if (video.status === DownloadStatus.Success) {
+        return {
+          ...video,
+          exist: existsSync(`${localDir}/${video.name}`),
+        };
+      }
+      return video;
+    });
+
+    return {
+      total: videos.total,
+      list: newVideos,
+    };
   }
 
   @handle("start-download")

diff --git a/packages/renderer/package.json b/packages/renderer/package.json
@@ -14,7 +14,7 @@
     "@ant-design/pro-components": "^2.6.2",
     "@reduxjs/toolkit": "^1.9.5",
     "ahooks": "^3.7.7",
-    "antd": "^5.6.2",
+    "antd": "^5.12.8",
     "axios": "^1.4.0",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.8",

diff --git a/packages/renderer/src/App.scss b/packages/renderer/src/App.scss
@@ -1,24 +1,34 @@
-.container {
+html,
+body {
   height: 100vh;
   width: 100vw;
-  overflow: hidden;
-  .container-sider {
-    .like-item {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+@mixin scrollbar() {
+  &::-webkit-scrollbar {
+    height: 8px;
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
   }
-  .container-footer {
-    padding: 5px;
-    background: #fff;
-    text-align: right;
-    border-top: #f0f0f0 solid 1px;
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.15);
   }
   @media (prefers-color-scheme: dark) {
-    .container-footer {
-      background: #141414;
-      border-top: #313131 solid 1px;
+    &::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.15);
     }
   }
 }
+
+* {
+  @include scrollbar();
+}
diff --git a/packages/renderer/src/App.tsx b/packages/renderer/src/App.tsx
@@ -1,144 +1,94 @@
-import React, { FC, useState } from "react";
-import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
-import { Badge, Button, Layout, Menu, MenuProps } from "antd";
+import { ConfigProvider, theme } from "antd";
+import "antd/dist/reset.css";
+import React, { FC, useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import AppLayout from "./layout/App";
+import HomePage, { DownloadFilter } from "./nodes/HomePage";
+import SettingPage from "./nodes/SettingPage";
+import PlayerPage from "./nodes/PlayerPage";
+import SourceExtract from "./nodes/SourceExtract";
+import { setAppStore, increase } from "./store";
+import "dayjs/locale/zh-cn";
+import zhCN from "antd/locale/zh_CN";
 import "./App.scss";
-import {
-  DownloadOutlined,
-  ExportOutlined,
-  ProfileOutlined,
-  QuestionCircleOutlined,
-  SettingOutlined,
-} from "@ant-design/icons";
 import useElectron from "./hooks/electron";
-import { useDispatch, useSelector } from "react-redux";
-import { selectAppStore, setAppStore, clearCount, selectCount } from "./store";
-import { useAsyncEffect } from "ahooks";
-import { tdApp } from "./utils";
 
-const { Footer, Sider, Content } = Layout;
-
-type MenuItem = Required<MenuProps>["items"][number];
+function getAlgorithm(appTheme: "dark" | "light") {
+  return appTheme === "dark" ? theme.darkAlgorithm : theme.defaultAlgorithm;
+}
 
 const App: FC = () => {
-  const {
-    getAppStore: ipcGetAppStore,
-    openUrl,
-    setAppStore: ipcSetAppStore,
-    showBrowserWindow,
-  } = useElectron();
-  const location = useLocation();
-  const navigate = useNavigate();
   const dispatch = useDispatch();
-  const [showExport, setShowExport] = useState(false);
-  const count = useSelector(selectCount);
-  const appStore = useSelector(selectAppStore);
-
-  const items: MenuItem[] = [
-    {
-      label: (
-        <Link
-          to="/"
-          className="like-item"
-          onClick={() => {
-            dispatch(clearCount());
-          }}
-        >
-          <DownloadOutlined />
-          <span>下载列表</span>
-          {count > 0 && (
-            <Badge count={count} offset={[5, 1]} size="small"></Badge>
-          )}
-        </Link>
-      ),
-      key: "home",
-    },
-    {
-      label: (
-        <Link to="/source-extract" className="like-item">
-          <ProfileOutlined />
-          <span>素材提取</span>
-          {showExport && (
-            <Button
-              title="在新窗口中打开"
-              type="text"
-              style={{ marginLeft: "auto" }}
-              icon={<ExportOutlined />}
-              onClick={async (e) => {
-                e.stopPropagation();
-                e.preventDefault();
+  const [appTheme, setAppTheme] = React.useState<"dark" | "light">("light");
+  const { addIpcListener, removeIpcListener } = useElectron();
 
-                dispatch(setAppStore({ openInNewWindow: true }));
-                if (location.pathname === "/source-extract") {
-                  navigate("/");
-                }
-                // FIXME: 有可能 webview 还没有完全隐藏
-                await ipcSetAppStore("openInNewWindow", true);
-                await showBrowserWindow();
-              }}
-            />
-          )}
-        </Link>
-      ),
-      key: "source",
-      onMouseEnter: () => {
-        setShowExport(true);
-      },
-      onMouseLeave: () => {
-        setShowExport(false);
-      },
-    },
-    {
-      label: (
-        <Link to="/settings" className="like-item">
-          <SettingOutlined />
-          <span>设置</span>
-        </Link>
-      ),
-      key: "settings",
-    },
-  ];
+  const themeChange = (event: MediaQueryListEvent) => {
+    if (event.matches) {
+      setAppTheme("dark");
+    } else {
+      setAppTheme("light");
+    }
+  };
 
-  const finalItems = items.filter((item) =>
-    appStore.openInNewWindow ? item?.key !== "source" : true
-  );
+  // 监听store变化
+  const onAppStoreChange = (event: any, store: AppStore) => {
+    dispatch(setAppStore(store));
+  };
 
-  const openHelpUrl = () => {
-    tdApp.openHelpPage();
-    const url = "https://downloader.caorushizi.cn/guides.html?form=client";
-    openUrl(url);
+  const onReceiveDownloadItem = () => {
+    console.log("onReceiveDownloadItem");
+    dispatch(increase());
   };
 
-  useAsyncEffect(async () => {
-    const store = await ipcGetAppStore();
-    dispatch(setAppStore(store));
+  useEffect(() => {
+    addIpcListener("store-change", onAppStoreChange);
+    addIpcListener("download-item-notifier", onReceiveDownloadItem);
+
+    return () => {
+      removeIpcListener("store-change", onAppStoreChange);
+      removeIpcListener("download-item-notifier", onReceiveDownloadItem);
+    };
+  }, []);
+
+  useEffect(() => {
+    const isDarkTheme = matchMedia("(prefers-color-scheme: dark)");
+    isDarkTheme.addEventListener("change", themeChange);
+
+    if (isDarkTheme.matches) {
+      setAppTheme("dark");
+    } else {
+      setAppTheme("light");
+    }
+
+    return () => {
+      isDarkTheme.removeEventListener("change", themeChange);
+    };
   }, []);
 
   return (
-    <Layout className="container">
-      <Sider className="container-sider" theme="light">
-        <Menu
-          style={{ height: "100%" }}
-          defaultSelectedKeys={["home"]}
-          mode="vertical"
-          theme="light"
-          items={finalItems}
-        />
-      </Sider>
-      <Layout>
-        <Content className="container-inner">
-          <Outlet />
-        </Content>
-        <Footer className="container-footer">
-          <Button
-            type={"link"}
-            onClick={openHelpUrl}
-            icon={<QuestionCircleOutlined />}
-          >
-            使用帮助
-          </Button>
-        </Footer>
-      </Layout>
-    </Layout>
+    <ConfigProvider
+      locale={zhCN}
+      componentSize="small"
+      theme={{ algorithm: getAlgorithm(appTheme) }}
+    >
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<AppLayout />}>
+            <Route index element={<HomePage />} />
+            <Route
+              path="done"
+              element={<HomePage filter={DownloadFilter.done} />}
+            />
+            <Route path="source" element={<SourceExtract />} />
+            <Route path="settings" element={<SettingPage />} />
+            <Route path="*" element={<div>404</div>} />
+          </Route>
+          <Route path="/browser" element={<SourceExtract page={true} />} />
+          <Route path="/player" element={<PlayerPage />} />
+        </Routes>
+      </BrowserRouter>
+    </ConfigProvider>
   );
 };
 

diff --git a/packages/renderer/src/components/DownloadForm/index.tsx b/packages/renderer/src/components/DownloadForm/index.tsx
@@ -76,8 +76,10 @@ const DownloadFrom: FC<DownloadFormProps> = ({
       }}
       modalProps={{
         destroyOnClose: true,
-        bodyStyle: {
-          paddingTop: 5,
+        styles: {
+          body: {
+            paddingTop: 5,
+          },
         },
       }}
       submitTimeout={2000}

diff --git a/packages/renderer/src/index.scss b/packages/renderer/src/index.scss
diff --git a/packages/renderer/src/layout/App/index.scss b/packages/renderer/src/layout/App/index.scss
@@ -0,0 +1,24 @@
+.container {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+  .container-sider {
+    .like-item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+  .container-footer {
+    padding: 5px;
+    background: #fff;
+    text-align: right;
+    border-top: #f0f0f0 solid 1px;
+  }
+  @media (prefers-color-scheme: dark) {
+    .container-footer {
+      background: #141414;
+      border-top: #313131 solid 1px;
+    }
+  }
+}