forked from 77media/video-flow
76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
'use client'
|
|
import './globals.css';
|
|
import { createContext, useContext, useEffect, useState } from 'react';
|
|
import { Providers } from '@/components/providers';
|
|
import { ConfigProvider, theme } from 'antd';
|
|
import { createScreenAdapter } from '@/utils/tools';
|
|
import { ScreenAdapter } from './ScreenAdapter';
|
|
import CallbackModal from '@/components/common/CallbackModal';
|
|
|
|
// 创建上下文来传递弹窗控制方法
|
|
const CallbackModalContext = createContext<{
|
|
setShowCallbackModal: (show: boolean) => void
|
|
} | null>(null)
|
|
|
|
// Hook 来使用弹窗控制方法
|
|
export const useCallbackModal = () => {
|
|
const context = useContext(CallbackModalContext)
|
|
if (!context) {
|
|
throw new Error('useCallbackModal must be used within CallbackModalProvider')
|
|
}
|
|
return context
|
|
}
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode
|
|
}) {
|
|
const [showCallbackModal, setShowCallbackModal] = useState(false)
|
|
const openCallback = async function (ev: MessageEvent<any>) {
|
|
console.log(ev)
|
|
if (ev.data.type === 'waiting-payment') {
|
|
setShowCallbackModal(true)
|
|
}
|
|
}
|
|
useEffect(() => {
|
|
window.addEventListener('message', openCallback)
|
|
return () => {
|
|
window.removeEventListener('message', openCallback)
|
|
}
|
|
}, [])
|
|
return (
|
|
<html lang="en" suppressHydrationWarning>
|
|
<head>
|
|
<title>AI Movie Flow - Create Amazing Videos with AI</title>
|
|
<meta name="description" content="Professional AI-powered video creation platform with advanced editing tools" />
|
|
<meta name="robots" content="noindex" />
|
|
</head>
|
|
<body className="font-sans antialiased">
|
|
<ConfigProvider
|
|
theme={{
|
|
algorithm: theme.darkAlgorithm,
|
|
token: {
|
|
// 自定义暗色主题颜色
|
|
colorBgContainer: '#1B1B1B',
|
|
colorBgElevated: '#1B1B1B',
|
|
colorBgMask: 'rgba(0, 0, 0, 0.6)',
|
|
borderRadius: 16,
|
|
},
|
|
}}
|
|
>
|
|
<CallbackModalContext.Provider value={{ setShowCallbackModal }}>
|
|
<Providers>
|
|
{/* <ScreenAdapter /> */}
|
|
<div id="app" className='h-full w-full'>
|
|
{children}
|
|
{showCallbackModal && <CallbackModal onClose={() => setShowCallbackModal(false)} />}
|
|
</div>
|
|
</Providers>
|
|
</CallbackModalContext.Provider>
|
|
</ConfigProvider>
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|