From e251421fb8d1274f89e236dba57e1736d139c8f4 Mon Sep 17 00:00:00 2001
From: Sora <8521327+SoraKasvgano@users.noreply.github.com>
Date: Mon, 19 Jan 2026 15:20:33 +0800
Subject: [PATCH] add more debug info for aplayer

add more debug info for aplayer
---
 resources/aplayer-share.js | 68 +++++++++++++++++++++++++++-----------
 resources/aplayer.html     | 21 +++++++++---
 2 files changed, 65 insertions(+), 24 deletions(-)

diff --git a/resources/aplayer-share.js b/resources/aplayer-share.js
index f26c607d8..e3c2ee60b 100644
--- a/resources/aplayer-share.js
+++ b/resources/aplayer-share.js
@@ -9,8 +9,17 @@
   function initAPlayer() {
     console.log('APlayer initialization started');
     
+    // Check if APlayer is loaded
     if (typeof APlayer === 'undefined') {
-      console.error('APlayer library not loaded');
+      console.error('APlayer library not loaded - checking if script loaded');
+      
+      // Try to load APlayer if not available
+      const aplayerScript = document.querySelector('script[src*="APlayer.min.js"]');
+      if (!aplayerScript) {
+        console.error('APlayer script tag not found in DOM');
+      } else {
+        console.log('APlayer script tag found:', aplayerScript.src);
+      }
       return;
     }
     console.log('APlayer library loaded');
@@ -63,28 +72,49 @@
       return;
     }
     console.log('APlayer container found:', container);
+    console.log('Container dimensions:', container.offsetWidth, 'x', container.offsetHeight);
+    console.log('Container styles:', window.getComputedStyle(container));
 
     console.log('Creating APlayer with playlist:', playlist);
     
-    const ap = new APlayer({
-      container: container,
-      lrcType: 0,
-      audio: playlist,
-      autoplay: false,
-      theme: '#b7daff',
-      loop: 'all',
-      order: 'list',
-      preload: 'auto',
-      volume: 0.7,
-      mutex: true,
-      listFolded: false,
-      listMaxHeight: 90,
-      fixed: false,
-      mini: false,
-    });
+    try {
+      const ap = new APlayer({
+        container: container,
+        lrcType: 0,
+        audio: playlist,
+        autoplay: false,
+        theme: '#b7daff',
+        loop: 'all',
+        order: 'list',
+        preload: 'auto',
+        volume: 0.7,
+        mutex: true,
+        listFolded: false,
+        listMaxHeight: 90,
+        fixed: false,
+        mini: false,
+      });
 
-    // Log initialization
-    console.log('APlayer initialized with', playlist.length, 'tracks');
+      // Log initialization
+      console.log('APlayer initialized with', playlist.length, 'tracks');
+      console.log('APlayer instance:', ap);
+      
+      // Check if APlayer created DOM elements
+      setTimeout(() => {
+        const aplayerElements = container.querySelectorAll('*');
+        console.log('APlayer created', aplayerElements.length, 'child elements');
+        
+        if (aplayerElements.length === 0) {
+          console.error('APlayer did not create any child elements - initialization failed');
+        } else {
+          console.log('APlayer child elements:', aplayerElements);
+        }
+      }, 100);
+      
+    } catch (error) {
+      console.error('APlayer initialization failed:', error);
+      return;
+    }
 
     // Optional: Add event listeners
     ap.on('play', function() {
diff --git a/resources/aplayer.html b/resources/aplayer.html
index ff79856f4..ea1050203 100644
--- a/resources/aplayer.html
+++ b/resources/aplayer.html
@@ -37,8 +37,8 @@
         }
 
         .header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
+            background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
+            color: #333;
             padding: 30px;
             text-align: center;
         }
@@ -56,16 +56,27 @@
 
         .player-wrapper {
             padding: 20px;
-            min-height: 300px;
+            min-height: 400px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #f9f9f9;
+            border-radius: 8px;
+            margin: 20px 0;
         }
 
         #aplayer {
             margin: 0;
             width: 100% !important;
-            height: auto !important;
-            min-height: 200px !important;
+            height: 300px !important;
+            min-height: 300px !important;
             visibility: visible !important;
             display: block !important;
+            opacity: 1 !important;
+            z-index: 10 !important;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
         }
 
         .footer {