fix: 编辑动图初始化渲染bug

027xiguapi · Dec 28, 2023 · a0486a2 · a0486a2
1 parent fc65040
commit a0486a2
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 44 deletions.
diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -27,7 +27,7 @@
 
 > pear-rec(梨子 rec) 是一个跨平台的截图、录屏、录音、录像、录制(动图)gif、查看图片、查看视频、查看音频和修改图片的软件。
 >
-> pear-rec(pear rec) 是基于 react + electron + vite + viewerjs + plyr + aplayer + react-screenshots + tui-image-editor + gif.js 的一个项目。
+> pear-rec(梨子 rec) 的跨平台是基于 `electronjs`,前端是基于 `reactjs`,后台是基于 `nestjs`,数据库是基于 `sqljs`,截图、录屏、录音、录像、录制(动图)gif等功能是基于 `webrtc` 和 `webcodecs` 的一个项目。
 >
 > 更多功能和 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)
 
@@ -45,8 +45,6 @@
 
 编译需要`nodejs`和`pnpm`环境
 
-### 测试环境
-
 ```
 nodejs: 18
 pnpm: 8
@@ -110,7 +108,7 @@ pnpm run build:desktop
   - [x] 查看录音
   - [x] 下载录音
   - [ ] 编辑录音
-- [x] 录像
+- [x] 录像(WebRTC)
   - [ ] 自定义比特率
 - [x] 图片预览(viewerjs)
   - [x] 放大

diff --git a/packages/server/src/app/file.controller.ts b/packages/server/src/app/file.controller.ts
@@ -59,10 +59,8 @@ export class FileController {
     const config = getConfig();
     const user = config.user;
     const folderPath = path.join(config.filePath, `${user.uuid}/${type}`);
-    console.log(type, folderPath);
     if (fs.existsSync(folderPath)) {
       fs.readdirSync(folderPath).forEach((file) => {
-        console.log(1, file);
         const filePath = path.join(folderPath, file);
         fs.unlinkSync(filePath);
       });

diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md
@@ -1,6 +1,10 @@
 # @pear-rec/web
 
-## 1.3.10
+## 1.3.12
+
+fix: 编辑动图初始化渲染bug
+
+## 1.3.11
 
 perf: 录制动图优化
 

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.10",
+  "version": "1.3.12",
   "scripts": {
     "dev": "vite",
     "build": "rimraf dist && tsc && vite build",

diff --git a/packages/web/src/components/editGif/GifConverter.tsx b/packages/web/src/components/editGif/GifConverter.tsx
@@ -36,7 +36,12 @@ export default function VideoToGifConverter({ videoFrames, user }) {
   // };
 
   useEffect(() => {
-    videoFramesRef.current.length && renderImgToCanvas(videoFramesRef.current[0]);
+    if (videoFramesRef.current.length) {
+      const img = videoFramesRef.current[0];
+      img.onload = function () {
+        renderImgToCanvas(img);
+      };
+    }
   }, [videoFrames]);
 
   const handlePlayClick = async () => {
@@ -150,7 +155,7 @@ export default function VideoToGifConverter({ videoFrames, user }) {
       const res = (await api.saveFile(formData)) as any;
       if (res.code == 0) {
         if (window.isElectron) {
-          window.electronAPI?.sendEiCloseWin();
+          window.electronAPI?.sendEgCloseWin();
           window.electronAPI?.sendViOpenWin({ imgUrl: res.data.filePath });
         } else {
           Modal.confirm({

diff --git a/packages/web/src/components/recorderScreen/ScreenRecorder.tsx b/packages/web/src/components/recorderScreen/ScreenRecorder.tsx
@@ -39,22 +39,20 @@ const ScreenRecorder = (props) => {
     } else {
       initCropArea();
     }
+    user.id || getCurrentUser();
     type == 'gif' && api.deleteFileCache('cg');
-    console.log(type);
   }, []);
 
-  // async function getCurrentUser() {
-  //   try {
-  //     const res = (await userApi.getCurrentUser()) as any;
-  //     if (res.code == 0) {
-  //       setUser(res.data);
-  //       console.log(res);
-  //       type == 'gif' && api.deleteFileCache('cg');
-  //     }
-  //   } catch (err) {
-  //     console.log(err);
-  //   }
-  // }
+  async function getCurrentUser() {
+    try {
+      const res = (await userApi.getCurrentUser()) as any;
+      if (res.code == 0) {
+        setUser(res.data);
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  }
 
   async function initElectron() {
     const sources = await window.electronAPI?.invokeRsGetDesktopCapturerSource();

diff --git a/packages/web/src/components/upload/UploadImg.tsx b/packages/web/src/components/upload/UploadImg.tsx
@@ -17,9 +17,9 @@ function UploadImg(props) {
   }
 
   return (
-    <Space className={...className} style={...style}>
+    <Space className={className} style={style}>
       <Button type="primary" onClick={handleUpload}>
-      {children || '图片'}
+        {children || '图片'}
       </Button>
       <input
         type="file"

diff --git a/packages/web/src/pages/recorderScreen/index.tsx b/packages/web/src/pages/recorderScreen/index.tsx
@@ -1,37 +1,18 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import ininitApp from '../../pages/main';
-import { useApi } from '../../api';
-import { useUserApi } from '../../api/user';
 import SelectMedia from '../../components/recorderScreen/SelectMedia';
 import CropRecorder from '../../components/recorderScreen/CropRecorder';
 import ScreenRecorder from '../../components/recorderScreen/ScreenRecorder';
 import '@pear-rec/timer/src/Timer/index.module.scss';
 import styles from './index.module.scss';
 
 const RecorderScreen = () => {
-  const userApi = useUserApi();
-  const userRef = useRef({} as any);
   const videoRef = useRef(null);
   const iframeRef = useRef(null);
   const [isIframe, setIsIframe] = useState(true);
   const [isMedia, setIsMedia] = useState(false);
 
-  useEffect(() => {
-    window.isOffline || userRef.current.id || getCurrentUser();
-  }, []);
-
-  async function getCurrentUser() {
-    try {
-      const res = (await userApi.getCurrentUser()) as any;
-      if (res.code == 0) {
-        userRef.current = res.data;
-      }
-    } catch (err) {
-      console.log(err);
-    }
-  }
-
   function setMediaStream(mediaStream) {
     videoRef.current!.srcObject = mediaStream;
     setIsIframe(false);