perf: in-place media card update for live lyrics
This commit is contained in:
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user