perf: in-place media card update for live lyrics

This commit is contained in:
2026-08-16 21:10:08 +08:00
parent 18a237bd1f
commit ed8471a9e7
+21
View File
@@ -126,9 +126,30 @@ window.HearthEvents.mediaSessionChanged = function (infos) {
} }
const grid = document.getElementById('tri-col'); const grid = document.getElementById('tri-col');
if (!grid) return; if (!grid) return;
// 若媒体卡已存在且还有媒体,增量更新(歌词实时变化时避免重建整个首页导致卡顿)
// If the media card exists and media is still active, update in place (avoid
// rebuilding the whole home on every live-lyrics change, which causes jank)
const card = grid.querySelector('.media-card');
if (card && currentMediaList && currentMediaList.length > 0) {
updateMediaCardInPlace(card, currentMediaList[currentMediaIndex]);
return;
}
window.updateHomeCards(); window.updateHomeCards();
}; };
// 增量更新媒体卡内容(标题/艺术家/封面/播放图标),不重建整个首页
// Update the media card in place (title/artist/cover/play icon) without rebuilding
function updateMediaCardInPlace(card, info) {
const tt = card.querySelector('.tt');
if (tt) tt.textContent = info.title;
const ar = card.querySelector('.ar');
if (ar) ar.textContent = info.artist;
const cover = card.querySelector('.cover');
if (cover && info.cover) cover.src = info.cover;
const playBtn = card.querySelector('[data-act="play"]');
if (playBtn) playBtn.innerHTML = info.playing ? ICON_PAUSE : ICON_PLAY;
}
// 媒体卡:封面 + 标题/艺术家 + 进度条 + 控制按钮 + 多会话滑动切换 // 媒体卡:封面 + 标题/艺术家 + 进度条 + 控制按钮 + 多会话滑动切换
// Media card: cover + title/artist + progress + controls + multi-session swipe // Media card: cover + title/artist + progress + controls + multi-session swipe
function renderMediaCard(info) { function renderMediaCard(info) {