forked from 77media/video-flow
打开编辑弹窗 重新生成功能
This commit is contained in:
parent
fc9005e9a6
commit
53a187f7c4
@ -158,11 +158,11 @@ export class VideoSegmentEntityAdapter {
|
|||||||
|
|
||||||
// 创建VideoSegmentEntity
|
// 创建VideoSegmentEntity
|
||||||
const entity: VideoSegmentEntity = {
|
const entity: VideoSegmentEntity = {
|
||||||
id: `video_mock_${index}`, // 生成临时ID,包含索引
|
id: result.video_id, // 生成临时ID,包含索引
|
||||||
name: `video_${index}`, // 生成临时名称,包含索引
|
name: `video_${index}`, // 生成临时名称,包含索引
|
||||||
sketchUrl: "", // 后端数据中没有sketchUrl,设为空字符串
|
sketchUrl: "", // 后端数据中没有sketchUrl,设为空字符串
|
||||||
videoUrl: result.videos,
|
videoUrl: result.videos,
|
||||||
status: status,
|
status: result.video_status,
|
||||||
lens: lens
|
lens: lens
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
import React, { useRef, useEffect, useState, forwardRef } from 'react';
|
import React, { useRef, useEffect, useState, forwardRef } from 'react';
|
||||||
import { motion, AnimatePresence } from 'framer-motion';
|
import { motion, AnimatePresence } from 'framer-motion';
|
||||||
import { RefreshCw, User, Loader2, X, Plus, Video, CircleX } from 'lucide-react';
|
import { RefreshCw, User, Loader2, X, Download, Video, CircleX } from 'lucide-react';
|
||||||
import { cn } from '@/public/lib/utils';
|
import { cn } from '@/public/lib/utils';
|
||||||
import { PersonDetection, PersonDetectionScene } from './person-detection';
|
import { PersonDetection, PersonDetectionScene } from './person-detection';
|
||||||
import { ShotsEditor } from './shot-editor/ShotsEditor';
|
import { ShotsEditor } from './shot-editor/ShotsEditor';
|
||||||
@ -13,6 +13,7 @@ import HorizontalScroller from './HorizontalScroller';
|
|||||||
import { useEditData } from '@/components/pages/work-flow/use-edit-data';
|
import { useEditData } from '@/components/pages/work-flow/use-edit-data';
|
||||||
import { RoleEntity, VideoSegmentEntity } from '@/app/service/domain/Entities';
|
import { RoleEntity, VideoSegmentEntity } from '@/app/service/domain/Entities';
|
||||||
import { ShotVideo } from '@/api/DTO/movieEdit';
|
import { ShotVideo } from '@/api/DTO/movieEdit';
|
||||||
|
import { downloadVideo } from '@/utils/tools';
|
||||||
|
|
||||||
interface ShotTabContentProps {
|
interface ShotTabContentProps {
|
||||||
currentSketchIndex: number;
|
currentSketchIndex: number;
|
||||||
@ -61,6 +62,7 @@ export const ShotTabContent = forwardRef<
|
|||||||
const [nextToTabId, setNextToTabId] = useState<string>('');
|
const [nextToTabId, setNextToTabId] = useState<string>('');
|
||||||
const [isRemindApplyUpdate, setIsRemindApplyUpdate] = useState(false);
|
const [isRemindApplyUpdate, setIsRemindApplyUpdate] = useState(false);
|
||||||
const [updateData, setUpdateData] = useState<VideoSegmentEntity[]>([]);
|
const [updateData, setUpdateData] = useState<VideoSegmentEntity[]>([]);
|
||||||
|
const [isLoadingDownloadBtn, setIsLoadingDownloadBtn] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log('shotTabContent-----selectedSegment', selectedSegment);
|
console.log('shotTabContent-----selectedSegment', selectedSegment);
|
||||||
@ -283,7 +285,7 @@ export const ShotTabContent = forwardRef<
|
|||||||
// 通过 video_id 找到对应的分镜
|
// 通过 video_id 找到对应的分镜
|
||||||
const selectedVideo = originalVideos[index];
|
const selectedVideo = originalVideos[index];
|
||||||
const targetSegment = shotData.find(shot =>
|
const targetSegment = shotData.find(shot =>
|
||||||
shot.videoUrl.some(url => url.video_id === selectedVideo.video_id)
|
shot.id === selectedVideo.video_id
|
||||||
);
|
);
|
||||||
if (targetSegment) {
|
if (targetSegment) {
|
||||||
setSelectedSegment(targetSegment);
|
setSelectedSegment(targetSegment);
|
||||||
@ -327,7 +329,20 @@ export const ShotTabContent = forwardRef<
|
|||||||
whileHover={{ scale: 1.02 }}
|
whileHover={{ scale: 1.02 }}
|
||||||
whileTap={{ scale: 0.98 }}
|
whileTap={{ scale: 0.98 }}
|
||||||
>
|
>
|
||||||
{shot.urls && shot.urls.length > 0 && (
|
{/** 进行中 显示加载中 */}
|
||||||
|
{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
|
<video
|
||||||
src={shot.urls[0]}
|
src={shot.urls[0]}
|
||||||
key={shot.urls[0]}
|
key={shot.urls[0]}
|
||||||
@ -412,6 +427,7 @@ export const ShotTabContent = forwardRef<
|
|||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ delay: 0.2 }}
|
transition={{ delay: 0.2 }}
|
||||||
|
key={selectedSegment?.id}
|
||||||
>
|
>
|
||||||
{/* 视频预览和操作 */}
|
{/* 视频预览和操作 */}
|
||||||
<div className="space-y-4 col-span-1">
|
<div className="space-y-4 col-span-1">
|
||||||
@ -467,6 +483,22 @@ export const ShotTabContent = forwardRef<
|
|||||||
<User className="w-4 h-4" />
|
<User className="w-4 h-4" />
|
||||||
)}
|
)}
|
||||||
</motion.button>
|
</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>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
@ -503,8 +535,6 @@ export const ShotTabContent = forwardRef<
|
|||||||
</motion.button> */}
|
</motion.button> */}
|
||||||
<motion.button
|
<motion.button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
window.msg.error('No permission!');
|
|
||||||
return;
|
|
||||||
handleRegenerate();
|
handleRegenerate();
|
||||||
}}
|
}}
|
||||||
className="flex items-center justify-center gap-2 px-4 py-3 bg-blue-500/10 hover:bg-blue-500/20
|
className="flex items-center justify-center gap-2 px-4 py-3 bg-blue-500/10 hover:bg-blue-500/20
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user