fix: 修改动图删除和插入关键帧 bug

README.md

@@ -152,13 +152,7 @@ Features that have been ticked are the latest in the development process but may
 
 ## Feedback
 
-We recommend that [issue](https://github.com/027xiguapi/pear-rec/issues) be used for problem feedback, or others:
-
-- QQ group
-
-<p align="center">
-  <img src="https://027xiguapi.github.io/pear-rec/imgs/pear-rec_qq_qrcode.png" />
-</p>
+We recommend that [issue](https://github.com/027xiguapi/pear-rec/issues) be used for problem feedback.
 
 ## License
 

README.zh-CN.md

@@ -46,7 +46,7 @@
 编译需要`nodejs`和`pnpm`环境
 
 ```
-nodejs: 18
+nodejs >= 18
 pnpm: 8
 ```
 

packages/desktop/.env

@@ -1,5 +1,5 @@
 # port 端口号
-VITE_API_URL = pearrec://api/
+VITE_API_URL = http://localhost:9190/
 VITE_WEB_URL = http://localhost:9191/
 
 PORT=9190

packages/desktop/electron/win/mainWin.ts

@@ -22,7 +22,7 @@ const createMainWin = (): BrowserWindow => {
   } else {
     mainWin.loadFile(WIN_CONFIG.main.html);
   }
-  mainWin.webContents.openDevTools();
+  // mainWin.webContents.openDevTools();
 
   // Test actively push message to the Electron-Renderer
   // mainWin.webContents.on("did-finish-load", () => {

packages/web/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @pear-rec/web
 
+## 1.4.22
+
+fix: 修改动图删除和插入关键帧 bug
+
 ## 1.4.21
 
 feat: 视频转gif

packages/web/src/components/context/GifContext.tsx

@@ -4,13 +4,10 @@ export const gifInitialState: any = {
   imgUrl: '',
   videoUrl: '',
   videoFrames: [],
-  index: 0,
+  index: -1,
   load: 0,
   isPlay: false,
   frameNum: 0,
-  // timeStart: 0,
-  // timeEnd: 0,
-  // duration: 100,
 };
 
 export const GifContext = createContext(gifInitialState);
@@ -35,21 +32,9 @@ export function gifReducer(state, action) {
     case 'setIsPlay': {
       return { ...state, isPlay: action.isPlay };
     }
-    // case 'setDuration': {
-    //   return { ...state, duration: action.duration };
-    // }
     case 'setFrameNum': {
       return { ...state, frameNum: action.frameNum };
     }
-    // case 'setTime': {
-    //   return { ...state, timeStart: action.time[0], timeEnd: action.time[1] };
-    // }
-    // case 'setTimeStart': {
-    //   return { ...state, timeStart: action.timeStart };
-    // }
-    // case 'setTimeEnd': {
-    //   return { ...state, timeEnd: action.timeEnd };
-    // }
     case 'setLoadAdd': {
       return { ...state, load: state.load + action.num > 99 ? 99 : state.load + action.num };
     }

packages/web/src/components/editGif/GifConverter.tsx

@@ -11,8 +11,6 @@ export default function VideoToGifConverter() {
   const canvasRef = useRef(null);
   const videoFramesRef = useRef([]);
   const [scale, setScale] = useState<number>(100);
-  const [frameIndex, setFrameIndex] = useState<number>(0);
-  const [videoFrames, setVideoFrames] = useState<any>([]);
   const { user, setUser } = useContext(UserContext);
   const { gifState, gifDispatch } = useContext(GifContext);
 
@@ -34,37 +32,28 @@ export default function VideoToGifConverter() {
 
   useEffect(() => {
     let index = gifState.index;
-    if (index != frameIndex) {
-      setCurrentVideoFrame(index);
-      setFrameIndex(index);
-    }
+    setCurrentVideoFrame(index);
   }, [gifState.index]);
 
-  useEffect(() => {
-    setVideoFrames(gifState.videoFrames);
-  }, [gifState.videoFrames]);
-
-  useEffect(() => {
-    if (videoFramesRef.current.length) {
-      const img = videoFramesRef.current[gifState.index];
-      img ? setCurrentVideoFrame(gifState.index) : clearCanvas();
-    }
-  }, [videoFrames]);
-
   function renderImgToCanvas(index) {
-    let imgs = document.querySelectorAll('.videoFrame img');
-    let img = imgs[index] as any;
+    const imgs = document.querySelectorAll('.videoFrame img');
+    const _img = imgs[index] as any;
+    const img = new Image();
+    img.src = _img.src;
     const ratio = window.devicePixelRatio || 1;
     const canvas = canvasRef.current;
     const context = canvas.getContext('2d');
-    let { naturalWidth, naturalHeight } = img;
-    canvas.width = naturalWidth * ratio;
-    canvas.height = naturalHeight * ratio;
-    canvas.style.width = naturalWidth + 'px';
-    canvas.style.height = naturalHeight + 'px';
-    context.scale(ratio, ratio);
-    context.drawImage(img, 0, 0, naturalWidth, naturalHeight);
-    img.scrollIntoView();
+    img.onload = function () {
+      const { naturalWidth, naturalHeight } = img;
+      canvas.width = naturalWidth * ratio;
+      canvas.height = naturalHeight * ratio;
+      canvas.style.width = naturalWidth + 'px';
+      canvas.style.height = naturalHeight + 'px';
+      context.scale(ratio, ratio);
+      context.clearRect(0, 0, naturalWidth, naturalHeight);
+      context.drawImage(img, 0, 0, naturalWidth, naturalHeight);
+    };
+    _img.scrollIntoView();
   }
 
   function clearCanvas() {
@@ -76,8 +65,6 @@ export default function VideoToGifConverter() {
 
   function handleCurrentVideoFrameClick(index) {
     gifDispatch({ type: 'setIndex', index });
-    setFrameIndex(index);
-    renderImgToCanvas(index);
   }
 
   function setCurrentVideoFrame(index) {
@@ -112,10 +99,10 @@ export default function VideoToGifConverter() {
         </FloatButton.Group>
       </div>
       <div className="videoFrames">
-        {videoFrames.length ? (
-          videoFrames.map((videoFrame, index) => (
+        {gifState.videoFrames.length ? (
+          gifState.videoFrames.map((videoFrame, index) => (
             <div
-              className={`${'videoFrame ' + (index == frameIndex ? 'current' : '')}`}
+              className={`${'videoFrame ' + (index == gifState.index ? 'current' : '')}`}
               key={index}
               onClick={(e) => handleCurrentVideoFrameClick(index)}
             >

packages/web/src/components/editGif/tool/Frame.tsx

@@ -44,14 +44,14 @@ const Frame = forwardRef<any>((props, ref) => {
       updatedBy: user.id,
     };
     await db.caches.add(cache);
-    return cache.fileData;
+    event.target.value = '';
+    handleInsertFrame(cache);
   }
 
-  function handleInsertFrame(filePath) {
+  function handleInsertFrame(cache) {
     let index = gifState.index;
     let newVideoFrame = {
-      url: `pearrec://${filePath}`,
-      filePath: filePath,
+      fileData: cache.fileData,
       index: index + 1,
       duration: 100,
     };
@@ -84,6 +84,7 @@ const Frame = forwardRef<any>((props, ref) => {
     let videoFrames = newVideoFrames.splice(0, index);
     gifDispatch({ type: 'setVideoFrames', videoFrames: newVideoFrames });
     historyDispatch({ type: 'increment', data: { curd: 'deletePrevList', index, videoFrames } });
+    gifDispatch({ type: 'setIndex', index: 0 });
   }
 
   function handleMovePrevFrame() {}

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

@@ -114,6 +114,7 @@ const EditGif = () => {
     let _videoFrames = await db.caches.where('fileType').equals('cg').toArray();
     gifDispatch({ type: 'setVideoFrames', videoFrames: _videoFrames });
     gifDispatch({ type: 'setFrameNum', frameNum: _videoFrames.length });
+    gifDispatch({ type: 'setIndex', index: 0 });
   }
 
   async function saveImg(videoFrame, frameIndex) {