Skip to content

Commit 625c000

Browse files
author
Hongzhi Wen
committed
feat(music): inject CSS for music UI and ensure proper loading
- Added a new function to inject CSS stylesheets independently of the APlayer library, ensuring that the music UI styles are loaded correctly. - Implemented a mechanism to check if the CSS has already been injected to prevent duplicate loading. - Called the CSS injection function during the initial rendering of the music player to enhance the user interface experience.
1 parent 80e326d commit 625c000

1 file changed

Lines changed: 21 additions & 19 deletions

File tree

static/music_ui.js

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,25 @@
4545
]
4646
};
4747

48+
// --- CSS 注入(独立于 APlayer 库加载,follower 镜像 bar 也需要) ---
49+
const injectCSS = (path) => new Promise((res) => {
50+
if (!path) return res();
51+
if (document.querySelector(`link[href*="${path}"]`)) return res();
52+
const link = document.createElement('link');
53+
link.rel = 'stylesheet';
54+
link.href = path;
55+
link.onload = () => { console.log('[Music UI] 样式加载成功:', path); res(); };
56+
link.onerror = () => { console.error('[Music UI] 样式加载失败,请检查路径:', path); res(); };
57+
document.head.appendChild(link);
58+
});
59+
60+
let musicUiCssInjected = false;
61+
const ensureMusicUiCSS = () => {
62+
if (musicUiCssInjected) return;
63+
musicUiCssInjected = true;
64+
injectCSS(MUSIC_CONFIG.assets.uiCssPath);
65+
};
66+
4867
let currentPlayingTrack = null;
4968
let localPlayer = null;
5069
let musicCardMessageId = null;
@@ -501,6 +520,7 @@
501520
if (musicBar && musicBar.dataset.mirror !== 'true') return;
502521

503522
if (firstRender) {
523+
ensureMusicUiCSS();
504524
let mountTarget = document.getElementById('music-player-mount');
505525
let insertBeforeEl = null;
506526
if (!mountTarget) {
@@ -1136,25 +1156,7 @@
11361156
if (aplayerLoadPromise) return aplayerLoadPromise;
11371157

11381158
aplayerLoadPromise = new Promise((resolve, reject) => {
1139-
// 核心修复:定义一个真正的函数来加载 CSS
1140-
const injectCSS = (path) => new Promise((res) => {
1141-
if (!path) return res();
1142-
if (document.querySelector(`link[href*="${path}"]`)) return res();
1143-
1144-
const link = document.createElement('link');
1145-
link.rel = 'stylesheet';
1146-
link.href = path;
1147-
link.onload = () => {
1148-
console.log('[Music UI] 样式加载成功:', path);
1149-
res();
1150-
};
1151-
link.onerror = () => {
1152-
console.error('[Music UI] 样式加载失败,请检查路径:', path);
1153-
res(); // 失败也要继续,不能卡死
1154-
};
1155-
document.head.appendChild(link);
1156-
});
1157-
1159+
musicUiCssInjected = true;
11581160
const cssPromises = [
11591161
injectCSS(MUSIC_CONFIG.assets.cssPath),
11601162
injectCSS(MUSIC_CONFIG.assets.uiCssPath)

0 commit comments

Comments
 (0)