From b2a4b83c2ab4098274c73159dc78c4ff2a0ccc9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A3=AB=E5=AD=90=E2=98=80=EF=B8=8F?= <84996057@qq.com> Date: Wed, 22 Mar 2023 00:11:15 +0800 Subject: [PATCH] source extract. --- .../main/src/controller/HomeController.ts | 2 +- .../src/services/MainWindowServiceImpl.ts | 21 ---------- .../main/src/services/WebviewServiceImpl.ts | 17 ++++---- packages/renderer/index.html | 2 +- packages/renderer/src/App.scss | 17 +++++--- packages/renderer/src/App.tsx | 16 ++++---- .../renderer/src/nodes/HomePage/index.tsx | 1 - .../src/nodes/SourceExtract/index.scss | 13 +++++- .../src/nodes/SourceExtract/index.tsx | 40 ++++++++++++++++--- 9 files changed, 73 insertions(+), 56 deletions(-) diff --git a/packages/main/src/controller/HomeController.ts b/packages/main/src/controller/HomeController.ts index 3a6c933..7058dda 100644 --- 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, diff --git a/packages/main/src/services/MainWindowServiceImpl.ts b/packages/main/src/services/MainWindowServiceImpl.ts index 0f76e3b..15481c6 100644 --- 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 { - 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, - }); - } } diff --git a/packages/main/src/services/WebviewServiceImpl.ts b/packages/main/src/services/WebviewServiceImpl.ts index 30c670d..3e73b11 100644 --- 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 { 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 { diff --git a/packages/renderer/index.html b/packages/renderer/index.html index dbd0dbd..4ccedb6 100644 --- a/packages/renderer/index.html +++ b/packages/renderer/index.html @@ -4,7 +4,7 @@ - index.html + media downloader
diff --git a/packages/renderer/src/App.scss b/packages/renderer/src/App.scss index 2e1677e..a0eb9cc 100644 --- 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; } } diff --git a/packages/renderer/src/App.tsx b/packages/renderer/src/App.tsx index a1b39bf..b60fe87 100644 --- 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(下载列表, "home", ), + getItem(下载列表, "home", ), getItem( 素材提取, "source", - + ), - getItem(设置, "settings", ), + getItem(设置, "settings", ), ]; const App: FC = () => { return ( -
Header
+
Media Downloader
{ -
Footer
+
media-downloader
diff --git a/packages/renderer/src/nodes/HomePage/index.tsx b/packages/renderer/src/nodes/HomePage/index.tsx index 228e8af..7d551ee 100644 --- a/packages/renderer/src/nodes/HomePage/index.tsx +++ b/packages/renderer/src/nodes/HomePage/index.tsx @@ -24,7 +24,6 @@ const HomePage: FC = () => {
  • {data?.platform}
    • - ); }; diff --git a/packages/renderer/src/nodes/SourceExtract/index.scss b/packages/renderer/src/nodes/SourceExtract/index.scss index 4eb1760..c842685 100644 --- 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 { diff --git a/packages/renderer/src/nodes/SourceExtract/index.tsx b/packages/renderer/src/nodes/SourceExtract/index.tsx index 708225a..8f357a8 100644 --- 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(""); const [inputVal, setInputVal] = useState(""); - const [sourceList, setSourceList] = useState([]); + const [sourceList, setSourceList] = useState([]); const { data, run } = useRequest(getFavorites); const webviewRef = useRef(null); const resizeObserver = useRef(); @@ -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 ( @@ -203,7 +218,20 @@ const SourceExtract: React.FC = () => { {url ? (
    - {sourceList.length > 0 &&
    123
    } + {sourceList.length > 0 && ( +
    + ( + +
    {item}
    +     + )} + /> +
    + )}
    ) : (