forked from 77media/video-flow
更新 use-edit-data 组件，移除 mock 数据，新增角色数据处理逻辑，优化视频片段和角色选择功能。同时，调整角色数据的加载和错误处理，确保在不同选项下能够正确应用角色信息。
This commit is contained in:
北枳
parent
c12b77a74e
commit
dbd803391d
@ -2,74 +2,7 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useShotService } from "@/app/service/Interaction/ShotService";
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
|
||||
const mockShotData = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Shot 1',
|
||||
sketchUrl: 'https://example.com/sketch.png',
|
||||
videoUrl: ['https://video-base-imf.oss-ap-southeast-7.aliyuncs.com/uploads/FJ1-0-20250725023719.mp4'],
|
||||
status: 1, // 0:视频加载中 1:任务已完成 2:任务失败
|
||||
lens: [
|
||||
{
|
||||
name: 'Shot 1',
|
||||
script: '镜头聚焦在 President Alfred King 愤怒的脸上，他被压制住了。他发出一声绝望的吼叫，盖过了枪声。',
|
||||
content: [{
|
||||
roleName: 'President Alfred King',
|
||||
content: '我需要一个镜头，镜头聚焦在 愤怒的脸上，他被压制住了。他发出一声绝望的吼叫，盖过了枪声。'
|
||||
}]
|
||||
}
|
||||
]
|
||||
}, {
|
||||
id: '2',
|
||||
name: 'Shot 2',
|
||||
sketchUrl: 'https://example.com/sketch.png',
|
||||
videoUrl: ['https://video-base-imf.oss-ap-southeast-7.aliyuncs.com/uploads/FJ3-0-20250725023725.mp4'],
|
||||
status: 1, // 0:视频加载中 1:任务已完成 2:任务失败
|
||||
lens: [
|
||||
{
|
||||
name: 'Shot 1',
|
||||
script: '镜头聚焦在 Samuel Ryan 愤怒的脸上，他被压制住了。他发出一声绝望的吼叫，盖过了枪声。',
|
||||
content: [{
|
||||
roleName: 'Samuel Ryan',
|
||||
content: '我需要一个镜头，镜头聚焦在 Samuel Ryan 愤怒的脸上，他被压制住了。他发出一声绝望的吼叫，盖过了枪声。'
|
||||
}]
|
||||
}
|
||||
]
|
||||
}, {
|
||||
id: '3',
|
||||
name: 'Shot 3',
|
||||
sketchUrl: 'https://example.com/sketch.png',
|
||||
videoUrl: [],
|
||||
status: 0, // 0:视频加载中 1:任务已完成 2:任务失败
|
||||
lens: [
|
||||
{
|
||||
name: 'Shot 1',
|
||||
script: '镜头聚焦在 Samuel Ryan 愤怒的脸上，他被压制住了。他发出一声绝望的吼叫，盖过了枪声。',
|
||||
content: [{
|
||||
roleName: 'Samuel Ryan',
|
||||
content: '我需要一个镜头，镜头聚焦在 Samuel Ryan 愤怒的脸上，他被压制住了。他发出一声绝望的吼叫，盖过了枪声。'
|
||||
}]
|
||||
}
|
||||
]
|
||||
}, {
|
||||
id: '4',
|
||||
name: 'Shot 4',
|
||||
sketchUrl: 'https://example.com/sketch.png',
|
||||
videoUrl: [],
|
||||
status: 2, // 0:视频加载中 1:任务已完成 2:任务失败
|
||||
lens: [
|
||||
{
|
||||
name: 'Shot 1',
|
||||
script: '镜头聚焦在 Samuel Ryan 愤怒的脸上，他被压制住了。他发出一声绝望的吼叫，盖过了枪声。',
|
||||
content: [{
|
||||
roleName: 'Samuel Ryan',
|
||||
content: '我需要一个镜头，镜头聚焦在 Samuel Ryan 愤怒的脸上，他被压制住了。他发出一声绝望的吼叫，盖过了枪声。'
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
import { useRoleServiceHook } from "@/app/service/Interaction/RoleService";
|
||||
|
||||
export const useEditData = (tabType: string) => {
|
||||
const searchParams = useSearchParams();
|
||||
@ -77,6 +10,8 @@ export const useEditData = (tabType: string) => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [shotData, setShotData] = useState<any[]>([]);
|
||||
|
||||
const [roleData, setRoleData] = useState<any[]>([]);
|
||||
|
||||
const {
|
||||
videoSegments,
|
||||
getVideoSegmentList,
|
||||
@ -85,13 +20,30 @@ export const useEditData = (tabType: string) => {
|
||||
filterRole
|
||||
} = useShotService();
|
||||
|
||||
const {
|
||||
roleList,
|
||||
selectedRole,
|
||||
userRoleLibrary,
|
||||
fetchRoleList,
|
||||
selectRole,
|
||||
fetchUserRoleLibrary
|
||||
} = useRoleServiceHook();
|
||||
|
||||
useEffect(() => {
|
||||
if (tabType === 'shot') {
|
||||
getVideoSegmentList(projectId).then(() => {
|
||||
setLoading(false);
|
||||
}).catch((err) => {
|
||||
console.log('useEditData-----err', err);
|
||||
setShotData(mockShotData);
|
||||
setShotData([]);
|
||||
setLoading(false);
|
||||
});
|
||||
} else if (tabType === 'role') {
|
||||
fetchRoleList(projectId).then(() => {
|
||||
setLoading(false);
|
||||
}).catch((err) => {
|
||||
console.log('useEditData-----err', err);
|
||||
setRoleData([]);
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
@ -102,11 +54,22 @@ export const useEditData = (tabType: string) => {
|
||||
setShotData(videoSegments);
|
||||
}, [videoSegments]);
|
||||
|
||||
useEffect(() => {
|
||||
setRoleData(roleList);
|
||||
}, [roleList]);
|
||||
|
||||
return {
|
||||
loading,
|
||||
// shot
|
||||
shotData,
|
||||
setSelectedSegment,
|
||||
regenerateVideoSegment,
|
||||
filterRole
|
||||
filterRole,
|
||||
// role
|
||||
roleData,
|
||||
selectRole,
|
||||
selectedRole,
|
||||
userRoleLibrary,
|
||||
fetchUserRoleLibrary
|
||||
}
|
||||
}
|
||||
@ -8,7 +8,7 @@ import FloatingGlassPanel from './FloatingGlassPanel';
|
||||
import { ReplaceCharacterPanel, mockShots, mockCharacter } from './replace-character-panel';
|
||||
import { CharacterLibrarySelector } from './character-library-selector';
|
||||
import HorizontalScroller from './HorizontalScroller';
|
||||
import { useRoleServiceHook } from '@/app/service/Interaction/RoleService';
|
||||
import { useEditData } from '@/components/pages/work-flow/use-edit-data';
|
||||
|
||||
interface Appearance {
|
||||
hairStyle: string;
|
||||
@ -63,8 +63,6 @@ export function CharacterTabContent({
|
||||
onSketchSelect,
|
||||
roles = [mockRole]
|
||||
}: CharacterTabContentProps) {
|
||||
const [localRole, setLocalRole] = useState(mockRole);
|
||||
const [currentRole, setCurrentRole] = useState(roles[currentRoleIndex]);
|
||||
const [isReplacePanelOpen, setIsReplacePanelOpen] = useState(false);
|
||||
const [replacePanelKey, setReplacePanelKey] = useState(0);
|
||||
const [ignoreReplace, setIgnoreReplace] = useState(false);
|
||||
@ -74,14 +72,22 @@ export function CharacterTabContent({
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [enableAnimation, setEnableAnimation] = useState(true);
|
||||
const [showAddToLibrary, setShowAddToLibrary] = useState(true);
|
||||
const {fetchRoleList,roleList,fetchUserRoleLibrary,userRoleLibrary} = useRoleServiceHook()
|
||||
|
||||
const {
|
||||
loading,
|
||||
roleData,
|
||||
selectRole,
|
||||
selectedRole,
|
||||
userRoleLibrary,
|
||||
fetchUserRoleLibrary
|
||||
} = useEditData('role');
|
||||
|
||||
useEffect(() => {
|
||||
// 从url 获取 episodeId 作为projctId
|
||||
const projectId = new URLSearchParams(window.location.search).get('episodeId');
|
||||
if (projectId) {
|
||||
fetchRoleList(projectId);
|
||||
if (roleData.length > 0) {
|
||||
selectRole(roleData[selectRoleIndex].id);
|
||||
}
|
||||
}, [fetchRoleList]);
|
||||
}, [selectRoleIndex, roleData]);
|
||||
|
||||
const handleConfirmGotoReplace = () => {
|
||||
setIsRemindReplacePanelOpen(false);
|
||||
setIsReplacePanelOpen(true);
|
||||
@ -94,10 +100,7 @@ export function CharacterTabContent({
|
||||
|
||||
const handleReplaceCharacter = (url: string) => {
|
||||
setEnableAnimation(true);
|
||||
setCurrentRole({
|
||||
...currentRole,
|
||||
url: url
|
||||
});
|
||||
// 替换角色
|
||||
|
||||
setIsReplacePanelOpen(true);
|
||||
};
|
||||
@ -115,7 +118,7 @@ export function CharacterTabContent({
|
||||
};
|
||||
|
||||
const handleChangeRole = (index: number) => {
|
||||
if (currentRole.url !== roles[selectRoleIndex].url && !ignoreReplace) {
|
||||
if (selectedRole?.imageUrl !== roleData[selectRoleIndex].imageUrl && !ignoreReplace) {
|
||||
// 提示 角色已修改，弹出替换角色面板
|
||||
setIsRemindReplacePanelOpen(true);
|
||||
return;
|
||||
@ -125,7 +128,6 @@ export function CharacterTabContent({
|
||||
setIgnoreReplace(false);
|
||||
|
||||
setSelectRoleIndex(index);
|
||||
setCurrentRole(roles[index]);
|
||||
};
|
||||
|
||||
// 从角色库中选择角色
|
||||
@ -177,12 +179,22 @@ export function CharacterTabContent({
|
||||
event.target.value = '';
|
||||
};
|
||||
|
||||
// 如果loading 显示loading状态
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-[400px] text-white/50">
|
||||
<div className="w-12 h-12 mb-4 animate-spin rounded-full border-b-2 border-blue-600" />
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 如果没有角色数据，显示占位内容
|
||||
if (!roles || roles.length === 0) {
|
||||
if (roleData.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-[400px] text-white/50">
|
||||
<Users className="w-16 h-16 mb-4" />
|
||||
<p>No character data</p>
|
||||
<p>No role data</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -210,7 +222,7 @@ export function CharacterTabContent({
|
||||
selectedIndex={selectRoleIndex}
|
||||
onItemClick={(i: number) => handleChangeRole(i)}
|
||||
>
|
||||
{roleList.map((role, index) => (
|
||||
{roleData.map((role, index) => (
|
||||
<motion.div
|
||||
key={`role-${index}`}
|
||||
className={cn(
|
||||
@ -248,8 +260,8 @@ export function CharacterTabContent({
|
||||
{/* 角色预览图 */}
|
||||
<div className="w-full h-full mx-auto rounded-lg relative group">
|
||||
<ImageBlurTransition
|
||||
src={currentRole.url}
|
||||
alt={currentRole.name}
|
||||
src={selectedRole?.imageUrl || ''}
|
||||
alt={selectedRole?.name}
|
||||
width='100%'
|
||||
height='100%'
|
||||
enableAnimation={enableAnimation}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user