forked from 77media/video-flow
适配修复
This commit is contained in:
海龙
parent
bc2302d907
commit
1b80180102
@ -33,7 +33,7 @@ export default function RootLayout({
|
||||
}}
|
||||
>
|
||||
<Providers>
|
||||
<ScreenAdapter />
|
||||
{/* <ScreenAdapter /> */}
|
||||
<div id="app" className='h-full w-full'>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
@ -173,8 +173,8 @@ const RenderTemplateStoryMode = ({
|
||||
// 模板列表渲染
|
||||
const templateListRender = () => {
|
||||
return (
|
||||
<div className="w-1/3 p-4 border-r border-white/[0.1]">
|
||||
<div className="space-y-4 max-h-[700px] overflow-y-auto template-list-scroll">
|
||||
<div className="w-1/3 p-4 border-r border-white/[0.1] overflow-y-auto">
|
||||
<div className="space-y-4 overflow-y-auto template-list-scroll">
|
||||
{templateStoryList.map((template, index) => (
|
||||
<div
|
||||
key={template.id}
|
||||
@ -562,7 +562,7 @@ const RenderTemplateStoryMode = ({
|
||||
className="photo-story-modal !pb-0 rounded-lg bg-white/[0.08] backdrop-blur-[20px] [&_.ant-modal-content]:bg-white/[0.00]"
|
||||
>
|
||||
<GlobalLoad show={isLoading} progress={localLoading}>
|
||||
<div className="rounded-2xl min-h-min transition-all duration-700 ease-out">
|
||||
<div className="rounded-2xl h-[70vh] overflow-y-hidden flex flex-col">
|
||||
{/* 弹窗头部 */}
|
||||
<div className="flex items-center justify-between px-4 pb-6 border-b border-white/[0.1]">
|
||||
<h2 className="text-2xl font-bold text-white">
|
||||
@ -576,7 +576,7 @@ const RenderTemplateStoryMode = ({
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 pb-8 ">
|
||||
<div className="flex gap-4 pb-8 flex-1 overflow-y-hidden">
|
||||
{templateListRender()}
|
||||
<div className="flex-1">{storyEditorRender()}</div>
|
||||
</div>
|
||||
|
||||
@ -31,14 +31,42 @@ import { fetchSubscriptionPlans, SubscriptionPlan } from "@/lib/stripe";
|
||||
export function HomePage2() {
|
||||
const [hPading, setHPading] = useState(0);
|
||||
useEffect(() => {
|
||||
// 为兼容不同屏幕的padding进行三次方处理
|
||||
setHPading(((window as any).Scale?.hScale || 1)**3 * 10);
|
||||
// 获取当前窗口尺寸
|
||||
const currentWidth = window.innerWidth;
|
||||
const currentHeight = window.innerHeight;
|
||||
// 计算缩放比例 (1920x1080)
|
||||
const wScale = currentWidth / 1920;
|
||||
const hScale = currentHeight / 1080;
|
||||
|
||||
// 检查app节点是否存在
|
||||
const homePage = document.getElementById("home-page");
|
||||
if (!homePage) {
|
||||
console.error("未找到app节点");
|
||||
return;
|
||||
}
|
||||
// setHPading((hScale || 1) * 10);
|
||||
// 创建样式元素
|
||||
const style = document.createElement("style");
|
||||
|
||||
// 设置CSS样式
|
||||
style.textContent = `
|
||||
#home-page {
|
||||
transform-origin: top left;
|
||||
transform: scale(${wScale}, ${hScale});
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
`;
|
||||
|
||||
// 将样式添加到head
|
||||
document.head.appendChild(style);
|
||||
}, []);
|
||||
return (
|
||||
//
|
||||
<div
|
||||
className="w-full h-screen overflow-y-auto"
|
||||
style={{ paddingBottom: `${hPading}rem` }}
|
||||
id="home-page"
|
||||
style={{ paddingBottom: `2rem` }}
|
||||
>
|
||||
<HomeModule1 />
|
||||
<HomeModule2 />
|
||||
@ -54,7 +82,7 @@ export function HomePage2() {
|
||||
function HomeModule1() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<div className="home-module1 relative flex justify-center items-start pt-[14rem] w-full h-[1280px] bg-black snap-start">
|
||||
<div className="home-module1 relative flex justify-center items-start pt-[28rem] w-full h-[1280px] bg-black snap-start">
|
||||
<video
|
||||
src="/assets/home.mp4"
|
||||
autoPlay
|
||||
@ -64,7 +92,7 @@ function HomeModule1() {
|
||||
className="absolute top-0 left-0 z-1 w-full h-full object-cover"
|
||||
></video>
|
||||
<div className="center z-10 flex flex-col items-center">
|
||||
<h1 className="text-white text-[5.75rem] leading-[100%] font-bold mb-[28rem]">
|
||||
<h1 className="text-white text-[5.75rem] leading-[100%] font-bold mb-[1rem]">
|
||||
Ideas Become Movies
|
||||
</h1>
|
||||
<p className="text-white text-[2rem] leading-[140%] font-normal">
|
||||
@ -87,19 +115,19 @@ function HomeModule1() {
|
||||
/**核心价值 */
|
||||
function HomeModule2() {
|
||||
const videoList = [
|
||||
{
|
||||
title: "Text to Movie",
|
||||
video: "/assets/module2 (1).mp4",
|
||||
},
|
||||
{
|
||||
title: "Image to Movie",
|
||||
video: "/assets/module2 (2).mp4",
|
||||
},
|
||||
{
|
||||
title: "Template to Movie",
|
||||
video: "/assets/module2 (3).mp4",
|
||||
}
|
||||
]
|
||||
{
|
||||
title: "Text to Movie",
|
||||
video: "/assets/module2 (1).mp4",
|
||||
},
|
||||
{
|
||||
title: "Image to Movie",
|
||||
video: "/assets/module2 (2).mp4",
|
||||
},
|
||||
{
|
||||
title: "Template to Movie",
|
||||
video: "/assets/module2 (3).mp4",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div
|
||||
data-alt="core-value-section"
|
||||
@ -143,7 +171,6 @@ function HomeModule2() {
|
||||
</h3>
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -197,15 +224,16 @@ function HomeModule3() {
|
||||
data-alt="vertical-grid-shadow"
|
||||
className="grid grid-cols-3 gap-[1rem] w-full h-[64rem] px-[5rem] relative"
|
||||
>
|
||||
{/* 上方阴影遮罩 - 使用 mask 实现真正的渐变模糊，加重黑色 */}
|
||||
{/* 上方阴影遮罩 - 使用 mask 实现真正的渐变模糊，加重黑色 */}
|
||||
<div
|
||||
className="absolute -top-[1rem] -left-0 w-full h-[20rem] z-20 pointer-events-none"
|
||||
style={{
|
||||
backdropFilter: 'blur(12px)',
|
||||
WebkitBackdropFilter: 'blur(12px)',
|
||||
backgroundColor: 'rgba(0,0,0,0.9)',
|
||||
mask: 'linear-gradient(to bottom, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)',
|
||||
WebkitMask: 'linear-gradient(to bottom, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)'
|
||||
backdropFilter: "blur(12px)",
|
||||
WebkitBackdropFilter: "blur(12px)",
|
||||
backgroundColor: "rgba(0,0,0,0.9)",
|
||||
mask: "linear-gradient(to bottom, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
|
||||
WebkitMask:
|
||||
"linear-gradient(to bottom, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
|
||||
}}
|
||||
></div>
|
||||
|
||||
@ -213,11 +241,12 @@ function HomeModule3() {
|
||||
<div
|
||||
className="absolute -bottom-[1rem] -left-0 w-full h-[20rem] z-20 pointer-events-none"
|
||||
style={{
|
||||
backdropFilter: 'blur(12px)',
|
||||
WebkitBackdropFilter: 'blur(12px)',
|
||||
backgroundColor: 'rgba(0,0,0,0.9)',
|
||||
mask: 'linear-gradient(to top, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)',
|
||||
WebkitMask: 'linear-gradient(to top, black 0%, black 20%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)'
|
||||
backdropFilter: "blur(12px)",
|
||||
WebkitBackdropFilter: "blur(12px)",
|
||||
backgroundColor: "rgba(0,0,0,0.9)",
|
||||
mask: "linear-gradient(to top, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
|
||||
WebkitMask:
|
||||
"linear-gradient(to top, black 0%, black 20%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
|
||||
}}
|
||||
></div>
|
||||
{videoList.map((column, columnIndex) => (
|
||||
@ -375,12 +404,10 @@ function HomeModule4() {
|
||||
}
|
||||
/**价格方案 */
|
||||
function HomeModule5() {
|
||||
const [billingType, setBillingType] = useState<'month' | 'year'>(
|
||||
"month"
|
||||
);
|
||||
const [billingType, setBillingType] = useState<"month" | "year">("month");
|
||||
|
||||
const [plans, setPlans] = useState<SubscriptionPlan[]>([]);
|
||||
const pathname = usePathname()
|
||||
const pathname = usePathname();
|
||||
// 从后端获取订阅计划数据
|
||||
useEffect(() => {
|
||||
const loadPlans = async () => {
|
||||
@ -388,24 +415,29 @@ function HomeModule5() {
|
||||
const plansData = await fetchSubscriptionPlans();
|
||||
setPlans(plansData);
|
||||
} catch (err) {
|
||||
console.error('加载订阅计划失败:', err);
|
||||
console.error("加载订阅计划失败:", err);
|
||||
}
|
||||
};
|
||||
|
||||
loadPlans();
|
||||
}, []);
|
||||
|
||||
const pricingPlans = useMemo<{
|
||||
title: string;
|
||||
price: number;
|
||||
credits: string;
|
||||
buttonText: string;
|
||||
features: string[];
|
||||
}[]>(() => {
|
||||
const pricingPlans = useMemo<
|
||||
{
|
||||
title: string;
|
||||
price: number;
|
||||
credits: string;
|
||||
buttonText: string;
|
||||
features: string[];
|
||||
}[]
|
||||
>(() => {
|
||||
return plans.map((plan) => {
|
||||
return {
|
||||
title: plan.display_name || plan.name,
|
||||
price: billingType === "month" ? plan.price_month/100 : plan.price_year/100,
|
||||
price:
|
||||
billingType === "month"
|
||||
? plan.price_month / 100
|
||||
: plan.price_year / 100,
|
||||
credits: plan.description,
|
||||
buttonText: plan.is_free ? "Try For Free" : "Subscribe Now",
|
||||
features: plan.features || [],
|
||||
@ -414,13 +446,15 @@ function HomeModule5() {
|
||||
}, [plans, billingType]);
|
||||
|
||||
const handleSubscribe = async (planName: string) => {
|
||||
if (planName === 'hobby') {
|
||||
if (planName === "hobby") {
|
||||
return;
|
||||
}
|
||||
localStorage.setItem('callBackUrl', pathname)
|
||||
localStorage.setItem("callBackUrl", pathname);
|
||||
try {
|
||||
// 使用新的Checkout Session方案（更简单！）
|
||||
const { createCheckoutSession, redirectToCheckout } = await import('@/lib/stripe');
|
||||
const { createCheckoutSession, redirectToCheckout } = await import(
|
||||
"@/lib/stripe"
|
||||
);
|
||||
|
||||
// 从localStorage获取当前用户信息
|
||||
const User = JSON.parse(localStorage.getItem("currentUser") || "{}");
|
||||
@ -433,7 +467,7 @@ function HomeModule5() {
|
||||
const result = await createCheckoutSession({
|
||||
user_id: String(User.id),
|
||||
plan_name: planName,
|
||||
billing_cycle: billingType
|
||||
billing_cycle: billingType,
|
||||
});
|
||||
|
||||
if (!result.successful || !result.data) {
|
||||
@ -442,7 +476,6 @@ function HomeModule5() {
|
||||
|
||||
// 2. 直接跳转到Stripe托管页面（就这么简单！）
|
||||
redirectToCheckout(result.data.checkout_url);
|
||||
|
||||
} catch (error) {
|
||||
throw new Error("create checkout session failed, please try again later");
|
||||
}
|
||||
@ -504,7 +537,10 @@ function HomeModule5() {
|
||||
<p className="text-white text-[0.875rem] mb-[1rem]">
|
||||
{plan.credits}
|
||||
</p>
|
||||
<button onClick={() => handleSubscribe(plan.title)} className="w-full bg-white text-black py-[0.75rem] rounded-full mb-[1rem] hover:bg-black hover:text-white transition-colors border border-white/20">
|
||||
<button
|
||||
onClick={() => handleSubscribe(plan.title)}
|
||||
className="w-full bg-white text-black py-[0.75rem] rounded-full mb-[1rem] hover:bg-black hover:text-white transition-colors border border-white/20"
|
||||
>
|
||||
{plan.buttonText}
|
||||
</button>
|
||||
<p className="w-full text-center text-white/60 text-[0.75rem] mb-[2rem]">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user