forked from 77media/video-flow
更新工作流组件,新增回退到指定步骤的功能,并优化暂停/播放按钮的显示逻辑。同时,编辑模态框中集成了回退功能,确保在不同选项下能够正确应用剧本。更新了相关接口的导入,提升了代码的可读性和功能性。
This commit is contained in:
parent
99ea9a2c0a
commit
c12b77a74e
@ -46,7 +46,8 @@ export default function WorkFlow() {
|
||||
mode,
|
||||
setIsPauseWorkFlow,
|
||||
setAnyAttribute,
|
||||
applyScript
|
||||
applyScript,
|
||||
fallbackToStep
|
||||
} = useWorkflowData();
|
||||
|
||||
const {
|
||||
@ -225,8 +226,8 @@ export default function WorkFlow() {
|
||||
|
||||
{/* 暂停/播放按钮 */}
|
||||
{
|
||||
currentStep !== '6' && (
|
||||
<div className="absolute right-12 bottom-16 z-[9999] flex gap-4">
|
||||
(currentStep !== '6' && currentStep !== '0') && (
|
||||
<div className="absolute right-12 bottom-16 z-[49] flex gap-4">
|
||||
<GlassIconButton
|
||||
icon={isPauseWorkFlow ? Play : Pause}
|
||||
size='lg'
|
||||
@ -273,6 +274,8 @@ export default function WorkFlow() {
|
||||
setIsPauseWorkFlow={setIsPauseWorkFlow}
|
||||
setAnyAttribute={setAnyAttribute}
|
||||
isPauseWorkFlow={isPauseWorkFlow}
|
||||
applyScript={applyScript}
|
||||
fallbackToStep={fallbackToStep}
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { detailScriptEpisodeNew, getScriptTitle, getRunningStreamData } from '@/api/video_flow';
|
||||
import { detailScriptEpisodeNew, getScriptTitle, getRunningStreamData, pauseMovieProjectPlan, resumeMovieProjectPlan } from '@/api/video_flow';
|
||||
import { useAppDispatch, useAppSelector } from '@/lib/store/hooks';
|
||||
import { setSketchCount, setVideoCount } from '@/lib/store/workflowSlice';
|
||||
import { useScriptService } from "@/app/service/Interaction/ScriptService";
|
||||
@ -96,7 +96,7 @@ export function useWorkflowData() {
|
||||
console.log('开始初始化剧本', originalText);
|
||||
originalText && initializeFromProject(episodeId, originalText).then(() => {
|
||||
console.log('应用剧本');
|
||||
// 默认模式下 应用剧本
|
||||
// 自动模式下 应用剧本;手动模式 需要点击 下一步 触发
|
||||
mode.includes('auto') && applyScript();
|
||||
});
|
||||
}, [originalText]);
|
||||
@ -110,7 +110,11 @@ export function useWorkflowData() {
|
||||
}, [scriptBlocksMemo]);
|
||||
// 监听继续 请求更新数据
|
||||
useEffect(() => {
|
||||
|
||||
if (isPauseWorkFlow) {
|
||||
pauseMovieProjectPlan({ project_id: episodeId });
|
||||
} else {
|
||||
resumeMovieProjectPlan({ project_id: episodeId });
|
||||
}
|
||||
}, [isPauseWorkFlow]);
|
||||
|
||||
// 自动开始播放一轮
|
||||
@ -568,6 +572,12 @@ export function useWorkflowData() {
|
||||
}
|
||||
};
|
||||
|
||||
// 回退到 指定状态 重新获取数据
|
||||
const fallbackToStep = (step: string) => {
|
||||
setCurrentStep(step);
|
||||
setNeedStreamData(true);
|
||||
}
|
||||
|
||||
// 重试加载数据
|
||||
const retryLoadData = () => {
|
||||
setDataLoadError(null);
|
||||
@ -617,6 +627,7 @@ export function useWorkflowData() {
|
||||
mode,
|
||||
setIsPauseWorkFlow,
|
||||
setAnyAttribute,
|
||||
applyScript
|
||||
applyScript,
|
||||
fallbackToStep
|
||||
};
|
||||
}
|
||||
|
||||
@ -29,6 +29,7 @@ interface EditModalProps {
|
||||
isPauseWorkFlow: boolean;
|
||||
scriptData: any[] | null;
|
||||
applyScript: any;
|
||||
fallbackToStep: any;
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
@ -57,7 +58,8 @@ export function EditModal({
|
||||
setAnyAttribute,
|
||||
isPauseWorkFlow,
|
||||
scriptData,
|
||||
applyScript
|
||||
applyScript,
|
||||
fallbackToStep
|
||||
}: EditModalProps) {
|
||||
const [activeTab, setActiveTab] = useState(activeEditTab);
|
||||
const [currentIndex, setCurrentIndex] = useState(currentSketchIndex);
|
||||
@ -104,6 +106,13 @@ export function EditModal({
|
||||
|
||||
const handleConfirmGotoFallback = () => {
|
||||
console.log('handleConfirmGotoFallback');
|
||||
if (activeTab === '0') {
|
||||
fallbackToStep('0');
|
||||
// 应用剧本
|
||||
applyScript();
|
||||
} else {
|
||||
fallbackToStep('1');
|
||||
}
|
||||
}
|
||||
const handleCloseRemindFallbackPanel = () => {
|
||||
setIsRemindFallbackOpen(false);
|
||||
@ -295,7 +304,7 @@ export function EditModal({
|
||||
<div className="flex flex-col items-center gap-4 text-white py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<TriangleAlert className="w-6 h-6 text-yellow-400" />
|
||||
<p className="text-lg font-medium">将重新生成视频并剪辑,是否需要继续?</p>
|
||||
<p className="text-lg font-medium">The task will be regenerated and edited. Do you want to continue?</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 mt-2">
|
||||
@ -305,7 +314,7 @@ export function EditModal({
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-md transition-colors duration-200 flex items-center gap-2"
|
||||
>
|
||||
<Undo2 className="w-4 h-4" />
|
||||
继续
|
||||
Continue
|
||||
</button>
|
||||
|
||||
<button
|
||||
@ -314,7 +323,7 @@ export function EditModal({
|
||||
className="px-4 py-2 bg-gray-600 hover:bg-gray-700 rounded-md transition-colors duration-200 flex items-center gap-2"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
取消
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -236,7 +236,7 @@ export function ShotTabContent({
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm whitespace-nowrap flex items-center gap-1">
|
||||
<span className='text-white/50'>Segment {index + 1}</span>
|
||||
<span>Segment {index + 1}</span>
|
||||
{shot.status === 0 && (
|
||||
<Loader2 className="w-4 h-4 animate-spin text-blue-500" />
|
||||
)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user