feat: 修改编辑动图范围设置

027xiguapi · Mar 8, 2024 · e540a38 · e540a38
1 parent a485355
commit e540a38
Show file tree

Hide file tree

Showing 7 changed files with 74 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.16
+
+feat: 修改编辑动图范围设置
+
 ## 1.4.15
 
 perf: 修改编辑动图导航栏

diff --git a/packages/web/src/components/context/GifContext.tsx b/packages/web/src/components/context/GifContext.tsx
@@ -6,6 +6,10 @@ export const gifInitialState: any = {
   videoFrames: [],
   index: 0,
   load: 0,
+  frameNum: 0,
+  timeStart: 0,
+  timeEnd: 0,
+  duration: 100,
 };
 
 export const GifContext = createContext(gifInitialState);
@@ -27,6 +31,21 @@ export function gifReducer(state, action) {
     case 'setLoad': {
       return { ...state, load: action.load };
     }
+    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 };
     }

diff --git a/packages/web/src/components/editGif/GifConverter.tsx b/packages/web/src/components/editGif/GifConverter.tsx
@@ -11,6 +11,8 @@ 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);
 
@@ -30,6 +32,12 @@ export default function VideoToGifConverter() {
   //   worker.postMessage({ dataUri, rendererName, canvas, duration }, [canvas]);
   // };
 
+  useEffect(() => {
+    let index = gifState.index;
+    setCurrentVideoFrame(index);
+    setFrameIndex(index);
+  }, [gifState.index]);
+
   useEffect(() => {
     if (videoFramesRef.current.length) {
       const img = videoFramesRef.current[gifState.index];
@@ -39,6 +47,7 @@ export default function VideoToGifConverter() {
           })
         : clearCanvas();
     }
+    setVideoFrames(gifState.videoFrames);
   }, [gifState.videoFrames]);
 
   function renderImgToCanvas(img) {
@@ -64,7 +73,7 @@ export default function VideoToGifConverter() {
 
   function handleCurrentVideoFrameClick(index) {
     gifDispatch({ type: 'setIndex', index });
-    setCurrentVideoFrame(index);
+    setFrameIndex(index);
   }
 
   function setCurrentVideoFrame(index) {
@@ -100,10 +109,10 @@ export default function VideoToGifConverter() {
         </FloatButton.Group>
       </div>
       <div className="videoFrames">
-        {gifState.videoFrames.length ? (
-          gifState.videoFrames.map((videoFrame, index) => (
+        {videoFrames.length ? (
+          videoFrames.map((videoFrame, index) => (
             <div
-              className={`${'videoFrame ' + (index == gifState.index ? 'current' : '')}`}
+              className={`${'videoFrame ' + (index == frameIndex ? 'current' : '')}`}
               key={index}
               onClick={(e) => handleCurrentVideoFrameClick(index)}
             >

diff --git a/packages/web/src/components/editGif/Tool.tsx b/packages/web/src/components/editGif/Tool.tsx
@@ -1,6 +1,7 @@
 import type { TabsProps } from 'antd';
 import { Tabs } from 'antd';
-import React from 'react';
+import React, { useContext } from 'react';
+import { GifContext } from '../context/GifContext';
 import FileTool from './tool/File';
 import FrameTool from './tool/Frame';
 import HistoryTool from './tool/History';
@@ -9,10 +10,6 @@ import PlayTool from './tool/Play';
 import SettingTool from './tool/Setting';
 import SpliceTool from './tool/Splice';
 
-const onChange = (key: string) => {
-  console.log(key);
-};
-
 const items: TabsProps['items'] = [
   {
     key: 'file',
@@ -51,6 +48,9 @@ const items: TabsProps['items'] = [
   },
 ];
 
-const Tool: React.FC = () => <Tabs defaultActiveKey="file" items={items} onChange={onChange} />;
+const Tool: React.FC = () => {
+  const { gifState, gifDispatch } = useContext(GifContext);
+  return <Tabs defaultActiveKey="file" items={items} />;
+};
 
 export default Tool;
diff --git a/packages/web/src/components/editGif/tool/File.tsx b/packages/web/src/components/editGif/tool/File.tsx
@@ -14,7 +14,9 @@ const File = () => {
   const { t } = useTranslation();
   const fileRef = useRef(null);
   const videoRef = useRef(null);
+  const video = useRef(null);
   const [percent, setPercent] = useState(0);
+  const [time, setTime] = useState([0, 1]);
   const { user, setUser } = useContext(UserContext);
   const { gifState, gifDispatch } = useContext(GifContext);
 
@@ -137,6 +139,21 @@ const File = () => {
     const videoUrl = window.URL.createObjectURL(file);
     gifDispatch({ type: 'setVideoUrl', videoUrl: videoUrl });
     event.target.value = '';
+    video.current.src = videoUrl;
+    video.current.onloadedmetadata = function () {
+      const duration = Math.ceil(video.current.duration); // 视频时长（以秒为单位）
+      gifDispatch({ type: 'setDuration', duration: duration });
+      handleTime([0, duration]);
+    };
+  }
+
+  function handleFrameNum(value) {
+    gifDispatch({ type: 'setFrameNum', frameNum: value });
+  }
+
+  function handleTime(value) {
+    gifDispatch({ type: 'setTime', time: value });
+    setTime(value);
   }
 
   return (
@@ -169,6 +186,7 @@ const File = () => {
               className="videoRef hide"
               onChange={handleUploadVideo}
             />
+            <video ref={video} className="hide" playsInline autoPlay />
           </div>
           <div className="fileBtn" onClick={handleSaveClick}>
             <Save className="fileIcon saveIcon" theme="outline" size="27" fill="rgb(235 191 124)" />
@@ -186,13 +204,16 @@ const File = () => {
         <div className="fileItem slider">
           <Slider
             range={{ draggableTrack: true }}
-            marks={{ 0: '0s', 100: '100s' }}
-            defaultValue={[20, 50]}
+            tooltip={{ placement: 'bottom', color: '#2db7f5' }}
+            onChangeComplete={handleTime}
+            max={gifState.duration || 100}
           />
-          <div className="fileBtnTitle">时长</div>
+          <div className="fileBtnTitle">
+            时长 {time[0]} - {time[1]}(秒)
+          </div>
         </div>
         <div className="fileItem frameNum">
-          <InputNumber min={1} max={10} />
+          <InputNumber onChange={handleFrameNum} />
           <div className="fileBtnTitle">帧数</div>
         </div>
         <div className="subTitle">设置</div>

diff --git a/packages/web/src/components/editGif/tool/Play.tsx b/packages/web/src/components/editGif/tool/Play.tsx
@@ -31,12 +31,14 @@ const Play = (props) => {
     const length = gifState.videoFrames.length;
     if (index + 1 >= length) {
       setIsPlay(false);
-      props.setCurrentVideoFrame(0);
+      // props.setCurrentVideoFrame(0);
+      gifDispatch({ type: 'setIndex', index: 0 });
     } else {
       const videoFrame = gifState.videoFrames[index];
       const duration = videoFrame.duration;
       const timer = setTimeout(() => {
-        props.setCurrentVideoFrame(index);
+        // props.setCurrentVideoFrame(index);
+        gifDispatch({ type: 'setIndex', index });
         renderVideoFrame(index + 1);
       }, duration);
 

diff --git a/packages/web/src/pages/editGif/index.tsx b/packages/web/src/pages/editGif/index.tsx
@@ -146,9 +146,9 @@ const EditGif = () => {
       _videoUrl = `pearrec://${gifState.videoUrl}`;
     }
     const duration = 100;
-    const num = 0;
-    const timeStart = 0 * 1e6;
-    const timeEnd = 0 * 1e6;
+    const num = gifState.frameNum;
+    const timeStart = gifState.timeStart;
+    const timeEnd = gifState.timeEnd;
     const rendererName = '2d';
     const canvas = (document.querySelector('#canvas') as any).transferControlToOffscreen?.();
     let option = { timeStart, timeEnd, duration, num };