diff --git a/.gitignore b/.gitignore index db18cd5..cdaf722 100644 --- a/.gitignore +++ b/.gitignore @@ -71,3 +71,4 @@ scripts/test .agents/ skills-lock.json +pnpm-lock.yaml diff --git a/package.json b/package.json index 5d35bcb..cf6245b 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "@vidstack/react": "^1.12.13", "@xmldom/xmldom": "^0.9.10", "anime4k-webgpu": "^1.0.0", - "artplayer": "^5.3.0", + "artplayer": "^5.4.0", "artplayer-plugin-danmuku": "^5.2.0", "better-sqlite3": "^12.6.2", "bs58": "^6.0.0", diff --git a/src/app/live/page.tsx b/src/app/live/page.tsx index 2f6fe1d..6d600ed 100644 --- a/src/app/live/page.tsx +++ b/src/app/live/page.tsx @@ -319,6 +319,19 @@ function LivePageClient() { // 播放器引用 const artPlayerRef = useRef(null); const artRef = useRef(null); + const syncAnime4KCanvasFlip = (flip?: string) => { + const canvas = anime4kRef.current?.canvas as HTMLCanvasElement | undefined; + if (!canvas) return; + + const currentFlip = flip || artPlayerRef.current?.flip || 'normal'; + canvas.style.transformOrigin = 'center center'; + canvas.style.transform = + currentFlip === 'horizontal' + ? 'scaleX(-1)' + : currentFlip === 'vertical' + ? 'scaleY(-1)' + : 'none'; + }; // 分组标签滚动相关 const groupContainerRef = useRef(null); @@ -906,6 +919,7 @@ function LivePageClient() { handleCanvasClick, handleCanvasDblClick, }; + syncAnime4KCanvasFlip(); console.log('Anime4K超分已启用,模式:', anime4kModeRef.current, '倍数:', scale); if (artPlayerRef.current) { @@ -1937,9 +1951,9 @@ function LivePageClient() { autoSize: false, autoMini: false, screenshot: false, - setting: webGPUSupported, // 只有支持WebGPU时才显示设置按钮 + setting: true, loop: false, - flip: false, + flip: true, playbackRate: false, aspectRatio: false, fullscreen: true, @@ -2053,6 +2067,8 @@ function LivePageClient() { ], }); + artPlayerRef.current.on('flip', syncAnime4KCanvasFlip); + // 监听播放器事件 artPlayerRef.current.on('ready', () => { setError(null); diff --git a/src/app/play/page.tsx b/src/app/play/page.tsx index 07a57e0..5740680 100644 --- a/src/app/play/page.tsx +++ b/src/app/play/page.tsx @@ -1794,6 +1794,19 @@ function PlayPageClient() { const artPlayerRef = useRef(null); const artRef = useRef(null); + const syncAnime4KCanvasFlip = (flip?: string) => { + const canvas = anime4kRef.current?.canvas as HTMLCanvasElement | undefined; + if (!canvas) return; + + const currentFlip = flip || artPlayerRef.current?.flip || 'normal'; + canvas.style.transformOrigin = 'center center'; + canvas.style.transform = + currentFlip === 'horizontal' + ? 'scaleX(-1)' + : currentFlip === 'vertical' + ? 'scaleY(-1)' + : 'none'; + }; const customSubtitleInputRef = useRef(null); const customSubtitleRef = useRef(null); const currentSubtitleLabelRef = useRef('关闭'); @@ -3425,6 +3438,7 @@ function PlayPageClient() { handleCanvasClick, handleCanvasDblClick, }; + syncAnime4KCanvasFlip(); console.log('Anime4K超分已启用,模式:', anime4kModeRef.current, '倍数:', scale); if (artPlayerRef.current) { @@ -6288,7 +6302,7 @@ function PlayPageClient() { screenshot: true, setting: true, loop: false, - flip: false, + flip: true, playbackRate: true, aspectRatio: false, fullscreen: !isIOS, // iOS 禁用原生全屏按钮,避免触发系统播放器 @@ -7314,6 +7328,8 @@ function PlayPageClient() { clearPlayerTimeouts(); }); + artPlayerRef.current.on('flip', syncAnime4KCanvasFlip); + // 监听播放器事件 artPlayerRef.current.on('ready', async () => { setError(null);