From 57a7f3745de5a816dca875b509b00d91d4e966a6 Mon Sep 17 00:00:00 2001 From: lecepin <383810086@qq.com> Date: Sat, 21 May 2022 22:47:51 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=A8=E9=83=A8=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- electron/index.js | 5 +- electron/ipc.js | 42 ++++++++++-- electron/proxyServer.js | 56 ++++++++++------ electron/utils.js | 36 ++++++++++- package.json | 4 ++ src/App.jsx | 134 ++++++++++++++++++++++++++++++++++++-- src/App.less | 50 +++++++++++++++ src/fsm.js | 139 ++++++++++++++++++++++++++++++++++++---- src/index.js | 2 + 9 files changed, 422 insertions(+), 46 deletions(-) diff --git a/electron/index.js b/electron/index.js index 6d0c282..7f2bbb8 100644 --- a/electron/index.js +++ b/electron/index.js @@ -1,9 +1,11 @@ import { app, BrowserWindow, Menu } from 'electron'; import CONFIG from './const'; import { checkUpdate } from './utils'; -import initIPC from './ipc'; +import initIPC, { setWin } from './ipc'; app.commandLine.appendSwitch('--no-proxy-server'); +process.on('uncaughtException', () => {}); +process.on('unhandledRejection', () => {}); function createWindow() { Menu.setApplicationMenu(null); @@ -24,6 +26,7 @@ function createWindow() { }, }); + setWin(mainWindow); mainWindow.loadURL(CONFIG.APP_START_URL); CONFIG.IS_DEV && mainWindow.webContents.openDevTools(); } diff --git a/electron/ipc.js b/electron/ipc.js index 5312c51..99a7616 100644 --- a/electron/ipc.js +++ b/electron/ipc.js @@ -1,7 +1,11 @@ -import { ipcMain } from 'electron'; +import { ipcMain, dialog } from 'electron'; import log from 'electron-log'; +import { throttle } from 'lodash'; import { startServer } from './proxyServer'; import { installCert, checkCertInstalled } from './cert'; +import { downloadFile } from './utils'; + +let win; export default function initIPC() { ipcMain.handle('invoke_初始化信息', async (event, arg) => { @@ -13,14 +17,42 @@ export default function initIPC() { }); ipcMain.handle('invoke_启动服务', async (event, arg) => { - console.log('invoke_启动服务'); return startServer({ - interceptCallback: async req => { - console.log('=========> intercept', req.url); + interceptCallback: phase => async (req, res) => { + if (phase === 'response' && res?._data?.headers?.['content-type'] == 'video/mp4') { + win?.webContents?.send?.('VIDEO_CAPTURE', { + url: req.fullUrl(), + size: res?._data?.headers?.['content-length'] ?? 0, + }); + } }, setProxyErrorCallback: err => { - console.log({ err }); + console.log('开启代理失败', err); }, }); }); + + ipcMain.handle('invoke_选择下载位置', async (event, arg) => { + const result = dialog.showOpenDialogSync({ title: '保存', properties: ['openDirectory'] }); + + if (!result?.[0]) { + throw '取消'; + } + + return result?.[0]; + }); + + ipcMain.handle('invoke_下载视频', async (event, { url, savePath }) => { + return downloadFile( + url, + `${savePath}/${Date.now()}.mp4`, + throttle(value => win?.webContents?.send?.('e_进度变化', value), 1000), + ).catch(err => { + console; + }); + }); +} + +export function setWin(w) { + win = w; } diff --git a/electron/proxyServer.js b/electron/proxyServer.js index 24ab503..4ff39dd 100644 --- a/electron/proxyServer.js +++ b/electron/proxyServer.js @@ -5,34 +5,50 @@ import { app } from 'electron'; import CONFIG from './const'; import { setProxy, closeProxy } from './setProxy'; -export async function startServer({ interceptCallback = f => f, setProxyErrorCallback = f => f }) { +export async function startServer({ + interceptCallback = f => f => f, + setProxyErrorCallback = f => f, +}) { const port = await getPort(); - const proxy = hoxy - .createServer({ - certAuthority: { - key: fs.readFileSync(CONFIG.CERT_PRIVATE_PATH), - cert: fs.readFileSync(CONFIG.CERT_PUBLIC_PATH), - }, - }) - .listen(port, () => { - setProxy('127.0.0.1', port).catch(setProxyErrorCallback); - }) - .on('error', e => { - console.log('proxy lib error', e); - }); - proxy.intercept( - { - phase: 'request', - }, - interceptCallback, - ); + return new Promise(async (resolve, reject) => { + const proxy = hoxy + .createServer({ + certAuthority: { + key: fs.readFileSync(CONFIG.CERT_PRIVATE_PATH), + cert: fs.readFileSync(CONFIG.CERT_PUBLIC_PATH), + }, + }) + .listen(port, () => { + setProxy('127.0.0.1', port) + .then(() => resolve()) + .catch(() => { + setProxyErrorCallback(data); + reject('设置代理失败'); + }); + }); + + proxy.intercept( + { + phase: 'request', + }, + interceptCallback('request'), + ); + + proxy.intercept( + { + phase: 'response', + }, + interceptCallback('response'), + ); + }); } app.on('before-quit', async e => { e.preventDefault(); try { await closeProxy(); + console.log('close proxy success'); } catch (error) {} app.exit(); diff --git a/electron/utils.js b/electron/utils.js index 61e9648..d900c77 100644 --- a/electron/utils.js +++ b/electron/utils.js @@ -1,6 +1,7 @@ import { get } from 'axios'; -const { app, dialog, shell } = require('electron'); +import { app, dialog, shell } from 'electron'; import semver from 'semver'; +import fs from 'fs'; // packageUrl 需要包含 { "version": "1.0.0" } 结构 function checkUpdate( @@ -27,4 +28,35 @@ function checkUpdate( .catch(err => {}); } -export { checkUpdate }; +function downloadFile(url, fullFileName, progressCallback) { + return get(url, { + responseType: 'stream', + headers: { + 'User-Agent': + 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36', + }, + }).then(({ data, headers }) => { + let currentLen = 0; + const totalLen = headers['content-length']; + + return new Promise((resolve, reject) => { + data.on('data', ({ length }) => { + currentLen += length; + progressCallback?.(currentLen / totalLen); + }); + + data.on('error', err => reject(err)); + + data.pipe( + fs.createWriteStream(fullFileName).on('finish', () => { + resolve({ + fullFileName, + totalLen, + }); + }), + ); + }); + }); +} + +export { checkUpdate, downloadFile }; diff --git a/package.json b/package.json index 18de558..e832325 100644 --- a/package.json +++ b/package.json @@ -48,13 +48,17 @@ "webpack-cli": "^4.9.2" }, "dependencies": { + "@ant-design/icons": "^4.7.0", "@xstate/react": "^3.0.0", + "antd": "^4.20.5", "axios": "^0.27.2", "electron-is-dev": "^2.0.0", "electron-log": "^4.4.7", "get-port": "^6.1.2", "hoxy": "^3.3.1", + "lodash": "^4.17.21", "mkdirp": "^1.0.4", + "pretty-bytes": "^6.0.0", "react": "^18.1.0", "react-dom": "^18.1.0", "regedit": "5.0.0", diff --git a/src/App.jsx b/src/App.jsx index 3c1ece6..2e77ffc 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,20 +1,142 @@ import { useMachine } from '@xstate/react'; +import { Table, Button, Progress, Alert } from 'antd'; +import { shell } from 'electron'; +import { + DownloadOutlined, + PlaySquareOutlined, + ClearOutlined, + GithubOutlined, + EyeOutlined, + FormatPainterOutlined, + RedoOutlined, +} from '@ant-design/icons'; import fsm from './fsm'; import './App.less'; function App() { const [state, send] = useMachine(fsm); - const {} = state.context; + const { captureList, currentUrl, downloadProgress } = state.context; return (
{state.matches('检测初始化') ?
检测中……
: null} - {state.matches('初始化完成') ?
初始化完成
: null} + {state.matches('初始化完成') ? ( +
+ + + value, + ellipsis: true, + }, + { + title: '大小', + dataIndex: 'prettySize', + key: 'prettySize', + width: '100px', + render: value => value, + }, + { + title: '操作', + dataIndex: 'action', + key: 'action', + width: '200px', + render: (_, { url, fullFileName }) => ( +
+ {fullFileName ? ( + + ) : ( + + )} +     + +
+ ), + }, + ]} + pagination={{ position: ['none', 'none'] }} + >
+ + {state.matches('初始化完成.预览') ? ( +
{ + e.target == e.currentTarget && send('e_关闭'); + }} + > + +
+ ) : null} + + {state.matches('初始化完成.下载.下载中') ? ( +
+ +
+ ) : null} +
+ ) : null} {state.matches('未初始化') ? ( -
-

未初始化

- - +
+ + +    +
) : null}
diff --git a/src/App.less b/src/App.less index 748abd5..cfc8434 100644 --- a/src/App.less +++ b/src/App.less @@ -1,2 +1,52 @@ .App { + padding: 10px; + + &-uninit{ + text-align: center; + padding: 10px; + + & button{ + margin-top: 50px; + } + } + + &-inited { + &-clear { + margin-bottom: 10px; + } + + &-github { + float: right; + } + + &-preview { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.2); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999999999; + + & > video { + max-width: 90%; + max-height: 90%; + } + } + &-download { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.2); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999999999; + } + } } diff --git a/src/fsm.js b/src/fsm.js index 6afb906..5a59f95 100644 --- a/src/fsm.js +++ b/src/fsm.js @@ -1,10 +1,18 @@ -import { createMachine } from 'xstate'; +import { createMachine, actions } from 'xstate'; import { ipcRenderer } from 'electron'; +import prettyBytes from 'pretty-bytes'; +import { uniqBy } from 'lodash'; +import { message } from 'antd'; export default createMachine( { id: '微信视频号下载工具', - context: {}, + context: { + captureList: [], + currentUrl: '', + savePath: '', + downloadProgress: 0, + }, initial: '检测初始化', states: { 检测初始化: { @@ -54,14 +62,22 @@ export default createMachine( e_视频捕获: { actions: 'action_视频捕获', }, + e_开启服务失败: { + target: '开启服务失败', + }, + e_清空捕获记录: { + actions: 'action_清空捕获记录', + }, }, states: { 空闲: { on: { e_下载: { + actions: 'action_设置当前地址', target: '下载', }, e_预览: { + actions: 'action_设置当前地址', target: '预览', }, e_改变规则: { @@ -74,9 +90,12 @@ export default createMachine( states: { 选择位置: { on: { - e_确认位置: { target: '下载中' }, + e_确认位置: { actions: 'action_存储下载位置', target: '下载中' }, e_取消: { target: '#初始化完成.空闲' }, }, + invoke: { + src: 'invoke_选择下载位置', + }, }, 下载中: { on: { @@ -84,13 +103,17 @@ export default createMachine( actions: 'action_进度变化', }, e_下载完成: { - target: '下载完成', + target: '#初始化完成.空闲', + actions: 'action_下载完成', }, e_下载失败: { target: '#初始化完成.空闲', actions: 'action_下载失败', }, }, + invoke: { + src: 'invoke_下载视频', + }, }, 下载完成: { on: { @@ -111,6 +134,13 @@ export default createMachine( }, }, }, + 开启服务失败: { + on: { + e_重试: { + target: '初始化完成', + }, + }, + }, }, }, { @@ -131,17 +161,102 @@ export default createMachine( .finally(() => send('e_重新检测')); }, invoke_启动服务: (context, event) => send => { - ipcRenderer.invoke('invoke_启动服务'); - // .then(data => {}) - // .catch(data => {}); + const fnDealVideoCapture = (eName, { url, size }) => { + send({ type: 'e_视频捕获', url, size }); + }; + + ipcRenderer + .invoke('invoke_启动服务') + .then(() => { + ipcRenderer.on('VIDEO_CAPTURE', fnDealVideoCapture); + }) + .catch(() => { + send('e_开启服务失败'); + }); + + return () => { + ipcRenderer.removeListener('VIDEO_CAPTURE', fnDealVideoCapture); + }; }, + invoke_选择下载位置: (context, event) => send => { + ipcRenderer + .invoke('invoke_选择下载位置') + .then(data => { + send({ + type: 'e_确认位置', + data, + }); + }) + .catch(() => send('e_取消')); + }, + invoke_下载视频: + ({ currentUrl, savePath }) => + send => { + ipcRenderer + .invoke('invoke_下载视频', { + url: currentUrl, + savePath, + }) + .then(({ fullFileName }) => { + send({ type: 'e_下载完成', fullFileName, currentUrl }); + }) + .catch(() => { + send('e_下载失败'); + }); + + ipcRenderer.on('e_进度变化', (event, arg) => { + send({ + type: 'e_进度变化', + data: arg, + }); + }); + + return () => { + ipcRenderer.removeAllListeners('e_进度变化'); + }; + }, }, actions: { - action_视频捕获: (context, event) => {}, - action_改变规则: (context, event) => {}, - action_进度变化: (context, event) => {}, - action_下载失败: (context, event) => {}, - action_打开文件位置: (context, event) => {}, + action_视频捕获: actions.assign(({ captureList }, { size, url }) => { + captureList.push({ size, url, prettySize: prettyBytes(+size) }); + + return { + captureList: uniqBy(captureList, 'url'), + }; + }), + action_清空捕获记录: actions.assign(() => { + return { + captureList: [], + }; + }), + action_设置当前地址: actions.assign((_, { url }) => { + return { + currentUrl: url, + }; + }), + action_存储下载位置: actions.assign((_, { data }) => { + return { + savePath: data, + }; + }), + action_进度变化: actions.assign((_, { data }) => { + return { + downloadProgress: ~~(data * 100), + }; + }), + action_下载完成: actions.assign(({ captureList }, { fullFileName, currentUrl }) => { + return { + captureList: captureList.map(item => { + if (item.url === currentUrl) { + item.fullFileName = fullFileName; + } + return item; + }), + }; + }), + action_下载失败: actions.log(() => { + message.error('网络错误，请重试'); + }), }, }, ); diff --git a/src/index.js b/src/index.js index 65a8dbf..5a1ffb7 100644 --- a/src/index.js +++ b/src/index.js @@ -2,6 +2,8 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; +import 'antd/dist/antd.css'; + const root = ReactDOM.createRoot(document.getElementById('root')); root.render(