增加对口型视频添加

src/components/audioUpload/index.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Button, Form, Spinner, Card } from 'react-bootstrap';
+import { Button, Form, Spinner, Card, Alert } from 'react-bootstrap';
 import { toast } from 'react-toastify';
 import './style.css';
 
@@ -12,6 +12,12 @@ const AudioUpload = ({ onAudioSelected }) => {
   const handleAudioFileChange = (e) => {
     const selectedFile = e.target.files[0];
     if (selectedFile) {
+      // 检查文件类型
+      if (!selectedFile.type.startsWith('audio/')) {
+        toast.error('请选择有效的音频文件');
+        return;
+      }
+      
       setAudioFile(selectedFile);
       setAudioFileName(selectedFile.name);
       
@@ -19,6 +25,8 @@ const AudioUpload = ({ onAudioSelected }) => {
       if (typeof onAudioSelected === 'function') {
         onAudioSelected(selectedFile);
       }
+      
+      toast.success('音频文件已选择');
     }
   };
 
@@ -27,6 +35,9 @@ const AudioUpload = ({ onAudioSelected }) => {
       <Card>
         <Card.Header as="h5">上传音频（必选）</Card.Header>
         <Card.Body>
+          <Alert variant="info">
+            请上传项目需要的音频文件。音频和视频文件都是创建项目所必需的。
+          </Alert>
           <Form>
             <Form.Group controlId="audioFile" className="mb-3">
               <Form.Label>选择音频文件</Form.Label>
@@ -54,6 +65,11 @@ const AudioUpload = ({ onAudioSelected }) => {
                   请上传音频文件，这是必选项
                 </Form.Text>
               )}
+              {audioFile && (
+                <Form.Text className="text-success">
+                  音频文件已选择 ✓
+                </Form.Text>
+              )}
             </Form.Group>
           </Form>
         </Card.Body>

src/components/subtitleUpload/index.js

@@ -3,7 +3,8 @@ import { Button, Form, Spinner, Card, ListGroup, Modal, InputGroup, Alert } from
 import { toast } from 'react-toastify';
 import './style.css';
 import { bookService, bookInfoService } from '../../db';
-import { processProjectAudio } from '../../utils/audioProcessor'; // 导入音频处理工具
+// 移除音频处理器导入，因为不再需要分割音频
+// import { processProjectAudio } from '../../utils/audioProcessor';
 // 替换Node.js模块为浏览器兼容版本
 // const fs = require('fs');
 // const path = require('path');
@@ -12,7 +13,7 @@ import path from 'path-browserify';
 import os from 'os-browserify/browser';
 // fs模块在浏览器中不可用，需要通过IPC调用主进程
 
-const SubtitleUpload = ({ onProjectCreated, projectAudioFile }) => {
+const SubtitleUpload = ({ onProjectCreated, projectAudioFile, projectVideoFile }) => {
   const [file, setFile] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   const [subtitles, setSubtitles] = useState([]);
@@ -22,6 +23,7 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile }) => {
   const [isCreating, setIsCreating] = useState(false);
   const [processingAudio, setProcessingAudio] = useState(false);
   const [audioProgress, setAudioProgress] = useState(0);
+  const [processingVideo, setProcessingVideo] = useState(false);
 
   // 处理文件选择
   const handleFileChange = (e) => {
@@ -133,6 +135,11 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile }) => {
       toast.error('请先上传音频文件（必选）');
       return;
     }
+
+    if (!projectVideoFile) {
+      toast.error('请先上传视频文件（必选）');
+      return;
+    }
     
     setShowCreateModal(true);
   };
@@ -206,7 +213,7 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile }) => {
           return {
             success: true,
             path: result.filePath,
-            relativePath: path.join('audio', fileName)
+            absolutePath: result.filePath
           };
         } else {
           throw new Error(result.error);
@@ -216,10 +223,11 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile }) => {
         console.warn('Electron IPC不可用，无法保存文件到本地');
         
         // 模拟成功返回，用于开发环境测试
+        const fullPath = path.join(audioDir, fileName);
         return {
           success: true,
-          path: path.join(audioDir, fileName),
-          relativePath: path.join('audio', fileName)
+          path: fullPath,
+          absolutePath: fullPath
         };
       }
     } catch (error) {
@@ -231,6 +239,60 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile }) => {
     }
   };
 
+  // 保存视频文件到本地
+  const saveVideoFile = async (videoFile, projectId) => {
+    try {
+      const audioDir = await getAppDataPath();
+      if (!audioDir) {
+        throw new Error('无法获取视频存储路径');
+      }
+      
+      const fileName = `project_${projectId}_video.mp4`;
+      
+      // 读取文件内容
+      const buffer = await videoFile.arrayBuffer();
+      
+      // 检查electron对象是否存在
+      if (typeof window.electron !== 'undefined' && window.electron.ipcRenderer) {
+        // 通过IPC调用保存文件
+        const result = await window.electron.ipcRenderer.invoke('save-audio-file', {
+          buffer: Array.from(new Uint8Array(buffer)),
+          fileName: fileName,
+          directory: audioDir,
+          projectId: projectId,
+          isVideo: true
+        });
+        
+        if (result.success) {
+          return {
+            success: true,
+            path: result.filePath,
+            absolutePath: result.filePath
+          };
+        } else {
+          throw new Error(result.error);
+        }
+      } else {
+        // 处理非Electron环境（例如开发环境中的Web浏览器）
+        console.warn('Electron IPC不可用，无法保存文件到本地');
+        
+        // 模拟成功返回，用于开发环境测试
+        const fullPath = path.join(audioDir, fileName);
+        return {
+          success: true,
+          path: fullPath,
+          absolutePath: fullPath
+        };
+      }
+    } catch (error) {
+      console.error('保存视频文件失败:', error);
+      return {
+        success: false,
+        error: error.message
+      };
+    }
+  };
+
   // 创建项目
   const handleCreateProject = async () => {
     if (!projectTitle.trim()) {
@@ -243,16 +305,13 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile }) => {
       return;
     }
 
+    if (!projectVideoFile) {
+      toast.error('请上传视频文件（必选）');
+      return;
+    }
+
     setIsCreating(true);
     try {
-      // 创建项目记录
-      const bookId = await bookService.createBook({
-        title: projectTitle,
-        subtitle_path: file ? file.name : null,
-        audio_path: projectAudioFile ? projectAudioFile.name : null,
-        created_at: new Date().toISOString()
-      });
-
       // 为每个字幕段计算持续时间
       const processedSubtitles = subtitles.map(sub => {
         // 解析开始和结束时间
@@ -272,7 +331,16 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile }) => {
         };
       });
 
-      // 创建项目详细信息（先不包含音频路径）
+      // 创建项目记录
+      const bookId = await bookService.createBook({
+        title: projectTitle,
+        subtitle_path: file ? file.name : null,
+        audio_path: projectAudioFile ? projectAudioFile.name : null,
+        video_path: projectVideoFile ? projectVideoFile.name : null,
+        created_at: new Date().toISOString()
+      });
+
+      // 创建项目详细信息
       const bookInfoPromises = processedSubtitles.map(sub => {
         return bookInfoService.createBookInfo({
           book_id: bookId,
@@ -284,50 +352,42 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile }) => {
         });
       });
 
-      const createdSegments = await Promise.all(bookInfoPromises);
+      await Promise.all(bookInfoPromises);
       
-      // 处理音频文件
+      // 处理音频文件 - 仅保存路径
       setProcessingAudio(true);
-      toast.info('正在处理音频文件，请稍候...');
+      toast.info('正在保存音频文件，请稍候...');
       
       // 保存完整音频文件
       const savedAudio = await saveAudioFile(projectAudioFile, bookId);
       
       if (savedAudio.success) {
-        // 更新项目记录中的音频路径为相对路径
+        // 更新项目记录中的音频路径为绝对路径
         await bookService.updateBook(bookId, {
-          audio_path: savedAudio.relativePath
+          audio_path: savedAudio.absolutePath
         });
-        
-        // 获取所有已创建的分镜信息
-        const segments = await bookInfoService.getBookInfoByBookId(bookId);
-        
-        // 切割音频
-        const audioProcessResult = await processProjectAudio(
-          bookId,
-          savedAudio.path,
-          segments,
-          getAppDataPath()
-        );
-        
-        if (audioProcessResult.success) {
-          // 更新每个分镜的音频路径
-          const updatePromises = audioProcessResult.segments.map(segment => {
-            return bookInfoService.updateBookInfo(segment.segmentId, {
-              audio_path: segment.relativePath
-            });
-          });
-          
-          await Promise.all(updatePromises);
-          
-          toast.success(`音频处理完成，已为 ${audioProcessResult.processedSegments}/${audioProcessResult.totalSegments} 个分镜生成独立音频`);
-        } else {
-          toast.warning(`音频切割过程中出现一些问题: ${audioProcessResult.error}`);
-        }
+        toast.success('音频文件路径已保存');
       } else {
         toast.warning(`保存音频文件失败: ${savedAudio.error}`);
       }
 
+      // 处理视频文件 - 仅保存路径
+      setProcessingVideo(true);
+      toast.info('正在保存视频文件，请稍候...');
+      
+      // 保存视频文件
+      const savedVideo = await saveVideoFile(projectVideoFile, bookId);
+      
+      if (savedVideo.success) {
+        // 更新项目记录中的视频路径为绝对路径
+        await bookService.updateBook(bookId, {
+          video_path: savedVideo.absolutePath
+        });
+        toast.success('视频文件路径已保存');
+      } else {
+        toast.warning(`保存视频文件失败: ${savedVideo.error}`);
+      }
+
       toast.success('项目创建成功！');
       setShowCreateModal(false);
       
@@ -337,6 +397,7 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile }) => {
       setFileName('');
       setSubtitles([]);
       setProcessingAudio(false);
+      setProcessingVideo(false);
       
       // 调用回调函数
       if (typeof onProjectCreated === 'function') {
@@ -348,6 +409,7 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile }) => {
     } finally {
       setIsCreating(false);
       setProcessingAudio(false);
+      setProcessingVideo(false);
     }
   };
 
@@ -427,7 +489,7 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile }) => {
                   variant="success" 
                   size="lg" 
                   onClick={openCreateProjectModal}
-                  disabled={!projectAudioFile}
+                  disabled={!projectAudioFile || !projectVideoFile}
                 >
                   创建项目
                 </Button>
@@ -436,6 +498,11 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile }) => {
                     请先上传音频文件（必选）
                   </div>
                 )}
+                {!projectVideoFile && (
+                  <div className="text-danger mt-2">
+                    请先上传视频文件（必选）
+                  </div>
+                )}
               </div>
             </>
           )}
@@ -443,8 +510,8 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile }) => {
       </Card>
 
       {/* 创建项目模态框 */}
-      <Modal show={showCreateModal} onHide={() => !isCreating && !processingAudio && setShowCreateModal(false)}>
-        <Modal.Header closeButton={!isCreating && !processingAudio}>
+      <Modal show={showCreateModal} onHide={() => !isCreating && !processingAudio && !processingVideo && setShowCreateModal(false)}>
+        <Modal.Header closeButton={!isCreating && !processingAudio && !processingVideo}>
           <Modal.Title>创建新项目</Modal.Title>
         </Modal.Header>
         <Modal.Body>
@@ -456,7 +523,7 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile }) => {
                 placeholder="请输入项目标题"
                 value={projectTitle}
                 onChange={(e) => setProjectTitle(e.target.value)}
-                disabled={isCreating || processingAudio}
+                disabled={isCreating || processingAudio || processingVideo}
               />
             </Form.Group>
             <Form.Group className="mt-3">
@@ -478,6 +545,15 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile }) => {
               </InputGroup>
             </Form.Group>
             <Form.Group className="mt-3">
+              <Form.Label>视频文件</Form.Label>
+              <InputGroup>
+                <Form.Control
+                  readOnly
+                  value={projectVideoFile ? projectVideoFile.name : '未选择视频文件'}
+                />
+              </InputGroup>
+            </Form.Group>
+            <Form.Group className="mt-3">
               <Form.Label>字幕条数</Form.Label>
               <Form.Control
                 readOnly
@@ -485,10 +561,10 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile }) => {
               />
             </Form.Group>
             
-            {processingAudio && (
+            {(processingAudio || processingVideo) && (
               <div className="mt-3">
                 <Alert variant="info">
-                  正在处理音频文件，请稍候...这可能需要一些时间。
+                  正在保存{processingAudio ? '音频' : '视频'}文件，请稍候...
                 </Alert>
               </div>
             )}
@@ -498,16 +574,16 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile }) => {
           <Button 
             variant="secondary" 
             onClick={() => setShowCreateModal(false)}
-            disabled={isCreating || processingAudio}
+            disabled={isCreating || processingAudio || processingVideo}
           >
             取消
           </Button>
           <Button 
             variant="primary" 
             onClick={handleCreateProject}
-            disabled={isCreating || processingAudio}
+            disabled={isCreating || processingAudio || processingVideo}
           >
-            {isCreating || processingAudio ? (
+            {isCreating || processingAudio || processingVideo ? (
               <>
                 <Spinner
                   as="span"
@@ -516,7 +592,10 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile }) => {
                   role="status"
                   aria-hidden="true"
                 />
-                <span className="ml-2">{processingAudio ? '处理音频中...' : '创建中...'}</span>
+                <span className="ml-2">
+                  {processingAudio ? '保存音频中...' : 
+                   processingVideo ? '保存视频中...' : '创建中...'}
+                </span>
               </>
             ) : (
               '确认创建'

src/components/videoUpload/index.js

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { Button, Form, Spinner, Card, Alert } from 'react-bootstrap';
+import { toast } from 'react-toastify';
+import './style.css';
+
+const VideoUpload = ({ onVideoSelected }) => {
+  const [videoFile, setVideoFile] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [videoFileName, setVideoFileName] = useState('');
+
+  // 处理视频文件选择
+  const handleVideoFileChange = (e) => {
+    const selectedFile = e.target.files[0];
+    if (selectedFile) {
+      // 检查文件类型
+      if (!selectedFile.type.startsWith('video/')) {
+        toast.error('请选择有效的视频文件');
+        return;
+      }
+      
+      setVideoFile(selectedFile);
+      setVideoFileName(selectedFile.name);
+      
+      // 调用回调函数将视频文件传递给父组件
+      if (typeof onVideoSelected === 'function') {
+        onVideoSelected(selectedFile);
+      }
+      
+      toast.success('视频文件已选择');
+    }
+  };
+
+  return (
+    <div className="video-upload-container">
+      <Card>
+        <Card.Header as="h5">上传视频（必选）</Card.Header>
+        <Card.Body>
+          <Alert variant="info">
+            请上传项目需要的视频文件。音频和视频文件都是创建项目所必需的。
+          </Alert>
+          <Form>
+            <Form.Group controlId="videoFile" className="mb-3">
+              <Form.Label>选择视频文件</Form.Label>
+              <div className="custom-file-upload">
+                <input
+                  type="file"
+                  accept="video/*"
+                  onChange={handleVideoFileChange}
+                  id="video-file-input"
+                  className="d-none"
+                  required
+                />
+                <div className="file-upload-box">
+                  <Button 
+                    variant="outline-primary" 
+                    onClick={() => document.getElementById('video-file-input').click()}
+                  >
+                    选择视频
+                  </Button>
+                  <span className="ml-2">{videoFileName || '未选择视频文件'}</span>
+                </div>
+              </div>
+              {!videoFile && (
+                <Form.Text className="text-danger">
+                  请上传视频文件，这是必选项
+                </Form.Text>
+              )}
+              {videoFile && (
+                <Form.Text className="text-success">
+                  视频文件已选择 ✓
+                </Form.Text>
+              )}
+            </Form.Group>
+          </Form>
+        </Card.Body>
+      </Card>
+    </div>
+  );
+};
+
+export default VideoUpload; 

src/components/videoUpload/style.css

@@ -0,0 +1,31 @@
+.video-upload-container {
+  margin-bottom: 2rem;
+}
+
+.custom-file-upload {
+  display: flex;
+  align-items: center;
+}
+
+.file-upload-box {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.file-upload-box span {
+  margin-left: 1rem;
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.video-upload-container .card {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.video-upload-container .card-header {
+  background-color: #e7f5ff;
+  color: #0c63e4;
+} 

src/pages/home/home.css

@@ -258,4 +258,19 @@
 .modal-footer {
   background-color: #f8f9fa;
   border-top: 1px solid #dee2e6;
+}
+
+/* 文件路径显示 */
+.file-path-badge {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px;
+}
+
+.file-path-badge .badge {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+  max-width: 100%;
 }

src/pages/home/home.js

@@ -6,6 +6,7 @@ import { toast } from 'react-toastify';
 import VideoDownload from '../../components/videoDownload';
 import SubtitleUpload from '../../components/subtitleUpload';
 import AudioUpload from '../../components/audioUpload';
+import VideoUpload from '../../components/videoUpload';
 import { bookService, bookInfoService, getDbPath } from '../../db';
 import CozeApiSettings from '../../components/CozeApiSettings';
 import { hasValidToken } from '../../utils/cozeConfig';
@@ -20,6 +21,7 @@ const Home = forwardRef((props, ref) => {
   const [showAudioPlayer, setShowAudioPlayer] = useState(false);
   const [currentAudio, setCurrentAudio] = useState(null);
   const [projectAudioFile, setProjectAudioFile] = useState(null);
+  const [projectVideoFile, setProjectVideoFile] = useState(null);
   const history = useHistory();
 
   const handleAddProject = () => {
@@ -377,6 +379,7 @@ const Home = forwardRef((props, ref) => {
                             <th>创建时间</th>
                             <th>字幕文件</th>
                             <th>音频文件</th>
+                            <th>视频文件</th>
                             <th>操作</th>
                           </tr>
                         </thead>
@@ -394,7 +397,26 @@ const Home = forwardRef((props, ref) => {
                               </td>
                               <td>
                                 {project.audio_path ? (
-                                  <Badge variant="success">{project.audio_path}</Badge>
+                                  <div className="file-path-badge" title={project.audio_path}>
+                                    <Badge bg="success">
+                                      {project.audio_path.length > 15 
+                                        ? project.audio_path.substring(0, 6) + '...' + project.audio_path.substring(project.audio_path.length - 6) 
+                                        : project.audio_path}
+                                    </Badge>
+                                  </div>
+                                ) : (
+                                  <span className="text-muted">无</span>
+                                )}
+                              </td>
+                              <td>
+                                {project.video_path ? (
+                                  <div className="file-path-badge" title={project.video_path}>
+                                    <Badge bg="primary">
+                                      {project.video_path.length > 15 
+                                        ? project.video_path.substring(0, 6) + '...' + project.video_path.substring(project.video_path.length - 6) 
+                                        : project.video_path}
+                                    </Badge>
+                                  </div>
                                 ) : (
                                   <span className="text-muted">无</span>
                                 )}
@@ -470,11 +492,12 @@ const Home = forwardRef((props, ref) => {
 
               <AudioUpload onAudioSelected={(audioFile) => setProjectAudioFile(audioFile)} />
               
-              {/* <VideoDownload /> */}
+              <VideoUpload onVideoSelected={(videoFile) => setProjectVideoFile(videoFile)} />
 
               <SubtitleUpload 
                 onProjectCreated={backToHome} 
-                projectAudioFile={projectAudioFile} 
+                projectAudioFile={projectAudioFile}
+                projectVideoFile={projectVideoFile}
               />
 
             </>