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) => { const renderProjectCard = (project: any) => {
return ( return (
<div <LazyLoad once>
key={project.project_id} <div
className="group flex flex-col bg-black/20 rounded-lg overflow-hidden cursor-pointer hover:bg-white/5 transition-all duration-300" key={project.project_id}
onMouseEnter={() => handleMouseEnter(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"
onMouseLeave={() => handleMouseLeave(project.project_id)} onMouseEnter={() => handleMouseEnter(project.project_id)}
data-alt="project-card" 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) ? ( <div className="relative aspect-video" onClick={() => router.push(`/movies/work-flow?episodeId=${project.project_id}`)}>
<LazyLoad once> {(project.final_video_url || project.final_simple_video_url || project.video_urls) ? (
<video <video
ref={(el) => setVideoRef(project.project_id, el)} ref={(el) => setVideoRef(project.project_id, el)}
src={project.final_video_url || project.final_simple_video_url || project.video_urls} 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) getFirstFrame(project.final_video_url || project.final_simple_video_url || project.video_urls)
} }
/> />
</LazyLoad> ) : (
) : ( <div
<div className="w-full h-full bg-cover bg-center group-hover:scale-105 transition-transform duration-500"
className="w-full h-full bg-cover bg-center group-hover:scale-105 transition-transform duration-500" style={{
style={{ backgroundImage: `url(${cover_image1.src})`,
backgroundImage: `url(${cover_image1.src})`, }}
}} />
/> )}
)}
{/* 下载按钮 右上角 */} {/* 下载按钮 右上角 */}
{(project.final_video_url || project.final_simple_video_url) && ( {(project.final_video_url || project.final_simple_video_url) && (
<div className="absolute top-1 right-1"> <div className="absolute top-1 right-1">
<Tooltip placement="top" title="Download"> <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) => { <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(); // 阻止事件冒泡 e.stopPropagation(); // 阻止事件冒泡
setIsLoadingDownloadBtn(true); setIsLoadingDownloadBtn(true);
await downloadVideo(project.final_video_url || project.final_simple_video_url); await downloadVideo(project.final_video_url || project.final_simple_video_url);
setIsLoadingDownloadBtn(false); setIsLoadingDownloadBtn(false);
}}> }}>
{isLoadingDownloadBtn ? <Loader2 className="w-4 h-4 animate-spin text-white" /> : <Download className="w-4 h-4 text-white" />} {isLoadingDownloadBtn ? <Loader2 className="w-4 h-4 animate-spin text-white" /> : <Download className="w-4 h-4 text-white" />}
</Button> </Button>
</Tooltip> </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>
)}
{/* 状态标签 - 左上角 */}
<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>
{/* 底部信息 */} {/* 底部信息 */}
<div className="p-4 group"> <div className="p-4 group">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<h2 className="text-sm font-medium text-white line-clamp-1"> <h2 className="text-sm font-medium text-white line-clamp-1">
{project.name || "Unnamed"} {project.name || "Unnamed"}
</h2> </h2>
{/* TODO 编辑标题 */} {/* TODO 编辑标题 */}
{/* <Tooltip title="Edit Title"> {/* <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> <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> */} </Tooltip> */}
</div> </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> </div>
</div> </LazyLoad>
); );
}; };