forked from 77media/video-flow
修复创建项目的内容
This commit is contained in:
海龙
parent
b6d8946dbc
commit
09fc676a35
@ -31,6 +31,8 @@ import { useImageStoryServiceHook } from "@/app/service/Interaction/ImageStorySe
|
||||
import TemplateCard from "./templateCard";
|
||||
import { AudioRecorder } from "./AudioRecorder";
|
||||
import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService";
|
||||
import { createScriptEpisodeNew } from "@/api/script_episode";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
// 自定义音频播放器样式
|
||||
const customAudioPlayerStyles = `
|
||||
@ -489,6 +491,7 @@ export function ChatInputBox() {
|
||||
|
||||
// 共享状态 - 需要在不同渲染函数间共享
|
||||
const [script, setScript] = useState(""); // 用户输入的脚本内容
|
||||
const router = useRouter();
|
||||
|
||||
// 子组件引用，用于调用子组件方法
|
||||
const photoStoryModeRef = useRef<{
|
||||
@ -506,6 +509,8 @@ export function ChatInputBox() {
|
||||
}
|
||||
}, [isPhotoStoryMode]);
|
||||
|
||||
|
||||
|
||||
const [loadingIdea, setLoadingIdea] = useState(false); // 获取创意建议时的加载状态
|
||||
const [isCreating, setIsCreating] = useState(false); // 视频创建过程中的加载状态
|
||||
|
||||
@ -533,11 +538,7 @@ export function ChatInputBox() {
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
// Handle editor content changes
|
||||
const handleEditorChange = (e: React.FormEvent<HTMLDivElement>) => {
|
||||
const newText = e.currentTarget.textContent || "";
|
||||
setScript(newText);
|
||||
};
|
||||
|
||||
|
||||
// 当进入图片故事模式时，调用子组件方法
|
||||
const enterPhotoStoryMode = () => {
|
||||
@ -550,21 +551,34 @@ export function ChatInputBox() {
|
||||
};
|
||||
|
||||
// Handle creating video
|
||||
|
||||
const handleCreateVideo = async () => {
|
||||
setIsCreating(true);
|
||||
// 这里可以添加实际的创建逻辑
|
||||
console.log("创建视频:", {
|
||||
script,
|
||||
...configOptions,
|
||||
...(isPhotoStoryMode && {
|
||||
// 从子组件获取图片故事相关信息
|
||||
isPhotoStoryMode: true,
|
||||
}),
|
||||
});
|
||||
setTimeout(() => {
|
||||
setIsCreating(false);
|
||||
}, 2000);
|
||||
};
|
||||
const User = JSON.parse(localStorage.getItem("currentUser") || "{}");
|
||||
|
||||
// 创建剧集数据
|
||||
let episodeData: any = {
|
||||
user_id: String(User.id),
|
||||
script: script,
|
||||
mode: configOptions.mode,
|
||||
resolution: configOptions.resolution,
|
||||
language: configOptions.language,
|
||||
video_duration: configOptions.videoDuration
|
||||
};
|
||||
|
||||
// 调用创建剧集API
|
||||
const episodeResponse = await createScriptEpisodeNew(episodeData);
|
||||
console.log('episodeResponse', episodeResponse);
|
||||
if (episodeResponse.code !== 0) {
|
||||
console.error(`创建剧集失败: ${episodeResponse.message}`);
|
||||
alert(`创建剧集失败: ${episodeResponse.message}`);
|
||||
return;
|
||||
}
|
||||
let episodeId = episodeResponse.data.project_id;
|
||||
// let episodeId = '9c34fcc4-c8d8-44fc-879e-9bd56f608c76';
|
||||
router.push(`/create/work-flow?episodeId=${episodeId}`);
|
||||
setIsCreating(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="video-tool-component relative max-w-[1080px] w-full left-[50%] translate-x-[-50%]">
|
||||
@ -655,37 +669,34 @@ export function ChatInputBox() {
|
||||
/>
|
||||
|
||||
<div className="video-prompt-editor relative flex flex-1 items-center rounded-[6px]">
|
||||
{/* 可编辑的脚本输入区域 */}
|
||||
<div
|
||||
className="editor-content flex-1 w-0 max-h-[48px] min-h-[40px] h-auto pl-[10px] pr-[10px] py-[10px] rounded-[10px] leading-[20px] text-sm border-none overflow-y-auto cursor-text flex items-center"
|
||||
contentEditable={true}
|
||||
onInput={handleEditorChange}
|
||||
suppressContentEditableWarning
|
||||
>
|
||||
{script}
|
||||
</div>
|
||||
{/* 简单的文本输入框 */}
|
||||
<input
|
||||
type="text"
|
||||
value={script}
|
||||
onChange={(e) => setScript(e.target.value)}
|
||||
placeholder="Describe the content you want to action..."
|
||||
className="flex-1 w-0 pl-[10px] pr-[10px] py-[10px] rounded-[10px] leading-[20px] text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none"
|
||||
/>
|
||||
|
||||
{/* 占位符文本和获取创意按钮 */}
|
||||
<div
|
||||
className={`custom-placeholder absolute top-[50%] left-[10px] z-10 translate-y-[-50%] flex items-center gap-1 pointer-events-none text-[14px] leading-[20px] text-white/[0.40] ${
|
||||
script ? "hidden" : "block"
|
||||
}`}
|
||||
>
|
||||
<span>Describe the content you want to action. Get an </span>
|
||||
<b
|
||||
className="idea-link inline-flex items-center gap-0.5 text-white/[0.50] font-normal cursor-pointer pointer-events-auto underline"
|
||||
onClick={() => handleGetIdea()}
|
||||
>
|
||||
{loadingIdea ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<Lightbulb className="w-4 h-4" />
|
||||
idea
|
||||
</>
|
||||
)}
|
||||
</b>
|
||||
</div>
|
||||
{/* 获取创意按钮 */}
|
||||
{!script && (
|
||||
<div className="absolute top-[50%] right-[10px] z-10 translate-y-[-50%] flex items-center gap-1">
|
||||
<span className="text-[14px] leading-[20px] text-white/[0.40]">Get an </span>
|
||||
<button
|
||||
className="idea-link inline-flex items-center gap-0.5 text-white/[0.50] font-normal underline hover:text-white/[0.70] transition-colors"
|
||||
onClick={() => handleGetIdea()}
|
||||
>
|
||||
{loadingIdea ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<Lightbulb className="w-4 h-4" />
|
||||
idea
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Action按钮 */}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user