修复网页全屏还显示顶部和底部栏

This commit is contained in:
mtvpls
2025-12-28 23:08:19 +08:00
parent 01d508edb0
commit 2d132d7b66
2 changed files with 35 additions and 17 deletions
+12 -3
View File
@@ -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
+23 -14
View File
@@ -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>
); );