-
-
-
-
- Scene {sketchCount + 1}
-
-
-
-
- );
- }
-
// 如果没有角色数据，显示占位内容
- if (roleData.length === 0) {
+ if (originalRoles.length === 0) {
return (
Loading...
-
+
+ ) : (
+ Loading...
+
- {/* 角色预览图 */}
- (null);
const characterTabContentRef = useRef(null);
+ const shotTabContentRef = useRef(null);
// 添加一个状态来标记是否是从切换tab触发的提醒
const [pendingSwitchTabId, setPendingSwitchTabId] = useState(null);
const [disabledBtn, setDisabledBtn] = useState(false);
@@ -72,9 +76,9 @@ export function EditModal({
const isTabDisabled = (tabId: string) => {
if (tabId === 'settings') return false;
// 换成 如果对应标签下 数据存在 就不禁用
- // if (tabId === '1') return roles.length === 0;
+ if (tabId === '1') return taskObject?.roles.data.length === 0;
// if (tabId === '2') return taskScenes.length === 0;
- // if (tabId === '3') return sketchVideo.length === 0;
+ if (tabId === '3') return taskObject?.videos.data.length === 0;
if (tabId === '4') return false;
return false;
};
@@ -98,6 +102,11 @@ export function EditModal({
if (characterTabContent) {
return characterTabContent.switchBefore(tabId);
}
+ } else if (activeTab === '3') {
+ const shotTabContent = shotTabContentRef.current;
+ if (shotTabContent) {
+ return shotTabContent.switchBefore(tabId);
+ }
}
return false;
}
@@ -117,11 +126,11 @@ export function EditModal({
console.log('handleSave');
// setIsRemindFallbackOpen(true);
if (activeTab === '0') {
- scriptTabContentRef.current.saveBefore();
+ scriptTabContentRef.current.saveOrCloseBefore();
} else if (activeTab === '1') {
- characterTabContentRef.current.saveBefore();
+ characterTabContentRef.current.saveOrCloseBefore();
} else if (activeTab === '3') {
- handleConfirmGotoFallback();
+ shotTabContentRef.current.saveOrCloseBefore('apply');
}
}
@@ -170,7 +179,13 @@ export function EditModal({
const handleClickClose = () => {
// TODO 关闭前 检查 当前tab 下是否有更新 如果有更新 则提醒用户 是否确认应用
// 暂时 默认弹出提醒
- setIsRemindCloseOpen(true);
+ if (activeTab === '0') {
+ scriptTabContentRef.current.saveOrCloseBefore();
+ } else if (activeTab === '1') {
+ characterTabContentRef.current.saveOrCloseBefore();
+ } else if (activeTab === '3') {
+ shotTabContentRef.current.saveOrCloseBefore('close');
+ }
}
const handleConfirmApply = () => {
@@ -195,6 +210,7 @@ export function EditModal({
originalText={originalText}
onApply={handleApply}
setActiveTab={setActiveTab}
+ onClose={onClose}
/>
);
case '1':
@@ -204,6 +220,7 @@ export function EditModal({
onClose={onClose}
onApply={handleApply}
setActiveTab={setActiveTab}
+ originalRoles={taskObject?.roles.data || []}
/>
);
case '2':
@@ -215,9 +232,12 @@ export function EditModal({
case '3':
return (
([]);
const [scanState, setScanState] = useState<'idle' | 'scanning' | 'detected' | 'failed' | 'timeout'>('idle');
const [isScanFailed, setIsScanFailed] = useState(false);
@@ -51,13 +56,54 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
const [isRegenerate, setIsRegenerate] = useState(false);
const [pendingRegeneration, setPendingRegeneration] = useState(false);
+ const [isInitialized, setIsInitialized] = useState(true);
+ const [triggerType, setTriggerType] = useState<'tab' | 'apply' | 'close'>('tab');
+ const [nextToTabId, setNextToTabId] = useState('');
+ const [isRemindApplyUpdate, setIsRemindApplyUpdate] = useState(false);
+ const [updateData, setUpdateData] = useState([]);
+
useEffect(() => {
console.log('shotTabContent-----shotData', shotData);
}, [shotData]);
+ useEffect(() => {
+ console.log('-==========shotData===========-', shotData);
+ // 只在初始化且有角色数据时执行
+ if (isInitialized && shotData.length > 0) {
+ setIsInitialized(false);
+ setSelectedSegment(shotData[0]);
+ }
+ }, [shotData, isInitialized]);
+
+ // 暴露方法给父组件
+ React.useImperativeHandle(ref, () => ({
+ switchBefore: (tabId: string) => {
+ setNextToTabId(tabId);
+ // 判断 是否修改数据
+ const isChange = handleGetUpdateData().length > 0;
+ console.log('switchBefore', isChange);
+ if (isChange) {
+ setTriggerType('tab');
+ setIsRemindApplyUpdate(true);
+ }
+ return isChange;
+ },
+ saveOrCloseBefore: (type: 'apply' | 'close') => {
+ console.log('saveOrCloseBefore');
+ // 判断 是否修改数据
+ const isChange = handleGetUpdateData().length > 0;
+ if (isChange) {
+ setTriggerType(type);
+ setIsRemindApplyUpdate(true);
+ } else {
+ onClose();
+ }
+ }
+ }));
+
useEffect(() => {
if (pendingRegeneration) {
- console.log('pendingRegeneration', pendingRegeneration, shotData[selectedIndex]?.lens);
+ console.log('pendingRegeneration', pendingRegeneration, selectedSegment?.lens);
regenerateVideoSegment().then(() => {
setPendingRegeneration(false);
setIsRegenerate(false);
@@ -65,16 +111,35 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
}
}, [pendingRegeneration]);
- // 监听当前选中index变化
+ // 监听当前选中segment变化
useEffect(() => {
console.log('shotTabContent-----shotData', shotData);
- if (shotData.length > 0) {
+ if (shotData.length > 0 && !selectedSegment) {
// 清空检测状态 和 检测结果
setScanState('idle');
setDetections([]);
- setSelectedSegment(shotData[selectedIndex]);
+ setSelectedSegment(shotData[0]);
}
- }, [selectedIndex, shotData]);
+ }, [shotData, selectedSegment]);
+
+ // 获取修改的数据
+ const handleGetUpdateData = () => {
+ console.log('handleGetUpdateData', shotData, originalVideos);
+ const updateData: VideoSegmentEntity[] = [];
+ shotData.forEach((shot, index) => {
+ const a = shot.videoUrl.map((url) => url.video_url).join(',');
+ const b = originalVideos[index].urls.join(',');
+ if (a !== b) {
+ updateData.push({
+ ...shot,
+ name: 'Segment ' + (index + 1)
+ });
+ }
+ });
+ console.log('updateData', updateData);
+ setUpdateData(updateData);
+ return updateData;
+ }
// 处理扫描开始
const handleScan = async () => {
@@ -174,16 +239,34 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
onApply();
};
+ // 应用修改
+ const handleApplyUpdate = () => {
+ console.log('apply update');
+ onApply();
+ }
+
+ // 忽略修改
+ const handleIgnoreUpdate = () => {
+ console.log('ignore update');
+ if (triggerType === 'apply') {
+ onClose();
+ } else if (triggerType === 'tab') {
+ setActiveTab(nextToTabId);
+ }
+ }
+
// 点击按钮重新生成
const handleRegenerate = async () => {
console.log('regenerate');
setIsRegenerate(true);
const shotInfo = shotsEditorRef.current.getShotInfo();
console.log('shotInfo', shotInfo);
- setSelectedSegment({
- ...shotData[selectedIndex],
- lens: shotInfo
- });
+ if (selectedSegment) {
+ setSelectedSegment({
+ ...selectedSegment,
+ lens: shotInfo
+ });
+ }
setTimeout(() => {
setPendingRegeneration(true);
}, 1000);
@@ -197,22 +280,20 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
// 切换选择分镜
const handleSelectShot = (index: number) => {
- // 切换前 判断数据是否发生变化
- setSelectedIndex(index);
+ // 通过 video_id 找到对应的分镜
+ const selectedVideo = originalVideos[index];
+ const targetSegment = shotData.find(shot =>
+ shot.videoUrl.some(url => url.video_id === selectedVideo.video_id)
+ );
+ if (targetSegment) {
+ setSelectedSegment(targetSegment);
+ }
};
- // 如果loading 显示loading状态
- if (loading) {
- return (
-
-
+ {/* 角色预览图 */}
+
+ {/* 右列：角色信息 */}
+
+
+
+
+
+ {isUploading ?
+ handleOpenReplaceLibrary()}
+ >
+
+
+
+ updateRoleText(text)}
/>
- {/* 应用角色按钮 */}
-
- {/* 右列：角色信息 */}
-
+ {/* 重新生成按钮、替换形象按钮 */}
+
handleRegenerate()}
+ className="flex items-center justify-center gap-2 px-4 py-3 bg-blue-500/10 hover:bg-blue-500/20
+ text-blue-500 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+ whileHover={{ scale: 1.02 }}
+ whileTap={{ scale: 0.98 }}
+ disabled={isRegenerate}
>
- {isUploading ?
- handleOpenReplaceLibrary()}
- >
-
-
-
- updateRoleText(text)}
- />
- {/* 重新生成按钮、替换形象按钮 */}
-
-
-
-
-
+
+ )}
+
- handleRegenerate()}
- className="flex items-center justify-center gap-2 px-4 py-3 bg-blue-500/10 hover:bg-blue-500/20
- text-blue-500 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
- whileHover={{ scale: 1.02 }}
- whileTap={{ scale: 0.98 }}
- disabled={isRegenerate}
- >
-
-
-
-
-
- );
- }
+
// 如果没有数据，显示空状态
- if (shotData.length === 0) {
+ if (originalVideos.length === 0) {
return (
Loading...
-
@@ -233,28 +314,23 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
selectedSegment?.videoUrl.some(url => url.video_id === shot.video_id))}
onItemClick={(i: number) => handleSelectShot(i)}
>
- {shotData.map((shot, index) => (
+ {originalVideos.map((shot, index) => (
url.video_id === shot.video_id) ? 'ring-2 ring-blue-500' : 'hover:ring-2 hover:ring-blue-500/50'
)}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
- {(shot.status === 0 || shot.videoUrl.length === 0) && (
-
-
- )}
- {shot.status === 1 && shot.videoUrl[0] && (
+ {shot.urls.length > 0 && (