xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

取多多余的进度条提示信息,所有提示信息走work-flow页面export-service只作为公用方法不做弹窗提醒

Browse Source
This commit is contained in:
qikongjian 2025-09-17 14:24:48 +08:00
parent d826b3c57e
commit 8836138283
2 changed files with 75 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/pages/work-flow.tsx
View File

@ -14,7 +14,7 @@ import { SaveEditUseCase } from "@/app/service/usecase/SaveEditUseCase";
import { useSearchParams } from "next/navigation"; import { useSearchParams } from "next/navigation";
import SmartChatBox from "@/components/SmartChatBox/SmartChatBox"; import SmartChatBox from "@/components/SmartChatBox/SmartChatBox";
import { Drawer, Tooltip, notification } from 'antd'; import { Drawer, Tooltip, notification } from 'antd';
import { showEditingNotification } from "@/components/pages/work-flow/editing-notification"; // import { showEditingNotification } from "@/components/pages/work-flow/editing-notification";
// import { AIEditingIframeButton } from './work-flow/ai-editing-iframe'; // import { AIEditingIframeButton } from './work-flow/ai-editing-iframe';
import { exportVideoWithRetry } from '@/utils/export-service'; import { exportVideoWithRetry } from '@/utils/export-service';
@ -76,7 +76,8 @@ const WorkFlow = React.memo(function WorkFlow() {
console.log('📊 导出进度更新:', progressData); console.log('📊 导出进度更新:', progressData);
setExportProgress(progressData); setExportProgress(progressData);
// 根据状态显示不同的通知 // 根据状态显示不同的通知 - 已注释
/*
if (progressData.status === 'processing') { if (progressData.status === 'processing') {
notification.info({ notification.info({
message: '导出进度', message: '导出进度',
@ -102,6 +103,7 @@ const WorkFlow = React.memo(function WorkFlow() {
key: 'export-progress' key: 'export-progress'
}); });
} }
*/
}, []); }, []);
// 处理编辑计划生成完成的回调 // 处理编辑计划生成完成的回调
const handleEditPlanGenerated = useCallback(() => { const handleEditPlanGenerated = useCallback(() => {
@ -125,6 +127,8 @@ const WorkFlow = React.memo(function WorkFlow() {
setTimeout(() => { setTimeout(() => {
handleTestExportRef.current?.(); handleTestExportRef.current?.();
}, 0); }, 0);
// 编辑通知已全部注释
/*
editingNotificationKey.current = `editing-${Date.now()}`; editingNotificationKey.current = `editing-${Date.now()}`;
showEditingNotification({ showEditingNotification({
description: 'Performing intelligent editing...', description: 'Performing intelligent editing...',
@ -172,6 +176,7 @@ const WorkFlow = React.memo(function WorkFlow() {
}, 200); }, 200);
} }
}); });
*/
}, [episodeId]); // handleTestExport 在内部调用，无需作为依赖 }, [episodeId]); // handleTestExport 在内部调用，无需作为依赖
/** 处理导出失败 */ /** 处理导出失败 */
@ -221,7 +226,8 @@ const WorkFlow = React.memo(function WorkFlow() {
console.log('changedIndex_work-flow', currentSketchIndex, taskObject); console.log('changedIndex_work-flow', currentSketchIndex, taskObject);
}, [currentSketchIndex, taskObject]); }, [currentSketchIndex, taskObject]);
// 监听粗剪是否完成，如果完成 更新 showEditingNotification 的状态 为完成，延时 3s 并关闭 // 监听粗剪是否完成 - 已注释，不显示右上角成功通知
/*
useEffect(() => { useEffect(() => {
console.log('🎬 final video useEffect triggered:', { console.log('🎬 final video useEffect triggered:', {
finalUrl: taskObject.final.url, finalUrl: taskObject.final.url,
@ -255,6 +261,7 @@ const WorkFlow = React.memo(function WorkFlow() {
}); });
} }
}, [taskObject.final, isHandleEdit, episodeId]); }, [taskObject.final, isHandleEdit, episodeId]);
*/
const handleEditModalOpen = useCallback((tab: string) => { const handleEditModalOpen = useCallback((tab: string) => {
setActiveEditTab(tab); setActiveEditTab(tab);
@ -435,7 +442,8 @@ const WorkFlow = React.memo(function WorkFlow() {
} }
*/} */}
{/* 导出进度显示 */} {/* 导出进度显示 - 已注释 */}
{/*
{exportProgress && exportProgress.status === 'processing' && ( {exportProgress && exportProgress.status === 'processing' && (
<div className="fixed right-[1rem] bottom-[20rem] z-[49]"> <div className="fixed right-[1rem] bottom-[20rem] z-[49]">
<div className="backdrop-blur-lg bg-black/30 border border-white/20 rounded-lg p-4 max-w-xs"> <div className="backdrop-blur-lg bg-black/30 border border-white/20 rounded-lg p-4 max-w-xs">
@ -455,6 +463,7 @@ const WorkFlow = React.memo(function WorkFlow() {
</div> </div>
</div> </div>
)} )}
*/}
{/* 测试导出接口按钮 - 隐藏显示（仍可通过逻辑调用） */} {/* 测试导出接口按钮 - 隐藏显示（仍可通过逻辑调用） */}
<div <div

103
utils/export-service.ts
View File

@ -115,8 +115,8 @@ export class VideoExportService {
this.config = { this.config = {
maxRetries: config.maxRetries || 3, maxRetries: config.maxRetries || 3,
pollInterval: config.pollInterval || 5000, // 5秒轮询 pollInterval: config.pollInterval || 5000, // 5秒轮询
apiBaseUrl: process.env.NEXT_PUBLIC_CUT_URL || 'https://smartcut.api.movieflow.ai', apiBaseUrl: 'https://smartcut.api.movieflow.ai',
//apiBaseUrl: config.apiBaseUrl || 'https://smartcut.api.movieflow.ai' //apiBaseUrl: process.env.NEXT_PUBLIC_CUT_URL || || 'https://smartcut.api.movieflow.ai'
}; };
} }
@ -356,6 +356,7 @@ export class VideoExportService {
}); });
console.log('📡 导出接口响应状态:', response.status, response.statusText); console.log('📡 导出接口响应状态:', response.status, response.statusText);
console.log('📋 响应头信息:', Object.fromEntries(response.headers.entries()));
if (!response.ok) { if (!response.ok) {
const errorText = await response.text(); const errorText = await response.text();
@ -363,6 +364,8 @@ export class VideoExportService {
throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`); throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`);
} }
console.log('✅ 导出接口调用成功，开始处理SSE流...');
// 处理SSE流式响应 // 处理SSE流式响应
console.log('📺 开始处理流式响应...'); console.log('📺 开始处理流式响应...');
const reader = response.body?.getReader(); const reader = response.body?.getReader();
@ -410,12 +413,14 @@ export class VideoExportService {
break; break;
case 'complete': case 'complete':
console.log('🎉 导出完成！', eventData); console.log('🎉 导出完成！完整事件数据:', JSON.stringify(eventData, null, 2));
finalResult = eventData; finalResult = eventData;
// 确保最终结果包含任务ID // 确保最终结果包含任务ID
if (detectedTaskId && !finalResult.export_id && !finalResult.task_id) { if (detectedTaskId && !finalResult.export_id && !finalResult.task_id) {
finalResult.export_id = detectedTaskId; finalResult.export_id = detectedTaskId;
console.log('📋 添加检测到的任务ID到完成结果:', detectedTaskId);
} }
console.log('✅ 最终SSE结果:', JSON.stringify(finalResult, null, 2));
// 导出完成，退出循环 // 导出完成，退出循环
return finalResult; return finalResult;
@ -468,13 +473,14 @@ export class VideoExportService {
} }
const progressData = await response.json(); const progressData = await response.json();
console.log('📈 进度数据:', progressData); console.log('📈 进度查询响应状态:', response.status, response.statusText);
console.log('📊 完整进度数据:', JSON.stringify(progressData, null, 2));
// 根据API返回的数据结构处理 // 根据API返回的数据结构处理
const { status, progress } = progressData; const { status, progress } = progressData;
if (status === 'completed') { if (status === 'completed') {
console.log('🎉 导出任务完成！', progress); console.log('🎉 导出任务完成！progress数据:', JSON.stringify(progress, null, 2));
// 触发完成状态回调 // 触发完成状态回调
if (progressCallback) { if (progressCallback) {
@ -487,7 +493,7 @@ export class VideoExportService {
}); });
} }
return { const completedResult = {
task_id: taskId, task_id: taskId,
status: status, status: status,
video_url: progress?.video_url, video_url: progress?.video_url,
@ -497,6 +503,9 @@ export class VideoExportService {
watermark_status: progress?.watermark_status, watermark_status: progress?.watermark_status,
upload_time: progress?.upload_time upload_time: progress?.upload_time
}; };
console.log('✅ 轮询返回的完成结果:', JSON.stringify(completedResult, null, 2));
return completedResult;
} else if (status === 'failed') { } else if (status === 'failed') {
console.log('❌ 导出任务失败，需要重新调用 api/export/stream'); console.log('❌ 导出任务失败，需要重新调用 api/export/stream');
@ -600,13 +609,15 @@ export class VideoExportService {
if (!taskId) { if (!taskId) {
console.log('⚠️ SSE结果中未找到任务ID，无法进行进度轮询'); console.log('⚠️ SSE结果中未找到任务ID，无法进行进度轮询');
// 显示警告通知 // 显示警告通知 - 已注释
/*
notification.warning({ notification.warning({
message: `第${currentAttempt}次导出接口调用成功`, message: `第${currentAttempt}次导出接口调用成功`,
description: 'SSE流中未找到任务ID，无法进行进度轮询。请检查API返回数据结构。', description: 'SSE流中未找到任务ID，无法进行进度轮询。请检查API返回数据结构。',
placement: 'topRight', placement: 'topRight',
duration: 8 duration: 8
}); });
*/
// 如果SSE中直接有完整结果，直接处理 // 如果SSE中直接有完整结果，直接处理
if (result?.download_url || result?.video_url) { if (result?.download_url || result?.video_url) {
@ -614,14 +625,14 @@ export class VideoExportService {
console.log('📥 直接从SSE结果下载视频:', downloadUrl); console.log('📥 直接从SSE结果下载视频:', downloadUrl);
await downloadVideo(downloadUrl); await downloadVideo(downloadUrl);
notification.success({ // notification.success({
message: '视频下载完成！', // message: '视频下载完成！',
description: result?.file_size // description: result?.file_size
? `文件大小: ${(result.file_size / 1024 / 1024).toFixed(2)}MB` // ? `文件大小: ${(result.file_size / 1024 / 1024).toFixed(2)}MB`
: '视频已成功下载到本地', // : '视频已成功下载到本地',
placement: 'topRight', // placement: 'topRight',
duration: 8 // duration: 8
}); // });
} }
return result; return result;
@ -635,18 +646,26 @@ export class VideoExportService {
// 导出成功 // 导出成功
console.log('🎉 导出成功完成！'); console.log('🎉 导出成功完成！');
console.log('📋 轮询最终结果:', JSON.stringify(finalExportResult, null, 2));
// 显示最终成功通知 // 显示最终成功通知 - 已注释
/*
notification.success({ notification.success({
message: `导出成功！(第${currentAttempt}次尝试)`, message: `导出成功！(第${currentAttempt}次尝试)`,
description: `文件大小: ${(finalExportResult.file_size! / 1024 / 1024).toFixed(2)}MB，正在下载到本地...`, description: `文件大小: ${(finalExportResult.file_size! / 1024 / 1024).toFixed(2)}MB，正在下载到本地...`,
placement: 'topRight', placement: 'topRight',
duration: 8 duration: 8
}); });
*/
// 自动下载视频 // 自动下载视频
if (finalExportResult.video_url) { if (finalExportResult.video_url) {
console.log('📥 开始下载视频:', finalExportResult.video_url); console.log('📥 开始下载视频:', finalExportResult.video_url);
console.log('📋 视频文件信息:', {
url: finalExportResult.video_url,
file_size: finalExportResult.file_size,
quality_mode: finalExportResult.quality_mode
});
await downloadVideo(finalExportResult.video_url); await downloadVideo(finalExportResult.video_url);
console.log('✅ 视频下载完成'); console.log('✅ 视频下载完成');
} }
@ -669,12 +688,12 @@ export class VideoExportService {
if (currentAttempt < this.config.maxRetries) { if (currentAttempt < this.config.maxRetries) {
console.log(`🔄 准备第${currentAttempt + 1}次重试（重新调用 api/export/stream）...`); console.log(`🔄 准备第${currentAttempt + 1}次重试（重新调用 api/export/stream）...`);
notification.warning({ // notification.warning({
message: `第${currentAttempt}次导出失败`, // message: `第${currentAttempt}次导出失败`,
description: `导出状态: failed。正在准备第${currentAttempt + 1}次重试...`, // description: `导出状态: failed。正在准备第${currentAttempt + 1}次重试...`,
placement: 'topRight', // placement: 'topRight',
duration: 5 // duration: 5
}); // });
currentAttempt++; currentAttempt++;
continue; // 继续重试循环，重新调用 api/export/stream continue; // 继续重试循环，重新调用 api/export/stream
@ -687,12 +706,12 @@ export class VideoExportService {
if (currentAttempt < this.config.maxRetries) { if (currentAttempt < this.config.maxRetries) {
console.log(`🔄 轮询失败，准备第${currentAttempt + 1}次重试...`); console.log(`🔄 轮询失败，准备第${currentAttempt + 1}次重试...`);
notification.warning({ // notification.warning({
message: `第${currentAttempt}次轮询失败`, // message: `第${currentAttempt}次轮询失败`,
description: `${pollError instanceof Error ? pollError.message : '未知错误'}。正在准备第${currentAttempt + 1}次重试...`, // description: `${pollError instanceof Error ? pollError.message : '未知错误'}。正在准备第${currentAttempt + 1}次重试...`,
placement: 'topRight', // placement: 'topRight',
duration: 5 // duration: 5
}); // });
currentAttempt++; currentAttempt++;
continue; // 继续重试循环 continue; // 继续重试循环
@ -700,12 +719,12 @@ export class VideoExportService {
// 已达到最大重试次数，回退到SSE结果 // 已达到最大重试次数，回退到SSE结果
console.log('❌ 已达到最大重试次数，回退到SSE结果'); console.log('❌ 已达到最大重试次数，回退到SSE结果');
notification.error({ // notification.error({
message: '轮询重试失败', // message: '轮询重试失败',
description: `已重试${this.config.maxRetries}次仍然失败。${pollError instanceof Error ? pollError.message : '未知错误'}`, // description: `已重试${this.config.maxRetries}次仍然失败。${pollError instanceof Error ? pollError.message : '未知错误'}`,
placement: 'topRight', // placement: 'topRight',
duration: 10 // duration: 10
}); // });
// 回退到SSE结果 // 回退到SSE结果
if (result?.download_url || result?.video_url) { if (result?.download_url || result?.video_url) {
@ -729,12 +748,12 @@ export class VideoExportService {
if (currentAttempt < this.config.maxRetries) { if (currentAttempt < this.config.maxRetries) {
console.log(`🔄 第${currentAttempt}次尝试失败，准备第${currentAttempt + 1}次重试...`); console.log(`🔄 第${currentAttempt}次尝试失败，准备第${currentAttempt + 1}次重试...`);
notification.warning({ // notification.warning({
message: `第${currentAttempt}次导出尝试失败`, // message: `第${currentAttempt}次导出尝试失败`,
description: `${attemptError instanceof Error ? attemptError.message : '未知错误'}。正在准备第${currentAttempt + 1}次重试...`, // description: `${attemptError instanceof Error ? attemptError.message : '未知错误'}。正在准备第${currentAttempt + 1}次重试...`,
placement: 'topRight', // placement: 'topRight',
duration: 5 // duration: 5
}); // });
currentAttempt++; currentAttempt++;
continue; // 继续重试循环 continue; // 继续重试循环
@ -754,13 +773,15 @@ export class VideoExportService {
// 清除缓存的请求数据 // 清除缓存的请求数据
this.cachedExportRequest = null; this.cachedExportRequest = null;
// 显示最终错误通知 // 显示最终错误通知 - 已注释
/*
notification.error({ notification.error({
message: '视频导出失败', message: '视频导出失败',
description: `经过${this.config.maxRetries}次尝试后仍然失败：${error instanceof Error ? error.message : '未知错误'}`, description: `经过${this.config.maxRetries}次尝试后仍然失败：${error instanceof Error ? error.message : '未知错误'}`,
placement: 'topRight', placement: 'topRight',
duration: 10 duration: 10
}); });
*/
throw error; throw error;
} }