forked from 77media/video-flow
轮播1次、生成视频阶段 未生成将草图模糊
This commit is contained in:
parent
a6b1be4e63
commit
c9fdf8b55a
@ -52,6 +52,9 @@ export default function WorkFlow() {
|
|||||||
|
|
||||||
// 跟踪是否已经自动开始播放过,避免重复触发
|
// 跟踪是否已经自动开始播放过,避免重复触发
|
||||||
const hasAutoStartedRef = useRef(false);
|
const hasAutoStartedRef = useRef(false);
|
||||||
|
|
||||||
|
// 跟踪循环播放的起始索引,用于判断是否完成一轮循环
|
||||||
|
const loopStartIndexRef = useRef<number | null>(null);
|
||||||
|
|
||||||
// 调试:监控关键状态变化
|
// 调试:监控关键状态变化
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -111,13 +114,30 @@ export default function WorkFlow() {
|
|||||||
}
|
}
|
||||||
}, [isGeneratingSketch, taskSketch.length, sketchCount, totalSketchCount, currentStep, isPlaying, setIsPlaying]);
|
}, [isGeneratingSketch, taskSketch.length, sketchCount, totalSketchCount, currentStep, isPlaying, setIsPlaying]);
|
||||||
|
|
||||||
// 处理自动播放的分镜切换逻辑
|
// 处理自动播放的分镜切换逻辑 仅循环一轮
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isPlaying && taskSketch.length > 0) {
|
if (isPlaying && taskSketch.length > 0) {
|
||||||
console.log('开始自动切换分镜,总数:', taskSketch.length);
|
console.log('开始自动切换分镜,总数:', taskSketch.length);
|
||||||
|
|
||||||
|
// 记录循环开始时的索引
|
||||||
|
if (loopStartIndexRef.current === null) {
|
||||||
|
loopStartIndexRef.current = currentSketchIndex;
|
||||||
|
console.log('记录循环起始索引:', currentSketchIndex);
|
||||||
|
}
|
||||||
|
|
||||||
const interval = setInterval(() => {
|
const interval = setInterval(() => {
|
||||||
setCurrentSketchIndex((prev: number) => {
|
setCurrentSketchIndex((prev: number) => {
|
||||||
const nextIndex = (prev + 1) % taskSketch.length;
|
const nextIndex = (prev + 1) % taskSketch.length;
|
||||||
|
|
||||||
|
// 检查是否完成了一轮循环(回到起始索引)
|
||||||
|
if (nextIndex === loopStartIndexRef.current && prev !== loopStartIndexRef.current) {
|
||||||
|
console.log('完成一轮循环,停止自动播放');
|
||||||
|
setTimeout(() => {
|
||||||
|
setIsPlaying(false);
|
||||||
|
loopStartIndexRef.current = null; // 重置循环起始索引
|
||||||
|
}, 1000); // 延迟1秒停止,让最后一个分镜显示完整
|
||||||
|
}
|
||||||
|
|
||||||
return nextIndex;
|
return nextIndex;
|
||||||
});
|
});
|
||||||
}, 1000);
|
}, 1000);
|
||||||
@ -125,8 +145,11 @@ export default function WorkFlow() {
|
|||||||
return () => {
|
return () => {
|
||||||
clearInterval(interval);
|
clearInterval(interval);
|
||||||
};
|
};
|
||||||
|
} else {
|
||||||
|
// 当停止播放时重置循环起始索引
|
||||||
|
loopStartIndexRef.current = null;
|
||||||
}
|
}
|
||||||
}, [isPlaying, taskSketch.length, setCurrentSketchIndex]);
|
}, [isPlaying, taskSketch.length, setCurrentSketchIndex, currentSketchIndex]);
|
||||||
|
|
||||||
// 模拟 AI 建议 英文
|
// 模拟 AI 建议 英文
|
||||||
const mockSuggestions = [
|
const mockSuggestions = [
|
||||||
|
|||||||
@ -179,10 +179,12 @@ export function ThumbnailGrid({
|
|||||||
${currentSketchIndex === index ? 'ring-2 ring-blue-500 z-10' : 'hover:ring-2 hover:ring-blue-500/50'}`}
|
${currentSketchIndex === index ? 'ring-2 ring-blue-500 z-10' : 'hover:ring-2 hover:ring-blue-500/50'}`}
|
||||||
onClick={() => !isDragging && onSketchSelect(index)}
|
onClick={() => !isDragging && onSketchSelect(index)}
|
||||||
>
|
>
|
||||||
{/* 底层草图,始终显示 */}
|
{/* 底层草图,始终显示 未生成对应的视频时显示的草图模糊掉 */}
|
||||||
<div className="w-full h-full transform hover:scale-105 transition-transform duration-500">
|
<div className="w-full h-full transform hover:scale-105 transition-transform duration-500">
|
||||||
<img
|
<img
|
||||||
className="w-full h-full object-cover"
|
className={`w-full h-full object-cover transition-all duration-300 ${
|
||||||
|
!taskVideos[index] ? 'filter blur-sm opacity-60' : ''
|
||||||
|
}`}
|
||||||
src={sketch.url}
|
src={sketch.url}
|
||||||
alt={`Thumbnail ${index + 1}`}
|
alt={`Thumbnail ${index + 1}`}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user