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

应用剧本

Browse Source
This commit is contained in:
北枳 2025-08-08 13:36:44 +08:00
parent 817c5d5144
commit b974f56f2d
7 changed files with 57 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/service/Interaction/ScriptService.ts
View File

@ -90,7 +90,7 @@ export interface UseScriptService {
language: string
) => Promise<void>;
/** 设置任何属性 */
setAnyAttribute: (type: string, value: SetStateAction<string>, tags?: string[]) => void;
setAnyAttribute: any;
}
/**
@ -391,42 +391,42 @@ export const useScriptService = (): UseScriptService => {
);
const setAnyAttributeWrapper = useCallback(
(type: string, value: SetStateAction<string>, tags?: string[]) => {
(type: string, value: string,callback: (old: string) => void=() => {}) => {
console.log('setAnyAttributeWrapper', type);
if (type === 'synopsis') {
setFieldOld(synopsis)
scriptEditUseCase.replaceScript(fieldOld,synopsis)
scriptEditUseCase.replaceScript(fieldOld,value )
setSynopsisWrapper(value);
} else if (type === 'categories') {
setFieldOld(categories.join(','))
scriptEditUseCase.replaceScript(fieldOld,categories.join(','))
setCategoriesWrapper(tags || []);
scriptEditUseCase.replaceScript(fieldOld,value)
setCategoriesWrapper(value.split(',') || []);
} else if (type === 'protagonist') {
setFieldOld(protagonist)
scriptEditUseCase.replaceScript(fieldOld,protagonist)
scriptEditUseCase.replaceScript(fieldOld,value)
setProtagonistWrapper(value);
} else if (type === 'incitingIncident') {
setFieldOld(incitingIncident)
scriptEditUseCase.replaceScript(fieldOld,incitingIncident)
scriptEditUseCase.replaceScript(fieldOld,value)
setIncitingIncidentWrapper(value);
} else if (type === 'problem') {
setFieldOld(problem)
scriptEditUseCase.replaceScript(fieldOld,problem)
scriptEditUseCase.replaceScript(fieldOld,value)
setProblemWrapper(value);
} else if (type === 'conflict') {
setFieldOld(conflict)
scriptEditUseCase.replaceScript(fieldOld,conflict)
scriptEditUseCase.replaceScript(fieldOld,value)
setConflictWrapper(value);
} else if (type === 'stakes') {
setFieldOld(stakes)
scriptEditUseCase.replaceScript(fieldOld,stakes)
scriptEditUseCase.replaceScript(fieldOld,value)
setStakesWrapper(value);
} else if (type === 'characterArc') {
setFieldOld(characterArc)
scriptEditUseCase.replaceScript(fieldOld,characterArc)
scriptEditUseCase.replaceScript(fieldOld,value)
setCharacterArcWrapper(value);
}
callback(fieldOld)
},
[categories, characterArc, conflict, fieldOld, incitingIncident, problem, protagonist, scriptEditUseCase, setCategoriesWrapper, setCharacterArcWrapper, setConflictWrapper, setIncitingIncidentWrapper, setProblemWrapper, setProtagonistWrapper, setStakesWrapper, setSynopsisWrapper, stakes, synopsis]
);

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

@ -45,7 +45,8 @@ export default function WorkFlow() {
isPauseWorkFlow,
mode,
setIsPauseWorkFlow,
setAnyAttribute
setAnyAttribute,
applyScript
} = useWorkflowData();
const {
@ -193,6 +194,8 @@ export default function WorkFlow() {
setIsPauseWorkFlow={setIsPauseWorkFlow}
setAnyAttribute={setAnyAttribute}
isPauseWorkFlow={isPauseWorkFlow}
applyScript={applyScript}
mode={mode}
/>
</ErrorBoundary>
</div>

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

@ -26,8 +26,10 @@ interface MediaViewerProps {
onTogglePlay: () => void;
final?: any;
setIsPauseWorkFlow: (isPause: boolean) => void;
setAnyAttribute: (type: string, value: SetStateAction<string>, tags?: string[]) => void;
setAnyAttribute: any;
isPauseWorkFlow: boolean;
applyScript: any;
mode: string;
}
export function MediaViewer({
@ -48,7 +50,9 @@ export function MediaViewer({
final,
setIsPauseWorkFlow,
setAnyAttribute,
isPauseWorkFlow
isPauseWorkFlow,
applyScript,
mode
}: MediaViewerProps) {
const mainVideoRef = useRef<HTMLVideoElement>(null);
const finalVideoRef = useRef<HTMLVideoElement>(null);
@ -812,7 +816,14 @@ export function MediaViewer({
<div className="relative w-full h-full bg-white/10 rounded-lg overflow-hidden p-2">
{
scriptData ? (
<ScriptRenderer data={scriptData} setIsPauseWorkFlow={setIsPauseWorkFlow} setAnyAttribute={setAnyAttribute} isPauseWorkFlow={isPauseWorkFlow} />
<ScriptRenderer
data={scriptData}
setIsPauseWorkFlow={setIsPauseWorkFlow}
setAnyAttribute={setAnyAttribute}
isPauseWorkFlow={isPauseWorkFlow}
applyScript={applyScript}
mode={mode}
/>
) : (
<div className="flex gap-2 w-full h-full">
<div className="w-[70%] h-full rounded-lg gap-2 flex flex-col">

18
components/pages/work-flow/use-workflow-data.tsx
View File

@ -94,7 +94,11 @@ export function useWorkflowData() {
// 初始化剧本
useEffect(() => {
console.log('开始初始化剧本', originalText);
originalText && initializeFromProject(episodeId, originalText);
originalText && initializeFromProject(episodeId, originalText).then(() => {
console.log('应用剧本');
// 默认模式下 应用剧本
mode.includes('auto') && applyScript();
});
}, [originalText]);
// 监听剧本加载完毕
useEffect(() => {
@ -106,13 +110,8 @@ export function useWorkflowData() {
}, [scriptBlocksMemo]);
// 监听继续 请求更新数据
useEffect(() => {
// 应用剧本 自动模式 默认应用剧本
console.log('isPauseWorkFlow', isPauseWorkFlow, currentStep, scriptBlocksMemo.length, mode);
if (!isPauseWorkFlow && currentStep === '0' && scriptBlocksMemo.length > 0 && mode.includes('auto')) {
console.log('应用剧本');
applyScript();
}
}, [isPauseWorkFlow, scriptBlocksMemo]);
}, [isPauseWorkFlow]);
// 自动开始播放一轮
const autoPlaySketch = useCallback(() => {
@ -615,6 +614,7 @@ export function useWorkflowData() {
isPauseWorkFlow,
mode,
setIsPauseWorkFlow,
setAnyAttribute
setAnyAttribute,
applyScript
};
}

20
components/script-renderer/ScriptRenderer.tsx
View File

@ -10,11 +10,13 @@ import { TypewriterText } from '@/components/workflow/work-office/common/Typewri
interface ScriptRendererProps {
data: any[];
setIsPauseWorkFlow: (isPause: boolean) => void;
setAnyAttribute: (type: string, value: SetStateAction<string>, tags?: string[]) => void;
setAnyAttribute: any;
isPauseWorkFlow: boolean;
applyScript: any;
mode: string;
}
export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPauseWorkFlow, setAnyAttribute, isPauseWorkFlow }) => {
export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPauseWorkFlow, setAnyAttribute, isPauseWorkFlow, applyScript, mode }) => {
const [activeBlockId, setActiveBlockId] = useState<string | null>(null);
const [hoveredBlockId, setHoveredBlockId] = useState<string | null>(null);
const contentRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
@ -111,7 +113,12 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
if (contentEditableRef.current) {
const text = contentEditableRef.current.innerText;
console.log('contentEditableRef---text', text);
setAnyAttribute(block.id, text);
setAnyAttribute(block.id, text,(old: string)=>{
if(old!==text){
mode.includes('auto') && applyScript();
setIsPauseWorkFlow(false);
}
});
}
};
@ -127,7 +134,12 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
}
setIsPauseWorkFlow(true);
setAddThemeTag(value);
setAnyAttribute('categories', '', value);
setAnyAttribute('categories', value.join(','),(old: string)=>{
if(old!==value.join(',')){
mode.includes('auto') && applyScript();
setIsPauseWorkFlow(false);
}
});
};
const handleEditBlock = (block: ScriptBlock) => {

2
components/ui/edit-modal.tsx
View File

@ -24,7 +24,7 @@ interface EditModalProps {
roles?: any[];
music?: any;
setIsPauseWorkFlow: (isPauseWorkFlow: boolean) => void;
setAnyAttribute: (type: string, value: SetStateAction<string>, tags?: string[]) => void;
setAnyAttribute: any;
isPauseWorkFlow: boolean;
scriptData: any[] | null;
}

2
components/ui/script-tab-content.tsx
View File

@ -7,7 +7,7 @@ import { ScriptRenderer } from '@/components/script-renderer/ScriptRenderer';
interface ScriptTabContentProps {
scriptData: any[] | null;
setIsPauseWorkFlow: (isPauseWorkFlow: boolean) => void;
setAnyAttribute: (type: string, value: SetStateAction<string>, tags?: string[]) => void;
setAnyAttribute: any;
isPauseWorkFlow: boolean;
}