perf: 优化修改动图上传视频

027xiguapi · Mar 22, 2024 · 338bc72 · 338bc72
1 parent b86a69d
commit 338bc72
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 19 deletions.
diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md
@@ -1,5 +1,9 @@
 # @pear-rec/web
 
+## 1.4.23
+
+perf: 优化修改动图上传视频
+
 ## 1.4.22
 
 fix: 修改动图删除和插入关键帧 bug

diff --git a/packages/web/src/components/editGif/tool/File.tsx b/packages/web/src/components/editGif/tool/File.tsx
@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { GifContext } from '../../../components/context/GifContext';
 import { db } from '../../../db';
 import { UserContext } from '../../context/UserContext';
-import MP4Converter from '../MP4Converter';
+import VideoToGif from '../../videoToGif';
 import styles from './file.module.scss';
 
 const File = forwardRef<any>((props, ref) => {
@@ -150,14 +150,8 @@ const File = forwardRef<any>((props, ref) => {
     event.target.value = '';
   }
 
-  async function setVideoFrames() {
-    let _videoFrames = await db.caches.where('fileType').equals('cg').toArray();
-    gifDispatch({ type: 'setVideoFrames', videoFrames: _videoFrames });
-    gifDispatch({ type: 'setFrameNum', frameNum: _videoFrames.length });
-  }
-
-  function handleOk() {
-    setVideoFrames();
+  function handleSave(imgUrl) {
+    gifDispatch({ type: 'setImgUrl', imgUrl: imgUrl });
     setIsOpenModal(false);
   }
 
@@ -213,7 +207,11 @@ const File = forwardRef<any>((props, ref) => {
         onCancel={() => setIsOpenModal(false)}
         footer={[]}
       >
-        <MP4Converter videoUrl={videoUrl} onCancel={() => setIsOpenModal(false)} onOk={handleOk} />
+        <VideoToGif
+          videoUrl={videoUrl}
+          onCancel={() => setIsOpenModal(false)}
+          onSave={handleSave}
+        />
       </Modal>
     </div>
   );

diff --git a/packages/web/src/components/videoToGif/index.tsx b/packages/web/src/components/videoToGif/index.tsx
@@ -4,7 +4,6 @@ import { fetchFile, toBlobURL } from '@ffmpeg/util';
 import { Button, Flex, InputNumber, Modal, Progress, Slider } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 import { db, defaultUser } from '../../db';
-import { saveAs } from 'file-saver';
 import styles from './index.module.scss';
 
 let defaultTime = [0, 10];
@@ -16,7 +15,7 @@ export default function MP4Converter(props) {
   const [duration, setDuration] = useState(0);
   const [frameNum, setFrameNum] = useState(0);
   const [time, setTime] = useState(defaultTime);
-  const [fps, setFps] = useState(16);
+  const [fps, setFps] = useState(10);
   const [percent, setPercent] = useState(0);
   const [user, setUser] = useState<any>({});
   const [isLoad, setIsLoad] = useState(false);
@@ -140,10 +139,7 @@ export default function MP4Converter(props) {
 
   function handleDownload() {
     const imgUrl = imgRef.current.src;
-    if (imgUrl) {
-      const fileName = `pear-rec_${+new Date()}.gif`;
-      saveAs(imgUrl, fileName);
-    }
+    imgUrl && props.onSave(imgUrl);
   }
 
   return (
@@ -205,7 +201,7 @@ export default function MP4Converter(props) {
         <Button type="primary" onClick={handleTranscode}>
           转换
         </Button>
-        <Button onClick={handleDownload}>下载</Button>
+        <Button onClick={handleDownload}>保存</Button>
       </Flex>
     </div>
   );

diff --git a/packages/web/src/pages/videoConverter/index.tsx b/packages/web/src/pages/videoConverter/index.tsx
@@ -61,8 +61,8 @@ const App: React.FC = () => {
     setVideoUrl(_videoUrl || '');
   }
 
-  function handleSave(blob) {
-    saveAs(blob, `pear-rec_${+new Date()}.png`);
+  function handleSave(imgUrl) {
+    saveAs(imgUrl, `pear-rec_${+new Date()}.gif`);
   }
 
   return (