perf: 优化录制全屏

027xiguapi · Dec 18, 2023 · 52e2ecc · 52e2ecc
1 parent 33b4dc4
commit 52e2ecc
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 97 deletions.
diff --git a/packages/desktop/electron/main/index.ts b/packages/desktop/electron/main/index.ts
@@ -6,17 +6,10 @@ import { update } from './update';
 import { registerFileProtocol } from './protocol';
 import { registerGlobalShortcut, unregisterAllGlobalShortcut } from './globalShortcut';
 import { initConfig, getConfig } from '@pear-rec/server/src/config';
-import { url, serverPath } from './contract';
+import { initServerProcess, quitServerProcess } from './serverProcess';
 import './ipcMain';
 
-const serverAppProcess = utilityProcess.fork(serverPath);
-serverAppProcess.stdout?.on('data', (data) => {
-  console.log(`serverAppProcess output: ${data}`);
-});
-serverAppProcess.stderr?.on('data', (data) => {
-  console.error(`serverAppProcess err: ${data}`);
-});
-
+initServerProcess();
 initConfig();
 
 // The built directory structure
@@ -62,7 +55,7 @@ app.whenReady().then(() => {
 });
 
 app.on('will-quit', () => {
-  serverAppProcess?.kill();
+  quitServerProcess();
   unregisterAllGlobalShortcut();
 });
 

diff --git a/packages/desktop/electron/main/serverProcess.ts b/packages/desktop/electron/main/serverProcess.ts
@@ -0,0 +1,25 @@
+import { type UtilityProcess, utilityProcess } from 'electron';
+import { url, serverPath } from './contract';
+
+let serverProcess: null | UtilityProcess = null;
+
+export function initServerProcess() {
+  serverProcess =
+    url ||
+    utilityProcess.fork(serverPath, [], {
+      stdio: 'pipe',
+    });
+
+  serverProcess.on?.('spawn', () => {
+    serverProcess.stdout?.on('data', (data) => {
+      console.log(`serverProcess output: ${data}`);
+    });
+    serverProcess.stderr?.on('data', (data) => {
+      console.error(`serverProcess err: ${data}`);
+    });
+  });
+}
+
+export function quitServerProcess() {
+  serverProcess?.kill();
+}
diff --git a/packages/docs/public/imgs/1700442414996.jpg b/packages/docs/public/imgs/1700442414996.jpg
diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md
@@ -1,5 +1,9 @@
 # @pear-rec/web
 
+## 1.3.6
+
+perf: 优化录制全屏
+
 ## 1.3.5
 
 feat: 截图钉图

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@pear-rec/web",
   "private": true,
-  "version": "1.3.5",
+  "version": "1.3.6",
   "scripts": {
     "dev": "vite",
     "build": "rimraf dist && tsc && vite build",
@@ -28,7 +28,6 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^13.2.1",
     "react-icons": "^4.8.0",
-    "react-use": "^17.4.0",
     "sass": "^1.69.5",
     "tui-image-editor": "^3.15.3",
     "viewerjs": "^1.11.3",

diff --git a/packages/web/src/pages/recorderFullScreen/index.module.scss b/packages/web/src/pages/recorderFullScreen/index.module.scss
@@ -1,43 +1,56 @@
 .recorderFullScreen {
-  display: flex;
-  align-items: center;
   border-radius: 5px;
-  background-color: rgba(#eee, 0.1);
-
+  height: 35px;
   :global {
-    .recordIcon {
-      font-size: 18px;
-      width: 32px;
-      padding: 4px 0;
-    }
-    .ant-btn {
-      padding-top: 5px;
-      .ant-btn-icon .anticon {
-        font-size: 18px;
-      }
-    }
-    .singleDigit {
-      background-color: transparent;
-    }
-    .recorderTools {
+    .recordTool {
       display: flex;
       align-items: center;
-      .pauseBtn,
-      .stopBtn,
-      .playBtn {
-        padding-top: 2px;
-        color: #1677ff;
-        .ant-btn-icon {
-          font-size: 26px;
+      background-color: rgba(#eee, 0.1);
+      .recordIcon {
+        font-size: 18px;
+        width: 32px;
+        padding: 4px 0;
+      }
+      .ant-btn {
+        padding-top: 5px;
+        .ant-btn-icon .anticon {
+          font-size: 18px;
         }
       }
-      .stopBtn {
-        color: red;
+      .singleDigit {
+        background-color: transparent;
       }
+      .recorderTools {
+        display: flex;
+        align-items: center;
+        .pauseBtn,
+        .stopBtn,
+        .playBtn {
+          padding-top: 2px;
+          color: #1677ff;
+          .ant-btn-icon {
+            font-size: 26px;
+          }
+        }
+        .stopBtn {
+          color: red;
+        }
+      }
+    }
+    .recording {
+      height: 0px;
+      overflow: hidden;
+      border-bottom: 2px solid #eee;
     }
   }
 }
 
 .recorderFullScreen:hover {
   background-color: rgba(#fff, 0.5);
+  :global {
+    .recordTool {
+      height: 35px;
+      border-bottom: 0;
+    }
+  }
 }
diff --git a/packages/web/src/pages/recorderFullScreen/index.tsx b/packages/web/src/pages/recorderFullScreen/index.tsx
@@ -234,75 +234,77 @@ const RecorderScreen = () => {
 
   return (
     <div className={styles.recorderFullScreen}>
-      <BsRecordCircle className={'recordIcon ' + `${isRecording && !isPause ? 'blink' : ''}`} />
-      <Button
-        type="text"
-        icon={<SettingOutlined />}
-        className="toolbarIcon settingBtn"
-        title={t('nav.setting')}
-        onClick={handleOpenSettingWin}
-      ></Button>
-      <Button
-        type="text"
-        icon={<CloseOutlined />}
-        className="toolbarIcon closeBtn"
-        title={t('nav.close')}
-        onClick={handleCloseWin}
-      ></Button>
-      {/* <Button
+      <div className={'recordTool ' + `${isRecording ? 'recording' : ''}`}>
+        <BsRecordCircle className={'recordIcon ' + `${isRecording && !isPause ? 'blink' : ''}`} />
+        <Button
+          type="text"
+          icon={<SettingOutlined />}
+          className="toolbarIcon settingBtn"
+          title={t('nav.setting')}
+          onClick={handleOpenSettingWin}
+        ></Button>
+        <Button
+          type="text"
+          icon={<CloseOutlined />}
+          className="toolbarIcon closeBtn"
+          title={t('nav.close')}
+          onClick={handleCloseWin}
+        ></Button>
+        {/* <Button
           type="text"
           icon={<CameraOutlined />}
           className="toolbarIcon shotScreenBtn"
           title={t('recorderScreen.shotScreen')}
           onClick={handleShotScreen}
         ></Button> */}
-      <Timer
-        seconds={timer.seconds}
-        minutes={timer.minutes}
-        hours={timer.hours}
-        className="timer"
-      />
-      <div className="recorderTools">
-        {isSave ? (
-          <Button type="text" loading>
-            {t('recorderScreen.saving')}...
-          </Button>
-        ) : isRecording ? (
-          <>
-            <Button
-              type="text"
-              icon={isPause ? <BsPlayFill /> : <BsPause />}
-              className="toolbarIcon pauseBtn"
-              title={isPause ? t('recorderScreen.resume') : t('recorderScreen.pause')}
-              onClick={handleTogglePause}
-            />
-            {/* <Button
+        <Timer
+          seconds={timer.seconds}
+          minutes={timer.minutes}
+          hours={timer.hours}
+          className="timer"
+        />
+        <div className="recorderTools">
+          {isSave ? (
+            <Button type="text" loading>
+              {t('recorderScreen.saving')}...
+            </Button>
+          ) : isRecording ? (
+            <>
+              <Button
+                type="text"
+                icon={isPause ? <BsPlayFill /> : <BsPause />}
+                className="toolbarIcon pauseBtn"
+                title={isPause ? t('recorderScreen.resume') : t('recorderScreen.pause')}
+                onClick={handleTogglePause}
+              />
+              {/* <Button
               className={`toolbarIcon toggleMuteBtn ${isMute ? '' : 'muted'}`}
               type="text"
               onClick={handleToggleMute}
               icon={isMute ? <BsMicMute /> : <BsMic />}
               title={isMute ? t('recorderScreen.unmute') : t('recorderScreen.mute')}
             /> */}
-            <Button
-              type="text"
-              icon={<BsFillStopFill />}
-              className="toolbarIcon stopBtn"
-              title={t('recorderScreen.save')}
-              onClick={saveRecording}
-            />
-          </>
-        ) : (
-          <>
-            <span className="toolbarTitle">{t('recorderScreen.play')}</span>
-            <Button
-              type="text"
-              icon={<BsPlayFill />}
-              className="toolbarIcon playBtn"
-              title={t('recorderScreen.play')}
-              onClick={handleStartRecording}
-            ></Button>
-          </>
-        )}
+              <Button
+                type="text"
+                icon={<BsFillStopFill />}
+                className="toolbarIcon stopBtn"
+                title={t('recorderScreen.save')}
+                onClick={saveRecording}
+              />
+            </>
+          ) : (
+            <>
+              <span className="toolbarTitle">{t('recorderScreen.play')}</span>
+              <Button
+                type="text"
+                icon={<BsPlayFill />}
+                className="toolbarIcon playBtn"
+                title={t('recorderScreen.play')}
+                onClick={handleStartRecording}
+              ></Button>
+            </>
+          )}
+        </div>
       </div>
     </div>
   );