xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

修复视频懒加载 未挂载问题

Browse Source
This commit is contained in:
北枳 2025-09-19 16:28:13 +08:00
parent 35318c4cb5
commit af84fc05c7
1 changed files with 54 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
components/pages/create-to-video2.tsx
View File

@ -191,17 +191,17 @@ export default function CreateToVideo2() {
const renderProjectCard = (project: any) => {
return (
<div
key={project.project_id}
className="group flex flex-col bg-black/20 rounded-lg overflow-hidden cursor-pointer hover:bg-white/5 transition-all duration-300"
onMouseEnter={() => handleMouseEnter(project.project_id)}
onMouseLeave={() => handleMouseLeave(project.project_id)}
data-alt="project-card"
>
{/* 视频/图片区域 */}
<div className="relative aspect-video" onClick={() => router.push(`/movies/work-flow?episodeId=${project.project_id}`)}>
{(project.final_video_url || project.final_simple_video_url || project.video_urls) ? (
<LazyLoad once>
<LazyLoad once>
<div
key={project.project_id}
className="group flex flex-col bg-black/20 rounded-lg overflow-hidden cursor-pointer hover:bg-white/5 transition-all duration-300"
onMouseEnter={() => handleMouseEnter(project.project_id)}
onMouseLeave={() => handleMouseLeave(project.project_id)}
data-alt="project-card"
>
{/* 视频/图片区域 */}
<div className="relative aspect-video" onClick={() => router.push(`/movies/work-flow?episodeId=${project.project_id}`)}>
{(project.final_video_url || project.final_simple_video_url || project.video_urls) ? (
<video
ref={(el) => setVideoRef(project.project_id, el)}
src={project.final_video_url || project.final_simple_video_url || project.video_urls}
@ -214,58 +214,58 @@ export default function CreateToVideo2() {
getFirstFrame(project.final_video_url || project.final_simple_video_url || project.video_urls)
}
/>
</LazyLoad>
) : (
<div
className="w-full h-full bg-cover bg-center group-hover:scale-105 transition-transform duration-500"
style={{
backgroundImage: `url(${cover_image1.src})`,
}}
/>
)}
) : (
<div
className="w-full h-full bg-cover bg-center group-hover:scale-105 transition-transform duration-500"
style={{
backgroundImage: `url(${cover_image1.src})`,
}}
/>
)}
{/* 下载按钮 右上角 */}
{(project.final_video_url || project.final_simple_video_url) && (
<div className="absolute top-1 right-1">
<Tooltip placement="top" title="Download">
<Button size="small" type="text" disabled={isLoadingDownloadBtn} className="w-[2.5rem] h-[2.5rem] rounded-full items-center justify-center p-0 hidden group-hover:flex transition-all duration-300 hover:bg-white/15" onClick={async (e) => {
e.stopPropagation(); // 阻止事件冒泡
setIsLoadingDownloadBtn(true);
await downloadVideo(project.final_video_url || project.final_simple_video_url);
setIsLoadingDownloadBtn(false);
}}>
{isLoadingDownloadBtn ? <Loader2 className="w-4 h-4 animate-spin text-white" /> : <Download className="w-4 h-4 text-white" />}
</Button>
</Tooltip>
{/* 下载按钮 右上角 */}
{(project.final_video_url || project.final_simple_video_url) && (
<div className="absolute top-1 right-1">
<Tooltip placement="top" title="Download">
<Button size="small" type="text" disabled={isLoadingDownloadBtn} className="w-[2.5rem] h-[2.5rem] rounded-full items-center justify-center p-0 hidden group-hover:flex transition-all duration-300 hover:bg-white/15" onClick={async (e) => {
e.stopPropagation(); // 阻止事件冒泡
setIsLoadingDownloadBtn(true);
await downloadVideo(project.final_video_url || project.final_simple_video_url);
setIsLoadingDownloadBtn(false);
}}>
{isLoadingDownloadBtn ? <Loader2 className="w-4 h-4 animate-spin text-white" /> : <Download className="w-4 h-4 text-white" />}
</Button>
</Tooltip>
</div>
)}
{/* 状态标签 - 左上角 */}
<div className="absolute top-3 left-3">
{StatusBadge((project.status === 'COMPLETED' || project.final_simple_video_url) ? 'completed' : project.status === 'FAILED' ? 'failed' : 'pending')}
</div>
)}
{/* 状态标签 - 左上角 */}
<div className="absolute top-3 left-3">
{StatusBadge((project.status === 'COMPLETED' || project.final_simple_video_url) ? 'completed' : project.status === 'FAILED' ? 'failed' : 'pending')}
</div>
</div>
{/* 底部信息 */}
<div className="p-4 group">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<h2 className="text-sm font-medium text-white line-clamp-1">
{project.name || "Unnamed"}
</h2>
{/* TODO 编辑标题 */}
{/* <Tooltip title="Edit Title">
{/* 底部信息 */}
<div className="p-4 group">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<h2 className="text-sm font-medium text-white line-clamp-1">
{project.name || "Unnamed"}
</h2>
{/* TODO 编辑标题 */}
{/* <Tooltip title="Edit Title">
<Button size="small" type="text" className="w-[2.5rem] h-[2.5rem] rounded-full items-center justify-center p-0 hidden group-hover:flex transition-all duration-300 hover:bg-white/15" /></Button>
</Tooltip> */}
</div>
{/* TODO 删除 */}
{/* <Tooltip title="Delete">
<Button size="small" type="text" className="w-[2.5rem] h-[2.5rem] rounded-full items-center justify-center p-0 hidden group-hover:flex transition-all duration-300 hover:bg-white/15" /></Button>
</Tooltip> */}
</div>
{/* TODO 删除 */}
{/* <Tooltip title="Delete">
<Button size="small" type="text" className="w-[2.5rem] h-[2.5rem] rounded-full items-center justify-center p-0 hidden group-hover:flex transition-all duration-300 hover:bg-white/15" /></Button>
</Tooltip> */}
</div>
</div>
</div>
</LazyLoad>
);
};