forked from 77media/video-flow
128 lines
4.4 KiB
TypeScript
128 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useRef } from "react";
|
|
import { ArrowRight, Plus, Table, AlignHorizontalSpaceAround } from "lucide-react";
|
|
import "./style/home-page2.css";
|
|
import { useRouter } from "next/navigation";
|
|
import { VideoScreenLayout } from '@/components/video-screen-layout';
|
|
import { VideoGridLayout } from '@/components/video-grid-layout';
|
|
import LiquidGlass from '@/plugins/liquid-glass';
|
|
|
|
export function HomePage2() {
|
|
const router = useRouter();
|
|
const [activeTool, setActiveTool] = useState("stretch");
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
// 示例视频数据
|
|
const videos = [
|
|
{
|
|
id: '1',
|
|
url: 'https://cdn.qikongjian.com/videos/1750385931_99a8fb42-af89-4ae9-841a-a49869f026bd_text_to_video_0.mp4',
|
|
title: '视频标题 1'
|
|
},
|
|
{
|
|
id: '2',
|
|
url: 'https://cdn.qikongjian.com/videos/1750389908_37d4fffa-8516-43a3-a423-fc0274f40e8a_text_to_video_0.mp4',
|
|
title: '视频标题 2'
|
|
},
|
|
{
|
|
id: '3',
|
|
url: 'https://cdn.qikongjian.com/videos/1750384661_d8e30b79-828e-48cd-9025-ab62a996717c_text_to_video_0.mp4',
|
|
title: '视频标题 3'
|
|
},
|
|
{
|
|
id: '4',
|
|
url: 'https://cdn.qikongjian.com/videos/1750320040_4b47996e-7c70-490e-8433-80c7df990fdd_text_to_video_0.mp4',
|
|
title: '视频标题 4'
|
|
},
|
|
];
|
|
|
|
// 处理编辑视频
|
|
const handleEdit = (id: string) => {
|
|
console.log('Edit video:', id);
|
|
// TODO: 实现编辑功能
|
|
};
|
|
|
|
// 处理删除视频
|
|
const handleDelete = (id: string) => {
|
|
console.log('Delete video:', id);
|
|
// TODO: 实现删除功能
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[var(--background)]" ref={containerRef}>
|
|
<div className="min-h-[100%] flex relative">
|
|
{/* 工具栏-列表形式切换 */}
|
|
<div className="absolute top-[1rem] right-6 w-[8rem] flex z-[100] justify-end">
|
|
<div role="group" className="flex p-1 bg-white/20 backdrop-blur-[15px] w-full rounded-[3rem]">
|
|
<button
|
|
className={`flex items-center justify-center h-10 transition-all duration-300 w-1/2 rounded-[3rem]
|
|
${activeTool === "stretch" ? "bg-white/20 text-white" : "hover:bg-white/10 text-white/30"}`}
|
|
onClick={() => setActiveTool("stretch")}
|
|
>
|
|
<AlignHorizontalSpaceAround className="w-5 h-5" />
|
|
</button>
|
|
<button
|
|
className={`flex items-center justify-center h-10 transition-all duration-300 w-1/2 rounded-[3rem]
|
|
${activeTool === "table" ? "bg-white/20 text-white" : "hover:bg-white/10 text-white/30"}`}
|
|
onClick={() => setActiveTool("table")}
|
|
>
|
|
<Table className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 屏风式视频布局 */}
|
|
<div
|
|
className={`absolute top-[4rem] w-full transition-all duration-500
|
|
${activeTool === "stretch" ? "opacity-100 translate-x-0" : "opacity-0 translate-x-[-100%] pointer-events-none"}
|
|
`}
|
|
>
|
|
<VideoScreenLayout videos={videos} />
|
|
</div>
|
|
|
|
{/* 网格式视频布局 */}
|
|
<div
|
|
className={`absolute top-[4rem] w-full transition-all duration-500 max-h-[calc(100vh-8rem)] overflow-y-auto hide-scrollbar
|
|
${activeTool === "table" ? "opacity-100 translate-x-0" : "opacity-0 translate-x-[100%] pointer-events-none"}
|
|
`}
|
|
>
|
|
<VideoGridLayout
|
|
videos={videos}
|
|
onEdit={handleEdit}
|
|
onDelete={handleDelete}
|
|
/>
|
|
</div>
|
|
|
|
{/* Create Project Button */}
|
|
<div className="fixed bottom-[10rem] left-[50%]">
|
|
<LiquidGlass
|
|
displacementScale={58}
|
|
blurAmount={0.5}
|
|
saturation={130}
|
|
aberrationIntensity={2}
|
|
elasticity={0.35}
|
|
cornerRadius={32}
|
|
mouseContainer={containerRef}
|
|
overLight={false}
|
|
mode="standard"
|
|
padding="unset"
|
|
onClick={() => {
|
|
console.log("Create Project")
|
|
router.push("/create")
|
|
}}
|
|
style={{
|
|
position: "absolute"
|
|
}}
|
|
>
|
|
<div className="add-project-btn">
|
|
<Plus className="w-6 h-6 icon" />
|
|
<div className="btn-text">Create Project</div>
|
|
</div>
|
|
</LiquidGlass>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
} |