diff --git a/src/app/play/page.tsx b/src/app/play/page.tsx index fe6f195..b15fb98 100644 --- a/src/app/play/page.tsx +++ b/src/app/play/page.tsx @@ -120,6 +120,28 @@ function PlayPageClient() { // 网页全屏状态 - 控制导航栏的显示隐藏 const [isWebFullscreen, setIsWebFullscreen] = useState(false); + // 原生全屏状态 + const [isNativeFullscreen, setIsNativeFullscreen] = useState(false); + + // 监听浏览器原生全屏事件 + useEffect(() => { + const handleFullscreenChange = () => { + const isFullscreen = !!document.fullscreenElement; + setIsNativeFullscreen(isFullscreen); + }; + + document.addEventListener('fullscreenchange', handleFullscreenChange); + document.addEventListener('webkitfullscreenchange', handleFullscreenChange); + document.addEventListener('mozfullscreenchange', handleFullscreenChange); + document.addEventListener('MSFullscreenChange', handleFullscreenChange); + + return () => { + document.removeEventListener('fullscreenchange', handleFullscreenChange); + document.removeEventListener('webkitfullscreenchange', handleFullscreenChange); + document.removeEventListener('mozfullscreenchange', handleFullscreenChange); + document.removeEventListener('MSFullscreenChange', handleFullscreenChange); + }; + }, []); // 跳过片头片尾配置 const [skipConfig, setSkipConfig] = useState<{ @@ -4625,6 +4647,73 @@ function PlayPageClient() { setIsWebFullscreen(isFullscreen); }); + // 添加全屏快进快退按钮 + artPlayerRef.current.layers.add({ + name: 'seek-buttons', + html: ` +
+ `, + mounted: ($el: HTMLElement) => { + const container = $el.querySelector('.seek-buttons-container') as HTMLElement; + const backwardBtn = $el.querySelector('.seek-backward') as HTMLElement; + const forwardBtn = $el.querySelector('.seek-forward') as HTMLElement; + + // 快退5秒 + backwardBtn.onclick = () => { + if (artPlayerRef.current) { + artPlayerRef.current.currentTime = Math.max(0, artPlayerRef.current.currentTime - 5); + } + }; + + // 快进5秒 + forwardBtn.onclick = () => { + if (artPlayerRef.current) { + artPlayerRef.current.currentTime = Math.min(artPlayerRef.current.duration, artPlayerRef.current.currentTime + 5); + } + }; + + // 监听全屏状态变化 + const updateVisibility = () => { + const isFullscreen = artPlayerRef.current?.fullscreen || artPlayerRef.current?.fullscreenWeb || !!document.fullscreenElement; + const isMobile = Math.min(window.innerWidth, window.innerHeight) < 768; + const controlsVisible = !artPlayerRef.current?.template?.$player?.classList.contains('art-hide-cursor'); + + if (container) { + const shouldShow = isFullscreen && isMobile && controlsVisible; + container.style.display = shouldShow ? 'block' : 'none'; + } + }; + + artPlayerRef.current.on('fullscreen', updateVisibility); + artPlayerRef.current.on('fullscreenWeb', updateVisibility); + document.addEventListener('fullscreenchange', updateVisibility); + window.addEventListener('resize', updateVisibility); + + // 监听鼠标移动和视频事件来检测控件显示/隐藏 + artPlayerRef.current.on('video:timeupdate', updateVisibility); + if (artPlayerRef.current.template?.$player) { + const observer = new MutationObserver(updateVisibility); + observer.observe(artPlayerRef.current.template.$player, { + attributes: true, + attributeFilter: ['class'] + }); + } + + updateVisibility(); + }, + }); + // 监听视频可播放事件,这时恢复播放进度更可靠 artPlayerRef.current.on('video:canplay', () => { // 若存在需要恢复的播放进度,则跳转