修复网页全屏还显示顶部和底部栏
This commit is contained in:
+12
-3
@@ -104,6 +104,9 @@ function PlayPageClient() {
|
|||||||
// 网盘搜索弹窗状态
|
// 网盘搜索弹窗状态
|
||||||
const [showPansouDialog, setShowPansouDialog] = useState(false);
|
const [showPansouDialog, setShowPansouDialog] = useState(false);
|
||||||
|
|
||||||
|
// 网页全屏状态 - 控制导航栏的显示隐藏
|
||||||
|
const [isWebFullscreen, setIsWebFullscreen] = useState(false);
|
||||||
|
|
||||||
// 跳过片头片尾配置
|
// 跳过片头片尾配置
|
||||||
const [skipConfig, setSkipConfig] = useState<{
|
const [skipConfig, setSkipConfig] = useState<{
|
||||||
enable: boolean;
|
enable: boolean;
|
||||||
@@ -4248,6 +4251,12 @@ function PlayPageClient() {
|
|||||||
lastPlaybackRateRef.current = artPlayerRef.current.playbackRate;
|
lastPlaybackRateRef.current = artPlayerRef.current.playbackRate;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 监听网页全屏事件,控制导航栏显示隐藏
|
||||||
|
artPlayerRef.current.on('fullscreenWeb', (isFullscreen: boolean) => {
|
||||||
|
console.log('网页全屏状态变化:', isFullscreen);
|
||||||
|
setIsWebFullscreen(isFullscreen);
|
||||||
|
});
|
||||||
|
|
||||||
// 监听视频可播放事件,这时恢复播放进度更可靠
|
// 监听视频可播放事件,这时恢复播放进度更可靠
|
||||||
artPlayerRef.current.on('video:canplay', () => {
|
artPlayerRef.current.on('video:canplay', () => {
|
||||||
// 若存在需要恢复的播放进度,则跳转
|
// 若存在需要恢复的播放进度,则跳转
|
||||||
@@ -4509,7 +4518,7 @@ function PlayPageClient() {
|
|||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<PageLayout activePath='/play'>
|
<PageLayout activePath='/play' hideNavigation={isWebFullscreen}>
|
||||||
<div className='flex items-center justify-center min-h-screen bg-transparent'>
|
<div className='flex items-center justify-center min-h-screen bg-transparent'>
|
||||||
<div className='text-center max-w-md mx-auto px-6'>
|
<div className='text-center max-w-md mx-auto px-6'>
|
||||||
{/* 动画影院图标 */}
|
{/* 动画影院图标 */}
|
||||||
@@ -4601,7 +4610,7 @@ function PlayPageClient() {
|
|||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
return (
|
return (
|
||||||
<PageLayout activePath='/play'>
|
<PageLayout activePath='/play' hideNavigation={isWebFullscreen}>
|
||||||
<div className='flex items-center justify-center min-h-screen bg-transparent'>
|
<div className='flex items-center justify-center min-h-screen bg-transparent'>
|
||||||
<div className='text-center max-w-md mx-auto px-6'>
|
<div className='text-center max-w-md mx-auto px-6'>
|
||||||
{/* 错误图标 */}
|
{/* 错误图标 */}
|
||||||
@@ -4668,7 +4677,7 @@ function PlayPageClient() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageLayout activePath='/play'>
|
<PageLayout activePath='/play' hideNavigation={isWebFullscreen}>
|
||||||
{/* TMDB背景图 */}
|
{/* TMDB背景图 */}
|
||||||
{tmdbBackdrop && (
|
{tmdbBackdrop && (
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -10,37 +10,44 @@ import { VersionCheckProvider } from './VersionCheckProvider';
|
|||||||
interface PageLayoutProps {
|
interface PageLayoutProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
activePath?: string;
|
activePath?: string;
|
||||||
|
hideNavigation?: boolean; // 控制是否隐藏顶部和底部导航栏
|
||||||
}
|
}
|
||||||
|
|
||||||
const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
|
const PageLayout = ({ children, activePath = '/', hideNavigation = false }: PageLayoutProps) => {
|
||||||
return (
|
return (
|
||||||
<VersionCheckProvider>
|
<VersionCheckProvider>
|
||||||
<div className='w-full min-h-screen'>
|
<div className='w-full min-h-screen'>
|
||||||
{/* 移动端头部 */}
|
{/* 移动端头部 */}
|
||||||
<MobileHeader showBackButton={['/play', '/live'].includes(activePath)} />
|
{!hideNavigation && (
|
||||||
|
<MobileHeader showBackButton={['/play', '/live'].includes(activePath)} />
|
||||||
|
)}
|
||||||
|
|
||||||
{/* 主要布局容器 */}
|
{/* 主要布局容器 */}
|
||||||
<div className='flex md:grid md:grid-cols-[auto_1fr] w-full min-h-screen md:min-h-auto'>
|
<div className='flex md:grid md:grid-cols-[auto_1fr] w-full min-h-screen md:min-h-auto'>
|
||||||
{/* 侧边栏 - 桌面端显示,移动端隐藏 */}
|
{/* 侧边栏 - 桌面端显示,移动端隐藏 */}
|
||||||
<div className='hidden md:block'>
|
{!hideNavigation && (
|
||||||
<Sidebar activePath={activePath} />
|
<div className='hidden md:block'>
|
||||||
</div>
|
<Sidebar activePath={activePath} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* 主内容区域 */}
|
{/* 主内容区域 */}
|
||||||
<div className='relative min-w-0 flex-1 transition-all duration-300'>
|
<div className='relative min-w-0 flex-1 transition-all duration-300'>
|
||||||
{/* 桌面端左上角返回按钮 */}
|
{/* 桌面端左上角返回按钮 */}
|
||||||
{['/play', '/live'].includes(activePath) && (
|
{!hideNavigation && ['/play', '/live'].includes(activePath) && (
|
||||||
<div className='absolute top-3 left-1 z-20 hidden md:flex'>
|
<div className='absolute top-3 left-1 z-20 hidden md:flex'>
|
||||||
<BackButton />
|
<BackButton />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 桌面端顶部按钮 */}
|
{/* 桌面端顶部按钮 */}
|
||||||
<div className='absolute top-2 right-4 z-20 hidden md:flex items-center gap-2'>
|
{!hideNavigation && (
|
||||||
<ThemeToggle />
|
<div className='absolute top-2 right-4 z-20 hidden md:flex items-center gap-2'>
|
||||||
<UserMenu />
|
<ThemeToggle />
|
||||||
<UpdateNotification />
|
<UserMenu />
|
||||||
</div>
|
<UpdateNotification />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* 主内容 */}
|
{/* 主内容 */}
|
||||||
<main
|
<main
|
||||||
@@ -55,9 +62,11 @@ const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 移动端底部导航 */}
|
{/* 移动端底部导航 */}
|
||||||
<div className='md:hidden'>
|
{!hideNavigation && (
|
||||||
<MobileBottomNav activePath={activePath} />
|
<div className='md:hidden'>
|
||||||
</div>
|
<MobileBottomNav activePath={activePath} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</VersionCheckProvider>
|
</VersionCheckProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user