feat: 增加录全屏

027xiguapi · Dec 5, 2023 · afcce35 · afcce35
1 parent cc5129c
commit afcce35
Show file tree

Hide file tree

Showing 17 changed files with 728 additions and 325 deletions.
diff --git a/packages/desktop/CHANGELOG.md b/packages/desktop/CHANGELOG.md
@@ -1,5 +1,9 @@
 # @pear-rec/desktop
 
+## 1.3.1
+
+feat: 增加录全屏
+
 ## 1.3.0
 
 feat: 增加钉图功能

diff --git a/packages/desktop/electron-builder.json5 b/packages/desktop/electron-builder.json5
@@ -3,17 +3,22 @@
  */
 {
   appId: 'com.electron.pear',
-  productName: 'pear-rec',
   asar: false,
+  productName: 'pear-rec',
+  copyright: 'Copyright © 2023 ${author}',
   // extraResources: ['node_modules/sql.js', 'node_modules/typeorm'],
   directories: {
     output: 'release/${version}',
   },
   files: ['dist-electron', 'dist'],
   mac: {
-    artifactName: 'pear-rec.${ext}',
+    artifactName: '${productName}-Mac-${version}-Installer.${ext}',
     target: ['dmg', 'zip'],
   },
+  linux: {
+    target: ['AppImage'],
+    artifactName: '${productName}-Linux-${version}.${ext}',
+  },
   win: {
     icon: 'build/icons/win/icon.ico',
     target: [
@@ -22,7 +27,7 @@
         arch: ['x64'],
       },
     ],
-    artifactName: 'pear-rec.${ext}',
+    artifactName: '${productName}-Windows-${version}-Setup.${ext}',
     requestedExecutionLevel: 'requireAdministrator',
   },
   nsis: {

diff --git a/packages/desktop/electron/main/ipcMain.ts b/packages/desktop/electron/main/ipcMain.ts
@@ -12,6 +12,7 @@ import * as viewAudioWin from '../win/viewAudioWin';
 import * as settingWin from '../win/settingWin';
 import * as recordsWin from '../win/recordsWin';
 import * as pinImageWin from '../win/pinImageWin';
+import * as recorderFullScreenWin from '../win/recorderFullScreenWin';
 import * as utils from './utils';
 import { editConfig } from './config';
 
@@ -121,7 +122,6 @@ function initIpcMain() {
   // 录屏截图
   ipcMain.on('cs:open-win', () => {
     clipScreenWin.closeClipScreenWin();
-    mainWin.hideMainWin();
     clipScreenWin.openClipScreenWin();
   });
   ipcMain.on('cs:close-win', () => {
@@ -234,50 +234,6 @@ function initIpcMain() {
     viewVideoWin.setAlwaysOnTopViewVideoWin(isAlwaysOnTop);
   });
 
-  // 打开图片;
-  ipcMain.handle('vi:get-images', async (event, title) => {
-    let res = await dialog.showOpenDialog({
-      title: title,
-      buttonLabel: '按此打开文件',
-      // defaultPath: app.getAppPath("aaa"),
-      properties: ['multiSelections'],
-      filters: [
-        { name: '图片', extensions: ['jpg', 'jpeg', 'png', 'webp', 'svg'] },
-        // { name: "视频", extensions: ["mkv", "avi", "mp4"] },
-      ],
-    });
-    const images = res.filePaths.map((filePath, index) => {
-      return { src: `pearrec:///${filePath}`, key: index };
-    });
-    return images;
-  });
-  ipcMain.handle('vi:get-img', async (event, title) => {
-    // let res = await dialog.showOpenDialog({
-    //   title: title,
-    //   buttonLabel: '按此打开文件',
-    //   properties: ['openFile'],
-    //   filters: [{ name: '图片', extensions: ['jpg', 'jpeg', 'png', 'webp', 'svg'] }],
-    // });
-    // res.filePaths.map((filePath, index) => {
-    //   store.setHistoryImg(filePath);
-    // });
-    // const img = await store.getHistoryImg();
-    // return img;
-  });
-  // 打开视频
-  ipcMain.handle('vv:get-video', async (e) => {
-    // let res = await dialog.showOpenDialog({
-    //   title: '选择视频',
-    //   buttonLabel: '按此打开文件',
-    //   properties: ['openFile'],
-    //   filters: [{ name: '视频', extensions: ['mkv', 'avi', 'mp4', 'webm'] }],
-    // });
-    // res.filePaths.map((filePath, index) => {
-    //   store.setHistoryVideo(filePath);
-    // });
-    // const video = await store.getHistoryVideo();
-    // return video;
-  });
   // 录音;
   ipcMain.on('ra:open-win', () => {
     recorderAudioWin.closeRecorderAudioWin();
@@ -371,7 +327,6 @@ function initIpcMain() {
 
   // 钉图
   ipcMain.on('pi:open-win', (e, search) => {
-    console.log(111, search);
     pinImageWin.openPinImageWin(search);
   });
   ipcMain.on('pi:close-win', () => {
@@ -383,6 +338,15 @@ function initIpcMain() {
   ipcMain.on('pi:maximize-win', () => {
     pinImageWin.maximizePinImageWin();
   });
+
+  // 录全屏
+  ipcMain.on('rfs:open-win', () => {
+    recorderFullScreenWin.closeRecorderFullScreenWin();
+    recorderFullScreenWin.openRecorderFullScreenWin();
+  });
+  ipcMain.on('rfs:close-win', () => {
+    recorderFullScreenWin.closeRecorderFullScreenWin();
+  });
 }
 
 initIpcMain();
diff --git a/packages/desktop/electron/preload/electronAPI.ts b/packages/desktop/electron/preload/electronAPI.ts
@@ -79,7 +79,6 @@ contextBridge.exposeInMainWorld('electronAPI', {
   //vvWin
   sendVvOpenWin: (search?: string) => ipcRenderer.send('vv:open-win', search),
   invokeVvGetHistoryVideo: () => ipcRenderer.invoke('vv:get-historyVideo'),
-  invokeVvGetVideo: () => ipcRenderer.invoke('vv:get-video'),
   sendVvSetHistoryVideo: (img: string) => ipcRenderer.send('vv:set-historyVideo', img),
 
   //vaWin
@@ -103,4 +102,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
   sendPiCloseWin: () => ipcRenderer.send('pi:close-win'),
   sendPiMinimizeWin: () => ipcRenderer.send('pi:minimize-win'),
   sendPiMaximizeWin: () => ipcRenderer.send('pi:maximize-win'),
+
+  // rfs
+  sendRfsOpenWin: () => ipcRenderer.send('rfs:open-win'),
+  sendRfsCloseWin: () => ipcRenderer.send('rfs:close-win'),
 });
diff --git a/packages/desktop/electron/win/recorderFullScreenWin.ts b/packages/desktop/electron/win/recorderFullScreenWin.ts
@@ -0,0 +1,79 @@
+import { app, BrowserWindow, dialog, shell, screen, Rectangle } from 'electron';
+import { join, basename, dirname } from 'node:path';
+import { preload, url, DIST, ICON, WEB_URL, DIST_ELECTRON } from '../main/contract';
+
+const recorderFullScreenHtml = join(DIST, './recordeFullScreen.html');
+let recorderFullScreenWin: BrowserWindow | null = null;
+
+function createRecorderFullScreenWin(): BrowserWindow {
+  recorderFullScreenWin = new BrowserWindow({
+    title: 'pear-rec 录屏',
+    icon: ICON,
+    height: 40,
+    width: 365,
+    center: true,
+    transparent: true, // 使窗口透明
+    autoHideMenuBar: true, // 自动隐藏菜单栏
+    frame: false, // 无边框窗口
+    hasShadow: false, // 窗口是否有阴影
+    fullscreenable: false, // 窗口是否可以进入全屏状态
+    alwaysOnTop: true, // 窗口是否永远在别的窗口的上面
+    skipTaskbar: true,
+    webPreferences: {
+      preload,
+    },
+  });
+  recorderFullScreenWin?.setBounds({ y: 0 });
+  recorderFullScreenWin?.setResizable(false);
+  if (url) {
+    recorderFullScreenWin.loadURL(WEB_URL + `recorderFullScreen.html`);
+    // recorderFullScreenWin.webContents.openDevTools();
+  } else {
+    recorderFullScreenWin.loadFile(recorderFullScreenHtml);
+  }
+
+  return recorderFullScreenWin;
+}
+
+function closeRecorderFullScreenWin() {
+  recorderFullScreenWin?.isDestroyed() || recorderFullScreenWin?.close();
+  recorderFullScreenWin = null;
+}
+
+function openRecorderFullScreenWin() {
+  if (!recorderFullScreenWin || recorderFullScreenWin?.isDestroyed()) {
+    recorderFullScreenWin = createRecorderFullScreenWin();
+  }
+  recorderFullScreenWin?.show();
+}
+
+function hideRecorderFullScreenWin() {
+  recorderFullScreenWin?.hide();
+}
+
+function showRecorderFullScreenWin() {
+  recorderFullScreenWin?.show();
+}
+
+function minimizeRecorderFullScreenWin() {
+  recorderFullScreenWin?.minimize();
+}
+
+function setMovableRecorderFullScreenWin(movable: boolean) {
+  recorderFullScreenWin?.setMovable(movable);
+}
+
+function setAlwaysOnTopRecorderFullScreenWin(isAlwaysOnTop: boolean) {
+  recorderFullScreenWin?.setAlwaysOnTop(isAlwaysOnTop);
+}
+
+export {
+  createRecorderFullScreenWin,
+  closeRecorderFullScreenWin,
+  openRecorderFullScreenWin,
+  hideRecorderFullScreenWin,
+  showRecorderFullScreenWin,
+  minimizeRecorderFullScreenWin,
+  setMovableRecorderFullScreenWin,
+  setAlwaysOnTopRecorderFullScreenWin,
+};
diff --git a/packages/desktop/package.json b/packages/desktop/package.json
@@ -41,8 +41,7 @@
     "typescript": "^5.2.2",
     "uuid": "^9.0.1",
     "vite": "^4.4.9",
-    "vite-plugin-electron": "^0.13.0-beta.3",
-    "vite-plugin-electron-renderer": "^0.14.5"
+    "vite-plugin-electron": "^0.14.0"
   },
   "engines": {
     "node": "^14.18.0 || >=16.0.0"

diff --git a/packages/desktop/vite.config.ts b/packages/desktop/vite.config.ts
@@ -1,8 +1,6 @@
 import { rmSync } from 'node:fs';
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import electron from 'vite-plugin-electron';
-import renderer from 'vite-plugin-electron-renderer';
+import electron from 'vite-plugin-electron/simple';
 import pkg from './package.json';
 
 // https://vitejs.dev/config/
@@ -15,21 +13,12 @@ export default defineConfig(({ command }) => {
 
   return {
     plugins: [
-      react(),
-      electron([
-        {
-          // Main-Process entry file of the Electron App.
+      electron({
+        main: {
           entry: 'electron/main/index.ts',
-          onstart(options) {
-            if (process.env.VSCODE_DEBUG) {
-              console.log(/* For `.vscode/.debug.script.mjs` */ '[startup] Electron App');
-            } else {
-              options.startup();
-            }
-          },
           vite: {
             build: {
-              sourcemap,
+              sourcemap: sourcemap ? 'inline' : undefined, // #332
               minify: isBuild,
               outDir: 'dist-electron/main',
               rollupOptions: {
@@ -38,13 +27,8 @@ export default defineConfig(({ command }) => {
             },
           },
         },
-        {
-          entry: 'electron/preload/index.ts',
-          onstart(options) {
-            // Notify the Renderer-Process to reload the page when the Preload-Scripts build is complete,
-            // instead of restarting the entire Electron App.
-            options.reload();
-          },
+        preload: {
+          input: 'electron/preload/index.ts',
           vite: {
             build: {
               sourcemap: sourcemap ? 'inline' : undefined, // #332
@@ -56,9 +40,7 @@ export default defineConfig(({ command }) => {
             },
           },
         },
-      ]),
-      // Use Node.js API in the Renderer-process
-      renderer(),
+      }),
     ],
     server:
       process.env.VSCODE_DEBUG &&

diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md
@@ -1,5 +1,9 @@
 # @pear-rec/web
 
+## 1.3.1
+
+feat: 增加录全屏
+
 ## 1.3.0
 
 feat: 增加钉图功能

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -7,8 +7,7 @@
     "build": "rimraf dist && tsc && vite build",
     "watch": "tsc && vite build --mode lib -w",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "rimraf dist && tsc && vite build && vite preview",
-    "deploy": "deploy.sh"
+    "preview": "vite preview"
   },
   "dependencies": {
     "@pear-rec/recorder": "workspace:^",

diff --git a/packages/web/src/components/card/recordScreenCard.tsx b/packages/web/src/components/card/recordScreenCard.tsx
@@ -1,53 +1,39 @@
 import React, { useImperativeHandle, forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CameraOutlined, DownOutlined } from '@ant-design/icons';
-import { Card, Space, Dropdown } from 'antd';
-import type { MenuProps } from 'antd';
+import { Card, Space, Button } from 'antd';
 
 const RecordScreenCard = forwardRef((props: any, ref: any) => {
   useImperativeHandle(ref, () => ({}));
   const { t } = useTranslation();
 
   function handleClipScreen() {
-    window.electronAPI
-      ? window.electronAPI.sendCsOpenWin()
-      : (location.href = '/recorderScreen.html');
-  }
-
-  function handleRecordScreen() {
-    window.electronAPI
-      ? window.electronAPI.sendRsOpenWin({ isFullScreen: true })
-      : (location.href = '/recorderScreen.html');
+    if (window.isElectron) {
+      window.electronAPI.sendCsOpenWin();
+      window.electronAPI.sendMaCloseWin();
+    } else {
+      location.href = '/recorderFullScreen.html';
+    }
   }
 
-  const onClick: MenuProps['onClick'] = ({ key }) => {
-    if (key == 'full') {
-      handleRecordScreen();
+  function handleFullScreenClick() {
+    if (window.isElectron) {
+      window.electronAPI.sendRfsOpenWin();
+      window.electronAPI.sendMaCloseWin();
     } else {
-      handleClipScreen();
+      location.href = '/recorderFullScreen.html';
     }
-  };
-
-  const items: MenuProps['items'] = [
-    {
-      label: '全屏录制',
-      key: 'full',
-    },
-    {
-      label: '局部录制',
-      key: 'clip',
-    },
-  ];
+  }
 
   return (
     <Card hoverable bordered={false} style={{ maxWidth: 300, minWidth: 140, height: 130 }}>
+      <span className="extra" onClick={handleFullScreenClick}>
+        {t('home.fullScreen')}
+      </span>
       <div className="cardContent">
-        {/* <Dropdown menu={{ items, onClick }}> */}
         <Space>
           <CameraOutlined className="cardIcon" onClick={handleClipScreen} />
-          {/* <DownOutlined className="cardToggle" /> */}
         </Space>
-        {/* </Dropdown> */}
         <div className="cardTitle">{t('home.screenRecording')}</div>
       </div>
     </Card>