feat: 桌面端联调首页增加编辑动图

027xiguapi · Jan 3, 2024 · 4903b0d · 4903b0d
1 parent 0c77147
commit 4903b0d
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 19 deletions.
diff --git a/README.de-DE.md b/README.de-DE.md
@@ -4,10 +4,10 @@
   <p>
     <img src="https://img.shields.io/github/stars/027xiguapi/pear-rec" alt="stars">
     <img src="https://img.shields.io/badge/react-v18-blue" alt="react">
-    <img src="https://img.shields.io/badge/electron-v26-blue" alt="react">
-    <img src="https://img.shields.io/badge/express-v4-blue" alt="react">
+    <img src="https://img.shields.io/badge/electron-v26-blue" alt="electron">
+    <img src="https://img.shields.io/badge/nestjs-v3-blue" alt="nestjs">
     <img src="https://img.shields.io/badge/-TypeScript-blue?logo=typescript&logoColor=white" alt="typescript">
-    <img src="https://img.shields.io/badge/-Vite-646cff?logo=vite&logoColor=white" alt="vite">
+    <img src="https://img.shields.io/badge/-Vite-blue?logo=vite&logoColor=white" alt="vite">
   </p>
 </p>
 

diff --git a/README.md b/README.md
@@ -4,10 +4,10 @@
   <p>
     <img src="https://img.shields.io/github/stars/027xiguapi/pear-rec" alt="stars">
     <img src="https://img.shields.io/badge/react-v18-blue" alt="react">
-    <img src="https://img.shields.io/badge/electron-v26-blue" alt="react">
-    <img src="https://img.shields.io/badge/express-v4-blue" alt="react">
+    <img src="https://img.shields.io/badge/electron-v26-blue" alt="electron">
+    <img src="https://img.shields.io/badge/nestjs-v3-blue" alt="nestjs">
     <img src="https://img.shields.io/badge/-TypeScript-blue?logo=typescript&logoColor=white" alt="typescript">
-    <img src="https://img.shields.io/badge/-Vite-646cff?logo=vite&logoColor=white" alt="vite">
+    <img src="https://img.shields.io/badge/-Vite-blue?logo=vite&logoColor=white" alt="vite">
   </p>
 </p>
 

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -4,10 +4,10 @@
   <p>
     <img src="https://img.shields.io/github/stars/027xiguapi/pear-rec" alt="stars">
     <img src="https://img.shields.io/badge/react-v18-blue" alt="react">
-    <img src="https://img.shields.io/badge/electron-v26-blue" alt="react">
-    <img src="https://img.shields.io/badge/express-v4-blue" alt="react">
+    <img src="https://img.shields.io/badge/electron-v26-blue" alt="electron">
+    <img src="https://img.shields.io/badge/nestjs-v3-blue" alt="nestjs">
     <img src="https://img.shields.io/badge/-TypeScript-blue?logo=typescript&logoColor=white" alt="typescript">
-    <img src="https://img.shields.io/badge/-Vite-646cff?logo=vite&logoColor=white" alt="vite">
+    <img src="https://img.shields.io/badge/-Vite-blue?logo=vite&logoColor=white" alt="vite">
   </p>
 </p>
 

diff --git a/packages/desktop/CHANGELOG.md b/packages/desktop/CHANGELOG.md
@@ -1,5 +1,9 @@
 # @pear-rec/desktop
 
+## 1.3.9
+
+feat: 首页增加编辑动图
+
 ## 1.3.8
 
 perf: 录制动图优化

diff --git a/packages/desktop/electron/win/editGifWin.ts b/packages/desktop/electron/win/editGifWin.ts
@@ -17,15 +17,23 @@ function createEditGifWin(search?: any): BrowserWindow {
     },
   });
 
-  // const videoUrl = search?.videoUrl || '';
+  const videoUrl = search?.videoUrl || '';
   const filePath = search?.filePath || '';
+  const imgUrl = search?.imgUrl || '';
 
   // editGifWin.webContents.openDevTools();
   if (url) {
-    editGifWin.loadURL(WEB_URL + `editGif.html?filePath=${filePath}`);
+    editGifWin.loadURL(
+      WEB_URL +
+        `editGif.html?${filePath ? 'filePath=' + filePath : ''}${imgUrl ? 'imgUrl=' + imgUrl : ''}${
+          videoUrl ? 'videoUrl=' + videoUrl : ''
+        }`,
+    );
   } else {
     editGifWin.loadFile(editGifHtml, {
-      search: `?filePath=${filePath}`,
+      search: `?${filePath ? 'filePath=' + filePath : ''}${imgUrl ? 'imgUrl=' + imgUrl : ''}${
+        videoUrl ? 'videoUrl=' + videoUrl : ''
+      }`,
     });
   }
 

diff --git a/packages/desktop/package.json b/packages/desktop/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pear-rec/desktop",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "main": "dist-electron/main/index.js",
   "description": "pear-rec",
   "author": "027xiguapi",

diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md
@@ -1,5 +1,9 @@
 # @pear-rec/web
 
+## 1.3.14
+
+feat: 桌面端联调
+
 ## 1.3.13
 
 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.12",
+  "version": "1.3.14",
   "scripts": {
     "dev": "vite",
     "build": "rimraf dist && tsc && vite build",

diff --git a/packages/web/src/components/card/editGifCard.tsx b/packages/web/src/components/card/editGifCard.tsx
@@ -10,7 +10,7 @@ const EditGifCard = forwardRef((props: any, ref: any) => {
   function handleUploadFile(event) {
     const file = event.target.files[0];
     if (window.electronAPI) {
-      window.electronAPI.sendEiOpenWin({ imgUrl: file.path });
+      window.electronAPI.sendEgOpenWin({ imgUrl: file.path });
     } else {
       const imgUrl = window.URL.createObjectURL(file);
       Modal.confirm({

diff --git a/packages/web/src/components/editGif/GifConverter.tsx b/packages/web/src/components/editGif/GifConverter.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import GIF from 'gif.js';
-import { Button, Modal, Progress } from 'antd';
+import { Button, Modal, Progress, FloatButton } from 'antd';
+import { ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
 import { saveAs } from 'file-saver';
 import async from 'async';
 import { useApi } from '../../api';
@@ -16,6 +17,7 @@ export default function VideoToGifConverter({ videoFrames, user }) {
   const videoFramesRef = useRef([]);
   const indexRef = useRef(0);
   const [currentImg, setCurrentImg] = useState<number>(0);
+  const [scale, setScale] = useState<number>(100);
   const delay = 100;
   // const [videoFrames, setVideoFrames] = useState([]);
 
@@ -39,7 +41,7 @@ export default function VideoToGifConverter({ videoFrames, user }) {
     if (videoFramesRef.current.length) {
       const img = videoFramesRef.current[0];
       img.onload = function () {
-        renderImgToCanvas(img);
+        setCurrentVideoFrame(0);
       };
     }
   }, [videoFrames]);
@@ -191,7 +193,27 @@ export default function VideoToGifConverter({ videoFrames, user }) {
         <Progress percent={percent} />
       </div>
       <div className="content">
-        <canvas ref={canvasRef}></canvas>
+        <canvas ref={canvasRef} style={{ transform: 'scale(' + scale / 100 + ')' }}></canvas>
+        <div className="info">
+          <div>
+            {indexRef.current + 1} / {videoFramesRef.current?.length || 0}
+          </div>
+          <div>{scale}%</div>
+        </div>
+        <FloatButton.Group shape="square" style={{ right: 24, bottom: 150 }}>
+          <FloatButton
+            icon={<ZoomInOutlined />}
+            onClick={() => {
+              setScale((scale) => scale + 2);
+            }}
+          />
+          <FloatButton
+            icon={<ZoomOutOutlined />}
+            onClick={() => {
+              setScale((scale) => scale - 2);
+            }}
+          />
+        </FloatButton.Group>
       </div>
       <div className="videoFrames">
         {videoFrames.map((videoFrame, index) => (
@@ -205,7 +227,7 @@ export default function VideoToGifConverter({ videoFrames, user }) {
               alt={videoFrame.filePath}
               ref={(el) => (videoFramesRef.current[index] = el)}
             />
-            <div className="info">{index}</div>
+            <div className="info">{index + 1}</div>
           </div>
         ))}
       </div>

diff --git a/packages/web/src/pages/editGif/index.module.scss b/packages/web/src/pages/editGif/index.module.scss
@@ -27,9 +27,22 @@
       display: flex;
       justify-content: center;
       align-items: center;
+      overflow: hidden;
+      position: relative;
       canvas {
         max-width: 1000px;
       }
+      .info {
+        position: absolute;
+        bottom: 5px;
+        left: 10px;
+        color: #fff;
+        text-shadow:
+          1px 1px 1px black,
+          -1px -1px 1px black,
+          1px -1px 1px black,
+          -1px 1px 1px black;
+      }
     }
     .videoFrames {
       height: 100px;

diff --git a/packages/web/src/pages/editGif/index.tsx b/packages/web/src/pages/editGif/index.tsx
@@ -42,6 +42,9 @@ const EditGif = () => {
   }
 
   const fetchImageByteStream = async (imgUrl: string) => {
+    if (imgUrl.substring(0, 4) != 'blob') {
+      imgUrl = `${window.baseURL}file?url=${imgUrl}`;
+    }
     const response = await fetch(imgUrl);
     return response.body!;
   };