From a37d64647f42d5eb524a4018edebb6d263d54fcf Mon Sep 17 00:00:00 2001
From: mtvpls <mtvpls@redaaa.ip-ddns.com>
Date: Thu, 11 Jun 2026 00:33:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=87=E7=BA=A7artplayer=E5=88=B05.4.0?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E7=94=BB=E9=9D=A2=E7=BF=BB=E8=BD=AC?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore            |  1 +
 package.json          |  2 +-
 src/app/live/page.tsx | 20 ++++++++++++++++++--
 src/app/play/page.tsx | 18 +++++++++++++++++-
 4 files changed, 37 insertions(+), 4 deletions(-)

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<any>(null);
   const artRef = useRef<HTMLDivElement | null>(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<HTMLDivElement>(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<any>(null);
   const artRef = useRef<HTMLDivElement | null>(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<HTMLInputElement | null>(null);
   const customSubtitleRef = useRef<CustomSubtitleState | null>(null);
   const currentSubtitleLabelRef = useRef<string>('关闭');
@@ -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);