升级artplayer到5.4.0，增加画面翻转功能

.gitignore

@@ -71,3 +71,4 @@ scripts/test
 
 .agents/
 skills-lock.json
+pnpm-lock.yaml

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",

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);

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);