feat: 增加通知

README.zh-CN.md

@@ -82,7 +82,7 @@ pnpm run clear
 - [x] 动图(gif.js)
   - [x] 录制
   - [x] 编辑
-- [x] 截屏(react-screenshots)
+- [x] 截图(react-screenshots)
   - [x] 框选裁切
   - [x] 框选大小位置可调整
   - [x] 取色器

packages/desktop/electron/i18n/zh-CN.json

@@ -1,6 +1,6 @@
 {
   "tray": {
-    "screenshot": "截屏",
+    "screenshot": "截图",
     "audioRecording": "录音",
     "screenRecording": "录屏",
     "videoRecording": "录像",
@@ -38,7 +38,7 @@
     "audioRecording": "录音",
     "screenRecording": "录屏",
     "videoRecording": "录像",
-    "screenshot": "截屏",
+    "screenshot": "截图",
     "fullScreen": "全屏",
     "viewImage": "查看图片",
     "playAudio": "查看音频",
@@ -106,4 +106,4 @@
     "openServer": "打开服务",
     "serverPath": "服务地址"
   }
-}
+}

packages/desktop/electron/main/constant.ts

@@ -120,7 +120,7 @@ export const WIN_CONFIG = {
     width: 340,
     height: 130,
     autoHideMenuBar: true, // 自动隐藏菜单栏
-    frame: false, // 无边框窗口
+    maximizable: false, // 最大
     hasShadow: false, // 窗口是否有阴影
     fullscreenable: false, // 窗口是否可以进入全屏状态
     alwaysOnTop: true, // 窗口是否永远在别的窗口的上面

packages/desktop/electron/main/ipcMain.ts

@@ -30,6 +30,7 @@ import * as viewVideoWin from '../win/viewVideoWin';
 import * as videoConverterWin from '../win/videoConverterWin';
 import * as globalShortcut from './globalShortcut';
 import logger from './logger';
+import { showNotification } from './notification';
 import * as utils from './utils';
 
 const selfWindws = async () =>
@@ -59,6 +60,11 @@ function initIpcMain() {
     logger.info(msg);
   });
 
+  // 通知
+  ipcMain.on('nt:send-msg', (e, options) => {
+    showNotification(options);
+  });
+
   // 主页
   ipcMain.on('ma:open-win', () => {
     mainWin.openMainWin();
@@ -89,8 +95,6 @@ function initIpcMain() {
     return clipScreenWin.getBoundsClipScreenWin();
   });
   ipcMain.on('rs:start-record', (event) => {
-    // recorderScreenWin.setMovableRecorderScreenWin(false);
-    // recorderScreenWin.setResizableRecorderScreenWin(false);
     clipScreenWin.setMovableClipScreenWin(false);
     clipScreenWin.setResizableClipScreenWin(false);
     clipScreenWin.setIgnoreMouseEventsClipScreenWin(event, true, {
@@ -99,16 +103,12 @@ function initIpcMain() {
     clipScreenWin.setIsPlayClipScreenWin(true);
   });
   ipcMain.on('rs:pause-record', (event) => {
-    // recorderScreenWin.setMovableRecorderScreenWin(true);
-    // recorderScreenWin.setResizableRecorderScreenWin(true);
     clipScreenWin.setMovableClipScreenWin(true);
     clipScreenWin.setResizableClipScreenWin(true);
     clipScreenWin.setIgnoreMouseEventsClipScreenWin(event, false);
     clipScreenWin.setIsPlayClipScreenWin(false);
   });
   ipcMain.on('rs:stop-record', (event) => {
-    // recorderScreenWin.setMovableRecorderScreenWin(true);
-    // recorderScreenWin.setResizableRecorderScreenWin(true);
     clipScreenWin.setMovableClipScreenWin(true);
     clipScreenWin.setResizableClipScreenWin(true);
     clipScreenWin.setIgnoreMouseEventsClipScreenWin(event, false);

packages/desktop/electron/main/notification.ts

@@ -0,0 +1,7 @@
+import { Notification } from 'electron';
+import { ICON } from './constant';
+
+export function showNotification(_options) {
+  const options = { icon: ICON, ..._options };
+  new Notification(options).show();
+}

packages/desktop/electron/preload/electronAPI.ts

@@ -4,6 +4,9 @@ contextBridge.exposeInMainWorld('electronAPI', {
   // logger
   sendLogger: (msg: any) => ipcRenderer.send('lg:send-msg', msg),
 
+  // notification
+  sendNotification: (options: any) => ipcRenderer.send('nt:send-msg', options),
+
   // mainWin
   sendMaOpenWin: () => ipcRenderer.send('ma:open-win'),
   sendMaCloseWin: () => ipcRenderer.send('ma:close-win'),

packages/desktop/electron/preload/index.ts

@@ -150,7 +150,8 @@ if (location.pathname.includes('/index.html')) {
   if (
     !location.pathname.includes('/shotScreen.html') &&
     !location.pathname.includes('/clipScreen.html') &&
-    !location.pathname.includes('/canvas.html')
+    !location.pathname.includes('/canvas.html') &&
+    !location.pathname.includes('/recorderScreen.html')
   ) {
     domReady().then(appendLoading);
 

packages/desktop/electron/win/clipScreenWin.ts

@@ -1,7 +1,7 @@
 import { BrowserWindow } from 'electron';
 import { ICON, WEB_URL, WIN_CONFIG, preload, url } from '../main/constant';
 import {
-  hideRecorderScreenWin,
+  minimizeRecorderScreenWin,
   openRecorderScreenWin,
   setBoundsRecorderScreenWin,
   showRecorderScreenWin,
@@ -42,13 +42,13 @@ function createClipScreenWin(): BrowserWindow {
   //   setBoundsRecorderScreenWin(clipScreenWinBounds);
   // });
 
-  clipScreenWin.on('restore', () => {
-    showRecorderScreenWin();
-  });
+  // clipScreenWin.on('restore', () => {
+  //   showRecorderScreenWin();
+  // });
 
-  clipScreenWin.on('minimize', () => {
-    hideRecorderScreenWin();
-  });
+  // clipScreenWin.on('minimize', () => {
+  //   hideRecorderScreenWin();
+  // });
 
   return clipScreenWin;
 }
@@ -93,6 +93,7 @@ function setResizableClipScreenWin(resizable: boolean) {
 
 function minimizeClipScreenWin() {
   clipScreenWin?.minimize();
+  minimizeRecorderScreenWin();
 }
 
 function setIgnoreMouseEventsClipScreenWin(event: any, ignore: boolean, options?: any) {

packages/desktop/electron/win/recorderScreenWin.ts

@@ -3,14 +3,16 @@ import { ICON, WEB_URL, WIN_CONFIG, preload, url } from '../main/constant';
 import {
   closeClipScreenWin,
   getBoundsClipScreenWin,
-  setBoundsClipScreenWin,
+  showClipScreenWin,
+  minimizeClipScreenWin,
 } from './clipScreenWin';
 
 let recorderScreenWin: BrowserWindow | null = null;
 
 function createRecorderScreenWin(search?: any): BrowserWindow {
   const { x, y, width, height } = getBoundsClipScreenWin() as Rectangle;
-  let recorderScreenWinX = x + (width - WIN_CONFIG.recorderScreen.width) / 2;
+  // let recorderScreenWinX = x + (width - WIN_CONFIG.recorderScreen.width) / 2;
+  let recorderScreenWinX = x + width + 4 - WIN_CONFIG.recorderScreen.width;
   let recorderScreenWinY = y + height;
 
   recorderScreenWin = new BrowserWindow({
@@ -21,7 +23,7 @@ function createRecorderScreenWin(search?: any): BrowserWindow {
     width: WIN_CONFIG.recorderScreen.width,
     height: WIN_CONFIG.recorderScreen.height,
     autoHideMenuBar: WIN_CONFIG.recorderScreen.autoHideMenuBar, // 自动隐藏菜单栏
-    // frame: WIN_CONFIG.recorderScreen.frame, // 无边框窗口
+    maximizable: WIN_CONFIG.recorderScreen.maximizable,
     hasShadow: WIN_CONFIG.recorderScreen.hasShadow, // 窗口是否有阴影
     fullscreenable: WIN_CONFIG.recorderScreen.fullscreenable, // 窗口是否可以进入全屏状态
     alwaysOnTop: WIN_CONFIG.recorderScreen.alwaysOnTop, // 窗口是否永远在别的窗口的上面
@@ -51,14 +53,25 @@ function createRecorderScreenWin(search?: any): BrowserWindow {
   //   });
   // });
 
+  recorderScreenWin.on('restore', () => {
+    showClipScreenWin();
+  });
+
+  recorderScreenWin.on('minimize', () => {
+    minimizeClipScreenWin();
+  });
+
+  recorderScreenWin.on('close', () => {
+    closeClipScreenWin();
+  });
+
   return recorderScreenWin;
 }
 
 // 打开关闭录屏窗口
 function closeRecorderScreenWin() {
   recorderScreenWin?.isDestroyed() || recorderScreenWin?.close();
   recorderScreenWin = null;
-  closeClipScreenWin();
 }
 
 function openRecorderScreenWin(search?: any) {

packages/desktop/electron/win/shotScreenWin.ts

@@ -8,7 +8,7 @@ let downloadSet: Set<string> = new Set();
 
 function createShotScreenWin(): BrowserWindow {
   shotScreenWin = new BrowserWindow({
-    title: 'pear-rec 截屏',
+    title: 'pear-rec 截图',
     icon: ICON,
     show: false,
     autoHideMenuBar: WIN_CONFIG.shotScreen.autoHideMenuBar, // 自动隐藏菜单栏

packages/docs/desktop/examples.md

@@ -18,10 +18,10 @@
   <img src="../assets/imgs/home.jpg" title="首页" />
 </center>
 
-## 截屏
+## 截图
 
 <center>
-  <img src="../assets/imgs/ss.jpg" title="截屏" />
+  <img src="../assets/imgs/ss.jpg" title="截图" />
 </center>
 
 ## 录屏

packages/web/package.json

@@ -12,7 +12,7 @@
     "clear": "rimraf node_modules"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.2.6",
+    "@ant-design/icons": "^5.3.6",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -22,10 +22,10 @@
     "@pear-rec/recorder": "workspace:^",
     "@pear-rec/screenshot": "workspace:^",
     "@pear-rec/timer": "workspace:^",
-    "@webav/av-canvas": "^0.3.2",
-    "@webav/av-cliper": "^0.3.2",
-    "@webav/av-recorder": "^0.3.2",
-    "antd": "^5.14.0",
+    "@webav/av-canvas": "^0.4.1",
+    "@webav/av-cliper": "^0.4.1",
+    "@webav/av-recorder": "^0.4.1",
+    "antd": "^5.16.1",
     "aplayer": "^1.10.1",
     "axios": "^1.5.0",
     "dayjs": "^1.11.7",
@@ -86,4 +86,4 @@
     "lib": "lib"
   },
   "description": ""
-}
+}

packages/web/src/components/recorderScreen/FullScreen.tsx

@@ -14,7 +14,7 @@ const FullScreen = (props) => {
 
   return (
     <div
-      className="toolbarIcon fullRecordScreenBtn"
+      className={`${props.isRecording ? 'disabled' : ''} toolbarIcon fullRecordScreenBtn`}
       title={t('recorderScreen.fullRecordScreen')}
       onClick={handleFullRecordScreen}
     >

packages/web/src/components/recorderScreen/MicMuteRecorder.tsx

@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AudioMutedOutlined, AudioOutlined } from '@ant-design/icons';
 
-const MuteRecorder = () => {
+const MuteRecorder = (props) => {
   const { t } = useTranslation();
   const [isMute, setIsMute] = useState(false); // 标记是否静音
 
@@ -24,7 +24,9 @@ const MuteRecorder = () => {
 
   return (
     <div
-      className={`toolbarIcon toggleMuteBtn ${isMute ? '' : 'muted'}`}
+      className={`${props.isRecording ? 'disabled' : ''} ${
+        isMute ? '' : 'muted'
+      } toolbarIcon toggleMuteBtn`}
       onClick={handleToggleMute}
       title={isMute ? t('recorderScreen.unmute') : t('recorderScreen.mute')}
     >

packages/web/src/components/recorderScreen/ScreenRecorder.tsx

@@ -331,10 +331,10 @@ const ScreenRecorder = (props) => {
           className="timer"
         />
         <div className="tool">
-          <FullScreen />
+          <FullScreen isRecording={isRecording} />
           <ShotScreen onShotScreen={handleShotScreen} />
-          <MicMuteRecorder />
-          <SoundMuteRecorder />
+          <MicMuteRecorder isRecording={isRecording} />
+          <SoundMuteRecorder isRecording={isRecording} />
         </div>
       </div>
       {isSave.current ? (

packages/web/src/components/recorderScreen/SoundMuteRecorder.tsx

@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MutedOutlined, SoundOutlined } from '@ant-design/icons';
 
-const SoundMuteRecorder = () => {
+const SoundMuteRecorder = (props) => {
   const { t } = useTranslation();
   const [isMute, setIsMute] = useState(false); // 标记是否静音
 
@@ -24,7 +24,9 @@ const SoundMuteRecorder = () => {
 
   return (
     <div
-      className={`toolbarIcon toggleMuteBtn ${isMute ? '' : 'muted'}`}
+      className={`${props.isRecording ? 'disabled' : ''} ${
+        isMute ? '' : 'muted'
+      } toolbarIcon toggleMuteBtn`}
       onClick={handleToggleMute}
       title={isMute ? t('recorderScreen.unmute') : t('recorderScreen.mute')}
     >

packages/web/src/i18n/locales/zh-CN.json

@@ -31,7 +31,7 @@
     "audioRecording": "录音",
     "screenRecording": "录屏",
     "videoRecording": "录像",
-    "screenshot": "截屏",
+    "screenshot": "截图",
     "fullScreen": "全屏",
     "viewImage": "查看图片",
     "playAudio": "查看音频",

packages/web/src/pages/index.scss

@@ -26,16 +26,6 @@ td {
   margin: 0;
   padding: 0;
 }
-// body,
-// button,
-// input,
-// select,
-// textarea {
-//   font:
-//     12px/1.5 tahoma,
-//     arial,
-//     \5b8b\4f53;
-// }
 h1,
 h2,
 h3,
@@ -156,6 +146,11 @@ table {
   animation: blink 1s linear infinite;
 }
 
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 #root {
   display: flex;
   justify-content: center;

packages/web/src/pages/recorderScreen/index.module.scss

@@ -27,10 +27,10 @@
       z-index: 100;
       outline: 2px solid #ccc;
       display: flex;
-      cursor: pointer;
+      // cursor: pointer;
       width: 100%;
       height: 100%;
-      background-color: #ccc;
+      // background-color: #ccc;
       align-items: center;
       justify-content: space-around;
       .info {
@@ -44,6 +44,7 @@
       }
       .toolbarIcon {
         font-size: 26px;
+        cursor: pointer;
       }
       .recordBtn {
         font-size: 32px;

packages/web/src/pages/shotScreen/index.tsx

@@ -165,6 +165,10 @@ function ShotScreen() {
         copyImg(blob);
         if (window.isElectron) {
           window.electronAPI?.sendSsCloseWin();
+          window.electronAPI?.sendNotification({
+            title: '截图通知',
+            body: '截图完成',
+          });
           isPin
             ? window.electronAPI?.sendPiOpenWin({
                 recordId: recordId,