forked from 77media/video-flow
655 lines
25 KiB
TypeScript
655 lines
25 KiB
TypeScript
'use client';
|
|
|
|
import React, { useRef, useEffect, useState, forwardRef } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { RefreshCw, User, Loader2, X, Download, Video, CircleX } from 'lucide-react';
|
|
import { cn } from '@/public/lib/utils';
|
|
import { PersonDetection, PersonDetectionScene } from './person-detection';
|
|
import { ShotsEditor } from './shot-editor/ShotsEditor';
|
|
import { CharacterLibrarySelector } from './character-library-selector';
|
|
import FloatingGlassPanel from './FloatingGlassPanel';
|
|
import { ReplaceCharacterPanel } from './replace-character-panel';
|
|
import HorizontalScroller from './HorizontalScroller';
|
|
import { useEditData } from '@/components/pages/work-flow/use-edit-data';
|
|
import { RoleEntity, VideoSegmentEntity } from '@/app/service/domain/Entities';
|
|
import { ShotVideo } from '@/api/DTO/movieEdit';
|
|
import { downloadVideo } from '@/utils/tools';
|
|
|
|
interface ShotTabContentProps {
|
|
currentSketchIndex: number;
|
|
originalVideos: ShotVideo[];
|
|
onApply: () => void;
|
|
onClose: () => void;
|
|
setActiveTab: (tabId: string) => void;
|
|
}
|
|
|
|
export const ShotTabContent = forwardRef<
|
|
{ switchBefore: (tabId: string) => boolean, saveOrCloseBefore: (type: 'apply' | 'close') => void },
|
|
ShotTabContentProps
|
|
>((props, ref) => {
|
|
const { currentSketchIndex = 0, onApply, onClose, originalVideos, setActiveTab } = props;
|
|
const {
|
|
loading,
|
|
shotData,
|
|
selectedSegment,
|
|
scriptRoles,
|
|
setSelectedSegment,
|
|
regenerateVideoSegment,
|
|
filterRole,
|
|
fetchUserRoleLibrary,
|
|
userRoleLibrary,
|
|
fetchRoleShots,
|
|
shotSelectionList,
|
|
applyRoleToSelectedShots,
|
|
calculateRecognitionBoxes,
|
|
setSelectedRole
|
|
} = useEditData('shot');
|
|
const [detections, setDetections] = useState<PersonDetection[]>([]);
|
|
const [scanState, setScanState] = useState<'idle' | 'scanning' | 'detected' | 'failed' | 'timeout'>('idle');
|
|
const [isScanFailed, setIsScanFailed] = useState(false);
|
|
const [isLoadingLibrary, setIsLoadingLibrary] = useState(false);
|
|
const [isReplaceLibraryOpen, setIsReplaceLibraryOpen] = useState(false);
|
|
const [isReplacePanelOpen, setIsReplacePanelOpen] = useState(false);
|
|
const [selectedCharacter, setSelectedCharacter] = useState<any>(null);
|
|
const [selectedLibaryRole, setSelectedLibaryRole] = useState<any>(null);
|
|
const [isLoadingShots, setIsLoadingShots] = useState(false);
|
|
const shotsEditorRef = useRef<any>(null);
|
|
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<string>('');
|
|
const [isRemindApplyUpdate, setIsRemindApplyUpdate] = useState(false);
|
|
const [updateData, setUpdateData] = useState<VideoSegmentEntity[]>([]);
|
|
const [isLoadingDownloadBtn, setIsLoadingDownloadBtn] = useState(false);
|
|
|
|
useEffect(() => {
|
|
console.log('shotTabContent-----selectedSegment', selectedSegment);
|
|
}, [selectedSegment]);
|
|
|
|
useEffect(() => {
|
|
console.log('-==========shotTabContent===========-', shotData, currentSketchIndex, originalVideos);
|
|
// 只在初始化且有角色数据时执行
|
|
if (isInitialized && shotData.length > 0) {
|
|
setIsInitialized(false);
|
|
const defaultSelectIndex = currentSketchIndex >= shotData.length ? 0 : currentSketchIndex;
|
|
setSelectedSegment(shotData[defaultSelectIndex]);
|
|
}
|
|
}, [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, selectedSegment?.lens);
|
|
regenerateVideoSegment().then(() => {
|
|
setPendingRegeneration(false);
|
|
setIsRegenerate(false);
|
|
});
|
|
}
|
|
}, [pendingRegeneration]);
|
|
|
|
// 监听当前选中segment变化
|
|
useEffect(() => {
|
|
console.log('shotTabContent-----shotData', shotData);
|
|
if (shotData.length > 0 && !selectedSegment) {
|
|
// 清空检测状态 和 检测结果
|
|
setScanState('idle');
|
|
setDetections([]);
|
|
}
|
|
}, [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 () => {
|
|
if (scanState === 'detected') {
|
|
// 如果已经有检测结果，点击按钮退出检测状态
|
|
setScanState('idle');
|
|
setDetections([]); // 清除检测结果
|
|
return;
|
|
}
|
|
setScanState('scanning');
|
|
const containerElement = document.getElementById('person-detection-video') as HTMLVideoElement;
|
|
try {
|
|
const roleRecognitionResponse = await filterRole(containerElement);
|
|
console.log('roleRecognitionResponse', roleRecognitionResponse);
|
|
if (roleRecognitionResponse && roleRecognitionResponse.recognition_result.code === 200) {
|
|
const recognitionBoxes = calculateRecognitionBoxes(containerElement, roleRecognitionResponse.recognition_result.data);
|
|
console.log('recognitionBoxes', recognitionBoxes);
|
|
setDetections(recognitionBoxes.map((person: any) => ({
|
|
id: person.person_id,
|
|
name: person.person_id,
|
|
description: roleRecognitionResponse.characters_used.find((character: any) => character.character_name === person.person_id)?.character_description || '',
|
|
imageUrl: roleRecognitionResponse.characters_used.find((character: any) => character.character_name === person.person_id)?.avatar || '',
|
|
position: { top: person.top, left: person.left, width: person.width, height: person.height }
|
|
})));
|
|
} else {
|
|
setIsScanFailed(true);
|
|
}
|
|
setScanState('detected');
|
|
} catch (error) {
|
|
setIsScanFailed(true);
|
|
}
|
|
};
|
|
|
|
// 处理扫描超时
|
|
const handleScanTimeout = () => {
|
|
setIsScanFailed(true);
|
|
setScanState('timeout');
|
|
setDetections([]);
|
|
};
|
|
|
|
// 处理退出扫描
|
|
const handleScanExit = () => {
|
|
setScanState('idle');
|
|
setDetections([]);
|
|
};
|
|
|
|
// 处理检测到结果
|
|
const handleDetectionsChange = (newDetections: PersonDetection[]) => {
|
|
// console.log('handleDetectionsChange', newDetections);
|
|
// if (newDetections.length > 0 && scanState === 'scanning') {
|
|
// setScanState('detected');
|
|
// }
|
|
};
|
|
|
|
// 处理人物点击 打开角色库
|
|
const handlePersonClick = async (person: PersonDetection) => {
|
|
console.log('person', person);
|
|
const role: RoleEntity = {
|
|
id: person.id,
|
|
name: person.name,
|
|
generateText: person.description,
|
|
tags: [], // 由于 person 对象中没有标签信息，我们设置为空数组
|
|
imageUrl: person.imageUrl,
|
|
fromDraft: false, // 默认不是来自草稿箱
|
|
isChangeRole: true, // 默认没有发生角色形象的变更
|
|
};
|
|
console.log('role', role);
|
|
setSelectedRole(role);
|
|
setSelectedCharacter(person);
|
|
setIsLoadingLibrary(true);
|
|
setIsReplaceLibraryOpen(true);
|
|
await fetchUserRoleLibrary(role.generateText);
|
|
setIsLoadingLibrary(false);
|
|
};
|
|
|
|
// 从角色库中选择角色
|
|
const handleSelectCharacter = (index: number) => {
|
|
console.log('index', index);
|
|
setSelectedLibaryRole(userRoleLibrary[index]);
|
|
setIsReplaceLibraryOpen(false);
|
|
handleStartReplaceCharacter();
|
|
};
|
|
|
|
const handleStartReplaceCharacter = async () => {
|
|
setIsLoadingShots(true);
|
|
setIsReplacePanelOpen(true);
|
|
// 获取当前角色对应的视频片段
|
|
await fetchRoleShots(selectedCharacter?.name || '');
|
|
// 打开替换角色面板
|
|
setIsLoadingShots(false);
|
|
};
|
|
|
|
// 确认替换角色
|
|
const handleConfirmReplace = () => {
|
|
applyRoleToSelectedShots(selectedLibaryRole);
|
|
setIsReplacePanelOpen(false);
|
|
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);
|
|
if (selectedSegment) {
|
|
setSelectedSegment({
|
|
...selectedSegment,
|
|
lens: shotInfo
|
|
});
|
|
}
|
|
setTimeout(() => {
|
|
setPendingRegeneration(true);
|
|
}, 1000);
|
|
};
|
|
|
|
// 新增分镜
|
|
const handleAddShot = () => {
|
|
console.log('add shot');
|
|
shotsEditorRef.current.addShot();
|
|
};
|
|
|
|
// 切换选择分镜
|
|
const handleSelectShot = (index: number) => {
|
|
// 通过 video_id 找到对应的分镜
|
|
const selectedVideo = originalVideos[index];
|
|
const targetSegment = shotData.find(shot =>
|
|
shot.id === selectedVideo.video_id
|
|
);
|
|
if (targetSegment) {
|
|
setSelectedSegment(targetSegment);
|
|
}
|
|
};
|
|
|
|
|
|
|
|
// 如果没有数据，显示空状态
|
|
if (originalVideos.length === 0) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-[400px] text-white/50">
|
|
<Video className="w-16 h-16 mb-4" />
|
|
<p>No video data</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
{/* 上部分 */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
>
|
|
{/* 分镜缩略图行 */}
|
|
<div className="relative">
|
|
<HorizontalScroller
|
|
itemWidth={128}
|
|
gap={0}
|
|
selectedIndex={originalVideos.findIndex(shot => selectedSegment?.id === shot.video_id)}
|
|
onItemClick={(i: number) => handleSelectShot(i)}
|
|
>
|
|
{originalVideos.map((shot, index) => (
|
|
<motion.div
|
|
key={shot.video_id || index}
|
|
className={cn(
|
|
'relative flex-shrink-0 w-32 aspect-video rounded-lg overflow-hidden cursor-pointer group',
|
|
selectedSegment?.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.video_status === 0 && (
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
<Loader2 className="w-4 h-4 animate-spin text-blue-500" />
|
|
</div>
|
|
)}
|
|
{/** 失败 显示失败 */}
|
|
{shot.video_status === 2 && (
|
|
<div className="w-full h-full flex items-center justify-center bg-red-500/10">
|
|
<CircleX className="w-4 h-4 text-red-500/80" />
|
|
</div>
|
|
)}
|
|
{/** 成功 显示视频 */}
|
|
{shot.video_status === 1 && shot.urls && shot.urls.length > 0 && (
|
|
<video
|
|
src={shot.urls[0]}
|
|
key={shot.urls[0]}
|
|
className="w-full h-full object-cover"
|
|
muted
|
|
loop
|
|
playsInline
|
|
preload="none"
|
|
poster={`${shot.urls[0]}?x-oss-process=video/snapshot,t_1000,f_jpg`}
|
|
onMouseEnter={(e) => e.currentTarget.play()}
|
|
onMouseLeave={(e) => e.currentTarget.pause()}
|
|
/>
|
|
)}
|
|
<div className="absolute bottom-0 left-0 right-0 p-1 bg-gradient-to-t from-black/60 to-transparent">
|
|
<span className="text-xs text-white/90">{index + 1}</span>
|
|
</div>
|
|
{/* 鼠标悬浮/移出 显示/隐藏 删除图标 */}
|
|
{/* <div className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
<button
|
|
onClick={() => console.log('Delete sketch')}
|
|
className="text-red-500"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div> */}
|
|
</motion.div>
|
|
))}
|
|
</HorizontalScroller>
|
|
</div>
|
|
|
|
{/* 视频描述行 - 单行滚动 */}
|
|
<div className="relative group">
|
|
<HorizontalScroller
|
|
itemWidth={'auto'}
|
|
gap={0}
|
|
selectedIndex={originalVideos.findIndex(shot => selectedSegment?.id === shot.video_id)}
|
|
onItemClick={(i: number) => handleSelectShot(i)}
|
|
>
|
|
{originalVideos.map((shot, index) => {
|
|
const isActive = selectedSegment?.id === shot.video_id;
|
|
return (
|
|
<motion.div
|
|
key={shot.video_id || index}
|
|
className={cn(
|
|
'flex-shrink-0 cursor-pointer transition-all duration-300',
|
|
isActive ? 'text-white' : 'text-white/50 hover:text-white/80'
|
|
)}
|
|
initial={false}
|
|
animate={{
|
|
scale: isActive ? 1.02 : 1,
|
|
}}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm whitespace-nowrap flex items-center gap-1">
|
|
<span>Segment {index + 1}</span>
|
|
</span>
|
|
{index < originalVideos.length - 1 && (
|
|
<span className="text-white/20">|</span>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</HorizontalScroller>
|
|
|
|
{/* 渐变遮罩 */}
|
|
<div className="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-[#1a1b1e] to-transparent pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
<div className="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-[#1a1b1e] to-transparent pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
</div>
|
|
</motion.div>
|
|
|
|
|
|
{/* 下部分 */}
|
|
{loading ? (
|
|
<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>
|
|
) : selectedSegment && (
|
|
<motion.div
|
|
className="grid grid-cols-2 gap-4 w-full"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.2 }}
|
|
key={selectedSegment?.id}
|
|
>
|
|
{/* 视频预览和操作 */}
|
|
<div className="space-y-4 col-span-1">
|
|
{/* 选中的视频预览 */}
|
|
<>
|
|
{(selectedSegment?.status === 0) && (
|
|
<div className="w-full h-full flex items-center gap-1 justify-center rounded-lg bg-black/30">
|
|
<Loader2 className="w-4 h-4 animate-spin text-blue-500" />
|
|
<span className="text-white/50">Loading...</span>
|
|
</div>
|
|
)}
|
|
<AnimatePresence mode="wait">
|
|
{selectedSegment?.status === 1 && selectedSegment?.videoUrl.length && (
|
|
<motion.div
|
|
className="aspect-video rounded-lg overflow-hidden relative group"
|
|
key={`video-preview-${selectedSegment?.id}`}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
>
|
|
<PersonDetectionScene
|
|
videoSrc={selectedSegment?.videoUrl[0].video_url}
|
|
detections={detections}
|
|
scanState={scanState}
|
|
triggerScan={scanState === 'scanning'}
|
|
triggerSuccess={scanState === 'detected'}
|
|
onScanTimeout={handleScanTimeout}
|
|
onScanExit={handleScanExit}
|
|
onDetectionsChange={handleDetectionsChange}
|
|
onPersonClick={handlePersonClick}
|
|
/>
|
|
<motion.div className='absolute top-4 right-4 flex gap-2'>
|
|
{/* 人物替换按钮 */}
|
|
<motion.button
|
|
onClick={() => {
|
|
window.msg.error('No permission!');
|
|
return;
|
|
handleScan()
|
|
}}
|
|
className={`p-2 backdrop-blur-sm transition-colors z-10 rounded-full
|
|
${scanState === 'detected'
|
|
? 'bg-cyan-500/50 hover:bg-cyan-500/70 text-white'
|
|
: 'bg-black/50 hover:bg-black/70 text-white'
|
|
}`}
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
{scanState === 'scanning' ? (
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
) : scanState === 'detected' ? (
|
|
<X className="w-4 h-4" />
|
|
) : (
|
|
<User className="w-4 h-4" />
|
|
)}
|
|
</motion.button>
|
|
{/** 下载视频按钮 */}
|
|
<motion.button
|
|
onClick={() => {
|
|
setIsLoadingDownloadBtn(true);
|
|
downloadVideo(selectedSegment?.videoUrl[0].video_url);
|
|
setIsLoadingDownloadBtn(false);
|
|
}}
|
|
className="p-2 backdrop-blur-sm transition-colors z-10 rounded-full bg-black/50 hover:bg-black/70 text-white disabled:opacity-50 disabled:cursor-not-allowed"
|
|
disabled={isLoadingDownloadBtn}
|
|
>
|
|
{isLoadingDownloadBtn ? (
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
) : (
|
|
<Download className="w-4 h-4" />
|
|
)}
|
|
</motion.button>
|
|
</motion.div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
{(selectedSegment?.status === 2) && (
|
|
<div className="w-full h-full flex gap-1 items-center justify-center rounded-lg bg-red-500/10">
|
|
<CircleX className="w-4 h-4 text-red-500" />
|
|
<span className="text-white/50">Failed, click to regenerate</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
</div>
|
|
|
|
{/* 基础配置 */}
|
|
<div className='space-y-4 col-span-1' key={selectedSegment?.id}>
|
|
<ShotsEditor
|
|
ref={shotsEditorRef}
|
|
roles={scriptRoles}
|
|
shotInfo={selectedSegment.lens}
|
|
style={{height: 'calc(100% - 4rem)'}}
|
|
/>
|
|
|
|
{/* 重新生成按钮、新增分镜按钮 */}
|
|
<div className="grid grid-cols-1 gap-2">
|
|
{/* <motion.button
|
|
onClick={() => handleAddShot()}
|
|
className="flex items-center justify-center gap-2 px-4 py-3 bg-pink-500/10 hover:bg-pink-500/20
|
|
text-pink-500 rounded-lg transition-colors"
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
<span>Add Shot</span>
|
|
</motion.button> */}
|
|
<motion.button
|
|
onClick={() => {
|
|
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}
|
|
>
|
|
<RefreshCw className="w-4 h-4" />
|
|
<span>{isRegenerate ? 'Regenerating...' : 'Regenerate'}</span>
|
|
</motion.button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</motion.div>
|
|
)}
|
|
|
|
<FloatingGlassPanel
|
|
open={isReplacePanelOpen}
|
|
width='66vw'
|
|
onClose={() => setIsReplacePanelOpen(false)}
|
|
>
|
|
<ReplaceCharacterPanel
|
|
isLoading={isLoadingShots}
|
|
shots={shotSelectionList}
|
|
role={selectedLibaryRole}
|
|
showAddToLibrary={false}
|
|
onClose={() => setIsReplacePanelOpen(false)}
|
|
onConfirm={handleConfirmReplace}
|
|
/>
|
|
</FloatingGlassPanel>
|
|
|
|
<CharacterLibrarySelector
|
|
isLoading={isLoadingLibrary}
|
|
userRoleLibrary={userRoleLibrary}
|
|
isReplaceLibraryOpen={isReplaceLibraryOpen}
|
|
setIsReplaceLibraryOpen={setIsReplaceLibraryOpen}
|
|
onSelect={handleSelectCharacter}
|
|
/>
|
|
|
|
<FloatingGlassPanel
|
|
open={isRemindApplyUpdate}
|
|
width='66vw'
|
|
onClose={() => setIsRemindApplyUpdate(false)}
|
|
>
|
|
<div className='h-full w-full flex flex-col'>
|
|
{/* 提示文字 有分镜被修改 是否需要应用 */}
|
|
<div className='flex-1 flex items-center justify-center'>
|
|
<span className='text-white/50'>Three are some segments have been modified, do you need to apply?</span>
|
|
</div>
|
|
{/* 已修改分镜列表 */}
|
|
<HorizontalScroller
|
|
itemWidth={128}
|
|
gap={0}
|
|
>
|
|
{updateData.map((shot, index) => (
|
|
<motion.div
|
|
key={shot.id || index}
|
|
className={cn(
|
|
'relative flex-shrink-0 w-32 aspect-video rounded-lg overflow-hidden cursor-pointer group'
|
|
)}
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
>
|
|
{(shot.status === 0 || shot.videoUrl.length === 0) && (
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
<Loader2 className="w-4 h-4 animate-spin text-blue-500" />
|
|
</div>
|
|
)}
|
|
{shot.status === 1 && shot.videoUrl[0] && (
|
|
<video
|
|
src={shot.videoUrl[0].video_url}
|
|
key={shot.videoUrl[0].video_url}
|
|
className="w-full h-full object-cover"
|
|
muted
|
|
loop
|
|
playsInline
|
|
onMouseEnter={(e) => e.currentTarget.play()}
|
|
onMouseLeave={(e) => e.currentTarget.pause()}
|
|
/>
|
|
)}
|
|
{/* 任务失败 */}
|
|
{shot.status === 2 && (
|
|
<div className="w-full h-full flex items-center justify-center bg-red-500/10">
|
|
<CircleX className="w-4 h-4 text-red-500" />
|
|
</div>
|
|
)}
|
|
<div className="absolute bottom-0 left-0 right-0 p-1 bg-gradient-to-t from-black/60 to-transparent">
|
|
<span className="text-xs text-white/90">{shot.name}</span>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</HorizontalScroller>
|
|
{/* 按钮 应用 忽略 */}
|
|
<div className='flex items-center justify-end gap-2'>
|
|
<motion.button
|
|
onClick={() => handleApplyUpdate()}
|
|
className='px-4 py-2 bg-blue-500/10 hover:bg-blue-500/20
|
|
text-blue-500 rounded-lg transition-colors'
|
|
>
|
|
<span>Apply</span>
|
|
</motion.button>
|
|
<motion.button
|
|
onClick={() => handleIgnoreUpdate()}
|
|
className='px-4 py-2 bg-gray-500/10 hover:bg-gray-500/20
|
|
text-gray-500 rounded-lg transition-colors'
|
|
>
|
|
<span>Ignore</span>
|
|
</motion.button>
|
|
</div>
|
|
</div>
|
|
</FloatingGlassPanel>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
ShotTabContent.displayName = 'ShotTabContent'; |