script.js aktualisiert

Neu mit Sleeptimer

script.js

@@ -5,8 +5,14 @@ document.addEventListener('DOMContentLoaded', function () {
     const presetModal = document.getElementById('preset-modal');
     const tableBody = document.querySelector('#sortable-tbody');
     const editPresetsButton = document.getElementById('edit-presets-button');
+    const openSleepTimerModalButton = document.getElementById('open-sleep-timer-modal');
+    const sleepTimerModal = document.getElementById('sleep-timer-modal');
+    const closeSleepTimerModalButton = document.getElementById('close-sleep-timer-modal');
+    const offSleepTimerModalButton = document.getElementById('off-sleep-timer-modal');
     let currentSound = null;
     let presets = [];
+    let sleepTimerTimeout = null;
+    let sleepTimerEndTime = null;
 
     initializeFooter();
     loadPresets();
@@ -73,6 +79,78 @@ document.addEventListener('DOMContentLoaded', function () {
         });
     }
 
+    openSleepTimerModalButton.addEventListener('click', function () {
+        sleepTimerModal.classList.remove('hidden');
+        sleepTimerModal.style.display = 'block';
+        updateOffButtonVisibility();
+    });
+
+    closeSleepTimerModalButton.addEventListener('click', function () {
+        sleepTimerModal.classList.add('hidden');
+        sleepTimerModal.style.display = 'none';
+    });
+
+    offSleepTimerModalButton.addEventListener('click', function () {
+        clearSleepTimer();
+        sleepTimerModal.classList.add('hidden');
+        sleepTimerModal.style.display = 'none';
+    });
+
+    document.querySelectorAll('.time-option').forEach(button => {
+        button.addEventListener('click', function () {
+            const timeInMilliseconds = button.getAttribute('data-time');
+            startSleepTimer(parseInt(timeInMilliseconds));
+            sleepTimerModal.classList.add('hidden');
+            sleepTimerModal.style.display = 'none';
+        });
+    });
+
+    function startSleepTimer(duration) {
+        if (sleepTimerTimeout) {
+            clearTimeout(sleepTimerTimeout);
+        }
+        sleepTimerEndTime = Date.now() + duration;
+        sleepTimerTimeout = setTimeout(() => {
+            stopPlayback();
+            updateSleepTimerButton();
+            updateOffButtonVisibility();
+        }, duration);
+        updateSleepTimerButton();
+        updateOffButtonVisibility();
+    }
+
+    function clearSleepTimer() {
+        if (sleepTimerTimeout) {
+            clearTimeout(sleepTimerTimeout);
+            sleepTimerTimeout = null;
+            sleepTimerEndTime = null;
+            openSleepTimerModalButton.textContent = 'Sleep Timer';
+            updateOffButtonVisibility();
+        }
+    }
+
+    function updateSleepTimerButton() {
+        if (sleepTimerEndTime) {
+            const remainingTime = Math.max(0, Math.ceil((sleepTimerEndTime - Date.now()) / 60000));
+            openSleepTimerModalButton.innerHTML = `<i class="fas fa-hourglass-half"></i> ${remainingTime} Minuten`;
+            if (remainingTime > 0) {
+                setTimeout(updateSleepTimerButton, 60000); // Update every minute
+            } else {
+                openSleepTimerModalButton.textContent = 'Sleep Timer';
+                sleepTimerEndTime = null;
+                updateOffButtonVisibility();
+            }
+        }
+    }
+
+    function updateOffButtonVisibility() {
+        if (sleepTimerTimeout) {
+            offSleepTimerModalButton.style.display = 'inline-block';
+        } else {
+            offSleepTimerModalButton.style.display = 'none';
+        }
+    }
+
     function playStream(url, item) {
         stopPlayback();
         currentSound = new Howl({