feat: 修改GIF

README.md

@@ -37,10 +37,9 @@
 
 ## Installation
 
-```
-gitee: https://gitee.com/xiguapi027/pear-rec
-github: https://github.com/027xiguapi/pear-rec
-```
+> gitee: https://gitee.com/xiguapi027/pear-rec
+>
+> github: https://github.com/027xiguapi/pear-rec
 
 ## Usage
 

README.zh-CN.md

@@ -25,9 +25,9 @@
 
 ## 简介
 
-> pear-rec(梨子 rec) 是一个跨平台的截图、录屏、录音、录像软件。
+> pear-rec(梨子 rec) 是一个跨平台的截图、录屏、录音、录像、录制(动图)gif、查看图片、查看视频、查看音频和修改图片的软件。
 >
-> pear-rec(pear rec) 是基于 react + electron + vite + viewerjs + plyr + aplayer + react-screenshots 的一个项目。
+> pear-rec(pear rec) 是基于 react + electron + vite + viewerjs + plyr + aplayer + react-screenshots + tui-image-editor + gif.js 的一个项目。
 >
 > 更多功能和 api 可以查看[官网(https://027xiguapi.github.io/pear-rec)](https://027xiguapi.github.io/pear-rec) 或 [https://xiguapi027.gitee.io/pear-rec](https://xiguapi027.gitee.io/pear-rec)
 
@@ -37,10 +37,9 @@
 
 ## 下载地址
 
-```
-gitee: https://gitee.com/xiguapi027/pear-rec
-github: https://github.com/027xiguapi/pear-rec
-```
+> gitee: https://gitee.com/xiguapi027/pear-rec
+>
+> github: https://github.com/027xiguapi/pear-rec
 
 ## 源码运行&编译
 
@@ -129,6 +128,7 @@ pnpm run build:desktop
 - [x] 图片编辑(tui-image-editor)
 - [x] 视频预览(plyr)
 - [x] 音频预览(aplayer)
+- [x] 动图(gif)编辑(gif.js)
 - [x] 基本设置
   - [x] 用户 uuid
   - [x] 保存地址

package.json

@@ -14,7 +14,7 @@
     "only-build:web": "pnpm run -C packages/web build",
     "watch:web": "pnpm run -C packages/web watch",
     "project:web": "pnpm run -C packages/web build && node tools/copy-files-web2server.js",
-    "dev:server": "pnpm run -C packages/server start:dev",
+    "dev:server": "pnpm run -C packages/server dev",
     "build:server": "pnpm run -C packages/server build",
     "dev:docs": "pnpm run -C packages/docs dev",
     "build:docs": "pnpm run -C packages/docs build",

packages/desktop/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @pear-rec/desktop
 
+## 1.3.6
+
+feat: 修改GIF
+
 ## 1.3.5
 
 feat: 增加服务子进程

packages/desktop/electron/main/ipcMain.ts

@@ -13,6 +13,7 @@ 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 editGifWin from '../win/editGifWin';
 import * as utils from './utils';
 import { editConfig } from '@pear-rec/server/src/config';
 
@@ -102,9 +103,9 @@ function initIpcMain() {
     recorderScreenWin.focusRecorderScreenWin();
   });
   // 录屏截图
-  ipcMain.on('cs:open-win', () => {
+  ipcMain.on('cs:open-win', (e, search) => {
     clipScreenWin.closeClipScreenWin();
-    clipScreenWin.openClipScreenWin();
+    clipScreenWin.openClipScreenWin(search);
   });
   ipcMain.on('cs:close-win', () => {
     clipScreenWin.closeClipScreenWin();
@@ -196,8 +197,16 @@ function initIpcMain() {
   ipcMain.on('ei:open-win', (e, search) => {
     editImageWin.openEditImageWin(search);
   });
+  // 动图编辑
+  ipcMain.on('eg:close-win', () => {
+    editGifWin.closeEditGifWin();
+  });
+  ipcMain.on('eg:open-win', (e, search) => {
+    editGifWin.openEditGifWin(search);
+  });
   // 视频音频展示;
   ipcMain.on('vv:open-win', (e, search) => {
+    viewVideoWin.closeViewVideoWin();
     viewVideoWin.openViewVideoWin(search);
   });
   ipcMain.on('vv:close-win', () => {

packages/desktop/electron/preload/electronAPI.ts

@@ -35,7 +35,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
   handleRsGetEndRecord: (callback: any) => ipcRenderer.on('rs:get-end-record', callback),
 
   //csWin
-  sendCsOpenWin: () => ipcRenderer.send('cs:open-win'),
+  sendCsOpenWin: (search?: any) => ipcRenderer.send('cs:open-win', search),
   sendCsCloseWin: () => ipcRenderer.send('cs:close-win'),
   sendCsHideWin: () => ipcRenderer.send('cs:hide-win'),
   sendCsMinimizeWin: () => ipcRenderer.send('cs:minimize-win'),
@@ -47,6 +47,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
   sendCsSetBounds: (bounds: any) => {
     ipcRenderer.send('cs:set-bounds', bounds);
   },
+
   //rvWin
   sendRvCloseWin: () => ipcRenderer.send('rv:close-win'),
   sendRvOpenWin: () => ipcRenderer.send('rv:open-win'),
@@ -74,7 +75,10 @@ contextBridge.exposeInMainWorld('electronAPI', {
   //eiWin
   sendEiCloseWin: () => ipcRenderer.send('ei:close-win'),
   sendEiOpenWin: (search?: string) => ipcRenderer.send('ei:open-win', search),
-  sendEiSaveImg: (imgUrl: string) => ipcRenderer.send('ei:save-img', imgUrl),
+
+  //egWin
+  sendEgCloseWin: () => ipcRenderer.send('eg:close-win'),
+  sendEgOpenWin: (search?: string) => ipcRenderer.send('eg:open-win', search),
 
   //vvWin
   sendVvOpenWin: (search?: string) => ipcRenderer.send('vv:open-win', search),

packages/desktop/electron/win/clipScreenWin.ts

@@ -64,13 +64,13 @@ function showClipScreenWin() {
   clipScreenWin?.show();
 }
 
-function openClipScreenWin() {
+function openClipScreenWin(search?: any) {
   if (!clipScreenWin || clipScreenWin?.isDestroyed()) {
     clipScreenWin = createClipScreenWin();
   }
 
   clipScreenWin?.show();
-  openRecorderScreenWin();
+  openRecorderScreenWin(search);
 }
 
 function getBoundsClipScreenWin() {

packages/desktop/electron/win/editGifWin.ts

@@ -0,0 +1,45 @@
+import { BrowserWindow, dialog, shell, DownloadItem, WebContents } from 'electron';
+import { join, dirname } from 'node:path';
+import { ICON, DIST, preload, url, WEB_URL } from '../main/contract';
+
+const editGifHtml = join(DIST, './editGif.html');
+let editGifWin: BrowserWindow | null = null;
+
+function createEditGifWin(search?: any): BrowserWindow {
+  editGifWin = new BrowserWindow({
+    title: 'pear-rec 动图编辑',
+    icon: ICON,
+    height: 768,
+    width: 1024,
+    autoHideMenuBar: true, // 自动隐藏菜单栏
+    webPreferences: {
+      preload,
+    },
+  });
+
+  const videoUrl = search?.videoUrl || '';
+
+  // editGifWin.webContents.openDevTools();
+  if (url) {
+    editGifWin.loadURL(WEB_URL + `editGif.html?videoUrl=${videoUrl}`);
+  } else {
+    editGifWin.loadFile(editGifHtml, {
+      search: `?videoUrl=${videoUrl}`,
+    });
+  }
+
+  return editGifWin;
+}
+
+function openEditGifWin(search?: any) {
+  if (!editGifWin || editGifWin?.isDestroyed()) {
+    editGifWin = createEditGifWin(search);
+  }
+  editGifWin.show();
+}
+
+function closeEditGifWin() {
+  editGifWin?.close();
+}
+
+export { createEditGifWin, openEditGifWin, closeEditGifWin };

packages/desktop/electron/win/recorderScreenWin.ts

@@ -34,10 +34,12 @@ function createRecorderScreenWin(search?: any): BrowserWindow {
   });
   recorderScreenWin?.setResizable(false);
   if (url) {
-    recorderScreenWin.loadURL(WEB_URL + `recorderScreen.html`);
+    recorderScreenWin.loadURL(WEB_URL + `recorderScreen.html?type=${search?.type || ''}`);
     // recorderScreenWin.webContents.openDevTools();
   } else {
-    recorderScreenWin.loadFile(recorderScreenHtml);
+    recorderScreenWin.loadFile(recorderScreenHtml, {
+      search: `?type=${search?.type || ''}`,
+    });
   }
 
   recorderScreenWin.on('move', () => {
@@ -54,12 +56,6 @@ function createRecorderScreenWin(search?: any): BrowserWindow {
   return recorderScreenWin;
 }
 
-async function recorderScreen(rsFilePath: string) {
-  // closeRecorderScreenWin();
-  // setHistoryVideo(rsFilePath);
-  shell.showItemInFolder(rsFilePath);
-}
-
 // 打开关闭录屏窗口
 function closeRecorderScreenWin() {
   recorderScreenWin?.isDestroyed() || recorderScreenWin?.close();

packages/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pear-rec/desktop",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "main": "dist-electron/main/index.js",
   "description": "pear-rec",
   "author": "027xiguapi",

packages/server/package.json

@@ -6,7 +6,7 @@
     "webpack": "nest build",
     "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
     "start": "nest start",
-    "start:dev": "nest start --watch",
+    "dev": "nest start --watch",
     "start:debug": "nest start --debug --watch",
     "start:prod": "node dist/main"
   },

packages/server/src/util/upload.middleware.ts

@@ -30,7 +30,7 @@ export class UploadMiddleware implements MulterOptionsFactory {
             rs: 'webm',
             ra: 'webm',
             ei: 'png',
-            gif: 'gif',
+            eg: 'gif',
           };
           const type = req.body.type;
           const fileType = fileTypeMap[type] || 'webm';

packages/web/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @pear-rec/web
 
+## 1.3.9
+
+feat: 修改GIF
+
 ## 1.3.8
 
 fix: 修改图片和钉图打不开bug

packages/web/src/components/card/recordScreenCard.tsx

@@ -1,18 +1,34 @@
 import React, { useImperativeHandle, forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CameraOutlined, DownOutlined } from '@ant-design/icons';
-import { Card, Space, Button } from 'antd';
+import type { MenuProps } from 'antd';
+import { Card, Space, Button, Dropdown } from 'antd';
 
 const RecordScreenCard = forwardRef((props: any, ref: any) => {
   useImperativeHandle(ref, () => ({}));
   const { t } = useTranslation();
 
-  function handleClipScreen() {
+  const items: MenuProps['items'] = [
+    {
+      label: '录屏',
+      key: 'video',
+    },
+    {
+      label: 'GIF',
+      key: 'gif',
+    },
+  ];
+
+  const onClick: MenuProps['onClick'] = ({ key }) => {
+    handleClipScreenClick(key);
+  };
+
+  function handleClipScreenClick(type) {
     if (window.isElectron) {
-      window.electronAPI.sendCsOpenWin();
+      window.electronAPI.sendCsOpenWin({ type });
       window.electronAPI.sendMaCloseWin();
     } else {
-      location.href = '/recorderScreen.html';
+      location.href = `/recorderScreen.html?type=${type}`;
     }
   }
 
@@ -31,9 +47,12 @@ const RecordScreenCard = forwardRef((props: any, ref: any) => {
         {t('home.fullScreen')}
       </span>
       <div className="cardContent">
-        <Space>
-          <CameraOutlined className="cardIcon" onClick={handleClipScreen} />
-        </Space>
+        <Dropdown menu={{ items, onClick }}>
+          <Space>
+            <CameraOutlined className="cardIcon" onClick={() => handleClipScreenClick('video')} />
+            <DownOutlined className="cardToggle" />
+          </Space>
+        </Dropdown>
         <div className="cardTitle">{t('home.screenRecording')}</div>
       </div>
     </Card>

packages/web/src/components/videoToGif/VideoToGifConverter.tsx → packages/web/src/components/editGif/VideoToGifConverter.tsx

@@ -86,7 +86,7 @@ export default function VideoToGifConverter({ videoSrc, user }) {
     }
     try {
       const formData = new FormData();
-      formData.append('type', 'gif');
+      formData.append('type', 'eg');
       formData.append('userId', user.id);
       formData.append('file', blob);
       const res = (await api.saveFile(formData)) as any;
@@ -117,19 +117,20 @@ export default function VideoToGifConverter({ videoSrc, user }) {
 
   return (
     <div>
-      <video className="videoRef" ref={videoRef} src={videoSrc}></video>
       <div className="tool">
-        <Progress percent={percent} />
         <Button className="playBtn" onClick={handlePlayClick} type="primary" danger>
           播放
         </Button>
         <Button className="convertBtn" onClick={handleConvertClick} type="primary">
           保存
         </Button>
-        <Button className="saveBtn" onClick={handleSaveClick}>
+        <Button className="saveBtn" disabled={percent != 100} onClick={handleSaveClick}>
           下载
         </Button>
+        <Progress percent={percent} />
       </div>
+      <video className="videoRef" ref={videoRef} src={videoSrc}></video>
+
       <img ref={gifRef} className="hide" alt="GIF" />
     </div>
   );

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

@@ -202,6 +202,9 @@ const ScreenRecorder = (props) => {
 
   async function saveFile(blob) {
     try {
+      const paramsString = location.search;
+      const searchParams = new URLSearchParams(paramsString);
+      const type = searchParams.get('type');
       recordedChunks.current = [];
       const formData = new FormData();
       formData.append('type', 'rs');
@@ -211,16 +214,19 @@ const ScreenRecorder = (props) => {
       if (res.code == 0) {
         if (window.isElectron) {
           window.electronAPI.sendRsCloseWin();
-          window.electronAPI.sendVvCloseWin();
-          window.electronAPI.sendVvOpenWin({ videoUrl: res.data.filePath });
+          type == 'gif'
+            ? window.electronAPI.sendEgOpenWin({ videoUrl: res.data.filePath })
+            : window.electronAPI.sendVvOpenWin({ videoUrl: res.data.filePath });
         } else {
           Modal.confirm({
             title: '录屏已保存，是否查看？',
             content: `${res.data.filePath}`,
             okText: t('modal.ok'),
             cancelText: t('modal.cancel'),
             onOk() {
-              window.open(`/viewVideo.html?videoUrl=${res.data.filePath}`);
+              window.open(
+                `/${type == 'gif' ? 'editGif' : 'viewVideo'}.html?videoUrl=${res.data.filePath}`,
+              );
             },
           });
         }

packages/web/src/components/records/RecordsContent.tsx

@@ -126,8 +126,7 @@ const RecordAudioCard = forwardRef(() => {
   }
 
   function getAvatar(record: any) {
-    console.log(record.fileType);
-    if (record.fileType == 'ss' || record.fileType == 'gif') {
+    if (record.fileType == 'ss' || record.fileType == 'eg') {
       return <ScissorOutlined />;
     }
     if (record.fileType == 'rs') {

packages/web/src/pages/videoToGif.html → packages/web/src/pages/editGif.html

@@ -10,7 +10,7 @@
 
 <body>
   <div id="root"></div>
-  <script type="module" src="./videoToGif/index.tsx"></script>
+  <script type="module" src="./editGif/index.tsx"></script>
 </body>
 
 </html>