source extract.

2 years ago · b2a4b83c2a
parent 8b05c6c506
commit b2a4b83c2a
9 changed files with 73 additions and 56 deletions
--- a/packages/main/src/controller/HomeController.ts
+++ b/packages/main/src/controller/HomeController.ts
@ -3,7 +3,7 @@ import { Favorite } from "entity/Favorite";
 import { db, workspace } from "helper/variables";
 import { inject, injectable } from "inversify";
 import { IndexData } from "main";
-import { handle, on } from "../helper/decorator";
+import { handle } from "../helper/decorator";
 import {
  StoreService,
  LoggerService,
--- a/packages/main/src/services/MainWindowServiceImpl.ts
+++ b/packages/main/src/services/MainWindowServiceImpl.ts
@ -9,7 +9,6 @@ import { inject, injectable } from "inversify";
 import { resolve } from "path";
 import { TYPES } from "../types";
 import { LoggerService, MainWindowService } from "../interfaces";
-import { PERSIST_WEBVIEW } from "helper/variables";

@injectable()
 export default class MainWindowServiceImpl
@ -32,8 +31,6 @@ export default class MainWindowServiceImpl
      },
    };
    super(options);
-
-    this.beforeSendHandlerListener = this.beforeSendHandlerListener.bind(this);
  }

  init(): void {
@ -46,22 +43,4 @@ export default class MainWindowServiceImpl
      this.show();
    });
  }
-
-  async beforeSendHandlerListener(
-    details: OnBeforeSendHeadersListenerDetails,
-    callback: (beforeSendResponse: Electron.BeforeSendResponse) => void
-  ): Promise<void> {
-    const m3u8Reg = /\.m3u8$/;
-    let cancel = false;
-    const myURL = new URL(details.url);
-    if (m3u8Reg.test(myURL.pathname)) {
-      this.logger.info("在窗口中捕获 m3u8 链接: ", details.url);
-      // TODO: 这里处理请求
-      cancel = true;
-    }
-    callback({
-      cancel,
-      requestHeaders: details.requestHeaders,
-    });
-  }
 }
--- a/packages/main/src/services/WebviewServiceImpl.ts
+++ b/packages/main/src/services/WebviewServiceImpl.ts
@ -43,16 +43,15 @@ export default class WebviewServiceImpl implements WebviewService {
    callback: (beforeSendResponse: Electron.BeforeSendResponse) => void
  ): Promise<void> {
    const m3u8Reg = /\.m3u8$/;
-    let cancel = false;
-    const myURL = new URL(details.url);
-    if (m3u8Reg.test(myURL.pathname)) {
-      this.logger.info("在窗口中捕获 m3u8 链接: ", details.url);
-      cancel = true;
+    const detailsUrl = new URL(details.url);
+    if (m3u8Reg.test(detailsUrl.pathname)) {
+      this.logger.info("在窗口中捕获 m3u8 链接: ", detailsUrl.origin);
+      this.mainWindow.webContents.send(
+        "webview-link-message",
+        detailsUrl.toString()
+      );
    }
-    callback({
-      cancel,
-      requestHeaders: details.requestHeaders,
-    });
+    callback({});
  }

  async init(): Promise<void> {
--- a/packages/renderer/index.html
+++ b/packages/renderer/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name=referrer content=no-referrer>
-    <title>index.html</title>
+    <title>media downloader</title>
  </head>
  <body>
    <div id="root"></div>
--- a/packages/renderer/src/App.scss
+++ b/packages/renderer/src/App.scss
@ -1,14 +1,19 @@
 .container {
  height: 100vh;
  width: 100vw;
+  overflow: hidden;
  .container-header {
-    background-color: #7dbcea;
-  }
-  .container-sider {
-  }
-  .container-inner {
+    background-color: rgb(64, 144, 247);
+    color: #fff;
+    font-size: 20px;
+    font-weight: bold;
+    padding: 0 20px;
  }
  .container-footer {
-    background-color: #7dbcea;
+    padding: 5px;
+    background: #fff;
+    overflow: hidden;
+    text-align: right;
+    border-top: #efefef solid 1px;
  }
 }
--- a/packages/renderer/src/App.tsx
+++ b/packages/renderer/src/App.tsx
@ -3,10 +3,8 @@ import { Link, Outlet } from "react-router-dom";
 import { Layout, Menu, MenuProps } from "antd";
 import "./App.scss";
 import {
-  AppstoreOutlined,
-  CalendarOutlined,
-  LinkOutlined,
-  MailOutlined,
+  DownloadOutlined,
+  ProfileOutlined,
  SettingOutlined,
 } from "@ant-design/icons";

@ -29,19 +27,19 @@ function getItem(
 }

 const items: MenuItem[] = [
-  getItem(<Link to="/">下载列表</Link>, "home", <MailOutlined />),
+  getItem(<Link to="/">下载列表</Link>, "home", <DownloadOutlined />),
  getItem(
    <Link to="/source-extract">素材提取</Link>,
    "source",
-    <CalendarOutlined />
+    <ProfileOutlined />
  ),
-  getItem(<Link to="/settings">设置</Link>, "settings", <CalendarOutlined />),
+  getItem(<Link to="/settings">设置</Link>, "settings", <SettingOutlined />),
 ];

 const App: FC = () => {
  return (
    <Layout className="container">
-      <Header className="container-header">Header</Header>
+      <Header className="container-header">Media Downloader</Header>
      <Layout>
        <Sider className="container-sider" theme="light">
          <Menu
@ -56,7 +54,7 @@ const App: FC = () => {
          <Content className="container-inner">
            <Outlet />
          </Content>
-          <Footer className="container-footer">Footer</Footer>
+          <Footer className="container-footer">media-downloader</Footer>
        </Layout>
      </Layout>
    </Layout>
--- a/packages/renderer/src/nodes/HomePage/index.tsx
+++ b/packages/renderer/src/nodes/HomePage/index.tsx
@ -24,7 +24,6 @@ const HomePage: FC = () => {
          <li>{data?.platform}</li>
        </ul>
      </div>
-      <Button>按钮</Button>
    </PageContainer>
  );
 };
--- a/packages/renderer/src/nodes/SourceExtract/index.scss
+++ b/packages/renderer/src/nodes/SourceExtract/index.scss
@ -1,10 +1,13 @@
 .source-extract {
  .source-extract-inner {
+    padding: 0;
    display: flex;
    flex-direction: column;
+    .action-bar {
+      padding: 10px 5px;
+    }
    .source-extract-content {
      flex: 1;
-      margin-top: 15px;
      overflow: auto;
      .webview-container {
        height: 100%;
@ -15,7 +18,13 @@
          width: 100%;
        }
        .webview-sider {
-          width: 150px;
+          width: 200px;
+          padding: 0 10px 0 5px;
+          .list-item {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
        }
      }
      .list-container {
--- a/packages/renderer/src/nodes/SourceExtract/index.tsx
+++ b/packages/renderer/src/nodes/SourceExtract/index.tsx
@ -44,7 +44,7 @@ const SourceExtract: React.FC = () => {
  } = useElectron();
  const [url, setUrl] = useState<string>("");
  const [inputVal, setInputVal] = useState("");
-  const [sourceList, setSourceList] = useState([]);
+  const [sourceList, setSourceList] = useState<string[]>([]);
  const { data, run } = useRequest(getFavorites);
  const webviewRef = useRef<HTMLDivElement>(null);
  const resizeObserver = useRef<ResizeObserver>();
@ -135,6 +135,11 @@ const SourceExtract: React.FC = () => {
    }
  };

+  const receiveLinkMessage = (e: any, url: string) => {
+    console.log(url);
+    setSourceList([...sourceList, url]);
+  };
+
  useEffect(() => {
    console.log("webviewRef.current", webviewRef.current);

@ -159,17 +164,27 @@ const SourceExtract: React.FC = () => {

      resizeObserver.current.observe(webviewRef.current);
    }
-    rendererEvent("webview-dom-ready", onDomReady);
-    const prevTitle = document.title;

    return () => {
      resizeObserver.current?.disconnect();
      setWebviewBounds({ x: 0, y: 0, height: 0, width: 0 });
-      removeEventListener("webview-dom-ready", onDomReady);
-      document.title = prevTitle;
    };
  }, [!!url]);

+  useEffect(() => {
+    const prevTitle = document.title;
+
+    rendererEvent("webview-link-message", receiveLinkMessage);
+    rendererEvent("webview-dom-ready", onDomReady);
+
+    return () => {
+      document.title = prevTitle;
+
+      removeEventListener("webview-link-message", receiveLinkMessage);
+      removeEventListener("webview-dom-ready", onDomReady);
+    };
+  }, []);
+
  return (
    <PageContainer className="source-extract">
      <Space.Compact className="action-bar" block>
@ -203,7 +218,20 @@ const SourceExtract: React.FC = () => {
        {url ? (
          <div className="webview-container">
            <div className="webview-inner" ref={webviewRef} />
-            {sourceList.length > 0 && <div className="webview-sider">123</div>}
+            {sourceList.length > 0 && (
+              <div className="webview-sider">
+                <List
+                  size="small"
+                  bordered
+                  dataSource={sourceList}
+                  renderItem={(item) => (
+                    <List.Item>
+                      <div className="list-item">{item}</div>
+                    </List.Item>
+                  )}
+                />
+              </div>
+            )}
          </div>
        ) : (
          <List