diff --git a/js/player.js b/js/player.js
index 84773af..50ca852 100644
--- a/js/player.js
+++ b/js/player.js
@@ -574,35 +574,44 @@ export class Player {
updateSleepTimerUI() {
const timerBtn = document.getElementById('sleep-timer-btn');
- if (!timerBtn) return;
-
- if (this.isSleepTimerActive()) {
- const remaining = this.getSleepTimerRemaining();
- if (remaining > 0) {
- const minutes = Math.floor(remaining / 60);
- const seconds = remaining % 60;
- timerBtn.innerHTML = `${minutes}:${seconds.toString().padStart(2, '0')}`;
- timerBtn.title = `Sleep Timer: ${minutes}:${seconds.toString().padStart(2, '0')} remaining`;
- timerBtn.classList.add('active');
+ const timerBtnDesktop = document.getElementById('sleep-timer-btn-desktop');
+
+ const updateBtn = (btn) => {
+ if (!btn) return;
+ if (this.isSleepTimerActive()) {
+ const remaining = this.getSleepTimerRemaining();
+ if (remaining > 0) {
+ const minutes = Math.floor(remaining / 60);
+ const seconds = remaining % 60;
+ btn.innerHTML = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+ btn.title = `Sleep Timer: ${minutes}:${seconds.toString().padStart(2, '0')} remaining`;
+ btn.classList.add('active');
+ btn.style.color = 'var(--primary)';
+ } else {
+ btn.innerHTML = `
+
+ `;
+ btn.title = 'Sleep Timer';
+ btn.classList.remove('active');
+ btn.style.color = '';
+ }
} else {
- timerBtn.innerHTML = `
+ btn.innerHTML = `
`;
- timerBtn.title = 'Sleep Timer';
- timerBtn.classList.remove('active');
+ btn.title = 'Sleep Timer';
+ btn.classList.remove('active');
+ btn.style.color = '';
}
- } else {
- timerBtn.innerHTML = `
-
- `;
- timerBtn.title = 'Sleep Timer';
- timerBtn.classList.remove('active');
- }
+ };
+
+ updateBtn(timerBtn);
+ updateBtn(timerBtnDesktop);
}
}